HTML Lists:-
The most common HTML lists are ordered
and unordered lists:
HTML Lists:-
An ordered list:
|
An unordered list:
|
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>
<li>Coffee</li>
<li>Milk</li>
</ul>
How the HTML code above looks in a browser:
- Coffee
- Milk
Example:-
<!DOCTYPE html>
<html>
<body>
<h4>An Unordered List:</h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
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>
<li>Coffee</li>
<li>Milk</li>
</ol>
How the HTML code above looks in a browser:
- Coffee
- Milk
Example:-
<!DOCTYPE html>
<html>
<body>
<h4>An Ordered List:</h4>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
HTML Description Lists:-
A description list is a list of
terms/names, with a description of each term/name.
The <dl> tag defines a
description list.
The <dl> tag is used in
conjunction with <dt> (defines terms/names) and <dd> (describes
each term/name):
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</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
- black hot drink
Milk
- white cold drink
Examples:-
Different
types of ordered lists:-
Demonstrates different types of ordered lists.
Demonstrates different types of ordered lists.
<!DOCTYPE html>
<html>
<body>
<h4>Numbered list:</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Letters list:</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase letters list:</h4>
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Roman numbers list:</h4>
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase Roman numbers list:</h4>
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
</body>
</html>
Different types of unordered
lists
Demonstrates different types of unordered lists.
Demonstrates different types of unordered lists.
<!DOCTYPE html>
<html>
<body>
<p><b>Note:</b> The type attribute
of the ul tag is deprecated in HTML 4, and is not supported in HTML5.
Therefore we have used the style attribute and the CSS
list-style-type property, to define different types of unordered lists
below:</p>
<h4>Disc bullets list:</h4>
<ul style="list-style-type:disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Circle bullets list:</h4>
<ul style="list-style-type:circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Square bullets list:</h4>
<ul style="list-style-type:square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</body>
</html>
Nested list
Demonstrates how you can nest lists.
Demonstrates how you can nest lists.
<!DOCTYPE html>
<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>
Nested list 2
Demonstrates a more complicated nested list.
Demonstrates a more complicated nested list.
<!DOCTYPE html>
<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>
Description list
Demonstrates a definition list.
Demonstrates a definition list.
<!DOCTYPE html>
<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>
</body>
</html>
HTML List Tags
Tag
|
Description
|
Defines an ordered list
|
|
Defines an unordered list
|
|
Defines a list item
|
|
Defines a description list
|
|
Defines a term/name in a
description list
|
|
Defines a description of a
term/name in a description list
|
HTML <div> and <span>:-
HTML elements can be grouped together with <div>
and <span>.
HTML Block Elements.
Most
HTML elements are defined as block
level elements or as inline elements.
Block
level elements normally start (and end) with a new line when displayed in a
browser.
Examples:
<h1>, <p>, <ul>, <table>
HTML Inline Elements
Inline
elements are normally displayed without starting a new line.
Examples:
<b>, <td>, <a>, <img>
The HTML <div> Element.
The HTML <div> element is a
block level element that can be used as a container for grouping other HTML
elements.
The <div> element has no
special meaning. Except that, because it is a block level element, the browser
will display a line break before and after it.
When used together with CSS, the
<div> element can be used to set style attributes to large blocks of
content.
Another common use of the <div>
element, is for document layout. It replaces the "old way" of
defining layout using tables. Using <table> elements for layout is not
the correct use of <table>. The purpose of the <table> element is
to display tabular data.
The HTML <span> Element.
The HTML <span> element is an inline element that
can be used as a container for text.
The <span> element has no special meaning.
When used together with CSS, the <span> element can
be used to set style attributes to parts of the text.
HTML Grouping Tags
Tag
|
Description
|
Defines a section in a
document (block-level)
|
|
Defines a section in a
document (inline)
|
HTML Layouts:-
Web page layout is very important to make your
website look good.
Design your webpage layout very carefully.
Website Layouts
Most websites have put their content in multiple columns
(formatted like a magazine or newspaper).
Multiple columns are created by using <div> or
<table> elements. CSS are used to position elements, or to create
backgrounds or colorful look for the pages.
![]() |
Even though it is possible to create nice layouts with
HTML tables, tables were designed
for presenting tabular data - NOT as a layout tool!
|
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="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#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>
<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="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#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>
HTML Layouts - Using Tables
A simple way
of creating layouts is by using the HTML <table> tag.
Multiple
columns are created by using <div> or <table> elements. CSS are
used to position elements, or to create backgrounds or colorful look for the
pages.
![]() |
Using
<table> to create a nice layout is NOT the correct use of the element.
The purpose of the <table> element is to display tabular data!
|
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>
<td style="background-color:#FFD700;width:100px;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;">
Content goes here</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © W3Schools.com</td>
</tr>
</table>
</body>
</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>
<td style="background-color:#FFD700;width:100px;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;">
Content goes here</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © W3Schools.com</td>
</tr>
</table>
</body>
</html>
HTML Layout - Useful Tips
Tip: The biggest advantage of using CSS is that,
if you place the CSS code in an external style sheet, your site becomes MUCH
EASIER to maintain. You can change the layout of all your pages by editing one
file.
HTML Layout Tags
Tag
|
Description
|
Defines a section in a
document (block-level)
|
|
Defines a section in a
document (inline)
|
HTML Forms and Input:-
HTML Forms are used to select different kinds of user
input.
HTML Forms
HTML forms
are used to pass data to a server.
An HTML form
can contain input elements like text fields, checkboxes, radio-buttons, submit
buttons and more. A form can also contain select lists, text area, field set,
legend, and label elements.
The
<form> tag is used to create an HTML form:
<form>
.
input elements
.
</form>
.
input elements
.
</form>
HTML Forms - The Input Element
The most important form element
is the <input> element.
The <input> element is
used to select user information.
An <input> element can
vary in many ways, depending on the type attribute. An <input> element
can be of type text field, checkbox, password, radio button, submit button, and
more.
The most common input types are
described below.
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>
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:
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>
Password: <input type="password" name="pwd">
</form>
How the HTML
code above looks in a browser:
Note: The
characters in a password field are masked (shown as asterisks or circles).
Example:-
<!DOCTYPE html>
<html>
<body>
<form action="">
Username: <input type="text"
name="user"><br>
Password: <input
type="password" name="password">
</form>
<p><b>Note:</b> The
characters in a password field are masked (shown as asterisks or
circles).</p>
</body>
</html>
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>
<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:
Checkboxes:-
<input
type="checkbox"> defines a checkbox. Checkboxes let a user select
ZERO 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>
<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:
Submit Button
<input
type="submit"> defines a submit button.
A submit
button is used to send form data to a server. The data is sent to the page
specified in the form's action attribute. The file defined in the action
attribute usually does something with the received input:
<form
name="input" action="html_form_action.asp"
method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
How the HTML
code above looks in a browser:
If you type
some characters in the text field above, and click the "Submit"
button, the browser will send your input to a page called
"html_form_action.asp". The page will show you the received input.
Simple drop-down list
How to create a simple drop-down list.
How to create a simple drop-down list.
<!DOCTYPE html>
<html>
<body>
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option
value="saab">Saab</option>
<option
value="fiat">Fiat</option>
<option
value="audi">Audi</option>
</select>
</form>
</body>
</html>
Text area:-
How to create a multi-line text input control. In a text-area the user can write an unlimited number of characters.
How to create a multi-line text input control. In a text-area the user can write an unlimited number of characters.
<!DOCTYPE html>
<html>
<body>
<textarea rows="10"
cols="30">
The cat was playing in the garden.
</textarea>
</body>
</html>
Create a button.
How to create a button.
How to create a button.
<!DOCTYPE html>
<html>
<body>
<form action="">
<input type="button" value="Hello
world!">
</form>
</body>
</html>
Fieldset around
form-data.
How to create a border around elements in a form.
How to create a border around elements in a form.
<!DOCTYPE html>
<html>
<body>
<form action="">
<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>
Form with text fields
and a submit button.
How to create a form with two text fields and a submit button.
How to create a form with two text fields and a submit button.
<!DOCTYPE html>
<html>
<body>
<form name="input"
action="html_form_action.asp" method="get">
First name: <input type="text"
name="FirstName" value="Mickey"><br>
Last name: <input type="text"
name="LastName" value="Mouse"><br>
<input type="submit" value="Submit">
</form>
<p>If you click the "Submit" button,
the form-data will be sent to a page called
"html_form_action.asp".</p>
</body>
</html>
Form with checkboxes.
How to create a form with two checkboxes and a submit button.
How to create a form with two checkboxes and a submit button.
<!DOCTYPE html>
<html>
<body>
<form name="input"
action="html_form_action.asp" method="get">
<input type="checkbox"
name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox"
name="vehicle" value="Car">I have a car
<br><br>
<input type="submit"
value="Submit">
</form>
<p>If you click the "Submit" button,
the form-data will be sent to a page called
"html_form_action.asp".</p>
</body>
</html>
Form with radio
buttons.
How to create a form with two radio buttons, and a submit button.
How to create a form with two radio buttons, and a submit button.
<!DOCTYPE html>
<html>
<body>
<form name="input"
action="html_form_action.asp" method="get">
<input type="radio" name="sex"
value="male">Male<br>
<input type="radio" name="sex"
value="female">Female<br>
<input type="submit"
value="Submit">
</form>
<p>If you click the "Submit" button, the
form-data will be sent to a page called
"html_form_action.asp".</p>
</body>
</html>
Send e-mail from a
form.
How to send e-mail from a form.
How to send e-mail from a form.
<!DOCTYPE html>
<html>
<body>
<h3>Send e-mail to
someone@example.com:</h3>
<form action="MAILTO:someone@example.com"
method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name"
value="your name"><br>
E-mail:<br>
<input type="text" name="mail"
value="your email"><br>
Comment:<br>
<input type="text"
name="comment" value="your comment"
size="50"><br><br>
<input type="submit"
value="Send">
<input type="reset"
value="Reset">
</form>
</body>
</html>
HTML Form Tags
New : New tags in HTML5.
Tag
|
Description
|
Defines an HTML form for user
input
|
|
Defines an input control
|
|
Defines a multiline input
control (text area)
|
|
Defines a label for an
<input> element
|
|
Groups related elements in a
form
|
|
Defines a caption for a
<fieldset> element
|
|
Defines a drop-down list
|
HTML <input> type Attribute:-
To have a complete list of input type attribute visit
the following link:
For a complete list of HTML Tags visit:
HTML Iframes:-
An iframe is used to display a
web page within a web page.
Syntax for adding an iframe:
<iframe src="URL"></iframe>
The URL points to the location of
the separate page.
Iframe - Set Height and Width
The height and width attributes are used to specify
the height and width of the iframe.
The attribute values are specified in pixels by
default, but they can also be in percent (like "80%").
<!DOCTYPE html>
<html>
<body>
<iframe src="demo_iframe.htm" width="200"
height="200"></iframe>
<p>Some older browsers don't support iframes.</p>
<p>If they don't, the iframe will not be visible.</p>
</body>
</html>
Iframe - Remove the Border.
The frameborder attribute specifies whether or
not to display a border around the iframe.
Set the attribute value to "0" to
remove the border:
<!DOCTYPE html>
<html>
<body>
<iframe src="demo_iframe.htm"
frameborder="0"></iframe>
<p>Some older browsers don't support iframes.</p>
<p>If they don't, the iframe will not be visible.</p>
</body>
</html>
Use iframe as a Target for a Link
An iframe can be used as the target frame for a
link.
The target attribute of a link must refer to the
name attribute of the iframe:
<!DOCTYPE html>
<html>
<body>
<iframe src="demo_iframe.htm"
name="iframe_a"></iframe>
<p><a href="http://www.w3schools.com"
target="iframe_a">W3Schools.com</a></p>
<p><b>Note:</b> Because the target
of the link matches the name of the iframe, the link will open in the
iframe.</p>
</body>
</html>
HTML iframe Tag
Tag
|
Description
|
Defines an inline frame
|
HTML Colors:-
Colors are displayed combining RED, GREEN, and BLUE
light.
Color Values
CSS colors are defined using a hexadecimal (hex) notation
for the combination of Red, Green, and Blue color values (RGB). The lowest
value that can be given to one of the light sources is 0 (hex 00). The highest
value is 255 (hex FF).
Hex values are written as 3 double digit numbers,
starting with a # sign.
Color Examples
Color
|
Color HEX
|
Color RGB
|
|
#000000
|
rgb(0,0,0)
|
|
#FF0000
|
rgb(255,0,0)
|
|
#00FF00
|
rgb(0,255,0)
|
|
#0000FF
|
rgb(0,0,255)
|
|
#FFFF00
|
rgb(255,255,0)
|
|
#00FFFF
|
rgb(0,255,255)
|
|
#FF00FF
|
rgb(255,0,255)
|
|
#C0C0C0
|
rgb(192,192,192)
|
|
#FFFFFF
|
rgb(255,255,255)
|
Example:-
<!DOCTYPE html>
<html>
<body>
<p style="background-color:#FFFF00">
Color set by using hex value
</p>
<p
style="background-color:rgb(255,255,0)">
Color set by using rgb value
</p>
<p style="background-color:yellow">
Color set by using color name
</p>
</body>
</html>
16 Million Different Colors
The combination of Red, Green
and Blue values from 0 to 255 gives a total of more than 16 million different
colors to play with (256 x 256 x 256).
Most modern monitors are
capable of displaying at least 16384 different colors.
If you look at the color table
below, you will see the result of varying the red light from 0 to 255, while
keeping the green and blue light at zero.
Red Light
|
HEX
|
RGB
|
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
Shades of Gray
Gray
colors are displayed using an equal amount of power to all of the light
sources. To make it easier for you to select the right gray color we have compiled
a table of gray shades for you:
Gray Shades
|
HEX
|
RGB
|
|
#000000
|
rgb(0,0,0)
|
|
#080808
|
rgb(8,8,8)
|
|
#101010
|
rgb(16,16,16)
|
|
#181818
|
rgb(24,24,24)
|
|
#202020
|
rgb(32,32,32)
|
|
#282828
|
rgb(40,40,40)
|
|
#303030
|
rgb(48,48,48)
|
|
#383838
|
rgb(56,56,56)
|
|
#404040
|
rgb(64,64,64)
|
|
#484848
|
rgb(72,72,72)
|
|
#505050
|
rgb(80,80,80)
|
|
#585858
|
rgb(88,88,88)
|
|
#606060
|
rgb(96,96,96)
|
|
#686868
|
rgb(104,104,104)
|
|
#707070
|
rgb(112,112,112)
|
|
#787878
|
rgb(120,120,120)
|
|
#808080
|
rgb(128,128,128)
|
|
#888888
|
rgb(136,136,136)
|
|
#909090
|
rgb(144,144,144)
|
|
#989898
|
rgb(152,152,152)
|
|
#A0A0A0
|
rgb(160,160,160)
|
|
#A8A8A8
|
rgb(168,168,168)
|
|
#B0B0B0
|
rgb(176,176,176)
|
|
#B8B8B8
|
rgb(184,184,184)
|
|
#C0C0C0
|
rgb(192,192,192)
|
|
#C8C8C8
|
rgb(200,200,200)
|
|
#D0D0D0
|
rgb(208,208,208)
|
|
#D8D8D8
|
rgb(216,216,216)
|
|
#E0E0E0
|
rgb(224,224,224)
|
|
#E8E8E8
|
rgb(232,232,232)
|
|
#F0F0F0
|
rgb(240,240,240)
|
|
#F8F8F8
|
rgb(248,248,248)
|
|
#FFFFFF
|
rgb(255,255,255)
|
HTML Color Names:-
Color Names Supported by All Browsers
140 color names are defined in
the HTML and CSS color specification (17 standard colors plus 123 more).
You can visit this
link for a complete list of colors:
and
HTML Entities:-
Reserved
characters in HTML must be replaced with character entities.
HTML Quick List:-
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>
<html>
<head>
<title>Title of document goes here</title>
</head>
<body>
Visible text goes here...
</body>
Visible text goes here...
</body>
</html>
Basic Tags
<h1>Largest
Heading</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>Smallest Heading</h6>
<p>This is a paragraph.</p>
<br> (line break)
<hr> (horizontal rule)
<!-- This is a comment -->
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>Smallest Heading</h6>
<p>This is a paragraph.</p>
<br> (line break)
<hr> (horizontal rule)
<!-- This is a comment -->
Formatting
<b>Bold
text</b>
<code>Computer code</code>
<em>Emphasized text</em>
<i>Italic text</i>
<kbd>Keyboard input</kbd>
<pre>Preformatted text</pre>
<small>Smaller text</small>
<strong>Important text</strong>
<abbr> (abbreviation)
<address> (contact information)
<bdo> (text direction)
<blockquote> (a section quoted from another source)
<cite> (title of a work)
<del> (deleted text)
<ins> (inserted text)
<sub> (subscripted text)
<sup> (superscripted text)
<code>Computer code</code>
<em>Emphasized text</em>
<i>Italic text</i>
<kbd>Keyboard input</kbd>
<pre>Preformatted text</pre>
<small>Smaller text</small>
<strong>Important text</strong>
<abbr> (abbreviation)
<address> (contact information)
<bdo> (text direction)
<blockquote> (a section quoted from another source)
<cite> (title of a work)
<del> (deleted text)
<ins> (inserted text)
<sub> (subscripted text)
<sup> (superscripted text)
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>
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>
Bookmark:
<a id="tips">Tips Section</a>
<a href="#tips">Jump to the Tips Section</a>
<a id="tips">Tips Section</a>
<a href="#tips">Jump to the Tips Section</a>
Images
<img
src="URL" alt="Alternate Text" height="42"
width="42">
Styles/Sections
<style
type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<div>A block-level section in a document</div>
<span>An inline section in a document</span>
h1 {color:red;}
p {color:blue;}
</style>
<div>A block-level section in a document</div>
<span>An inline section in a document</span>
Unordered list
<ul>
<li>Item</li>
<li>Item</li>
</ul>
<li>Item</li>
<li>Item</li>
</ul>
Ordered list
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
<li>First item</li>
<li>Second item</li>
</ol>
Definition list
<dl>
<dt>Item 1</dt>
<dd>Describe item 1</dd>
<dt>Item 2</dt>
<dd>Describe item 2</dd>
</dl>
<dt>Item 1</dt>
<dd>Describe item 1</dd>
<dt>Item 2</dt>
<dd>Describe item 2</dd>
</dl>
Tables
<table
border="1">
<tr>
<th>table header</th>
<th>table header</th>
</tr>
<tr>
<td>table data</td>
<td>table data</td>
</tr>
</table>
<tr>
<th>table header</th>
<th>table header</th>
</tr>
<tr>
<td>table data</td>
<td>table data</td>
</tr>
</table>
Iframe
<iframe
src="demo_iframe.htm"></iframe>
Forms
<form
action="demo_form.asp" method="post/get">
<input type="text"
name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select>
<option>Apples</option>
<option selected="selected">Bananas</option>
<option>Cherries</option>
</select>
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select>
<option>Apples</option>
<option selected="selected">Bananas</option>
<option>Cherries</option>
</select>
<textarea
name="comment" rows="60"
cols="20"></textarea>
</form>
</form>
Entities
< is the same as
<
> is the same as >
© is the same as ©
> is the same as >
© is the same as ©
You Have Learned HTML, Now What?
HTML Summary
We have learnt how to use HTML to create your own web
site.
HTML is the universal markup language for the Web. HTML
lets you format text, add graphics, create links, input forms, frames and
tables, etc., and save it all in a text file that any browser can read and
display.
The key to HTML is the tags, which indicates what content
is coming up.
Now You Know HTML, What's Next?
Learn CSS
CSS is used
to control the style and layout of multiple Web pages all at once.
With CSS,
all formatting can be removed from the HTML document and stored in a separate
file.
CSS gives
you total control of the layout, without messing up the document content.
Learn JavaScript
JavaScript can make your web site more dynamic.
A static web site is nice when you just want to show flat
content, but a dynamic web site can react to events and allow user interaction.
JavaScript is the most popular scripting language on the
internet and it works with all major browsers.
Hosting your own Web site
Hosting your web site on your own server is always an
option. Here are some points to consider:
Hardware Expenses
To run a "real" web site, you will have to buy
some powerful server hardware. Don't expect that a low cost PC will do the job.
You will also need a permanent (24 hours a day ) high-speed connection.
Software Expenses
Remember that server-licenses often are higher than
client-licenses. Also note that server-licenses might have limits on number of
users.
Labor Expenses
Don't expect low labor expenses. You have to install your
own hardware and software. You also have to deal with bugs and viruses, and
keep your server constantly running in an environment where "everything
could happen".
Using an Internet Service Provider
Renting a server from an Internet Service Provider (ISP)
is a common option.
Most small companies store their web site on a server
provided by an ISP. Here are some advantages:
Connection Speed
Most ISPs have very fast connections to the internet.
Powerful Hardware
ISPs often have powerful web servers that can be shared
by several companies. You can also expect them to have an effective load
balancing, and necessary backup servers.
Security and Stability
ISPs are specialists on web hosting. Expect their servers
to have more than 99% up time, the latest software patches, and the best virus
protection.
Things to Consider with an ISP
24-hour support
Make sure your ISP offers 24-hours support. Don't put
yourself in a situation where you cannot fix critical problems without having
to wait until the next working day. Toll-free phone could be vital if you don't
want to pay for long distance calls.
Daily Backup
Make sure your ISP runs a daily backup routine, otherwise
you may lose some valuable data.
Traffic Volume
Study the ISP's traffic volume restrictions. Make sure
that you don't have to pay a fortune for unexpected high traffic if your web
site becomes popular.
Bandwidth or Content Restrictions
Study the ISP's bandwidth and content restrictions. If
you plan to publish pictures or broadcast video or sound, make sure that you
can.
E-mail Capabilities
Make sure your ISP supports the e-mail capabilities you
need.
Database Access
If you plan to use data from databases on your web site,
make sure your ISP supports the database access you need.
No comments:
Post a Comment