Introduction to HTML
Outline
Introduction
Markup Languages
Editing HTML
Common Tags
Headers
Text Styling
Linking
Images
Formatting Text With <FONT>
Special Characters, Horizontal Rules and More Line Breaks
1 Introduction
HTML
HyperText Markup Language
Not a procedural programming language like C, Fortran, Cobol
or Pascal
Markup language
Identify elements of a page so that a browser can render that page
on your computer screen
Presentation of a document vs. structure
Markup Languages
Markup language
Used to format text and information
HTML
Marked up with elements, delineated by tags
Tags: keywords contained in pairs of angle brackets
HTML tags
Not case sensitive
Good practice to keep all the letters in one case
Forgetting to close tags is a syntax error
3.3 Editing HTML
HTML files or documents
Written in source-code form using text editor
HTML files
.htm or .html extensions
Name your files to describe their functionality
File name of your home page should be index.html
Errors in HTML
Usually not fatal
Common Tags
Always include the <HTML></HTML> tags
Comments placed inside <!----!> tags
HTML documents
HEAD section
Info about the document
Info in header not generally rendered in display window
TITLE element names your Web page
BODY section
Page content
Includes text, images, links, forms, etc.
Elements include backgrounds, link colors and font faces
P element forms a paragraph, blank line before and after
Common Tags (cont.)
<HTML>
<HEAD>
<TITLE>Internet and WWW How to Program </HEAD>
Welcome</TITLE>
<BODY>
<P>Welcome to Our Web Site!</P>
</BODY>
</HTML>
Headers
Headers
Simple form of text formatting
Vary text size based on the headers level
Actual size of text of header element is selected by browser
Can vary significantly between browsers
CENTER element
Centers material horizontally
Most elements are left adjusted by default
Headers
<html>
<head>
<title>Internet and WWW How to Program - Headers</title>
</head>
<body>
<h1>Level 1 Header</h1>
<h2>Level 2 header</h2>
<h3>Level 3 header</h3>
<h4>Level 4 header</h4>
<h5>Level 5 header</h5>
<h6>Level 6 header</h6>
</body>
</html>
Header elements H1 through H6
Text Styling
Underline style
<U></U>
Align elements with ALIGN attribute
right, left or center
Close nested tags in the reverse order from which they were
opened
Emphasis (italics) style
<EM></EM>
Strong (bold) style
<STRONG></STRONG>
<B> and <I> tags deprecated
Overstep boundary between content and presentation
1 <HTML>
2
3 <!-- Fig. 3.3: main.html -->
4 <!-- Stylizing your text -->
5
6 <HEAD>
7 <TITLE>Internet and WWW How to Program - Welcome</TITLE>
8 </HEAD>
9
10<BODY>
11<H1 ALIGN = "center"><U>Welcome to Our Web Site!</U></H1>
12
13<P>We have designed this site to teach
14about the wonders of <EM>HTML</EM>. We have been using
15<EM>HTML</EM> since <U>version<STRONG> 2.0</STRONG></U>,
16and we enjoy the features that have been added recently.
17seems only a short time ago that we read our first
It
18book. Soon you will know about many of the great new
<EM>HTML</EM>
19of HTML 4.0.</P>
features
20
21<H2 ALIGN = "center">Have Fun With the Site!</H2>
22
23</BODY>
24</HTML>
Stylizing text on Web pages
Stylizing text on Web pages
Tag
Description
<b>
Defines bold text
<em>
Defines emphasized text
<i>
Defines a part of text in italic
<small>
Defines smaller text
<strong>
Defines important text
<sub>
Defines subscripted text
<sup>
Defines superscripted text
<ins>
Defines inserted text
<del>
Defines deleted text
<mark>
Defines marked/highlighted text
Linking
Links inserted using the A (anchor) element
Requires HREF attribute
HREF specifies the URL you would like to link to
<A HREF = address></A>
Can link to email addresses, using
<A HREF = mailto: emailaddress></A>
Note quotation mark placement
Linking
A hyperlink (or link) is a word, group of words, or
image that you can click on to jump to another
document.
When you move the cursor over a link in a Web page,
the arrow will turn into a little hand.
By default, links will appear as follows in all
browsers:
An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red
<html>
<head>
<title>Internet and WWW How to Program - Links</title>
</head>
<body>
<h1>Here are my favorite sites</h1>
<p><strong>Click a name to go to that page.</strong></p>
<!-- Create four text hyperlinks -->
<p><a href = "http://www.deitel.com">Deitel</a></p>
<p><a href = "http://www.prenhall.com">Prentice Hall</a></p>
<p><a href = "http://www.yahoo.com">Yahoo!</a></p>
<p><a href = "http://www.usatoday.com">USA Today</a></p>
</body>
</html>
Linking to other Web pages
<html>
<head>
<title>Hyper Linking </title>
</head>
<body>
<p>My email address is
<a href = "mailto:[email protected]">
[email protected]
</a>
. Click the address and your browser will
open an e-mail message and address it to me.
</p>
</body>
</html>
The HTML <head> Element
The <head> element is a container for all the head
elements. Elements inside <head> can include
scripts, instruct the browser where to find style
sheets, provide meta information, and more.
The following tags can be added to the head section:
<title>, <style>, <meta>, <link>, <script>,
<noscript>, and <base>.
The HTML <title> Element
The <title> tag defines the title of the document.
The <title> element is required in all
HTML/XHTML documents.
The <title> element:
defines a title in the browser toolbar
provides a title for the page when it is added to favourites
displays a title for the page in search-engine results
The HTML <base> Element
The <base> tag specifies the base URL/target for all
relative URLs in a page:
The HTML <link> Element
The <link> tag defines the relationship between a
document and an external resource.
The <link> tag is most used to link to style sheets:
The HTML <style> Element
The <style> tag is used to define style information
for an HTML document.
Inside the <style> element you specify how HTML
elements should render in a browser:
The HTML <meta> Element
Metadata is data (information) about data.
The <meta> tag provides metadata about the HTML document.
Metadata will not be displayed on the page, but will be machine
parsable.
Meta elements are typically used to specify page description,
keywords, author of the document, last modified, and other
metadata.
The metadata can be used by browsers (how to display content or
reload page), search engines (keywords), or other web services.
<meta> Tags - Examples of Use
Images
Images as anchors
Background color
Preset colors (white, black, blue, red, etc.)
Hexadecimal code
First two characters for amount of red
Second two characters for amount of green
Last two characters for amount of blue
00 is the weakest a color can get
FF is the strongest a color can get
Ex. black = #000000
Images
Image background
<BODY BACKGROUND = background>
Image does not need to be large as browser tiles image across and down the
screen
Pixel
Stands for picture element
Each pixel represents one addressable dot of color on the screen
Insert image into page
Use <IMG> tag
Attributes:
SRC = location
HEIGHT (in pixels)
WIDTH (in pixels)
BORDER (black by default)
ALT (text description for browsers that have images turned off or cannot view
images)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<HTML>
<!-- Fig. 3.6: picture.html -->
<!-- Adding images with HTML -->
<HEAD>
<TITLE>Internet and WWW How to Program - Welcome</TITLE>
</HEAD>
<BODY BACKGROUND = "background.gif">
<CENTER>
<!-- Format for entering images: <IMG SRC = "name"> -->
<IMG SRC = "deitel.gif" BORDER = "1" HEIGHT = "144"
WIDTH = "200" ALT = "Harvey and Paul Deitel">
</CENTER>
</BODY>
</HTML>
<html>
<head>
<title>Internet and WWW How to Program - Navigation Bar </title>
</head>
<body>
<p>
<a href = "links.html"><img src = "buttons/links.jpg" width = "65"
height = "50" alt = "Links Page" />
</a><br />
<a href = "list.html"><img src = "buttons/list.jpg" width = "65"
height = "50" alt = "List Example Page" />
</a><br />
<a href = "contact.html"><img src = "buttons/contact.jpg" width = "65"
height = "50" alt = "Contact Page" />
</a><br />
<a href = "header.html"> <img src = "buttons/header.jpg" width = "65"
height = "50" alt = "Header Page" />
</a><br />
<a href = "table.html"><img src = "buttons/table.jpg" width = "65"
height = "50" alt = "Table Page" />
</a><br />
<a href = "form.html"><img src = "buttons/form.jpg" width = "65"
height = "50" alt = "Feedback Form" />
</a><br />
</p>
</body>
</html>
Using images as link anchors
Formatting Text With <FONT>
FONT element
Add color and formatting to text
FONT attributes:
COLOR
Preset or hex color code
Value in quotation marks
Note: you can set font color for whole document using TEXT
attribute in BODY element
Formatting Text With <FONT> (II)
SIZE
To make text larger, set SIZE = +x
To make text smaller, set SIZE = -x
x is the number of font point sizes
FACE
Font of the text you are formatting
Be careful to use common fonts like Times, Arial, Courier and
Helvetica
Browser will display default if unable to display specified font
Example
<FONT COLOR = red SIZE = +1 FACE = Arial>
</FONT>
1<HTML>
2
3<!-- Fig. 3.8: main.html
-->
4<!-- Formatting text size and color -->
5
6<HEAD>
7<TITLE>Internet and WWW How to Program - Welcome</TITLE>
8</HEAD>
9
10<BODY>
11
12<H1 ALIGN = "center"><U>Welcome to Our Web Site!</U></H1>
13
14<!-- Font tags change the formatting of text they enclose -->
15<P><FONT COLOR = "red" SIZE = "+1" FACE = "Arial">We have
16designed this site to teach about the wonders of
17<EM>HTML</EM>.</FONT>
18
19<FONT COLOR = "purple" SIZE = "+2" FACE = "Verdana">We have been
20using <EM>HTML</EM> since <U>version<STRONG> 2.0</STRONG></U>,
21and we enjoy the features that have been added recently.</FONT>
22
23<FONT COLOR = "blue" SIZE = "+1" FACE = "Helvetica">It
24seems only a short time ago that we read our first <EM>HTML</EM>
25book.</FONT>
26
27<FONT COLOR = "green" SIZE = "+2" FACE = "Times">Soon you will
28know about many of the great new feature of HTML 4.0.</FONT></P>
29
30<H2 ALIGN = "center">Have Fun With the Site!</H2></P>
31
32</BODY>
33</HTML>
Using the FONT element to format text
Special Characters, Horizontal Rules and More Line Breaks
Special characters
Inserted in code form
Format always &code;
Ex. &
Insert an ampersand
Codes often abbreviated forms of the character
Codes can be in hex form
Ex. & to insert an ampersand
Strikethrough with DEL element
Superscript: SUP element
Subscript: SUB element
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<HTML>
<!-- Fig. 3.9: contact.html
-->
<!-- Inserting special characters -->
<HEAD>
<TITLE>Internet and WWW How to Program - Contact Page</TITLE>
</HEAD>
<BODY>
<!-- Special characters are entered using the form &code; -->
<P>My email address is <A HREF = "mailto:[email protected]">
[email protected]</A>. Click on the address and your browser
will automatically open an email message and address it to my
address.</P>
<P>All information on this site is <STRONG>©</STRONG>
Deitel <STRONG>&</STRONG> Associates, 1999.</P>
<!-- Text can be struck out with a set of <DEL>...</DEL>
-->
<!-- tags, it can be set in subscript with <SUB>...</SUB>, -->
<!-- and it can be set into superscript with <SUP...</SUP> -->
<DEL><P>You may copy up to 3.14 x 10<SUP>2</SUP> characters
worth of information from this site.</DEL><BR> Just make sure
you <SUB>do not copy more information</SUB> than is allowable.
<P>No permission is needed if you only need to use <STRONG>
< ¼</STRONG> of the information presented here.</P>
</BODY>
</HTML>
Inserting special characters into HTML
Special Characters, Horizontal Rules and More Line Breaks (II)
Horizontal rule
<HR> tag
Inserts a line break directly below it
HR attributes:
WIDTH
Adjusts the width of the rule
Either a number (in pixels) or a percentage
SIZE
Determines the height of the horizontal rule
In pixels
ALIGN
Either left, right or center
NOSHADE
Eliminates default shading effect and displays horizontal rule as a solidcolor bar
1<HTML>
2
3<!-- Fig. 3.10: header.html
-->
4<!-- Line breaks and horizontal rules -->
5
6<HEAD>
7<TITLE>Internet and WWW How to Program - Horizontal
Rule</TITLE>
8</HEAD>
9
10<BODY>
11<!-- Horizontal rules as inserted using the format: -->
12<!-- <HR WIDTH = ".." SIZE = ".." ALIGN = "..">
-->
13<HR WIDTH = "25%" SIZE = 1>
14<HR WIDTH = "25%" SIZE = 2>
15<HR WIDTH = "25%" SIZE = 3>
16
17<P ALIGN = "left"><STRONG>Size:</STRONG>4
18<STRONG>Width:</STRONG>75%
19<HR WIDTH = "75%" SIZE = "4" ALIGN = "left">
20
21<P ALIGN = "right"><STRONG>Size:</STRONG>12
22<STRONG>Width:</STRONG>25%
23<HR WIDTH = "25%" SIZE = "12" ALIGN = "right">
24
25<P ALIGN = "center"><STRONG>Size:</STRONG>8
26<STRONG>Width:</STRONG>50%
27<STRONG><EM>No shade...</EM></STRONG>
28<HR NOSHADE WIDTH = "50%" SIZE = "8" ALIGN = "center">
29
30</BODY>
31</HTML>
Using horizontal rules
