1.2. Basic HTML Syntax (20 minutes)
Lesson 1: Introduction to HTML and Basic Structure
1.2. Basic HTML Syntax (20 minutes)
Introduction to HTML Tags: Opening and Closing Tags
HTML is made up of tags, which define the structure and content of a webpage. These tags are enclosed in angle brackets (e.g., <tagname>). Most HTML tags come in pairs: an opening tag and a closing tag.
Opening Tag: The starting point of an element (e.g.,
<p>for a paragraph).Closing Tag: The ending point of an element, which includes a forward slash before the tag name (e.g.,
</p>for the end of a paragraph).Example:
<p>This is a paragraph in HTML.</p>
In this example, <p> is the opening tag, and </p> is the closing tag, which wraps the text "This is a paragraph in HTML."
Self-Closing Tags
Some tags in HTML do not require a closing tag. These are known as self-closing tags and typically represent elements that do not have any content within them. Common examples include:
<img>for images<br>for line breaks<h>for horizontal rules (lines)
For instance:
<img src="image.jpg" alt="Description of the image">
This tag does not require a closing tag since it's self-contained (representing an image).
Example of a Basic HTML File Structure
To create a valid HTML webpage, a specific structure needs to be followed. Here's an example of a simple HTML file that follows this structure:
// HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic HTML Page</title>
</head>
<body>
<h1>Welcome to My Webpage</h1>
<p>This is a basic HTML structure example.</p>
</body>
</html>
Explanation of the Components:
<!DOCTYPE html>: This declaration defines the document type and version (HTML5). It tells the browser that this document is written in HTML5.<html lang="en">: This tag wraps the entire HTML document and declares the language of the document (lang="en" means the document is in English).<head>: This section contains metadata (data about the webpage) that the browser uses. It doesn't display on the actual webpage.<meta charset="UTF-8">: Specifies the character encoding (UTF-8) to ensure all characters are displayed correctly.<meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures the webpage displays properly on mobile devices by adjusting the viewport's size.<title>: Sets the title of the webpage, which appears in the browser tab.
<body>: This section contains all the content that will be displayed to the user on the webpage. In this case, there is:A heading (
<h1>Welcome to My Webpage</h1>).A paragraph (
<p>This is a basic HTML structure example.</p>).
This basic structure is essential to understand, as every webpage starts with a similar template.
Students Activity :
Objective:
The goal of this activity is for students to create their first HTML file from scratch and get familiar with basic HTML tags, structure, and file setup.
Activity Steps:
Set Up the Environment:
Instruct students to open a simple text editor such as Notepad (for Windows users) or TextEdit (for Mac users). For a more advanced coding experience, they can use Visual Studio Code, a popular text editor with syntax highlighting for HTML.
Remind them that HTML files should be saved with the .html extension.
Create a Basic HTML File:
Guide students to type the following HTML code into their text editor:
// HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to My First Webpage</h1>
<p>This is my first webpage created using HTML.</p>
</body>
</html>
Once they've typed the code, ask them to save the file as index.html (or any name with the .html extension).
Open the HTML File in a Browser:
After saving, instruct students to open their HTML file in a browser (e.g., Chrome, Firefox, or Safari). They can simply double-click the file or right-click and select "Open with" followed by their preferred browser.
The browser will display the content from their HTML file, including the heading and paragraph.
Modify and Experiment:
Ask students to experiment with the structure by:
Changing the text inside the <h1> and <p> tags.
Adding another heading (
<h2>, <h3>) or a new paragraph (<p>).Saving the file again and refreshing the browser to see the changes reflected.
Reflection and Discussion:
Have a class discussion about the activity. Questions to ask:
How did the browser display their HTML file?
What happened when they changed the text or added new elements?
How do they feel about using HTML tags to control the webpage's content?
By the end of this activity, students will have a foundational understanding of HTML syntax and will have created their first functional webpage using basic tags and structure. This prepares them for more advanced concepts in subsequent lessons.
Last updated