Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "SMT WEEKLY TRAINING JAMES CAMIRE STEVE ECKMAN TIM STIFFLER DANNY SAX MARY SOWDERS CHRIS MAHAN LISA MAHAN PAUL ISHAM HTML and CSS."— Presentation transcript:

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

2 COURSE OBJECTIVES COURSE OUTLINE PRESENTATION SCHEDULE DETERMINE STRUCTURE AND APPROACH Introduction

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

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

5 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

6 THE LANGUAGE OF THE WEB Chapter 1

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

8 How Does it Render?

9 Chapter 1

10 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

11 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

12 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

13 Remember …

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

15 Exercise Output

16 MEETING THE ‘HT’ IN HTML Chapter 2

17 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

18 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

19 Organizing the Lounge

20 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

21 Bullet Points

22 Paths continued

23 Questions?

24 GOING FURTHER WITH HYPERTEXT Chapter 2

25 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

26 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

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

28 What does the browser do?

29 Understanding Attributes Attributes give you a way to specify additional information about an element.