Technical Documentation Page

Introduction

HTML is the standard markup language for creating Web pages.

HTML stands for Hyper Text Markup Language
HTML describes the structure of Web pages using markup
HTML elements are the building blocks of HTML pages
HTML elements are represented by tags
HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
Browsers do not display the HTML tags, but use them to render the content of the page

Example
    <!DOCTYPE html>
    <html>
      <head>
        <title>Page Title</title>
      </head>
      <body>
        <h1>My First Heading</h1>
        <p>My first paragraph.</p>
      </body>
    </html>

The <!DOCTYPE html> declaration defines this document to be HTML5
The <html> element is the root element of an HTML page
The <head> element contains meta information about the document
The <title> element specifies a title for the document
The <body> element contains the visible page content
The <h1> element defines a large heading
The <p> element defines a paragraph

HTML Tags

HTML tags are element names surrounded by angle brackets:

<tagname>content goes here...</tagname>

HTML tags normally come in pairs like <p> and </p>
The first tag in a pair is the start tag, the second tag is the end tag
The end tag is written like the start tag, but with a forward slash inserted before the tag name

HTML Elements

An HTML element usually consists of a start tag and end tag, with the content inserted in between:

<tagname>Content goes here...</tagname>

The HTML element is everything from the start tag to the end tag:

<p>My first paragraph.</p>

HTML elements can be nested (elements can contain elements). All HTML documents consist of nested HTML elements. This example contains four HTML elements:

Example
    <!DOCTYPE html>
    <html>
      <body>
        <h1>My First Heading</h1>
        <p>My first paragraph.</p>
      </body>
    </html>

HTML Attributes

Attributes provide additional information about HTML elements.

All HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"

Below is an alphabetical list of some attributes often used in HTML:

Attribute	Description
alt	Specifies an alternative text for an image, when the image cannot be displayed <img src="img_girl.jpg" alt="Girl with a jacket">
disabled	Specifies that an input element should be disabled
href	Specifies the URL (web address) for a link <a href="https://www.w3schools.com">This is a link</a>
id	Specifies a unique id for an element <div id=”first-div">This is the first div</div>
src	Specifies the URL (web address) for an image <img src="img_girl.jpg">
style	Specifies an inline CSS style for an element <p style="color:red">I am a paragraph</p>
width and height	Specifies the width and height of an element <img src="img_girl.jpg" width="500" height="600">

HTML Headings

Headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading.

Example
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>

Note: Browsers automatically add some white space (a margin) before and after a heading. This is how the above code will appear in a browser

Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6

Each HTML heading has a default size. However, you can specify the size for any heading with the style attribute, using the CSS font-size property:

Example
    <h1 style="font-size:60px;">Heading 1</h1>

The HTML <head> Element

The HTML <head> element has nothing to do with HTML headings.

The <head> element is a container for metadata. HTML metadata is data about the HTML document. Metadata is not displayed. Metadata typically define the document title, character set, styles, links, scripts, and other meta information.

The <head> element is placed between the <html> tag and the <body> tag:

Example
    <!DOCTYPE html>
    <html>
      <head>
        <title>My First HTML</title>
        <meta charset="UTF-8">
      </head>

      <body>
      .
      .
      </body>
    </html>

HTML Paragraphs

The HTML <p> element defines a paragraph. Browsers automatically add some white space (a margin) before and after a paragraph.

Example
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>

The HTML Style Attribute

Setting the style of an HTML element, can be done with the style attribute. The HTML style attribute has the following syntax:

<tagname style="property:value;">

The property is a CSS property. The value is a CSS value.

HTML Background Color

The background-color property defines the background color for an HTML element. This example sets the background color for a page to powderblue:

Example
    <body style="background-color:powderblue;">
      <h1>This is a heading</h1>
      <p>This is a paragraph.</p>
    </body>

HTML Text Color

The color property defines the text color for an HTML element.

Example
    <h1 style="color:blue;">This is a heading</h1>
    <p style="color:red;">This is a paragraph.</p>

HTML Fonts

The font-family property defines the font to be used for an HTML element.

Example
    <h1 style="font-family:verdana;">This is a heading</h1>
    <p style="font-family:courier;">This is a paragraph.</p>

HTML Text Size

The font-size property defines the text size for an HTML element.

Example
    <h1 style="font-size:300%;">This is a heading</h1>
    <p style="font-size:160%;">This is a paragraph.</p>

HTML Text Alignment

The text-align property defines the horizontal text alignment for an HTML element.

Example
    <h1 style="text-align:center;">Centered Heading</h1>
    <p style="text-align:center;">Centered paragraph.</p>

HTML Text Formatting

This text is bold This text is italic This is _subscript and ^superscript

HTML uses elements like <b> and <i> for formatting output, like bold or italic text.

Formatting elements were designed to display special types of text:

<b>	Bold text
<strong>	Important text
<i>	Italic text
<em>	Emphasized text
<mark>	Marked text
<small>	Small text
<del>	Deleted text
<ins>	Inserted text
<sub>	Subscript text
<sup>	Superscript text

HTML Comments

Comment tags are used to insert comments in the HTML source code.

You can add comments to your HTML source by using the following syntax:

Comments are not displayed by the browser, but they can help document your HTML source code. Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors:

<!-- Do not display this at the moment
    <img border="0" src="pic_girl.jpg" alt="Girl">-->

HTML Colors

HTML colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.

Some predefined colors are Tomato, Orange, DodgerBlue, MediumSeaGreen, SlateBlue, Gray, Violet, Red, Black, etc.. The RGB, HEX, HSL values for the color “Tomato” are rgb(255, 99, 71), #ff6347, hsl(9, 100%, 64%).

You can set the background color for HTML elements:

Example
    <h1 style="background-color:Yellow;">Hello World</h1>

Hello World

You can set the color of text:

Example
    <h1 style="color:Tomato;">Hello World</h1>

Hello World

You can set the color of borders:

Example
    <h1 style="border:2px solid Green;">Hello World</h1>

Hello World

HTML Links

Links are found in nearly all web pages. Links allow users to click their way from page to page. HTML links are hyperlinks. You can click on a link and jump to another document. When you move the mouse over a link, the mouse arrow will turn into a little hand. A link does not have to be text. It can be an image or any other HTML element.

In HTML, links are defined with the <a> tag:

<a href="url">link text</a>

Example
    <a href="https://www.abcschools.com/html/">Visit our School</a>

The example above used an absolute URL (a full web address).

A local link (link to the same web site) is specified with a relative URL (without http://www....).

Example
    <a href="html_images.asp">HTML Images</a>

HTML Images

Images can improve the design and the appearance of a web page. In HTML, images are defined with the <img> tag. The <img> tag is empty, it contains attributes only, and does not have a closing tag. The src attribute specifies the URL (web address) of the image:

<img src="url">

Example
    <img src="img_girl.jpg" alt="Girl in a jacket">
    <img src="img_flowers_china.jpg" alt="Flowers in China">

The alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader). The value of the alt attribute should describe the image. If a browser cannot find an image, it will display the value of the alt attribute.

You can use the style attribute to specify the width and height of an image.

Example
    <img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

Alternatively, you can use the width and height attributes:

Example
    <img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

The width and height attributes always define the width and height of the image in pixels.

HTML Tables

An HTML table is defined with the <table> tag. Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag. The <td> elements are the data containers of the table. They can contain all sorts of HTML elements: text, images, lists, other tables, etc.

To add a caption to a table, use the <caption> tag:

Example
    <table style="width:100%">
      <caption>Monthly savings</caption>
      <tr>
        <th>Month</th>
        <th>Savings</th>
      </tr>
      <tr>
        <td>January</td>
        <td>$100</td>
      </tr>
      <tr>
         <td>February</td>
         <td>$50</td>
      </tr>
    </table>

If you do not specify a border for the table, it will be displayed without borders. A border is set using the CSS border property:

Example
    table, th, td {
      border: 1px solid black;
    }

Cell padding specifies the space between the cell content and its borders. If you do not specify a padding, the table cells will be displayed without padding. To set the padding, use the CSS padding property:

Example
    th, td {
      padding: 15px;
    }

Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items will be marked with bullets (small black circles) by default.

Example
    <ul>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>

Here is the output:

Coffee Tea Milk

The CSS list-style-type property is used to define the style of the list item marker.

Example - Square
    <ul style="list-style-type:square">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>

Here is the output:

Coffee Tea Milk

Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The type attribute of the <ol> tag, defines the type of the list item marker. For eg, type=”1” lists the items with numbers; type=”A” lists the items with uppercase letters, etc. The list items will be marked with numbers by default.

Example
    <ol type="1">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ol>

Here is the output:

Coffee Tea Milk

HTML Forms

The HTML <form> element defines a form that is used to collect user input.

    <form>
    .
    form elements
    .
    </form>

An HTML form contains form elements.

Form elements are different types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more.

The <input> element is the most important form element. The <input> element can be displayed in several ways, depending on the type attribute.

<input type="text"> defines a one-line input field for text input.

<input type="radio"> defines a radio button. Radio buttons let a user select ONE of a limited number of choices.

<input type="submit"> defines a button for submitting the form data to a form-handler. The form-handler is typically a server page with a script for processing input data. The form-handler is specified in the form's action attribute.

Example
    <form action="/action_page.php">
      First name:<br>
      <input type="text" name="firstname"><br>
      Last name:<br>
      <input type="text" name="lastname"><br>
      <input type="radio" name="gender" value="male" checked> Male<br>
      <input type="radio" name="gender" value="female"> Female<br>
      <input type="radio" name="gender" value="other"> Other<br><br>
      <input type="submit" value="Submit">
    </form>

This is how the HTML code above will be displayed in a browser:

First name: Last name: Male Female Other

Reference

All the documentation in this page is taken from w3schools.com