HTML Chapter 1-2

Download Report

Transcript HTML Chapter 1-2 

WEB Creation &
Design using HTML
Chapters 1 - 2
BCIS 1405 Session 14
Exploring Office 2003 – Grauer and Barber
Browsing the
World Wide Web
 History
of the WWW
 HTTP

HyperText Transfer Protocol
 Uniform

Resource Locator
URL or Web Address/Path
GLOBAL WWW SUFFIXES
SUFFIX
TYPE OF ORGANIZATION
.com
Commercial
.org
Nonprofit
.net
Networks
.biz
Businesses
.info
Information organizations
.name
.tv
Individuals
Television & Multimedia
SPONSORED WWW SUFFIXES
SUFFIX
TYPE OF ORGANIZATION
.gov
U.S. Government
.mil
U.S. Military
.edu
U.S. Educational Institutions
.int
International Organizations
.aero
Aviation Industry Members
.coop
Cooperatives
.museum
Museums
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
Planning a Web Page
Questions to ask





What is the purpose of Web presentation?
Who is the audience?
What information am I trying to convey?
How will I organization the information?
How can I make it attract visitors?
Structure of Web Page
Rules of Thumb
Consistent layout for each page
 One topic per page
 Keep pages short so scrolling not
necessary
 Avoid large graphics at the top
(Takes too long to load)

Design Checklist





Be brief
Be clear
Use simple language
Check spelling & grammar
Try out presentation in more than one
browser
Use Features to Tie it all Together







Use Lists or menus
Avoid links that are not relevant
Use consistent terms & icons
Use same banner or logo on each page
Use consistent layout
Use return link to home page on all pages
Make sure links are current
More Features to Tie it all Together






Avoid graphics that are not relevant
Include alternative text with every graphic
Each page should be able to stand alone
Avoid over-emphasizing / over-formatting
Contrast text from background (readability)
Use horizontal lines to separate sections of
the page
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
Body Section of Web Page
Contains information you want
displayed
 Graphics when desired
 Links to other pages
 Links to another segment of same
page

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
<H2> … </H2> Next largest
<H6> … </H6> Smallest font size

Used to organize the body
 Think “Newspaper Headlines”
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)
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>
Bolds text
Italicizes text
<CENTER> … </CENTER>
Centers text
<U> … </U>
Underlines text
<STRIKE> … </STRIKE> Strikes through text
<SUB … </SUB>
Text Subscript
<SUP> … </SUP>
Text Superscript
Enhancing Text in a Document
Logical Tags (Browser Dependent)
<EM> … </EM>
<STRONG> … </STRONGI>
<DEL> … </DEL>
<INS> … </INS>
Italicizes text
Bolds text
Strikes through text
Underlined text
NOTE:
Why use these?
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
