dev.to

AltSchool Of Engineering Tinyuka’24 Month 1 Week 3

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: This is a paragraph. In this example, is the opening tag, and is the closing tag. 2. Basic Components Elements: The building blocks of HTML, such as headings ( to ), paragraphs (), links (), images (), and lists (, ). Attributes: Additional information about an element, specified in the opening tag. For example, Visit Example 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: My Web Page Welcome to My Web Page This is a simple HTML document. : The root element of an HTML page. : Contains meta-information about the document, such as the title and links to stylesheets. : 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 , , , , , , and many others. For instance, the tag is used to define paragraphs, while 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 . The naming of these elements is case-insensitive, meaning you can write them in uppercase, lowercase, or a combination of both. For instance, the tag can also be represented as , , 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 tag, which is used to embed images. In contrast, standard tags have both an opening and a closing tag, such as for paragraphs, which is closed with . 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 cre

Mar 3, 2025 - 20:03
 0
AltSchool Of Engineering Tinyuka’24 Month 1 Week 3

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.

Image of Altschool Class

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:

This is a paragraph.

In this example,

is the opening tag, and is the closing tag.

2. Basic Components

  • Elements: The building blocks of HTML, such as headings (

    to
    ), paragraphs (

    ), links (), images (), and lists (

    3. HTML Document Structure

    A typical HTML document starts with a declaration and includes the following sections:

    


    My Web Page


    
    Welcome to My Web Page
    
    
    This is a simple HTML document.

    • : The root element of an HTML page.

    • : Contains meta-information about the document, such as the title and links to stylesheets.

    • : 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 , </code>, <code><body></code>, <code><header></code>, <code><footer></code>, <code><article></code>, and many others. For instance, the <code><p></code> tag is used to define paragraphs, while <code><img></code> is used to embed images. <p>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). <p>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. <p>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. <h2> HTML Element </h2> <p>An HTML element, often referred to as a "tag," consists of the element name enclosed within angle brackets, such as <code><p></code>. The naming of these elements is case-insensitive, meaning you can write them in uppercase, lowercase, or a combination of both. For instance, the <code><title></code> tag can also be represented as <code><Title></code>, <code><TITLE></code>, or any variation thereof. However, it is a widely accepted convention to use lowercase for tags for consistency and readability. <p>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 <code><img/></code> tag, which is used to embed images. In contrast, standard tags have both an opening and a closing tag, such as <code><p></code> for paragraphs, which is closed with <code></code>. This distinction is essential for properly structuring HTML documents and ensuring that web browsers render content correctly. <h2> Creating HTML Document </h2> <p>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. <p>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. <p>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.<br> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code><!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

    Welcome to the world of HTML

The Doctype Declaration

To begin an HTML document, it's essential to include the declaration 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 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 element serves as the root of an HTML document, encapsulating all other elements, including and , while excluding the DOCTYPE declaration. Although the tag is implied if omitted, it is crucial to include it to clearly define the document's structure and language.

Additionally, the tag can include a lang attribute, such as , 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.

Image of codes on a screen

The Head

Nestled between the opening and closing tags, the element serves as one of the two primary children of an HTML document, the other being . The 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 , you can include several key elements, such as:

  • : Provides metadata, like character encoding and viewport settings. For example:

  • : Sets the title of the webpage, which appears in the browser tab:
    Learning HTML

  • : Links to external resources, such as stylesheets: