☰
In this Chapter, we will take you through the fundamentals of HTML, covering its structure, elements, and how to create a simple web page.
HTML is a markup language that defines the structure and content of a web page.
It uses a system of tags and attributes to create elements that web browsers interpret and display as websites.
HTML is not a programming language but rather a markup language, which means it's focused on presentation and organization rather than computation.
An HTML document consists of various elements, and it has a hierarchical structure. At the highest level, you have the HTML element, which encloses the entire document. Inside the HTML element, you'll find the <head> and <body> elements.
<head>: This section contains meta-information about the document, such as the title of the page, character encoding, and links to external resources like CSS and JavaScript files.
<body>: This is where the main content of the web page resides, including text, images, links, and other media elements.
Here's a basic HTML document structure:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a simple web page created with HTML.</p>
</body>
</html>
HTML uses a set of predefined elements that serve different purposes. Each element is enclosed within angle brackets ("<" and ">") and usually comes in pairs – an opening tag and a closing tag. Some common HTML elements include:
<h1>, <h2>, <h3>, etc.: Headings, used to define the title or section of a web page.
<p>: Paragraphs, used to structure and format text content.
<a href="https://www.example.com">Link Text</a>: Hyperlinks, used to navigate between web pages.
<img src="image.jpg" alt="Image Description">: Images, used to display graphics on a web page.
<ul> and <li>: Unordered lists and list items, used to create bullet-pointed lists.
<ol> and <li>: Ordered lists and list items, used for numbered lists.
<div>: A division or section used for layout and organization.
HTML elements can have attributes that provide additional information or settings. For example, the <a> element has an href attribute to specify the link's destination. Attributes are added to the opening tag and are often in name-value pairs. Here's an example:
<a href="https://www.example.com" title="Visit Example.com">Link Text</a>
To create your first web page using HTML, follow these steps:
Open a text editor (like Notepad on Windows or TextEdit on macOS) or use a code editor (e.g., Visual Studio Code or Sublime Text).
Type or copy the following code into your editor:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a simple web page created with HTML.</p>
</body>
</html>
Save the file with an ".html" extension (e.g., "index.html").
Open the HTML file in a web browser to view your web page.
Congratulations! You've just created your first HTML web page. You can gradually explore more HTML elements and attributes to enhance your web page's structure and appearance.
HTML is the cornerstone of web development, and learning its basics is a crucial first step in building websites and web applications. This blog covered the fundamental structure of an HTML document, common HTML elements, and how to create a simple web page. As you continue your journey into web development, you'll dive deeper into CSS for styling and JavaScript for interactivity, but HTML will always be the foundation on which everything else is built.
© 2022-2023 All rights reserved.