HTML Training
An In-Depth Beginner’s Guide
Web page
• A web page is a document written in hypertext
(also known as HTML) that you can see online,
using a web browser. Most web pages include
text, photos or videos, and links to other web
pages.
Web page
• A web page is a document written in hypertext
(also known as HTML) that you can see online,
using a web browser. Most web pages include
text, photos or videos, and links to other web
pages.
What is a Website
• A set of related web pages located under a
single domain name, typically produced by a
single person or organization.
URL
A URL (Uniform Resource Locator) is a web
address that provides a unique, specific location
for a particular resource on the internet. It
contains information about what you're looking
for as well as the protocol used to access it.
What is HTML?
• HTML stands for HyperText Markup Language.
• It is the standard markup language for creating
web pages.
• HTML describes the structure of web pages using
markup.
• HTML elements are represented by tags.
• Browsers use these tags to render content but do
not display them.
A Simple HTML Document
• <!DOCTYPE html>
• <html>
• <head>
• <title>Page Title</title>
• </head>
• <body>
• <h1>My First Heading</h1>
• <p>My first paragraph.</p>
• </body>
• </html>
HTML Document Explained
• <!DOCTYPE html>: Declares the document type as
HTML5.
• <html>: Root element of the HTML page.
• <head>: Contains meta-information about the
document.
• <title>: Specifies the title of the document.
• <body>: Contains the visible content of the web page.
• <h1>: Defines a main heading.
• <p>: Defines a paragraph.
HTML Tags
• HTML tags are element names surrounded by
angle brackets:
• <tagname>content goes here...</tagname>
• HTML tags normally come in
pairs like <p> and </p>
• The first tag in a pair is the start tag, the second
tag is the end tag
• The end tag is written like the start tag, but with
a forward slash inserted before the tag name
HTML Editors
HTML Editors
• Write 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 using a simple text editor is a good
way to learn HTML.
How to Save a 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).
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").
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>
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>
<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 <a> tag:
• Example
<a href="https://www.w3schools.com">This is a link</a>
• The link's destination is specified in the href attribute.
• 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 <img> tag.
• The source file (src), alternative text
(alt), width, and height are provided as
attributes:
• Example
<img src="w3schools.jpg" alt="W3Schools.com"
width="104" height="142">
HTML Buttons
• HTML buttons are defined with
the <button> tag:
• Example
<button>Click me</button>
HTML Lists
• HTML lists are defined with
the <ul> (unordered/bullet list) or
the <ol> (ordered/numbered list) tag, followed
by <li> tags (list items):
• Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Empty HTML Elements
• HTML elements with no content are called empty
elements.
• <br> is an empty element without a closing tag
(the <br> tag defines a line break).
• Empty elements can be "closed" in the opening tag
like this: <br />.
• HTML5 does not require empty elements to be
closed. But if you want stricter validation, or if you
need to make your document readable by XML
parsers, you must close all HTML elements properly.
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>
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
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
The HTML <head> Element
• The HTML <head> element has nothing to do with HTML headings.
• The <head> element is a container for metadata. HTML metadata is data about the
HTML document. Metadata is not displayed.
• The <head> element is placed between the <html> tag and the <body> tag:
• Example
<!DOCTYPE html>
<html>
<head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>
<body>
.
View HTML Source Code
• View HTML Source Code:
• Right-click in an HTML page and select "View Page
Source" (in Chrome) or "View Source" (in IE), 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 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 output by adding extra spaces or extra lines in your HTML
code.
The browser will remove any extra spaces and extra lines when the page is displayed:
• Example
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
HTML Styles
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.
• You will learn more about CSS later in this
tutorial.
HTML Background Color
• The background-color property defines the background
color for an HTML element.
• This example sets the background color for a page to
powderblue:
• Example
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
HTML Text Color
• The 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>
HTML Fonts
• The 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>
HTML Text Size
• The 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>
HTML Text Alignment
• The 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>
HTML Fonts
• The 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>
HTML Text Size
• The 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>
HTML Text Alignment
• The 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>
HTML Text Formatting
• This text is bold
• This text is italic
• This is subscript and superscript
<p>Water is written as H<sub>2</sub>O.</p>
<p>Water is written as H<sup>2</sup>O.</p>
HTML Formatting Elements
• In the previous chapter, you learned about the HTML style attribute.
• HTML also defines special elements for defining text with a special meaning.
• HTML uses elements like <b> and <i> for formatting output, like bold or italic text.
• 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> - Small text
• <del> - Deleted text
• <ins> - Inserted text
• <sub> - Subscript text
• <sup> - Superscript text
HTML <abbr> for Abbreviations
• The HTML <abbr> element defines an
abbreviation or an acronym.
• Marking abbreviations can give useful
information to browsers, translation systems
and search-engines.
• <p>The <abbr title="World Health
Organization">WHO</abbr> was founded in
1948.</p>
HTML Comments
• Comment tags are used to insert comments in the HTML source code.
• HTML Comment Tags
• You can add comments to your HTML source by using the following syntax:
<!-- Write your comments here -->
• Notice that there is an exclamation point (!) in the opening tag, but not in the closing tag.
• Note: Comments are not displayed by the browser, but they can help document your HTML source
code.
• With comments you can place notifications and reminders in your HTML:
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Remember to add more information here -->
• Comments are also great for debugging HTML, because you can comment out HTML lines of code, one
at a time, to search for errors:
• Example
• <!-- Do not display this at the moment
<img border="0" src="pic_trulli.jpg" alt="Trulli">
-->
HTML Links - The target Attribute
• The target attribute specifies where to open the linked document.
• The target attribute can have one of the following values:
• _blank - Opens the linked document in a new window or tab
• _self - Opens the linked document in the same window/tab as it was
clicked (this is default)
• _parent - Opens the linked document in the parent frame
• _top - Opens the linked document in the full body of the window
• framename - Opens the linked document in a named frame
• This example will open the linked document in a new browser
window/tab:
• Example
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!
</a>
HTML Links - Image as Link
• It is common to use images as links:
• Example
<a href="default.asp">
<img src="smiley.gif" alt="HTML
tutorial" style="width:42px;height:42px;
border:0;">
</a>
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
• <a href="https://www.w3schools.com/
html/" title="Go to W3Schools HTML
section">Visit our HTML Tutorial</a>
HTML Links - Create a Bookmark
• HTML bookmarks are used to allow readers to jump to specific parts of a Web
page.
• Bookmarks can be useful if your webpage is very long.
• To make a bookmark, you must first create the bookmark, and then add a link to it.
• When the link is clicked, the page will scroll to the location with the bookmark.
• Example
• First, create a bookmark with the id attribute:
<h2 id="C4">Chapter 4</h2>
• Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same
page:
<a href="#C4">Jump to Chapter 4</a>
• Or, add a link to the bookmark ("Jump to Chapter 4"), from another page:
• Example
<a href="html_demo.html#C4">Jump to Chapter 4</a>
Images in Another Folder
• If not specified, the browser expects to find
the image in the same folder as the web page.
• However, it is common to store images in a
sub-folder. You must then include the folder
name in the src attribute:
• Example
<img src="images/html5.gif" alt="HTML5
Icon" style="width:128px;height:128px;">
Images on Another Server
• Some web sites store their images on image
servers.
• Actually, you can access images from any web
address in the world:
• Example
• <img src="https://www.w3schools.com/
images/
w3schools_green.jpg" alt="W3Schools.com">
Animated Images
• HTML allows animated GIFs:
• Example
<img src="programming.gif" alt="Computer
Man" style="width:48px;height:48px;">
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>
Background Image
• To add a background image on an HTML element, use
the CSS property background-image:
• Example
• To add a background image on a web page, specify the
background-image property on the BODY element:
<body style="background-image:url('clouds.jpg')">
<h2>Background Image</h2>
</body>
HTML Tables
Defining an HTML Table
• An HTML table is defined with the <table> tag.
• Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table
headings are bold and centered. A table data/cell is defined with the <td> tag.
• Example
<table style="width:100%">
<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>
HTML Table - Adding a Border
• If you do not specify a border for the table, it
will be displayed without borders.
• A border is set using the CSS border property:
• Example
table, th, td {
border: 1px solid black;
}
HTML Table - Adding a Caption
• To add a caption to a table, use the <caption> tag:
• Example
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
HTML Lists
• HTML List Example
• An Unordered List:
• Item
• Item
• Item
• Item
• An Ordered List:
• First item
• Second item
• Third item
• Fourth item
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
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
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
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Nested HTML Lists
• List can be nested (lists inside lists):
• Example
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Block-level Elements
• A block-level element always starts on a new
line and takes up the full width available
(stretches out to the left and right as far as it
can).
• The <div> element is a block-level element.
• Example
<div>Hello</div>
<div>World</div>
Block level elements in HTML
<address>
• <article>
• <aside>
• <blockquote>
• <canvas>
• <dd>
• <div>
Inline Elements
• An inline element does not start on a new line and only takes up as
much width as necessary.
• This is an inline <span> element inside a paragraph.
• Example
• <span>Hello</span>
<span>World</span>
• Inline elements in HTML:
<a>
<abbr>
<acronym>
<b>
<bdo>
<div> Element
• The <div> element is often used as a container for other HTML
elements.
• The <div> element has no required attributes,
but style, class and id are common.
• When used together with CSS, the <div> element can be used to
style blocks of content:
• Example
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<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>
</div>
HTML The class Attribute
• Using The class Attribute
• The class attribute specifies one or more class
names for an HTML element.
• The class name can be used by CSS and
JavaScript to perform certain tasks for elements
with the specified class name.
• In CSS, to select elements with a specific class,
write a period (.) character, followed by the
name of the class:
Example of where a class is used
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
Multiple Classes
• HTML elements can have more than one class
name, each class name must be separated by a
space.
• Example
• Style elements with the class name "city", also
style elements with the class name "main":
<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
Same Class, Different Tag
• Different tags, like <h2> and <p>, can have the
same class name and thereby share the same
style:
• Example
<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>
HTML The id Attribute
• Using The id Attribute
• The id attribute specifies a unique id for an HTML
element (the value must be unique within the
HTML document).
• The id value can be used by CSS and JavaScript to
perform certain tasks for a unique element with the
specified id value.
• In CSS, to select an element with a specific id, write
a hash (#) character, followed by the id of the
element:
Example
• Use CSS to style an element with the id "myHeader":
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
<h1 id="myHeader">My Header</h1>
