Chapter 2 – Basics of HTML

Table of Contents

What is HTML?

HTML (HyperText Markup Language) is the standard markup language used to create web pages. It describes the structure of a web page and consists of a series of elements that tell the browser how to display the content.

HTML is not a programming language, but rather a markup language that defines the structure and layout of web documents.

Key Points about HTML:

World First Website

The world's first website was created by Tim Berners-Lee in 1991. It was hosted on the NeXT computer at CERN (European Organization for Nuclear Research) in Switzerland.

The first website was very simple and contained:

The original URL was: http://info.cern.ch/hypertext/WWW/TheProject.html

This marked the beginning of the modern World Wide Web as we know it today.

What is a Markup Language?

A markup language is a system for annotating text to define its structure and presentation. It uses tags to mark up the content.

Key characteristics of markup languages:

HTML is a markup language, while programming languages like JavaScript are used for functionality and logic.

Understanding Tags

Tags are the building blocks of HTML. They are keywords enclosed in angle brackets that define HTML elements.

HTML5 tags image showing the tags

Types of Tags:

Example:

Click to view code example 
<p>This is a paragraph.</p>

What is Heading

Headings are used to define the hierarchy and structure of your content. They create a document outline that helps both users and search engines understand the content structure.

Headings are important for:

What is Paragraph Tag (Quick Example)

The <p> tag defines a paragraph in HTML. It automatically adds space before and after the paragraph content.

Quick Example:

Click to view code example 
<p>This is my first paragraph.</p>
<p>This is my second paragraph.</p>

Types of Heading Tags

HTML provides six levels of headings, from <h1> (most important) to <h6> (least important).

Heading Hierarchy:

Visual Example:

The Paragraph Tag

The <p> tag is one of the most commonly used HTML elements. It defines a paragraph of text.

Characteristics:

Advanced Usage:

Click to view code example 
<p>This is a <strong>bold</strong> word in a paragraph.</p>
<p>You can also use <em>emphasis</em> in paragraphs.</p>

What is an Element?

An HTML element is a complete structure that consists of an opening tag, content, and a closing tag (or just a self-closing tag).

Element Structure:

Examples:

Click to view code example 
<!-- Complete element -->
<p>This is a paragraph element.</p>

<!-- Element with nested elements -->
<div>
  <h1>Title</h1>
  <p>Content</p>
</div>

<!-- Self-closing element -->
<img src="image.jpg" alt="Image" />

Horizontal Rule (hr)

The <hr> tag creates a horizontal line that can be used to separate content sections.

Usage:

Example:

Click to view code example 
<p>First section content</p>
<hr>
<p>Second section content</p>

Line Break (br)

The <br> tag creates a line break within text content. It's a self-closing tag.

When to use <br>:

Example:

Click to view code example 
<p>
  John Doe<br>
  123 Main Street<br>
  New York, NY 10001
</p>

Introduction to HTML Lists

HTML lists are used to group related items together. There are three main types of lists in HTML:

Lists help organize content and make it easier to read and understand.

Types of Lists (Ordered & Unordered)

Unordered Lists:

Use <ul> and <li> tags. Items are marked with bullets by default.

Click to view code example 
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Ordered Lists:

Use <ol> and <li> tags. Items are numbered by default.

Click to view code example 
<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Adding Comments in HTML

Comments are used to add notes or explanations in HTML code. They are not displayed in the browser.

Comment Syntax:

<!-- This is a comment -->

Uses of Comments:

Example:

<!-- Header section starts here -->
<header>
  <h1>Website Title</h1>
</header>
<!-- Header section ends -->

The Anchor Tag (a)

The <a> tag defines a hyperlink, which is used to link from one page to another.

Important Attributes:

Advanced Example:

<a href="https://www.example.com" target="_blank" title="Visit Example Website">Example</a>

Attributes Explained

Attributes provide additional information about HTML elements. They are always specified in the opening tag.

Attribute Syntax:

<tagname attribute="value">Content</tagname>

Types of Attributes:

Common Attributes:

Attribute Description Example
id Unique identifier id="header"
class Class name for styling class="button"
style Inline CSS styles style
title Tooltip text title="Click here"

Adding Images (img)

The <img> tag is used to embed images in HTML pages. It's a self-closing tag.

Essential Attributes:

Example:

Local Image Example:

Here's an example using a local image from our images folder:

<img src="images/cat.jpg" alt="Image of a cat" width="300" height="200">
Image of a cat

Image Maps (Clickable Images)

Image maps allow you to create clickable areas within an image that can link to different pages or perform different actions. This is useful for creating interactive diagrams, navigation menus, or detailed maps.

How Image Maps Work:

Area Shape Options:

Example: Interactive Desk Image

Click on different parts of the desk image below:

Interactive Desk Computer Books Lamp Drawer

HTML Code:

<img src="images/desk.jpg" alt="Interactive Desk" width="400" height="300" usemap="#deskmap">

<map name="deskmap">
  <area shape="rect" coords="50,50,150,120" href="#computer" alt="Computer" title="Click for computer info">
  <area shape="rect" coords="200,80,300,140" href="#books" alt="Books" title="Click for books info">
  <area shape="rect" coords="320,180,380,220" href="#lamp" alt="Lamp" title="Click for lamp info">
  <area shape="circle" coords="100,200,30" href="#drawer" alt="Drawer" title="Click for drawer info">
</map>

Interactive Areas:

Practical Uses:

Note: Coordinates are measured in pixels from the top-left corner of the image (0,0). You can use image editing tools to determine the exact coordinates for your clickable areas.

HTML Documents

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

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

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

Example

<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

The <!DOCTYPE> Declaration

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

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

The <!DOCTYPE> declaration is not case sensitive.

The <!DOCTYPE> declaration for HTML5 is: <!DOCTYPE html>

HTML Headings

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>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

HTML Paragraphs

HTML paragraphs are defined with the <p> tag.

Example

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

This is a paragraph. HTML paragraphs are defined with the <p> tag.

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="images/htmlimg.webp" alt="HTML Tutorial Image" width="400" height="200">
HTML Tutorial Image

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.

Practice Exercises

Exercise 1: Create Your First HTML Page

Create a simple HTML page with a heading and a paragraph. Here's what you need to do:

  1. Create a new HTML file
  2. Add the DOCTYPE declaration
  3. Add html, head, and body elements
  4. Include a title in the head section
  5. Add an h1 heading and a paragraph in the body
Click to reveal the solution 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First HTML Page</title>
</head>
<body>
  <h1>Welcome to HTML</h1>
  <p>This is my first HTML page!</p>
</body>
</html>

Exercise 2: Add Different Heading Levels

Create an HTML page with all six heading levels (h1 through h6) and a paragraph explaining the heading hierarchy.

Click to reveal the solution 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML Headings</title>
</head>
<body>
  <h1>Main Heading (Most Important)</h1>
  <h2>Section Heading</h2>
  <h3>Subsection Heading</h3>
  <h4>Sub-subsection Heading</h4>
  <h5>Minor Heading</h5>
  <h6>Least Important Heading</h6>
  <p>Headings create a hierarchy from h1 (most important) to h6 (least important).</p>
</body>
</html>

Exercise 3: Create a List of Your Favorite Things

Create both an ordered list and an unordered list. Include at least 3 items in each list.

Click to reveal the solution 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Favorite Things</title>
</head>
<body>
  <h1>My Favorite Things</h1>

  <h2>Ordered List (Ranked)</h2>
  <ol>
    <li>Reading books</li>
    <li>Playing guitar</li>
    <li>Cooking</li>
  </ol>

  <h2>Unordered List</h2>
  <ul>
    <li>Pizza</li>
    <li>Chocolate</li>
    <li>Ice cream</li>
  </ul>
</body>
</html>

Exercise 4: Add Links and Images

Create a page with links to different websites and include an image with alt text.

Click to reveal the solution 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Links and Images</title>
</head>
<body>
  <h1>Links and Images Example</h1>

  <p>Visit these websites:</p>
  <ul>
    <li><a href="https://www.google.com">Google</a></li>
    <li><a href="https://www.github.com">GitHub</a></li>
    <li><a href="https://www.mozilla.org">Mozilla</a></li>
  </ul>

  <h2>Sample Image</h2>
  <img src="https://via.placeholder.com/300x200" alt="Placeholder image for demonstration">
</body>
</html>

Reference Video for Chapter 2

Chapter 2 Summary

Key Takeaways

What You Learned

In this chapter, you mastered the fundamentals of HTML:

Next Steps

With HTML basics mastered, you're ready to create more complex content structures. In Chapter 3, you'll learn:

Practice What You've Learned

Ready for the next chapter? Continue to Chapter 3 →