exploring office 2003 – grauer and barber web creation & design using html chapters 1 - 2 bcis...
TRANSCRIPT
Exploring Office 2003 – Grauer
and Barber
WEB Creation & Design using HTML
Chapters 1 - 2
BCIS 1405 Session 14
Browsing the World Wide Web
History of the WWWHTTP
HyperText Transfer ProtocolUniform 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 Individuals
.tv 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 PageQuestions 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 PageRules 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 codeExample:
<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 DocumentPhysical Tags
<B> … </B> Bolds text
<I> … </I> 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 DocumentLogical Tags (Browser Dependent)
<EM> … </EM> Italicizes text
<STRONG> … </STRONGI> Bolds text
<DEL> … </DEL> Strikes through text<INS> … </INS> 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