wk 1 ses 1-3 slides 1-42 html - tags and attributes
DESCRIPTION
WebprogrammingTRANSCRIPT
* Property of STI
Page 1 of 42HTML - Tags and Attributes
H0073
Hypertext Markup Language
HTML stands for HyperText Markup Language
Hyper refers to creating linked and
nonlinear structures of information.
Text refers to the words on the computer
screen that we are marking up.
Markup is the process of preparing the text
to define how it displays when viewed as
pages on the WWW by marking them with
formatting directions conveyed by notations
called ―tags.‖
Language is a system of signs used for
communication—written and oral.
* Property of STI
Page 2 of 42HTML - Tags and Attributes
H0073
Hypertext Markup Language
HTML is a document-layout and hyperlink-
specification language.
HTML is a set of logical codes (markup) in
parentheses that constitute the appearance of a
web document and the information it contains.
Example:
<B>This text would appear bold in the
browser</B>
HTML is platform independent.
The basic syntax and semantics of HTML are
defined in the HTML standard.
* Property of STI
Page 3 of 42HTML - Tags and Attributes
H0073
Text Editor
Notepad from Microsoft is the common HTML
Text Editor.
Microsoft Word and WordPerfect can also be
used to create HTML document.
HTML documents has a file extension .html
or .htm
* Property of STI
Page 4 of 42HTML - Tags and Attributes
H0073
Elements of a Web Page
Title : A Web page’s title identifies the subject
or purpose of the page.
Body : The body of the Web page contains
information that displays in the browser window.
Normal text : It is the text that makes up the
main content of a Web page.
Headings : These are used to set off different
paragraphs of text or different sections of a
page.
Image : It is another important element of a
Web page such as an icon, bullet, line, photo,
illustration or other picture.
Hyperlink : It serve as a primary way to
navigate between pages.
* Property of STI
Page 5 of 42HTML - Tags and Attributes
H0073
Web Page Document Structure
The easiest way to create and develop a
document is to type the required elements in as
a starting point.
In Notepad you would start with:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Although, HTML is not case sensitive, it is a
standard practice to always type HTML tags in
uppercase letters.
* Property of STI
Page 6 of 42HTML - Tags and Attributes
H0073
The <HTML> tag
The <HTML> and </HTML> tags serve to delimit
the beginning and ending of an HTML
document.
<HTML>
Function:
Delimits a complete HTML document
Attributes:
VERSION
End tag:
</HTML>; may be omitted
When the <HTML> tag appears without the
version attribute, the HTML document server
and browser assume the version of HTML used
in this document is supplied to the browser by
the server.
* Property of STI
Page 7 of 42HTML - Tags and Attributes
H0073
The <HEAD> tag
The <HEAD> tag specifies that the lines within
the beginning and ending points of the tag are
the prologue to the rest of the file.
The <HEAD> tag has no attributes and serves
only to encapsulate the other header tags.
<HEAD>
Function:
Defines the document header
Attributes:
None
End tag:
</HEAD>; rarely omitted
* Property of STI
Page 8 of 42HTML - Tags and Attributes
H0073
The <TITLE> tag
The <TITLE> tag defines the title for your
document.
<TITLE>
Function:
Defines the document title
Attributes:
None
End tag:
</TITLE>; never omitted
Example:
<HTML>
<HEAD>
<TITLE>Web Development</TITLE>
</HEAD>
</HTML>
* Property of STI
Page 9 of 42HTML - Tags and Attributes
H0073
The <BODY> tag
The document body is where you put the
contents of your document.
<BODY>
Function:
Defines the document body
Attributes:
ALINK (Netscape only), BACKGROUND
(extension), BGCOLOR (extension),
BGPROPERTIES (Internet Explorer only),
LEFTMARGIN (Internet Explorer only), LINK
(extension), TEXT (extension), TOPMARGIN
(Internet Explorer only), and VLINK
(extension)
End tag:
</BODY>; may be omitted
* Property of STI
Page 10 of 42HTML - Tags and Attributes
H0073
The <BODY> Attributes
Background Color: use the BGCOLOR attribute
to set document’s background color.
<BODY BGCOLOR="#FFFFFF"></BODY>
Text Color: use TEXT attribute to control the
color of all the normal text in the document.
This will affect all of the text within the
document that is not being colored by some
other element, such as a link.
<BODY BGCOLOR="#FFFFFF"
TEXT="#FF0000"></BODY>
* Property of STI
Page 11 of 42HTML - Tags and Attributes
H0073
The <BODY> Attributes
LINK, VLINK, and ALINK: These attributes
control the colors of the different link states:
LINK - initial appearance – default = Blue
VLINK - visited link – default = Purple
ALINK - active link being clicked – default =
Red
<BODY BGCOLOR="#FFFFFF" TEXT="#FF0000"
LINK="#0000FF" VLINK="#FF00FF"
ALINK="FFFF00">
Image Background: use BACKGROUND attribute
to set an image background for the document.
Background images are "tiled" in the web
browser.
<BODY BACKGROUND="logo.gif"
BGCOLOR="#FFFFFF">
* Property of STI
Page 12 of 42HTML - Tags and Attributes
H0073
HTML Tags
An element is a fundamental component of the
structure of a text document.
It is the first word or character that appears inside the "<" opening bracket.
To denote the various elements in an HTML
document, you use tags.
HTML tags consist of a left angle bracket (<), a
tag name, and a right angle bracket (>).
Tags are usually paired (e.g., <H1> and </H1>)
to start and end the tag instruction.
The end tag looks just like the start tag except a slash (/) precedes the text within the brackets.
Words that follow the element and are contained inside the ">" bracket of the opening
tag are called attributes.
* Property of STI
Page 13 of 42HTML - Tags and Attributes
H0073
Types of HTML Tags
There are two types of tags: container and
empty.
Container tags have both an opening and a
closing and are used to surround the text within
your document for presentation by the tag.
The closing tag name is preceded by a forward
slash.
E.g. <TITLE>Welcome to my
homepage</TITLE>
Empty tags use only an opening and tell the
browser to perform an instruction such as
breaking to the next line, inserting a horizontal
line or inserting an image.
i.e. <BR>, <HR>, <IMG src=“name”>
* Property of STI
Page 14 of 42HTML - Tags and Attributes
H0073
Headings
HTML defines six levels of headings that can be
used to structure a text flow into a more
readable, more manageable document.
Inside the BODY element, heading elements H1
through H6 are generally used for major
divisions of the document.
Headings are used in order of importance, not
based on how they render in the browser.
H1 is the most important; H6 is the least
important.
The size of the text surrounded by a heading element varies from very large in an <H1> tag to
very small in an <H6> tag.
E.g. <H1> Web Development </H1>
* Property of STI
Page 15 of 42HTML - Tags and Attributes
H0073
Example
<HTML>
<HEAD>
<TITLE>Example
Page</TITLE>
</HEAD>
<BODY>
<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6>
</BODY>
</HTML>
As displayed
by the browser
* Property of STI
Page 16 of 42HTML - Tags and Attributes
H0073
Exercise
What would be the output of the following HTML
code?
<HTML>
<HEAD>
<TITLE>Car Debugging</TITLE>
</HEAD>
<BODY>
<H1>Engine Tune-Up</H1>
<H2>Change The Oil</H2>
<H2>Change the Spark
Plugs</H2>
<H3>Prepare the New
Plugs</H3>
<H4>Remove the
Guards</H4>
<H4>Check the
Gap</H4>
</BODY>
</HTML>
* Property of STI
Page 17 of 42HTML - Tags and Attributes
H0073
Output
* Property of STI
Page 18 of 42HTML - Tags and Attributes
H0073
Paragraph
One of the most commonly used tags in
HTML is the paragraph marker, which is used to
break apart blocks of text into separate
paragraphs.
Each paragraph starts with <P> and ends with
the corresponding </P> tag.
Example:
<BODY>
This is the first paragraph, at the very beginning of the body of this document. <P> The tag
above signals the start of this second
paragraph. When rendered by a browser, it will
begin slightly below the end of the first
paragraph, with a bit of extra white space between the two paragraphs. </P> This is the
last paragraph in the example. </BODY>
* Property of STI
Page 19 of 42HTML - Tags and Attributes
H0073
Line Break <BR>
Line breaks allow you to decide where the text
will break on a line or continue to the end of the
window.
A <BR> is an Empty Element, which may
contain attributes but it does not contain any
content.
The <BR> element does not have a closing tag
because it marks a position and does not
contain any content.
Example:
<BODY>
This is the first paragraph, at the very beginning of the body of this document. <BR> The tag above
signals the start of this second paragraph. When
rendered by a browser, it will begin slightly below the
end of the first paragraph, with a bit of extra white space between the two paragraphs. <BR> This is the
last paragraph in the example. </BODY>
* Property of STI
Page 20 of 42HTML - Tags and Attributes
H0073
Horizontal Rule
The <HR> element causes the browser to
display a horizontal line (rule) in your document.
Horizontal rules give you a way to visually
separate sections of your document.
Example:
<BODY>
This text is directly above the rule. <HR>
And this text is immediately below. <P>
Whereas this text will have space before the rule. <P><HR><P> And this text has space after
the rule.
</BODY>
* Property of STI
Page 21 of 42HTML - Tags and Attributes
H0073
<HR> Attributes
Key attributes for use with the <HR> element:
Attribute Description Default Value
SIZE height of the rule in
pixels
2 pixels
WIDTH width of the rule in
pixels or percentage
of screen width
100%
NOSHADE draw the rule with a
flat look instead of a
3D look
not set (3D look)
ALIGN aligns the line (Left,
Center, Right)
Center
COLOR sets a color for the
rule (IE 3.0 or later)
No set
* Property of STI
Page 22 of 42HTML - Tags and Attributes
H0073
Character Formatting
Character formatting elements allows you to:
Specify the appearance of individual
characters (bold, italic, typewriter)
Include special characters (characters with
accents, copyright and registration marks,
and so on)
Create preformatted text (text with spaces
and tabs retained)
Align text left, right, justified, and centered
Change the font, size, and color
HTML provides two general ways to apply
formatting to text, the physical style and logical
style.
* Property of STI
Page 23 of 42HTML - Tags and Attributes
H0073
Physical Tags
Physical style tags indicate exactly the way text is to be formatted.
This tag indicates a specific change in appearance.
Below is the list of physical tags; they can be combined to create other effect.
<B> Bold
<I> Italic
<TT> Monospaced typewriter font
<U> Underline
<S> Strike through
<BIG> Bigger print than the surrounding text
<SMALL> Smaller print
<SUB> Subscript
<SUP> Superscript
E.g.
<B><I>Text that is both bold and italic</I></B>
* Property of STI
Page 24 of 42HTML - Tags and Attributes
H0073
Physical Tags
<I>Italic</I>
To create italic text, insert an <I> tag in the
document, followed by a </I> tag.
Any text between these two tags will be
displayed in italics when viewed in a browser.
E.g. <I>This is Italic text.</I>
This is Italic text.
<B>Bold</B>
To create bold text, insert <B> and </B> tags.
Any text falling between these two tags will
appear in boldface type.
E.g. <B>This is Bold text.</B>
This is Bold text.
* Property of STI
Page 25 of 42HTML - Tags and Attributes
H0073
Physical Tags
<TT>monospaced</TT>
To create text that is displayed in a
monospaced font (such as Courier), use the <TT> and </TT> tags.
Text falling between these two tags will be
displayed in a fixed-width font, similar to the
output from a teletype machine or typewriter.
E.g. <TT>Teletype appears
monospaced</TT>
Teletype appears monospaced
<S>Strike-through</S>
To create strike-through text, which is text with
a single horizontal line running through it, use the <S> and </S> tags.
E.g. <S>Strike-through text</S>
* Property of STI
Page 26 of 42HTML - Tags and Attributes
H0073
Physical Tags
<U>underline</U>
Use <U> and </U> tag pair to underline text/s.
You should use these tags only when absolutely
necessary, as underlined text is not widely
supported by Web browsers.
E.g. <U>Underlined text</U>
Underlined text
<BIG></BIG> and <SMALL></SMALL>
Using the <BIG> and </BIG> tags will increase
the size of the indicated text relative to the
default size.
<SMALL> and </SMALL> will make the text
smaller.
E.g. <BIG>Big is not small</BIG>
<SMALL>Small is not big</SMALL>
* Property of STI
Page 27 of 42HTML - Tags and Attributes
H0073
Physical Tags
<SUP>superscript</SUP> and
<SUB>subscript</SUB>
Texts can be formatted as either superscript or
subscript; text that appears slightly above or
below the current line, respectively.
Numbers are usually in these forms for
mathematical equations or to indicate footnotes. Use <SUP> and </SUP> tags to mark text as
superscript.Use <SUB> and </SUB> tags to mark text as
subscript.
Examples:
Superscript text appears <SUP>above</SUP>
Subscript text appears <SUB>below</SUB>
Superscript text appears above
Subscript text appears below
* Property of STI
Page 28 of 42HTML - Tags and Attributes
H0073
Logical Tags
Logical style tags take the approach that
what's really important is the type of information
being displayed, rather than exactly how it
is displayed.
These are similar to the common element tags
for paragraphs or headings.
They don't indicate how the text is to be
formatted, just how it is to be used in a
document.
Logical style tags might, for example, indicate a
definition, a snippet of code, or an emphasized
word.
* Property of STI
Page 29 of 42HTML - Tags and Attributes
H0073
Logical Tags
<EM>emphasis</EM>
These tag adds emphasis to the inserted texts.
Using the <EM> and </EM> tags will usually
display the indicated text in italics.
However, remember that with logical tags, the
actual appearance of the text is determined by
the end user's Web browser, not your HTML
document.
Example:
<P>Say it with <EM>emphasis</EM></P>
Say it with emphasis
* Property of STI
Page 30 of 42HTML - Tags and Attributes
H0073
Logical Tags
<STRONG>strong emphasis</STRONG>
To mark text/s as a very important note, use
<STRONG> and </STRONG> tags.
Most browsers tend to display strongly
emphasized text in boldface.
Example:
<CITE>citation</CITE>
Use <CITE> and </CITE> to insert a citation:
to give credit for a short quotation in the body of
the document.
Citations are typically displayed in italics.
Example:
A citation gives credit where it’s due.
Anonymous, 2003
<P>Say it with <STRONG>emphasis</STRONG></P>
Say it with emphasis
<P>A citation gives credit where it’s due.
<CITE>Anonymous, 2003</CITE></P>
* Property of STI
Page 31 of 42HTML - Tags and Attributes
H0073
Preformatted Text
Preformatted text allows you to break away
from the normal rules of HTML and quickly
specify exactly how a section of text will appear
in the reader's Web browser.
When you're using preformatted text, there is no
need to use the HTML markup tags.
the text will appear exactly as you've typed
it, complete with spaces, line breaks, and
empty lines.
Preformatted text is always displayed in a
monospaced, fixed-width font.
The PRE tag (stands for preformatted), consists
of the beginning and ending tags <PRE> and
</PRE>, allows you to format the text the way
you want it.
* Property of STI
Page 32 of 42HTML - Tags and Attributes
H0073
Preformatted Example
<HTML>
<HEAD>
<TITLE>
Preformatted Text
</TITLE>
</HEAD>
<BODY>
<PRE>
( )
Moo ( oo )
\ /------------\
|| | \
||-------W|| *
|| || </PRE>
</BODY>
</HTML>
* Property of STI
Page 33 of 42HTML - Tags and Attributes
H0073
Font Element
<FONT> tag lets you change the size, style, and
color of text.
It must be used like any other physical or logical
style tag for changing the appearance of a short
segment of text.
<FONT>
Function:
Set the font size for text
Attributes:
COLOR (extension), FACE (Internet
Explorer) and SIZE (extension)
End Tag:
</FONT>, always used
Example:
<FONT SIZE=5 COLOR="purple">This text will
be big and purple.</FONT>
This text will be big and purple.
* Property of STI
Page 34 of 42HTML - Tags and Attributes
H0073
COLOR Attribute
The color attribute for the <font> tag sets the
color of the enclosed text.
The value of the attribute may be expressed in
either of two ways: as the red, green, and blue
(RGB) components of the desired color or as a
standard color name.
Enclosing quotes are recommended, but not
required.
The RGB color value, denoted by a preceding hash mark (#), is a six-digit hexadecimal
number.
For example, to create basic yellow text, you
might use:
<P>Here comes the <FONT color="#FFFF00">
sun</FONT>!</P>
Here comes the sun!
* Property of STI
Page 35 of 42HTML - Tags and Attributes
H0073
FACE Attribute
The font face displayed by the browser depends
on which fonts are available on the individual
user's system.
The browser parses the list of font names, one
after the other, until it matches one with a font
name supported by the user's system.
If none match, the text display defaults to the
font style set by the user in their browser's
Preferences.
Example:
<P>This text is in the default font. But,<FONT
face="Braggadocio, Machine"> heaven
only knows </FONT> what font face is this
one?</P>
This text is in the default font. But, heaven only knows what font face is this one?
* Property of STI
Page 36 of 42HTML - Tags and Attributes
H0073
SIZE Attribute
The <FONT> tag is also use to change the size
of the font for a character, word, phrase, or on
any range of text.
The <FONT>...</FONT> tags enclose the text,
and the SIZE attribute indicates the size to
which the font is to be changed.
The values of SIZE are 1 to 7, with 3 being the
default size.
Example:
<P>Bored with your plain old font? <FONT
SIZE=5>Change it.</FONT></P>
Bored with your plain old font? Change it.
* Property of STI
Page 37 of 42HTML - Tags and Attributes
H0073
Text Alignment
This is the ability to arrange a block of text such
as a heading or a paragraph so that it is aligned
against the left margin (left justification - the
default), aligned against the right margin (right
justification), or centered.
Use the ALIGN attribute to that HTML element.
ALIGN has three values: LEFT, RIGHT, or
CENTER.
Example:
<H2 align=LEFT>Who We Are</H2>
<H2 align=RIGHT>What We Do</H2>
<H2 align=CENTER>How To Reach Us</H2>
* Property of STI
Page 38 of 42HTML - Tags and Attributes
H0073
Special Characters and Symbols
These are not found on the average keyboard
that can be inserted using special character
entities.
These special characters are specified in an
internationally accepted character set known as
the ISO-Latin-1 (ISO-8859-1).
They are recognized in HTML as they begin
with an ampersand and end with a semi-colon e.g. &value;
The value will either be an entity name or a
standard ASCII character number.
Example:
<P>Web Programming © 2009 All Rights
Reserved</P>
Web Programming © 2009 All Rights Reserved
* Property of STI
Page 39 of 42HTML - Tags and Attributes
H0073
Special Characters and Symbols
The following table represents some of the
more commonly used special characters.
Special
Character
Entity
Name
Special
Character
Entity
Name
ampersand & greater-than
sign
>
asterisk ∗ less-than sign <
cent sign ¢ non-breaking
space
copyright © quotation mark "
fraction one
qtr
¼ registration mark ®
fraction one
half
½ trademark sign ™
* Property of STI
Page 40 of 42HTML - Tags and Attributes
H0073
Other Character Formatting Elements
<BASEFONT> </BASEFONT>
Used to set the base font size.
The size attribute is an integer value ranging
from 1 to 7.
The base font applies to the normal and
preformatted text but not to headings, except where these are modified using the FONT
element with a relative font size.
<BLOCKQUOTE></BLOCKQUOTE>
Used to enclose block quotations from other
works or to indent sections of a document.
It indents from both sides in a browser.
This element can also contain most other
formatting elements such as Headings,
paragraphs, tables, etc.
* Property of STI
Page 41 of 42HTML - Tags and Attributes
H0073
Other Character Formatting Elements
<ADDRESS></ADDRESS>
It specifies information such as authorship and contact details for the current document.
No support for an alignment attribute with the <ADDRESS> element.
Example:
<P><BLOCKQUOTE>This is the first day of the rest of your life, make it count. </BLOCKQUOTE><CENTER><ADDRESS>180 Attwell Dr. Suite 130<BR>Toronto,ON <BR>M9W 6A9</ADDRESS></CENTER></P>
This is the first day of the rest of your life, make it count.
180 Attwell Dr. Suite 130Toronto, ONM9W 6A9
* Property of STI
Page 42 of 42HTML - Tags and Attributes
H0073
Writing Comments
HTML comments describe the page itself or
provide some kind of indication of the status of
the page.
Some source code control programs can put
page status into comments, for example.
Text in comments is ignored when the HTML
file is parsed.
Comment tags consist of a beginning and ending sequence of characters ("<!--" and
"-->").
Example:
<!-- This is a comment -->