2. Jozef Goetz, 2012 1 © 2011-13 Pearson Education Copyright (c) 2009 Prentice-Hall. All rights reserved. expanded by J. Goetz, 2012

3. Jozef Goetz, 2012 2 Learning Outcomes In this chapter, you will learn about: Code relative hyperlinks to Web pages in folders within a Web site Configure a hyperlink to a named anchor internal to a Web page Configure images with CSS sprites Configure three-column page layouts using CSS Configure CSS for both screen and print display Configure CSS for mobile display Utilize CSS3 media queries to target mobile devices

4. Jozef Goetz, 2012 3 3 Creating Links Opening Tag Closing Tag Text that will be highlighted URL

5. Jozef Goetz, 2012 4 4 HTML/XHTML tag The anchor tag Used to specify a hypertext reference (href) to a web page you want to display. The text between the and is displayed on the web page href Attribute used to indicate the document to link to Syntax: text Absolute link Yahoo indicates the protocol http:// being used Relative link Home

6. Jozef Goetz, 2012 5 5 5 Copyright (c) 2006 Prentice-Hall. All rights reserved. Effects of, href, and title Tool tip generated by title="Home Page Link" Displayed text generated by text between the tag and the tag Click here to go to our home page! Mouse pointer changes when hovered over the link When user clicks, the page opened will be based on href="home.htm"

7. Jozef Goetz, 2012 6 6 More on Relative Linking Absolute URLs include a full path - both the domain name + the file name Domain name – the computer's unique name on the Internet Relative URLs – include only the file name, not the domain name Refer to files to the current file (position) on the same Web server Therefore URL refers to the same domain name

8. Jozef Goetz, 2012 7 7 Anatomy of a URL URL - Uniform Resource Locator URLs are global addresses of documents and other resources on the Web Parts of URLs there are three parts: protocol - the way the page is accessed host name ( = Web server name + domain name) – the system on which the page is stored directory & filename - location of the page on the host system http://www.w3.org/TR/html4/intro/intro.html protocoldirectory and filename host name

9. Jozef Goetz, 2012 8 8 More on Relative Linking Relative pathnames point to files based on their locations relative to the current file (position. ) To specify relative pathnames link to Web pages within your site use UNIX-style pathnames regardless of the system directory names are separated with a forward slash (/) use two dots (..) to refer to the (parent) directory above the current directory From the groomer directory: Contact Collars //now from the collars.htm level Home Dog Bathing <= Relative links from the home page: index.htm

10. Jozef Goetz, 2012 9 9 Linking Local Pages Using Relative and Absolute Pathnames Examples of Relative pathnames: href=“index.html” href=“resumes/jaden.html” href=“jobs/software/javaprogrammer.html” href=“../news/company.html” href=“../../products/widget.html” href=“../../../officers.html”

11. Jozef Goetz, 2012 10 Linking Local Pages Using Relative and Absolute Pathnames Absolute pathnames point to files based on their absolute location on the file system (root) or to other websites begin with a forward slash (/) Absolute pathnames: href=“/index.html” href=“/resumes/jaden.html” href=“/d/jobs/software/javaprogrammer.html ”

12. Jozef Goetz, 2012 11 Linking Local Pages Using Relative and Absolute Pathnames Which should you use? Relative pathnames: use to link between your documents can move the site from one server to another and the links will still work -- portable easier to maintain Absolute pathnames easier on complicated sites but they are not portable

13. Jozef Goetz, 2012 12 Links to Other Documents on the Web Linking to remote documents these are documents that are not on the system which you are currently working use the URL of the remote site http://the.url.com/of/the/remote/page.html

14. Jozef Goetz, 2012 13 Opening a Link in a New Browser Window The target attribute can be used on the anchor tag to open a link in a new browser window. Yahoo! HOP 7.2

15. Jozef Goetz, 2012 14 Linking to Specific Places Within Documents Anchors are special places that you can link to inside documents. Soft Fruits Please choose a subtopic : Strawberries Cane Fruits Blackberries Raspberries Loganberries Bush Fruits: Blueberries Huckleberries Softfruits.html Blackberries Blackberries grow on canes Blueberries Blueberries grow on bushes in colder climates Strawberries Strawberries are an herbaceous plant Softfruits.html

16. Jozef Goetz, 2012 15 Copyright (c) 2006 Prentice-Hall. All rights reserved. This line has Back To Top Clicking here takes you to the top of the page (no need for an anchor named "top" HTML Linking to Fragment Identifiers

17. Jozef Goetz, 2012 16 HTML/XHTML Internal Links using the tag A link to a part of a web page Also called bookmarks, named fragments, named anchors 2 components: 1.Establish target – named fragment : identifies a bookmark or named fragment of a web page. This requires two attributes: the id attribute (for HTML/XHTML) and the name (for Netscape 4) attribute. Or: “a” can be h1 or 2. Reference target - anchor tag ( pointer) : links to the bookmark or named fragment of a web page. This uses the href attribute Back to Top Or: Skip to content

18. Jozef Goetz, 2012 17 Linking to Specific Places Within Documents – Internal Links Creating anchors and linking to them creating an anchor is similar to creating a link the tag is used the attribute “name” (or “id” ) is used instead of “href” the “name” (or “id” ) attribute takes a key word to uniquely identify the anchor on the page anchors require text between the opening and closing tags

19. Jozef Goetz, 2012 18 Copyright (c) 2006 Prentice-Hall. All rights reserved. Effects of Within-Page Linking This line has Can a duck fly if it's wet? This line has Can a duck fly if it’s wet? Clicking here takes you to the "duck" line

20. Jozef Goetz, 2012 19 Creating and Linking to Within-Page Targets 1. The tag's name attribute Creates a target at the location of the anchor tag Commonly used on longer Web pages Syntax: link text Example anchors Education Dinner 2. The pound (#) symbol in an href attribute References one of the named anchor tags Value after the pound sign must be identical to name of an anchor Syntax : link text

21. Jozef Goetz, 2012 20 Linking to Specific Places on another Documents/Website 1. Linking to anchors in the same page use the hash mark (#) and the anchor name only What’s for dinner? 2.Linking to anchors on another page use the same form as you would to link to the page add a hash mark (#) and the name of the anchor at the end Education 3. Linking to anchors on another website by appending a hash mark (#) and name value What’s for dinner?

22. Jozef Goetz, 2012 21 HOP 7.1 start: starter1.html output: favorites.html

23. Jozef Goetz, 2012 22 Remainder: Email Links using the tag An e-mail link will automatically launch the default mail program configured for the browser: me@hotmail.com

24. Jozef Goetz, 2012 23 Copyright (c) 2006 Prentice-Hall. All rights reserved. Links in HTML/XHTML 2.0 In HTML/XHTML 1.x, href attributes are confined to anchor tags Example, to make a header with a link requires: Web Design at About In HTML/XHTML 2.0, any tag can include an href attribute Example, to make a header with a link: Web Design at About No anchor tag necessary

25. Jozef Goetz, 2012 24 HOP 7.2 start: favorites.htm output: target.html target=“_blank” - the page is open in a new window or tab if it is put in

26. Jozef Goetz, 2012 25 HTML5 Block Anchor Configure block display elements (e.g. h1, div or paragraph) within a hyperlink HTML5 Reference Bookmark this site for a handy HTML5 reference. 25

27. Jozef Goetz, 2012 26 Telephone & Text Message Hyperlinks Telephone Scheme Call 888-555-5555 Many mobile browsers will initiate a phone call when the hyperlink is clicked. SMS Scheme Text 888-555-5555 Many mobile browsers will initiate a text message to the phone number when the hyperlink is clicked. 26

28. Jozef Goetz, 2012 27 CSS Sprites HOP 7.3 Sprite an image file that contains multiple small graphics +’s: saves download time b/c Reduced bandwidth Reduced the # of http request by the browser Quick display of individual images in the sprite 27

29. Jozef Goetz, 2012 28 CSS Sprites HOP 7.3 28 HOP 7.3

30. Jozef Goetz, 2012 29 Checkpoint 7.1 p.619 1.Describe a reason to organize the files (images, media, file function - Web page or scripts, Web site sections – products, services etc in a Web site using folder and subfolders. Increase productivity when a project team is developing a large Web site, easier to find different files types 2.State a reason to use an unordered list to configure navigation links. A menu is a list of links, so it is semantically correct to configure using an unordered list. This technique is popular among Web developers

31. Jozef Goetz, 2012 30 Checkpoint 7.1 visit p.619 2. Which attribute configures a hyperlink to open the file in a new browser window or tab? 3. State an advantage of using CSS sprites in a website Reduced bandwidth Reduced the # of http request by the browser Quick display of individual images in the sprite

32. Jozef Goetz, 2012 31 Three Column Page Layout Often a web page layout will consist of a header across (logo) the top of the page with three columns below: navigation - left column => float:left sidebar – right column => float:right and content – center column => occupies the room after the left and right columns float If you are thinking about this layout as a series of boxes —you’re thinking along the right lines for configuring pages using CSS! HOP 7.4

33. Jozef Goetz, 2012 32 Three Column Layout container sets default background color, text color, and an minimum width Left column navigation float: left; width:150px; Right column content float: right; width:200px; Center column – uses the remaining screen room available room after the floating columns display margin: 0 200px 0 160px; Footer – clears the float clear:both;

34. Jozef Goetz, 2012 33 Three Column Page Layout - edition5 HOP 7.3 in wildflowers3 folder =>no bullets =>no underlines =>same background color

35. Jozef Goetz, 2012 34 Three Column Page Layout - edition5 HOP 7.4 in wildflowers3 folder.navBar{ list-style-type:none; margin-top:20px; }.navBar a {text-decoration:none; font-size:1.2em; }.navBar a.:link {color:#006600; background-color:#eeeeee; }.navBar a.:visited {color:#003300; background-color:#e003300; }.navBar a:focus { color: #000000; background-color:#ffffff;}.navBar a.:hover {color:#cc66cc; background-color:#cc66cc; }.navBar a:active { color: #000000; }.sideimages {margin:30px; } p { margin:20px; } h3 {color:#cc66cc; background-color:#ffffff; } #floatright {margin:10px; float:right; } h4 {padding-bottom: 2px; border-bottom:1px solid #000000; margin:10px; color:#cc66cc; background-color:#eeeeee; }.newsitem {font-size:.9em; margin:10px; } <!DOCTYPE html PUBLIC "-//W3C//DTD HTML/XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/HTML/XHTML1/DTD/HTML/XHTML 1-transitional.dtd"> Door County Wildflowers body {margin:0; background-color:#ffffff; } #container { min-width:700px; font-family:Verdana, Arial, sans-serif; background-color:#eeeeee; color:#006600; } #logo{ color: #cc66cc; background-color:#eeeeee; font-size:2.5em; border-bottom: 2px solid #000000; height:100px; background-image:url(showybg.jpg); padding-left:20px; } h1 {margin-top:0; font-size:3em; } #left { float:left; width:150px; } #right{float:right; width:200px; } #center {margin:0 200px 0 150px; padding: 1px 10px 20px 10px; background-color:#ffffff; color:#006600; }.footer { font-size:.70em; text-align:center; clear:both; background-color:#ffffff; color:#006600; padding-top:10px; } =>no bullets =>no underlines =>same background color

36. Jozef Goetz, 2012 35 Three Column Page Layout - edition6 HOP 7.3 in wildflowers3 folder =>no bullets =>no underlines =>same background color type all into index.html

37. Jozef Goetz, 2012 36 Three Column Page Layout - edition6 HOP 7.4 in wildflowers3 folder

38. Jozef Goetz, 2012 37 CSS Styling for Print Create an external style sheet with the configurations for browser display. Create a second external style sheet with the configurations for printing. Connect both of the external style sheets to the web page using two tags.

39. Jozef Goetz, 2012 38 CSS Styling for Print HOP 7.4 /* remove nav*/ /*added */ wildflowerprint.css wildflower.css /*added */ /* remove #header a */ Starters: wildflower.css output: wildflower.css, wildflowerprint.css and index.html

40. Jozef Goetz, 2012 39 Print Preview using CSS – old edition #contentlogo { background-color:#e8b9e8; font-size:larger; padding:10px; color:#000000; } #imagelogo { float:right; margin:0px 0px 5px 5px; border:solid; }.nav { padding:5px; background-color:#e8b9e8; color:#000066; text-decoration:none; font-family:Verdana, Arial, sans-serif; text-align:center; }.content { font-family:Verdana,Arial,sans-serif; margin:10px; }.footer { font-size:xx-small; text-align:center;} starters: page1.html, wildflower.css output: wildflower.css, wildflowerprint.css and page1.html /* remove nav*/ /*added */ wildflowerprint.css wildflower.css /*added */

41. Jozef Goetz, 2012 40 Print Styling Best Practices Hide non-essential content like navigation Example: #nav { display: none; } Configure font size and color for printing Use pt font sizes, use dark text color e.g. #000000 Control page breaks p.600 page-break-before or page-break-after: Example:. newpage { page-break-before: always; } Print URLs for hyperlinks Property content alone with the :after and :before pseudo elements to generate content Example: #sidebar a:after { content: " (" attr(href) ") "; } /*attr(x) returns the value of the HTML attribute */ 40

42. Jozef Goetz, 2012 41 CSS Styling for the Mobile Web eMarketer.com predicts 134.3 million mobile Internet users by 2013 Three Approaches to Mobile Web: 1.Develop a new mobile site with a.mobi TLD. Visit http://jcp.com to see in practice http://jcp.com 2.Create a separate Web site hosted within your current domain targeted for mobile users. e.g. see next page www.m.whitehouse.govwww.m.whitehouse.gov 3.Use CSS to create a style sheet to configure your current Web site for display on mobile devices and desktop display - the attribute handheld is not well supported

43. Jozef Goetz, 2012 42 Mobile Web Limitations Small Screen Size Low bandwidth, slow connection Large images are not displayed Limited fonts Limited color Awkward controls Single column Mostly text displayed Hyperlinks displayed under the header Lack of Flash support Limited processor and memory Cost per kilobyte

44. Jozef Goetz, 2012 43 Design Best Practice for Mobile Web p.297-9 One column design Avoid floats, tables, frames Descriptive page title Descriptive heading tags Optimize images Descriptive alt text for images Eliminate unneeded images Navigation in lists Provide “Skip to Content” hyperlink Provide “Back to Top” hyperlink Notice the overlap between between these techniques and designing to provide for accessibility? Resolution: from 320x240 BlackBerry Pearl to 480x800 Android HTC Desire, Windows HTC Pro, to 640x690 iPhone4

45. Jozef Goetz, 2012 44 Viewport Meta Tag Default action for most mobile devices is to zoom out and scale the web page Viewport Meta Tag Created as an Apple extension to configure display on mobile devices Configures width and initial scale of browser viewport p.300 44

46. Jozef Goetz, 2012 45 CSS3 Media Queries Media Query Determines the capability of the mobile device, such as screen resolution Directs the browser to styles configured specifically for those capabilities Example: 45

47. Jozef Goetz, 2012 46 HOP 7.6 lighthousemobile.css Starters: starter2.html,lighthouse.css output: index.html, lighthouse.css, lighthousemobile.css

48. Jozef Goetz, 2012 47 Test HOP 7.6 for a mobile device lighthousemobile.css

49. Jozef Goetz, 2012 48 Checkpoint 1. Describe a design consideration when configuring a web page for mobile display. 2. True of False. The media="handheld" attribute reliably targets mobile devices. CSS media queries are used instead. 48

50. Jozef Goetz, 2012 49 Summary This chapter introduced you to a variety of topics related to hyperlinks, lists, layout and designing for the mobile web. Midterm

51. Jozef Goetz, 2012 50 Pr. Ch7 Prime Properties – Configure the website to display on mobile devices