HTML

What is HTML?

The definition of HTML is HyperText Markup Language.

HyperText is the method by which you move around on the web — by clicking on

special text called hyperlinks which bring you to the next page. The fact that it is hyper

just means it is not linear — i.e. you can go to any place on the Internet whenever you

want by clicking on links — there is no set order to do things in.

Markup is what HTML tags do to the text inside them. They mark it as a certain type of

text (italicised text, for example).

HTML is not a programming language, it is a markup language

A markup language is a set of markup tags

HTML uses markup tags to describe web pages.

HTML Documents = Web Pages

HTML documents describe web pages

HTML documents contain HTML tags and plain text and saved with .html extension

HTML documents are also called web pages

Web Browser

The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML

documents and display them as web pages. The browser does not display the HTML tags,

but uses the tags to interpret the content of the page

If a browser doesn't understand a tag it will usually ignore it.

Editing HTML

HTML can be written and edited using many different editors like Dreamweaver and

Visual Studio or simply text editor.

HTML Comments

Comments can be inserted into the HTML code to make it more readable and understandable.

Comments are ignored by the browser and are not displayed.

Comments are written like this:

Example



Comments can be placed in either the head or body of your documents

HTML Structure

<html>

The <html> tag tells the browser that this is an HTML document.

The <html> element is also known as the root element.

The <html> tag is the container for all other HTML elements

<head>

The <head> element is a container for all the head elements.

The <head> element must include a title for the document, and can include scripts, styles,

meta information, and more.

The following elements can go inside the <head> element:

<title> (this element is required in the head section)

<style>

<base>

<link>

<meta>

<script>

<noscript>

<title>

All HTML documents have just one title which is displayed at the top of the browser

window.

<body>

The <body> tag defines the document's body.

The <body> element contains all the contents of an HTML document, such as text,

hyperlinks, images, tables, lists, etc.

HTML Tags

HTML markup tags are usually called HTML tags

HTML tags are keywords surrounded by angle brackets like <html>

HTML tags normally come in pairs like <b> and </b>

The first tag in a pair is the start tag, the second tag is the end tag

Start and end tags are also called opening tags and closing tags

http://www.w3schools.com/tags/tag_noscript.asp

http://www.w3schools.com/tags/tag_script.asp

http://www.w3schools.com/tags/tag_meta.asp

http://www.w3schools.com/tags/tag_link.asp

http://www.w3schools.com/tags/tag_base.asp

http://www.w3schools.com/tags/tag_style.asp

http://www.w3schools.com/tags/tag_title.asp

HTML Elements

An HTML element is everything from the start tag to the end tag

HTML Element Syntax

An HTML element starts with a start tag / opening tag

An HTML element ends with an end tag / closing tag

The element content is everything between the start and the end tag

Some HTML elements have empty content

Empty elements are closed in the start tag

Most HTML elements can have attributes

Empty HTML Elements

HTML elements with no content are called empty elements.

Example: <br> is an empty element without a closing tag (the <br> tag defines a line break).

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"

HTML Text Formatting Tags

Tag Description

<b> Defines bold text

<big> Defines big text

<em> Defines emphasized text

<i> Defines italic text

<small> Defines small text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<ins> Defines inserted text

<del> Defines deleted text

Example:

HTML <font> Tag

Specify the font size, font face and color of text:

<font size="3" color="red">This is some text!</font>

<font size="2" color="blue">This is some text!</font>

<font face="verdana" color="green">This is some text!</font>

HTML headings.

The <h1> to <h6> tags are used to define HTML headings.

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

H1 headings should be used as main headings, followed by H2 headings, then the less important

H3 headings, and so on.

Line Break

The <br> tag inserts a single line break.

The <br> tag is an empty tag which means that it has no end tag.

Paragraph

The <p> tag defines a paragraph.

Browsers automatically add some space (margin) before and after each <p> element.

Example: <p align="right">This is some text in a paragraph.</p>

<p>This is my first paragraph.</p>

The <p> element defines a paragraph in the HTML document. The element has a start tag <p>

and an end tag </p>. The element content is: This is my first paragraph.

Horizontal Line

The <hr> tag creates a horizontal line in an HTML page.

The <hr> element can be used to separate content in an HTML page.

The <hr> tag has no end tag.

Examples:

<hr align="left"/> The align attribute specifies the alignment of a horizontal line.

<hr noshade="noshade" />The noshade attribute specifies that a horizontal line should render in

one solid color (noshaded), instead of a shaded color.

<hr size="30" /> Specify the Height

<hr width="50%" />The width attribute specifies the width of a horizontal line, in pixels or

percent.

List

The <li> tag defines a list item.

The <li> tag is used in both ordered (<ol>) and unordered (<ul>) lists.

Ordered List

The <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical.

http://www.w3schools.com/tags/tag_ul.asp

http://www.w3schools.com/tags/tag_ol.asp

Use the <li> tag to define list items.

Unordered List

The <ul> tag defines an unordered (bulleted) list. Use the <ul> tag together with the <li> tag to create unordered lists.

Example:

HTML <li> type Attribute

Synatx: <li type="1|a|A|i|I|disc|circle|square">

http://www.w3schools.com/tags/tag_li.asp

http://www.w3schools.com/tags/tag_li.asp

Example

HTML <li> value Attribute

The value attribute sets the value of a list item. The following list items will increment from that number. The value must be a number and can only be used in ordered lists (<ol>).

Syntax :<li value="number">

Creating Tables

The <table> tag defines an HTML table.

An HTML table consists of the <table> element and one or more <tr>, <th>, and <td> elements.

The <tr> element defines a table row, the <th> element defines a table header, and the <td>

element defines a table cell.

A more complex HTML table may also include <caption>, <col>, <colgroup>, <thead>, <tfoot>,

and <tbody> elements.

http://www.w3schools.com/tags/tag_td.asp

http://www.w3schools.com/tags/tag_th.asp

http://www.w3schools.com/tags/tag_tr.asp

Inserting Images

HTML <img> Tag

The <img> tag defines an image in an HTML page.

The <img> tag has two required attributes: src and alt.

Note: Images are not technically inserted into an HTML page, images are linked to HTML pages. The <img> tag creates a holding space for the referenced image.

Tip: To link an image to another document, simply nest the <img> tag inside <a> tags.

Hyper Texts

HTML <a> Tag

The <a> tag defines an anchor. An anchor can be used in two ways:

1. To create a link to another document, by using the href attribute

2. To create a bookmark inside a document, by using the name attribute

3. To link an image to another document, simply nest the <img> tag inside <a> tags.

The <a> element is usually referred to as a link or a hyperlink.

The most important attribute of the <a> element is the href attribute, which indicates the link’s

destination.

By default, links will appear as follows in all browsers:

An unvisited link is underlined and blue

A visited link is underlined and purple

An active link is underlined and red

To create a bookmark inside a document, by using the name attribute

Name Attribute The name attribute specifies the name of an anchor Synatx is <a name="value"> The name attribute specifies the name of an anchor. The name attribute is used to create a bookmark inside a document. The name attribute must be present in the <a> tag

To create a link to another document, by using the href attribute

Href attribute

The href attribute specifies the URL of the page the link goes to:

<a href="URL">

The href attribute specifies the URL of the page the link goes to.

The href or the name attribute must be present in the <a> tag.

To link an image to another document

Simply nest the <img> tag inside <a> tags.