Intro to HTML
HTML- HYPERTEXT Mark-Up Language
Hypertext
– allows you to jump from one site to another
Requirements:
·
Need a browser such as Netscape Navigator, Internet Explorer or Mosaic
·
Need a word processor as simple as notepad
Html
is extensible; it can be upgrades
without changing previous commands.
HTML
uses two types of text:
Context
– Text or information to be displayed on or played on viewers speakers
Mark-Up
– Text or information to control the display or point to the other
information or items in need of playback. This information is only viewed for
creation and is called Mark-Up Tags or
Tags.
Properties of a Mark–Up or
Tag
Mark-ups
begin with a left angle bracket <
Mark-ups
end with a right angle bracket >
Example of a Mark-Up:
To Center Text - <CENTER>
Many
Markups require a closing tag
After
the left angle bracket, add a forward slash /
Example
of a Closing Tag:
To Center Text - </CENTER>
Complete
tag with Text:
<CENTER>Tiverton
Tech. Ed.</CENTER>
All
HTML documents start with <HTML>
…………………this tells the browser it is an HTML Document
All
documents should be saved with .htm or .html after the file name.
A
document should have both:
1. Head - contains important
information about the document
2. Body – Text, Images, and Mark-up
Tags
Type
Mark-Up text in CAPS, it makes them
easier to stand out.
Second
tag should be <HEAD>, It
should be followed by </HEAD>
The
head is helpful for search engines; it should include a searchable title.
The
title will appear in the title box, not the document.
Example:
<HTML><HEAD>
<TITLE> Tiverton Tech. Ed.</TITLE></HEAD>
<BODY>
Tiverton
Tech. Ed. Teaches job skills.
COMMOM TAGS in HTML:
To
manipulate text
To
center <CENTER>
To
underline <U>
To
make text bold <B> or <STRONG> (Speech)
To
italicize <I> or <EM> (Speech)
To
pronounce each letter <ACRONYM> (Speech)
Heading
tags
Largest <H1> </H1>
Smallest <H6> </H6>
Centered
Heading <H6ALIGN=”CENTER”> </H6>
To
start a paragraph <P>
Line
Break <B>
Unordered
List <UL>
3
items with bullets <L1>
<L1>
<L1>
</UL>
Ordered
List, replace UL with <OL></OL>
To
change symbol on list to
A circle <DIR
TYPE=CIRCLE>
A square <DIR
TYPE=SQUARE>
To
indent whole paragraph <BLOCKQUOTE> </BLOCKQUOTE>
Address <ADDRESS> </ADDRESS>
EXAMPLE:
<ADDRESS>Web Masters<BR>
TIP . Return to
notepad from Browse! Press(Alt + Tab).
More HTML Structure tags
<!DOCTYPE
HTML Identifies
HTML and version
PUBLIC”//WC3//DTD
HTML
4.0 Final//EN”>
<
NAME=”KEYWORDS” that describe a
document
CONTENT=”…”> for
engines
<
NAME=”DESCRIPTION” for engines
CONTENT=”…”>
Example of
complete HTML 4.0 Intro:
<!DOCTYPE HTML
PUBLIC”-//W3C//DTD HTML 4.0 FINAL//EN”>
<HTML>
<HEAD><TITLE>Tiverton
Tech. Ed.</TITLE>
<
<
</Head>
<BODY>
Hyperlinks
URL – Uniform Resource
Locator –
an address on the web.
There
are two types Of URL’s:
·
A absolute URL known as a complete URL is the type one should use when linking to a
address outside your web site.
·
A relative URL known as a partial URL is the type that should be used when linking to
a file in the same folder or server.
URL’s
are case sensitive
Example
of a URL:
Http://cat.feline.org/fur/fu
Http:// - protocol indicator
cat.feline.org – hostname, a computer on
the internet.
fur – directory name, folder
with in folder, your server account.
Fu
An Anchor tab – Marks the Link on the web
Hyperlink Tags
<A>…</A> Anchor
HREF=”….” Indicates where to jump
NAME=”….” Identifies
an internal label
How to link to a URL outside
your site:
<BODY>
Tiverton
Tech. Ed. Classes teach skills.
1.
Add anchor tags –
Tiverton Tech. Ed.
<A>Classes</A> teach skills
2.
Add URL address- Tiverton Tech. Ed.
<A
HREF=”http://tivschool.com/davis.html”>Classes</A> teach skills
Inserting an image
Images
must be in JPEG or GIF formats
·
GIF format is good for line drawings and simple pictures
·
JPEG format is for photographic images
Image tags:
<IMG SRC=”……> Inserts
an image
ALT=”…..” Specifies alternate text
BORDER= Controls
thickness of border
Example:
<BODY>
Tiverton
is a small town in
<P>Here
is a picture of one of its magnificent water views
<IMG SRC=”river,gif”
ALT=”
Image alignment tags:
ALIGN=”bottom”
ALIGN=”left”
ALIGN=”middle”
ALIGN=”right
ALIGN=”top”
Adding color:
Adding
color to the background is done by attaching additional commands to the body
tag.
BGCOLOR=”……..”
Example:
We
will change the color of the background to sky blue by adding
BGCOLOR =#3399CC”
<HEAD><TITLE>Tiverton</TITLE></HEAD>
<BODY
BGCOLOR =”#3399CC”>
Tiverton
is a small town in
</BODY>
Some
colors can be specified by name and will work in most browsers.
These
colors are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,
Olive,
purple, red, silver, teal, white and yellow
Example: <BODY BGCOLOR
=”purple”>
Text
<FONT>…..</FONT> Changes the font
COLOR=”#rrggbb” Changes color on rrggbb
formula
FACE=”…” Sets the typeface
name
SIZE=n Changes font
si
Example:
<H2>Tiverton</H2>
<FONT
FACE=”Gil Sans, Courier, Atriel” COLOR=”#ffffff”
SIZE=2>
Making a table:
Tags:
<TABLE></TABLE> Defines
start and end of table contents
<TR>></TR> Marks
the contents of each table row
<TH> Marks
the contents that follow as a table cell heading
<TD> Marks the
content that follows as a standard table cell
SAMPLE TABLE:
<TABLE>
<TR>
<TH>NAME:
<TH>GENDER
<TH>AGE
</TR>
<TR>
<TD>Joe
<TD>Male
<TD>56
</TR>
<TR>
<TD>Sally
<TD>Female
<TD>27
</TR>
</TABLE>