SMT WEEKLY TRAINING JAMES CAMIRE STEVE ECKMAN TIM STIFFLER DANNY SAX MARY SOWDERS CHRIS MAHAN LISA MAHAN PAUL ISHAM HTML and CSS

COURSE OBJECTIVES COURSE OUTLINE PRESENTATION SCHEDULE DETERMINE STRUCTURE AND APPROACH Introduction

UNDERSTANDING OF COMPLEXITIES OF HTML DEEPER UNDERSTANDING OF HTML/CSS IMPROVE CUSTOMER COMMUNICATION THIS IS WHAT WE DO. Course Objectives

HTML BASICS BUILDING WEB PAGES XHTML CASCADING STYLE SHEETS TABLES, FORMS AND ADVANCED TOPICS Course Outline

JAMES CAMIRE – CHAPTERS 1, APPENDIX DANNY SAX - CHAPTERS 2, 9 STEVE ECKMAN - CHAPTERS 3, 10 TIM STIFFLER - CHAPTERS 4, 11 MARY SOUDER – CHAPTERS 5, 12 CHRIS MAHAN – CHAPTERS 6, 13 LISA MAHAN – CHPATERS 7, 14 PAUL ISHAM – CHAPTER 8 Presentation Schedule

THE LANGUAGE OF THE WEB Chapter 1

What Does HTML Look Like Head First Lounge Welcome to the Head First Lounge Join us any evening for refreshing elixirs, conversation and maybe a game orE two of Dance Dance Revolution. Wireless access is always provided; BYOWS (Bring your own web server). Directions You’ll find us right in the center of downtown Webville. Come join us!

How Does it Render?

Chapter 1

USE TEXT EDITOR SAVE BLANK FILE AS INDEX.HTML (NOTEPAD “) ADD HTML SAVE DOCUMENT OPEN BROWSER FILE -> OPEN SELECT INDEX.HTML FILE YOU CREATED VIEW OUTPUT. UPDATE FILE AND SAVE REFRESH BROWSER TO SEE CHANGES Creating our Page

AM I USING A SIMPLE TEXT EDITOR? AREN’T THERE POWERFUL TOOLS LIKE DREAMWEAVER, FRONTPAGE AND GO LIVE FOR CREATING WEB PAGES? I’M CREATING THESE FILES ON MY OWN COMPUTER – HOW AM I GOING TO VIEW THESE ON THE WEB/INTERNET? I’VE NOTICED THE HTML IN SOME PAGES DOESN’T ALWAYS MATCH OPENING TAGS WITH CLOSING TAGS. WELL, WHAT ABOUT THAT TAG IN THE LOUNGE EXAMPLE? DID YOU FORGET THE CLOSING TAG? Questions

AN ELEMENT IS AN OPENING TAG + CONTENT + CLOSING TAG, BUT CAN’T YOU HAVE TAGS INSIDE OTHER TAGS? LIKE THE HEAD AND BODY ARE INSIDE AN TAG? AN ELEMENT CAN HAVE AN “ATTRIBUTE?” WHAT DOES THAT MEAN? WHAT DOES THE ELEMENT DO? #D2B48C DOESN’T LOOK LIKE A COLOR. HOW IS #D2B48C THE COLOR “TAN”? More Discussion

Remember …

Exercise Starbuzz Coffee’s Mission body { background-color: #d2b48c; margin-left: 20%; margin-right: 20%; border: 1px dotted gray; padding: 10px 10px 10px 10px; font-family: sans-serif; } Starbuzz Coffee's Mission To provide all the caffeine that you need to power your life. Just drink it.

Exercise Output

MEETING THE ‘HT’ IN HTML Chapter 2

REVIEW THE HTML LOOK AT THE ANCHOR TAGS USE THE ELEMENT TO CREATE A HYPERTEXT LINK TO ANOTHER WEB PAGE. THE CONTENT OF THE ELEMENT BECOMES CLICKABLE IN THE WEB PAGE. THE HREF ATTRIBUTE TELLS THE BROWSER THE DESTINATION OF THE LINK. The Lounge

I JUST MAKE UP NEW ATTRIBUTES FOR AN HTML ELEMENT? HOW DO I KNOW WHAT ATTRIBUTES AND ELEMENTS ARE SUPPORTED? OR, CAN ALL ATTRIBUTES BE APPLIED TO ANY ELEMENT? I’VE SEEN MANY PAGES WHERE I CAN CLICK ON AN IMAGE RATHER THAN TEXT. CAN I USE THE ELEMENT FOR THAT? Questions

Organizing the Lounge

RELATIVE VS ABSOLUTE PATHS../ WHAT DOES IT MEAN WHAT’S A PARENT FOLDER? IF I HAVE A FOLDER “APPLES” INSIDE A FOLDER “FRUIT”, IS “FRUIT” THE PARENT OF “APPLES”? WHAT DO YOU DO IF YOU NEED TO GO UP TWO FOLDERS INSTEAD OF JUST ONE? MY OPERATING SYSTEM USES “\” AS A SEPARATOR; SHOULDN’T I BE USING THAT INSTEAD OF “/”? HTML Document Paths

Bullet Points

Paths continued

Questions?

GOING FURTHER WITH HYPERTEXT Chapter 2

Adding text for the link in an Tag Element Understanding Attributes Getting Organized Linking to a Subfolder Linking to a “Parent” Folder Fixing Broken Images

Adding text for the link in an Tag Element Element used to create a link to another page Content of the element acts as a label for the link. Appears with an underline in your browser. (Clickable) Example elixirs and driving directions  In your browser, “elixir” will be underlined to indicate it is clickable.  For more information Click Here

Telling the Browser Were to Point. Href attribute is how you specify the destination of the link. Implemented within an tag  Example: driving directions  Directions.html is the URL you are linking to  Driving directions is the title that when clicked, will take you to the directions.html.

What does the browser do?

Understanding Attributes Attributes give you a way to specify additional information about an element. <style type=“text/css”  Specifies which style language is being used. (CSS)  Href attribute tells us the destination of a hyperlink  Src attribute specifies the filename of the picture an img tag displays. You are not able to make up new attributes because the browser would not know what to do with them.

Getting Organized Top level folder: Holds all files in the site  AKA- “Root” folder of the site

Linking to a Subfolder Identify the source and the destination Create an href to represent the path traced. elixirs  Beverages (source)  Elixir.html (destination)  / separates all parts of the path Now the browser will look for the “elixir.html” file under the “beverages” folder

Linking to a “Parent” Folder Identify the Source and the Destination Create an href to represent the path traced Use “..” to go up a folder. This is because…. Use / to separate the path, enter the fole name after the /. Example: Back to the Lounge

Fixing Broken Images Was

Remember…

BUILDING BLOCKS: WEB PAGE CONSTRUCTION Chapter 3

Recap: Tags start with and end with Picture Names and Page Names surrounded by either “ “ or ‘ ‘ Available attributes determined by tag type Paths can be absolute, relative, or ?? GoTo

Web Construction Roadmap

Testing 1, 2, 3

Additional Common Elements The quote element To be or not to be HTML: “To be or not to be” Web view: Why?? Hint: Something to do with versioning…

Additional Common Elements What’s the difference? When to use? There is a quote from Hamlet that begins To be or not to be. This famous quote has… ….. Yesterday is ashes, Tomorrow wood. Only today does the Fire burn brightly. Inline elementBlock element

= linebreak is an empty element. Can you think of another empty element? Blockquote displays as if a occurs before and after it.

,, and is the list element. Is it a block or an inline element? defines the list items as ordered. defines the list items as unordered. Are and block or inline elements? What does add to the list items? ALL list items are defined must be either ordered or unordered.

Nesting

Elements To-Date h1block ainline eminline ulblock brhm… liblock olblock imginline q blockquoteblock