Day 2: HTML Elements and Structure
Quiz aheadWelcome to the world of web development! In this lesson, we'll dive into the basics of HTML (HyperText Markup Language), the foundation of creating web pages.
You'll learn about HTML elements, how to structure them, and how to format your content. By the end of this lesson, you'll be able to create a simple web page and understand the role of various HTML tags.
What is HTML?
HTML stands for HyperText Markup Language. It’s used to create and structure sections, paragraphs, and links on web pages. HTML consists of elements, which are the building blocks of web content. Each element is represented by a tag.
Basic HTML Document Structure
An HTML document is structured with specific elements that help the browser understand how to display the content. Here’s a simple structure:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a paragraph of text.</p>
<p>Here’s another paragraph.</p>
</body>
</html>Key Elements:
<!DOCTYPE html>: Declares the document type and version of HTML.
<html>: The root element of the HTML document.
<head>: Contains meta-information about the document, such as the title and character set.
<meta>: Provides metadata about the HTML document.
<title>: Sets the title of the web page (shown in the browser tab).
<body>: Contains the content of the web page, such as headings, paragraphs, and other elements.
Common HTML Tags
Headings
Headings are used to define titles or sections. They range from <h1> to<h6>, with <h1> being the largest and <h6> the smallest.
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>Paragraphs
<p>This is a paragraph of text. Paragraphs help separate blocks of text and make content more readable.</p>Text Formatting
- Italic Text:
<i>or<em>(for emphasis) - Bold Text:
<b>or<strong>(for strong emphasis)
<p>This is <i>italic</i> and this is <b>bold</b>.</p>Lists
There are three types of lists in HTML:
- Unordered List (
<ul>): Lists items with bullet points. - Ordered List (
<ol>): Lists items with numbers. - Description List (
<dl>): Lists items with terms and descriptions.
<h2>Unordered List</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<h2>Ordered List</h2>
<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
<h2>Description List</h2>
<dl>
<dt>Term 1</dt>
<dd>Description for Term 1</dd>
<dt>Term 2</dt>
<dd>Description for Term 2</dd>
</dl>Horizontal Rule
The <hr> tag creates a horizontal line, which is used to separate sections of content.
Links
The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to.
<a href="name_of_a_document.html">Visit document 2</a>Creating a Web Page: Example
Now, let’s put this all together in a simple example. Follow these steps to create a folder and a basic web page:
Step 1: Create a Folder
On Your Computer: Go in the Documents folder, then create a new folder and name it LANCECOURSE.
Step 2: Create an HTML File
- Inside
LANCECOURSE: Create a new file namedwebdocument.html. - Open webdocument.html: Use any text editor (like Notepad). Right-click on the file and choose Open with, then choose Notepad
- Add the following HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
</head>
<body>
<h1>Hello welcome to my first website</h1>
<hr>
<br>
Hi, <b>I am zooboole</b>
<p>
This is a <i>very short</i> paragraph. This is a very short paragraph.<br> This is a very short paragraph.
</p>
<ul>
<li>First element</li>
<li>Second element</li>
<li>Third element</li>
</ul>
<ol>
<li>First element</li>
<li>Second element</li>
<li>Third element</li>
</ol>
<dl>
<dt><b>Abacus</b></dt>
<dd>This is the definition and an Abacus</dd>
</dl>
<p>
This is a very <u>short paragraph</u>. This is a very short paragraph. This is a very short paragraph.
</p>
</body>
</html>Step 3: View Your Web Page
- Open
webdocument.html: Double-click on the file or right-click and choose "Open with" your preferred web browser. - See the Result: You should see your formatted content, headings, lists, etc.
Congratulations! You’ve just created your first HTML web page. You can now start experimenting with more HTML tags and attributes to create richer and more complex web pages.
Assignment 2
In your LANCECOURSE folder, Create an HTML document and name it letter.html. Open the letter.html file with your favorite text editor and structure the HTML code to get the result as shown in the image below:
Take Quiz