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

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

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

4. 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

5. Example of Address of HCCS Computer Science Dept. Computer Science Department or http://csci.hccs.edu

6. 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

7. 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

8. 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?

9. 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)

10. Design Checklist Be brief Be clear Use simple language Check spelling & grammar Try out presentation in more than one browser

11. 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

12. 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

13. 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 …

14. 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

15. Body Section of Web Page Contains information you want displayed Graphics when desired Links to other pages Links to another segment of same page

16. Structure of a Web Document title text … all the information you want displayed

17. 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

18. 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”

19. 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)

20. 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)

21. 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 )

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

23. 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

24. 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)

25. 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

26. 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

27. 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

28. 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

29. 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