Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
137 views

HTML Learning

Learn HTML

Uploaded by

Sam Kang
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
137 views

HTML Learning

Learn HTML

Uploaded by

Sam Kang
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 45

CHAPTER 1

HTML INTRODUCTION

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

HTML stands for Hyper Text Markup Language

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 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

HTML Documents = Web Pages

HTML documents describe web pages

HTML documents contain HTML tags and plain text

HTML documents are also called web pages

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:
FORMAT

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

RESULT

My First Heading

My first paragraph.

</html>

Example Explained

The DOCTYPE declaration defines the document type (HTML 5)

The text between <html> and </html> describes the web page

The text between <body> and </body> is the visible page content

The text between <h1> and </h1> is displayed as a heading

The text between <p> and </p> is displayed as a paragraph

CHAPTER 2

GETTING STARTED

What You Need


You don't need any tools to learn HTML at W3Schools.

You don't need an HTML editor

You don't need a web server

You don't need a web site

Editing HTML
HTML can be written and edited using many different editors like Dreamweaver and Visual
Studio.
However, in this tutorial we use a plain text editor (like Notepad) to edit HTML. We believe using
a plain text editor is the best way to learn HTML.

Use Your Test Web For Learning


We suggest you experiment with everything you learn at W3Schools by editing your web files
with a text editor (like Notepad).
Note: If your test web contains HTML markup tags you have not learned, don't panic. You will
learn all about it in the next chapters.

.HTM or .HTML File Extension?


When you save an HTML file, you can use either the .htm or the .html file extension. There is no
difference, it is entirely up to you.

CHAPTER 3 BASIC
Don't worry if the examples use tags you have not learned.
You will learn about them in the next chapters.

HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
This is heading 1
This is heading 2

<html>
<body>
<h1>This
<h2>This
<h3>This
<h4>This
<h5>This
<h6>This

is
is
is
is
is
is

heading
heading
heading
heading
heading
heading

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

This is heading 3
This is heading 4
This is heading 5
This is heading 6

</body>
</html>
HTML Paragraphs
HTML paragraphs are defined with the <p> tag.

<html>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

This is a paragraph.
This is a paragraph.
This is a paragraph.

</body>
</html>
HTML Links
HTML links are defined with the <a> tag.

<html>
<body>

THIS IS A LINK

<a
href="http://www.w3schools.
com">
This is a link</a>
</body>
</html>
Note: The link address is specified in the href attribute.
(You will learn about attributes in a later chapter of this tutorial).

HTML Images
HTML images are defined with the <img> tag.

<html>
<body>
<img src="w3schools.jpg"
width="104"
height="142" />
</body>
</html>
Note: The name and the size of the image are provided as attributes.

CHAPTER -4 ELEMENTS
HTML documents are defined by HTML elements.

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

Start tag *

Element content

End tag *

<p>

This is a paragraph

</p>

<a href="default.htm">

This is a link

</a>

<br />
* The start tag is often called the opening tag. The end tag is often called the closing 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

Tip: You will learn about attributes in the next chapter of this tutorial.

Nested HTML Elements


Most HTML elements can be nested (can contain other HTML elements).
HTML documents consist of nested HTML elements.

HTML Document Example


<!DOCTYPE html>
<html>
<body>
<p>This is my first paragraph.</p>
</body>

</html>
The example above contains 3 HTML elements.

HTML Example Explained


The <p> element:

<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.
The <body> element:

<body>
<p>This is my first paragraph.</p>
</body>
The <body> element defines the body of the HTML document.
The element has a start tag <body> and an end tag </body>.
The element content is another HTML element (a p element).
The <html> element:

<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
The <html> element defines the whole HTML document.
The element has a start tag <html> and an end tag </html>.
The element content is another HTML element (the body element).

Don't Forget the End Tag


Some HTML elements might display correctly even if you forget the end tag:

<p>This is a paragraph
<p>This is a paragraph
The example above works in most browsers, because the closing tag is considered optional.
Never rely on this. Many HTML elements will produce unexpected results and/or errors if you forget the
end tag .

Empty HTML Elements


HTML elements with no content are called empty elements.
<br> is an empty element without a closing tag (the <br> tag defines a line break).
Tip: In XHTML, all elements must be closed. Adding a slash inside the start tag, like <br />, is the proper
way of closing empty elements in XHTML (and XML).

HTML Tip: Use Lowercase Tags


HTML tags are not case sensitive: <P> means the same as <p>. Many web sites use uppercase HTML
tags.
W3Schools use lowercase tags because the World Wide Web Consortium (W3C) recommendslowercase in
HTML 4, and demands lowercase tags in XHTML.

HTML Attributes
Attributes provide additional information about HTML elements.

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:

<html>
<body>
<a
href="http://www.w3schools.

This is a link

com">
This is a link</a>
</body>
</html>
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.
Tip: In some rare situations, when the attribute value itself contains quotes, it is necessary to use
single quotes: name='John "ShotGun" Nelson'

HTML Tip: Use Lowercase Attributes


Attribute names and attribute values are case-insensitive.
However, 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:

Complete HTML TAGS:-

HTML 4.01 / XHTML 1.0 Reference


Ordered Alphabetically
DTD: indicates in which HTML 4.01 / XHTML 1.0 DTD the tag is allowed. S=Strict, T=Transitional, and
F=Frameset
Tag

Description

DTD

<!--...-->

Defines a comment

STF

<!DOCTYPE>

Defines the document type

STF

<a>

Defines an anchor

STF

<abbr>

Defines an abbreviation

STF

<acronym>

Defines an acronym

STF

<address>

Defines contact information for the author/owner of a document

STF

<applet>

Deprecated. Defines an embedded applet

TF

<area />

Defines an area inside an image-map

STF

<b>

Defines bold text

STF

<base />

Specifies the base URL/target for all relative URLs in a document

STF

<basefont />

Deprecated. Specifies a default color, size, or font for all the text in a TF
document

<bdo>

Overrides the current text direction

STF

<big>

Defines big text

STF

<blockquote>

Defines a long quotation

STF

<body>

Defines the document's body

STF

<br />

Defines a single line break

STF

<button>

Defines a clickable button

STF

<caption>

Defines a table caption

STF

<center>

Deprecated. Defines centered text

TF

<cite>

Defines a citation

STF

<code>

Defines a piece of computer code

STF

<col />

Defines attribute values for one or more columns in a table

STF

<colgroup>

Specifies a group of one or more columns in a table for formatting

STF

<dd>

Defines a description of an item in a definition list

STF

<del>

Defines text that has been deleted from a document

STF

<dfn>

Defines a definition term

STF

<dir>

Deprecated. Defines a directory list

TF

<div>

Defines a section in a document

STF

<dl>

Defines a definition list

STF

<dt>

Defines a term (an item) in a definition list

STF

<em>

Defines emphasized text

STF

<fieldset>

Groups related elements in a form

STF

<font>

Deprecated. Defines font, color, and size for text

TF

<form>

Defines an HTML form for user input

STF

<frame />

Defines a window (a frame) in a frameset

<frameset>

Defines a set of frames

<h1> to <h6>

Defines HTML headings

STF

<head>

Defines information about the document

STF

<hr />

Defines a horizontal line

STF

<html>

Defines the root of an HTML document

STF

<i>

Defines italic text

STF

<iframe>

Defines an inline frame

TF

<img />

Defines an image

STF

<input />

Defines an input control

STF

<ins>

Defines text that has been inserted into a document

STF

<kbd>

Defines keyboard input

STF

<label>

Defines a label for an <input> element

STF

<legend>

Defines a caption for a <fieldset> element

STF

<li>

Defines a list item

STF

<link />

Defines the relationship between a document and an external resource

STF

<map>

Defines a client-side image-map

STF

<menu>

Deprecated. Defines a menu list

TF

<meta />

Defines metadata about an HTML document

STF

<noframes>

Defines an alternate content for users that do not support frames

TF

<noscript>

Defines an alternate content for users that do not support client-side STF
scripts

<object>

Defines an embedded object

STF

<ol>

Defines an ordered list

STF

<optgroup>

Defines a group of related options in a drop-down list

STF

<option>

Defines an option in a drop-down list

STF

<p>

Defines a paragraph

STF

<param />

Defines a parameter for an object

STF

<pre>

Defines preformatted text

STF

<q>

Defines a short quotation

STF

<s>

Deprecated. Defines strikethrough text

TF

<samp>

Defines sample output from a computer program

STF

<script>

Defines a client-side script

STF

<select>

Defines a drop-down list

STF

<small>

Defines smaller text

STF

<span>

Defines a section in a document

STF

<strike>

Deprecated. Defines strikethrough text

TF

<strong>

Defines strong text

STF

<style>

Defines style information for a document

STF

<sub>

Defines subscripted text

STF

<sup>

Defines superscripted text

STF

<table>

Defines a table

STF

<tbody>

Groups the body content in a table

STF

<td>

Defines a cell in a table

STF

<textarea>

Defines a multiline input control (text area)

STF

<tfoot>

Groups the footer content in a table

STF

<th>

Defines a header cell in a table

STF

<thead>

Groups the header content in a table

STF

<title>

Defines a title for the document

STF

<tr>

Defines a row in a table

STF

<tt>

Defines teletype text

STF

<u>

Deprecated. Defines underlined text

TF

<ul>

Defines an unordered list

STF

<var>

Defines a variable

STF

<xmp>

Deprecated. Defines preformatted text

Ordered by Function
DTD: indicates in which HTML 4.01 / XHTML 1.0 DTD the tag is allowed. S=Strict, T=Transitional, and
F=Frameset
Tag

Description

DTD

<!DOCTYPE>

Defines the document type

STF

<html>

Defines an HTML document

STF

<body>

Defines the document's body

STF

<h1> to <h6>

Defines HTML headings

STF

<p>

Defines a paragraph

STF

<br />

Inserts a single line break

STF

<hr />

Defines a horizontal line

STF

<!--...-->

Defines a comment

STF

Basic

Formatting
<acronym>

Defines an acronym

STF

<abbr>

Defines an abbreviation

STF

<address>

Defines contact information for the author/owner of a document

STF

<b>

Defines bold text

STF

<bdo>

Overrides the current text direction

STF

<big>

Defines big text

STF

<blockquote>

Defines a long quotation

STF

<center>

Deprecated. Defines centered text

TF

<cite>

Defines a citation

STF

<code>

Defines a piece of computer code

STF

<del>

Defines text that has been deleted from a document

STF

<dfn>

Defines a definition term

STF

<em>

Defines emphasized text

STF

<font>

Deprecated. Defines font, color, and size for text

TF

<i>

Defines italic text

STF

<ins>

Defines text that has been inserted into a document

STF

<kbd>

Defines keyboard input

STF

<pre>

Defines preformatted text

STF

<q>

Defines a short quotation

STF

<s>

Deprecated. Defines strikethrough text

TF

<samp>

Defines sample output from a computer program

STF

<small>

Defines smaller text

STF

<strike>

Deprecated. Defines strikethrough text

TF

<strong>

Defines strong text

STF

<sub>

Defines subscripted text

STF

<sup>

Defines superscripted text

STF

<tt>

Defines teletype text

STF

<u>

Deprecated. Defines underlined text

TF

<var>

Defines a variable

STF

<xmp>

Deprecated. Defines preformatted text

Forms
<form>

Defines an HTML form for user input

STF

<input />

Defines an input control

STF

<textarea>

Defines a multiline input control (text area)

STF

<button>

Defines a clickable button

STF

<select>

Defines a drop-down list

STF

<optgroup>

Defines a group of related options in a drop-down list

STF

<option>

Defines an option in a drop-down list

STF

<label>

Defines a label for an <input> element

STF

<fieldset>

Groups related elements in a form

STF

<legend>

Defines a caption for a <fieldset> element

STF

<frame />

Defines a window (a frame) in a frameset

<frameset>

Defines a set of frames

<noframes>

Defines an alternate content for users that do not support frames

TF

<iframe>

Defines an inline frame

TF

<img />

Defines an image

STF

<map>

Defines an image-map

STF

<area />

Defines an area inside an image-map

STF

Frames

Images

Links
<a>

Defines an anchor

STF

<link />

Defines the relationship between a document and an external resource

STF

<ul>

Defines an unordered list

STF

<ol>

Defines an ordered list

STF

<li>

Defines a list item

STF

<dir>

Deprecated. Defines a directory list

TF

<dl>

Defines a definition list

STF

<dt>

Defines an item in a definition list

STF

<dd>

Defines a description of an item in a definition list

STF

<menu>

Deprecated. Defines a menu list

TF

<table>

Defines a table

STF

<caption>

Defines a table caption

STF

<th>

Defines a header cell in a table

STF

<tr>

Defines a row in a table

STF

<td>

Defines a cell in a table

STF

<thead>

Groups the header content in a table

STF

<tbody>

Groups the body content in a table

STF

<tfoot>

Groups the footer content in a table

STF

<col />

Defines attribute values for one or more columns in a table

STF

<colgroup>

Defines a group of columns in a table for formatting

STF

Defines style information for a document

STF

Lists

Tables

Styles
<style>

<div>

Defines a section in a document

STF

<span>

Defines a section in a document

STF

<head>

Defines information about the document

STF

<title>

Defines the document title

STF

<meta>

Defines metadata about an HTML document

STF

<base />

Specifies the base URL/target for all relative URLs in a document

STF

<basefont />

Deprecated. Specifies a default color, size, or font for all the text in a
document

TF

<script>

Defines a client-side script

STF

<noscript>

Defines an alternate content for users that do not support client-side


scripts

STF

<applet>

Deprecated. Defines an embedded applet

TF

<object>

Defines an embedded object

STF

<param />

Defines a parameter for an object

STF

Meta Info

Programming

HTML / XHTML Standard Attributes


The attributes listed below are standard, and can be used in nearly all HTML/XHTML tags.

Core Attributes
Valid in all elements, except: <base>, <head>, <html>, <meta>, <param>, <script>, <style>, and
<title>.
Attribute

Description

class

Specifies one or more classnames for an element (refers to a class in a style sheet)

id

Specifies a unique id for an element

style

Specifies an inline CSS style for an element

title

Specifies extra information about an element

Language Attributes
Valid in all elements, except: <base>, <br>, <frame>, <frameset>, <hr>, <iframe>, <param>, and
<script>.
Attribute

Description

dir

Specifies the text direction for the content in an element

lang

Specifies the language of the element's content

xml:lang

Specifies the language of the element's content (for XHTML documents)

Keyboard Attributes
Attribute

Description

accesskey

Specifies a shortcut key to activate/focus an element

tabindex

Specifies the tabbing order of an element

HTML Color Names


Color Names Supported by All Browsers
147 color names are defined in the HTML and CSS color specification (17 standard colors plus 130 more).
The table below lists them all, along with their hexadecimal values.
Tip: The 17 standard colors are: aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy,
olive, purple, red, silver, teal, white, and yellow.
Click on a color name (or a hex value) to view the color as the background-color along with different text
colors:
Color Name

HEX

AliceBlue

Color

Shades

Mix

#F0F8FF

Shades

Mix

AntiqueWhite

#FAEBD7

Shades

Mix

Aqua

#00FFFF

Shades

Mix

Aquamarine

#7FFFD4

Shades

Mix

Azure

#F0FFFF

Shades

Mix

Beige

#F5F5DC

Shades

Mix

Bisque

#FFE4C4

Shades

Mix

Black

#000000

Shades

Mix

BlanchedAlmond

#FFEBCD

Shades

Mix

Blue

#0000FF

Shades

Mix

BlueViolet

#8A2BE2

Shades

Mix

Brown

#A52A2A

Shades

Mix

BurlyWood

#DEB887

Shades

Mix

CadetBlue

#5F9EA0

Shades

Mix

Chartreuse

#7FFF00

Shades

Mix

Chocolate

#D2691E

Shades

Mix

Coral

#FF7F50

Shades

Mix

CornflowerBlue

#6495ED

Shades

Mix

Cornsilk

#FFF8DC

Shades

Mix

Crimson

#DC143C

Shades

Mix

Cyan

#00FFFF

Shades

Mix

DarkBlue

#00008B

Shades

Mix

DarkCyan

#008B8B

Shades

Mix

DarkGoldenRod

#B8860B

Shades

Mix

DarkGray

#A9A9A9

Shades

Mix

DarkGrey

#A9A9A9

Shades

Mix

DarkGreen

#006400

Shades

Mix

DarkKhaki

#BDB76B

Shades

Mix

DarkMagenta

#8B008B

Shades

Mix

DarkOliveGreen

#556B2F

Shades

Mix

Darkorange

#FF8C00

Shades

Mix

DarkOrchid

#9932CC

Shades

Mix

DarkRed

#8B0000

Shades

Mix

DarkSalmon

#E9967A

Shades

Mix

DarkSeaGreen

#8FBC8F

Shades

Mix

DarkSlateBlue

#483D8B

Shades

Mix

DarkSlateGray

#2F4F4F

Shades

Mix

DarkSlateGrey

#2F4F4F

Shades

Mix

DarkTurquoise

#00CED1

Shades

Mix

DarkViolet

#9400D3

Shades

Mix

DeepPink

#FF1493

Shades

Mix

DeepSkyBlue

#00BFFF

Shades

Mix

DimGray

#696969

Shades

Mix

DimGrey

#696969

Shades

Mix

DodgerBlue

#1E90FF

Shades

Mix

FireBrick

#B22222

Shades

Mix

FloralWhite

#FFFAF0

Shades

Mix

ForestGreen

#228B22

Shades

Mix

Fuchsia

#FF00FF

Shades

Mix

Gainsboro

#DCDCDC

Shades

Mix

GhostWhite

#F8F8FF

Shades

Mix

Gold

#FFD700

Shades

Mix

GoldenRod

#DAA520

Shades

Mix

Gray

#808080

Shades

Mix

Grey

#808080

Shades

Mix

Green

#008000

Shades

Mix

GreenYellow

#ADFF2F

Shades

Mix

HoneyDew

#F0FFF0

Shades

Mix

HotPink

#FF69B4

Shades

Mix

IndianRed

#CD5C5C

Shades

Mix

Indigo

#4B0082

Shades

Mix

Ivory

#FFFFF0

Shades

Mix

Khaki

#F0E68C

Shades

Mix

Lavender

#E6E6FA

Shades

Mix

LavenderBlush

#FFF0F5

Shades

Mix

LawnGreen

#7CFC00

Shades

Mix

LemonChiffon

#FFFACD

Shades

Mix

LightBlue

#ADD8E6

Shades

Mix

LightCoral

#F08080

Shades

Mix

LightCyan

#E0FFFF

Shades

Mix

LightGoldenRodYellow

#FAFAD2

Shades

Mix

LightGray

#D3D3D3

Shades

Mix

LightGrey

#D3D3D3

Shades

Mix

LightGreen

#90EE90

Shades

Mix

LightPink

#FFB6C1

Shades

Mix

LightSalmon

#FFA07A

Shades

Mix

LightSeaGreen

#20B2AA

Shades

Mix

LightSkyBlue

#87CEFA

Shades

Mix

LightSlateGray

#778899

Shades

Mix

LightSlateGrey

#778899

Shades

Mix

LightSteelBlue

#B0C4DE

Shades

Mix

LightYellow

#FFFFE0

Shades

Mix

Lime

#00FF00

Shades

Mix

LimeGreen

#32CD32

Shades

Mix

Linen

#FAF0E6

Shades

Mix

Magenta

#FF00FF

Shades

Mix

Maroon

#800000

Shades

Mix

MediumAquaMarine

#66CDAA

Shades

Mix

MediumBlue

#0000CD

Shades

Mix

MediumOrchid

#BA55D3

Shades

Mix

MediumPurple

#9370D8

Shades

Mix

MediumSeaGreen

#3CB371

Shades

Mix

MediumSlateBlue

#7B68EE

Shades

Mix

MediumSpringGreen

#00FA9A

Shades

Mix

MediumTurquoise

#48D1CC

Shades

Mix

MediumVioletRed

#C71585

Shades

Mix

MidnightBlue

#191970

Shades

Mix

MintCream

#F5FFFA

Shades

Mix

MistyRose

#FFE4E1

Shades

Mix

Moccasin

#FFE4B5

Shades

Mix

NavajoWhite

#FFDEAD

Shades

Mix

Navy

#000080

Shades

Mix

OldLace

#FDF5E6

Shades

Mix

Olive

#808000

Shades

Mix

OliveDrab

#6B8E23

Shades

Mix

Orange

#FFA500

Shades

Mix

OrangeRed

#FF4500

Shades

Mix

Orchid

#DA70D6

Shades

Mix

PaleGoldenRod

#EEE8AA

Shades

Mix

PaleGreen

#98FB98

Shades

Mix

PaleTurquoise

#AFEEEE

Shades

Mix

PaleVioletRed

#D87093

Shades

Mix

PapayaWhip

#FFEFD5

Shades

Mix

PeachPuff

#FFDAB9

Shades

Mix

Peru

#CD853F

Shades

Mix

Pink

#FFC0CB

Shades

Mix

Plum

#DDA0DD

Shades

Mix

PowderBlue

#B0E0E6

Shades

Mix

Purple

#800080

Shades

Mix

Red

#FF0000

Shades

Mix

RosyBrown

#BC8F8F

Shades

Mix

RoyalBlue

#4169E1

Shades

Mix

SaddleBrown

#8B4513

Shades

Mix

Salmon

#FA8072

Shades

Mix

SandyBrown

#F4A460

Shades

Mix

SeaGreen

#2E8B57

Shades

Mix

SeaShell

#FFF5EE

Shades

Mix

Sienna

#A0522D

Shades

Mix

Silver

#C0C0C0

Shades

Mix

SkyBlue

#87CEEB

Shades

Mix

SlateBlue

#6A5ACD

Shades

Mix

SlateGray

#708090

Shades

Mix

SlateGrey

#708090

Shades

Mix

Snow

#FFFAFA

Shades

Mix

SpringGreen

#00FF7F

Shades

Mix

SteelBlue

#4682B4

Shades

Mix

Tan

#D2B48C

Shades

Mix

Teal

#008080

Shades

Mix

Thistle

#D8BFD8

Shades

Mix

Tomato

#FF6347

Shades

Mix

Turquoise

#40E0D0

Shades

Mix

Violet

#EE82EE

Shades

Mix

Wheat

#F5DEB3

Shades

Mix

White

#FFFFFF

Shades

Mix

WhiteSmoke

#F5F5F5

Shades

Mix

Yellow

#FFFF00

Shades

Mix

YellowGreen

#9ACD32

Shades

Mix

HTML Headings
Headings are important in HTML documents.

HTML Headings
Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.

This is heading 1
This is heading 2

<html>
<body>
<h1>This
<h2>This
<h3>This
<h4>This
<h5>This
<h6>This

is
is
is
is
is
is

heading
heading
heading
heading
heading
heading

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

This is heading 3
This is heading 4
This is heading 5
This is heading 6

</body>
</html>
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 Lines
The <hr /> tag creates a horizontal line in an HTML page.
The hr element can be used to separate content:

<html>

The hr tag defines a horizontal rule:

<body>
<p>The hr tag defines a horizontal rule:</p>

This is a paragraph

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

This is a paragraph

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

This is a paragraph

<p>This is a paragraph</p>
</body>
</html>

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.
Tag

Description

<html>

Defines an HTML document

<body>

Defines the document's body

<h1> to <h6>

Defines HTML headings

<hr />

Defines a horizontal line

<!-->

Defines a comment

HTML Paragraphs
HTML documents are divided into paragraphs.

HTML Paragraphs
Paragraphs are defined with the <p> tag.
<html>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

This is a paragraph.
This is a paragraph.
This is a paragraph.

</body>
</html>
Note: Browsers automatically add an empty line before and after a paragraph.

Don't Forget the End Tag


Most browsers will display HTML correctly even if you forget the end tag:
<html>
<body>
<p>This is a paragraph.
<p>This is a paragraph.
<p>This is a paragraph.

This is a paragraph.
This is a paragraph.
This is a paragraph.
Don't forget to close your HTML tags!

<p>Don't forget to close your HTML tags!</p>


</body>
</html>
The example above will work in most browsers, but don't rely on it. Forgetting the end tag can produce
unexpected results or errors.
Note: Future version of HTML will not allow you to skip end tags.

HTML Line Breaks


Use the <br /> tag if you want a line break (a new line) without starting a new paragraph:
<html>
<body>
<p>This is<br />a para<br />graph with line
breaks</p>

This is
a para
graph with line breaks

</body>
</html>
The <br /> element is an empty HTML element. It has no end tag.

<br> or <br />


In XHTML, XML, elements with no end tag (closing tag) are not allowed.
Even if <br> works in all browsers, writing <br /> instead works better in XHTML and XML applications.

HTML Tag Reference


W3Schools' tag reference contains additional information about HTML elements and their attributes.
Tag

Description

<p>

Defines a paragraph

<br />

Inserts a single line break

HTML Text Formatting


<html>
<body>
<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p>
<p><big>This text is big</big></p>
<p><i>This text is italic</i></p>
<p><em>This text is emphasized</em></p>
<p><code>This is computer output</code></p>
<p>This is<sub> subscript</sub> and
<sup>superscript</sup></p>
</body>
</html>

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

This text is bold


This text is strong
This text is big
This text is italic
This text is emphasized
This is computer output
This is subscript and superscript

HTML "Computer Output" Tags


Tag

Description

<code>

Defines computer code text

<kbd>

Defines keyboard text

<samp>

Defines sample computer code

<tt>

Defines teletype text

<var>

Defines a variable

<pre>

Defines preformatted text

HTML Citations, Quotations, and Definition Tags


Tag

Description

<abbr>

Defines an abbreviation

<acronym>

Defines an acronym

<address>

Defines contact information for the author/owner of a document

<bdo>

Defines the text direction

<blockquote>

Defines a long quotation

<q>

Defines a short quotation

<cite>

Defines a citation

<dfn>

Defines a definition term

HTML Lists
The most common HTML lists are ordered and unordered lists:
HTML Lists
An unordered list:
An ordered list:

List item

List item

List item

1. The first list item


2. The second list item
3. The third list item

1.Ordered List
<html>
<body>
<h4>An Ordered List:</h4>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>

An Ordered List:
1. Coffee
2. Tea
3. Milk

2.UNOrdered list
<html>

An Unordered List:

<body>
<h4>An
List:</h4>

Unordered

<ul>

Coffee
Tea
Milk

<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
HTML Unordered Lists
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items are marked with bullets (typically small black circles).

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
How the HTML code above looks in a browser:

Coffee

Milk

HTML Ordered Lists

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items are marked with numbers.

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
How the HTML code above looks in a browser:
1. Coffee
2. Milk

HTML Definition Lists


A definition list is a list of items, with a description of each item.
The <dl> tag defines a definition list.
The <dl> tag is used in conjunction with <dt> (defines the item in the list) and <dd> (describes the item
in the list):

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
How the HTML code above looks in a browser:
Coffee
Milk

- black hot drink


- white cold drink

Basic Notes - Useful Tips


Tip: Inside a list item you can put text, line breaks, images, links, other lists, etc.

Nested list
<html>
<body>
<h4>A nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>

A nested List:
Coffee
Tea
o Black tea
o Green tea
Milk

Nested list 2
<html>
<body>
<h4>A nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>

Definition List

A nested List:
Coffee
Tea
o Black tea
o Green tea
China
Africa
Milk

<html>
<body>
<h4>A Definition List:</h4>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

A Definition List:
Coffee
Black hot drink
Milk
White cold drink

</body>
</html>

HTML List Tags


Tag

Description

<ol>

Defines an ordered list

<ul>

Defines an unordered list

<li>

Defines a list item

<dl>

Defines a definition list

<dt>

Defines an item in a definition list

<dd>

Defines a description of an item in a definition list

HTML Forms and Input

HTML Forms
HTML forms are used to pass data to a server.
A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A
form can also contain select lists, textarea, fieldset, legend, and label elements.
The <form> tag is used to create an HTML form:

<form>
.
input elements
.
</form>

Text Fields
<input type="text" /> defines a one-line input field that a user can enter text into:

<form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>
How the HTML code above looks in a browser:
First name:
Last name:

ALTERNATE METHED:
<label>NAME:</label>
<input type="text" size="30"/>
<br/> <br/>
Note: The form itself is not visible. Also note that the default width of a text field is 20 characters.

Password Field
<input type="password" /> defines a password field:

<form>
Password: <input type="password" name="pwd" />
</form>
How the HTML code above looks in a browser:
Password:

ALTERNATE METHOD:
<label>PASSWORD:</label>
<input type="PASSWORD"/>
<br/> <br/>
Note: The characters in a password field are masked (shown as asterisks or circles).

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

<form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>
How the HTML code above looks in a browser:
Male
Female

ALTERNATE METHOD :
<label>GENDER:</label><br/>
<label>MALE:</label>
<input type="radio" name="a"/>

Checkboxes
<input type="checkbox" /> defines a checkbox. Checkboxes let a user select ONE or MORE options of a
limited number of choices.

<form>
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a car
</form>
How the HTML code above looks in a browser:
I have a bike
I have a car

ALTERNATE METHOD :
<label> language</label>
<label>hindi :</label><input text=checkbox/>
<label>English :</label><input text=checkbox/>

SIMPLE DROP-DOWN LIST


<html>
<body>

CARS
Volvo

<form >
<label>CARS</label>
<select >
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
DROP-DOWN LIST WITH PRE-SELECTED VALUE
<html>
<body>
<form action="">
<select >
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<optionvalue="fiat"selected="selected">Fiat</option
>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
TEXT AREA
<label>User comeent:</label>
<textarea row=4 col=30></textarea>
Note : if you want to add default text for
example: default comment. The coding will
be:
<textarea> row=4
col=30>defaultcomment</textarea>

Fiat

NOTE: WITH WRITING SELECTED


OPTION AFTER VALUE WIL GVE YOU
DEFAULT VALUE AS IN THE ABOVE
CASE FIAT IS SELECTED AS A DEFAULT
VALUE.

CREATING BUTTONS
<html>
<body>
<form>
<input type="button" value="Hello world!">
</form>

[Hello World!]
NOTE: A BUTTON WILL BECOME SAYING
HELLO WORLD.

</body>
</html>
FOR BROWSING OPTION
<form>
<input type=file/>
</form>
FIELD SET AROUND FORM DATA
<html>
<body>
<form>
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30" /><br />
E-mail: <input type="text" size="30" /><br />
Date of birth: <input type="text" size="10" />

</fieldset>
</form>
</body>
</html>

HTML Form Tags


Tag

Description

<form>

Defines an HTML form for user input

<input />

Defines an input control

<textarea>

Defines a multi-line text input control

<label>

Defines a label for an input element

<fieldset>

Defines a border around elements in a form

<legend>

Defines a caption for a fieldset element

<select>

Defines a select list (drop-down list)

<optgroup>

Defines a group of related options in a select list

<option>

Defines an option in a select list

<button>

Defines a push button

HTML 4.01 Quick List


Previous
Next Chapter

HTML Quick List from W3Schools. Print it, fold it, and put it in your pocket.

HTML Basic Document


<!DOCTYPE html>
<html>
<head>
<title>Title of document goes here</title>
</head>
<body>
Visible text goes here...
</body>
</html>

Heading Elements
<h1>Largest Heading</h1>
<h2> . . . </h2>
<h3> . . . </h3>

<h4> . . . </h4>
<h5> . . . </h5>
<h6>Smallest Heading</h6>

Text Elements
<p>This is a paragraph</p>
<br /> (line break)
<hr /> (horizontal rule)
<pre>This text is preformatted</pre>

Logical Styles
<em>This text is emphasized</em>
<strong>This text is strong</strong>
<code>This is some computer code</code>

Physical Styles
<b>This text is bold</b>
<i>This text is italic</i>

Links
Ordinary link: <a href="http://www.example.com/">Link-text goes here</a>
Image-link: <a href="http://www.example.com/"><img src="URL" alt="Alternate Text" /></a>
Mailto link: <a href="mailto:webmaster@example.com">Send e-mail</a>
A named anchor:
<a name="tips">Tips Section</a>
<a href="#tips">Jump to the Tips Section</a>

Unordered list
<ul>
<li>Item</li>
<li>Item</li>
</ul>

Ordered list
<ol>
<li>First item</li>
<li>Second item</li>
</ol>

Definition list
<dl>
<dt>First term</dt>

<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>

Tables
<table border="1">
<tr>
<th>Tableheader</th>
<th>Tableheader</th>
</tr>
<tr>
<td>sometext</td>
<td>sometext</td>
</tr>
</table>

Iframe
<iframe src="demo_iframe.htm"></iframe>

Frames
<frameset cols="25%,75%">
<frame src="page1.htm" />
<frame src="page2.htm" />
</frameset>

Forms
<form action="http://www.example.com/test.asp" method="post/get">
<input
<input
<input
<input
<input
<input
<input

type="text" name="email" size="40" maxlength="50" />


type="password" />
type="checkbox" checked="checked" />
type="radio" checked="checked" />
type="submit" value="Send" />
type="reset" />
type="hidden" />

<select>
<option>Apples</option>
<option selected="selected">Bananas</option>
<option>Cherries</option>
</select>

<textarea name="comment" rows="60" cols="20"></textarea>


</form>

Entities
&lt; is the same as <
&gt; is the same as >
&#169; is the same as

HTML Layouts
HTML Layouts - Using Tables
The simplest way of creating layouts is by using the HTML <table> tag.
The following example uses a table with 3 rows and 2 columns - the first and last row spans both columns
using the colspan attribute:

Example
<!DOCTYPE html>
<html>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>

<tr valign="top">
<td style="background-color:#FFD700;width:100px;text-align:top;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">
Content goes here</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright W3Schools.com</td>
</tr>
</table>
</body>
</html>

The HTML code above will produce the following result:

Main Title of Web Page

Menu
HTML
CSS
JavaScript

Content goes here

Copyright W3Schools.com

HTML Layouts - Using <div> Elements


The div element is a block level element used for grouping HTML elements.
The following example uses five div elements to create a multiple column layout, creating the same result
as in the previous example:

Example
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="backgroundcolor:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript</div>
<div id="content" style="backgroundcolor:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright W3Schools.com</div>
</div>
</body>
</html>

You might also like