ATTENDANCE
COMPUTER 10 MS. JANNE
MS. JANNE
HTML
WEB DESIGN:
Rudementary Tags
Character Formatting:
The Bold <B></B> element specifies that the enclosed text should be displayed in boldface.
The Underlined <U></U> element specifies that the enclosed text should be displayed
underlined.
The Italic <I></I> element specifies that the enclosed text should be italicized.
Below are these HTML tags beside samples of their respective browser displays:
Character Formatting:
Paragraphs
In HTML you indicate paragraphs with the <P> and </P> elements
Character Formatting:
Forced Line Breaks
The line break tag <BR> can be used to control how browsers render
text. When an HTML document is viewed the text normally does a word-
wrap at the end of a line.
Character Formatting:
Horizontal Rules
The horizontal rule <HR> tag produces a horizontal line the width of the
browser window. Horizontal rules are useful for separating major sections
of a document. The length of a rule can be varied by using the "WIDTH="
and "SIZE=" attributes.
Character Formatting:
Lists
Unordered Lists:
An unordered list typically is a bulleted list of items. This is probably the most common type
of list on the Web. The <UL> tag opens an unordered list while </UL> closes it. Between
these tags are placed list items with an <LI> tag as follows:
Character Formatting:
Lists
Ordered Lists:
An ordered list is formatted exactly the same as an unordered list, except that
<OL> tags are used instead of <UL>. In an ordered list, sequential numbers are
generated automatically, as shown below:
Character Formatting:
Fonts
The <FONT> tag sets a font's size, typeface and color.
Font Sizes:
In HTML, font sizes range from 1-7, with 1 being the smallest. Font sizes 2 and 3 are the
most commonly used. If a font size is not specified the default setting is 3.
Character Formatting:
Fonts
Font Typefaces:
When HTML was first introduced there was only one font available. A few commonly
supported fonts are:
Character Formatting:
Font Colours:
Using the <FONT> tag, text can be instructed to
display in any colour under the sun. These sixteen
colours are:
Character Formatting:
Font Colours:
Using the <FONT> tag, text can be instructed to
display in any colour under the sun. These sixteen
colours are:
Character Formatting:
Font Colours:
Using the <FONT> tag, text can be instructed to
display in any colour under the sun. These sixteen
colours are:
Character Formatting:
IMG TAG
The <IMG> tag is used to incorporate graphics
(typically icons or pictures) into an HTML document.
"Image Source" and "Image Size" are the minimum
attributes required for displaying an image.
Image Source:
The image source tag <SRC=> tells the browser where the
image is physically stored so that it can retrieve and display it.
It is important to remember that file names are case sensitive
and must be typed correctly.
Character Formatting: <!DOCTYPE html>
<html>
BG BACKGROUND <head>
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
</head>
<body>
<h2>TITLE OF THE PAGE </h2>
<p>By default, the background image will repeat itself if it is smaller than
the element where it is specified, in this case the body element.</p>
</body>
</html>
Character Formatting:
BG BACKGROUND
IF YOU DON’T WANT TO REPEAT YOUR BACKGROUND
Character Formatting:
IMG TAG
Image Size:
Although not absolutely required, it is good practice to include
HEIGHT and WIDTH information within the <IMG> tag.
This speeds up the downloading process by allowing faster-
loading text to load around areas where images will eventually
appear.
Character Formatting:
IMG TAG
Character Formatting:
IMG TAG
Image Attributes
Image Alignment:
Use the LEFT, RIGHT or CENTER attributes within the <IMG> tag to align images relative to
the browser window. See below for examples of how these attributes are used:
Character Formatting:
IMG TAG
Image Alignment with Text:
By default the bottom of an image is aligned with any text that
follows, as shown below:
Character Formatting:
IMG TAG
Vertical placement of text beside images can be altered from the
bottom default setting by using the attributes ALIGN=TOP or
ALIGN=CENTER, as shown below:
Character Formatting:
HYPERLINKs
To add a link, the <A HREF=> and </A> tags are used.
Text Hyperlinks
To link with text simply bracket the desired word or phrase with the <A HREF=>
and </A> tags. Typically, though not always, hyperlinked text is displayed in
browsers with an underline, as illustrated below:
Character Formatting:
HYPERLINKS
To add a link, the <A HREF=> and </A> tags are used.
IMAGE
Character Formatting:
HYPERLINKS
To add a link, the <A HREF=> and </A> tags are used.
IMAGE
Performance Task
Include the basic HTML tags with an
• Ordered List
• Font Size
• Font Style
• Image
• Hyperlinks
• Background Image
• underline, italic, and bold.
