Introduction to HTML
HTML (Hypertext Markup Language) is the standard language used to create web pages. It provides the basic structure of a website, which is then enhanced and modified by other technologies like CSS (Cascading Style Sheets) and JavaScript.
Structure of a Web Page
An HTML document has a well-defined structure consisting of several key components:
Doctype Declaration: Defines the document type and version of HTML. For HTML5, it is written as
<!DOCTYPE html>.HTML Element: The root element of an HTML page, encompassing all other elements. It is represented by the
<html>tag.Head Element: Contains metadata about the document, such as its title and links to scripts and stylesheets. It is represented by the
<head>tag.Body Element: Contains the content of the web page that is visible to users, such as text, images, and links. It is represented by the
<body>tag.
Basic Structure of an HTML Document
html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample Web Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a simple paragraph.</p>
<a href="https://example.com">Visit Example.com</a>
</body>
</html>
Basic Tags and Elements
HTML uses various tags to define different elements on a web page. Here are some fundamental tags:
Headings: Used to define headings of different levels.
<h1>to<h6>:<h1>is the highest (most important) heading, and<h6>is the lowest.
html code<h1>Main Heading</h1> <h2>Subheading</h2>Paragraphs: Used to define blocks of text.
<p>: Defines a paragraph.
html code<p>This is a paragraph of text.</p>Links: Used to create hyperlinks.
<a>: Defines a hyperlink. Thehrefattribute specifies the URL.
html code<a href="https://example.com">Click here to visit Example.com</a>Images: Used to embed images.
<img>: Embeds an image. Thesrcattribute specifies the image URL, and thealtattribute provides alternative text.
html code<img src="image.jpg" alt="Description of the image">Lists: Used to create lists.
<ul>: Defines an unordered list (bulleted).<ol>: Defines an ordered list (numbered).<li>: Defines a list item.
html code<ul> <li>Item 1</li> <li>Item 2</li> </ul> <ol> <li>First item</li> <li>Second item</li> </ol>Tables: Used to display tabular data.
<table>: Defines a table.<tr>: Defines a table row.<th>: Defines a table header.<td>: Defines a table cell.
html code<table> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Data 1</td> <td>Data 2</td> </tr> </table>Div and Span: Used for layout and styling.
<div>: Defines a block-level container.<span>: Defines an inline container.
html code<div> <p>This is inside a div element.</p> </div> <p>This is a <span>highlighted</span> word.</p>
Conclusion
Understanding the basic structure of an HTML document and its fundamental tags is essential for creating and organizing web pages. HTML provides the backbone for all web content, allowing designers and developers to structure content effectively and build interactive, user-friendly websites. As you become more familiar with HTML, you can explore additional elements and attributes to enhance the functionality and appearance of your web pages.
No comments:
Post a Comment