HTML

1. HTML For the World Wide Web

2. Online Scrapbooks Scrapbooking is a popular hobby of creating albums containing photographs, memorabilia, writing, and other embellishments. This hobby has become a multimillion-dollar industry with companies that specialize in scrapbooking supplies and support. One of these companies is Online Scrapbooks. Kathy Pridham, who leads the web development team at Online Scrapbooks, has hired you to work on the style for the new company’s website. The website’s home page will have information on how to get started scrapbooking and links to other pages that contain a wide variety of information. Because the website will have so many pages, Kathy is using Cascading Style Sheets to manage the layout, design and function of the pages. She has a style sheet providing the site’s basic layout and design. She would like you to add features such as graphical bullets, rollover effects and drop caps. To make these enhancements, you will need to use some of the special features supported by CSS.

3. Online Scrapbooks Kathy knows that many users want to access the website from mobile devices while others want to be able to print some of the site’s contents. She wants the site to work with any kind of output, including mobile devices and printed output. Kathy has already created the basic web page describing how to get started in scrapbooking. She’s written an article and created the basic web page layout using an external style sheet. She’s provided you with her HTML document, her graphic files, and her style sheet to study. Kathy suggestes that this web page would be a good place to start in your task of enhancing her basic design.

4. Collect your Files • Create a folder called scrapbook and download the start.htm, scraps.css files from the scrapbook folder on the class website. • Open these files in notepad and add your name and date in the comment sections. • Review the contents of both files to become familiar with their structure. • Open start.htm in your web browser to view its current appearance.

5. Contextual Selectors • So far the only styles you have worked with are ones where the style selector references either an entire element, a group of elemetns, or an element identified by an id. For example: b {color: blue} displays all bold face text in a blue font color. What would you do if you did not want every instance of bold face text to be blue? What if you only wanted the bold text in an ordered list to be blue? This is where we will set the context for the styles using Contextual Selectors.

6. Contextual Selectors • We will take advantage of the hierarchy of elements in CSS to create a context for styles that apply to our web page. • The general syntax of a contextual selector is: parent descendent {styles} Where parent is the parent element, descendent is the descendent element of the parent, and styles are the styles to be applied to the descendent element. For example, to apply a blue color only to boldface text found in a list item use: li b {color: blue}

7. Contextual Selectors using id • Contextual Selectors can also be applied with elements marked with a specific id. The style: #notes b {color: blue} Displays bold text in a blue font if it is nested within an element with the id=“notes” • Other forms of Contextual Selectors

8. Attribute Selectors • Sometimes you may need to be more specific in identifying the element that you want to style. You can use attribute selectors to accomplish this. The Attribute selector has the general form: element [attribute] {style} Where element is the element name and attribute is the attribute to be styled. For example: a [href] {color: blue} will make all links on the page blue.

9. Attribute Selectors

10. Applying Selector Paterns • After discussing how to use selector patterns with Kathy, you decide to apply them to the Getting Started web page. You decide to create a style for the h2 heading in the Basic Materials box. Kathy wants to center this heading, change the background color to white, reduce the top margin to 0 pixels, and add a solid orange border to the bottom of the element. You notice that this element is within the div container identified with the id=pullout.

11. Add a Contextual Selector to the Style Sheet • Open the scraps.css file in notepad. • Directly below the style for the #pullout selector, insert the following style: #pullout h2 {text-align: center; background-color: white; margin-top: 0px; border-bottom: 2px solid orange} • Save the changes to the file and open the start.htm file in your browser. Notice that the only h2 header affected is in the pullout box titled Basic Materials

12. Applying Styles to Lists • Kathy has her web page links in an unordered list that is displayed in a box floated on the left page margin. Like all unordered lists, the browser displays the items in this list with bullet markers. Kathy would like to remove the bullet markers from this list. To remove the markers you can apply one of the many CSS list styles. To do this you can apply the following style: list-style-type: type Where type is one found in the following table.

13. List Style Types

14. Make Your Own List Markers • If you do not find a list marker that you like you can define one of your own. • To use a graphic image as a list marker use the following style: ul {list-style-image: url(filename.gif)} Where filename.gif is the name of an image file in the website folder.

15. Adding List Markers • Kathy wants the list of links to appear without any bullets and she wants the list of Basic Materials to appear with a bullet that she has in a the bullet.jpg file. • The list of Basic Materials appears in the div container with an id=pullout. • The list of links appears in the div container with the id=links.

16. Apply a list style to the CSS • Return to the scraps.css file in notepad. • Directly below the style for the #links selector enter the following: #links ul {list-style-type: none} • Directly below the style for the #pullout h2 selector, enter the following: #pullout ul {list-style-image: url(bullet.jpg)} • Save your changes and refresh the start.htm file in your browser. Verify that the lists have changed the way you want them to.

17. Defining the List Position and Layout • Kathy likes the revised list markers, but she thinks that there is too much space to the left of the lists. She would like you to modify the layout to remove the extra space. You can change the position of the list using the following style: list-style-position: position Where position is either “outside” (default) or “inside”. Placing the marker inside of the block causes the list text to wrap around the list marker. See the next slide for examples.

18. Examples of List Positons • Acid-free paper, card stock, and stickers • Acid-free pen, markers, and adhesive • Acid-free memory book album • Straight and pattern edge scissors • Photos and photo corners • Paper punches • Journaling templates • Decorative embellishments • Acid-free paper, card stock, and stickers • Acid-free pen, markers, and adhesive • Acid-free memory book album • Straight and pattern edge scissors • Photos and photo corners • Paper punches • Journaling templates • Decorative embellishments Inside Outside

19. Change the Margins and Padding • Return to the scraps.css file in notepad. • Add the following style to the #links ul selector: #links ul {list-style-type: none; magin-left: 15px; padding-left: 0px} • Save your changes and refresh the start.htm file in your browser. Verify that both lists moved slightly to the left.

20. Working with Classes • The class attribute is used when you want to identify elements that share a common characteristic. The general form of the class attribute is: <tag class=“class”>…..</tag> Where tag is a tag in the body of the web page and class is the name that identifies the class. For example: <h2 class=“subtitle”>Getting Started</h2> <h2 class=“subtitle”>Preserving Your Memories</h2> Marks both h2 headings as part of the subtitle class.

21. Applying Styles to Classes • The advantage of using the class attribute is that you can use it to assign the same style to multiple elements sharing the same class. The style selector for a class is: .class {styles} Where class is the name of the class and styles are the styles to be applied to the multiple elements. For example: .subtitle {color: blue} will make all of the elements in the class subtitle a blue font.

22. Specify the element • Because the same class can be used with different types of elements, you may need to specify which element is to receive the style. • This is done using the selector: element.class {styles} Where element is the element to be styled, class is the name of the class and styles are the styles to be applied. For example: h2.subtitle {color: blue} Will make all of the h2 headings with class name subtitle a blue font.

23. Create a style for a class of elemetns • Open the start.htm file in notepad. • Locate the <div> element containing the list of links and insert the class attribute in the opening <li> tag for the Home link <li class="newgroup"><a href="#">Home</a></li> • Repeat this step for the Online Store, and About Us links. • Save your changes.

24. Apply a style to the newgroup class • Return to the scraps.css file in notepad. • Directly below the style for the #links ul selector, insert the following: #links li.newgroup {margin-top: 15px} • Save your changes and refresh your start.htm file in your browser. Verify that the links have been separated into three groups.

25. Creating a Link Rollover • Rollover effects for links can be created using pseudo-classes. A pseudo-class is a classification of a element based on its • Current status • Current position • Use in a document • To create a pseudo-class use this style: selector:pseudo-class {styles} Where selector is an element or group of elements in a document, pseudo-class is the name of the pseudo-class and styles are the styles to be applied

26. Pseudo-classes

27. Pseudo-class cascading rules • In some cases two or more pseudo-classes can apply to the same element. In this case the one that is listed last in the style sheet will be applied to the element. • You should list the pseudo-classes in an order that reflects how a user will interact with them. • link • visited • hover • active

28. Create a Rollover Effect for Hypertext Links • Kathy wants to remove the underlining from all of the links on her Getting Started page. If the mouse pointer is hovering over a link she wants the link text to appear in a black font and underlined. The styles to create these effects are: #links a:link {text-decoration: none} #links a:visited {text-decoration: none} #links a:hover {color: black; text-decoration: underline} #links a:active {text-decoration: none} Insert these styles after the #link li.newgroup selector in the scraps.css file. Save your changes and verify that the rollover effect works on all of the links on the start.htm file in your browser.

29. Presentation Pseudo-elements • Kathy would like to make a few more formatting changes. She wants to add the following effects: • The first line of should be displayed in small caps style • The first letter should be increased in size and displayed in as a drop cap. • To do this we will use pseudo-elements. Pseudo-elements are not part of the html document but are derived from what is known about the content, use or position of an element.

30. Pseudo-elements

31. Why use Pseudo-elements • The advantage of using pseudo-elements is that you do not have to mark the first letter, first line in the HTML document. Their positions are inferred from their position in the paragraph <p> element. • To create a drop cap you simply increase the font size of the first letter in the paragraph by using the first-letter pseudo-element.

32. Create the drop effect • Return to the scraps.css file in notepad • Directly above the style for the #article selector, insert the following two styles: #firstp:first-line {font-variant: small-caps} #firstp:first-letter {float: left; font-size: 400%; line-height: 0.8} • Save your changes and refresh the start.htm file in your browser. Verify that the first letter and first line of the first paragraph have been changed.