HTML

HTML—
HTML, which stands for HyperText Markup Language, is the predominant

markup language for web pages. HTML is the basic building-blocks of
webpages.
HTML is written in the form of HTML elements consisting of tags, enclosed in

angle brackets (like <html>), within the web page content. HTML tags
normally come in pairs like <h1> and </h1>. The first tag in a pair is the
start tag, the second tag is the end tag (they are also called opening tags
and closing tags). In between these tags programmers can add text, tables,
images, etc.
Tags—
HTML is short for Hypertext Markup Language, the text-based language used
to write Web pages. HTML tags are coding instructions imbedded in the
HTML document. A Web browser is designed to read the instructions, or
HTML tags, in order to render the page graphically. In other words, a Web
browser translates HTML tags into visual effects that mold the way an HTML
document looks to the viewer.
Heading Tags—
You may be wondering why heading tags are necessary at all since you could
achieve the same effect by specifying a larger font or defining a css class.
The main reasons are:
1. Heading tags will be recognized by browsers which don't recognize

style sheets (or use a user-defined style sheet).
2. Heading tags are used by search engines to identify words which are
more important than the rest of the page text. The theory is that
headings will sum up the topic of the page, so they are counted as
important keywords.
3. Screen readers and magnifiers (for the visually impaired) rely on
headings to navigate the page.
4. Heading tags make it easy to make global changes to headings.
Although you could theoretically achieve this by defining a new css
class, it makes more sense and tends to be easier to define a style for
heading tags.
Comment tag—
The COMMENT tag is for organizing the source code (HTML) just like the
Horizontal Rule <HR> tag is for the web page. The comment tag is used in
the BODY area of the code. It can be any length in characters.

Body tag’s properties—
Attribute Value Description DTD
rgb(x,x,x) Deprecated. Use styles instead.

alink #xxxxxx Specifies the color of an active link in a TF
colorname document
Deprecated. Use styles instead.

background URL Specifies a background image for a TF
document

bgcolor #xxxxxx Specifies the background color of a TF
colorname document

link #xxxxxx Specifies the default color of unvisited TF
colorname links in a document

text #xxxxxx Specifies the color of the text in a TF
colorname document

vlink #xxxxxx Specifies the color of the visited links in TF
colorname a document
Anchor 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
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
Internal Links
Introduction
An internal link allows you to link to another section on the same web page, so
it basically scrolls the page up or down to the desired location. This is helpful
to the user to quickly jump to the information he/she is looking for.
index.html - Notepad
....<BODY>
<A NAME="top"> </A>
<A HREF="#top">
Go To Top Of Page
</A>
</BODY>....
My Homepage - Microsoft Internet
Explorer
Go To Top Of Page
Lists—
DEFINITION
coding results
Preceeding Text Preceeding Text List Header
<DL> List item 1
<LH>List Header</LH> Description of List item 1.
<DT>List item 1
<DD>Description of List item
1.
List item 2
<DT>List item 2
Description of List item 2.
<DD>Description of List item
2.
</DL>
 WITH IMAGE BULLETS
coding results
Preceeding Text
<DL>
<LH>List Header</LH>
Preceeding Text List Header
<DD><IMG SRC="redball.gif" ALT="*"> List
List item 1.
item 1.
List item 2.
<DD><IMG SRC="redball.gif" ALT="*"> List
item 2.
</DL>
To the Table of Contents
DIRECTORY
coding results
List Name
<DIR> List Name
<LI>List item  List item
1 1
<LI>List item  List item
2 2
</DIR>
MENU
coding results
List Name
<MENU>
List Name
List item
List item 1
1<BR>
List item 2
List item 2
</MENU>
NESTED LISTS
coding results
Preceeding Text
<OL TYPE="1">
<LI>List Item 1
<OL TYPE="a">
Preceeding Text
<LI>Nested List Item
1
I. List Item 1
a. Nested List Item 1
2
b. Nested List Item 2
</OL>
II. List Item 2
<LI>List Item 2
<UL>
o Nested List Item 1
1
</OL>
</OL>
ORDERED
coding results
Preceeding Text
Preceeding Text
<OL>
List Header
<:LH>List
Header</LH>
1. List item 1
<LI>List item 1
<LI>List item 2
2. List item 2
</OL>
 ORDERED<LI>TYPES
coding results
<OL>
<LI TYPE="A">List
item
A. List item
<LI TYPE="a">List
item
a. List item
<LI TYPE="I">List
item
I. List item
<LI TYPE="i">List
item
i. List item
<LI TYPE="1">List
item
1. List item
</OL>
 <OL>TYPES
Example: <OL TYPE="A">
coding results
<OL
TYPE="A"> A. List item 1
<LI>List item 1
<LI>List item 2 B. List item 2
</OL>
 <OL START="8">
coding results
<OL
START="8"> 8. List item 8
<LI>List item 1
<LI>List item 2 9. List item 9
</OL>
UNORDERED
coding results
Preceeding Text
Preceeding Text
<UL>
List Header
<LH>List
Header</LH>
• List item 1
<LI>List item 1
<LI>List item 2
• List item 2
</UL>
 UNORDERED <LI> TYPES
• IMAGE
coding results
<UL
SRC="redball.gif">
<LI>List item 1
o List item 1
<LI>List item 2
</UL>
o List item 2
• PLAIN
coding results
<UL PLAIN>
<LI>List item
1
<LI>List item o List item 1
2
</UL> o List item 2
• TYPE
coding results
<UL>
<LI TYPE="CIRCLE">List item
<LI TYPE="DISC">List item o List item
<LI TYPE="SQUARE">List o List item
item
</UL> o List item
HTML Formatting Tags
When it comes to formatting a web page using HTML code, you can think of
it (kind of) in the same way you would look at formatting a document
formatted by a word processor. You have your headlines to show you where
one section starts and stops. You have your paragraphs to break up blocks of
text, and you have line breaks to show where there should be a new line
started. Now I am going to show you how to get some of these things done
using HTML.
• 1 Headline Tags
• 2 Paragraph Tags
• 3 Line Break Tags
• 4 Blockquote Tags
• 5 What Have You Learned About HTML Formatting Tags?
• 6 Web Design Tutorial Navigation
Headline Tags
The main purpose of the headline tags are make the titles stand out on the
page, and also tell the browser and visitors where the titles are. You can use
<h1></h1> for the main title, then (if needed) <h2></h2> for a secondary
title. The bigger the number gets, the smaller or less important the title
becomes. Remember to use the headline tags for headings only. It is not a
good idea to use them to make text bigger or bolder. Also, search engines
look at how your headline tags are used to help index the structure of the
content on your web pages.
Code: <h1>This Is My Title</h1>
Paragraph Tags
The paragraph tags are important because they show the start (
) and then end

of where a paragraph should be on your web page. Having a long page with
nothing but unformatted text is going to be very hard for the reader to
navigate through. You want to break up the web page with the paragraph
tags to make the web page your working on more scan-able for the end user.
Code: <p>This will be shown as it's own paragraph on my web page.</p>
Line Break Tags
What if you don't want to go to a new paragraph, and instead only want to
break of one line and move to the line right under it? That is what the
or
tags are for. You might see either used, however it might be best to start
using
to future-proof your web page for browsers in the future (just in case support
for
was ever dropped.
Code: I can put this at the end of a line to show where I want it to stop.
<br />
Blockquote Tags
When text has been blockquoted, it is often indented a little - in comparison

with the other paragraphs around it. So you get white space to the left, and
the margins around the text are enlarged a little 'bit to seperate it from the
rest of the text.
Code: <blockquote>This text will be shown as indented on my web

page.</blockquote>
Create Paragraph - The <p> Element:
The <p> element offers a way to structure your text. Each paragraph of text
should go in between an opening <p> and closing </p> tag as shown below
in the example:
<p>Here is a paragraph of text.</p>

<p>Here is a second paragraph of
text.</p>
<p>Here is a third paragraph of
text.</p>
Create Line Breaks - The <br /> Element:
Whenever you use the <br /> element, anything following it starts on the
next line. This tag is an example of an empty element, where you do not
need opening and closing tags, as there is nothing to go in between them.
Note: The <br /> element has a space between the characters br and the
forward slash. If you omit this space, older browsers will have trouble
rendering the line break, while if you miss the forward slash character and
just use <br> it is not valid XHTML
Example:
Hello<br />
You come most carefully upon your hour.<br
/>
Thanks<br />
Manasvi
Table tags—
HTML Table Tags Examples II: Advanced
• Cellpadding • Color in Tables

• Cellspacing o Color namesFor use with
• Cell Width BGCOLOR
• Colspan o TR Tag With Image
• Colspec o TR, TD/TH Tags, Colspan &
• Null Cell Rowspan
• Rowspan o Table Tag & TR Tag
• 1x1 Table Within a o Table Tag -- 1x1 Table Within
3x3 Table 1x1 Table
o Table Tag -- Cellspacing
• Sample Calendar Coloring
o Table Colors and Font Colors
• Bar Graph Example
CELLPADDING
• CELLPADDING="10"
<TABLE BORDER="7"
This
CELLPADDING="10">
is a This a
<TR>
TD TH cell
<TD>This is a TD cell</TD>
cell
<TD><PRE> </PRE></TD>
<TH>This is a TH cell</TH>
</TR> Text Image
<TR> align in TH
<TH VALIGN="TOP">Text aligned ed cell
top</TH> top with
<TH>Image in TH cell with default default
alignments ---></TH> alignm
<TH><IMG SRC="blylplne.gif" ents
ALT="airplane"></TH> --->
</TR>
<TR>
Image
<TH VALIGN="BOTTOM">Text aligned
in TD
bottom</TH>
cell
<TD><Image in TD cell with default
Text with
alignments ---></TD>
align default
<TD><IMG SRC="blylplne.gif"
ed alignm
ALT="airplane"></TD>
bott ents
</TR>
om --->
</TABLE>
CELLSPACING
• CELLSPACING="10"
<TABLE BORDER="7" This a This is a

CELLSPACING="10"> TD cell TH cell
<TR>
<TD>This is a TD cell</TD> Text Image in
<TD><PRE> </PRE></TD> aligne TH cell
<TH>This is a TH cell</TH> d top with
</TR> default
<TR> alignme
<TH VALIGN="TOP">Text aligned nts --->
top</TH>
<TH>Image in TH cell with default Image in
alignments ---></TH> Text TD cell
<TH><IMG SRC="blylplne.gif" aligne with
ALT="airplane"></TH> d default
</TR> botto alignme
<TR> m nts --->
<TH VALIGN="BOTTOM">Text aligned
bottom</TH>
<TD><Image in TD cell with default
alignments ---></TD>
<TD><IMG SRC="blylplne.gif"
ALT="airplane"></TD>
</TR>
</TABLE>
CELL WIDTH
• TWO COLUMNS: FIRST CELL WIDTH="50%"

<TABLE BORDER="7"> This cell
<TR> The first
will
<TH WIDTH="50%">This cell will expand to expand to cell will
50% expand to
50% if the
if the contents of the other cell will 50% if the
contents
allow.</TH> contents of
of the
<TH>The first cell will expand to 50% this cell
other cell
if the contents of this cell will allow.</TH> will allow.
will allow.
</TR>
</TABLE>
• THREE COLUMNS: FIRST CELL WIDTH="50%"
<TABLE BORDER="7"> The The The

<TR> first first first cell
<TH WIDTH="50%">This cell will expand to cell will cell will will
50% expand expand expand
if the contents of the other cells will to 50% to 50% to 50%
allow.</TH> if the if the if the
<TH>The first cell will expand to 50% content conten content
if the contents of the other cells will s of the ts of s of the
allow.</TH> other the other
<TH>The first cell will expand to 50% other
if the contents of the other cells will cells cells
cells
allow.</TH> will will
will
</TR> allow. allow.
allow.
</TABLE>
COLSPAN
• COLSPAN="2"
<TABLE BORDER="7"> This TH

<TR> This a
cell spans
<TD>This is a TD cell</TD> TD
two
<TH COLSPAN="2">This TH cell spans two cell
columns
columns</TH>
</TR> Text
<TR> aligned
<TD><PRE> </PRE></TD> left
<TH ALIGN="LEFT">Text aligned left</TH> Text
</TR> aligned
<TR> right
<TH><IMG SRC="redball.gif" ALT="*"></TH>
<TH ALIGN="RIGHT">Text aligned right</TH>
</TR>
</TABLE>
NULCELL
<TABLE BORDER="7"> Below is a null

<TD><PRE> </PRE></TD> cell.
<TH>Below is a null
cell.</TH>
</TR> Above is a null cell
<TR>
<TD></TD>
</TR>
<TR>
<TH>Above is a null
cell.</TH>
</TR>
</TABLE>
ROWSPAN
• ROWSPAN="3"
<TABLE BORDER="7"> This is

<TR> This is a This
a TH
<TD>This is a TD cell</TD> TD cell TH
cell
<TH ROWSPAN="2"><This TH cell spans three cell
rows</TH> span
<TH>This is a TH cell</TH> s
Text Text
</TR> three
aligne aligned
<TR> rows
d left right
</TR>
<TR>
<TH ALIGN="LEFT">Text aligned left</TH>
<TH ALIGN="RIGHT">Text aligned right</TH>
</TR>
</TABLE>
1x1 TABLE WITHIN A 3x3 TABLE
<TABLE BORDER="7"
CELLSPACING="10">
<TR>
<TH><IMG SRC="redball.gif"
ALT="*"></TH>
<TH><IMG SRC="redball.gif"
ALT="*"></TH> The USS
</TR> Enterprise
<TR> arrives home
Bold Italic
<TD>
Text Text
<TABLE BORDER="7"
in a in a
CELLSPACING="5">
TD TD
<CAPTION ALIGN="BOTTOM">
cell cell
The USS Enterprise arrives home
</CAPTION>
<TR>
<TD><IMG SRC="ee.jpg" ALT="Star
Trek pic"></TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD ALIGN=:LEFT"><B>Bold Text in a TD
cell</B></TD>
<TD><BR></TD>
<TD><I>Italic Text in a TD cell</I></TD>
</TR>
</TABLE>
COLOR IN TABLES
• For 141 color names (including the 16 listed in the HTML 3.2
documentation) go to the Color page.
• IN TR TAG WITH IMAGE.
Results of example
Example code
code
<TABLE BORDER="7" CELLPADDING="7"
CELLSPACING="10"> Image is a
<TR BGCOLOR="#00FF00"> transpare
<TD><IMG SRC="rrose.gif" nt .gif.
ALT="rose"></TD>
<TD>Image is a transparent .gif.</TD>
</TR>
</TABLE>
• IN TR AND TD/H TAGS, COLSPAN AND ROWSPAN

Example code Results of example code
<TABLE BORDER="7"
This cell
CELLPADDING="7"
should be
CELLSPACING="10"> A
yellow, Back to the
<TR BGCOLOR="#00FF00"> green
overriding row color.
<TD>A green row.</TD> row.
the row
<TD
color.
BGCOLOR="#FFFF00">This
cell should be yellow,
overriding the row color.</TD> A blue This cell
<TD>Back to the row row. takes the
color.</TD> color of
<TR BGCOLOR="#0000FF"> the
<TD>A blue row.</TD> topmost
A red row. row that it
<TD ROWSPAN="2">This cell spans.
takes the color of the topmost
row that it spans</TD>
</TR>
<TR BGCOLOR="#FF0000">
<TD>A red row.</TD>
</TR>
</TABLE>
• IN TABLE AND TR TAGS

Example code Results of example code
<TABLE BGCOLOR="#FF0000"
The table has a
BORDER="7" CELLPADDING="7"
red background
CELLSPACING="10">
<TR>
<TD>The table has a red BGCOLOR in TD/H
background</TD>
or TR overrides
</TR>
BGCOLOR in the
<TR>
TABLE tag.
<TD BGCOLOR="#0000FF">BGCOLOR in
TD/H or TR overrides BGCOLOR in the
TABLE tag.</TD>
</TR>
</TABLE>
• IN TABLE TAGS, 1x1 TABLE WITHIN A 1x1 TABLE, BORDERS=7 &

7
Example Code Code Result

CELLSPACING="10" BGCOLOR="#0000FF">
<CAPTION
ALIGN="BOTTOM">Butterfly</CAPTION>
<TR>
<TD>
CELLSPACING="10" BGCOLOR=#FF0000>
<TR>
<TD><IMG SRC="bfly.gif"
ALT="butterfly"></TD>
</TR>
</TABLE>
Butterfly
</TD>
</TR>
</TABLE>
• IN TABLE TAGS, CELLSPACING COLORING

o Example A: with an outer border
<TABLE BORDER="0"
blah
CELLPADDING="0" CELLSPACING="0" more blah
blah
BGCOLOR="#0000FF"> blah blah
blah
<TR> blah
blah
<TD>
<TABLE BORDER="5"
CELLPADDING="10"
CELLSPACING="10">
<TR>
<TD BGCOLOR="#FFFFFE"> blah blah
blah blah</TD><TD
BGCOLOR="#FFFFFE"> more blah blah
blah blah</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
o
o Example B: with no outer border
<TABLE BORDER="0"
blah
CELLPADDING="0" CELLSPACING="0" more blah
blah
BGCOLOR="#0000FF"> blah blah
blah
<TR> blah
blah
<TD>
<TABLE BORDER="0"
CELLPADDING="10"
CELLSPACING="10">
<TR>
<TD BGCOLOR="#FFFFFE"> blah blah
blah blah</TD><TD
BGCOLOR="#FFFFFE"> more blah blah
blah blah</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
•
• TABLE COLORS WITH FONT COLORS
Results of
Example code
example code
<TABLE BGCOLOR="#FF0000" BORDER="0" H Mountain

CELLPADDING="7" CELLSPACING="0"> T Dragon
<TR> M Web
<TH BGCOLOR="#FF8000"><FONT
COLOR=#804000" SIZE="6"> Designs
L
H<BR>T<BR>M<BR>L<BR></FONT></TH>
<TH BGCOLOR="#804000">
<FONT COLOR=#FF8000" SIZE="5"
FACE="ARIAL">
Mountain Dragon<BR>Web
Designs</FONT></TH>
<TH BGCOLOR="#FF8000"><PRE> </PRE></TH>
</TR>
</TABLE>
BAR GRAPH EXAMPLE
Results of example
Example code
code
<table width=95% border=0 cellspacing=0

Web Page Hits
cellpadding=0>
1996
<tr><td colspan=3><hr noshade></td></tr>
<tr><td> </td><th colspan=2>Web Page Hits
1996</th></tr> WWW
<tr><td colspan=3><hr noshade></td></tr> Recipies +73%
<tr><td nowrap>WWW Recipies</td><td>
</td> Jane's
<td align=left nowrap><img border=2 Page +25%
src="reddot.gif" height=25
Joe's
width=73>+73%</td> -10%
Page
</tr><tr>
<td>Jane's Page</td><td> </td> -92%
<td align=left><img border=2 src="reddot.gif" PC Page
height=30 width=25>+25%</td>
</tr><tr>
<td>Joe's Page</td>
<td align=right>-10%<img border=2
src="reddot.gif" height=30 width=10></td>
<td> </td></tr><tr><td>PC Page</td>
<td align=right>-92%<img border=2
src="reddot.gif" height=30 width=92>
</td><td></td></tr>
<tr><td colspan=3><hr noshade></td></tr>
</table>
CSS—
What is CSS ?
What are Cascading Style Sheets?
CSS was first developed in 1997, as a way for Web developers to define the
look and feel of their Web pages. It was intended to allow developers to
separate content from design so that HTML could perform more of the
function that it was originally based on - the markup of content, without
worry about the design and layout.
CSS didn’t gain in popularity until around 2000, when Web browsers began
using more than the basic font and color aspects of CSS. And now, all
modern browsers support all of CSS Level 1, most of CSS Level 2, and some
aspects of CSS Level 3.
Web Designers that don’t use CSS for their design and development of Web
sites are rapidly becoming a thing of the past. And it is arguably as important
to understand CSS as it is to know HTML - and some would say it was more
important to know CSS.
CSS is an Abbreviation
It stands for Cascading Style Sheet.
Style sheet refers to the document itself. Style sheets have been used for
document design for years. They are the technical specifications for a layout,
whether print or online. Print designers use style sheets to insure that their
designs are printed exactly to specifications. A style sheet for a Web page
serves the same purpose, but with the added functionality of also telling the
viewing engine (the Web browser) how to render the document being
viewed.
Cascade is the special part. A Web style sheet is intended to cascade

through a series of style sheets, like a river over a waterfall. The water in the
river hits all the rocks in the waterfall, but only the ones at the bottom affect
exactly where the water will flow. The same is true of the cascade in Web
style sheets.
Every Web page is affected by at least one style sheet, even if the Web
designer doesn’t apply any styles. This style sheet is the user agent style
sheet - the default styles that the Web browser will use to display a page if
no other instructions are provided. But if the designer provides other
instructions, the browser needs to know which instructions have precedence.
For example, in my Web browser, the default font is “Times New Roman”
size 16. But nearly no pages I visit display in that font family and size. This is
because the cascade defines the second style sheets set by the designers to
redefine the font size and family and override my Web browser’s defaults.
Where is CSS Used?
CSS is used to style Web pages. But there is more to it than that. CSS is used
to style XHTML and XML markup. This means that anywhere you have XML
markup (including XHTML) you can use CSS to define how it will look.
CSS is also used to define how Web pages should look when viewed in other
media than a Web browser. For example, you can create a print style sheet
that will define how the Web page should print out and another style sheet to
display the Web page on a projector for a slide show.
Why is CSS Important?
CSS is one of the most powerful tools a Web designer can learn because with
it you can affect the entire mood and tone of a Web site. Well written style
sheets can be updated quickly and allow sites to change what is prioritized
or valued without any changes to the underlying XHTML.
The challenge of CSS is that there is so much to learn. But it doesn’t seem
like it. After all, there are only around 60 properties in CSS Level 1 and
around 70 in CSS Level 2. Compared with the number of HTML tags and
attributes to learn, that can feel like a cake walk.
But because CSS can cascade, and combine and browsers interpret the
directives differently, CSS is more difficult than plain HTML. But once you
start using it, you’ll see that harnessing the power of CSS will give you more
options and allow you to do more and more things with your Web sites.
How does CSS Work ?
26 Jun
Posted by admin as General

When a visitor loads one of your Web pages, either by typing the address
into a browser or by clicking a link, the server (the computer that stores the
Web page) sends the HTML file to the visitor’s computer along with any files
linked to or embedded in the HTML file, such as images or movies. The CSS
code, or style sheet, can be either embedded directly in the HTML file or
linked to it. Regardless of where it’s located, the visitor’s browser will
interpret this code by using its particular rendering engine to apply the CSS
to the HTML, and then display the page in the browser window.
The code used to create the Web page is downloaded, interpreted, and then
rendered by the browser to create the final display.
The interpretation and application of the style sheet by the browser’s

rendering engine is where our headaches begin. The W3C has gone to great
lengths to specify how browser manufacturers should render the code, but
bugs, omissions, and misinterpretations still creep in, meaning that no two
browsers will render a Web page exactly the same. For the most part, these
differences will go unnoticed by the user, but occasionally these differences
are glaring and require you to do some extra work to get the page to look
right in the broadest spectrum of browsers.
Tips
• The power of CSS comes from its ability to mix and match different
rules from different sources to tailor your Web pages’ layout to your
exact needs. In some ways, it resembles computer programmingwhich
is not too surprising, because a lot of this stuff was created by
programmers rather than designers. But once you get the hang of it,
CSS will become as natural as putting together a sentence.
• Sometimes a Web browser will render HTML content before the style
sheet is applied to it, so you may see a “naked” or unstyled page flash
briefly on the screen.
• There is always the possibility that your Web page will be displayed
without the CSS code, either because of an error or because the device
being used does not accommodate CSS (such as a mobile phone
browser, for instance). You should always consider how your page will
look without the style sheet, and make sure that structurally it makes
sense
An HTML page using CSS to add an image in the background, position the
content down and to the right, and format the text.
The same code displayed without the benefit of CSS. The page still displays,
but without the formatting in Figure.
External HTML links are those HTML links that go to another Web site. If you
place HTML links to About.com, or another Web site you like, on your Web
page that would be an example of external HTML links. Having external
HTML links on you Web site is very important because if you have a good set
of HTML links that your visitors are interested in it will keep them coming
back to your Web site to access those HTML links. For example if you have a
set of HTML links on Star Trek and they really like Star Trek then it would be
much easier for them to come to your Web site than to go looking through a
search engine for the sites they want. They they may even bookmark your
Web pages so they can get to your HTML links faster thus resulting in more
page views for you. If they like it that much they may even tell their friends
about your pages of HTML links and their friends will place HTML links to your
Web site from their Web sites. Result: even more page views.
The code for external HTML links looks like this:
<a href="http://www.sitename.com"><b>Text for HTML links goes

here.</b></a> Anything extra you want to write goes here.
Internal Links
Introduction
An internal link allows you to link to another section on the same web
page, so it basically scrolls the page up or down to the desired location. This
is helpful to the user to quickly jump to the information he/she is looking for.
The Anchors
To link to a specific spot on a web page, you need to use a pair of anchors.
One where you are linking from, and one where you would like to link to. The
first one, is where you are linking from. It is very similar to the normal link
tag. The starting tag looks like <A HREF="#name"> and the closing tag
looks like </A>. The text between the two tags is what is the link. The text
"name" identifies the anchor, giving it a name.
The second anchor identifies where you are linking to. This tag must be
placed in your HTML in the location where you would like to link to. The
starting tag is <A NAME="name"> and the closing tag is </A>. It is not
necessary that any text goes between these two tags as it is just identifying
an area. The text "name", must match that in the first anchor, for the link to
work. Here is an example of an internal link.
HTML  Tag

Example
An HTML comment:

<p>This is a paragraph.</p>
Try it yourself »
Definition and Usage
The comment tag is used to insert a comment in the source code. A

comment will be ignored by the browser. You can use comments to explain
your code, which can help you when you edit the source code at a later date.
You can also store program-specific information inside comments. In this

case they will not be visible for the user, but they are still available to the
program. A good practice is to comment the text inside scripts and style
elements to prevent older browsers, that do not support scripting or styles,
from showing it as plain text.
HTML comments
Since HTML is officially an SGML application, the comment syntax used in

HTML documents is actually the SGML comment syntax. Unfortunately this
syntax is a bit unclear at first.
The definition of an SGML comment is basically as follows:
A comment declaration starts with <!, followed by zero or more

comments, followed by >. A comment starts and ends with "--", and does not
contain any occurrence of "--".
This means that the following are all legal SGML comments:
1. 

2. 
3. 
4. 
5. <!>
Note that an "empty" comment tag, with just "--" characters, should always
have a multiple of four "-" characters to be legal. (And yes, <!> is also a
legal comment - it's the empty comment).
Not all HTML parsers get this right. For example, " hello-->" is a legal
comment, as you can verify with the rule above. It is a comment tag with two
comments; the first is empty and the second one contains "> hello". If you
try it in a browser, you will find that the text is displayed on screen.
There are two possible reasons for this:
1. The browser sees the ">" character and thinks the comment ends there.
2. The browser sees the "-->" text and thinks the comment ends there.
There is also the problem with the "--" sequence. Some people have a habit
of using things like "" as separators in their source.
Unfortunately, in most cases, the number of "-" characters is not a multiple
of four. This means that a browser who tries to get it right will actually get it
wrong here and actually hide the rest of the document.
For this reason, use the following simple rule to compose valid and accepted
comments:
An HTML comment begins with "" and does not
contain "--" or ">" anywhere in the comment.

HTML

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

HTML—

HTML, which stands for HyperText Markup Language, is the predominant

HTML is written in the form of HTML elements consisting of tags, enclosed in

1. Heading tags will be recognized by browsers which don't recognize

<!-- Your comment here

Body tag’s properties—

Attribute Value Description DTD

rgb(x,x,x) Deprecated. Use styles instead.

Deprecated. Use styles instead.

rgb(x,x,x) Deprecated. Use styles instead.

rgb(x,x,x) Deprecated. Use styles instead.

rgb(x,x,x) Deprecated. Use styles instead.

rgb(x,x,x) Deprecated. Use styles instead.

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

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

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

• An unvisited link is underlined and blue

<A NAME="top"> </A>

To the Table of Contents

To the Table of Contents

To the Table of Contents

To the Table of Contents

To the Table of Contents

HTML Formatting Tags

• 6 Web Design Tutorial Navigation

Code: <h1>This Is My Title</h1>

) and then end

Code: <p>This will be shown as it's own paragraph on my web page.</p>

Line Break Tags

When text has been blockquoted, it is often indented a little - in comparison

Code: <blockquote>This text will be shown as indented on my web

Create Paragraph - The <p> Element:

<p>Here is a paragraph of text.</p>

HTML Table Tags Examples II: Advanced

• Cellpadding • Color in Tables

• Bar Graph Example

To the Table of Contents

<TABLE BORDER="7" This a This is a

To the Table of Contents

• TWO COLUMNS: FIRST CELL WIDTH="50%"

• THREE COLUMNS: FIRST CELL WIDTH="50%"

<TABLE BORDER="7"> The The The

To the Table of Contents

<TABLE BORDER="7"> This TH

To the Table of Contents

<TABLE BORDER="7"> Below is a null

To the Table of Contents

<TABLE BORDER="7"> This is

To the Table of Contents

1x1 TABLE WITHIN A 3x3 TABLE

To the Table of Contents

• IN TR AND TD/H TAGS, COLSPAN AND ROWSPAN

• IN TABLE AND TR TAGS

• IN TABLE TAGS, 1x1 TABLE WITHIN A 1x1 TABLE, BORDERS=7 &

Example Code Code Result

<TABLE BORDER="7" CELLPADDING="10"

• IN TABLE TAGS, CELLSPACING COLORING

<TABLE BGCOLOR="#FF0000" BORDER="0" H Mountain

To the Table of Contents

BAR GRAPH EXAMPLE

<table width=95% border=0 cellspacing=0

What are Cascading Style Sheets?

It stands for Cascading Style Sheet.

Cascade is the special part. A Web style sheet is intended to cascade