HTML5 Web Development Course
Comprehensive Student Training Handbook | Professional Curriculum
1. Introduction to HTML
HTML stands for Hyper Text Markup Language. It is the standard markup language used universally to
create and structure pages on the World Wide Web.
Key Characteristics of HTML:
• It is the standard foundational markup language for constructing web layouts.
• It describes the core structure and blueprint of a Web page.
• It consists of a logical series of individual elements.
• HTML elements tell the browser exactly how to render and display the enclosed content.
• Elements apply semantic labels to pieces of content, identifying structures such as "this is a heading",
"this is a paragraph", or "this is a hyperlink".
2. Anatomy of a Simple HTML Document
Below is a standard representation of a minimal, complete HTML document:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Vertizen Technologies • HTML5 Training Material 1
Detailed Element Breakdown:
• <!DOCTYPE html> : This declaration defines that this specific document is an HTML5 compliant
document type. It assists web browsers in displaying web pages accurately. It must appear only once at
the very top of the page (before any markup tags) and is completely case-insensitive.
• <html> : The root element of an HTML page that wraps all secondary elements.
• <head> : Contains essential document metadata, configuration scripts, styles, and character sets that are
not visible to the user.
• <title> : Specifies the official title of the page, visible in the browser's title bar or the active browser
window tab.
• <body> : Defines the document's viewable body area. It serves as the primary container for all visible
elements, including headings, paragraphs, structural blocks, images, hyperlinks, tables, lists, and
interactive elements.
• <h1> : Defines the most prominent, top-level structural heading.
• <p> : Defines a standard textual paragraph element.
3. Understanding HTML Elements
An HTML element is explicitly defined by a start tag, optional attributes, the actual inner content, and a closing
end tag:
<tagname> Content goes here... </tagname>
The total element represents everything starting from the opening tag up to the closing tag:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
Start Tag Element Content End Tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br> none none (Self-closing)
Vertizen Technologies • HTML5 Training Material 2
Important Concept: Empty Elements
Some distinct HTML elements do not contain any inner content or text (such as the <br> element
used for inserting a line break). These are defined as empty elements. Empty elements do not use an
explicit end tag!
4. Setting Up Your Development Workspace
Follow these quick instructions to write and execute your first basic code file using built-in system text editors:
On Windows Platforms (Using Notepad)
1. Open the Start Screen / Menu, type Notepad, and hit enter. (Alternatively, navigate to Start > Programs >
Accessories > Notepad on legacy versions).
2. Write or paste your standard HTML structural code.
3. Navigate to File > Save As in the main menu.
4. Name your file [Link] (or [Link] ) and ensure you explicitly select the file encoding to UTF-8.
On macOS Platforms (Using TextEdit)
1. Open Finder > Applications > TextEdit.
2. Modify system preferences to ensure files save correctly as pure source code: Navigate to Preferences >
Format and choose "Plain Text".
3. Under the "Open and Save" settings, ensure you check the box explicitly stating: "Display HTML files as
HTML code instead of formatted text".
4. Create a new file window and paste your code snippet. Save the document cleanly with a .html file
extension.
Viewing the Rendered Web Page
Locate your saved file on your computer disk and double-click it (or right-click and select "Open With..." to
choose an active web browser such as Chrome, Firefox, or Safari). The web browser reads the markup script
and instantly renders the formatted output page layout.
Vertizen Technologies • HTML5 Training Material 3
5. Document Inspection & Debugging Tools
Modern development relies heavily on inspection tools inside browsers to discover how real-world websites
are coded.
• View Document Source Code: Press the CTRL + U shortcut key combo while focusing on an HTML
webpage, or right-click any blank area and click "View Page Source". A secondary system tab will open
showing the unrendered raw markup file.
• Inspect Elements on-the-fly: Right-click on any element and select "Inspect". This activates the
specialized developer console, displaying live code structures, active styling parameters, and element
spacing metrics.
Hands-On Coding Challenge: Basic Framework Setup
Instructions: Open your local plain text editor and construct a complete baseline layout adhering to
these four guidelines:
1. Add the initial document type declaration.
2. Incorporate the main outer root element block.
3. Place an inner document body tag container.
4. Within the body tag, append a top-tier heading containing the string text "Hello World".
6. Nested Hierarchical Elements
HTML documents operate on a parent-child nesting structure where components reside inside other structural
components. In the baseline code template, four separate layout elements exist simultaneously ( <html> ,
<body> , <h1> , and <p> ):
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
The Breakdown:
• The <html> node is the absolute root node defining the entire container block.
• The <body> element is nested inside the root HTML container node and isolates viewable visual assets.
Vertizen Technologies • HTML5 Training Material 4
• The text blocks <h1> and <p> are sub-nested children embedded within the parent <body>
framework.
7. Core Core Elements & Structural Tags
HTML Headings ( <h1> to <h6> )
Headings communicate document taxonomy to readers and automated search indexers. <h1> sets the
primary critical section title, while <h6> represents the least essential structural sub-heading.
<h1>Heading 1 (Main Title)</h1>
<h2>Heading 2 (Major Section)</h2>
<h3>Heading 3 (Sub-Section Component)</h3>
Best Practices for Document SEO Structure
Search engines actively scrape semantic tags to categorize context and layout hierarchy. Always map
titles logically: prioritize one clean <h1> for the document title, then use sequential <h2> tags for key
chapters, and <h3> for internal subsections.
HTML Paragraphs ( <p> )
Paragraph blocks automatically start on separate blank display lines with integrated vertical whitespace
spacing applied cleanly by default by the engine browser framework.
<p>This is a paragraph.</p>
<p>This is another separate paragraph.</p>
The Browser White Space Rule
Browsers dynamically parse document spaces. Any extra manual inline spacing or carriage breaks
inside your source code paragraph tags will be ignored and compressed down into a single generic
space when visual layouts render.
8. HTML Attributes
Attributes supply valuable supplementary configuration metadata to HTML elements. They are strictly defined
within the opening start tag and typically look like name="value" pairs.
Vertizen Technologies • HTML5 Training Material 5
The href Attribute (Hyperlinks)
The anchor element tag <a> defines a page hyperlink, with href specifying the location target URL
destination:
<a href="[Link] W3Schools</a>
Advanced hyperlinks include targeting options, email routes, and telephone hooks:
• Open target url in brand new tab: <a href="[Link] target="_blank">Open
Google</a>
• Trigger dynamic client email client: <a href="[Link] Email</a>
• Direct device cellular call line: <a href="[Link] Us</a>
The src , alt , width , and height Attributes (Images)
The empty image tag <img> embeds a visual resource into the page framework layout:
<img src="img_girl.jpg" alt="Girl with a jacket" width="500" height="600">
• Absolute URLs: Reference an external domain directly (e.g., src="[Link]
images/img_girl.jpg" ). Take care, as remote external assets can be altered or deleted at any time
without notification.
• Relative URLs: Point to localized resources inside the identical website domain workspace hosting
directory (e.g., src="img_girl.jpg" or src="/images/img_girl.jpg" ).
• The alt attribute: Acts as crucial alternate text for accessibility screens, visually impaired screen
readers, and slow internet connections.
The lang and title Attributes
• The lang attribute: Always configure this inside the structural root html container element to assist
indexing software search engines: <html lang="en"> .
• The title attribute: Supplies supplemental contextual text descriptions rendered directly as dynamic
tooltips when a user mouses over an item: <p title="I'm a tooltip">This is a paragraph.</p> .
Case and Quote Styling Guideline
While the standard treats casing flexibly, the structural W3C standards group highly recommends using
lowercase attributes. Always wrap data values securely inside double quotes "value" . If value
definitions contain structural quotes, alternate with single quotes safely: title='John "ShotGun"
Nelson' .
Vertizen Technologies • HTML5 Training Material 6
9. Typography Formatting Elements
Special stylistic elements allow structural modifications to the aesthetic weight and purpose of standard layout
text strings:
• <b> : Renders text strings bold purely for aesthetic purposes without implied added structural importance.
• <strong> : Demarcates core technical importance. Content inside displays bold to indicate critical
semantic meaning.
• <i> : Renders text in an italic aesthetic style for visual differentiation.
• <em> : Renders text emphasized, implying structural speech inflection.
• <mark> : Applies a highlighted color block treatment background to text strings.
• <small> : Drops font text sizing down a step relative to surrounding characters.
• <del> : Indicates explicit deleted text by applying a strike-through line line treatment.
• <ins> : Highlights newly inserted updates with an underline styling.
• <sub> : Moves characters to a lower subscript position layout block.
• <sup> : Pushes characters up into a higher superscript position layout block.
10. Document Citations & Long Quotes
To refer to external sources or artistic works properly, use HTML's semantic citation tags:
• <blockquote> : Sets off a comprehensive multi-line block quote isolated from running text. Browsers
indent these sections by default. Can utilize a cite metadata attribute link path.
• <q> : Represents a standard internal inline short text quote string. The document parser automatically
appends grammatical quote characters.
• <abbr> : Marks an operational shorthand abbreviation or technical acronym. Use the global title
attribute to output clean mouse-over explanation overlays: <abbr title="World Health
Organization">WHO</abbr> .
• <address> : Organizes explicit contact details, email addresses, phone coordinates, or links belonging to
the web author. Renders in italic styling with independent line space breaks.
• <cite> : Defines the literal legal title of a referenced external creative work (e.g., book, painting, poem).
Note that a person's name is not a creative title.
• <bdo dir="rtl"> : Bi-Directional Override tag allows immediate inversion of typography rendering
orientation vectors (e.g., right-to-left alignment manipulation).
Vertizen Technologies • HTML5 Training Material 7
11. HTML Comments ( <!-- --> )
Developer notes can be added anywhere inside markup tags using standard comment brackets. These items
are strictly passed over by layout layout browser parsing engines and remain hidden from view:
<!-- This is a comment note line that will not be displayed to the viewer -->
12. Web Styling with CSS (Cascading Style Sheets)
Web styles can be injected into layouts via three separate operational integration architectures:
1. Inline Styling: Applied directly inside specific tags utilizing the localized style attribute. Syntax is
standard: <tagname style="property:value;"> .
2. Internal Styling: Contained cleanly inside a centralized <style> container tag block inside the primary
layout document <head> sector.
3. External Styling: Keeps presentation scripts isolated in an independent text document with a .css
extension and loads it using a <link> element. This is the professional standard for web architecture.
Example: Implementing Internal Styles sheets
<!DOCTYPE html>
<html>
<head>
<style>
body { background-color: powderblue; }
h1 { color: blue; font-family: verdana; font-size: 300%; text-align:
center; }
p { color: red; font-family: courier; font-size: 160%; border: 2px solid
grey; }
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Core CSS Layout Dimensions:
• border : Defines a structural perimeter around an HTML layout component block.
• padding : Controls structural spacing clearing gaps internal to the border perimeter.
• margin : Adjusts empty layout gap spacing on the exterior edge boundary of elements.
Vertizen Technologies • HTML5 Training Material 8
13. Block-Level vs. Inline Display Models
All HTML structure components obey baseline visibility rendering layouts that determine how they position
relative to surrounding content:
Block-Level Elements
A block-level element always forces a line-break to start on its own separate block section line. It dynamically
expands to claim the absolute full functional horizontal width layout space accessible on its current page line
layer container channel. Core baseline examples include paragraph nodes <p> and generic organizational
divisions <div> .
Common Block Components: <address> , <article> , <aside> , <blockquote> , <canvas> ,
<div> , <dl> , <fieldset> , <footer> , <form> , <h1>-<h6> , <header> , <hr> , <ol> , <p> ,
<pre> , <section> , <table> , <ul> , and <video> .
Inline Elements
An inline component avoids starting on fresh display lines. It restricts its functional dimensions strictly to the
width required by its immediate internal characters or assets. Core examples include the generic semantic
inline block wrapper tag <span> .
Common Inline Components: <a> , <abbr> , <b> , <br> , <button> , <cite> , <code> , <em> ,
<i> , <img> , <input> , <label> , <q> , <select> , <small> , <span> , <strong> , <sub> , <sup> ,
and <textarea> .
14. The <div> Element and Class Architecture
The division tag <div> acts as a pure layout structural bucket container. It carries no inherent style or text
representation meaning but provides a method to bundle sections of a web layout together for global CSS
styling using the class attribute.
Vertizen Technologies • HTML5 Training Material 9
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
</body>
</html>
15. Implementing Web Tab Favicons
A favicon is the small icon identifier branding branding graphic shown adjacent to page titles inside active
browser tab docks. To wire up an explicit site tab branding image, include standard link reference directives
inside the document's <head> segment:
<!-- Traditional ICO Icon Reference Syntax -->
<link rel="icon" type="image/x-icon" href="[Link]">
<!-- Modern PNG Icon Reference Syntax -->
<link rel="icon" type="image/png" href="[Link]">
Vertizen Technologies • HTML5 Training Material 10