Copyright @ Genetic Computer School 2008 2-1
DHTML AND JAVASCRIPT
LESSON 2
HTML TAGSG HE F
Copyright @ Genetic Computer School 2008 2-2
DHTML AND JAVASCRIPT
HTML Tag
An HTML tag specifies the formatting and presentation of information on a Web site.
Copyright @ Genetic Computer School 2008 2-3
DHTML AND JAVASCRIPT
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>
Copyright @ Genetic Computer School 2008 2-4
DHTML AND JAVASCRIPT
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
Copyright @ Genetic Computer School 2008 2-5
DHTML AND JAVASCRIPT
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
Copyright @ Genetic Computer School 2008 2-6
DHTML AND JAVASCRIPT
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
Copyright @ Genetic Computer School 2008 2-7
DHTML AND JAVASCRIPT
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:
Copyright @ Genetic Computer School 2008 2-8
DHTML AND JAVASCRIPT
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
Copyright @ Genetic Computer School 2008 2-9
DHTML AND JAVASCRIPT
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>
Copyright @ Genetic Computer School 2008 2-10
DHTML AND JAVASCRIPT
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
Copyright @ Genetic Computer School 2008 2-11
DHTML AND JAVASCRIPT
Adjusting Text Size
<html>
<head>
<title>Adjust Font Size</title>
</head>
<body>
<font size=“10”>M</font>athematics is interesting.
</body>
</html>
AdjustFontSize.html
Copyright @ Genetic Computer School 2008 2-12
DHTML AND JAVASCRIPT
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.
Copyright @ Genetic Computer School 2008 2-13
DHTML AND JAVASCRIPT
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>
Copyright @ Genetic Computer School 2008 2-14
DHTML AND JAVASCRIPT
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
Copyright @ Genetic Computer School 2008 2-15
DHTML AND JAVASCRIPT
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
Copyright @ Genetic Computer School 2008 2-16
DHTML AND JAVASCRIPT
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
Copyright @ Genetic Computer School 2008 2-17
DHTML AND JAVASCRIPT
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.
Copyright @ Genetic Computer School 2008 2-18
DHTML AND JAVASCRIPT
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.
Copyright @ Genetic Computer School 2008 2-19
DHTML AND JAVASCRIPT
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.
Copyright @ Genetic Computer School 2008 2-20
DHTML AND JAVASCRIPT
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
Copyright @ Genetic Computer School 2008 2-21
DHTML AND JAVASCRIPT
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">
Copyright @ Genetic Computer School 2008 2-22
DHTML AND JAVASCRIPT
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.
Copyright @ Genetic Computer School 2008 2-23
DHTML AND JAVASCRIPT
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>
Copyright @ Genetic Computer School 2008 2-24
DHTML AND JAVASCRIPT
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.
Copyright @ Genetic Computer School 2008 2-25
DHTML AND JAVASCRIPT
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.
Copyright @ Genetic Computer School 2008 2-26
DHTML AND JAVASCRIPT
NOTICE
Loading images take time.
Use images carefully.
Copyright @ Genetic Computer School 2008 2-27
DHTML AND JAVASCRIPT
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.
Copyright @ Genetic Computer School 2008 2-28
DHTML AND JAVASCRIPT
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”>
Copyright @ Genetic Computer School 2008 2-29
DHTML AND JAVASCRIPT
Lists
Numbered Lists
Unnumbered Lists
Copyright @ Genetic Computer School 2008 2-30
DHTML AND JAVASCRIPT
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>
Copyright @ Genetic Computer School 2008 2-31
DHTML AND JAVASCRIPT
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
Copyright @ Genetic Computer School 2008 2-32
DHTML AND JAVASCRIPT
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>
Copyright @ Genetic Computer School 2008 2-33
DHTML AND JAVASCRIPT
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.
Top Related