1. What is HTML?
- HTML stands for HyperText Markup Language.
- It is the standard language used to create web pages.
- HTML structures the content on the web using "tags".
2. Basic Structure of an HTML Document
An HTML document has a basic structure that every web page follows.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
<!DOCTYPE html>: Tells the browser that this is an HTML5 document.<html>: The root element of the HTML page.<head>: Contains meta-information about the page, like the title.<title>: Sets the title of the page (appears on the browser tab).<body>: Contains the content that is visible on the web page.
3. HTML Tags
- Tags are the building blocks of HTML.
- Tags are usually paired: an opening tag
<tagname>and a closing tag</tagname>.
Examples:
<h1>This is a Heading</h1>
<p>This is a Paragraph.</p>
4. Common HTML Tags
Headings (
<h1>to<h6>): Used to define headings on a page.<h1>Largest Heading</h1> <h2>Second Largest Heading</h2>Paragraph (
<p>): Used to define paragraphs.<p>This is a paragraph.</p>Links (
<a>): Used to create hyperlinks.<a href="https://www.example.com">Visit Example</a>Images (
<img>): Used to add images to a web page.<img src="image.jpg" alt="Description of Image">src: Specifies the path to the image.alt: Provides alternative text for the image.
Lists:
- Unordered List (
<ul>): Bullet points.<ul> <li>Item 1</li> <li>Item 2</li> </ul> - Ordered List (
<ol>): Numbered items.<ol> <li>First item</li> <li>Second item</li> </ol>
- Unordered List (
5. Attributes
- Attributes provide additional information about elements.
- They are always included in the opening tag.
Example of Attributes:
html
<a href="https://www.example.com" target="_blank">Open in New Tab</a>
href: The URL of the link.target: Specifies where to open the link.
6. Comments
- Comments are not displayed in the browser but help explain the code.
- They are written like this:
html
<!-- This is a comment -->
7. Example of a Simple Web Page
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a simple paragraph on my web page.</p>
<img src="welcome.jpg" alt="Welcome Image">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</body>
</html>
This is a basic introduction to HTML, suitable for 10th-grade students. As they progress, they can explore more advanced topics like tables, forms, and multimedia elements in HTML.
No comments:
Post a Comment