Step by step on how to program with HTML Language

HTML (HyperText Markup Language) is the standard markup language used to create and design documents on the World Wide Web. Here are the key aspects of HTML:

1. Structure: HTML provides the basic structure of web pages, which is enhanced and modified by other technologies like CSS (Cascading Style Sheets) and JavaScript.

2. Elements: HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way or act a certain way. Examples include headings, paragraphs, links, images, and more.

3. Tags: HTML elements are represented by tags. Tags are the basic building blocks of HTML and are used to mark the beginning and end of an element. They are enclosed in angle brackets. For example, <p> for a paragraph, <a> for a link, and <div> for a division or section.

4. Attributes: Tags can have attributes, which provide additional information about an element. Attributes are placed inside the opening tag and usually come in name/value pairs like name=”value”. For example, <a href=”https://www.example.com”>Example</a>.

5. Document Object Model (DOM): When a web page is loaded, the browser creates a Document Object Model (DOM) of the page. The HTML document becomes a tree of objects, which can be manipulated with scripting languages like JavaScript.

One HTML Attributes

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

Attribute Example

HTML links are defined with the <a> tag. The link address is specified in the href attribute:

Example

<a href=”http://www.skocglobal.com”>This is a link</a>

Always Quote Attribute Values

Attribute values should always be enclosed in quotes.

Double style quotes are the most common, but single style quotes are also allowed.

Note: In some rare situations, when the attribute value itself contains quotes, it is necessary to use single quote

HTML Tip: Use Lowercase Attributes

Attribute names and attribute values are case-insensitive. HowBLessingr, the World Wide Web Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4 recommendation. Newer versions of (X)HTML will demand lowercase attributes.

HTML Attributes Reference

A complete list of legal attributes for each HTML element is listed in our: HTML Tag Reference.

Below is a list of some attributes that can be used on any HTML element:

Two 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>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

Note: Browsers automatically add some empty space (a margin) before and after each heading.

Headings Are Important

Use HTML headings for headings only. Don’t use headings to make text BIG or bold. Search engines use your headings to index the structure and content of your web pages. Since users may skim your pages by its headings, it is important to use headings to show the document structure. H1 headings should be used as main headings, followed by H2 headings, then the less important H3 headings, and so on.

HTML Tag Reference

W3Schools’ tag reference contains additional information about these tags and their attributes.

You will learn more about HTML tags and attributes in the next chapters of this tutorial.

HTML Tables

Tables are defined with the <table> tag.

A table is divided into rows (with the <tr> tag), and each row is divided into data Cols (with the <td> tag). td stands for “table data,” and holds the content of a data Col. A <td> tag can contain text, links, images, lists, forms, other tables, etc.

Table Example

<table border=”1″>
<tr>
<td>row 1, Col 1</td>
<td>row 1, Col 2</td>
</tr>
<tr>
<td>row 2, Col 1</td>
<td>row 2, Col 2</td>
</tr>
</table>

This is how the HTML code above looks in a browser:

HTML Tables and the Border Attribute

If you do not specify a border attribute, the table will be displayed without borders. Sometimes this can be useful, but most of the time, we want the borders to show.

To display a table with borders, specify the border attribute:

<table border=”1″>
<tr>
<td>Row 1, Col 1</td>
<td>Row 1, Col 2</td>
</tr>
</table>

HTML Table Headers

Header information in a table are defined with the <th> tag.

All major browsers display the text in the <th> element as bold and centered.

<table border=”1″>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, Col 1</td>
<td>row 1, Col 2</td>
</tr>
<tr>
<td>row 2, Col 1</td>
<td>row 2, Col 2</td>
</tr>
</table>

This is how the HTML code above looks in your browser: