14 BCIS 1405 HTML 01 Summer 2007
Download
Report
Transcript 14 BCIS 1405 HTML 01 Summer 2007
HTML
01: Introduction to HTML
1
Objectives
Browsing the World Wide Web
Using Browser Software
Understanding HTML
Creating Web Pages with an Editor
Creating Web Pages with HTML
2
Multimedia
Text
Graphics
Sound
Animation
Video
3
Browsing the World Wide Web
The World Wide Web – the Web – WWW
1989, Tim Berners-Lee at CERN, the
European Laboratory for Particle Physics in
Geneva, Switzerland developed a new set of
standards for exchanging information on the
Internet.
HTTP – HyperText Transfer Protocol
URL – Uniform Resource Locator or Web
Address/Path
4
GLOBAL WWW SUFFIXES
SUFFIX
.com
.org
.net
.biz
.info
.name
.tv
TYPE OF ORGANIZATION
Commercial
Nonprofit
Networks
Businesses
Information organizations
Individuals
Television & Multimedia
SPONSORED WWW SUFFIXES
SUFFIX
TYPE OF ORGANIZATION
.gov
Government (US only)
Military (US only)
Educational institution (US only)
Organizations established by
international treaties
Aviation industry members
Cooperatives
Museums
.mil
.edu
.int
.aero
.coop
.museum
Example of Address of
HCCS Computer Science Dept.
Computer Science Department
or
http://csci.hccs.edu
Understanding HTML
(HyperText Markup Language)
Developed to allow sharing documents on
different types of computers
Not platform specific
Simple markup language
Places codes (called tags) in a Web document
Provides information to browsers about document
structure
HTML Source Code
Use an editor to create
Use Microsoft accessory Notepad
START:
PROGRAMS > ACCESSORIES > NOTEPAD
Key in HTML code then SAVE AS :
filename.htm
Understanding HTML Tags
Set of codes to create documents
Format text
Place pictures / graphics on the page
Create links to other pages
Follow a certain syntax
Each tag begins with < tag > symbol
Most tags end with < / tag > symbol (some
exceptions)
Example:
<HTML>
… headings & body of web page …
< /HTML >
HTML Structure Tags
Two main sections:
Head section
Body section
HEAD SECTION
Must contain a title
Title will show up in Title Bar of web page
May contain formatting styles
May contain keywords for particular browsers
Structure of a Web Document
<HTML>
<HEAD>
<TITLE> title text </TITLE>
</HEAD>
<BODY>
… all the information you want displayed
</BODY>
</HTML>
Tips about Titles
Only 1 title allowed
Should be brief, but descriptive
Will show up as Title bar of web page
Title cannot be formatted
Title cannot be a link to other pages
Use of Headings
Use one large heading <H1> that is similar to
title
It will then appear as text in the web page
There are six levels of headings
<H1> … </H1> Largest font size
<H2> … </H2> Next largest
<H6> … </H6> Smallest font size
Used to organize the body
Think “Newspaper Headlines”
Placing Text in a Document
PARAGRAPH BREAKS
Automatic paragraph break with Heading
For other Paragraph breaks, use <P> tags
LINE BREAKS
Use <BR> line break but no double spacing
<BR> does not have a closing tag (no </BR> )
Enhancing Text in a Document
Physical Tags
<B> … </B>
<I> … </I>
<CENTER> …
</CENTER>
<U> … </U>
<STRIKE> … </STRIKE>
<SUB … </SUB>
<SUP> … </SUP>
Bolds text
Italicizes text
Centers text
Underlines text
Strikes through text
Text Subscript
Text Superscript
Enhancing Text in a Document
Logical Tags (Browser Dependent)
<EM> … </EM>
<STRONG> … </STRONG>
Italicizes text
Bolds text
<DEL> … </DEL>
Strikes through text
<INS> … </INS>
Underlined text
NOTE:
May be treated differently by Internet
Explorer and Netscape
Nested Tags
Creating multiple formatting tags
Bold and Italicize
<B> <I> Text to be formatted </I> </B>
Results in: Text to be formatted
Note the order of closing tags – last tag opened
is first tag closed. (LIFO)
Using Attributes with Tags
Attributes define the tag
Attribute followed by = sign, then value
Value is always enclosed in quotation marks
Entered after the tag and before closing >
EXAMPLE:
<H1 ALIGN=“Center” > Heading Message </H1>
Results:
Heading Message
Creating Lists
Bulleted list (unordered list)
Numbered list (ordered)
Unordered list
Begins with <UL> tag and ends with </UL>
Each line in list begins with <LI> (no closing tag)
Each line will appear on web page as:
Indented
Preceded by a bullet
Unordered / Bulleted List
EXAMPLE:
<H3> Your Shopping List </H3>
<UL>
<LI> 1 Gallon Milk
<LI> 1 Box Cereal
<LI> 1 Pt. Strawberries
</UL>
RESULT:
Your Shopping List
1 Gallon Milk
1 Box Cereal
1 Pt. Strawberries
Creating Lists
Numbered list (ordered)
Ordered list
Begins with <OL> tag and ends with </OL>
Each line in list begins with <LI> (no closing tag)
Each line will appear on web page as:
Indented
Preceded by a number
Unordered / Bulleted List
EXAMPLE:
<H3> Your Shopping List </H3>
<OL>
<LI> 1 Gallon Milk
<LI> 1 Box Cereal
<LI> 1 Pt. Strawberries
</OL>
RESULT:
Your Shopping List
1.
1 Gallon Milk
2.
1 Box Cereal
3.
1 Pt. Strawberries
Formatting with
Cascading Style Sheets
Styles pre-define formats
Allows changes to be made quickly
All styles are defined in one place
Makes for Global Formatting
Changes made in one place affects all
Best to put Style tag in HEAD section
Cascading Styles
Example:
All Body text to be centered
<HEAD>
<STYLE type = “text/css”>
Body {text-align: center}
</STYLE>
</HEAD>
<BODY>
etc …
Use STYLE tag to change
Heading Fonts / Alignment
Goes in the HEAD portion of code
Example:
<HEAD>
<TITLE> My First Web Page </TITLE>
<STYLE type = “text/css”>
H1 {font-size: 36pt; color: red}
H2 {font-size: 20pt; text-aligned: center}
</STYLE>
</HEAD>
<BODY>
<H1> MY FIRST WEB PAGE </H1>
<! Heading font has been redefined >
<! …etc … example of a comment … > (Will not show on page)
</BODY>
Syntax of STYLE tag
<STYLE TYPE = “text/css”>
H1 {font-size: 36pt; color: red}
H2 {font-size: 20pt; text-aligned: center}
</STYLE>
Always use the attribute TYPE=“text/css”
css is abbrev. For Cascading Style Sheets
Tag(s) to be redefined follows <STYLE … >
Do NOT place brackets around redefined tag
Use curly brackets around new style declarations
Inside {property, colon, value…} (use semi-colon to
separate)
Defining a CLASS for Style
Class used in two places
In HEAD Style definition
In Body text
HEAD EXAMPLE:
<STYLE type =“text/css”>
P {font-style: normal}
P.it {font-style: italics}
P.color {color: red}
</STYLE>
Defining a CLASS for Style
(Continued)
Class used in two places
In HEAD Style definition
In Body text
BODY Text EXAMPLE:
<P class = “it”> This text will be in italics </P>
<P> This text is not affected <\P>
<P class = “color”> This text is red <\P>
<P> This text is not affected <\P>
HTML to Show Use of Classes
RESULTING WEB PAGE
Mixing Classes with Other Tags
Adding a Bold
Tag
Mixing Classes with Other Tags
BOLD HAS BEEN ADDED
Adding a Horizontal Line
Placing a line or ruler across the page
Use the <HR> tag
No closing tag
Can change width and length of the line
Used to divide a page
Adding a Horizontal Line
Example:
<STYLE type = “text/css”>
HR {height:10; color: blue}
</STYLE>
<BODY>
<BR>
<BR>
<HR>
</BODY>
Result of Adding a Horizontal Line
10 Point Blue
Line inserted
Inserting Pictures / Graphics
Can include universal formats
.JPG
.GIF
(best for photographs)
(most browsers accept this format)
Use <IMG>
Must use SRC=“filename” attribute for source
EXAMPLE:
<IMG SRC=“A:\picturename.jpg”>
No closing tag
Inserting Pictures / Graphics
Can use ALT= alternate attribute to display
EXAMPLE:
<IMG SRC=“A:\picturename.jpg” ALT=“Company CEO”>
This will display “Company CEO” rather than the file
name (“A:\picturename.jpg”)
Other attributes available are HEIGHT, WIDTH,
FLOAT (causes browser to load quicker)
Height & Width are measured in pixels
Float defines position (Left, Right, Center)
Inserting Pictures / Graphics
EXAMPLE using Height, Width, Float
<IMG SRC=“A:\picturename.jpg” ALT=“Company CEO”
HEIGHT= “200” Width = “40”>
Better to use Classes for each image size
<STYLE type=“text/css”>
IMG.ceoPic1 {width: 40; height: 200; float: center}
</STYLE>
… body text …
<IMG SRC=“A:\picturename.jpg” class=“ceoPic1”
ALT=“Company CEO”>
References
http://www.w3schools.com/html/default.asp