Html Turorial: January 2016

HTML Tag Reference

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.

Tag	Description
<html>	Defines an HTML document
<body>	Defines the document's body
<head>	Defines the document's head element
<h1> to <h6>	Defines HTML headings
<hr>	Defines a horizontal line

Have you ever seen a Web page and wondered "Hey! How did they do that?"
To find out, right-click in the page and select "View Page Source" (in Chrome) or "View Source" (in IE), or similar in another browser. This will open a window containing the HTML code of the page.

The HTML meta Element

The HTML <meta> Element

The HTML <meta> element is also meta data.
It can be used to define the character set, and other information about the HTML document.

The HTML title Element

The HTML <title> Element

The HTML <title> element is meta data. It defines the HTML document's title.
The title will not be displayed in the document, but might be displayed in the browser tab.

The HTML head Element

The HTML <head> Element

The HTML <head> element has nothing to do with HTML headings.
The HTML <head> element contains meta data. Meta data are not displayed.
The HTML <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>
.
.
.

	Meta data means data about data. HTML meta data is data about the HTML document

creates a horizontal line in an HTML page

HTML Horizontal Rules

The <hr> tag creates a horizontal line in an HTML page.
The hr element can be used to separate content:

Example

<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>

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.
Users skim your pages by its headings. It is important to use headings to show the document structure.
h1 headings should be main headings, followed by h2 headings, then the less important h3, and so on.

The alt Attribute

The alt attribute specifies an alternative text to be used, when an HTML element cannot be displayed.
The value of the attribute can be read by "screen readers". This way, someone "listening" to the webpage, i.e. a blind person, can "hear" the element.

Example

Size attributes

Size Attributes

HTML images are defined with the <img> tag.
The filename of the source (src), and the size of the image (width and height) are all provided as attributes:

Example

The image size is specified in pixels: width="104" means 104 screen pixels wide.
You will learn more about images and the <img> tag later in this tutorial.

The href Attribute

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

Example

You will learn more about links and the <a> tag later in this tutorial.

Html Turorial

Pages

Wednesday, 27 January 2016

HTML Tag Reference

HTML Tag Reference

How to View HTML Source

How to View HTML Source

The HTML meta Element

The HTML <meta> Element

The HTML title Element

The HTML <title> Element

The HTML head Element

The HTML <head> Element

Example

creates a horizontal line in an HTML page

HTML Horizontal Rules

Example

HTML Headings

HTML Headings

Example

Headings Are Important

The alt Attribute

The alt Attribute

Example

Size attributes

Size Attributes

Example

The href Attribute

The href Attribute

Example