HTML Materials

CHAPTER ONE
HTML Introduction
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:
1|Page
Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br> None none
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:
HTML Editors
A simple text editor is all you need to learn HTML.
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 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.
2|Page
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:
<!DOCTYPE html>
<html>
<body>
</body>
</html>
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:
3|Page
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>
</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
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading:
Example
<h1>This is heading 1</h1>
Try this
<!DOCTYPE html>
<html>
<body>
4|Page
</body>
</html>
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Try this
<!DOCTYPE html>
<html>
<body>
</body>
</html>
HTML Links
HTML links are defined with the <a> tag:
Example
<a href="https://www.google.com">This isw a link</a>
The link's destination is specified in the href attribute.
Attributes are used to provide additional information about HTML elements.
Try this
<!DOCTYPE html>
<html>
<body>
<h2>HTML Links</h2>
<p>HTML links are defined with the a tag:</p>
<a href="https://www.google.com ">This is a link</a>
</body>
</html>
HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are provided as attributes:
5|Page
Example
<img src="img.jpg" alt="projetech.com" width="104" height="142">
Try this
<!DOCTYPE html>
<html>
<body>
<h2>HTML Images</h2>
<p>HTML images are defined with the img tag:</p>
<img src="img.jpg" alt="projetech.com" width="104" height="142">
</body>
</html>
How to View HTML Source
Have you ever seen a Web page and wondered "Hey! How did they do that?"
View HTML Source Code:
Click CTRL + U in an HTML page, or right-click on the page and select "View Page Source". This will open
a new tab containing the HTML source code of the page.
Inspect an HTML Element:
Right-click on an element (or a blank area), and choose "Inspect" 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.
Exercises
1. HTML elements are surrounded by a specific type of brackets, which one?
p This is a paragraph. /p
2. Fill in the missing code to complete the markup of the HTML hyperlink.
href="https://google.com">This is a link
6|Page
CHAPTER TWO
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:
Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br> None none
Nested 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>
</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>
</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>:
7|Page
The <h1> element defines a heading.
It has a start tag <h1> and an end tag </h1>:
The <p> element defines a paragraph.
It has a start tag <p> and an end tag </p>:
Never Skip the End Tag
Some HTML elements will display correctly, even if you forget the end tag:
Example
<html>
<body>
<p>This is a paragraph
<p>This is a paragraph
</body>
</html>
However, never rely on this! Unexpected results and errors may occur if you forget the end tag!
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
Try this
<!DOCTYPE html>
<html>
<body>
<p>This is a <br> paragraph with a line break.</p>
</body>
</html>
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 projetech recommends lowercase in HTML,
and demands lowercase for stricter document types like XHTML.
Exercise:
1. Insert the correct end tag for the HTML heading.
<h1>This is a heading
2. Insert the correct end tags in this HTML docuement:
<html>
<body>
<h4>This is a heading
8|Page
<p>This is a paragraph.
HTML Tag Reference

Projetech' tag reference contains additional information about these tags and their attributes.
Tag Description
<html> Defines the root of an HTML document
<body> Defines the document's body
<h1> to <h6> Defines HTML headings
HTML Attributes
HTML attributes provide additional information about HTML elements.
HTML Attributes
 All HTML elements can have attributes
 Attributes provide additional information about elements
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value"
The href Attribute
The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to:
Example
<a href="https://www.google.com">Visit Projetech</a>
Try this
<!DOCTYPE html>
<html>
<body>
<h2>The href Attribute</h2>
<p>HTML links are defined with the a tag. The link address is specified in the href attribute:</p>
<a href=" https://www.google.com">Visit Projetech</a>
</body>
</html>
The src Attribute
The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to the image
to be displayed:
Example
<img src="img_girl.jpg">
9|Page
There are two ways to specify the URL in the src attribute:
1. Absolute URL - Links to an external image that is hosted on another website.
Example: src="https://www.google.com/images/img_girl.jpg".
Notes: External images might be under copyright. If you do not get permission to use it, you may be in
violation of copyright laws. In addition, you cannot control external images; it can suddenly be removed or
changed.
2. Relative URL - Links to an image that is hosted within the website. Here, the URL does not include the
domain name. If the URL begins without a slash, it will be relative to the current page. Example:
src="img_girl.jpg". If the URL begins with a slash, it will be relative to the domain. Example:
src="/images/img_girl.jpg".
The width and height Attributes
The <img> tag should also contain the width and height attributes, which specify the width and height of the
image (in pixels):
Example
<img src="img_girl.jpg" width="500" height="600">
The alt Attribute
The required alt attribute for the <img> tag specifies an alternate text for an image, if the image for some
reason cannot be displayed. This can be due to a slow connection, or an error in the src attribute, or if the user
uses a screen reader.
Example
<img src="img_girl.jpg" alt="Girl with a jacket">
Try this
<!DOCTYPE html>
<html>
<body>
<h2>The alt Attribute</h2>
<p>The alt attribute should reflect the image content, so users who cannot see the image get an understanding
of what the image contains:</p>
<img src="img_girl.jpg" alt="Girl with a jacket" width="500" height="600">
</body>
</html>
Example
See what happens if we try to display an image that does not exist:
<img src="img_typo.jpg" alt="Girl with a jacket">
The style Attribute
The style attribute is used to add styles to an element, such as color, font, size, and more.
Example
<p style="color:red;">This is a red paragraph.</p>
Try this
<!DOCTYPE html>
10 | P a g e
<html>
<body>
<h2>The style Attribute</h2>
<p>The style attribute is used to add styles to an element, such as color:</p>
<p style="color:red;">This is a red paragraph.</p>
</body>
</html>
The lang Attribute
You should always include the lang attribute inside the <html> tag, to declare the language of the Web page.
This is meant to assist search engines and browsers.
The following example specifies English as the language:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
Country codes can also be added to the language code in the lang attribute. So, the first two characters define
the language of the HTML page, and the last two characters define the country.
The following example specifies English as the language and United States as the country:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
The title Attribute
The title attribute defines some extra information about an element.
The value of the title attribute will be displayed as a tooltip when you mouse over the element:
Example
<p title="I'm a tooltip">This is a paragraph.</p>
Try this
<!DOCTYPE html>
<html>
<body>
<h2 title="I'm a header">The title Attribute</h2>
<p title="I'm a tooltip">Mouse over this paragraph, to display the title attribute as a tooltip.</p>
</body>
</html>
We Suggest: Always Use Lowercase Attributes
The HTML standard does not require lowercase attribute names.
11 | P a g e
The title attribute (and all other attributes) can be written with uppercase or lowercase like title or TITLE.
However, PROJETECH recommends lowercase attributes in HTML, and demands lowercase attributes for
stricter document types like XHTML.
We Suggest: Always Quote Attribute Values
The HTML standard does not require quotes around attribute values.
However, W3C recommends quotes in HTML, and demands quotes for stricter document types like
XHTML.
Good:
<a href="https://www.google.com/html/">Visit our HTML tutorial</a>
Bad:
<a href=https://www.google.com/html/>Visit our HTML tutorial</a>
Sometimes you have to use quotes. This example will not display the title attribute correctly, because it
contains a space:
Example
<p title=About Projetech>
Try this
<!DOCTYPE html>
<html>
<body>
<h1>About Projeetech</h1>
<p title=About Projetech>
You cannot omit quotes around an attribute value
if the value contains spaces.
</p>
<p><b>
If you move the mouse over the paragraph above,
your browser will only display the first word from the title.
</b></p>
</body>
</html>
Single or Double Quotes?
Double quotes around attribute values are the most common in HTML, but single quotes can also be used.
In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes:
<p title='John "ShotGun" Nelson'>
Or vice versa:
<p title="John 'ShotGun' Nelson">
Try this
12 | P a g e
<!DOCTYPE html>
<html>
<body>
<h2>Single or Double Quotes?</h2>
<p>In some situations, when the attribute value itself contains double quotes, it is necessary to use single
quotes:</p>
<p>Move your mouse over the paragraphs below to see the effect:</p>
<p title='John "ShotGun" Nelson'>John with double quotes</p>
<p title="John 'ShotGun' Nelson">John with single quotes</p>
</body>
</html>
Summary
 All HTML elements can have attributes
 The href attribute of <a> specifies the URL of the page the link goes to
 The src attribute of <img> specifies the path to the image to be displayed
 The width and height attributes of <img> provide size information for images
 The alt attribute of <img> provides an alternate text for an image
 The style attribute is used to add styles to an element, such as color, font, size, and more
 The lang attribute of the <html> tag declares the language of the Web page
 The title attribute defines some extra information about an element
Exercise:
1. Add a "tooltip" to the paragraph below with the text "About Projetech".
<p ="About Projetech">Projetech is a web developer's site.</p>

2. Set the size of the image to 250 pixels wide and 400 pixels tall.
<img src="Projetech.jpg" width=" " height=" ">

3. Make the element below into a link that goes to "https://www.Projetech.com".
<a "https://www.google.com">This is a link</a>

4. Specify an alternate text for the image.
Alternate text is useful when the image cannot be displayed, like when the page is read by a screen reader.
<img src="img.png" ="Projetech Logo">
HTML Attribute Reference

The table below lists all HTML attributes and what elements they can be used within:
Attribute Belongs to Description
13 | P a g e
accept <input> Specifies the types of files that the server accepts (only for
type="file")
accept-charset <form> Specifies the character encodings that are to be used for the
form submission
accesskey Global Attributes Specifies a shortcut key to activate/focus an element
action <form> Specifies where to send the form-data when a form is

submitted
HTML Headings
HTML headings are titles or subtitles that you want to display on a webpage.
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
Example
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Try this
<!DOCTYPE html>
<html>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
Headings Are Important
Search engines use the headings to index the structure and content of your web pages.
Users often skim a page by its headings. It is important to use headings to show the document structure.
<h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>,
and so on.
Note: Use HTML headings for headings only. Don't use headings to make text BIG or bold.
14 | P a g e
Bigger Headings
Each HTML heading has a default size. However, you can specify the size for any heading with
the style attribute, using the CSS font-size property:
Example
<h1 style="font-size:60px;">Heading 1</h1>
Try this
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:60px;">Heading 1</h1>
<p>You can change the size of a heading with the style attribute, using the font-size property.</p>
</body>
</html>
Exercise:
1. Use the correct HTML tag to add a heading with the text "London".
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a
metropolitan area of over 13 million inhabitants.</p>
2. Add six headings to the document with the text "Hello".
Start with the most important heading (the largest) and end with the least important heading (the smallest).
<html>
<body>
</body>
</html>
3. Mark up the text with appropriate tags:
"Universal Studios Presents" is the most important heading.
"Jurassic Park" is the next most important heading.
"About" is the third most important heading.
The last sentence is just a paragraph.
Start with the most important heading (the largest) and end with the least important heading (the smallest).
15 | P a g e
Universal Studios Presents
Jurassic Park
About
On the Island of Isla Nublar, a new park has been built: Jurassic Park is a theme park of cloned
dinosaurs!!
HTML Paragraphs
A paragraph always starts on a new line, and is usually a block of text.
HTML Paragraphs
The HTML <p> element defines a paragraph.
A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before
and after a paragraph.
Example
HTML Display
You cannot be sure how HTML will be displayed.
Large or small screens, and resized windows will create different results.
With HTML, you cannot change the display by adding extra spaces or extra lines in your HTML code.
The browser will automatic`ally remove any extra spaces and lines when the page is displayed:
Example
<p>
This paragraph
contains a lot of linesin the source code,but the browserignores it.
</p>
<p>
This paragraph contains a lot of spaces in the source code, but the browser
ignores it.
</p>
Try this
<!DOCTYPE html>
<html>
<body>
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
16 | P a g e
ignores it.
</p>
<p>
This paragraph contains a lot of spaces in the source code, but the browserignores it.
</p>
<p>
The number of lines in a paragraph depends on the size of the browser window. If you resize the browser
window, the number of lines in this paragraph will change.
</p>
</body>
</html>
HTML Horizontal Rules
The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.
The <hr> element is used to separate content (or define a change) in an HTML page:
Example
<p>This is some text.</p>
<hr>
<p>This is some other text.</p>
<hr>
Try this
<!DOCTYPE html>
<html>
<body>
<p>This is some text.</p>
<hr>
<hr>
</body>
</html>
The <hr> tag is an empty tag, which means that it has no end tag.
HTML Line Breaks
The HTML <br> element defines a line break.
17 | P a g e
Use <br> if you want a line break (a new line) without starting a new paragraph:
Example
<p>This is<br>a paragraph<br>with line breaks.</p>
<!DOCTYPE html>
<html>
<body>
</body>
</html>
Try this
<!DOCTYPE html>
<html>
<body>
</body>
</html>
The <br> tag is an empty tag, which means that it has no end tag.
The Poem Problem
This poem will display on a single line:
Example
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
Oh, bring back my Bonnie to me.

</p>
Solution - The HTML <pre> Element
The HTML <pre> element defines preformatted text.
The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both
spaces and line breaks:
Example
<pre>
18 | P a g e
</pre>
Try this
<!DOCTYPE html>
<html>
<body>
<p>The pre tag preserves both spaces and line breaks:</p>
<pre>
</pre>
</body>
</html>
Exercise:
1. Use the correct HTML tag to add a paragraph with the text "Hello World!".
<html>
<body>
</body>
</html>
2. Clean up this document with proper end tags.
<h1>This is a Heading
<p>This is a paragraph.
3. Add a horizontal rule between the heading and the paragraph.
<h1>London</h1>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a
metropolitan area of over 13 million inhabitants.</p>
4. Add a line break in the middle of the paragraph:
<p>My Bonnie lies over the ocean.</p>

5. Wrap this poem around HTML tags that will preserve all spaces and linebreaks when the element is
displayed.

19 | P a g e
HTML Styles
The HTML style attribute is used to add styles to an element, such as color, font, size, and more.
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;">
The property is a CSS property. The value is a CSS 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 style="background-color:powderblue;">
<h1>This is a heading</h1>
</body>
Try this
<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">
</body>
</html>
Example
Set background color for two different elements:
<body>
<h1 style="background-color:powderblue;">This is a heading</h1>

<p style="background-color:tomato;">This is a paragraph.</p>
</body>
20 | P a g e
Try this
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>
</body>
</html>
Text Color
The CSS color property defines the text color for an HTML element:
Example
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
Try this
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
Fonts
The CSS font-family property defines the font to be used 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>
Text Size
The CSS font-size property defines the text size for an HTML element:
Example
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
Try this
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
21 | P a g e
</body>
</html>
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>
Try this
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
</body>
</html>
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
Exercise:
1. Use the correct HTML attribute, and CSS, to set the color of the paragraph to "blue".
<p =" ;">This is a paragraph.</p>

2. Use CSS to set the font of the paragraph to "courier".
<p style=" :courier;">This is a paragraph.</p>

3. Use CSS to center align the paragraph.
<p style=" :center;">This is a paragraph.</p>

4. Use CSS to set the text size to 50 pixels.
<p style=" :50px;">This is a paragraph.</p>

5. Use CSS to set the background color of the document to yellow.
<html>
<body style=" :yellow;">
22 | P a g e
</body>
</html>
6. Use CSS to center align the document.
<html>
<body =" ;">
\
</body>
</html>
23 | P a g e
CHAPTER THREE
HTML Text Formatting
HTML contains several elements for defining text with a special meaning.
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
<b>This text is bold</b>
Try this
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><b>This text is bold.</b></p>
</body>
</html>
The HTML <strong> element defines text with strong importance. The content inside is typically displayed in
bold.
Example
<strong>This text is important!</strong>
Try this
<!DOCTYPE html>
<html>
<body>
24 | P a g e
<p><strong>This text is important!</strong></p>
</body>
</html>
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>This text is italic</i>
Try this
<!DOCTYPE html>
<html>
<body>
<p><i>This text is italic.</i></p>
</body>
</html>
The HTML <em> element defines emphasized text. The content inside is typically displayed in italic.
Tip: A screen reader will pronounce the words in <em> with an emphasis, using verbal stress.
Example
<em>This text is emphasized</em>
Try this
<!DOCTYPE html>
<html>
<body>
<p><em>This text is emphasized.</em></p>
</body>
</html>
HTML <small> Element
The HTML <small> element defines smaller text:
Example
<small>This is some smaller text.</small>
Try this
<!DOCTYPE html>
<html>
25 | P a g e
<body>
<p>This is some normal text.</p>
<p><small>This is some smaller text.</small></p>
</body>
</html>
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>
Try this
<!DOCTYPE html>
<html>
<body>
<p>Do not forget to buy <mark>milk</mark> today.</p>
</body>
</html>
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>
Try this
<!DOCTYPE html>
<html>
<body>
<p>My favorite color is <del>blue</del> red.</p>
</body>
</html>
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>
Try this
<!DOCTYPE html>
<html>
<body>
26 | P a g e
<p>My favorite color is <del>blue</del><ins>red</ins>.</p>
</body>
</html>
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 2O:
Example
<p>This is <sub>subscripted</sub> text.</p>
<!DOCTYPE html>
<html>
<body>
</body>
</html>
Try this
<!DOCTYPE html>
<html>
<body>
</body>
</html>
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>
Try this
<!DOCTYPE html>
<html>
<body>
<p>This is <sup>superscripted</sup> text.</p>
</body>
</html>
Exercise:
1. Add extra importance to the word "degradation" in the paragraph below.
27 | P a g e
<p>
WWF's mission is to stop the degradation of our planet's natural environment.
</p>
2. Emphasize the word "metropolitan" in the text below.
<h1>Tokyo</h1>
<p>
Tokyo is the capital of Japan, the most populous metropolitan area in the world.
</p>
3. Highlight the word "FUN" in the text below.
<p>
HTML is FUN to learn!
</p>
4. Apply subscript formatting to the number "2" in the text below.
<p>
H 2 O is the scientific term for water.
</p>
5. Add a line through (strikeout) the letters "blue" in the text below.
<p>
My favorite color is blue red.
</p>
HTML Text Formatting Elements
Tag Description
<b> Defines bold text
<em> Defines emphasized text
<i> Defines a part of text in an alternate voice or mood
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<mark> Defines marked/highlighted text
28 | P a g e
HTML Colors
HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or HSLA values.
Color Names
In HTML, a color can be specified by using a color name:
Example
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
</body>
</html>
Background Color
You can set the background color for HTML elements:
Example
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat.
</p>
</body>
</html>
Text Color
You can set the color of text:
Example
<!DOCTYPE html>
29 | P a g e
<html>
<body>
<h3 style="color:Tomato;">Hello World</h3>
<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</body>
</html>
Border Color
You can set the color of borders:
Example
<!DOCTYPE html>
<html>
<body>
<h1 style="border: 2px solid Tomato;">Hello World</h1>
<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>
<h1 style="border: 2px solid Violet;">Hello World</h1>
</body>
</html>
Color Values
In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and
HSLA values.
The following three <div> elements have their background color set with RGB, HEX, and HSL values:
The following two <div> elements have their background color set with RGBA and HSLA values, which add
an Alpha channel to the color (here we have 50% transparency):
Example
<!DOCTYPE html>
<html>
<body>
<p>Same as color name "Tomato":</p>
<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>
<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1>
<p>Same as color name "Tomato", but 50% transparent:</p>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1>
30 | P a g e
<p>In addition to the predefined color names, colors can be specified using RGB, HEX, HSL, or even
transparent colors using RGBA or HSLA color values.</p>
</body>
</html>
Exercise:
1. Insert the correct property to make the text color violet.
<p style=" : violet">This is a paragraph.</p>

2. Insert the correct RGB color values to make the background color completely blue.
<p style="background-color:rgb( , , )">This is a paragraph.</p>

3. Insert the a background color where green has the value 100, red has the value 106, and blue has the value
205.
<p style="background-color:rgb( , , )">This is a paragraph.</p>

4. Insert the correct HEX value to make the text color white.
<p style="color: # ">This is a paragraph.</p>

5. Insert the HSLA value to make a color with no hue, 100% saturation, 50% lightness, and 50%
transparency.
<p style="color: ( )">This is a paragraph.</p>
31 | P a g e
HTML Styles - CSS
CSS stands for Cascading Style Sheets.
CSS saves a lot of work. It can control the layout of multiple web pages all at once.
What is CSS?
Cascading Style Sheets (CSS) is used to format the layout of a webpage.
With CSS, you can control the color, font, the size of text, the spacing between elements, how elements are
positioned and laid out, what background images or background colors are to be used, different displays for
different devices and screen sizes, and much more!
Tip: The word cascading means that a style applied to a parent element will also apply to all children
elements within the parent. So, if you set the color of the body text to "blue", all headings, paragraphs, and
other text elements within the body will also get the same color (unless you specify something else)!
Using CSS
CSS can be added to HTML documents in 3 ways:
 Inline - by using the style attribute inside HTML elements
 Internal - by using a <style> element in the <head> section
 External - by using a <link> element to link to an external CSS file
The most common way to add CSS, is to keep the styles in external CSS files. However, in this tutorial we
will use inline and internal styles, because this is easier to demonstrate, and easier for you to try it yourself.
Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.
An inline CSS uses the style attribute of an HTML element.
The following example sets the text color of the <h1> element to blue, and the text color of the <p> element
to red:
Example
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
</body>
</html>
Internal CSS
An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML page, within a <style> element.
The following example sets the text color of ALL the <h1> elements (on that page) to blue, and the text color
of ALL the <p> elements to red. In addition, the page will be displayed with a "powderblue" background
color:
Example
<!DOCTYPE html>
32 | P a g e
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
</body>
</html>
External CSS
An external style sheet is used to define the style for many HTML pages.
To use an external style sheet, add a link to it in the <head> section of each HTML page:
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
</body>
</html>
The external style sheet can be written in any text editor. The file must not contain any HTML code, and must
be saved with a .css extension.
Here is what the "styles.css" file looks like:
"styles.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p{
33 | P a g e
color: red;
}
Tip: With an external style sheet, you can change the look of an entire web site, by changing one file!
CSS Colors, Fonts and Sizes
Here, we will demonstrate some commonly used CSS properties. You will learn more about them later.
The CSS color property defines the text color to be used.
The CSS font-family property defines the font to be used.
The CSS font-size property defines the text size to be used.
Example
Use of CSS color, font-family and font-size properties:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
</body>
</html>
CSS Border
The CSS border property defines a border around an HTML element.
Tip: You can define a border for nearly all HTML elements.
Example
Use of CSS border property:
34 | P a g e
<!DOCTYPE html>
<html>
<head>
<style>
p{
border: 2px solid powderblue;
}
</style>
</head>
<body>
</body>
</html>
CSS Padding
The CSS padding property defines a padding (space) between the text and the border.
Example
Use of CSS border and padding properties:
<!DOCTYPE html>
<html>
<head>
<style>
p{
padding: 30px;
}
</style>
</head>
<body>
</body>
35 | P a g e
</html>
CSS Margin
The CSS margin property defines a margin (space) outside the border.
Example
Use of CSS border and margin properties:
<!DOCTYPE html>
<html>
<head>
<style>
p{
margin: 50px;
}
</style>
</head>
<body>
</body>
</html>
Exercise:
1. Use CSS to set the background color of the document (body) to yellow.
<!DOCTYPE html>
<html>
<head>
<style>
:yellow;
</style>
</head>
<body>
<h1>My Home Page</h1>
</body>
</html>
2. Use CSS to set the font of the document to "courier".
36 | P a g e
<!DOCTYPE html>
<html>
<head>
<style>
body { :courier;}
</style>
</head>
<body>
</body>
</html>
3. Use CSS to set the text color of the document to red.
<!DOCTYPE html>
<html>
<head>
<style>
body { :red;}
</style>
</head>
<body>
</body>
</html>
4. Use CSS to make a yellow, 1 pixel thick, border around all paragraphs.
<!DOCTYPE html>
<html>
<head>
<style>
{ : solid ;}
</style>
</head>
<body>
</body>
</html>
37 | P a g e
HTML Links
Links are found in nearly all web pages. Links allow users to click their way from page to page.
HTML Links - Hyperlinks
HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little hand.
Note: A link does not have to be text. A link can be an image or any other HTML element!
HTML Links - Syntax
The HTML <a> tag defines a hyperlink. It has the following syntax:
<a href="url">link text</a>
The most important attribute of the <a> element is the href attribute, which indicates the link's destination.
The link text is the part that will be visible to the reader.
Clicking on the link text, will send the reader to the specified URL address.
Example
This example shows how to create a link to W3Schools.com:
<!DOCTYPE html>
<html>
<body>
<h1>HTML Links</h1>
<p><a href="https://www.w3schools.com/">Visit W3Schools.com!</a></p>
</body>
</html>
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
Tip: Links can of course be styled with CSS, to get another look!
HTML Links - The target Attribute

By default, the linked page will be displayed in the current browser window. To change this, you must specify
another target for the link.
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
 _self - Default. Opens the document in the same window/tab as it was clicked
 _blank - Opens the document in a new window or tab
 _parent - Opens the document in the parent frame
38 | P a g e
 _top - Opens the document in the full body of the window
Example
Use target="_blank" to open the linked document in a new browser window or tab:
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
<!DOCTYPE html>
<html>
<body>
<h2>The target Attribute</h2>
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
<p>If target="_blank", the link will open in a new browser window or tab.</p>
</body>
</html>
Absolute URLs vs. Relative URLs
Both examples above are using an absolute URL (a full web address) in the href attribute.
A local link (a link to a page within the same website) is specified with a relative URL (without the
"https://www" part):
Example
<!DOCTYPE html>
<html>
<body>
<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>
</body>
</html>
HTML Links - Use an Image as a Link
To use an image as a link, just put the <img> tag inside the <a> tag:
Example
<!DOCTYPE html>
<html>
39 | P a g e
<body>
<h2>Image as a Link</h2>
<p>The image below is a link. Try to click on it.</p>
<a href="default.asp"><img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;"></a>
</body>
</html>
Link to an Email Address
Use mailto: inside the href attribute to create a link that opens the user's email program (to let them send a
new email):
Example
<!DOCTYPE html>
<html>
<body>
<h2>Link to an Email Address</h2>
<p>To create a link that opens in the user's email program (to let them send a new email), use mailto: inside
the href attribute:</p>
<p><a href="mailto:[email protected]">Send email</a></p>
</body>
</html>
Button as a Link
To use an HTML button as a link, you have to add some JavaScript code.
JavaScript allows you to specify what happens at certain events, such as a click of a button:
Example
<!DOCTYPE html>
<html>
<body>
<h2>Button as a Links</h2>
<p>Click the button to go to the HTML tutorial.</p>
<button onclick="document.location='default.asp'">HTML Tutorial</button>
</body>
</html>
Link Titles
The title attribute specifies extra information about an element. The information is most often shown as a
tooltip text when the mouse moves over the element.
Example
<!DOCTYPE html>
<html lang="en-US">
40 | P a g e
<body>
<h2>Link Titles</h2>
<p>The title attribute specifies extra information about an element. The information is most often shown as a
tooltip text when the mouse moves over the element.</p>
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">Visit our HTML
Tutorial</a>
</body>
</html>
More on Absolute URLs and Relative URLs
Example
Use a full URL to link to a web page:
<!DOCTYPE html>
<html>
<body>
<h2>External Paths</h2>
<p>This example uses a full URL to link to a web page:</p>
<p><a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a></p>
</body>
</html>
Example
Link to a page located in the html folder on the current web site:
<!DOCTYPE html>
<html>
<body>
<p>This example links to a page located in the html folder on the current web site:</p>
<p><a href="/html/default.asp">HTML tutorial</a></p>
</body>
</html>
Example
Link to a page located in the same folder as the current page:
<!DOCTYPE html>
<html>
<body>
<p>This example links to a page located in the same folder as the current page:</p>
<p><a href="default.asp">HTML tutorial</a></p>
41 | P a g e
</body>
</html>
Chapter Summary
 Use the <a> element to define a link
 Use the href attribute to define the link address
 Use the target attribute to define where to open the linked document
 Use the <img> element (inside <a>) to use an image as a link
 Use the mailto: scheme inside the href attribute to create a link that opens the user's email program
HTML Links - Different Colors

An HTML link is displayed in a different color depending on whether it has been visited, is unvisited, or is
active.
HTML Link Colors
By default, a link will appear like this (in all browsers):
 An unvisited link is underlined and blue
 A visited link is underlined and purple
 An active link is underlined and red
You can change the link state colors, by using CSS:
Example
Here, an unvisited link will be green with no underline. A visited link will be pink with no underline. An
active link will be yellow and underlined. In addition, when mousing over a link (a:hover) it will become red
and underlined:
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
}
a:hover {
42 | P a g e
color: red;
text-decoration: underline;
}
a:active {
color: yellow;
text-decoration: underline;
}
</style>
</head>
<body>
<h2>Link Colors</h2>
<p>You can change the default colors of links</p>
<a href="html_images.asp" target="_blank">HTML Images</a>
</body>
</html>
Link Buttons
A link can also be styled as a button, by using CSS:
Example
<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
43 | P a g e
</head>
<body>
<h2>Link Button</h2>
<p>A link styled as a button:</p>
<a href="default.asp" target="_blank">This is a link</a>
</body>
</html>
HTML Links - Create Bookmarks
HTML links can be used to create bookmarks, so that readers can jump to specific parts of a web page.
Create a Bookmark in HTML
Bookmarks can be useful if a web page is very long.
To create a bookmark - first create the bookmark, then add a link to it.
When the link is clicked, the page will scroll down or up to the location with the bookmark.
Example
First, use the id attribute to create a bookmark:
<h2 id="C4">Chapter 4</h2>
Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page:
Example
<!DOCTYPE html>
<html>
<body>
<p><a href="#C4">Jump to Chapter 4</a></p>
<p><a href="#C10">Jump to Chapter 10</a></p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<h2>Chapter 3</h2>
<h2>Chapter 5</h2>
<h2>Chapter 6</h2>
44 | P a g e
<h2>Chapter 7</h2>
<h2>Chapter 8</h2>
<h2>Chapter 9</h2>
<h2>Chapter 11</h2>
<h2>Chapter 12</h2>
<h2>Chapter 13</h2>
<h2>Chapter 14</h2>
<h2>Chapter 15</h2>
<h2>Chapter 16</h2>
<h2>Chapter 17</h2>
<h2>Chapter 18</h2>
<h2>Chapter 19</h2>
<h2>Chapter 20</h2>
<h2>Chapter 21</h2>
<h2>Chapter 22</h2>
<h2>Chapter 23</h2>
</body>
</html>
45 | P a g e
You can also add a link to a bookmark on another page:
<a href="html_demo.html#C4">Jump to Chapter 4</a>
Chapter Summary
 Use the id attribute (id="value") to define bookmarks in a page
 Use the href attribute (href="#value") to link to the bookmark
HTML Images
Images can improve the design and the appearance of a web page.
Example
<!DOCTYPE html>
<html>
<body>
<h2>HTML Image</h2>
<img src="pic_trulli.jpg" alt="Trulli" width="500" height="333">
</body>
</html>
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
<img src="url" alt="alternatetext">
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
<!DOCTYPE html>
<html>
<body>
<h2>Alternative text</h2>
<p>The alt attribute should reflect the image content, so users who cannot see the image get an understanding
of what the image contains:</p>
46 | P a g e
<img src="img_chania.jpg" alt="Flowers in Chania" width="460" height="345">
</body>
</html>
Image Size - Width and Height
You can use the style attribute to specify the width and height of an image.
Example
<!DOCTYPE html>
<html>
<body>
<h2>Image Size</h2>
<p>Here we use the style attribute to specify the width and height of an image:</p>
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
</body>
</html>
Alternatively, you can use the width and height attributes:
Example
<!DOCTYPE html>
<html>
<body>
<h2>Image Size</h2>
<p>Here we specify the width and height of an image with the width and height attributes:</p>
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
</body>
</html>
The width and height attributes always define the width and height of the image in pixels.
Note: Always specify the width and height of an image. If width and height are not specified, the web page
might flicker while the image loads.
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>
/* This style sets the width of all images to 100%: */
47 | P a g e
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">
<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>
Images in Another Folder
If you have your images in a sub-folder, you must include the folder name in the src attribute:
Example
<!DOCTYPE html>
<html>
<body>
<h2>Images in Another Folder</h2>
<p>It is common to store images in a sub-folder. You must then include the folder name in the src
attribute:</p>
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
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
<!DOCTYPE html>
<html>
<body>
<h2>Images on Another Server</h2>
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com"
style="width:104px;height:142px;">
</body>
48 | P a g e
</html>
Notes on external images: External images might be under copyright. If you do not get permission to use it,
you may be in violation of copyright laws. In addition, you cannot control external images; they can suddenly
be removed or changed.
Animated Images
HTML allows animated GIFs:
Example
<!DOCTYPE html>
<html>
<body>
<h2>Animated Images</h2>
<p>HTML allows moving images:</p>
<img src="programming.gif" alt="Computer man" style="width:48px;height:48px;">
</body>
</html>
Image as a Link
To use an image as a link, put the <img> tag inside the <a> tag:
Example
<!DOCTYPE html>
<html>
<body>
<h2>Image as a Link</h2>
<p>The image is a link. You can click on it.</p>
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
</body>
</html>
Image Floating
Use the CSS float property to let the image float to the right or to the left of a text:
Example
<!DOCTYPE html>
<html>
<body>
<h2>Floating Images</h2>
<p><strong>Float the image to the right:</strong></p>
<p>
49 | P a g e
<img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.
</p>
<p><strong>Float the image to the left:</strong></p>
<p>
<img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.
</p>
</body>
</html>
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 .apng

Graphics
GIF Graphics Interchange Format .gif
ICO Microsoft Icon .ico, .cur
JPEG Joint Photographic Expert Group .jpg, .jpeg, .jfif, .pjpeg, .pjp
image
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
Note: Loading large images takes time, and can slow down your web page. Use images carefully.
Exercise:
1. Use the HTML image attributes to set the size of the image to 250 pixels wide and 400 pixels tall.
<img src="scream.png" ="250" ="400">

2. Use CSS to set the size of the image to 250 pixels wide and 400 pixels tall.
50 | P a g e
<img src="scream.png" style=" ;">
3. Use the correct HTML to make the image become a link to "default.html".
>
<img src="smiley.gif">
4. Make the image below float to the right of the paragraph.

<p>
<img src="smiley.gif" style=" ;">
This is a paragraph.
This paragraph contains an image
</p>
5. Add the correct HTML attribute to display the "smiley.gif" image.
<img >
6. Specify an alternate text for the image.
The alternate text should say "Smiley".
Alternate text is useful when the image cannot be displayed, like when the page is read by a screen reader.
<img src="smiley.gif" >

7. Add a background image named "myimage.png" on a HTML element.
<p style="background-image: ">

8. Which HTML tag is used to handle the favicon (the little image to the left in the browser tab):
< rel="icon" type="image/x-icon" href="/images/favicon.ico">
HTML <picture> Element

The HTML <picture> element allows you to display different pictures for different devices or screen sizes.
The HTML <picture> Element

The HTML <picture> element gives web developers more flexibility in specifying image resources.
The <picture> element contains one or more <source> elements, each referring to different images through
the srcset attribute. This way the browser can choose the image that best fits the current view and/or device.
Each <source> element has a media attribute that defines when the image is the most suitable.
51 | P a g e
Example
Show different images for different screen sizes:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>The picture Element</h2>
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg" style="width:auto;">
</picture>
<p>Resize the browser to see different versions of the picture loading at different viewport sizes.
The browser looks for the first source element where the media query matches the user's current viewport
width,
and fetches the image specified in the srcset attribute.</p>
<p>The img element is required as the last child tag of the picture declaration block.
The img element is used to provide backward compatibility for browsers that do not support the picture
element, or if none of the source tags matched.
</p>
</body>
</html>
Note: Always specify an <img> element as the last child element of the <picture> element.
The <img> element is used by browsers that do not support the <picture> element, or if none of
the <source> tags match.
When to use the Picture Element
There are two main purposes for the <picture> element:
1. Bandwidth
If you have a small screen or device, it is not necessary to load a large image file. The browser will use the
first <source> element with matching attribute values, and ignore any of the following elements.
2. Format Support
Some browsers or devices may not support all image formats. By using the <picture> element, you can add
images of all formats, and the browser will use the first format it recognizes, and ignore any of the following
elements.
Example
The browser will use the first image format it recognizes:
<!DOCTYPE html>
52 | P a g e
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>The picture Element</h2>
<picture>
<source sr
cset="img_avatar.png">
<source srcset="img_girl.jpg">
<img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>
<p>The picture element can be used when the image format is not supported by all devices.</p>
<p>The device will use the first image format it supports, and ignore the rest of the images.</p>
</body>
</html>
Note: The browser will use the first <source> element with matching attribute values, and ignore any
following <source> elements.
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 Page Title

Every web page should have a page title to describe the meaning of the page.
The <title> element adds a title to your page:
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorial</title>
</head>
<body>
The content of the document......
53 | P a g e
</body>
</html>
The title should describe the content and the meaning of the page.
The page title is very important for search engine optimization (SEO). The text is used by search engine
algorithms to decide the order when listing pages in search results.
The <title> element:
 defines a title in the browser toolbar
 provides a title for the page when it is added to favorites
 displays a title for the page in search engine-results
So, try to make the title as accurate and meaningful as possible!
HTML Title Tag
Tag Description
<title> Defines the title of the document
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
Try this
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
54 | P a g e
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>HTML Table</h2>
<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>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
55 | P a g e
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
</body>
</html>
Define an HTML Table
A table in HTML consists of table cells inside rows and columns.
Example
A simple HTML table:
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>
<h2>A basic HTML table</h2>
<table style="width:100%">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
56 | P a g e
<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>
<p>To understand the example better, we have added borders to the table.</p>
</body>
</html>
Table Cells
Each table cell is defined by a <td> and a </td> tag.
td stands for table data.
Everything between <td> and </td> are the content of the table cell.
Example
<!DOCTYPE html>
<html>
<style>
table, th, td {
}
</style>
<body>
<h2>TD elements define table cells</h2>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
</body>
57 | P a g e
</html>
Note: A table cell can contain all sorts of HTML elements: text, images, lists, links, other tables, etc.
Table Rows
Each table row starts with a <tr> and ends with a </tr> tag.
tr stands for table row.
Example
<!DOCTYPE html>
<html>
<style>
table, th, td {
}
</style>
<body>
<h2>TR elements define table rows</h2>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
</body>
</html>
You can have as many rows as you like in a table; just make sure that the number of cells are the same in each
row.
Note: There are times when a row can have less or more cells than another. You will learn about that in a later
chapter.
Table Headers
Sometimes you want your cells to be table header cells. In those cases use the <th> tag instead of
the <td> tag:
58 | P a g e
th stands for table header.
Example
Let the first row be table header cells:
<!DOCTYPE html>
<html>
<style>
table, th, td {
}
</style>
<body>
<h2>TH elements define table headers</h2>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
</body>
</html>
By default, the text in <th> elements are bold and centered, but you can change that with CSS.
Exercise:
1. Add a table row with two table headers.
The two table headers should have the value "Name" and "Age".
59 | P a g e
<table>
<tr>
<td>Jill Smith</td>
<td>50</td>
</tr>
</table>
2. Use the correct CSS border values to create a solid black 3 pixels border on a table element.
table, th, td {
border: ;
}
3. Use CSS styles to make the table 300 pixels wide.
<table >
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
4. Add a table caption that says "Names".
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
5. Use the correct CSS property to add 15 pixels of space between the cell border and cell content.
The result should look like this:
hel hel hel

lo lo lo
60 | P a g e
hel hel hel
lo lo lo
hel hel hel

lo lo lo
.table td {
: 15px;
}
6. Use the correct HTML attribute to make the second TH element span two rows.
<table>
<tr>
<th>Name</th>
<td>Jill Smith</td>
</tr>
<tr>
<th >Phone</th>
<td>555-77854</td>
</tr>
<tr>
<td>555-77854</td>
</tr>
</table>
7. Use the correct HTML attribute to make the first TH element span two columns.
<table>
<tr>
<th >Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
8. Add a table row at the end of the table, with two table cells.
The two table cells should have the value "Eve Jackson" and "94".
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill Smith</td>
61 | P a g e
<td>50</td>
</tr>
</table>
HTML Table Borders

HTML tables can have borders of different styles and shapes.
How To Add a Border

To add a border, use the CSS border property on table, th, and td elements:
62 | P a g e
Example
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Table With Border</h2>
<p>Use the CSS border property to add a border to the table.</p>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
63 | P a g e
</html>
Collapsed Table Borders
To avoid having double borders like in the example above, set the CSS border-collapse property to collapse.
This will make the borders collapse into a single border:
Example
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
}
</style>
</head>
<body>
<h2>Collapsed Borders</h2>
<p>If you want the borders to collapse into one border, add the CSS border-collapse property.</p>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
64 | P a g e
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Style Table Borders
If you set a background color of each cell, and give the border a white color (the same as the document
background), you get the impression of an invisible border:
Example
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid white;
}
th, td {
background-color: #96D4D4;
}
</style>
</head>
<body>
<h2>Table With Invisible Borders</h2>
<p>Style the table with white borders and a background color of the cells to make the impression of invisible
borders.</p>
<tr>
<th>Firstname</th>
65 | P a g e
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Round Table Borders
With the border-radius property, the borders get rounded corners:
Example
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border-radius: 10px;
}
66 | P a g e
</style>
</head>
<body>
<h2>Table With Rounded Borders</h2>
<p>Use the CSS border-radius property to add rounded corners to the borders.</p>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Skip the border around the table by leaving out table from the css selector:
67 | P a g e
Example
<!DOCTYPE html>
<html>
<head>
<style>
th, td {
border-radius: 10px;
}
</style>
</head>
<body>
<h2>Table With Rounded Borders</h2>
<p>Use the CSS border-radius property to add rounded corners to the table cells.</p>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
68 | P a g e
</body>
</html>
Dotted Table Borders

With the border-style property, you can set the appearance of the border.
The following values are allowed:
 dotted
 dashed
 solid
 double
 groove
 ridge
 inset
 outset
 none
 hidden
Example
<!DOCTYPE html>
<html>
<head>
<style>
th, td {
border-style: dotted;
}
</style>
</head>
<body>
<h2>Table With Dotted Borders</h2>
<p>Use the CSS border-style property to set the style of the borders.</p>
69 | P a g e
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Border Color
With the border-color property, you can set the color of the border.
Example
<!DOCTYPE html>
<html>
<head>
<style>
th, td {
border-style:solid;
70 | P a g e
border-color: #96D4D4;
}
</style>
</head>
<body>
<h2>Table With Border Color</h2>
<p>Use the CSS border-color property to set the color of the borders.</p>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Exercise:
1. Add a table row with two table headers.
The two table headers should have the value "Name" and "Age".
<table>
71 | P a g e
<tr>
<td>Jill Smith</td>
<td>50</td>
</tr>
</table>
2. Use the correct CSS border values to create a solid black 3 pixels border on a table element.
table, th, td {
border: ;
}
3. Use CSS styles to make the table 300 pixels wide.
<table >
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
72 | P a g e
<td>50</td>
</tr>
</table>
6. Use the correct HTML attribute to make the second TH element span two rows.
<table>
<tr>
<th>Name</th>
<td>Jill Smith</td>
</tr>
<tr>
<th >Phone</th>
<td>555-77854</td>
</tr>
<tr>
<td>555-77854</td>
</tr>
</table>
<table>
<tr>
<th >Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
7. Add a table row at the end of the table, with two table cells.
The two table cells should have the value "Eve Jackson" and "94".
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill Smith</td>
<td>50</td>
</tr>
</table>
73 | P a g e
HTML Table Sizes
HTML tables can have different sizes for each column, row or the entire table.
Use the style attribute with the width or height properties to specify the size of a table, row or column.
HTML Table Width
To set the width of a table, add the style attribute to the <table> element:
Example
Set the width of the table to 100%:
<!DOCTYPE html>
<html>
<style>
table, th, td {
}
</style>
<body>
<h2>100% wide HTML Table</h2>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
74 | P a g e
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Note: Using a percentage as the size unit for a width means how wide will this element be compared to its
parent element, which in this case is the <body> element.
HTML Table Column Width
To set the size of a specific column, add the style attribute on a <th> or <td> element:
Example
Set the width of the first column to 70%:
<!DOCTYPE html>
<html>
<style>
table, th, td {
}
</style>
<body>
<h2>Set the first column to 70% of the table width</h2>
<tr>
<th style="width:70%">Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
75 | P a g e
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
HTML Table Row Height
To set the height of a specific row, add the style attribute on a table row element:
Example
Set the height of the second row to 200 pixels:
<!DOCTYPE html>
<html>
<style>
table, th, td {
}
</style>
<body>
<h2>Set the height of the second row to 200 pixels</h2>
76 | P a g e
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr style="height:200px">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
HTML Table Headers
HTML tables can have headers for each column or row, or for many columns/rows.
HTML Table Headers

Table headers are defined with th elements. Each th element represents a table cell.
Example
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
77 | P a g e
}
</style>
</head>
<body>
<h2>Table Headers</h2>
<p>Use the TH element to define table headers.</p>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</body>
</html>
Vertical Table Headers
To use the first column as table headers, define the first cell in each row as a <th> element:
Example
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
78 | P a g e
}
</style>
</head>
<body>
<h2>Vertical Table Headers</h2>
<p>The first column becomes table headers if you set the first table cell in each table row to a TH
element:</p>
<tr>
<th>Firstname</th>
<td>Jill</td>
<td>Eve</td>
</tr>
<tr>
<th>Lastname</th>
<td>Smith</td>
<td>Jackson</td>
</tr>
<tr>
<th>Age</th>
<td>50</td>
<td>94</td>
</tr>
</table>
</body>
</html>
Align Table Headers
By default, table headers are bold and centered:
Firstname Lastname Age
Jill Smith 50
Eve Jackson 94
To left-align the table headers, use the CSS text-align property:

Example
<!DOCTYPE html>
79 | P a g e
<html>
<head>
<style>
table, th, td {
}
th {
text-align: left;
}
</style>
</head>
<body>
<h2>Left-align Headers</h2>
<p>To left-align the table headers, use the CSS text-align property.</p>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</body>
</html>
Header for Multiple Columns
You can have a header that spans over two or more columns.
80 | P a g e
Name Age
Jill Smith 50
Eve Jackson 94
To do this, use the colspan attribute on the <th> element:

Example
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
}
</style>
</head>
<body>
<h2>A header that spans two columns</h2>
<p>Use the colspan attribute to have a header span over multiple columns.</p>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</body>
81 | P a g e
</html>
able Caption
You can add a caption that serves as a heading for the entire table.
Monthly savings
Month Savings
January $100
February $50
To add a caption to a table, use the <caption> tag:

Example
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Table Caption</h2>
<p>To add a caption to a table, use the caption tag.</p>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
82 | P a g e
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
</body>
</html>
Note: The <caption> tag should be inserted immediately after the <table> tag.
HTML Table Padding & Spacing

HTML tables can adjust the padding inside the cells, and also the space between the cells.
HTML Table - Cell Padding

Cell padding is the space between the cell edges and the cell content.
By default the padding is set to 0.
To add padding on table cells, use the CSS padding property:
Example
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
}
th, td {
padding: 15px;
}
</style>
</head>
83 | P a g e
<body>
<h2>Cellpadding</h2>
<p>Cell padding specifies the space between the cell content and its borders.</p>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<p><strong>Tip:</strong> Try to change the padding to 5px.</p>
</body>
</html>
To add padding only above the content, use the padding-top property.
And the others sides with the padding-bottom, padding-left, and padding-right properties:
Example
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
84 | P a g e
}
th, td {
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 40px;
}
</style>
</head>
<body>
<h2>Cellpadding - top - bottom - left - right </h2>
<p>We can specify different padding for all fours sides of the cell content.</p>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
85 | P a g e
</body>
</html>
HTML Table - Cell Spacing
Cell spacing is the space between each cell.
By default the space is set to 2 pixels.
To change the space between table cells, use the CSS border-spacing property on the table element:
Example
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
}
table {
border-spacing: 30px;
}
</style>
</head>
<body>
<h2>Cellspacing</h2>
<p>Change the space between the cells with the border-spacing property.</p>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
86 | P a g e
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
HTML Table Styling
se CSS to make your tables look better.
HTML Table - Zebra Stripes
If you add a background color on every other table row, you will get a nice zebra stripes effect.
To style every other table row element, use the:nth-child(even) selector like this:
Example
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
87 | P a g e
background-color: #D6EEEE;
}
</style>
</head>
<body>
<h2>Zebra Striped Table</h2>
<p>For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd) table
rows:</p>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
88 | P a g e
</html>
Note: If you use (odd) instead of (even), the styling will occur on row 1,3,5 etc. instead of 2,4,6 etc.
HTML Table - Vertical Zebra Stripes
To make vertical zebra stripes, style every other column, instead of every other row.
Set the :nth-child(even) for table data elements like this:
Example
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
}
th:nth-child(even),td:nth-child(even) {
background-color: #D6EEEE;
}
</style>
</head>
<body>
<h2>Striped Table</h2>
rows:</p>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
89 | P a g e
<th>FRI</th>
<th>SAT</th>
<th>SUN</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
90 | P a g e
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
Note: Put the :nth-child() selector on both th and td elements if you want to have the styling on both headers
and regular table cells.
Combine Vertical and Horizontal Zebra Stripes
You can combine the styling from the two examples above and you will have stripes on every other row and
every other column.
If you use a transparent color you will get an overlapping effect.
Use an rgba() color to specify the transparency of the color:
Example
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
}
background-color: rgba(150, 212, 212, 0.4);
}
th:nth-child(even),td:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
91 | P a g e
}
</style>
</head>
<body>
<h2>Striped Table</h2>
rows:</p>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
<th>FRI</th>
<th>SAT</th>
<th>SUN</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
92 | P a g e
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
Horizontal Dividers
First Name Last Name Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300
If you specify borders only at the bottom of each table row, you will have a table with horizontal dividers.
Add the border-bottom property to all tr elements to get horizontal dividers:
Example
<!DOCTYPE html>
<html>
<head>
<style>
table {
93 | P a g e
width: 100%;
}
tr {
border-bottom: 1px solid #ddd;
}
</style>
</head>
<body>
<h2>Bordered Table Dividers</h2>
<p>Add the border-bottom property to the tr elements for horizontal dividers:</p>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
94 | P a g e
</table>
</body>
</html>
Hoverable Table
Use the :hover selector on tr to highlight table rows on mouse over:
First Name Last Name Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300
Example
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #DDD;
}
tr:hover {background-color: #D6EEEE;}
</style>
</head>
<body>
<h2>Hoverable Table</h2>
<p>Move the mouse over the table rows to see the effect.</p>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
95 | P a g e
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
96 | P a g e
HTML Lists
HTML lists allow web developers to group a set of related items in lists.
Example
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles) by default:
Example
<!DOCTYPE html>
<html>
<body>
<h2>An unordered HTML list</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:
Example
<!DOCTYPE html>
<html>
<body>
<h2>An ordered HTML list</h2>

97 | P a g e
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
HTML Description Lists
HTML also supports description lists.
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and
the <dd> tag describes each term:
Example
<!DOCTYPE html>
<html>
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
98 | P a g e
HTML Forms
An HTML form is used to collect user input. The user input is most often sent to a
server for processing.
Example
<!DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>
</body>
</html>
The <form> Element
The HTML <form> element is used to create an HTML form for user input:
<form>
.
form elements
.
</form>
The <form> element is a container for different types of input elements, such as: text
fields, checkboxes, radio buttons, submit buttons, etc.
99 | P a g e
The <input> Element
The HTML <input> element is the most used form element.
An <input> element can be displayed in many ways, depending on the type attribute.
Here are some examples:
Type Description
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting one of many

choices)
<input type="checkbox"> Displays a checkbox (for selecting zero or more of

many choices)
<input type="submit"> Displays a submit button (for submitting the form)
<input type="button"> Displays a clickable button
Text Fields
The <input type="text"> defines a single-line input field for text input.
Example
A form with input fields for text:
<!DOCTYPE html>
<html>
<body>
<h2>Text input fields</h2>
<form>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
100 | P a g e
<p>Note that the form itself is not visible.</p>
<p>Also note that the default width of text input fields is 20 characters.</p>
</body>
</html>
This is how the HTML code above will be displayed in a browser:
First name:
Last name:
Note: The form itself is not visible. Also note that the default width of an input field is
20 characters.
The <label> Element
Notice the use of the <label> element in the example above.
The <label> tag defines a label for many form elements.
The <label> element is useful for screen-reader users, because the screen-reader will
read out loud the label when the user focuses on the input element.
The <label> element also helps users who have difficulty clicking on very small regions
(such as radio buttons or checkboxes) - because when the user clicks the text within
the <label> element, it toggles the radio button/checkbox.
The for attribute of the <label> tag should be equal to the id attribute of
the <input> element to bind them together.
Radio Buttons
The <input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices.
Example
A form with radio buttons:
<!DOCTYPE html>
<html>
<body>
<h2>Radio Buttons</h2>
<p>Choose your favorite Web language:</p>
<form>
101 | P a g e
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
</body>
</html>
Choose your favorite Web language:
HTML
CSS
JavaScript
Checkboxes
The <input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
Example
A form with checkboxes:
<!DOCTYPE html>
<html>
<body>
<h2>Checkboxes</h2>
<p>The <strong>input type="checkbox"</strong> defines a checkbox:</p>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
102 | P a g e
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br><br>
</form>
</body>
</html>
I have a bike
I have a car
I have a boat
The Submit Button
The <input type="submit"> defines a button for submitting the form data to a form-
handler.
The form-handler is typically a file on the server with a script for processing input data.
The form-handler is specified in the form's action attribute.
Example
A form with a submit button:
First name:
John
Last name:
Doe
Submit
The Name Attribute for <input>
Notice that each input field must have a name attribute to be submitted.
If the name attribute is omitted, the value of the input field will not be sent at all.
Example
This example will not submit the value of the "First name" input field:
103 | P a g e
<!DOCTYPE html>
<html>
<body>
<h2>The name Attribute</h2>
<input type="text" id="fname" value="John"><br><br>
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>
<p>Notice that the value of the "First name" field will not be submitted, because the input element does not
have a name attribute.</p>
</body>
</html>
104 | P a g e

HTML Materials

Uploaded by

Copyright:

Available Formats

HTML Materials

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Materials

Uploaded by

Copyright:

Available Formats

CHAPTER ONE

Start tag Element content End tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>

<br> None none

HTML Page Structure

Step 3: Save the HTML Page

Step 4: View the HTML Page in Your Browser

Start tag Element content End tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>

<br> None none

Nested HTML Elements

HTML Tag Reference

<html> Defines the root of an HTML document

<body> Defines the document's body

<h1> to <h6> Defines HTML headings

<p ="About Projetech">Projetech is a web developer's site.</p>

<img src="Projetech.jpg" width=" " height=" ">

<a "https://www.google.com">This is a link</a>

<img src="img.png" ="Projetech Logo">

HTML Attribute Reference

Attribute Belongs to Description

accesskey Global Attributes Specifies a shortcut key to activate/focus an element

action <form> Specifies where to send the form-data when a form is

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

<p>My Bonnie lies over the ocean.</p>

My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

<h1 style="background-color:powderblue;">This is a heading</h1>

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

<p style=" :courier;">This is a paragraph.</p>

<p style=" :center;">This is a paragraph.</p>

<p style=" :50px;">This is a paragraph.</p>

HTML Text Formatting Elements

<b> Defines bold text

<em> Defines emphasized text

<i> Defines a part of text in an alternate voice or mood

<small> Defines smaller text

<strong> Defines important text

<sub> Defines subscripted text

<sup> Defines superscripted text

<ins> Defines inserted text

<del> Defines deleted text

<mark> Defines marked/highlighted text

<p style=" : violet">This is a paragraph.</p>

<p style="background-color:rgb( , , )">This is a paragraph.</p>

<p style="background-color:rgb( , , )">This is a paragraph.</p>

<p style="color: # ">This is a paragraph.</p>

<p style="color: ( )">This is a paragraph.</p>

<h1>My Home Page</h1>

HTML Links - The target Attribute

<h2>The target Attribute</h2>

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

HTML Links - Different Colors