Home > Tech > Content

Introduction to HTML: Building Blocks of Web Pages

Tech May 16 1

1. Getting Started with HTML

1.1 What is HTML?

1.1.1 Overview

The internet has become an integral part of our lives. When we open a website, the first thing we see is a series of colorful and elegant web pages. These pages not only present basic content but also feature sophisticated layouts and rich dynamic effects. How is all this achieved? This introductory front-end course will unveil the mysteries of web pages layer by layer.

Components of a Web Page
- HTML: Typically defines the meaning and basic structure of web content.
- CSS: Typically describes the presentation and display effects of the web page.
- JavaScript: Typically executes the functions and behaviors of the web page.

HTML (HyperText Markup Language) is the most basic building block of the Web. It is a markup language that tells web browsers how to structure a page.

Hypertext refers to links that connect web pages within a single website or between multiple websites. We can access content on the internet through these links.

Markup is used to annotate text, images, and other content sothat they can be displayed in a browser, for example, <head>, <body>.

Brief History of HTML
- HTML 1.0 was published as an Internet Engineering Task Force (IETF) working draft in June 1993 (not a standard).
- HTML 2.0 was published as RFC 1866 in November 1995, declared obsolete after RFC 2854 was published in June 2000.
- HTML 3.2 was published as a W3C Recommendation on January 14, 1997.
- HTML 4.0 was published as a W3C Recommendation on December 18, 1997.
- HTML 4.01 (minor improvements) was published as a W3C Recommendation on December 24, 1999.
- HTML5 was finalized by the World Wide Web Consortium on October 29, 2014, after nearly eight years of work. It is currently the most popular version, offering many new features and tags, and most modern browsers support it.

Additional Information: W3C stands for World Wide Web Consortium, founded in October 1994 at the MIT Computer Science and Artificial Intelligence Laboratory. Its founder, Tim Berners-Lee, the inventor of the World Wide Web, is responsible for developing web standards.

1.1.2 Anatomy of an HTML Element

An HTML page consists of a series of elements, which are created using tags.

1) Tags

A pair of tags can set the style of a piece of text, add an image, create a hyperlink, and more. For example:

<h1>Today is a great day!</h1>

In HTML, the <h1> tag represents a heading. We can use the opening tag and closing tag to enclose the text content, making it display as a heading.

It renders like this:

2) Attributes

HTML tags can have attributes. Attributes provide additional information about an HTML element. They can only be added within the opening tag, usually appearing as name="value" pairs. For example:

<h1 align="center">Today is a great day!!!</h1>

In the HTML tag above, the align attribute specifies the horizontal alignment. You can set it to center to make the text centered.

It renders like this:

1.2 Your First HTML Page

1.2.1 Creating a Standard Initial Page

Follow these steps to create a basic HTML page:

Create a new file and name it index.html.
Open it in a text editor.
Add the following code:

2) Explanation of the Page Structure

Here's a breakdown of the components:

<!DOCTYPE html>: The document type declaration. It defines that the HTML page follows the standard rules. Since HTML5, <!DOCTYPE html> is the shortest valid document declaration.
Historical Context: In the early days of HTML (around February 1991), document type declarations were similar to links that could detect errors. They looked like this:
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
```
Nowadays, this is no longer used, and ensuring everything works correctly has become a matter of history.
<html>: This tag wraps the entire page and is the root element. All other elements must be descendants of this element, and there can only be one root element per HTML document.
<head>: This tag is a container for all the information you want to include in an HTML page but not display directly. This includes keywords for search results, page descriptions, CSS styles, character set declarations, and more. You'll learn more about the <head> element in later chapters. For now, focus on two key tags:
- <meta charset="utf-8">: This tag sets the character set encoding to UTF-8, which contains most characters used by humans. It helps prevent page encoding issues.
- <title>: This tag defines the document's title, which appears in the browser's title bar or tab, not on the page itself. It can also describe the page when bookmarking.
<body>: This contains all the content you see on the page: text, images, audio, games, and more.

1.2.2 Implementing the First Case

Inside the <body> tag of your initial page, add a pair of <p> tags. The <p> tag represents a paragraph of text, which creates a separation between blocks of text.
```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page Title</title>
  </head>
  <body>
  </body>
</html>
```

Inside the <p> tags, write some text content.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page Title</title>
  </head>
  <body>
    <p>This is the first page.</p>
  </body>
</html>

Open the file in a web browser to see the result.

1.3 Summary

HTML is a markup language for organizing pages using tags and attributes.
Key parts of an element:
1. Element: A combination of an opening tag, closing tag, and content forms a complete element.
2. Opening tag: Consists of the element's name (e.g., p) enclosed in angle brackets. It marks where the element begins.
3. Closing tag: Similar to the opening tag but includes a forward slash before the element name. It marks where the element ends. Beginners often forget the closing tag, which can cause unexpected results.
4. Content: The text or other elements enclosed within the tags.
5. Attribute: Additional information about the tag.
When learning HTML, focus on two aspects:
1. Understanding the meaning of each tag.
2. Understanding the meaning of attributes within tags.

2. Basic HTML Syntax

2.1 Comments

Like most programming languages, HTML allows you to write comments in the code. To comment out a section of HTML, wrap it with special markers:

<p>I'm outside the comment!</p>

<!-- <p>I'm inside the comment!</p> -->

2.2 Tags in Detail

2.2.1 Empty Elements

Not all elements have an opening tag, content, and a closing tag. Some elements have only one tag, known as empty elements. They are closed within the opening tag itself. For example:

First line of document<br/>
Second line of document<br/>

2.2.2 Nested Elements

You can also place elements inside other elements—this is called nesting. For instance, to emphasize the word "first", wrap it with <b> tags inside the <p> tag:

<p>This is <b>the first</b> page.</p>

2.2.3 Block-Level vs. Inline Elements

1) Concept

HTML has two important categories of elements: block-level elements and inline elements.

Block-level elements: These elements take up the full width available and start on a new line. They appear as blocks on the page. For example: <p>, <hr>, <li>, <div>.
Inline elements: These elements do not start on a new line; they sit within the flow of text. They typically appear inside block-level elements and wrap small parts of the content. For example: <b>, <a>, <i>, <span>.

Note: A block-level element should not be nested inside an inline element, but it can be nested inside another block-level element.

2) `<div>` and `<span>`

<div>: A generic content container with no specific semantic meaning. It is used for grouping other elements, often for styling purposes. It is a block-level element.
<span>: A generic inline container for phrase content with no specific semantic meaning. It is used to group elements for styling purposes. It is an inline element.

Note: <div> and <span> play important roles in page layout.

2.3 Attributes

Attributes are used to extend the functionality of tags. They provide additional information about the element, which doesn't appear in the actual content but can modify the tag's behavior or provide data. Attributes are always written in the format name="value".

Attribute names: Cannot be repeated within the same tag.
Case sensitivity: Attributes and their values are case-insensitive, but the W3C recommends using lowercase.
Quotes: Double quotes are most common, but single quotes are also acceptable.
Common attributes:

Attribute	Purpose
`class`	Defines the class name of an element, used to select and style specific elements.
`id`	Defines a unique identifier for an element; must be unique within the entire document.
`name`	Defines the element's name, often used for form fields submitted to the server.
`value`	Defines the default value displayed within the element.
`style`	Defines inline CSS styles that override any previously set styles (briefly mentioned here, covered in detail later).

2.4 Special Characters

In HTML, the characters <, >, ", ', and & are special because they are part of the HTML syntax. To display these characters in your text, you need to use character references:

Character	Reference
`<`	`<`
`>`	`>`
`"`	`"`
`'`	`'`
`&`	`&`
Non-breaking space	` `

2.5 Summary

The basic syntax of HTML is relatively simple; just pay attention to the correct syntax when using it.

3. HTML Case Study: News Article

Text-based pages are primarily composed of headings and paragraphs. Structuring content makes it easier for readers to digest.

3.1 Case Study Effect

Display a news article.

3.2 Case Study Analysis

3.2.1 Layout with `<div>` and Styling

A piece of text can be divided into several parts. We can use <div> tags to segment the page layout.

First, let's understand how to perform simple layout using <div>. Inside the <head> tag, we add styles using the <style> tag.

Basic format:

<style>
    tagName {
        propertyName: propertyValue;
    }
</style>

Multiple attributes:

<style>
    tagName {
        property1: value1;
        property2: value2;
        property3: value3;
    }
</style>

Multiple property values:

A single property can accept multiple values to set several styles at once.

<style>
    tagName {
        property: value1 value2 value3;
    }
</style>

Tip: For easier layout, you can initially set border styles for <div> elements. Once the layout is done, remove the borders for a clean final display.

3.2.2 Text Tags

Use text content tags to set basic text styles.

Tag	Purpose
`<p>`	Represents a paragraph of text.
`<h1>` to `<h6>`	Represent section headings, with `<h1>` being the highest level and `<h6>` the lowest.
`<hr>`	Represents a thematic break between paragraph-level elements, typically displayed as a horizontal rule.
`<li>`	Represents an item in a list.
`<ul>`	Represents an unordered list (items with no numbering).
`<ol>`	Represents an ordered list (items with numbering).
`<em>`	Represents emphasized text, usually displayed in italics.
`<strong>`	Represents strong importance, usually displayed in bold.
`<font>`	Represents font styling (obsolete, avoid using).
`<i>`	Represents italic text.
`<b>`	Represents bold text.

Key demonstration: Making list items display inline:

li {
    display: inline;
    /* Will not have width/height */
}
li {
    display: inline-block;
    /* Will have width and height */
}

3.3 Using the Tags

Use <div> tags for simple layout.
Use basic text tags for text styling.

3.4 Implementation Steps

Create an initial HTML page.
Use <div> tags to divide areas (title, author, subheading, body) and style them.
Edit the body:
- Add a main title using <h1>.
- Add author information using <em>.
- Add a horizontal rule using <hr>.
- Add subheadings using <h3>.
- Add paragraph text using <p>.
- Add a list using <ol> and <li>.
- Add emphasis using <strong>.

4. HTML Case Study: Headline Page

4.1 Case Study Effect

Create a page layout resembling a news headline page.

4.2 Case Study Analysis

4.2.1 Advanced `<div>` Layout

To achieve the target layout, you first need to differentiate multiple <div> elements and then define styles for each one.

1) Using the `class` Attribute for `<div>`

First, create three <div> elements and give them a border style:

<style>
    div {
        border: 1px solid blue;
    }
</style>

<div>left</div>
<div>center</div>
<div>right</div>

This shows the same style for all <div> elements. How can we distinguish them? Use the class attribute:

.className {
    propertyName: propertyValue;
}

<tagName class="className">

The value of class is custom. Using class helps differentiate <div> elements and set styles more precisely.

2) Floating Layout and Clearing Floats

The main content area is divided into three columns, but <div> elements take up the full width by default. To achieve a multi-column layout, you need to add the float property.

Concept: float specifies to place an element along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though other content still respects the element's space.
```
float: none; /* Default, no floating */
float: left; /* Float to the left */
float: right; /* Float to the right */

clear: both; /* Clear both left and right floats */
```

Add three <div> elements with classes:

<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>

Apply floating styles:

.left {
    width: 20%;
    float: left;
}
.center {
    width: 59%;
    float: left;
}
.right {
    width: 20%;
    float: left;
}

This completes the left-center-right layout.

Add a footer:

<div class="footer">footer</div>

.footer {
    border: 5px solid blue;
}

The footer will overlap the floated elements. To fix this, clear the floats:

.footer {
    border: 5px solid blue;
    clear: both;
}

Set a height for the center column to complete the basic layout:

.center {
    width: 59%;
    float: left;
    height: 600px;
}

4.2.2 Setting Backgrounds

/* Background color */
background-color: black;
/* Background image */
background-image: url("../img/bg.png");

Create a layout with a background:

<style>
    div {
        height: 666px;
        background-color: gray;
    }
    .left {
        width: 10%;
        float: left;
    }
    .center {
        width: 80%;
        float: left;
        background-image: url("../img/star.gif");
    }
    .right {
        width: 10%;
        float: left;
    }
</style>

<div class="left"></div>
<div class="center"></div>
<div class="right"></div>

4.2.3 Image Tag

Tag	Purpose	Notes
`<img>`	Displays an image (local or web).	The `src` attribute is required and specifies the image URL.

Other attributes:

Attribute	Purpose
`title`	Text displayed on mouse hover.
`alt`	Alternative text displayed if the image cannot be shown.
`height`	Height of the image.
`width`	Width of the image.

4.2.4 Hyperlinks

Tag	Purpose	Notes
`<a>`	Creates a hyperlink.	The `href` attribute specifies the URL.

Attribute	Purpose
`target`	Specifies where to open the linked document (`_self` for same tab, `_blank` for new tab).

Removing the underline from links:

a {
    text-decoration: none;
}

4.3 Using the Tags

Use <div> tags to set layout, backgrounds, and floating.
Use basic text tags.
Use <img> tags.
Use <a> tags for hyperlinks.

4.4 Implementation Steps

Create an initial page and copy image assets.
Layout the overall structure.
Implement the top bar (image).
Implement the navigation bar (image).
Implement the left sharing area (image).
Implement the center content area (text + image).
Implement the right advertisement area (image).
Implement the footer (links).

4.5.1 Top Bar

<div class="top_bar">
    <img src="../img/j1.png">
</div>

img {
    width: 100%;
}

4.5.2 Navigation Bar

<div class="nav_bar">
    <img src="../img/j2.png" width="100%">
</div>
<hr size="1"/>

hr {
    color: lightgrey;
    size: 1px;
}

4.5.3 Left Sharing Area

<div class="left">
    <img src="../img/j3.png" />
</div>

4.5.4 Center Content Area

<div class="center">
    <div>
        <h1>Headline Title Here</h1>
    </div>
    <div>
        <font color="gray" size="2"><em>Author Date</em></font><br/>
        <hr/>
    </div>
    <div>
        <h3>Subheading</h3>
    </div>
    <div>
        <p>First paragraph of content...</p>
        <p>Second paragraph...</p>
        <ol type="1">
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ol>
        <img src="../img/1.jpg" />
        <p>Further paragraphs...</p>
    </div>
</div>

.center {
    width: 60%;
    float: left;
}

4.5.5 Right Advertisement Area

<div class="right">
    <div class="right_ad">
        <img src="../img/ad1.jpg">
    </div>
    <div class="right_ad">
        <img src="../img/ad2.jpg">
    </div>
    <div class="right_ad">
        <img src="../img/ad3.jpg">
    </div>
    <!-- Repeat for more ads -->
</div>

4.5.6 Footer

<div class="footer">
    <a href="#">About Us</a>
    <a href="#">Help Center</a>
    <a href="#">Open Platform</a>
    <a href="#">Careers</a>
    <a href="#">Contact</a>
    <a href="#">Legal</a>
    <a href="#">Privacy</a>
    <a href="#">Intellectual Property</a>
    <a href="#">Report</a>
</div>

.footer {
    clear: both;
    background-color: cornflowerblue;
    text-align: center;
}
a {
    text-decoration: none;
    color: white;
}

5. HTML Case Study: Login Page

5.1 Case Study Effect

Create a login page.

5.2 Case Study Analysis

5.2.1 The Form Tag (`<form>`)

Tag	Purpose	Notes
`<form>`	Represents a form for collecting user input and sending it to a web server.

Example:

<form>
    <!-- Form elements -->
</form>

Form Attributes:

Attribute	Purpose	Notes
`action`	URL of the web server that processes the form data.
`method`	HTTP method for submitting the form (get or post). Default is `get`.
`autocomplete`	Indicates if the form elements can have default values based on previous input.	HTML5 feature

Example:

<form action="/web/login" method="get">
</form>
<form action="/web/reg" method="post">
</form>

GET vs POST:

Aspect	GET	POST
Visibility in URL	Visible	Not visible
Data Security	Less secure	More secure
Data Size	Limited (depends on browser)	Unlimited

5.2.2 Introduction to Form Elements

Form elements include input fields, checkboxes, dropdowns, submit buttons, etc.

Tag	Purpose	Notes
`<label>`	Defines a label for a form element.	The `for` attribute should match the `id` of the related input element.
`<input>`	Creates an input control. The `type` attribute determines the input type.
`<button>`	Creates a clickable button, often used to submit forms.	The `type` attribute determines the button's behavior.

1) Simple Text Input

<label>: for attribute matches the id of the related <input>.
<input>:
- type="text" for a plain text input.
- id: Unique identifier for the element.
- name: Name of the element, used when submitting data.
- value: Default value of the element.

<form action="" method="post">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" value="tom">
</form>

2) Submit Button

<button>: The type attribute can be submit to submit the form.

<form action="" method="post">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" value="tom">
    <button type="submit">Login</button>
</form>

5.2.3 Important Attributes

1) `name` and `value` Attributes

name: The name of the <input> element. When the form is submitted, this acts as the key for the data.
value: The current value of the <input> element, which can be entered by the user.

When submitted, the browser sends name=value pairs to the server, separated by &.

2) The `type` Attribute of `<input>`

This is a key attribute. The value of type determines the input control's type.

Basic Text Types:

Value	Purpose	Notes
`text`	Standard single-line text field.
`password`	Single-line field where characters are masked.
`email`	Field for editing an email address; can be validated.	HTML5

Selection Types:

Value	Purpose
`radio`	Radio button. All radio buttons in a group must have the same `name`. Only one can be selected at a time. Use `value` to define the submitted value. Use `checked` to pre-select.
`checkbox`	Checkbox. Use `value` to define the submitted value. Use `checked` to pre-select. Multiple selected values are submitted as an array.

Button Types:

Value	Purpose
`button`	A button with no default behavior; primarily used with JavaScript.
`submit`	Submits the form data.
`reset`	Resets the form fields to their default values.
`image`	An image that acts as a submit button. Requires `src` and `alt` attributes.

HTML5 New Input Types:

Value	Purpose	Notes
`date`	Date input (year, month, day, no time).
`time`	Time input (no time zone).
`datetime-local`	Date and time input (no time zone).
`number`	Enput for floating-point numbers.
`range`	Input for an imprecise value, often displayed as a slider.	`max`, `min`, `step`, `value` attributes define the range.
`search`	A text field for search queries; may include a clear button.
`tel`	Input for a telephone number.
`url`	Input for a URL; can be validated.
`file`	Control that lets the user select a file for upload.	Use `accept` to specify file types.
`hidden`	A control that is not visible to the user but its value is submitted to the server.

The type Attribute of <button>:

Value	Purpose	Notes
`submit`	Submits the form data (default if not specified).	Same as `<input type="submit">`.
`reset`	Resets all form controls to their initial values.	Same as `<input type="reset">`.
`button`	A button with no default behavior, used with JavaScript.	Same as `<input type="button">`.

3) HTML5 New Attributes for `<input>`

Attribute	Purpose	Notes
`placeholder`	A hint to the user of what to enter in the field.	Works with `type="text"`, `search`, `tel`, `url`, or `email`.
`required`	Specifies that the field must be filled out before submitting the form.	A boolean attribute; omit the value to set it to true.
`autocomplete`	Specifies whether the field should have autocomplete enabled (`on`) or disabled (`off`).

5.2.4 More Form Elements

Tag	Purpose	Notes
`<select>`	A dropdown menu.	Used with `<option>` tags.
`<optgroup>`	Groups related `<option>` elements within a `<select>`.
`<option>`	Represents a single option within a `<select>` menu.
`<textarea>`	A multi-line plain text editing control.	`rows` and `cols` attributes define the visible size.
`<fieldset>`	Groups related form controls and labels.
`<legend>`	Defines a caption for a `<fieldset>` element.

Example of <select>:

<label for="pet-select">Choose a pet:</label>

<select name="pets" id="pet-select">
    <option value="">--Please choose an option--</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
</select>

Example of <textarea>:

<textarea name="textarea" rows="10" cols="50">Write something here</textarea>

Example of <fieldset> and <legend>:

<form action="#" method="post">
    <fieldset>
        <legend>Do you agree?</legend>
        <input type="radio" id="agree_yes" name="agree" value="yes">
        <label for="agree_yes">Yes</label>
        <input type="radio" id="agree_no" name="agree" value="no">
        <label for="agree_no">No</label>
    </fieldset>
</form>

5.3 Using the Tags

Use <div> tags for simple layout.
Use basic text tags.
Use form tags (<form>, <input>, <label>, <button>).
Use <img> tags.

5.4 Implementation Steps

Set a background image.
Layout the top and bottom sections.
Implement the top section (image).
Implement the bottom section (form).
Implement page navigation (linking from one page to another).

Tags: HTML Web Development

Back to List

Prev: File Download Handling with Generators and Permission Verification in Falcon

Next: Comprehensive Device Initialization and Configuration Guide

Fading Coder