Basic HTML
Building Your Web Page
Getting Started
HTML documents are plain-text files
created using a text editor.
Word processing software can be used
if the document is saved as "text only with line breaks".
Terminology
ASCII—plain text format
HTML—Hypertext Markup Language
Hyperlink—text or image within HTML
linking to another document
Text editor—simple text on a Mac,
Notepad on Windows
Image Map—one image with
hyperlinked quadrants (sections)
Terminology
Element—fundamental component of
the structure of a text document
Tags—used to denote various
elements in an HTML document
URL—Uniform Resource Locator
Attribute—additional information
included inside the start tag.
Minimal HTML Document
Must contain basic tags HTML
HEAD—contains the TITLE
BODY—contains the text that makes
up the page
Not all browsers support all tags
Browser ignores a tag that is
non-supported
HTML not case sensitive
<BODY> is same as
<body> or <BoDy>
Required Elements
<html>
<head>
<title>Barebones
example</title>
</head>
<body>
This appears on the page
</body>
</html>
HTML Tags
Tags consist of a left angle bracket
(<) a tag name followed by a right angle bracket (>)
Usually paired to start and end tag
End tag identical to start except has
slash (/) preceding the tag text
Some elements have attributes
included to specify the position of the content
Basic Tags
<HTML> </HTML>
Element tells the browser that the
file contains HTML coded information
File name ends with .htm or .html
<HEAD> </HEAD>
Identifies the first part of the
HTML coded document
Contains the title
<TITLE> </TITLE>
Document title that identifies the
content
Displays at the top of the browser
window
Displays on bookmark list
MUST be short
<BODY> </BODY>
Content of the document
Displays in the window of the
browser
Practice
Code a page with Your Name, address,
and e-mail address on it.
Open Notepad from Accessories
Turn on word wrap in Notepad by
selecting Edit pull-down menu, choose Word Wrap
Key in a simple document with:
(beginning of your web page assignment)
Title (appears on top blue line)
Body (title to appear on your page
screen)
Save the file as yourname.htm
Example
<HTML>
<HEAD>
<TITLE>Sparks’
Fly</TITLE>
</HEAD>
<BODY>
Welcome to the Web page of Dr.
Cynthia Sparks
</BODY>
</HTML>
Page Options
Page options included as part of the
<body> tag
Background attribute allows an image
to be used as background for document
Default—black text and hyperlinks
in blue with gray background
Colors
BGCOLOR=background color desired
TEXT= text displayed in the browser
LINK=hyperlink color
ALINK=active link color
VLINK=visited link color
The COLOR is listed as a six digit
number
Background Color
Change the color of your web page
<BODY BGCOLOR="RRGGBB">
Locate at the beginning of the body
text
Color code represents the amount of
red, green, and blue
Numbers and sometimes letters
represent the colors (F--full color)
Hexadecimal format--numbering system
Hexidecimal Colors
Represents the combination of Red,
Green, and Blue in values from 00 to FF
000000 = black (no color)
FFFFFF = white (fully saturated
color)
Specific color using the number and
letter combination
http://allmediasolutions.com/color
Color Wheel for Browser Safe Colors
http://www.lynda.com/hexh.html
Background File
Place a file as the background of
your page
<body background="image_file_name">
Make sure the background file is
saved in the same folder as your web page
Replaces the bgcolor command
http://www.looksmart.com
Best search engine for web page
elements
RULES for HTML Syntax
REMINDER!!!
Rules when using HTML tags
Always enclosed in < and >
angle brackets
Can be upper or lower case--no
difference
Tags that have to be turned on and
off are called container tags
Tags used by themselves--empty tags
HTML Structural Tags
REMINDER!!!
Certain tags must appear in every
document
<HTML >and </HTML> The
entire document must be between these tags.
<HEAD> and </HEAD>
Defines the header for the document.
<TITLE> and </TITLE>
Identifies the document to the reader (appears on blue line at top of
browser)
<BODY> and </BODY> All
document information must be between these tags (what appears on the screen
of your monitor)
Saving and Viewing Web Pages
Save the document
Windows 3.1 save as .htm
Windows 95 save as .html (MAC also)
Viewing
Open browser
File menu choose Open File
Select the location where you saved
it
Select your document and choose
Open or OK
Troubleshooting
Check all the tags to make sure they
are
typed correctly
are without spaces
Remember brackets and slashes must be
used correctly
Resave and Reload to your browser
Types of Tags—Reminder!
Container tags
Action must be turned on <H1>
Action must be turned off
</H1>
Empty tags
Action occurs and is not repeated
Has to be turned on but not turned
off
Example—break tag <BR>
Practice
Explore and find the hexidecimal code
for a color you might like for text or background
Search and find a image that you
might like to use as a background
Play with the practice page we have
created so far
Using Head Tags
There are six head tags <H1>…</H1>
The tags are used in the body of the
document
Level 1 is the largest to level 6
the smallest.
These tags describe what the text
is not how it will be displayed--the browser decides that
Not all browsers display text in
the same way
Heading make you page easy to read
More Tags
Forced line breaks
You can insert lines in a word
processor by pressing the enter key—does not work in HTML
<P> space between lines (=
double space)
<BR>line break with no extra
space (goes to next line)
These tags need no ending tag code
Character Formatting Tags
FONT Style
The style of font is determined by
the…
<FONT>…</FONT>
FACE= type of font such as "arial"
SIZE= in points, PT
COLOR= color of text to be
displayed
<FONT COLOR="red"
FACE="arial" SIZE="7PT">red arial text
appears</FONT>
Changing Text Color
Basically the same method as
background
<BODY TEXT="RRGGBB">
Watch to be sure that your page is
readable in the browser. Some colors are difficult to read
Visit web site to determine color
values
http://www.users.interport.net/~giant/COLOR/1ColorSpecifier.html
Both browsers recognize some colors
(handout of Netscape recognition of colors)
Changing Font Style
To change to another font character
set—can be done without other commands
Immediately after the body command
Font face command
<font face="Comic Sans
MS">
This does require a close command at
end of document
</font face>
Alignment--Text
Text defaults to left alignment
You can also use the center commands
to change location
<center>…</center>
To align test to right or justify
use paragraph align command
<P ALIGN="RIGHT">
<P
ALIGN="JUSTIFY">
Changing the Font Size
<FONT SIZE>
If you do not increase by points and
want the browser to do it for you
Increase or decrease font size using
numbers 1 to 7 (#3 is normal text size)
smallest is 1 to largest 7
Tag does not include automatic breaks
so you can change within a sentence
Horizontal Rule Tag
<HR>
Draws a line between text
Divider between different topics on a
page
SIZE attribute
Thickness in pixels
WIDTH attribute
Specifies width in percent of
screen width
COLOR attribute
In Internet Explorer the color of
the line (does not work in Netscape)
Indent Tags
<DD>
Works like the TAB key in a word
processor
Extended Quotations—long quotations
in a separate block in your browser
<BLOCKQUOTE>
container tag that indents all
lines from both sides
</BLOCKQUOTE> ending code
Lists—Three Types
HTML supports
Unnumbered
Numbered
Definition
Nested lists—lists with sub-lists
within them (these are sometimes difficult to follow so be careful when using
them)
Creating Lists--Bulleted
Unordered List (Unnumbered List)
This places a bullet before each item
in a list
<UL>…</UL> define the
beginning and end of the list
<LI> placed at the beginning
of each line of the list (list item) followed by the item to be listed {does
not require closing tag}
To determine shape of bullet use
TYPE=CIRCLE or SQUARE. The default is solid disk shape displayed if not
specified.
Creating Lists--Numbered
Ordered Lists (Numbered Lists)
This command automatically numbers a
list as viewed in the browser
<OL>…</OL> define
where the list begins and ends
<LI> empty tag placed at the
beginning of each line of the list
Creating Lists--Definition
Definition Lists (Glossary List)
Displays alternating definition terms
and definitions
DD and DT tags can contain multiple
paragraphs
This creates a definition list…word
then definition
<DL>…</DL> defines
the beginning and end of the list
<DT> placed at beginning of
the term
<DD> placed before definition
TIP
HTML supports multiple list formats
For more help on various kinds of
lists visit
http://htmlgoodies.com
Exercise
Add a horizontal line between you
welcome message and the rest of your page.
Create a list of items to be placed
on your page
Choose either bulleted or numbered
Use the paragraph tag to place three
lines between the list and the final line
Create a line that blinks
Write the following: "Comments
sent to"
Change your background color to
something you like
Now select a text color
Color your headline a different
color from the text
| 
Fly