What is HTML? - The Basics of HTML

What is HTML ?
HTML is a language for describing web pages.
•

HTML stands for Hyper Text Markup Language

•

A markup language is a set of markup tags

•

The tags describe document content

•

HTML documents contain HTML tags and plain text

•

HTML documents are also called web pages

Versions of HTML
 HTML 2.0 : Some of the Netscape/Microsoft extensions, and did not support
tables,

or ALIGN attributes.

 HTML 3.0 : Upgrade the features and utility of HTML. However, it was never
completed or implemented.

 HTML 3.2 : Support for TABLES, image, heading and other element ALIGN
attributes,

and a few other finicky details.

 HTML 4 : It includes support for most of the proprietary extensions, plus
support
Cascading
enhancements).

for extra features (Internationalized documents, support for
Style Sheets, extra TABLE, FORM, and JavaScript

 HTML 5 : The <canvas> element for 2D drawing,<video>,<audio> & some extra
email,

features support like New form controls, like calendar, date, time,
url, search.

HTML Elements
 HTML elements are the fundamentals of HTML. HTML documents are simply a
text file made up of HTML elements. These elements are defined using HTML
tags. HTML tags tell your browser which elements to present and how to present
them. Where the element appears is determined by the order in which the tags
appear.

HTML Elements..
 Explanation of the above code:
 The <!DOCTYPE... > element tells the browser which version of HTML the
document is using.
 The <html> element can be thought of as a container that all other tags sit inside
(except for the !DOCTYPE tag).
 The <head> tag contains information that is not normally viewable within your
browser (such as meta tags, JavaScript and CSS),although the <title> tag is an
exception to this. The content of the "<title>" tag is displayed in the browser's title
bar (right at the very top of the browser).
 The <Body> tag is the main area for your content. This is where most of your code
(and viewable elements) will go.
 The <P> tag declares a paragraph. This contains the body text.

HTML Tags
HTML markup tags are usually called HTML tags
• HTML tags are keywords (tag names) 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
• The end tag is written like the start tag, with a forward slash before the tag name
• Start and end tags are also called opening tags and closing tags
• <tagname>content</tagname>

HTML Formatting
There are some common formatting tags are here below

(1)
(2)
(3)
(4)
(5)
(6)
(7)
(8)

Headings(<h1>,<h2>,…<h6>)
Strong (<strong>)
Emphasis (<em>)
Line Bracks (<br/>)
Horizontal rule (<hr>)
Unordered List (<ul>)
Ordered List (<ol>)
List Item (<li>)

Heading Tags
• There is a special tag for specifying headings in HTML. There
are 6 levels of headings in HTML ranging from <h1> for the
most important to <h6> for the least important.

Strong & Emphasis
• To place a strong importance on a piece of text, use the
<strong> element.

• You can place an emphasis on text by using the <em>
element.

Line Breaks & Horizontal Rule
• You can force a line break by using the <br> element.

• You can create a horizontal rule by using the <hr>
element.

Unordered & Ordered List
• To create an unordered list, use the <ul> element to define
the list, and the <li> element for each list item.

• To create an ordered list, use the <ol> element to define the
list, and the <li> element for each list item.

HTML Colors
• In HTML, colors can be added by using the style attribute. You can
specify a color by its name (e.g., blue), its hexadecimal value
(e.g., #0000ff), RGB value (e.g. rgb(0,0,255)), or its HSL value (e.g.
hsl(240,100%,100%)).
Foreground Color :
 To add color to an HTML element, you use style="color:{color}", where {color} is
the color value. For example: <h3 style="color: blue">HTML Colors</h3>

Background Color :
 To add a background color to an HTML element, you use style="backgroundcolor:{color}", where {color} is the color value. For example:
<h3 style="background-color: orange">HTML Colors</h3>

HTML Colors
Border Color :
 To add a colored border to an HTML element, you use style="border:{width}
{color} {style}", where {width} is the width of the border, {color} is the color of
the border, and {style} is the style of the border.
For example: <h3 style="border:1px blue solid;">HTML Colors</h3>

Transparency :
 You can also use alpha to specify the level of opacity the color should have.
This is only available on RGB and HSL notations. To do this, add the letter "a"
to the functional notation (i.e. RGBA and HSLA). For example,
rgba(0,0,255,0.5) results in a semi-transparent blue, as does hsla(240, 100%,
50%, 0.5).
For example:
<h3 style="background-color:rgba(0,0,255,1)">No transparancy</h3>
<h3 style="background-color:rgba(0,0,255,0.5)">Half transparancy</h3>
<h3 style="background-color:rgba(0,0,255,0.1)">Lots of transparancy</h3>

HTML Links
Links, otherwise known as hyperlinks, are defined using the <a> tag - otherwise
known as the anchor element.
To create a hyperlink, you use the <a> tag in conjunction with the href attribute
(href stands for Hypertext Reference). The value of the href attribute is the URL,
or, location of where the link is pointing to.
Example:

Links Targets
You can nominate whether to open the URL in a new window or the current window.
You do this with the target attribute. For example, target="_blank" opens the URL in
a new window.

Example:
Search your item <a href="http://www.google.com" target="_blank" >Google search</a>

Basic of Table
In HTML, the original purpose of tables was to present tabular data. Although they
are still used for this purpose today, many web designers tended to use tables for
advanced layouts.

Table with colspan
You can use the colspan attribute to make a cell span multiple columns.

Table with Rowspan
Rowspan is for rows just what colspan is for columns (rowspan allows a cell to span
multiple rows).

Table with Color
Background-color is use for background of table. And color use for font color.

HTML Image
Images make up a large part of the web - most websites contain images. HTML
makes it very easy for you to embed images into your web page.
To embed an image into a web page, the image first needs to exist in either .jpg, .gif,
or .png format.
The <img> element above contains a number of attributes.
Like : src,width,height,alt …

Image Links
You can make your images "clickable" so that when a user clicks the image, it opens
another URL. You do this by simply wrapping the image with hyperlink code.

HTML Form
• HTML Forms are required when you want to collect some data from the site visitor.
For example registration information: name, email address, credit card, etc.
• A form will take input from the site visitor and then will post your back-end
application such as CGI, ASP Script or PHP script etc. Then your back-end
application will do required processing on that data in whatever way you like.

•

Form elements are like text fields, textarea fields, drop-down menus, radio
buttons, checkboxes, etc. which are used to take information from the user.

•

In HTML, a form is defined using the <form></form> tags. The actual form
elements are defined between these two tags.

Input Tag
 Text : Text fields are used for when you want the user to type text or numbers
into the

form.

 Select List : A select list is a dropdown list with options. This allows the user to
select
one option from a list of pre-defined options. The
select list is created
using the <select> element in conjunction with
the <option> element.
<select>
<option value ="sydney">Sunday</option>
<option value ="melbourne">Monday</option>
<option value ="cromwell">Tuesday</option>
<option value ="queenstown">Wednesday</option>
</select>

Input Tag..
 Checkbox: Checkboxes are similar to radio buttons, but enable the user to
make

multiple selections.

 Submit : The submit button allows the user to actually submit the form.

Input Tag..
 Radio Button: Radio buttons are used for when you want the user to select
one

option from a pre-determined set of options.

Form Action..
 Usually when a user submits the form, you need the system to do something with
the data. This is where the action page comes in. The action page is the page
that the form is submitted to. This page could contain advanced scripts or
programming that inserts the form data into a database or emails an
administrator etc.

What is HTML? - The Basics of HTML

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to What is HTML? - The Basics of HTML

Similar to What is HTML? - The Basics of HTML (20)

Recently uploaded

Recently uploaded (20)

What is HTML? - The Basics of HTML