1. IT 117 - Introduction to Website Development Welcome!

2. Welcome to Unit 4! Fonts, Lists, and Accessibility This week’s reading: PDF file Formatting and CSS Textbook Reading for this Unit: Review lesson 3 in the textbook and review the labs.

3. Introduction In this unit, you will practice the use of the, tag pairs to assist in creating lists and division within documents. You will also begin looking at the use of CSS on your web pages to ensure a standard for the rest of the projects introduced within class.

4. To-Do-List Review Key Terms On the Reading page Read Assigned Text On the Reading page Respond to the Discussion Board 30 Points Lists, Cascading Style Sheets, and Deprecated Tags Complete the unit project and upload to assignment dropbox for grading 50 Points On the Assignment page Attend the Weekly Seminar or complete the FLA quiz 20 Points Log in from Student's Home page

5. Readings Overview In learning XHTML, the important items to understand right away include the use of various tag pairs to help manipulate a basic outcome on a web page. In this unit, you will be looking at tag pairs that create ordered and unordered lists as well as how to create a division within a document. This will enable you to better manipulate the elements on our web page in a more organized fashion. You will also begin using CSS on your web pages so that all of your pages from this point forward consist of a standard look and feel. CSS is a best practice and should be used where possible in any web project.

6. Readings Overview Textbook Reading Summary: Early in this chapter, you will see references to CSS layout templates. We will not be using these as we will be learning to create our own templates. The rest of the chapter is great preparation for what lies ahead.

7. Seminar Overview This week’s Seminar session is about Lists and CSS. We will discuss the various options and when it is appropriate to use CSS.

8. HTML Review Lists HTML lists are one of the most useful tools for organizing the text on your page. This Page Resource.com website also contains an excellent explanation of HTML lists. Follow the directions below to read the article entitled “Using HTML Lists.” Go to http://www.pageresource.com/html/listhelp.htm. http://www.pageresource.com/html/listhelp.htm Read the article title “Using HTML Lists.”

9. HTML Review HTML Unordered Lists – what tags would we use?

10. HTML Review HTML Unordered Lists An unordered list starts with the tag. Each list item starts with the tag. The list items are marked with bullets (typically small black circles). Coffee Milk How the HTML code above looks in a browser:  Coffee  Milk

11. HTML Review HTML Ordered Lists – what tags would we use?

12. HTML Review HTML Ordered Lists An ordered list starts with the tag. Each list item starts with the tag. The list items are marked with numbers. Coffee Milk How the HTML code above looks in a browser: 1. Coffee 2. Milk

13. CSS Review What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem External Style Sheets can save a lot of work External Style Sheets are stored in CSS files

14. CSS Review Styles Solved a Big Problem HTML was never intended to contain tags for formatting a document. HTML was intended to define the content of a document, like: This is a heading This is a paragraph.

15. CSS Review When tags like, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large web sites, where fonts and color information were added to every single page, became a long and expensive process. To solve this problem, the World Wide Web Consortium (W3C) created CSS. In HTML 4.0, all formatting could be removed from the HTML document, and stored in a separate CSS file. All browsers support CSS today.

16. CSS Review A CSS rule has two main parts: a selector, and one or more declarations: h1 {color:blue; font-size:12px;} The selector is normally the HTML element you want to style. Each declaration consists of a property and a value. The property is the style attribute you want to change. Each property has a value.

17. CSS Review The id and class Selectors In addition to setting a style for a HTML element, CSS allows you to specify your own selectors called "id" and "class". What is the difference between them?

18. CSS Review The id Selector The id selector is used to specify a style for a single, unique element. The id selector uses the id attribute of the HTML element, and is defined with a "#". The style rule below will be applied to the element with id="para1“:

19. CSS Review The id Selector Example: #para1 { text-align:center; color:red; }

20. CSS Review The class Selector The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements. This allows you to set a particular style for any HTML elements with the same class. The class selector uses the HTML class attribute, and is defined with a "."

21. CSS Review The class Selector Example: In the example below, all HTML elements with class="center" will be center-aligned:.center {text-align:center;}

22. CSS Review Three Ways to Insert CSS: External style sheet Internal style sheet Inline style

23. CSS Review External Style Sheet An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the tag. The tag goes inside the head section:

24. CSS Review External Style Sheet An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be saved with a.css extension.

25. CSS Review Internal Style Sheet An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, by using the tag, like this: hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");}

26. CSS Review Inline Styles An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly! To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph: This is a paragraph.

27. Project 4 Outcomes addressed in this activity: Unit Outcomes: Create an ordered list. Create an unordered list. Employ the use of CSS Course Outcome: IT117-2: Create websites using web page building blocks. IT117-4: Create cascading style sheets for Websites.

28. Project 4 Remember: All of your Web pages should include the DOCTYPE statement above the opening html tag, like this: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd All your Web pages are also required to contain the tag pair within the head section, like this: Your Name, Career Information

29. Project 4 Project Instructions: The project for this week includes two parts: Part 1: Create a new web page named career.htm Part 2: Edit and revise the external CSS file named externalstylesheet.css

30. Project 4 Part 1: Create a Web page Create a Web page and name it career.htm and make sure it includes the Doctype statement, basic html tags; html, head, title, and body. Use the tag for the heading at the top of the Web page. (e. g. “My Career Future”) and use tags for subheadings. Create an ordered list to apply to the following: At least two possible career choices Potential salary scale for each career

31. Project 4 Create an unordered list to apply to the following: Skills and education you already possess to work in your chosen field Skills you plan to learn in the future. Conduct a search for job titles such as web designer, web developer, etc. Choose either a nationwide search or one specific to your region. We recommend starting your search for career information at the US government's Occupational Outlook Handbook at http://www.bls.gov/oco/oco1002.htm#comp Computer-related careers can be found in the "Professional" category. (links are listed in the assignment). http://www.bls.gov/oco/oco1002.htm#comp

32. Project 4 Add a link to externalstylesheet.css in the head section of career.htm. (hint: Just like you did in bio.htm and index.html) Use h1 tag for the name at the top of the Web page. (e. g. “My Career Future”) Use the following tags where appropriate:  paragraph  line break Save and close career.htm Upload career.htm to your Web space In your browser, type the complete URL to view career.htm live on the Web.

33. Project 4 Part 2: Revise externalstylesheet.css  Open “externalstylesheet.css” in Notepad.  Edit and modify values of the CSS body rule to change the formatting for each property. Remember, the values follow the colon. For example, #ffdfd0 is the color that will be assigned to the body background property. Change these values to your own choices. body { background-color: #ffdfd0; font-family: Times New Roman, Garamond, Serif; font-size: 18px; color: #00008b; }

34. Project 4  Next, do the same thing to the H1 CSS rule. Change at least 2 of the 3 property values. h1 { text-align: center; font-family: Arial, Verdana, Sans-Serif; color: #0000ff; }  Save your changes to externalstylesheet.css. Make sure to change the ‘Save as Type’ to ‘All Files’ so the.txt file extension is not appended to the end of the file name.

35. Project 4 Upload your modified externalstylesheet.css file to your Web space. View career.htm live on the web again and note the differences the modified CSS file made to the appearance. Also view index.html and bio.htm live on the Web and note the changes. Since externalstylesheet.css is linked to all three files, all will have the same style attributes.

36. Project 4 - Grading Rubrics 1. Revised externalstylesheet.css as specified : 0-10 2. Created a new web page named career.htm which includes: 0-15  Possible career choices.  How much each career choice may pay.  Skills and education you already possess to work in your chosen field.  Skills you plan to learn in the future to better prepare you.  Any other information that may help you to prepare for your career future  The 4 basic html tags; html, head, title and body.

37. Project 4 - Grading Rubrics 3. Applied the h1 tag somewhere within the career.htm file. : 0-5 4. career.htm includes one properly formatted unordered list : 0-10 5. career.htm includes one properly formatted ordered list : 0-10

38. Thank you! Feel free to contact me with any questions! emartignon@kaplan.edu emartignon@kaplan.edu Use the Virtual Office to post questions throughout the week, as well as to upload your zipped folder if you need me to look at the code!