Lecture Notes Of Class 2
Basic Structure of an HTML Document
Objective:
- Understand the fundamental structure of an
HTML document.
- Learn the basic HTML tags required to create a
simple webpage.
Outcome:
- Students will be able to create a simple HTML
page with the correct document structure.
- Students will be able to use basic tags for
headings, paragraphs, line breaks, and horizontal lines.
1. Introduction to the Basic Structure of an HTML Document
An HTML (HyperText Markup Language) document is the foundation of any
webpage. It provides the structure and defines how content is displayed in a
web browser. Every HTML document has a specific structure that must be followed
to ensure that the content is properly rendered by the browser.
2. The Anatomy of an HTML Document
A standard HTML document consists of the following essential components:
a) <!DOCTYPE html> Declaration:
- Purpose: This declaration is
the very first line in any HTML document. It tells the web browser which
version of HTML the document is written in.
- Example:
<!DOCTYPE html>
b) <html> Tag:
- Purpose: This tag wraps all the
content in the HTML document. It represents the root of an HTML document.
- Example:
<html>
<!-- All other HTML content goes here -->
</html>
c) <head> Tag:
- Purpose: The <head>
section contains meta-information about the document, such as its title,
character set, and links to external resources like CSS files.
- Key Elements within <head>:
- <title> Tag: Sets
the title of the document, which appears in the browser tab.
- Example:
<title>My First Webpage</title>
- <meta charset="UTF-8">: Defines
the character encoding for the document, ensuring that the text displays
correctly.
- Example:
<meta charset="UTF-8">
d) <body> Tag:
- Purpose: The <body> tag
contains all the content that will be visible on the webpage, such as
text, images, and links.
- Example:
<body>
<!-- Visible content goes here -->
</body>
3. Basic HTML Tags
Within the <body> section, we use various HTML tags to structure
the content. Here are some of the most fundamental tags:
a) Headings (<h1> to <h6>):
- Purpose: Headings are used to
define the hierarchical structure of the content. <h1> is the highest
level (usually the main title), and <h6> is the lowest.
- Example:
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>
b) Paragraph (<p>):
- Purpose: The <p> tag is
used to define a paragraph of text.
- Example:
<p>This is a paragraph of text.</p>
c) Line Break (<br>):
- Purpose: The <br> tag
inserts a line break within text, moving the content to the next line. It
is a self-closing tag, meaning it does not need a closing tag.
- Example:
This is the first line.<br>This is the second line.
d) Horizontal Line (<hr>):
- Purpose: The <hr> tag
creates a horizontal line (or rule) across the webpage, often used to
separate content.
- Example:
<hr>
4. Putting It All Together: A Simple HTML Document Example
Let's combine the elements we’ve discussed into a simple HTML document.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic HTML Structure</title>
</head>
<body>
<h1>Welcome to My Webpage</h1>
<p>This is my first paragraph. I am
learning HTML.</p>
<p>This is another paragraph with a line
break.<br>See, the text starts on the next line.</p>
<hr>
<h2>About Me</h2>
<p>I am a student learning web
development. This is a great way to start building web pages.</p>
</body>
</html>
5. Practice Exercise
Ask students to create their own HTML document based on the following
guidelines:
- Create a webpage titled "My First
Webpage."
- Include an <h1> heading with a title of
your choice.
- Add two paragraphs with any text.
- Include a line break within one of the
paragraphs.
- Add a horizontal line to separate different
sections of the content.
6. Conclusion
Understanding the basic structure of an HTML document and the purpose of
each tag is crucial for building well-structured webpages. In this class, you
have learned how to set up an HTML document and use some basic HTML tags. This
knowledge is the foundation for all web development activities you will
undertake.