Ch t 6

Chapter
An Introduction
to HTML

Definition and Evolution of

HTML
Web pages
HTML documents that can be viewed with a Web browser

Composed of text. Images and multimedia

content
To grab attention

Web browser
The software used to download and view Web pages

6-2

Definition and Evolution of

HTML (contd)
What is HTML?
HyperText link (hyperlink)
The codes used to define a series of text or images as
clickable,
li k bl mostt common ttype off document
d
t on the
th web
b

item you click in order to load another Web page

Hypertext The ability to link documents together

HyperText Markup Language (HMTL)
The markup language used to construct Web pages

Markup Language

A type of computer language that defines the layout of

text and images on a page

Not a programming language

Comprised of tags
HTML editors
6-3

Definition and Evolution of

HTML (contd)
The Evolution of HTML and Web Browsers

1940s academics
1960 Englebart, Hypertext and the mouse
Atkinson and Hypercard
Berners-Lee develops
develops hypertext documents
develops Hypertext Transfer Protocol (http)
The protocol governing the exchange of files on the Web

World Wide Web Consortium

A not-for-profit
not for profit research organization geared toward promoting
standards and innovations in Web-based communication, including
HTML

NCSA Mosaic
A Web browser developed in 1993 by the National Center for
Supercomputing Applications led by Marc Andreeson
Andreeson. Mosaics
Mosaic s
main contribution to the Web was that it allowed for the downloading
of images, along with text
6-4

Definition and Evolution of

HTML (contd)
HTML Innovations
Compatibility
http and TCP/IP
Interactivity
XHTML
Markup language used for building Web pages that conform to
XML standards

6-5

Creating Web Pages with HTML

Need
Notepad
A text-editing program included in the Windows operating system
Web Browser

Basic Web Page Structure

Basic procedure to type the HTML code in Notepad
Notepad, save file and
refresh and view file in browser
Head area and Body area
Not case sensitive
Save as .htm or .html
Internet Explorer
Add tags
g to format the text

6-6

Creating Web Pages with HTML

(contd)
Heading Tags
Six heading tag styles available

Formatting Tags

<p>
new paragraph
<I>
italics
<b>
bold
<font> font color and size
<u>
underline
<I>
italics
<b>
bold
(Cl
(Close
tags
t
from
f
the
th inside
i id out)
t)
6-7

Creating
g Web Pages
g with HTML
(contd)
Tag Attributes
Attributes
Th options
The
ti
available
il bl ffor ttextt size,
i
color,
l and
d ffontt fface

Encase in double quotes

Font Tag <font>

Several options, a relative measurement
Plus (+) or minus (-)
3 is normal font
Absolute Font Sizes
Relative Font Sizes
6-8

Creating
g Web Pages
g with HTML
(contd)
Font Color
Font tags used color name
Not all colors display the same in every browser
Browser Safe Colors
216 colors which display essentially the same in any browser

Dithering Technique of mixing colors

Colors are coded
Hex Code and RGB

Font Face

Face attribute specifies font type

Font you choose must be available on the users computer
Serif
Sans-serif
Monospaced
6-9

Creating Web Pages with HTML

(contd)
Align Attributes
Change alignment of paragraphs, headings and other
HTML elements
Align=center

Hypertext
yp
Links
Hyperlinks used to jump topic
Href attribute
Blue and underlined by default

6-10

Creating
g Web Pages
g with HTML
(contd)

Page Properties

Body Tags
Text
Color for the text in the page

Bgcolor
Background color for the page

link
Color for the hypertext links

vlink
li k
Color for the visited links

alink
Color for the active link
6-11

Creating
g Web Pages
g with HTML
(contd)
Images
Organize into folders
Src

Image Alignment

Top
Middle
Bottom
Left
Right
g
White Space
vspace
p
hspace

6-12

Creating
g Web Pages
g with HTML
(contd)
Image as a Link
<a>
border

Lists
Numbered or bulleted lists
<ol>
<li>

Comment Tag
Visible in source code, not rendered in the browser
<!-- -->

6-13

Browser Specific Issues

HTML and XHTML developed by W3C
Extra tags and attributes by browser
Size of monitor or browser window
Colors displayed

6-14

Optimizing for Search Engines

<meta>
Do

Include <title> tag in <head> area

Put keywords in main page (100 words)
Use 150 character <meta> tag
Use <meta> to include keywords
Comment tags
Use keywords for file names
Use Themes
Arrange for other sites to link to you
Searchengines com
Searchengines.com

Dont
Repeat a keyword in the title more than twice
Repeat keywords many times in comments
6-15

Uploading Your Web Site to a

Web Server (FTP)
Site must be stored on a Web server
File Transfer Protocol (FTP)
Protocol used to transfer Web pages from computer to the Web server

Uploading
p
g
Transferring a copy of a file from your computer to another computer on
a network

Downloading
g
Transferring a copy of a file from another computer on a network to your
computer

Up arrow, down arrow

6-16