Tutorial
April 1, 2023

HTML Fundamental

HTML


HTML Components

sample.html

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <h1>This is an announcement</h1>
    <p>Hello World!</p>
    <a href="https://www.google.com/">This is a link</a>
    <img src="hello.jpg" alt="hello" width="100", height="150">
  </body>
</html>

<!DOCTYPE html> declaration defines this document is an HTML5 document, it helps the browser to display web pages correctly. All HTML documents must start with a document type declaration, it is not case sensitive.

<html> is the root element of an HTML page

<head> contains meta information about the HTML page


HTML Elements


HTML Attributes


Examples of Attributes as below

sample.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<!-- lang attribute specifies the language of the web page, to assit search engines and browsers -->
<!-- Country code can be added after to the language code -->
<html lang="en-AU">
  <body>
    <!-- href attribute specifies the URL of the page the link goes to -->
		<a href="https://www.google.com/">Visit Google</a>

		<!-- img attribute specifies the path to the image to be displayed -->
		<!-- alt attribute specifies the alternate text for image to display if the image cannot be displayed -->
		<!-- width and height attribute specifies the width and height of the image in pixels -->
		<img src="/img/pic.png" alt="hello" width="100" height="150">

		
    <!-- title attribute used to defines some extra information about an element. For this, when mouse hover on this paragraph, will display a message said "I'm a tooltip" -->
    <!-- style attribute used to add styles to an elements such as color, font, size and more. -->
    <!-- We can use single quote or double quote in HTML, based on situtation -->
    <p title='John "ShotGun" Nelson'>This is a single quote example</p>
		<p title="I'm a tooltip" style="color:red;">This is a red paragraph.</p>
  </body>
</html>

Two ways to specify the URL in src attribute.

  1. Absolute URL

    Link to an external image that is hosted on another website.

    1
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/63/IMG_%28business%29.svg/1200px-IMG_%28business%29.svg.png">

    Note:

    External images might be under copyright.

    Also, you cannot control external images, it can be removed or changed suddenly.

  2. Relative URL

    Link to an image that is hosted within the website. The URL does not include the domain name.

    If the URL start with a slash, it will be relative to the domain.

    1
    <img src="/img/pic.png">

    If the URL start without a slash, it will be relative to the current page.

    1
    <img src="pic.png">

It is always the best to use relative URLs. It will not break if you change domain.


HTML Heading


HTML Paragraph


HTML Styles


HTML Text Formatting

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<p>This text is normal.</p>
<p><b>Bold text</b></p>
<p><strong>Important text</strong></p>
<p><i>Italic text</i></p>
<p><em>Emphasized text</em></p>
<p><mark>Marked text</mark></p>
<p>This is a <small>smaller</small> text.</p>
<p><del>Deleted text</del></p>
<p><ins>Inserted text</ins></p>
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
<p>This is <sub>subscripted</sub> text.</p>
<p>This is a use of subscripted example. H<sub>2</sub>O</p>
<p>This is <sup>superscripted</sup> text.</p>
<p>This is a use of superscripted example. WWW<sup>[1]</sup> Or 10<sup>5</sup></p>

image-20230401173403304


HTML Quotation and Citation Elements

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<p>Here is a quote from WWF's website:</p>

<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 60 years, WWF has worked to help people and nature thrive. As the world's leading conservation organization, WWF works in nearly 100 countries. At every level, we collaborate with people around the world to develop and deliver innovative solutions that protect communities, wildlife, and the places in which they live.
</blockquote>


<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>


<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>


<address>
Written by John Doe.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>


<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>


<bdo dir="rtl">This line will be written from right to left</bdo>

image-20230401180032800


HTML Comments


HTML Colors


HTML CSS

Css can be added to HTML document in 3 ways:


1
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>

By default, links will appear as follows in all browsers:

  • An unvisited link is underlined and blue
  • A visited link is underlined and purple
  • An active link is underlined and red

Links can be styled with CSS, to get another look!

By default, the linked page will be displayed in the current browser window.

The target attribute specifies where to open the linked document.

1
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

HTML Images

Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image.

Syntax

<img src="url" alt="alternatetext">

Example

1
<img src="pic_trulli.jpg" alt="Italian Trulli">

Better using the style attribute to set the pictures width and height. It prevents styles sheets from changing the size of images

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
	<head>
		<style>
			/* This style sets the width of all images to 100%: */
			img {
  		width: 100%;
			}
		</style>
	</head>
	<body>
		<h2>Width/Height Attributes or Style?</h2>
		<p>The first image uses the width attribute (set to 128 pixels), but the style in the head section overrides it, and sets the width to 100%.</p>
		<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

		<hr>
  
		<p>The second image uses the style attribute to set the width to 128 pixels, this will not be overridden by the style in the head section:</p>
		<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
	</body>
</html>

image-20230402170714300

Image Floating

Use the CSS float property to let the image float to the right or to the left of a text

1
2
3
4
5
6
7
8
9
<p>
<img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.
</p>

<p>
<img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.
</p>

image-20230402171430147

Image Map

The HTML <map> tag defines an image map. An image map is an image with clickable areas. The areas are defined with one or more <area> tags.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
	<body>
		<h2>Image Maps</h2>
		<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>

		<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

		<map name="workmap">
  		<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  		<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  		<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
		</map>
	</body>
</html>

ezgif.com-video-to-gif2222

HTML Classes

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
} 

.main {
  text-align: center;
}
</style>
</head>
<body>

<h2>Multiple Classes</h2>
<p>Here, all three h2 elements belongs to the "city" class. In addition, London also belongs to the "main" class, which center-aligns the text.</p>

<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>

</body>
</html>

HTML Id

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
<head>
<style>
/* Style the element with the id "myHeader" */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}

/* Style all elements with the class name "city" */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
} 
</style>
</head>
<body>

<h2>Difference Between Class and ID</h2>
<p>A class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page:</p>

<!-- An element with a unique id -->
<h1 id="myHeader">My Cities</h1>

<!-- Multiple elements with same class -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

</body>
</html>

HTML Head


HTML Layout

image-20230402194850335

About this Post

This post is written by Andy, licensed under CC BY-NC 4.0.

#HTML