Lesson 2: Setting up Your First HTML Document
Objective:
In this lesson, we will introduce the basic structure of an HTML document. You will learn how to create a simple HTML file, understand its different parts, and view it in a web browser. We will also explore how to use comments in HTML.
1. Basic Structure of an HTML Document
An HTML document consists of a few important elements that define the structure and content of the web page. The main parts are:
-
<!DOCTYPE html>: This declaration defines the document type and version of HTML being used. It tells the browser to render the page as an HTML5 document. -
<html>: This is the root element that wraps all the content of the HTML document. -
<head>: Contains meta-information about the document, such as the title, links to stylesheets, and other metadata. -
<body>: Contains the content that will be displayed on the webpage, such as text, images, and links.
2. Creating a Basic HTML File
Let's break down how to create a basic HTML file.
<!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>Hello, world!</h1>
<p>This is my first HTML page.</p>
</body>
</html>
Explanation:
<!DOCTYPE html>: Specifies the HTML5 document type.<html lang="en">: Indicates that the content is in English.<head>: Contains metadata, such as character encoding (UTF-8) and viewport settings for responsive design.<title>: Defines the title of the page (displayed in the browser tab).<body>: Contains the actual content visible to users. In this case, anh1heading and apparagraph.
3. How to Open an HTML File in a Browser
To see your HTML document in action:
- Save the code in a file with the extension
.html(e.g.,index.html). - Double-click the file, and it will automatically open in your default web browser. You should see the message "Hello, world!" in large text followed by "This is my first HTML page."
4. Introduction to Comments in HTML
Comments in HTML are used to explain parts of your code or leave notes for yourself or others working on the document. They are not displayed in the browser. The syntax for comments is:
<!-- This is a comment -->
Example:
<!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>
<!-- This is the main heading of the page -->
<h1>Hello, world!</h1>
<!-- This is a paragraph containing a simple message -->
<p>This is my first HTML page.</p>
</body>
</html>
5. Student Activity: Try the Code
Now it's time to try the code for yourself! Follow these steps:
- Create a new file in your text editor (e.g., VS Code, Notepad++).
- Copy the HTML code provided above.
- Save the file with a
.htmlextension, for example,index.html. - Open the file in your web browser to see the output.
6. Code Editor with Try & Run Section
Use the code editor below to try editing and running your 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>Hello, world!</h1>
<p>This is my first HTML page.</p>
</body>
</html>
You can modify the text inside the <h1> and <p> tags to experiment and see how changes reflect in the browser.
Conclusion
In this lesson, you learned how to set up a basic HTML document. You also gained an understanding of the core elements like <!DOCTYPE html>, <html>, <head>, and <body>. Additionally, you saw how to open an HTML file in a browser and use comments for better organization and understanding of your code.
Feel free to experiment with the code and try creating your own HTML documents as you progress!
- HTML_basics
- HTML_document_setup
- beginner_HTML_tutorial
- first_HTML_page
- HTML_structure
- HTML_tutorial
- create_HTML_file
- view_HTML_in_browser
- HTML5_tutorial
- HTML_for_beginners
- learn_HTML_fast
- HTML_tags
- HTML_comments
- HTML_document_guide
- web_development_basics
- HTML_elements
- HTML_syntax
- HTML_tags_explained
- how_to_code_HTML
- HTML_tutorial_for_students
- coding_for_beginners
- HTML5_guide
- HTML_meta_tags
- HTML_body
- HTML_head
- HTML_structure_explained
- HTML_page_design
- HTML_programming_basics
- HTML_document_structure
- start_coding_HTML
- HTML_tips
- HTML_tutorials_online
- simple_HTML_tutorial
- create_HTML_pages
- HTML_introduction
- HTML_for_students
- HTML_coding_guide
- web_development_for_students
- HTML_first_steps
- HTML_tags_tutorial
- HTML5_code
- HTML_page_example
- learn_to_code
- easy_HTML_tutorial
- HTML_for_beginners_tutorial
- HTML_coding_for_students
- learn_web_development
- HTML_page_creation
- beginner_coding_tutorial
- HTML_file_setup
- basic_HTML_guide
- coding_HTML_for_beginners
- simple_HTML_code
- Art
- التعليم
- Automobile
- Causes
- Crafts
- Dance
- Drinks
- Film
- Fitness
- Food
- الألعاب
- Gardening
- Health
- News
- Literature
- Music
- Networking
- أخرى
- Party
- Religion
- Shopping
- Sports
- Theater
- Wellness
English
French
Spanish
Portuguese
Deutsch
Turkish
Dutch
Italiano
Russian
Romaian
Portuguese (Brazil)
Greek