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

Jozef Goetz, 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

Jozef Goetz, Creating Links Opening Tag Closing Tag Text that will be highlighted URL

Jozef Goetz, 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 being used Relative link Home

Jozef Goetz, 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

Jozef Goetz, 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 protocoldirectory and filename host name

Jozef Goetz, 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

Jozef Goetz, 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”

Jozef Goetz, 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 ”

Jozef Goetz, 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

Jozef Goetz, 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

Jozef Goetz, 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

Jozef Goetz, HOP 7.1 – starter Casita/Example

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

Jozef Goetz, 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

Jozef Goetz, 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)

Jozef Goetz, 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

Jozef Goetz, 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

Jozef Goetz, 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

Jozef Goetz, 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

Jozef Goetz, 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?

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

Jozef Goetz, 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

Jozef Goetz, HOP 7.3

Jozef Goetz, Remainder: Links using the tag An link will automatically launch the default mail program configured for the browser:

Jozef Goetz, 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

Jozef Goetz, 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

Jozef Goetz, Telephone & Text Message Hyperlinks Telephone Scheme Call Many mobile browsers will initiate a phone call when the hyperlink is clicked. SMS Scheme Text Many mobile browsers will initiate a text message to the phone number when the hyperlink is clicked. 28

Jozef Goetz, 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

Jozef Goetz, CSS Sprites HOP 7.4 ed7

Jozef Goetz, Checkpoint 7.1 p 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

Jozef Goetz, Checkpoint 7.1 visit p 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

Jozef Goetz, 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

Jozef Goetz, 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;

Jozef Goetz, 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

Jozef Goetz, Three Column Page Layout HOP 7.5 in wildflowers3 folder

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

Jozef Goetz, 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

Jozef Goetz, 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

Jozef Goetz, 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 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 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

Jozef Goetz, 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

Jozef Goetz, Mobile Web Design Best Practices Recommended by the W3C 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

Jozef Goetz, 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

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

Jozef Goetz, 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

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

Jozef Goetz, 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

Jozef Goetz, 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

Jozef Goetz, 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

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

Jozef Goetz, HOP Media Queries <=exclusively tablet as tablet <=exclusively smartphone desktop test desktop, tablet and smartphone

Jozef Goetz, 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

Jozef Goetz, HOP flexible desktoptabletsmartphone

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

Jozef Goetz, 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

Jozef Goetz, 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 for the current level of browser support. Common Properties used with flexbox see p : displayflex flex-directionorder flex-wrap justify-content 56

Jozef Goetz, 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

Jozef Goetz, HOP flexbox desktoptabletsmartphone

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

Jozef Goetz, 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 Check other emulators/simulators on page

Jozef Goetz, CSS Debugging Tips Manually check syntax errors Use W3C CSS Validator to check syntax errors 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

Jozef Goetz, 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

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

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

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