DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 2-1 LESSON 2 HTML TAGS G H E F.

Copyright @ Genetic Computer School 2008 2-1

DHTML AND JAVASCRIPT

LESSON 2

HTML TAGSG HE F



HTML Tag

An HTML tag specifies the formatting and presentation of information on a Web site.



Basic Text Formatting Tags

Bold <b>Bold text</b>

Italic <i>Italic text</i>

Underline <u>Underline text</u>

Strong<strong>Compare this with bold.</strong>

Emphasize <em>Compare this with italic.</em>



Horizontal Rules

are used to separate sections of a Web page.

has no closing tag in HTML

has no text associated with it

<hr> or <hr/>

using its attributes, you can set the size, width and alignment



Heading Tags bold information and adjust its size

according to the number

sizes can be from 1 to 6, with 1 being the largest and 6 being the smallest

remember to end each heading tag



Heading Tags <html>

<head><title>Heading Tags</title>

</head><body>

<h1>h1 Style: Burma</h1><h2>h2 Style: Burma</h2><h3>h3 Style: Burma</h3><h4>h4 Style: Burma</h4>This is normal.<h5>h5 Style: Burma</h5><h6>h6 Style: Burma</h6>

</body></html>

HeadingTags.html



Building A Website

What content you want on your Web site

How you want it formatted

Base on Outcomes of Analysing End Uers’s Expectations,

Need To Determine:



Simply Start Writing Your HTML Document

Type in your content, along with the necessary structure tags

Save your HTML document

Review it (content to be correct)

Apply the necessary formatting tags

Review periodically your Web site



Adjusting Text

To adjust the colour of your text, use the <font color> tag

format:

<font color=“color name”> Text</font>

Colour And Size

To adjust the size of your text, use the <font color> tag

format:

<font size=“font size”> Text</font>



Adjusting Text Colour

<html>

<head>

<title>Adjust Font Color</title>

</head>

<body>

I like the colour <font color=“blue”> blue</font>.

</body>

</html>

AdjustFontColor.html



Adjusting Text Size

<html>

<head>

<title>Adjust Font Size</title>

</head>

<body>

<font size=“10”>M</font>athematics is interesting.

</body>

</html>

AdjustFontSize.html



The Background Colour Use the <body bgcolor> tag

Format:

<body bgcolor=“colour name”>

You should carefully consider why you need to change the background colour before doing so.



The Background

Colour<html>

<head><title>Background

Colour</title></head><body bgcolor="red">

<h1>h1 Style: Burma</h1><h2>h2 Style: Burma</h2><h3>h3 Style: Burma</h3><h4>h4 Style: Burma</h4>This is normal.<h5>h5 Style: Burma</h5><h6>h6 Style: Burma</h6>

</body></html>



Adding Links To A Web Site

There are three types of commonly used links:

Links to other Web sites or pages

Links to downloadable files

Links to e-mail



Links To Other Web

Sites Or Pages

Format:

<a href=“address or file name”>text to appear on screen</a>

Example:

Click <a href="http://www.w3schools.com"> here</a> Online Web Tutorial



Links To Downloadable

Files

Format:

<a href=“address or file name”>text to appear on screen</a>

Example:

<a href=“learnHtml.doc">Download</a> A document to learn HTML



Links To E-MAIL

Format:

<a href=“mailto:your email address”>

text to appear on screen</a>

Example:

<a href=“[email protected]”>

E-mail us</a> with your thoughts and questions.



Cautions In Linking

Make sure that the links are still active.

Links to dead Web sites are bad.

If you place links in your Web site to other Web sites you have created, you will need to store those Web sites in your Web space.

If you provide a link in your Web site for e-mail, be prepared to receive a lot of e-mail.



Inserting Images And Photos

Format:

<img src=“filename.extension”>

Your image or photo file must also be captured and stored in a certain format, usually either jpg or gif.

JPEG images (.JPG): Images with a large number of

colours, have been heavily

compressed so as to be smaller in size,

requiring less time to download.

PNG images: With a smaller file size when

the image has a few solid colours.

allows for interlaced images (which are displayed piece by piece) with 24-bit colours and images for which one of the colours has been set as being transparent..

GIF image: have most of the same

advantages as PNG images, although the GIF format is

limited to 256 colours and the format is not completely open.



SRC Shows the path where the image is located (mandatory)ALT Displays an alternate text if the image isn't displayed.TITLE Displays information when the cursor rolls over the

image.ALIGN Specifies how the image is aligned in relation to the

adjacent text. The possible values are TOP, MIDDLE, and BOTTOM.

WIDTH Specifies the width of the image.HEIGHT Specifies the height of the image.

The Main Attributes

Of The “img” Tag



The “alt” Attribute

Format:

<img src="filename.extension" alt="value">

The alt attribute is used to define an "alternate text or a short description to replace " for an image.

The value of the alt attribute is an author-defined text.

Example:

<img src="animal.jpg" alt="Animal">



The “alt” Attribute

The "alt" attribute tells the reader what he or she is missing on a page if the browser cannot load images.

The browser will then display the alternate text instead of the image.

Should include the "alt" attribute for each image on a page, to improve the display and usefulness of your document for people who have text-only browsers.



SIZING IMAGES Format:

<img src=“filename.extension” height=pixel count width=pixel count>

Pixels are the smallest display elements on a screen.

Size an image according to the number of pixels.

Depend on the size of the viewable screen, you can see the image.

Can provide different values for the height and width parameters that might skew the image.

Example:

<img src=“animal” height=50 width= 50>



Positioning Images 1

align=left

<img src=“animal.jpg" align=left>

The image will be at the left and text will appear immediately after the image.

align=right

<img src=" animal.jpg " align=right>

The image will be at the right and text will appear immediately after the image.

align=center

<center><img src=" animal.jpg “></center>

There is no align=center option.

If you want to center an image, you must surround the image tag with <center> and </center>.

Left align is the default alignment.



Positioning Images 2

align=bottom An image <img src=“animal.jpg"align="bottom" > in the text

align=middle An image <img src="animal.jpg"align="middle" > in the text

align=top An image <img src=“animal.jpg"align=“top" > in the text

Bottom alignment is the default alignment.



NOTICE

Loading images take time.

Use images carefully.



Caution: When adding

imagesImages take a long time to transfer from a Web server to

the person viewing your Web site.

If you have large images or numerous smaller images, your Web site will take a long time to load, and the person viewing your Web site may become impatient and move on to another Web site.



Textured Background Use of an image

The image might not have to be big enough to cover the entire background of your Web site

Replicate the image as many times as it needs to both across and down

To use an image and create a textured background, use the <body background> tag

Format:

<body background=“filename.extension”>



Lists

Numbered Lists

Unnumbered Lists



Numbered Lists/ Ordered Lists

<html><head>

<title>Numbered Lists</title></head><body>

<ol><li>Apple</li><li>Banana</li><li>Coconut</li><li>Durian</li></ol>

</body></html>



The default numbering for numbered lists is Arabic. can Change that as well by adding the type parameter to the

<ol> tag.

Examples

<ol type=a> - lowercase letters

<ol type=A> - uppercase letters

<ol type=i> - lowercase Roman numerals

<ol type=I> - uppercase Roman numerals

Numbered Lists/ Ordered List



Unnumbered List/ Unordered List

<html>

<head>

<title>Numbered Lists</title>

</head>

<body>

<ul>

<li>Apple</li>

<li>Banana</li>

<li>Coconut</li>

<li>Durian</li>

</ul>

</body>

</html>



Paragraph<p>Text ......Text</p>

Adds an extra blank line before and after a paragraph.

Line Break<br> or <br/>

Used when you want to break a line, but do not want to start a new paragraph.

It is an empty tag. It has no end tag.

DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 2-1 LESSON 2 HTML TAGS G H E F.

Documents

Transcript of DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 2-1 LESSON 2 HTML TAGS G H E F.