HTML Introduction

HTML is the standard markup language for creating Web pages.

What is HTML?

HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as “this is a heading”, “this is a paragraph”, “this is a link”, etc.

A Simple HTML Document

Example

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Example Explained

The <!DOCTYPE html> declaration defines that this document is an HTML5 document
The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML page
The <title> element specifies a title for the HTML page (which is shown in the browser’s title bar or in the page’s tab)
The <body> element defines the document’s body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
The <h1> element defines a large heading
The <p> element defines a paragraph

What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:

<tagname> Content goes here… </tagname>

The HTML element is everything from the start tag to the end tag:

<h1>My First Heading</h1>

<p>My first paragraph.</p>

Web Browsers?

The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly.

A browser does not display the HTML tags, but uses them to determine how to display the document:

HTML Page Structure?

Below is a visualization of an HTML page structure:

A simple text editor is all you need to learn HTML.

[code]

}

.size{
background-color:#ffffff;
margin-top: 100px;
margin-left:500px;
margin-right:500px;
border-radius: 15px;

}
h2{
text-align: center;

}
table.center{
margin-bottom:auto;
margin-top:auto;
margin-right:auto;
margin-left:auto;
}
input[type=submit]{
background-color: #0000ff;
color: ffffff;
margin-left: 20px;
padding-left: 30px;
padding-right: 30px;
cursor: pointer;
}

input[type=submit]:hover{
background-color: #c0c0c0;
color: #ff0000;

}
</style>
</head>

<body>

<form class=”size”>
<h2>ICT STUDENTS FORM</h2>
<table class=”center”>
<tr>
<td>FIRST NAME: </td>

</tr>

<tr>
<td> GENDER: </td>
<td><input type=”radio” name=”Gender”>Male
<input type=”radio” name=”Gender”>Female
<input type=”radio” name=”Gender”>Others</td>
</tr>

<tr>
<td>ADDRESS: </td>
<td>
<input type =”text” name=”Add” placeholder=”Eg: 34D Main Motor Road.”>
</td>

</tr>
<tr>
<td>CITY: </td>
<td><input type=”text” placeholder=”Eg: City” />
</td>
<tr>
<td>E-MAIL:</td>
<td><input type=”text” name=”E-mail” placeholder=”info@kugbahost.com” required /></td>

</tr>
<tr><td></td></tr>
<tr>

<td>PHONE NO.:</td>
<td>
<select>

</select>

</table>

</div>
</form>

</body>

</html>

[/code]

Learn HTML Using Notepad or TextEdit

Web pages can be created and modified by using professional HTML editors.

However, for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit (Mac).

We believe in that using a simple text editor is a good way to learn HTML.

Follow the steps below to create your first web page with Notepad or TextEdit.

Step 1: Open Notepad (PC)

Windows 8 or later:

Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.

Windows 7 or earlier:

Open Start > Programs > Accessories > Notepad

Step 1: Open TextEdit (Mac)

Open Finder > Applications > TextEdit

Also change some preferences to get the application to save files correctly. In Preferences > Format > choose “Plain Text”

Then under “Open and Save”, check the box that says “Display HTML files as HTML code instead of formatted text”.

Then open a new document to place the code.

Step 2: Write Some HTML

Write or copy the following HTML code into Notepad:

[code]

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

[/code]

Step 3: Save the HTML Page

Save the file on your computer. Select File > Save as in the Notepad menu.

Name the file “index.htm” and set the encoding to UTF-8 (which is the preferred encoding for HTML files).

Step 4: View the HTML Page in Your Browser

Open the saved HTML file in your favorite browser (double click on the file, or right-click – and choose “Open with”).

The result will look much like this:

HTML Basic

HTML Basic Examples

In this chapter we will show some basic HTML examples.

Don’t worry if we use tags you have not learned about yet.

HTML Documents

All HTML documents must start with a document type declaration: <!DOCTYPE html>.

The HTML document itself begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>.

Example

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

The '!DOCTYPE' Declaration

The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages correctly.

It must only appear once, at the top of the page (before any HTML tags).

The <!DOCTYPE> declaration is not case sensitive.

The <!DOCTYPE> declaration for HTML5 is:

<!DOCTYPE html>

HTML Headings

Example

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

HTML Paragraphs

HTML paragraphs are defined with the <p> tag:.

Example

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML Links

HTML links are defined with the tag:<a>

Example

<a href=”https://www.w3schools.com”>This is a link</a>.

The link’s destination is specified in the attribute. href

Attributes are used to provide additional information about HTML elements.

You will learn more about attributes in a later chapter.

HTML Images

HTML images are defined with the tag.<img>

The source file (), alternative text (), , and are provided as attributes:srcaltwidthheight

Example

How to View HTML Source

Have you ever seen a Web page and wondered “Hey! How did they do that?”

View HTML Source Code:

Right-click in an HTML page and select “View Page Source” (in Chrome) or “View Source” (in Edge), or similar in other browsers. This will open a window containing the HTML source code of the page.

Inspect an HTML Element:

Right-click on an element (or a blank area), and choose “Inspect” or “Inspect Element” to see what elements are made up of (you will see both the HTML and the CSS). You can also edit the HTML or CSS on-the-fly in the Elements or Styles panel that opens.

HTML Elements

An HTML element is defined by a start tag, some content, and an end tag.

HTML Elements

The HTML element is everything from the start tag to the end tag:

<tagname>Content goes here…</tagname>

Examples of some HTML elements:

<h1>My First Heading</h1>

<p>My first paragraph.</p>

Nested HTML Elements

HTML Elements

HTML elements can be nested (this means that elements can contain other elements).

All HTML documents consist of nested HTML elements.

The following example contains four HTML elements (<html>, <body>, <h1> and <p>):

Example

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Example Explained

The <html> element is the root element and it defines the whole HTML document.

It has a start tag <html> and an end tag </html>.

Then, inside the <html> element there is a <body> element:

<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>

The <body> element defines the document’s body.

It has a start tag <body> and an end tag </body>.

Then, inside the <body> element there are two other elements: <h1> and <p>:

<h1>My First Heading</h1>
<p>My first paragraph.</p>

The <h1> element defines a heading.

It has a start tag <h1> and an end tag </h1>:

<h1>My First Heading</h1>

The <p> element defines a paragraph.

It has a start tag <p> and an end tag </p>:

<p>My first paragraph.</p>

I am message box. Click edit button to change this text.

Never Skip the End Tag

Some HTML elements will display correctly, even if you forget the end tag:

Example

<p>This is a paragraph
<p>This is a paragraph

</body>
</html>

Empty HTML Elements

HTML elements with no content are called empty elements.

The <br> tag defines a line break, and is an empty element without a closing tag:

Example

<p>This is a <br> paragraph with a line break.</p>

HTML is Not Case Sensitive

HTML tags are not case sensitive: <P> means the same as <p>.

The HTML standard does not require lowercase tags, but W3C recommends lowercase in HTML, and demands lowercase for stricter document types like XHTML.

HTML Tag Reference

HTML Styles

The HTML style attribute is used to add styles to an element, such as color, font, size, and more.

Example

I am Red

I am Blue

I am Big

The HTML Style Attribute

Setting the style of an HTML element, can be done with the style attribute.

The HTML style attribute has the following syntax:

<tagname style=”property:value;“>

Background Color

The CSS background-color property defines the background color for an HTML element.

Example

Set the background color for a page to powderblue:

<body>

<h1 style=”background-color:powderblue;”>This is a heading</h1>
<p style=”background-color:tomato;”>This is a paragraph.</p>

</body>

Text Color

The CSS color property defines the text color for an HTML element:

Example

<h1 style=”font-family:verdana;”>This is a heading</h1>
<p style=”font-family:courier;”>This is a paragraph.</p>

Fonts

The CSS font-family property defines the font to be used for an HTML element:

<h1 style=”font-family:verdana;”>This is a heading</h1>
<p style=”font-family:courier;”>This is a paragraph.</p>

Text Alignment

The CSS text-align property defines the horizontal text alignment for an HTML element:

Example

<h1 style=”text-align:center;”>Centered Heading</h1>
<p style=”text-align:center;”>Centered paragraph.</p>

Chapter Summary

Use the style attribute for styling HTML elements
Use background-color for background color
Use color for text colors
Use font-family for text fonts
Use font-size for text sizes
Use text-align for text alignment

HTML Exercises

Exercise:

Use the correct HTML attribute, and CSS, to set the color of the paragraph to “blue”.

<p =”;”>This is a paragraph.</p>

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

I am message box. Click edit button to change this text.

HTML Formatting

HTML Text Formatting

HTML contains several elements for defining text with a special meaning.

Example

This text is bold

This text is italic

This is_subscript and ^superscript

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

HTML Formatting Elements

Formatting elements were designed to display special types of text:

<b> – Bold text
<strong> – Important text
<i> – Italic text
<em> – Emphasized text
<mark> – Marked text
<small> – Smaller text
<del> – Deleted text
<ins> – Inserted text
<sub> – Subscript text
<sup> – Superscript text

HTML <b> and <strong> Elements

The HTML <b> element defines bold text, without any extra importance.

Example

The HTML <strong> element defines text with strong importance. The content inside is typically displayed in bold.

Example

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

<strong>This text is important!</strong>

HTML <i> and <em> Elements

The HTML <i> element defines a part of text in an alternate voice or mood. The content inside is typically displayed in italic.

Tip: The <i> tag is often used to indicate a technical term, a phrase from another language, a thought, a ship name, etc.

Example

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

<em>This text is emphasized</em>

HTML <small> Element

The HTML <small> element defines smaller text:

Example

<small>This is some smaller text.</small>

HTML <mark> Element

The HTML <mark> element defines text that should be marked or highlighted:

Example

<p>Do not forget to buy <mark>milk</mark> today.</p>

HTML <mark> Element

The HTML <mark> element defines text that should be marked or highlighted:

Example

<p>Do not forget to buy <mark>milk</mark> today.</p>

HTML <del> Element

The HTML <del> element defines text that has been deleted from a document. Browsers will usually strike a line through deleted text:

Example

<p>My favorite color is <del>blue</del> red.</p>

HTML <ins> Element

The HTML <ins> element defines a text that has been inserted into a document. Browsers will usually underline inserted text:

Example

<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>

HTML <sub> Element

The HTML <sub> element defines subscript text. Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H₂O:

Example

<p>This is <sub>subscripted</sub> text.</p>

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

HTML <sup> Element

The HTML <sup> element defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW^[1]:

Example

<p>This is <sup>superscripted</sup> text.</p>

HTML Quotation

HTML Quotation and Citation Elements

In this chapter we will go through the <blockquote>,<q>, <abbr>, <address>, <cite>, and <bdo> HTML elements.

Example

Here is a quote from WWF’s website:

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.

HTML <blockquote> for Quotations

The HTML <blockquote> element defines a section that is quoted from another source.

Browsers usually indent <blockquote> elements.

Example

<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>

HTML <q> for Short Quotations

The HTML <q> tag defines a short quotation.

Browsers normally insert quotation marks around the quotation.

Example

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

HTML <abbr> for Abbreviations

The HTML <abbr> tag defines an abbreviation or an acronym, like “HTML”, “CSS”, “Mr.”, “Dr.”, “ASAP”, “ATM”.

Marking abbreviations can give useful information to browsers, translation systems and search-engines.

Tip: Use the global title attribute to show the description for the abbreviation/acronym when you mouse over the element.

Example

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

HTML <address> for Contact Information

The HTML <address> tag defines the contact information for the author/owner of a document or an article.

The contact information can be an email address, URL, physical address, phone number, social media handle, etc.

The text in the <address> element usually renders in italic, and browsers will always add a line break before and after the <address> element.

Example.

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

HTML <cite> for Work Title

The HTML <cite> tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.).

Note: A person’s name is not the title of a work.

The text in the <cite> element usually renders in italic.

Example

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

HTML <bdo> for Bi-Directional Override

BDO stands for Bi-Directional Override.

The HTML <bdo> tag is used to override the current text direction:

Example

<bdo dir=”rtl”>This text will be written from right to left</bdo>

HTML Colors

HTML Links

Links Colors

HTML Images

Images can improve the design and the appearance of a web page.

Example

Example

Example

HTML Images Syntax

The HTML <img> tag is used to embed an image in a web page.

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.

The <img> tag is empty, it contains attributes only, and does not have a closing tag.

The <img> tag has two required attributes:

src – Specifies the path to the image
alt – Specifies an alternate text for the image

Syntax

I am message box. Click edit button to change this text.

The src Attribute

The required src attribute specifies the path (URL) to the image.

Note: When a web page loads, it is the browser, at that moment, that gets the image from a web server and inserts it into the page. Therefore, make sure that the image actually stays in the same spot in relation to the web page, otherwise your visitors will get a broken link icon. The broken link icon and the alt text are shown if the browser cannot find the image.

Example

The alt Attribute

The required alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

The value of the alt attribute should describe the image:

Example

If a browser cannot find an image, it will display the value of the alt attribute:

Example

Image Size – Width and Height

You can use the style attribute to specify the width and height of an image.

Example

Alternatively, you can use the width and height attributes:

Example

The width and height attributes always define the width and height of the image in pixels.

Width and Height, or Style?

The width, height, and style attributes are all valid in HTML.

However, we suggest using the style attribute. It prevents styles sheets from changing the size of images:

Example

<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>

</body>
</html>

Images in Another Folder

If you have your images in a sub-folder, you must include the folder name in the src attribute:

Example

Images on Another Server/Website

Some web sites point to an image on another server.

To point to an image on another server, you must specify an absolute (full) URL in the src attribute:

Example

<img src=”https://www.w3schools.com/images/w3schools_green.jpg” alt=”W3Schools.com”>.

Animated Images

HTML allows animated GIFs:

Example

Image as a Link

To use an image as a link, put the <img> tag inside the <a> tag:

Example

Image Floating

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

Example

<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>

Common Image Formats

Here are the most common image file types, which are supported in all browsers (Chrome, Edge, Firefox, Safari, Opera):

Abbreviation	File Format	File Extension
APNG	Animated Portable Network Graphics	.apng
GIF	Graphics Interchange Format	.gif
ICO	Microsoft Icon	.ico, .cur
JPEG	Joint Photographic Expert Group image	.jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG	Portable Network Graphics	.png
SVG	Scalable Vector Graphics	.svg

Chapter Summary

. Use the HTML <img> element to define an image
. Use the HTML src attribute to define the URL of the image
. Use the HTML alt attribute to define an alternate text for an image, if it cannot be displayed
. Use the HTML width and height attributes or the CSS width and height properties to define the size of the image
Use the CSS float property to let the image float to the left or to the right

HTML Exercises

Exercise:

Use the HTML image attributes to set the size of the image to 250 pixels wide and 400 pixels tall.

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

HTML Image Tags

Tag	Description
<img>	Defines an image
<map>	Defines an image map
<area>	Defines a clickable area inside an image map
<picture>	Defines a container for multiple image resources

HTML Image Maps

With HTML image maps, you can create clickable areas on an image.

Image Maps

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.

Try to click on the computer, phone, or the cup of coffee in the image below:

Workplace

Example

Here is the HTML source code for the image map above:

How Does it Work?

The idea behind an image map is that you should be able to perform different actions depending on where in the image you click.

To create an image map you need an image, and some HTML code that describes the clickable areas.

The Image

The image is inserted using the <img> tag. The only difference from other images is that you must add a usemap attribute:

The usemap value starts with a hash tag # followed by the name of the image map, and is used to create a relationship between the image and the image map.

Create Image Map

Then, add a <map> element.

The <map> element is used to create an image map, and is linked to the image by using the required name attribute:

The name attribute must have the same value as the <img>‘s usemap attribute .

The Areas

Then, add the clickable areas.

A clickable area is defined using an <area> element.

Shape

You must define the shape of the clickable area, and you can choose one of these values:

rect – defines a rectangular region
circle – defines a circular region
poly – defines a polygonal region
default – defines the entire region

You must also define some coordinates to be able to place the clickable area onto the image.

Shape=”rect”

The coordinates for shape="rect" come in pairs, one for the x-axis and one for the y-axis.

So, the coordinates 34,44 is located 34 pixels from the left margin and 44 pixels from the top:

Workplace

The coordinates 270,350 is located 270 pixels from the left margin and 350 pixels from the top:

Workplace

Now we have enough data to create a clickable rectangular area:

Example

This is the area that becomes clickable and will send the user to the page “coffee.htm”:

Workplace

Shape=”poly”

The shape="poly" contains several coordinate points, which creates a shape formed with straight lines (a polygon).

This can be used to create any shape.

Like maybe a croissant shape!

How can we make the croissant in the image below become a clickable link?

French Food

We have to find the x and y coordinates for all edges of the croissant:

French Food

The coordinates come in pairs, one for the x-axis and one for the y-axis:

Example

This is the area that becomes clickable and will send the user to the page “croissant.htm”:

French Food

Image Map and JavaScript

A clickable area can also trigger a JavaScript function.

Add a click event to the <area> element to execute a JavaScript function:

Example

Here, we use the onclick attribute to execute a JavaScript function when the area is clicked:

Chapter Summary

. Use the HTML <map> element to define an image map
. Use the HTML <area> element to define the clickable areas in the image map
. Use the HTML usemap attribute of the <img> element to point to an image map

HTML Image Tags

Tag	Description
<img>	Defines an image
<map>	Defines an image map
<area>	Defines a clickable area inside an image map
<picture>	Defines a container for multiple image resources

HTML Favicon

A favicon is a small image displayed next to the page title in the browser tab.

How To Add a Favicon in HTML

You can use any image you like as your favicon. You can also create your own favicon on sites like https://www.favicon.cc.

A favicon image is displayed to the left of the page title in the browser tab, like this:

Example of favicon

To add a favicon to your website, either save your favicon image to the root directory of your webserver, or create a folder in the root directory called images, and save your favicon image in this folder. A common name for a favicon image is “favicon.ico”.

Next, add a <link> element to your “index.html” file, after the <title> element, like this:

Example

<!DOCTYPE html>
<html>
<head>
<title>My Page Title</title>
<link rel=”icon” type=”image/x-icon” href=”/images/favicon.ico”>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Now, save the “index.html” file and reload it in your browser. Your browser tab should now display your favicon image to the left of the page title.

Favicon File Format Support

The following table shows the file format support for a favicon image:

Browser	ICO	PNG	GIF	JPEG	SVG
Edge	Yes	Yes	Yes	Yes	Yes
Chrome	Yes	Yes	Yes	Yes	Yes
Firefox	Yes	Yes	Yes	Yes	Yes
Opera	Yes	Yes	Yes	Yes	Yes
Safari	Yes	Yes	Yes	Yes	Yes

Chapter Summary

. Use the HTML <link> element to insert a favicon

HTML Link Tag

I am message box. Click edit button to change this text.

Tag	Description
<link>	Defines the relationship between a document and an external resource

HTML Tables

HTML tables allow web developers to arrange data into rows and columns..

Example

Company	Contact	Country
Alfreds Futterkiste	Maria Anders	Germany
Centro comercial Moctezuma	Francisco Chang	Mexico
Ernst Handel	Roland Mendel	Austria
Island Trading	Helen Bennett	UK
Laughing Bacchus Winecellars	Yoshi Tannamuri	Canada
Magazzini Alimentari Riuniti	Giovanni Rovelli	Italy

Define an HTML Table

A table in HTML consists of table cells inside rows and columns.

Example

A simple HTML table:

<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>

Table Cells

Each table cell is defined by a <td> and a </td> tag.

Everything between <td> and </td> are the content of the table cell.

Example

<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>

Table Rows

Each table row starts with a <tr> and ends with a </tr> tag.

Cookie	Duration	Description
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

HTML Tutorial - Web Hosting

HTML Introduction

What is HTML?

A Simple HTML Document

Example

Example Explained

What is an HTML Element?

Web Browsers?

HTML Page Structure?

HTML Editors

A simple text editor is all you need to learn HTML.

Learn HTML Using Notepad or TextEdit

Step 1: Open Notepad (PC)

Step 1: Open TextEdit (Mac)

Step 2: Write Some HTML

Step 3: Save the HTML Page

Step 4: View the HTML Page in Your Browser

HTML Basic Examples

HTML Documents

Example

The '!DOCTYPE' Declaration

HTML Headings

Example

HTML Paragraphs

Example

HTML Links

Example

HTML Images

Example

How to View HTML Source

View HTML Source Code:

Inspect an HTML Element:

HTML Elements

HTML Elements

Nested HTML Elements

HTML Elements

Example

Example Explained

Never Skip the End Tag

Example

Empty HTML Elements

Example

HTML is Not Case Sensitive

HTML Tag Reference

HTML Styles

Example

The HTML Style Attribute

Background Color

Example

Text Color

Example

Fonts

Text Size

Text Alignment

Example

Chapter Summary

HTML Exercises

Exercise:

HTML Text Formatting

Example

HTML Formatting Elements

HTML <b> and <strong> Elements

Example

Example

HTML <i> and <em> Elements

Example

HTML <small> Element

Example

HTML <mark> Element

Example

HTML <mark> Element

Example

HTML <del> Element

Example

HTML <ins> Element

Example

HTML <sub> Element

Example

HTML <sup> Element

Example