We kicked of the class with a revision of the previous class, talking about files and folder management and why it is important, creating folders on Mac, Windows and Linux, leveraging chart GPT for problem solving, installing git and many others. You can go through the previous class here With that out of the way, here is what our instructor touched on this week.
Introduction to HTML
HTML, or HyperText Markup Language, is the standard markup language used to create and structure content on the web. It serves as the backbone of most websites, providing the essential framework for web pages.
1. Structure of HTML
HTML consists of a series of elements, or tags, that define the different parts of a web page. These tags are enclosed in angle brackets and usually come in pairs: an opening tag and a closing tag. For example:
<p>This is a paragraph.</p>
In this example, <p> is the opening tag, and </p> is the closing tag.
2. Basic Components
Elements: The building blocks of HTML, such as headings (
<h1>to<h6>), paragraphs (<p>), links (<a>), images (<img>), and lists (<ul>,<ol>).Attributes: Additional information about an element, specified in the opening tag. For example,
<a href="https://example.com">Visit Example</a>includes the href attribute that defines the link's destination.
3. HTML Document Structure
A typical HTML document starts with a declaration and includes the following sections:
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a simple HTML document.</p>
</body>
</html>
<html>: The root element of an HTML page.<head>: Contains meta-information about the document, such as the title and links to stylesheets.<body>: Contains the content that is displayed on the web page.
4. Importance of HTML
HTML is fundamental for web development, as it allows developers to create structured content that can be styled with CSS (Cascading Style Sheets) and made interactive with JavaScript. Understanding HTML is essential for anyone looking to build websites or web applications.
HTML is the cornerstone of web design, enabling the creation of structured and accessible content. By learning HTML, you gain the ability to build and understand web pages, laying the foundation for more advanced web development skills.
Breaking it down a bit
HTML, or HyperText Markup Language, serves as the backbone of web content by using "markup" to annotate text, images, and various media for display in web browsers. This markup consists of elements or tags, such as <head>, <title>, <body>, <header>, <footer>, <article>, and many others. For instance, the <p> tag is used to define paragraphs, while <img> is used to embed images.
The term "HyperText" refers to the ability of text on a web page to include references to other web pages, commonly known as hyperlinks. These links allow users to navigate seamlessly between different sections of the same page, switch to other pages within the same site, or even open completely different websites. Hyperlinks can also direct users to various formats like PDFs, emails, or multimedia files (e.g., videos and audio).
This capability to link information revolutionized the web, enabling users to access a vast array of information globally and in any desired sequence. Together, HTML and the internet empower users to explore and connect with content in an organized manner.
Lastly, the "Language" aspect of HTML signifies its unique syntax and structure, categorizing it as a markup language. Just like any language, it has rules and conventions that must be followed to create well-structured web pages. Understanding HTML is crucial for anyone looking to engage in web development or design.
HTML Element
An HTML element, often referred to as a "tag," consists of the element name enclosed within angle brackets, such as <p>. The naming of these elements is case-insensitive, meaning you can write them in uppercase, lowercase, or a combination of both. For instance, the <title> tag can also be represented as <Title>, <TITLE>, or any variation thereof. However, it is a widely accepted convention to use lowercase for tags for consistency and readability.
HTML elements can be categorized into two types: self-closing tags and standard tags. Self-closing tags do not require a closing counterpart; an example is the <img/> tag, which is used to embed images. In contrast, standard tags have both an opening and a closing tag, such as <p> for paragraphs, which is closed with </p>. This distinction is essential for properly structuring HTML documents and ensuring that web browsers render content correctly.
Creating HTML Document
To create your first HTML document, start by setting up a dedicated folder for your project. Inside this folder, create a file named index.html. You can do this using Visual Studio Code, the terminal, or even a file explorer.
Once you've created the file, utilize the Live Server extension in VS Code to preview your work in a web browser. This extension allows you to see real-time updates as you make changes to your HTML.
It's important to ensure that you open Visual Studio Code directly in the folder you created for your project. Avoid opening it from broader locations like your computer's root directory, desktop, or downloads folder, as this can lead to confusion and disorganization in managing your files. By keeping everything organized in one folder, you’ll streamline your workflow and make development easier.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Web Page</title>
<meta name="description" content="This is a responsive web page">
</head>
<body>
<h1>Welcome to the world of HTML</h1>
</body>
</html>
The Doctype Declaration
To begin an HTML document, it's essential to include the declaration <!DOCTYPE html> at the very top. While this may resemble an HTML element due to its tag-like structure, it is actually a special node known as a declaration. This declaration instructs the web browser to render the page in standards mode, ensuring consistent and reliable behaviour across different browsers.
If you omit the <!DOCTYPE html> declaration, the browser may default to quirks mode, which can lead to inconsistent rendering and unexpected behaviour. By including the DOCTYPE, you set a clear standard for how the document should be interpreted, promoting better compatibility and adherence to modern HTML standards.
HTML
The <html> element serves as the root of an HTML document, encapsulating all other elements, including <head> and <body>, while excluding the DOCTYPE declaration. Although the <html> tag is implied if omitted, it is crucial to include it to clearly define the document's structure and language.
Additionally, the <html> tag can include a lang attribute, such as <html lang="en">, which specifies the primary language of the document. This attribute uses a two- or three-letter ISO language code, and while the region is optional, it is advisable to include it since language usage can vary significantly across different regions. For example, you might use lang="en-US" for American English or lang="en-GB" for British English, enhancing accessibility and search engine optimization.
The Head
Nestled between the opening and closing <html> tags, the <head> element serves as one of the two primary children of an HTML document, the other being <body>. The <head> section, often referred to as the document metadata header, contains essential information about the site or application that is not directly displayed on the webpage.
Within the <head>, you can include several key elements, such as:
-
<meta />: Provides metadata, like character encoding and viewport settings. For example:
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-
Learning HTML<title>: Sets the title of the webpage, which appears in the browser tab:
<link />: Links to external resources, such as stylesheets:
<link rel="stylesheet" href="./style.css"/>
<script>: Includes JavaScript files or scripts directly.<style>: Contains internal CSS styles.<base>: Specifies a base URL for relative URLs in the document.<noscript>: Provides content for users who have disabled JavaScript.
Overall, the <head> element is crucial for configuring the document's metadata and linking necessary resources, thereby enhancing the webpage's functionality and accessibility.
Character Encoding and Document Title
The <meta charset="UTF-8"/> declaration is essential for specifying character encoding in an HTML document, enabling the inclusion of a wide range of characters and symbols, including emojis (though it's generally advised to avoid using them). By setting the character encoding to UTF-8, you ensure that all text in the document, including content in <style> and <script> tags, inherits this encoding. This flexibility allows for the use of emojis in class names and selectors, but any use of such characters should be carefully considered to maintain usability and accessibility.
The<title> element, located within the <head>, serves as metadata that defines the title of the HTML document, distinct from the content itself. The text placed between the opening and closing <title> tags is displayed in the browser tab, as well as in the history, search results, and social media previews, unless overridden by other <meta> tags. For example, a title like <title>Learning HTML</title> will appear in the browser tab, helping users identify the page. This makes the <title> element a crucial aspect of web page navigation and user experience.
Viewport metadata
The viewport meta tag is a critical component for ensuring responsive web design, allowing content to adapt effectively to various screen sizes and enhancing overall user experience. The typical declaration looks like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
name="viewport": This indicates that the meta tag provides information about the viewport, which is essentially the visible area of a webpage on different devices, including desktops, tablets, and mobile phones.content="width=device-width, initial-scale=1.0": This part contains key settings for the viewport:width=device-width: This property sets the viewport's width to match the device's width, ensuring that the webpage uses the full width of the screen without unnecessary scaling.initial-scale=1.0: This property defines the initial zoom level when the page loads, with a value of 1.0 indicating no zoom—meaning the content appears at its intended size.
By implementing the viewport meta tag, developers can create websites that are visually appealing and functional across a wide range of devices, making it an essential element for modern web development.
The Body
The <body> tag is fundamental in defining the main content of an HTML document. It encompasses all visible elements that users interact with, such as headings, paragraphs, images, hyperlinks, tables, lists, and more.
It's important to note that an HTML document can only contain one <body> element. Within this element, various HTML tags are utilized to organize and present the content effectively.
<body>
1. Headings:
<h1> to <h6>
2. Paragraph:
<p>
3. Links:
<a>
4. Lists:
Ordered List: <ol>, <li>
Unordered List: <ul>, <li>
Description List: <dl>, <dt>, <dd>
5. Tables:
<table>, <tr>, <th>, <td>, <thead>, <tbody>, <tfoot>
6. Forms:
<form>, <input>, <textarea>, <button>, <select>, <option>, <label>, <fieldset>, <legend>
7. Images:
<img>
8. Media:
<audio>, <video>, <source>
9. Embedded Content:
<iframe>, <embed>, <object>, <param>
10. Sections and Grouping Content:
<div>, <span>, <header>, <footer>, <main>, <section>, <article>, <nav>, <aside>
11. Text Formatting:
<b>, <i>, <strong>, <em>, <small>, <mark>, <del>, <ins>, <sub>, <sup>
12. Interactive Elements:
<button>, <details>, <summary>
13. Semantic Elements:
<figure>, <figcaption>, <time>, <progress>, <meter>
14. Script and Styles:
<script>, <noscript>, <style>
</body>
Self-Closing Tags
In HTML, self-closing tags, also known as void elements, are a type of tag that does not require a separate closing tag. Instead, these tags close themselves within the opening tag, making them particularly useful for elements that do not contain any content between an opening and a closing tag. A prime example of a self-closing tag is the <img /> tag, which is used to embed images in a web page.
Other common self-closing tags include:
<br />: This tag inserts a line break, creating space between lines of text.<hr />: This tag generates a horizontal rule, visually separating sections of content with a line.<input />: Used to define input fields in forms, allowing users to enter data.<meta />: Provides metadata about the HTML document, such as character encoding and page description.<link />: Establishes a relationship between the document and external resources, commonly for linking stylesheets.
Self-closing tags streamline HTML coding by eliminating the need for a closing counterpart, thereby enhancing both simplicity and readability in the markup.
Self-Closing Tags and the Difference between Tags and Elements
Self-closing tags in HTML are characterized by a closing slash before the final angle bracket, such as <img />. While HTML5 allows for the omission of this slash, including it can ensure compatibility with XML parsers. XHTML, on the other hand, mandates the use of the closing slash to adhere to XML standards.
In addition to the <img /> tag, other self-closing tags include <area>, <base>, <col>, <embed>, <source>, <track>, and <wbr>. These tags are useful for various purposes, such as linking resources or defining multimedia content.
HTML elements can be categorized into block and inline elements. Block elements, like <div>, always start on a new line and occupy the full width of their container. In contrast, inline elements, such as <span>, do not start on a new line and only take up as much width as their content requires. Multiple inline elements can coexist within a block element.
It's important to distinguish between tags and elements: a tag refers to the syntax within angle brackets (e.g., <h1>), while an element encompasses the opening tag, closing tag, and all the content in between, including any nested elements. For instance, in the case of <h1>Hello</h1>, the entire structure represents the element, while <h1> and </h1> are the tags. Notably, web browsers do not display tags; they interpret them to render the content of the page.
Code Sample on Self-Closing Tags
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Self-Closing Tags Example</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Self-Closing Tags Example</h1>
<span>I will only contain the size of my content:
Use <code>br</code> to break the content to the next page
</span>
<img src="image.jpg" alt="A beautiful view" />
<br />
<input type="text" name="username" placeholder="Enter your username" />
<hr />
</body>
</html>
I am Ikoh Sylva a Cloud Computing Enthusiast with few months hands on experience on AWS. I’m currently documenting my Cloud journey here from a beginner’s perspective. If this sounds good to you kindly like and follow, also consider recommending this article to others who you think might also be starting out their cloud journeys to enable us learn and grow together.
You can also consider following me on social media below;
LinkedIn Facebook X
Top comments (0)