HTML5 Level I Session IV - Chapter 7 How to Work with Links and Lists

Class Outline How to Create a Lists How to Format Lists
How to Create Links How to Create Navigation List and Bars Student Exercise 1 9/18/2018 Copyright © Carl M. Burnett

How to Create a List HTML List Elements Element Description <ol>
Defines an ordered list <ul> Defines an unordered list <li> Defines a list item <di> Defines a description list <dt> Defines a term/name in a description list <dd> Defines a description of a term/name in a description list HTML List Elements 9/18/2018 Copyright © Carl M. Burnett

W3C Example Unordered List W3C Example Ordered List
HTML for List Items <body> <h1>This is a Ordered List</h1> <ol> <li>1st List Item</li> <li>2nd List Item</li> </ol> <h1>This is a Unordered List</h1> <ul> </ul> <h1>This is a Description List</h1> <di> <dt>The First Level Description</dt> <dd>The First item</dd> <dd>The Second Item</dd> <dt>The Second Level Description</dt> </di> </body> Web Page of List Items W3C Example Unordered List W3C Example Ordered List Here we have the code from a HTML page. In the body section we have a heading tag and then we begin to define our first list – an ordered list. This list has two items in it se we have two list items in the list. The next list we define is a unordered list with two list items. The last list we have is a description list. In this list we have two list items with descriptions that are created using the dt tags. Each list descriptions also has two description list items created with the dd tags. Now lets see what happens when we load this into a browser. As you can see we have an ordered list that has numbers listed for each list item. We have an unordered list with bullets for each list item. And we have a Description list with tow list descriptions and two description list items under each description. There are two exercises you can do to make changes to an ordered list and an unordered list. Once you have completed these exercises come back and restart the video. 9/18/2018 Copyright © Carl M. Burnett

How to Format Lists Properties Description list-style-type
Type of Bullet Used list-style-image URL of image for Bullet Used Values Description disc  circle  square  none 9/18/2018 Copyright © Carl M. Burnett

How to Format Lists (list-style-type)
Value Example decimal 1, 2, 3, 4, 5 ... decimal-leading-zero 01, 02, 03, 04, lower-alpha a, b, c, d, e ... upper-alpha A, B, C, D, E ... lower-roman i, ii, iii, iv, v ... upper-roman I, II, III, IV, V ... Examples You can also stylize a ordered list by specifying the type based on a numerical value. The choices are decimal, decimal-leading-zero, lower-alpha, upper-alpha, lower-roman and upper-roman. There are also a lot of additional examples of list type fonts and numbers for ordered list that can be specified. Here is a partial listing of some of the other options you have. 9/18/2018 Copyright © Carl M. Burnett

CSS that Aligns the List Items
h2, ul, li { margin: 0; padding: 0; } h2 { padding-bottom: .25em; ul { padding-left: 1em; li { padding-left: .25em; You can also use CSS to define the position of list items. In this code the margin and padding is specified for the list items to position the items. In the first declaration the margin an padding are set to zero. The next declaration changes the heading padding. The next declaration changes the unordered list padding on the left. The last declaration changes the list item of the unordered list padding for the left and bottom. 9/18/2018 Copyright © Carl M. Burnett

CSS to change List Items Marker Position
list-style-position: Value Description Inside Indents the marker and the text. The bullets appear inside the content flow outside Keeps the marker to the left of the text. The bullets appears outside the content flow. This is default initial Sets this property to its default value. inherit Inherits this property from its parent element CSS list marker property can be changed for unordered list markers using the list-style-position properties. The values that can be applied include inside, outside, initial and inherit. Lets see an example of this list style properties. In this example we can see what happens when we select the value of inside, outside, and initial. There is an exercise you can do to make changes to an unordered list markers position. Once you have completed this exercise come back and restart the video. Examples W3C Examples 9/18/2018 Copyright © Carl M. Burnett

How to Create Links HTML 4.01 and HTML5 Hyperlink Attributes
<a href=" Burnett’s Site</a> HTML 4.01 and HTML5 Hyperlink Attributes Hyperlink Global Attributes Hyperlink Event Attributes The HTML <a> tag defines a hyperlink. A hyperlink is a word, group of words, or image that you can click on to jump to another document. When you move the cursor over a link in a Web page, the arrow will turn into a little hand. The most important attribute of the <a> element is the href attribute, which indicates the link's destination. In this example the destination is [First Button - Go to W3C Website] There were significant changes made to the A tag between HTML 4.01 and HTML5. In HTML 4.01, the <a> tag could be either a hyperlink or an anchor. In HTML5, the <a> tag is always a hyperlink, but if it has no href attribute, it is only a placeholder for a hyperlink. HTML5 has some new attributes, and some HTML 4.01 attributes are no longer supported. The attributes are listed below. As you can see many are no longer supported in HTML5 and there are two new attributes in HTML5, media and type. [Minimize Browser] [Second Button - Go to W3C Website] Hyperlinks also support global attributes. These attributes can be used on any HTML element. [Third Button - Go to W3C Website] Hyperlinks also support event attributes. In HTML 4 they added the ability to let events trigger actions in a browser, like starting a JavaScript script when a user clicks on an element. Below are the global event attributes that can be added to HTML elements to define event actions. There are also window events, form events, keyboard events, mouse events and media events. These event triggers can be added to a HTML element to trigger a JavScript function so that there can be interaction based on the input of a users. 9/18/2018 Copyright © Carl M. Burnett

HTML for Text and Image Links
<p> <a href="/orders/cart.html" accesskey="c”tabindex="0">Shopping cart</a> <a href="/orders/cart.html"><img src="images/cart_animated.gif” alt="Shopping cart"></a> </p> <p> <a href=“/books/php_toc.html“ title="Review the complete table of contents">TOC</a> </p> Example In this next example we have three links that are used to link to different content. The first link is to the shopping cart and links to the cart.html page. The second link is to a animated gif that is link to the cart.html page. The last link is to a table of contents that is linked to a php_toc.html page. [First Button] Let look at the actual page. Here we see a shopping cart text link and a shopping cart image link. On the next line the TOC link displays the title of the link when you roll over it. [Minimize Browser] 9/18/2018 Copyright © Carl M. Burnett

Email Message Link Example <a href="mailto:cb@profburnett.com?
subject=Web me.</a> Example In this example the link is a link. This type of link will launch wherever resident application is available. [Example Button] The example launches the application that resides on the clients computer. [Minimize Browser] 9/18/2018 Copyright © Carl M. Burnett

Link Loads Document in New Window or Tab
<p>Just go to <a href= target="_blank">the HTML5 testing site.</a></p> <p>It rates your browser as it loads the page and also has data on how well other browsers conform to HTML5.</p> Example In this link example the link is to another website that will launch in another tab or browser depending on the configuration of the clients browser settings. In this example the link is text link and formatted green. When activated a new web page for the HTML5test website is displayed in a new tab. Let’s look at the actual page. [Example Button] Here we see the green link and when we press it, it launches a new tab with the html5test website. [Minimize Browser] 9/18/2018 Copyright © Carl M. Burnett

Placeholders Placeholder at Top of Page Placeholder for “reason6”
<h1><a id="top">8 reasons why trainers like our books</a></h1> Placeholder for “reason6” <h2><a id="reason6">Our complete, real-world applications ensure mastery</a></h2> Links that Jumps to Placeholders on Page <p><a href="#reason6">Complete,real-world applications</a></p> <p><a href="#top">Return to top</a></p> Link that Goes to Placeholder on Another Page <a href="8reasons.html#reason6">Complete, real-world applications</a> Example There will be occasions when you need to jump to a point inside a given webpage. In those cases you can use a placeholder in the page to create a link to that point in a web page. Think of this capability as a bookmark. In this first example the h1 heading is given the name id “top”. The placeholder and the text for this ID “top placeholder is “8 reasons why trainers like our books”. The next example has the H2 heading given the id of reason6. The placeholder and the text for this ID is “Our complete, real-world applications ensure mastery”. Now to enable us to jump or link to these point in the webpage we simply insert an anchor tag with a href to the placeholder id. In the next example we see the link being linked to the ID #reason6. [Example Button] Now, let’s look at the actual page. If we hover over the first link, in the notification panel at the bottom of the page, we can see the link reference. In this case the link is to a ID named reason 1. If we hover over the second link, in the notification panel at the bottom of the page, we can see the link reference. In this case the link is to a ID named reason 2. If we click on the link notice that the second item on the page moves to the top of the page. If we hover over the “Coordinated courses” link, in the notification panel at the bottom of the page, we can see the link reference. In this case the link is to a ID named reason 7. If we click on the link notice that the seventh item on the page, the seventh item moves to the top of the page. If we hover over the “Return to top” link, in the notification panel at the bottom of the page, we can see the link reference. In this case the link is to a ID named top. If we click on the link notice that page is returned to the top of the page. This is how placeholders work in HTML5. [Minimize Browser] 9/18/2018 Copyright © Carl M. Burnett

Popular Media Formats and MIME Types
Document PDF Adobe Portable Document Format DOC MS Word Document Animation / Video SWF Adobe Shockwave/Flash Sound WAV Windows Audio File MP3 MP# Audio File Video MPEG-4 Motion Picture Eng. Group Video File OGG Xiph.Org Foundation Listed here are the various media formats that can be used to provide information. There are more formats the can be used. 9/18/2018 Copyright © Carl M. Burnett

Link to Display PDF in New Window
<a href=“media/report.pdf“ type="application/pdf“ target="_blank">Protocol Stack Report> Example This is an example that links a pdf document to a hyperlink. [Example Button] In this example you may get a security warning regarding opening this document. The warning is about files may contain viruses and that the media must be from a trusted source. In this case the warning is accepted and the document is displayed in the browser window or another tab of the browser. [Minimize Browser] 9/18/2018 Copyright © Carl M. Burnett

HTML Link to Plays MP3 File
<a href="media/Hallelujah.mp3" type="audio/mpeg">MP3 file</a> Example HTML Link to Play PowerPoint Slide Show <a href="media/chapter_01.pps“ target="_blank">Review the slides for chapter 1</a> Example In the next example we see a hyperlink for a mp3 file. When the link is activated a media warning may be shown and then the media file will be launched in the browser. For this mp3 file the helper application that my be launched can include Quicktime, Windows Media Player, or some other media player. [Example Button] In the next example the link is to a PowerPoint Show. When the link is activated the PowerPoint show is played. [Minimize Browser] 9/18/2018 Copyright © Carl M. Burnett

Common CSS pseudo-classes for Formatting Links
Element Description :link a normal, unvisited link :visited a link the user has visited :hover a link when the user mouse over it :active a link the moment it is clicked As discussed in Chapter 4 CSS has common pseudo-class of element selectors that are used to stylize links based on activation. 9/18/2018 Copyright © Carl M. Burnett

The HTML for Three Links
<ul> <li><a href="toobin.html">Jeffrey Toobin</a></li> <li><a href="sorkin.html">Andrew Ross Sorkin</a></li> <li><a href="chua.html">Amy Chua</a></li> </ul> CSS Pseudo-class Selectors Applied to Links a:link { color: green; } a:hover, a:focus { text-decoration: none; font-size: 125%; Example Each pseudo-class of element selector can be stylized to provide for a different style to be applied to link based on its activation. [Example Button] In the example if we hover over a link it becomes larger and if a link is has been activated it changes to purple. [Minimize Browser] 9/18/2018 Copyright © Carl M. Burnett

How to Create Navigation List
<h1>Navigation List</h1> <nav id="nav_list"> <ul> <li><a href="index.html">Home</a></li> <li><a href="tickets.html">Get Tickets</a></li> <li><a href="members.html" class="current"> Become a Member</a></li> <li><a href="about_us.html">About Us</a></li> </ul> </nav> Home Get Tickets Become a Member About Us Navigation List Example Creating navigation list starts with developing a group of list items. We do this using the unordered list element and list elements tags. We also use the HTML5 nav element tag to give this section of HTML code a navigation div area. This particular nav element is given the id of nav_underscore_list. In this list we have four lists items Home, Get Tickets, Become a Member, and About us. An additional class attribute of “Current” has been added to the Become a Member list item so that this list item in the list item to be highlighted. When the list is stylized with CSS it will look like this navigation list. In this example the actual list is displayed without CSS stylization. 9/18/2018 Copyright © Carl M. Burnett

CSS For Navigation List
* { margin: 0; padding: 0; } #nav_list ul { list-style: none; /* removes bullets list items */ margin-left: 1.25em; margin-bottom: 1.5em; } Example #nav_list li { width: 200px; margin-bottom: .5em; /* the space after each list item */ border: 2px solid blue; } /* adds border around each item */ #nav_list li a { display: block; /* makes the vertical block clickable */ padding: .5em 0 .5em 1.5em; /* space around the link */ text-decoration: none; font-weight: bold; color: blue; } #nav_list a.current { backgound-color: silver; } /* make background silver */ The CSS for stylizing the list into a vertical navigation bar begins with setting the margins and padding to zero. This is done to reset the area to zero. The next CSS declaration removes the bullets from the list item and sets the margins for the left and bottom. The next CSS declaration adds a space after each list item and adds a blue border around each item. The next CSS declaration creates the vertical block by stylizing the display property to block. The padding is et to .5em, 0, .5em, and 1.5em to provide space around the link item. The final CSS declaration make the background silver. Now lets take a look at the list as a stylized vertical navigation block. 9/18/2018 Copyright © Carl M. Burnett

CSS For First Navigation Bar
#nav_bar ul { list-style: none; padding: 1em 0; border-top: 2px solid black; border-bottom: 2px solid black; } #nav_bar li { display: inline; padding: 0 1.5em; border-right: 2px solid black; } #nav_bar a { font-weight: bold; color: blue; } #nav_bar a.current { color: text-decoration: none; } Example We can also stylize a nav bar as a horizontal navigation bar. Notice that the nav_bar list item style for the display property is given an inline property. When we see this CSS applied to the same HTML navigation elements it is displayed as a horizontal bar without a background. 9/18/2018 Copyright © Carl M. Burnett

CSS For Second Navigation Bar
#nav_bar ul { list-style: none; padding: 1em 0; background-color: blue; } #nav_bar li { display: inline; } #nav_bar a { padding: 1em 2em; text-decoration: none; color: white; font-weight: bold; border-right: 2px solid white; } #nav_bar a.current { color: yellow; } Example We can also stylize a nav bar as a horizontal navigation bar with a background. When we see this CSS applied to the same HTML navigation elements it is displayed as a horizontal bar with a background. 9/18/2018 Copyright © Carl M. Burnett

W3C Navigation Bar Exercises
W3C Example Vertical Navigation Bar Fully Styled Vertical Navigation Bar W3C Example Horizontal Navigation Bar W3C Example Floating List Items W3C Example Now let take a look at some of the examples on the W3C website. The first example is a vertical navigation bar without any specific formatting. A background color is added to the link area. In the next example we see a fully stylized navigation bar. Notice the link state in the CSS code has been given specific formatting. The next example is a horizontal nav bar without any formatting. The last example is a horizontal nav bar with the display block given a specific width to ensure to nav item are equal size. If we comment out the width property in the a element, and then resubmit the page, the nav block scrunches up to whatever the length is of the text for each list item. By specifying the width, we ensure the nav bar list item looks evenly spaced and provides for better stylization. Now it’s your turn to do these exercises. You can make changes to the CSS for the navigation bars to see what happens. Once you have completed this exercise come back and restart the video. 9/18/2018 Copyright © Carl M. Burnett

Student Exercise 1 Complete Exercise 7-1 and 7-2 on page 278 using Dreamweaver. Download link for files for Exercise 7-1 and 7-2 on website. Upload your HTML pages and CSS files to the live site to preview. 9/18/2018 Copyright © Carl M. Burnett

Chapter 8 - How to Work with Images
Class Review How to Code Lists How to Format Lists How to Code Links How to Create Navigation List and Bars Student Exercise 1 Chapter 8 - How to Work with Images 9/18/2018 Copyright © Carl M. Burnett

HTML5 Level I Session IV - Chapter 7 How to Work with Links and Lists

Similar presentations

Presentation on theme: "HTML5 Level I Session IV - Chapter 7 How to Work with Links and Lists"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

HTML5 Level I Session IV - Chapter 7 How to Work with Links and Lists

Similar presentations

Presentation on theme: "HTML5 Level I Session IV - Chapter 7 How to Work with Links and Lists"— Presentation transcript:

Similar presentations

About project

Feedback