Exploring Office 2003 – Grauer and Barber WEB Creation & Design using HTML Chapters BCIS 1405 Session 14

Browsing the World Wide Web History of the WWW HTTP  HyperText Transfer Protocol Uniform Resource Locator  URL or Web Address/Path

GLOBAL WWW SUFFIXES SUFFIXTYPE OF ORGANIZATION.com Commercial.org Nonprofit.net Networks.biz Businesses.info Information organizations.name Individuals.tv Television & Multimedia

SPONSORED WWW SUFFIXES SUFFIXTYPE 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

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 symbol  Most tags end with symbol (some exceptions) Example: … headings & body of web page …

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 title text … all the information you want displayed

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 that is similar to title  It will then appear as text in the web page There are six levels of headings … Largest font … Next largest … 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: My First Web Page H1 {font-size: 36pt; color: red} H2 {font-size: 20pt; text-aligned: center} MY FIRST WEB PAGE (Will not show on page)

Syntax of STYLE tag H1 {font-size: 36pt; color: red} H2 {font-size: 20pt; text-aligned: center} Always use the attribute TYPE=“text/css”  css is abbrev. For Cascading Style Sheets Tag(s) to be redefined follows 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 tags LINE BREAKS  Use line break but no double spacing  does not have a closing tag (no )

Enhancing Text in a Document Physical Tags … Bolds text … Italicizes text … Centers text … Underlines text … Strikes through text Text Subscript … Text Superscript

Enhancing Text in a Document Logical Tags (Browser Dependent) … 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 Text to be formatted 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: Heading Message Results: Heading Message

Creating Lists Bulleted list (unordered list) Numbered list (ordered) Unordered list  Begins with tag and ends with  Each line in list begins with (no closing tag)  Each line will appear on web page as: Indented Preceded by a bullet

Unordered / Bulleted List EXAMPLE: Your Shopping List 1 Gallon Milk 1 Box Cereal 1 Pt. Strawberries RESULT: Your Shopping List  1 Gallon Milk  1 Box Cereal  1 Pt. Strawberries

Creating Lists Numbered list (ordered) Ordered list  Begins with tag and ends with  Each line in list begins with (no closing tag)  Each line will appear on web page as: Indented Preceded by a number

Unordered / Bulleted List EXAMPLE: Your Shopping List 1 Gallon Milk 1 Box Cereal 1 Pt. Strawberries RESULT: Your Shopping List 1. 1 Gallon Milk 2. 1 Box Cereal 3. 1 Pt. Strawberries