Programming Logics FORUMS

HTML Basics

Editor for HTML
Notepad is best editor for HTML. Open a notepad file and write your HTML script there and then save your file with “.htm” or “.html” extension and then open it with browser.

Basic Elements of HTML
There are four elements of HTML; Tags, elements, attributes and values.

Basics of HTML Layout
All HTML information begins with an open angle bracket "<" and ends with a closing angle bracket ">", for example, <html>. This tag tells an HTML interpreter (browser) that the document is written and marked up in standard HTML. The <html> tag is a paired tag, however, so you need to add a close tag at the end of the document, which is the same as the open tag with the addition of a slash: </html>.

Breaking at Paragraphs and Lines
To specify that you want a paragraph break, use the <p> tag. The open tag appears before the passage to be affected, and the close tag appears at the end of the passage. To break lines in HTML, use the break tag <br > and <br /> for a break can be used here also. By adding the <pre> tags, you achieve the desired formatting.

Code:

<html>

Dear HoneX TecH <br>

Link Road Lahore

<p>

Dear Director,

</p><p>

Thank you for giving me chance to learn HTML.

</p><p>

Sincerely,

</p><pre>

Your Name

    Your Student

</pre></html>

Head and Body
You will use the paired tags <head> </head> and <body> </body> to surround each section.

Code:

<html>

<head>

</head>

<body>

Dear HoneX TecH <br >

Link Road Lahore

<p>

Dear Director,

</p><p>

Thank you for giving me chance to learn HTML.

</p><pre>

Sincerely,

     Your Student

</pre>

</body>

</html>

The <head> </head> and <body> </body> formatting information doesn’t add anything to the display. The document also doesn’t contain any introductory HTML-formatting information yet, so the head area is empty.

Adding a Title
The <title> tag enables you to define the exact title you want in the document. It is a paired tag and appears within the <head> </head> block of information.

Code:

<head>

<title>My First Page</title>

</head>

Adding Blockquote
The tag mostly use for this contact information is <blockquote>. It’s a paired tag

Code:

<blockquote> information </blockquote>

Defining Section Heads
Each header-format level has an open and close tag. The highest-level header-format tag is h1 to the lowest is h6. Used as

Code:

<h1> sample </h1>

<h2> sample </h2>

<h3> sample </h3>

<h4> sample </h4>

<h5> sample </h5>

<h6> sample </h6>

Horizontal Rule
A very useful tag for organizing your document visually is the horizontal rule tag: <hr >. Dropped anywhere in a Web document, it produces a skinny line across the page. <hr /> can also be used.

XHTML
The best way to think about XHTML is that it’s a formalized version of HTML.
• All tags are paired or have ”/>” ending.
• All attributes are quoted.
• All attributes must be presented as name=value pairs.
• All tags and attributes must be in lowercase only.

Presenting Text

Text Bold and Italic
The italic formatting tag is <i>, which is paired with </i>and the boldface formatting tag is <b>, and its partner is </b>, <strong> </strong> tag is also used for bold and <em> </em> also used for italic.

Code:

<html>

<head><title>my 2nd page</title></head>

<body>

<b>HoneX Tech</b> is offering <strong>web hosting</strong> and domains at very cheap rates in all over Pakistan <br></br>and <i>maintaining good quality</i>

</body>

</html>

Underlining, Monospace, and Other Text Changes
The underline formatting tag is <u> </u>, monospace tag is <tt> </tt>, Superscripts are denoted by <sup> </sup>, subscripts by <sub> </sub> and text can be crossed out using <strike> </strike>.

Code:

<html>

<head><title>my 2nd page</title></head>

<body>

<b>HoneX Tech</b> is offering <u>web hosting</u> and domains at <tt>very cheap rates</tt>  in all over Pakistan <br></br>and also <i>maintaining very good quality</i> and trashing the <strike>poor quality</strike>.For the 1<sup>st</sup> time very cheap rates.

</body>

</html>

Font attributes for Size, Color, and Face
All font changes are variations on the <font> tag. HTML tags that can include attributes specify them as name="value" pairs. The <font> tag is a fine example. To change the size of a passage of text, you can use this formatting:

Code:

<font size="7">some important text</font>

HTML font sizes range from size 1 to size 7, with 1 being the smallest and 7 the largest. You can change the color of font by using the same <font> tags with different attributes like color attribute

Code:

<font color="BLUE">I’m blue</font>

The face attribute is used to list of typefaces as the value. If you want to ensure that you get either Arial (Typeface on Windows) or Chicago (face on the Macintosh), you specify like:

Code:

<font face="Arial, Chicago">special text</font>

The browser, upon receiving this HTML instruction, looks for Arial. If Arial is found, the browser uses it to display special text on the screen. If Arial isn’t available, the browser uses Chicago. If Chicago is not available, the text is displayed in the default proportional typeface.
You can also use more than one attribute in a tag like

Code:

<font size="4" color="blue" face="Helvetica Narrow, Arial Narrow">Skinny Text</font>

For changing the size to all text use the <basefont> with size attribute after the starting <body> tag like

Code:

<basefont size="n">

Where n varies from 1 to 7

Body Attributes for page colors
Use in your body tag the text attribute to change the color for the whole page like the following

Code:

<body text="blue"> Your Body and its Text </body>

For changing the background color of page use the bgcolor attribute in your body tag like

Code:

<body bgcolor="black" text="white"> Your Body and its Text </body>

Logical Styles
There are different styles to present a text but they are not used frequently and also not advised to used now a days because browsers don’t detect them but they are mentioned below
<cite> </cite> Bibliographic citation
<code> </code> Code listing
<dfn> </dfn> Word definition
<kbd> </kbd> Keyboard text (similar to "<CODE>" )
<samp> </samp> Sample user input
<var> </var> Program or other variable

It is a sample code to understand all tags studied until now

Code:

<html>

<head>

<title> A Sample Page </title>

</head>

<body bgcolor="#2B60DE" text="white" >

<h2> Cricket </h2>

<h4>The Amazing Game </h4>

<hr />

<p><b>Cricket</b> is a <cite>bat-and-ball team sport</cite> that is first documented as being played in southern England in the 16<sup>th</sup> century. By the end of the 18<sup>th</sup> century, cricket had developed to the point where <u>it had become the national sport of England.

A </u><b>cricket</b><u> match is played on a cricket field at the centre of which is a pitch.</u> The match is contested between two teams of eleven players each.</p>

<p>In cricket, one team bats, trying to score as many runs as possible without being <tt>dismissed</tt> ("out") while the other team bowls and fields, trying to dismiss the other team’s batsmen and limit any runs being scored. When the batting team has used all its available overs or has no remaining batsmen, the roles become reversed and it is now the fielding team’s turn to bat and try to outscore the opposition.</p>

<font color="#C2DFFF" face="Arial"><blockquote><var>There are several variations in the length of a game of cricket. In professional cricket this ranges from a limit of 20 overs per side (Limited Overs Cricket) to a game played over 5 days (Test cricket). Depending on the length of the game being played, there are different rules that govern how a game is won, lost, drawn or tied.</var></blockquote>

</font>

<p>

If the team that bats last is all out having scored fewer runs than their opponents, the team is said to have "lost by n runs" (where n is the difference between the number of runs scored by the teams). If the team that bats last scores enough runs to win, it is said to have "won by n wickets", where n is the number of wickets left to fall. For instance a team that passes its opponents' score having only lost six wickets would have won "by four wickets".

</p>

<font size="+1" color="white" face="Comic Sans MS, cursive"> Information taken from</font><font color="#66FFFF"> <u>www.wikipedia.org</u></font>

</body>

Cascading Style Sheets

Using CSS
CSS information can be specified in three different places:

Within the specific tags in the document body or combined with named <div> or <span> containers in the document body (Inline)
At the top of the document within a <style> block/tag (Internal)
In one or more separate files shared across many Web pages (External)

These may all be combined with a well-defined inheritance (which is why they are called cascading style sheets).

Inline CSS
An inline style should be used when a unique style is to be applied to a single occurrence of an element. To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. Styles can be specified with the style attribute within almost any HTML markup tag. For example, you can have a bold tag that also changes the color of the text within by using the following HTML:

Code:

<html>

<head>

<title>Learn CSS</title>

</head>

<body>

<b style="color: Blue"> this is bold and blue </b> and this isn’t.

</body>

</html>

More commonly, styles are used within one of two otherwise empty tags called <div> or <span>. These two tags were introduced into HTML specifically for use with Cascading Style Sheets, so if you see them on a Web page, they’re often used like this:

Code:

<span style="color: green">this is green</span> and this isn’t.

The difference between the two is that <div> is used as a block container "it’s basically identical to <p> and </p>" whereas <span> is used within a block "it’s more analogous to <b> and </b>".

Code:

<html>

<head>

<title>Learn CSS</title>

</head>

<body><p>

This is a typical paragraph of text that contains some words, perhaps a sentence or two, but that’s about all.

</p>

<div>

By contrast, this is a <span style="color: blue">vibrant</span>,

<span style="color: red">colorful</span>

<span style="font-family: monospace">div</span> block that has lots of room for growth!

</div>

</body>

</html>

Internal CSS
An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section with the <style> tag. This is accomplished by moving the style specifications into a <style> block. At the top of a page, the <style> tag might look like this:

Code:

<style type="text/css">

b { color: blue }

</style>

This style specifies that throughout the subsequent document body, all occurrences of the bold tag <b> should also have a type color change to blue. More interestingly, you can specify style classes, which are akin to sub tags. Take example of classes in CSS

Code:

<html>

<head>

<title>Moving Styles To the Top</title>

<style type="text/css">

.manuf {color: blue; font-weight: bold; font-style: italic}

</style>

</head><body>

While a variety of companies manufacture digital cameras, notably including

<span class="manuf">Kodak</span> and

<span class="manuf">Olympus</span> 

there are only two companies that offer true digital single lens reflex (SLR) cameras:

<span class="manuf">Nikon</span> and

<span class="manuf">Canon</span>.

</body>

</html>

External CSS
The third way that you can work with CSS is to create a completely separate document on your Web server that includes all the styles you want to use. You can then reference that document within all the Web pages on your site. To reference a separate style sheet, use the link tag:

Code:

<link type="text/css" rel="stylesheet" href="mystyles.css" />

This refers to a separate style sheet called mystyles.css, stored in the same directory on the same server as the page that contains this link reference. You can edit separate CSS files in Notepad or Text Edit, and they should be saved tip with a .css filename suffix. For example, styles.css is a common name, and you would include it in your HTML file with this <link> tag.

Components of CSS
Whether it appears in a style attribute of an HTML tag, within a style block on the top of a Web page, or in a separate document, all CSS specifications have the same general format:

selector colon value semicolon
color: blue;

The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon, and surrounded by curly braces. Within a style block or separate style sheet, tags have style attributes defined within a curly brace pair, as in the following example.

Code:

b { color: green; }

This code adds a shift to green text for any bold passages in the applicable text.
You can group selectors. Separate each selector with a comma. In the example below we have grouped all the header elements. All header elements will be displayed in green text color:

Code:

h1, h2, h3, h4, h5, h6

{

color: green;

}

Classes and IDs
Within the style block, these two identifiers are differentiated by their first character: a dot for a class identifier, and a hash mark (#) for an id tag:

Code:

<html>

<head>

<style type="text/css">

.para {font-size: 110%}

#emphasize {font-weight: bold}

</style>

</head>

<body>

<div class="para">

This is a standard paragraph on this page, with

<span id="emphasize">nothing</span> out of the ordinary.</div>

</body>

</html>

In the above example we didn’t mentioned the tag name before “.” Or “#”, it means that this class or id can be used with any html element but if we specify the tag before “.” Or “#” like

Code:

<style type="text/css">

p.right {text-align: right}

p.center {text-align: center}

</style>

Then they can be used with only specified element.
The primary difference between these two is that each unique id tag value is supposed to occur once and only once within a given document, whereas classes are reused as needed. In practice, almost every CSS site I’ve seen makes heavy use of classes and completely ignores id tags.

Sub Classes
Another tremendously powerful trick you can use with CSS is to specify subclasses and to constrain formatting styles to a subset of your tags.

Code:

<html><head><title>CSS</title>

<style type="text/css">

.special b {color: green; font-size: 125 %;}

b i { background-color: yellow; }

b,i { font-weight: bold; color: blue; }

</style></head>

<body>

<div class="special">

This is a special block and <b>bold</b> words should appear differently than they do in regular text. </div>

<p>

And this, by contrast, is regular <b>bold</b> text, with a little <i>italics</i> tossed in for luck and an example of <b><i>italics within bold</i></b>.

</p>

</body></html>

Look closely to see what’s specified here. Two lines contain a pair of selectors separated by a space; on the third line, the selectors are separated by a comma. On the two lines in which a space separates the selectors, the second selector is affected only when it falls within the first selector. In other words, bold text is green only when the <b> is used within a class=”special” block, and the background color is yellow only when the <i> is used within a <b> tag. In the last of the three CSS lines, we employ a shorthand to specify that both bold tags and italic tags should be in bold with blue text. It’s the same as if we had used b {...} and i {....}.

Adding comments within CSS
You can add comments to your CSS in two different ways. For a single line comment, use two slashes; anything after them is ignored through the end of the line, as in the following example:

Code:

b { font-weight: normal; } // disabled bold for this page

If you need a multiline comment, wrap it in /* and */ pairs, as shown in the following example:

Code:

<style type="text/css">

b { font-weight: normal; }

/* the head of layout suggested that we disable all bold text as an experiment, so we’ve done so. – Davey, Oct 11 */

</style>

Compatible style blocks
If you’re big on backwards compatibility, consider wrapping all your style blocks as I have in the following example:

Code:

<style type="text/css">

<!—

b { font-weight: normal; }

// —>

</style>

If the Web browser understands style sheets, it ignores the comment characters, and if the browser doesn’t understand CSS, it assumes that all the stuff within the <! — And —> span is a comment and hides it from the final rendered page. In fact, even without CSS, you can always add comments to your HTML pages by surrounding them with <! — And —>. They show up in the source code but aren’t displayed in the actual Web page you see in a browser.

Text Formatting with CSS
Bold text, the straightest forward of the CSS visual text formatting styles is bold, which is specified as “font-weight”. As with all CSS tags, you can define a variety of possible values:

lighter
normal
bold
bolder

You can specify the weight of the font in increments of 100, in the range of 100–900, with 100 being the lightest and 900 being the heaviest. Normal text is weight 500, and normal bold is 700. Specifying “font weight: 900” is the equivalent of extra-bold or, in the parlance of CSS, bolder. Like

Code:

<style>

b {font-weight: bold; }

</style>

Code:

<style>

b {font-weight: 500;}

</style>

Italics are easier to work with than bold. You simply specify a “font-style” and pick from one of the following values:

normal
italics
oblique

Code:

<style>

i {font-style: italics; }

</style>

Changing Font Family, Size, and Color
Typefaces and monospace At its most basic, the “font-family” style enables you to specify one of a variety of different typeface families:

serif
sans-serif
monospace
cursive
fantasy

Code:

<style>

p {font-family: serif }

</style>

Changing font size As I’ve shown you in some of the earlier examples in this chapter, you use the CSS font-size style to change the size of text. This style accepts specific sizes in a variety of units or the following specific named values:

xx-small
x-small
small
medium
large
x-large
xx-large

And two relative sizes:

smaller
larger

Code:

<style>

p {font-size: medium }

</style>

You can also specify the size of font with respect to a unit, available units for font size are

n % (Percentage)
n in (Inch)
n cm (Centimeter)
n mm (millimeter)
n pt (point)
n pc (Pica)
n em (Em-width)
n px (Pixel)

Where n is here any numeric value

Code:

<style>

p {font-size:110% }

</style>

Above example means that it’s 10% larger than the text would otherwise be displayed. If the 110% appears within an h1 passage, for example, it produces a larger end result than if it’s in a p or div block.

Color of text is changed by simple “color” selector there 16 colors available by name is CS

aqua
black
blue
fuchsia
gray
green
lime
maroon
navy
olive
purple
red
silver
teal
white
yellow

Code:

<style>

p {color: purple }

</style>

To describe a color in more detail

#RGB
#RRGGBB
rgb (r %, g %, b %)
rgb(rr, gg, bb)

Where R, G, B value is in hexadecimal from (0 to F) and r, g, b value is numeric from (0 to 100) and rr, gg, bb value is also numeric from (0 to 255)

Lists and Special Characters

Definition Lists
One of the most common elements of multipage documents is a set of definitions, references, or cross-indexes. Glossaries are classic examples; words are listed alphabetically, followed by prose definitions. In HTML, the entire glossary section is contained by a definition list, which is contained within a pair of definition list tags: <dl> and </dl>. Within the pair of listings, a definition has two parts:

Definition term (<dt> and </dt>)
Definition description (<dd> and </dd>)

Code:

<html>

<head>

<title>Miscellaneous Genetic Terms</title>

<body>

<h1>A Quick Glossary of Genetic Terms</h1>

<i>Adapted from Dawkins, The Extended Phenotype</i>

<dl>

<dt>algometry</dt>

<dd>A disproportionate relationship between size of a body part and size of the whole body.</dd>

<dt>anaphase</dt>

<dd>Phase of the cell division during which the paired chromosomes move apart.</dd>

<dt>antigens</dt>

<dd>Foreign bodies, usually protein molecules, which provoke the formation of antibodies.</dd>

<dt>colon</dt>

<dd>A triplet of units (nucleotides) in the genetic code, specifying the synthesis of a single unit (amino acid) in a protein chain.</dd>

<dt>genome</dt>

<dd>The entire collection of genes possessed by one organism.</dd>

</dl>

</body>

</html>

Unordered (Bulleted) Lists
Definition lists are handy, but the type of list that you see much more often on the World Wide Web is a bulleted list, also called an unordered list. Unordered lists start with <ul> and close with </ul>, and <li> denotes each list item.

Code:

Common Herbal remedies include:

<ul>

<li>Blood Pressure -- Balm, Black Haw, <i>Garlic</i>, Hawthorn. </li>

<li>Bronchitis -- Angelica, <i>Aniseed, Caraway</i>, Grindelia. </li>

<li>Burns -- Aloe, Chickweed, <i>Elder</i>. </li> </ul>

Unordered list have attribute of “type” which specifies the style of bullet.
You can use following different types of bullets

<ul type="square">, filled block of square
<ul type="disc">, filled circle
<ul type="circle">, hollow circle

Ordered (Numbered) Lists
The ordered list is <ol>. The list ends with the close tag </ol>. Each item in the list has a list item tag <li>.
HoneX Provides Three Hosting PLANS

Code:

<ol>

<li> PLAN A </li>

<li> PLAN B </li>

<li> PLAN C </li>

</ol>

Ordered lists <ol> have 2 attributes: “type” , which specifies the numeric counter style to use; and “start”, which begins the count at the value you specify, rather than at one.
You can use any of five different types of counting values:

<ol type= "A">, is uppercase alphabetic (A, B, C, D).
<ol type= "a">, is lowercase alphabetic (a, b, c, d).
<ol type= "I">, is uppercase Roman numerals (I, II, III, IV).
<ol type= "i">, is lowercase Roman numerals (i, ii, iii, iv).
<ol type= "1">, (the default) is Arabic numerals (1, 2, 3, 4)

CSS control over lists

Code:

ul { list-style-type: disc; }

The entire ranges of possible values for list-style-type are as follows:

disc
circle
square

Much more exciting, however, is that with CSS you can define your own bullet!
Here’s the solution:

Code:

ul { list-style-image: url(diamond.gif)

Counting the CSS way
"list-style-type" values for CSS

decimal (The default: 1, 2, 3 . . .)
decimal-leading-zero (The same as decimal, but with leading zeroes: 01, 02 . . .)
lower-roman (Lowercase roman numerals: i, ii, iii, iv, v, vi . . .)
upper-roman (Uppercase roman numerals: I, II, III, IV, V, VI . . .)
lower-greek (Counts using Greek letters: alpha, beta, gamma, delta . . .)
lower-alpha (Lowercase alphabetic: a, b, c, d, e . . .)
lower-latin( Lowercase alphabetic – identical to lower-alpha)
upper-alpha (Uppercase alphabetic: A, B, C, D, E . . .)
upper-latin (Uppercase alphabetic—identical to upper-alpha)
hebrew (Counts using Hebrew numbering)
armenian (Counts using Armenian numbering)
georgian (Counts using Georgian numbering )
cjk-ideographic (Counts using ideographic numbers )
hiragana (Counts using Japanese hiragana system )
katakana (Counts using Japanese katakana system )
hiragana-iroha (Counts using Japanese hiragana-iroha system )
katakana-iroha (Counts using Japanese katakana-iroha system)

Character Entities in HTML
Unlike the tags you’ve learned about so far, special character entities aren’t neatly tucked into paired angle brackets (< >); instead, they always begin with an ampersand (&) and end with a semicolon (;).

& (&)
< (<)
> (>)
© (©)
á (á)
à (à)
â (â)
ä (ä)
å (å)
ç (ç)
ñ (ñ)
ø (ø)
ß (β)

To create an uppercase version of one of the characters, make the first letter of the formatting tag uppercase. Ø , for example, produces an uppercase O with a slash through it, as in the word CØPENHAGEN (which you type as CØ PENHAGEN).

Non breaking Spaces
A special character entity that people frequently use in Web page design is one that isn’t even a character and doesn’t even show up on the screen: the non breaking space. Included as   it lets you force multiple spaces between items and ensures that items on either side of the space are always adjacent regardless of how the window may be sized.

Code:

words before &nbsp; &nbsp; important &nbsp; &nbsp; words after

Comments within HTML Code
Fortunately, HTML supports a specific (if peculiar) notational format for comments within your documents. Any text surrounded by the elements <!— and —> is considered to be a comment and is ignored by Web browsers.

Adding Pointers and Links

Pointing to Other Web Pages (External Link Other Page)
The basic HTML formatting tag for external references is the anchor tag, <a>, and its ending partner is </a>. This tag must contain attributes. Without any attributes, the <a> tag has no meaning and doesn’t affect the formatting of information. In a Web browser, you need to specify the hypertext reference attribute: href="value". The value can be empty if you don’t know the actual information, but you must specify the attribute to make the link appear active to the viewer.

Code:

<html>

<head>

<title> URL Point </title>

</head>

<body>

The web site of HoneX TecH <a href="http://www.honextech.com"> Click Here </a>

</body>

</html>

By default the color of link is blue. You can change color by using Inline CSS method like following

Code:

The web site of HoneX TecH <a style="color: blue", href="http://www.honextech.com"> Click Here </a>

Or to change the color of all links in page/segment mention in the body use "link" attribute and for visited link use "vlink" attribute and "alink" is used when mouse button is down

Code:

<body link="#0000AA", vlink="#0000FF">

The web site of HoneX TecH <a href="http://www.honextech.com"> Click Here </a>

</body>

The mailto: link used for the Department of Commerce. You create an e-mail hypertext reference simply by "mailto: " to a valid e-mail address. Sometimes, a friendly mailto: link is presented like this:

Code:

Please <a href="mailto:sales@honextech.com">send orders</a> and details

Another attribute “target” which is used in <a> and </a> tags is used to specify the target to open the linked document. It has 5 values

_blank (Open the linked document in a new window)
_self (Open the linked document in the same frame as it was clicked (this is default))
_parent (Open the linked document in the parent frameset)
_top (Open the linked document in the full body of the window)
framename (Open the linked document in a named frame)

Code:

Please <a href="mailto:sales@honextech.com"  target="_blank">send orders</a>

Web document jumps (Internal Link Current Page)
The targets of internal Web document jumps are known as named anchors. The HTML tag for an anchor point is an alternate attribute of the <a> tag: <a name="value">. The value can be any sequence of characters, numbers, or simple punctuation. (Dash, underscore, and dot are safe. With others it might or might not work). You have to select a name for anchor in order to create a link to an anchor. And in order to link it internally you will use “href” attribute with value as anchor name with preceding # sign. Like <a href="#value”>

Code:

<a name="guidelines"></a>

<div style="font-size: 80%; text-align: center ;">

<a href="#rule1">rule 1</a> |

<a href="#rule2">rule 2</a> |

<a href="#rule3">rule 3</a> |

</div>

<h2>WEB DESIGN GUIDELINES</h2>

<dl>

<dt><a name="rule1">Rule #1:</a></dt>

<dd>

Understand the intended users and uses of your Web site; then focus the design and layout around their needs and interests. </dd>

<dt><a name="rule2">Rule #2:</a></dt>

<dd>

Be sparing with graphical elements. </dd>

<dt><a name="rule3">Rule #3:</a></dt>

<dd>

<a>Pages should load within no more than thirty seconds, including all graphical elements. </a>

Web document jumps (Internal Link Other Page)
You can jump to any named anchor tag on external page by adding name of anchor tag with # sign after the link of external page like

Code:

<a href="http://www.honextech.com #webhosts"> HoneX TecH Hosts </a>

Adding Graphics

Image Formats
3 types of formats are supported in HTML

GIF: CompuServe’s Graphics Interchange Format
JPEG: Joint Photographic Expert Group format
PNG: Progressive Network Graphics format

Including Images in Web Pages
Including images in a Web document is easy; you use the <img> (image) format tag. Attribute “src” will be used to define the address or image

Code:

<img src="banner.gif" />

A popular use of graphics is a button that you can create by wrapping the <img> tag with an <a> anchor. Like the following

Code:

<a href="example.html"><img src="banner.gif" /></a>

Image Alignment and border
For alignment the “align” attribute is used. The three standard alignments are

align="top"
align="middle"
align="bottom"
align="left"
align="right"

In order to add border to your image sides use the “border” attribute with value in numeric as border thickness like following

Code:

<img src="banner.gif"  align="bottom"  border="3" />

Width and height of image
The width and height of image can be change by “width” and “height” attribute.

Code:

<img src="banner.gif"  width="100"  height="300" />

Margin from image
Two more useful image alignment and presentation attributes are “vspace” and “hspace”, which control the vertical and horizontal space around each graphic, respectively. Like

Code:

<img src="banner.gif"  vspace="10"  hspace="5" />

If you experiment, you might find that when you’re wrapping text around a large graphic, it’s difficult to move any material below the graphic. The <br /> and <p> tags simply move to the next line in the wrapped area. That effect is not always what you want. To break the line and move back to the margin, past the graphics, you add a special attribute to the useful <br /> tag: "clear". For example, use <br clear="left" /> to move down as needed to get to the left margin, <br clear="right" /> to move down to a clear right margin, or <br clear="all" /> to move down until both margins are clear of the image. Most commonly, you see <br clear="all" />

Background Colors and Graphics
In body tag you can use “bgcolor” attribute to select a color for background or “background” attribute to select image as background like

Code:

<body background="back.jpg">

For CSS we will use background-color like

Code:

<style type="text/css">

Body {background-color: blue ;}

</style>

Or background-image for image file as background like

Code:

body { background-image: url(diamond.gif) }

In addition, you can specify the background image’s position on the page with background-position. (One value equals the horizontal and vertical origin point of the image; two values equal the horizontal and then the vertical point of the image.) You can also specify whether the background image should repeat (old-timers call this tile) with background-repeat, which has four possible values:

repeat
repeat-x
repeat-y
no-repeat

Alternative text for image
Alternative text is inserted for image so that when mouse is hovered over image for 2 seconds it displays the alternative text as short label tip. It is inserted with help of “alt” attribute in <img> tag.

Tables and Frames

Tables in HTML
In HTML, Table starts with <table> and with </table> tags. Data cell of table is denoted by <td> and </td> tags. These cells are combined into rows with <tr> and </tr> tags.

Code:

<h1 >Pakistan Provinces</h1>

<table border="1">

<tr>

<td>Punjab</td>

<td>Sindh</td>

<td>Balochistan</td>

<td>N.W.F.P</td>

</tr>

</table>

In above code “border” attribute is used in <table> tag. It is used to define the border thickness for the table. The code will display all provinces in single row because <tr> and </tr> tags are used only once in the above code. If we change code and insert <tr> and </tr> tags after every data cell tags <td> and </td> then each province will be displayed in separate row.

Code:

<h1 >Pakistan Provinces</h1>

<table border="1" width="25">

<tr>

<td>Punjab</td>

</tr><tr>

<td>Sindh</td>

</tr><tr>

<td>Balochistan</td>

</tr><tr>

<td>N.W.F.P</td>

</tr>

</table>

Size, Spacing and Padding of Table
The “width” attribute defines the desired width in the same way “height” attribute defines the desired height, if used in <table> then it means it’s for whole table but when used in data cell <td> tag it defines only the individual cell width and height. The other two attributes initially seem similar, but they serve important but different functions in the layout of the table. The “cellpadding” attribute indicates the amount of space—in pixels—between the inner edge of the table cell border and the material within, whereas the “cellspacing” attribute refers to the width of the grid lines between the data cells.

Code:

<h1 >For Sale</h1>

<table border="1" cellspacing="10" cellpadding="15">

<tr><td>Books</td>

</tr><tr>

<td>Bags</td>

</table>

Alignment and Spanning of Table
To provide bold heading for columns <th> and </th> tags are used. Further you can also specify the horizontal alignment of data cells within their space in <td> and </td> tags for specific data cell or also in <tr> and </tr> tags for whole row by using the “align” attribute with the possible values of “left”, “right” and “centre”. You can use “valign” to specify the vertical alignment with the possible values of “top”, “middle”, “bottom”, and “baseline”. Rows and columns can span more than one table unit if needed, so you can add a nice header over both columns of the previous table by using attribute of “colspan” or you can occupy more space than one row by “rowspan” in a new data cell tags of <td> and

Code:

</td> .

<table border="5" width="50%">

<tr>

<td colspan="2" align="center"> TV PROGRAMS </td> 

</tr><tr>

<th>Series</th><th>Airs on</th>

</tr><tr align="center">

<td>HEROES</td><td>Monday</td>

</tr><tr align="left">

<td >PRISON BREAK</td><td align="right">Friday</td>

</tr>

</table>

Advance Tables in HTML
You can easily change the background color of the each specific cell in by using “bgcolor” attribute in <td> and </td> tags. Like the

Code:

<td bgcolor="blue">all blue</td>

CSS can also be used in data cells where each separate class can be defined for each data cell in order to work on more advance table concepts. With attributes “bordercolor”, “bordercolorlight” and “bordercolordark” table can be more attractive and fancy like

Code:

<table bordercolorlight ="yellow" bordercolordark="red"

border="10" cellspacing="0" cellpadding="8" width="50%">

<tr>

<td align="center">

Hello World

</td>

</tr></table>

Two attributes offer finer granularity of control over the borders around the table and between the individual data cells. One is “frame” and its values are

void (Removes all outside table borders)
above (Displays a border on the top side of the table frame)
below (Displays a border on the bottom side of the table frame)
hsides (Displays a border on the top and bottom sides of the table frame)
lhs (Displays a border on the left-hand side of the table frame)
rhs (Displays a border on the right-hand side of the table frame)
vsides (Displays a border on the left and right sides of the table frame)
box (Displays a border on all sides of the table frame)
border (Displays a border on all sides of the table frame)

The other is “rules”, its values are

none (Removes all interior table borders)
groups (Displays horizontal borders between all table groups. Groups are specified by) thead, tbody, tfoot, and colgroup elements
rows (Displays horizontal borders between all table rows)
cols (Displays vertical borders between all table columns)
all (Displays a border on all rows and columns)

Frames
Individual frames are specified with the <frame> tag, which is itself wrapped in a <frameset> tag, specifies that indicates the amount of space to allocate to each pane of information. The <frameset> tag defines how to divide the window into frames. Each frameset defines a set of rows or columns. The values of the rows/columns indicate the amount of screen area each row/column will occupy. You can use three different values for these attributes:

A simple number to specify the desired size in screen pixels
An asterisk to specify the remaining space on the page
A percentage of page width by using the n% notation

Code:

<html>

<title>5 Frames</title>

<frameset cols="80%,*">

<frameset rows="30%,70%">

<frame src=" top.html" />

<frame src="bottom.html" />

</frameset>

<frameset rows="33%,33%,*">

<frame src="up.html" />

<frame src="mid.html" />

<frame src="down.html" />

</frameset>

</frameset>

</html>

Naming a Frame
The <frameset> is not used inside <body> tag; it is defined in <head> and </head> tags. Another important is the “name” attribute. Each specific frame can be given a unique name that can then be used as a way to control which window is affected by specific actions. Like

Code:

<html>

<frameset cols="30%,*">

<frame src="sidebar.html" />

<frame src="home.html" name="mypage" />

</frameset>

</html>

Now the second frameset with the page “home.html” will be named as “mypage” in the above example This naming convention allows “target” attribute used in <a> and </a> tags to specify the display of link in the desired frame. Like in the above code the if “sidebar.html” links will be displayed in “home.html” location which is in other words the “mypage” frame then code will be like

Code:

<html>

<body>

<h2>Menu</h2>

<a href="Services.html" target="mypage">Services</a>

<br />

<a href="Contact.html" target="mypage">Contact</a>

</body>

</html>

Border, Margin and Resizing of Frame
The <frame> tag itself also has other attributes. The “frameborder” attribute specifies border of frame in pixels. And “scrolling” attributes enables you to force or prohibit a scroll bar, even if the pane is too small for the information within it. Possible values are “yes”, “no”, and “auto”. The “marginheight” and “marginwidth” attributes are used to define margins. By default, visitors can drag around the frame borders to resize elements of the page design. If you’d rather that didn’t occur, add the “noresize” attribute and written as noresize="noresize". Like

Code:

<html>

<frameset cols="30%,*">

<frame src="sidebar.html”  frameborder="2”  scrolling="yes"  noresize="noresize" />

<frame src="home.html" name="mypage" marginheight="30"  marginwidth="30"/>

</frameset>

</html>

Some old browsers don’t support frames so <noframes> tags can display them a message if there doesn’t support frames in your webpage. If the browser understands frames, it ignores what’s in that section; if the browser doesn’t understand frames, the material in the noframes area is all that it’s going to display. Like

Code:

<html>

<frameset cols="30%,*">

<frame src="sidebar.html"  frameborder="2"  scrolling="yes"  noresize="noresize" />

<frame src="home.html" name="mypage" />

</frameset>

</html>

<noframes>

<body >

Sorry, but our site is designed for a frames supported browsers. To visit us you’ll need to upgrade your Web Browser.

</body>

</noframes>

</html>

Inline Frames
An inline frame is specified with the <iframe> tag in a manner quite similar to how you specify the frame tag.

Code:

<iframe src="short.hml"  height="40%"  width="60%"></iframe>

ammar26

ammar26

ammar26

ammar26

ammar26

ammar26

ammar26