1. CSCI N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Lists, Destination Anchors & New Windows

2. N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Goals By the end of today’s lecture, you should understand … … how to use the and elements.… how to use the and elements. … the difference between block elements and inline elements.… the difference between block elements and inline elements. … how to build lists.… how to build lists. … how to properly nest elements.… how to properly nest elements. … how to open links in new windows.… how to open links in new windows. … how to build destination anchors.… how to build destination anchors.

3. N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Introducing the Quote Element We can use the quote element,, for shorter quotations.We can use the quote element,, for shorter quotations. In Firefox, the quote element shows a double-quote around content.In Firefox, the quote element shows a double-quote around content. Why not just use the double-quotes?Why not just use the double-quotes? May I quote you on that?

4. N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science REMEMBER: HTML = Structure Although Firefox correctly displays the quotation marks for the element (some browsers might not display the quotation marks), the element itself carries more meaning.Although Firefox correctly displays the quotation marks for the element (some browsers might not display the quotation marks), the element itself carries more meaning. The element “tells” a browser that the content it encloses is a quote. Also, it might help attract search engines when folk are looking for a specific quote.The element “tells” a browser that the content it encloses is a quote. Also, it might help attract search engines when folk are looking for a specific quote. We can deal with browser stylistic differences using CSS later …We can deal with browser stylistic differences using CSS later …

5. N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Let’s Try it Out! Download and unpack the file called segwayJournal.zip to your storage device.Download and unpack the file called segwayJournal.zip to your storage device. Edit the file segwayJournal.html & find the quote that begins "A journey of a thousand miles” (near line 40).Edit the file segwayJournal.html & find the quote that begins "A journey of a thousand miles” (near line 40). Enclose the quote in the element.Enclose the quote in the element.

6. N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Adding a Little Style Add the following to your element:Add the following to your element: h2{ border-bottom: solid 1pt #000000; }q{ font-style: italic; } #image0820, #image0602 { text-align: center; }</style>

7. N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Introducing the Blockquote While we use the element for short quotes, we use the element for longer quotations.While we use the element for short quotes, we use the element for longer quotations. Unlike the, the is a block element. The is an inline element.Unlike the, the is a block element. The is an inline element. The stands by itself; we script the nested inside a or other block element.The stands by itself; we script the nested inside a or other block element.

8. N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Block vs. Inline Elements Block ElementsBlock Elements –The “building blocks” of websites; stand on their own –Separate content into blocks –Browsers display blank lines before & after a block element. –Examples include, …, & –Examples include, …, & Inline ElementsInline Elements –We usually nest them inside a block element. –Go within the flow of text –Examples include, & –Examples include, &

9. N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Let’s Try it Out! Edit the file segwayJournal.htmlEdit the file segwayJournal.html Find the Burma-Shave quote: "Passing cars, … Of eternity.” (near line 25).Find the Burma-Shave quote: "Passing cars, … Of eternity.” (near line 25). Enclose the quote in the element.Enclose the quote in the element.

10. N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science The Linebreak ELement The linebreak element,, allows us to break a line in the middle of a paragraph or other block element.The linebreak element,, allows us to break a line in the middle of a paragraph or other block element. We can use multiple elements in a row to create multiple blank lines.We can use multiple elements in a row to create multiple blank lines. The element is an empty (stand- alone) element – it doesn’t require a closing tag, since it has no content.The element is an empty (stand- alone) element – it doesn’t require a closing tag, since it has no content.

11. N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Let’s Try it Out! Edit the file segwayJournal.htmlEdit the file segwayJournal.html Find the Burma-Shave quote & put a at the end of each line (indicated with a comma).Find the Burma-Shave quote & put a at the end of each line (indicated with a comma). Put 4-5 elements at the end of each.Put 4-5 elements at the end of each.

12. N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science The Ordered List We can use the element to construct a list of ordinal (1…2…3 or A…B…C, etc.) items.We can use the element to construct a list of ordinal (1…2…3 or A…B…C, etc.) items. To open a list, we use ; we use to close it.To open a list, we use ; we use to close it. We enclose each list item in the element. This is called nesting.We enclose each list item in the element. This is called nesting.

13. N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Let’s Try it Out! Edit the file segwayJournal.htmlEdit the file segwayJournal.html Make an ordered list of the cities near the journal entry for August 20, 2005.Make an ordered list of the cities near the journal entry for August 20, 2005.

14. N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Changing the List Type We can change the list type to change the ordinal style. The default is 1…2…3.We can change the list type to change the ordinal style. The default is 1…2…3. We can update the list-style-type property using CSS, like this: ol { list-style-type: lower-roman; } We can update the list-style-type property using CSS, like this: ol { list-style-type: lower-roman; }

15. N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science list-style-type Values for list-style-type Values for VALUEDISPLAY decimal 1, 2, 3, 4, 5 … decimal-leading-zero 01, 02, 03, 04, 05 … lower-alpha a, b, c, d, e … upper-alpha A, B, D, D, E … lower-roman i, ii, iii, iv, v … upper-roman I, II, III, IV, V …

16. N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Changing the Starting Number We can change the list type to change the beginning value. The default start is 1.We can change the list type to change the beginning value. The default start is 1. The best way to do this is to update the counter-reset property using CSS. Unfortunately, this property is poorly supported by browsers (including Firefox).The best way to do this is to update the counter-reset property using CSS. Unfortunately, this property is poorly supported by browsers (including Firefox). We can also use the deprecated start attribute: We can also use the deprecated start attribute: The start value is always a decimal number, regardless of list type!The start value is always a decimal number, regardless of list type!

17. N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science The Unordered List We can use the element to construct a bulleted list.We can use the element to construct a bulleted list. To open a list, we use ; we use to close it.To open a list, we use ; we use to close it. Just like with the, we enclose each list item in the element. This is called nesting.Just like with the, we enclose each list item in the element. This is called nesting.

18. N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Let’s Try it Out! Edit the file segwayJournal.htmlEdit the file segwayJournal.html Make an unordered list of the items Tony took on his journey near the journal entry for June 2, 2005.Make an unordered list of the items Tony took on his journey near the journal entry for June 2, 2005.

19. N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Changing the List Type We can change the list type to change the bullet style. The default is a disc.We can change the list type to change the bullet style. The default is a disc. We can update the list-style-type property using CSS, like this: ul { list-style-type: square; } We can update the list-style-type property using CSS, like this: ul { list-style-type: square; }

20. N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science list-style-type Values for list-style-type Values for VALUEDISPLAY disc List ItemList Item circle oList Item square  List Item

21. N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Creating Your Own Bullets We make our own bullets by adding the list-style- image & list-style-position properties to the style rule. : ul { list-style-type: disc; list-style-image: url(images/smileyBullet.gif); list-style-position: outside; } We make our own bullets by adding the list-style- image & list-style-position properties to the style rule. : ul { list-style-type: disc; list-style-image: url(images/smileyBullet.gif); list-style-position: outside; }

22. N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Nesting Elements When we nest elements, we put one element inside another.When we nest elements, we put one element inside another. HTML syntax rules state that we close nested elements in the opposite order in which we open those elements.HTML syntax rules state that we close nested elements in the opposite order in which we open those elements.

23. N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Nesting Examples Correct: I am going to blog this. Correct: I am going to blog this. Incorrect: I am going to blog this. Incorrect: I am going to blog this. Example from Head First HTML, p 111.

24. N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Definition Lists We can use definition lists to list a term and define it.We can use definition lists to list a term and define it. Definition lists consist of three elements:Definition lists consist of three elements: –The element creates the list. –The element presents the term we are defining. –The element gives a description (definition) of the term.

25. N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Definition List Syntax <dl><dt>Indianapolis</dt><dd> A Midwestern city located in central Indiana; home to the Colts (football) and Pacers (basketball).</dd></dl>

26. N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Let’s Try it Out! Edit the file segwayJournal.htmlEdit the file segwayJournal.html Find the description of Burma Shave signs at the end of the document and change the description to a definition list.Find the description of Burma Shave signs at the end of the document and change the description to a definition list.

27. N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Character Entities Sometimes, we need to display a special symbol in our Web page text, or sometime we need to display a reserved character, like the > symbol.Sometimes, we need to display a special symbol in our Web page text, or sometime we need to display a reserved character, like the > symbol. To do this, we would use a character entity.To do this, we would use a character entity. We begin all character entities with a & symbol and end it with a ; (semi-colon).We begin all character entities with a & symbol and end it with a ; (semi-colon). To see a list of character entities, visit: http://www.w3schools.com/tags/ref_entities.aspTo see a list of character entities, visit: http://www.w3schools.com/tags/ref_entities.asp http://www.w3schools.com/tags/ref_entities.asp

28. N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Let’s Try it Out! Edit the file segwayJournal.htmlEdit the file segwayJournal.html Find the word “iPod” in the June 2, 2005, journal entry and add a copyright symbol after it.Find the word “iPod” in the June 2, 2005, journal entry and add a copyright symbol after it.

29. N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Making Images More Accessible Some browsers might not display images. To assist those browsers (and make our pages accessible to all users), it is a good idea to design our pages for non- visual, as well as visual, browsers.Some browsers might not display images. To assist those browsers (and make our pages accessible to all users), it is a good idea to design our pages for non- visual, as well as visual, browsers. To help with images, we can add the alt attribute to serve as a description of an image. The text we write for the description will take the place of an image for browsers that can’t display them.To help with images, we can add the alt attribute to serve as a description of an image. The text we write for the description will take the place of an image for browsers that can’t display them. For browsers that do show images, many will show the alt text as a “tooltip.”For browsers that do show images, many will show the alt text as a “tooltip.”

30. N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Syntax Example – alt Attribute <img src = “maps/indyMap.png” alt = “Map of Greater alt = “Map of Greater Indianapolis” /> Indianapolis” />

31. N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Let’s Try it Out! Edit the file segwayJournal.htmlEdit the file segwayJournal.html Add descriptions to the two photographs included in the file.Add descriptions to the two photographs included in the file.

32. N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science More on Accessibility We can also add descriptions to the links we create using the title attribute.We can also add descriptions to the links we create using the title attribute. The text value of the title attribute describes a link’s destination: WDVL The text value of the title attribute describes a link’s destination: WDVL

33. N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Let’s Try it Out! Edit the file segwayJournal.htmlEdit the file segwayJournal.html Find the link to the Segway company and add a title attrbute to it.Find the link to the Segway company and add a title attrbute to it.

34. N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Opening a Link in a New Window Many websites open links outside of their own domain in a new window.Many websites open links outside of their own domain in a new window. To force a link to open in a brand new browser window, we use the target attribute of the element.To force a link to open in a brand new browser window, we use the target attribute of the element. The target attribute takes a special value -- _blank.The target attribute takes a special value -- _blank. Example: Visit IUPUI Example: Visit IUPUI

35. N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Let’s Try it Out! Edit the file segwayJournal.htmlEdit the file segwayJournal.html Find the link to the Segway company and add a target force the link to open in a new window.Find the link to the Segway company and add a target force the link to open in a new window.

36. N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Building Destination Anchors In addition to linking to other web resources, we can build links to specific parts of a web page using destination anchors.In addition to linking to other web resources, we can build links to specific parts of a web page using destination anchors. First, we need to create the anchor. To do so, we use the element, combined with an id attribute, like this: My Biography First, we need to create the anchor. To do so, we use the element, combined with an id attribute, like this: My Biography

37. N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Linking to Destination Anchors To build a link to a destination anchor, we use also the element. We precede the href value with a # and use the anchor's id as the href 's value, like this: Read my biography. To build a link to a destination anchor, we use also the element. We precede the href value with a # and use the anchor's id as the href 's value, like this: Read my biography.

38. N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Linking to Destination Anchors II We can also link to a destination anchor on another web page. To do so, add the # and the anchor's id to the end of a page's name, like this: Read my biography. We can also link to a destination anchor on another web page. To do so, add the # and the anchor's id to the end of a page's name, like this: Read my biography.

39. N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Let’s Try it Out! Edit the file segwayJournal.htmlEdit the file segwayJournal.html Find the explanation of Burma Shave signs near the bottom of the page. Add an anchor named burmaShave to the explanation.Find the explanation of Burma Shave signs near the bottom of the page. Add an anchor named burmaShave to the explanation. Create a link to the anchor from the text "Burma Shave" in the July 14, 2005, journal entry.Create a link to the anchor from the text "Burma Shave" in the July 14, 2005, journal entry.

40. N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Questions?