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

3. Jozef Goetz, 2015 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, 2015 3 3 Creating Links Opening Tag Closing Tag Text that will be highlighted URL

5. Jozef Goetz, 2015 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, 2015 5 5 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 or The root directory on the same Web server Relative URLs – include only a file name within the current directory. Refer to files within the current directory (position) on the same Web server URL refers to the same domain name

7. Jozef Goetz, 2015 6 6 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

8. Jozef Goetz, 2015 7 7 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 HOP 7.1

9. Jozef Goetz, 2015 8 8 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”

10. Jozef Goetz, 2015 9 9 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 ”

11. Jozef Goetz, 2015 10 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

12. Jozef Goetz, 2015 11 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

13. Jozef Goetz, 2015 12 More on Relative Linking Contact Canyon Home Weekend 12 Relative links from the Home page: index.html Relative links from the Canyon page: rooms/canyon.html

14. Jozef Goetz, 2015 13 HOP 7.1 – starter Casita/Example

15. Jozef Goetz, 2015 14 HOP 7.1 – Casita solution test all links from the Juniper Room Page:

16. Jozef Goetz, 2015 15 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

17. Jozef Goetz, 2015 16 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 Id (Identifier)

18. Jozef Goetz, 2015 17 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 instead of “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

19. Jozef Goetz, 2015 18 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

20. Jozef Goetz, 2015 19 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

21. Jozef Goetz, 2015 20 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

22. Jozef Goetz, 2015 21 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?

23. Jozef Goetz, 2015 22 HOP 7.2 start: starter1.html output: favorites.html

24. Jozef Goetz, 2015 23 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.3 p.301

25. Jozef Goetz, 2015 24 HOP 7.3

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

27. Jozef Goetz, 2015 26 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

28. Jozef Goetz, 2015 27 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. 27

29. Jozef Goetz, 2015 28 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. 28

30. Jozef Goetz, 2015 29 CSS Sprites HOP 7.4 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 29

31. Jozef Goetz, 2015 30 CSS Sprites HOP 7.4 ed7

32. Jozef Goetz, 2015 31 Checkpoint 7.1 p.659 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 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

33. Jozef Goetz, 2015 32 Checkpoint 7.1 visit p.659 2. Which attribute configures a hyperlink to open the file in a new browser window or tab? The target attribute 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

34. Jozef Goetz, 2015 33 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 aside or 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.5

35. Jozef Goetz, 2015 34 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; Main - 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;

36. Jozef Goetz, 2015 35 Three Column Page Layout HOP 7.5 in wildflowers3 folder jump to main landmarks on the web page for assistive technology reader; goal: increase accessibility

37. Jozef Goetz, 2015 36 Three Column Page Layout HOP 7.5 in wildflowers3 folder

38. Jozef Goetz, 2015 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, 2015 38 Print Styling Best Practices HOP 7.6 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, background #FFFFFF Control page breaks p.311 page-break-before or page-break-after a designed element: Example:. newpage { page-break-before: always; } Print URLs for hyperlinks Property content alone with the :after and :before pseudo elements to generate content Example: #aside a:after { content: " (" attr(href) ") "; } /*attr(x) returns the value of the HTML attribute */ 38

40. Jozef Goetz, 2015 39 CSS Styling for Print HOP 7.6 wildflowerprint.css wildflower.css index.html starters: wildflower.css, index.html output: wildflowerprint.css and index.html ^ display in black the URL for a hyperlink display in black the URL for a hyperlink no in wildflowerprint.css

41. Jozef Goetz, 2015 40 7.5 Designing CSS Styling for the Mobile Web Three Approaches to Mobile Web p.315: 1.Develop a new mobile site with a.mobi TLD. Visit http://jcp.com to see in practicehttp://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

42. Jozef Goetz, 2015 41 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 www.m.whitehouse.gov

43. Jozef Goetz, 2015 42 Mobile Web Design Best Practices Recommended by the W3C http://www.w3.org/TR/mobile-bp http://www.w3.org/2007/02/mwbp_flip_cards.html Optimize Layout, Navigation, Graphics, and Text for Mobile Use Design for One Web – (p.226) it refers to a single resource (the same web page) that is configured for optimal display on multiple types of devices. Responsive Web Design – (p.226) coding techniques (fluid layouts, flexible images and media queries) for configuring a web page to display well at various screen resolutions and various display sizes – see a gallery of sites at http://mediaqueri.es/http://mediaqueri.es/

44. Jozef Goetz, 2015 43 Design Best Practice for Mobile Web p.316 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 Resolution: from 320x240 BlackBerry Pearl 480x800 Android HTC Desire, Windows HTC Pro, 640x690 iPhone4 640x1136 iPhone5 1920x1080 iPhone6 720x1280 Samsung Galaxy SIII 2560x1440 Samsung Galaxy S6 edge 2560x1440 Samsung Note

45. Jozef Goetz, 2015 44 Optimize Layout for Mobile Use Single column design Limit scrolling to one direction Use heading elements Use lists Avoid using tables Provide labels for form controls Avoid using pixel units in style sheets Avoid absolute positioning in style sheets Hide content that is not essential for mobile use.

46. Jozef Goetz, 2015 45 Optimize Navigation for Mobile Use Provide minimal navigation near the top of the page Provide consistent navigation Avoid hyperlinks that open files in new windows or pop-up windows Try to balance both the number of hyperlinks on a page and the number of levels needed to access information

47. Jozef Goetz, 2015 46 Optimize Graphics for Mobile Use Avoid displaying images that are wider than the screen width Configure alternate, small optimized background images Some mobile browsers will downsize all images, so avoid using images that contain text Avoid the use of large graphic images Specify the size of images Provide alternate text for graphics and other non-text elements.

48. Jozef Goetz, 2015 47 Optimize Text for Mobile Use Configure good contrast between text and background colors Use common font typefaces Configure font size with em units or percentages Use a short, descriptive page title

49. Jozef Goetz, 2015 48 Viewport Meta Tag Default action for most mobile devices is to zoom out and scale the web page Viewport Meta Tag (without using CSS) Created as an Apple extension to configure display on mobile devices Configures width and initial scale of browser viewport, see p.318 see a screenshot => where: width=device-width = actual width of the device screen initial-scale=1.0 for 100% 48 Android – no viewport

50. Jozef Goetz, 2015 49 1. CSS3 Media Queries using a Link Element 1. Media Query using a link Is made up of a media type (such as screen) and logical expression that determines the capability of the mobile device, such as screen resolution and orientation (portrait or landscape) Directs the browser to styles configured specifically for those capabilities Example: 49

51. Jozef Goetz, 2015 50 2. CSS3 Media Queries using an @media Rule 2. Media Query using an @media Rule p.320 - 321 Determines the capability of the mobile device, such as screen resolution using an @media rule and orientation (portrait or landscape) Directs the browser to CSS styles configured specifically for those capabilities syntax: @media [ media type] [logical expression] @media only screen and (max-width: 480px) { header {background-image: url( mobile.gif)}} //smartphone @media only all and (max-width: 768px) { } //smartphone @media only all and (min-width: 769px) and (max-width: 1024px) { } 50

52. Jozef Goetz, 2015 51 HOP 7.7 - Media Queries <=exclusively tablet as tablet <=exclusively smartphone desktop test desktop, tablet and smartphone

53. Jozef Goetz, 2015 52 Flexible Images Edit HTML: remove height and width attributes CSS: img { max-width: 100%; height: auto; } Responsive Web design with fluid layout, media queries and flexible images 52

54. Jozef Goetz, 2015 53 HOP 7.8 - flexible desktoptabletsmartphone

55. Jozef Goetz, 2015 54 HOP 7.8 - flexible <=exclusively tablet <=exclusively smartphone desktop Responsive Web design with fluid layout, media queries and flexible images. flexible images media query => <=fluid layout

56. Jozef Goetz, 2015 55 Testing Mobile Display Options Test with a mobile device Emulators: Opera Mobile Emulator Mobilizer Opera Mini Simulator iPhone Emulator Test with a Desktop Browser Install an iOS or Android SDK 55

57. Jozef Goetz, 2015 56 CSS Flexible Box Layout Module Referred to as “flexbox”, a new emerging technique GREAT way to easily configure multi-column page layout elements contained within a flex container can be configured either horizontally or vertically in a flexible manner with flexible sizing Flexbox is not yet well-supported by browsers. Check http://caniuse.com/flexbox for the current level of browser support.http://caniuse.com/flexbox Common Properties used with flexbox see p.329-330: displayflex flex-directionorder flex-wrap justify-content 56

58. Jozef Goetz, 2015 57 Using Flexible Box Layout Configure a flexible container “flex container” Configure the direction of the flex Example: #demo { display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; } // configures a horizontal direction Adjust the proportion of the “flex item” elements in the container Example: nav { -webkit-flex: 1; flex: 1; } // take 1 portion of the whole space main { -webkit-flex: 7; flex:7; } // take 7 portions of the whole space aside { -webkit-flex:2; flex: 2 } // take 2 portions of the whole space 57

59. Jozef Goetz, 2015 58 HOP 7.9 - flexbox desktoptabletsmartphone

60. Jozef Goetz, 2015 59 HOP 7.9 flexbox 3 column layout flex layout; container is set to horizontal flow <=exclusively tablet <=exclusively smartphone multiline => display after the other flex items=> flexible images media query media query Responsive Web design with flex layout, media queries and flexible images.

61. Jozef Goetz, 2015 60 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.  Test your mobile website using http://www.opera.com/developer/mobile-emulator. http://www.opera.com/developer/mobile-emulator Check other emulators/simulators on page 327 60

62. Jozef Goetz, 2015 61 CSS Debugging Tips Manually check syntax errors Use W3C CSS Validator to check syntax errors http://jigsaw.w3.org/css-validator/ Configure temporary background colors Configure temporary borders Use CSS comments to find the unexpected /* the browser ignores this code */ Don’t expect your pages to look exactly the same in all browsers! Be patient! 61

63. Jozef Goetz, 2015 62 Summary This chapter introduced you to a variety of topics related to absolute and relative hyperlinks, sprites, three and multiple column layout and designing for the mobile web. Midterm

64. Jozef Goetz, 2015 63 Pr. Ch7 Pacific Trails Resort– Configure the website to display on desktop, tablet and mobile devices

65. Jozef Goetz, 2015 64 Pr. Ch7 JavaJam– Configure the website to display on mobile devices and tablets

66. Jozef Goetz, 2015 65 Pr. Ch7 Prime Properties – Configure the website to display on mobile devices