Week 3

* Assignment *

Miscellaneous Stuff

UNM-LA Wireless Networks

UNM-LA has three wireless networks: Lobo-Guest, Lobo-WiFi, and Lobo-Sec. You can find information here.

The Lobo-Guest network will not allow you to certain things, such as IMAP for email, and SFTP to main campus. If you intend to use our wireless network to do such things, you will need to use Lobo-WiFi or Lobo-Sec. Access to either of those requires that you have a local UNM-LA computer account. See our Computer Information and Telecommunications Services staff if you need a local UNM-LA account.

Questions From Last Class?


Chapter 3: Basic HTML Structure


   <h2>Using Proper HTML5 Structure</h2>
       <h3>Where to Begin</h3>




Tom Beach



You can improve the accessibility of your Web pages for people using screen readers by using "Accessible Rich Internet Applications" (ARIA) attributes to add additional semantic content. The role attribute allows you to apply the following values to an HTML element: banner (to mark elements with site-wide content, often a header), main (to mark an element that contains the main content of a page), navigation (to mark navigation links), complementary (to mark material that complements the main content), content info (to mark such things as copyright or author information, often used in a footer), form (to mark a form area), and search (to mark a search box).

These attributes are used to enhance the meaning of the sections of your page. Below are some examples:

<aside role="complementary"> ...

<div role="main content"> ...

<nav role="navigation"> ...

<header role="banner"> ...

In some cases, you'll see that specifying the role of the element is somewhat redundant with the name of the element, but that's because the ARIA attributes were developed independently of the new HTML5 elements that have more semantic meaning than the old div. This additional information is still useful to users using screen readers.



Chapter 4: Basic Text Formatting

Within the sectioning elements described in Chapter 3 (above), you put the text content of your page, most often enclosed in paragraph tags:



You will find that there are some tags in HTML that appear to be redundant because the different tags produce the same visual result (such as the <b> tag and the <strong> tag, which both make text bold. In previous versions of HTML, we referred to some of these as "Logical" ("Structural") tags, while the others were called "Physical" ("Visual," or "Presentation") tags. In general, the physical tags are holdovers from the older days of HTML when formatting was done with HTML. The logical tags were made to markup the structural meaning of the content without saying how it should look. So while the <b> tag means, "Make this bold," the <strong> tag simply says, "This should be strongly emphasized," and leaves it up to the browser to decide how this is done (in most browsers, it does this by making the text bold).

HTML5 wants to separate formatting completely from the HTML, and put it all in the Cascading Style Sheets, so all HTML tags should be structural. That does not mean that they did away with all of the old physical tags...in some cases they just redefined how what they mean and how to use them. But they still cause the same effects in the browser.






This is Preformatted Text
Name         City              Car
Tom          White Rock        Prius
John         Waterville        Fiesta
Bob          Austin            Impala
That's enough of the preformatted text!










Flow Elements and Phrasing Elements: What can each contain?

Some elements in HTML5 are know as Flow Elements. Examples include: <section>, <article>, <div>, <h1>, <p>, and <blockquote>. SOME of these elements are allowed to contain other flow content, while others are only allowed to contain "phrasing content" (see below). The <section>, <article>, <div>, and <blockquote> items from above are allowed to contain flow content (which includes other flow elements). The <h1> and <p> elements from above are only allowed to contain parsing content (they can't contain other flow elements). Here is a link to a page that specifies what each element is allowed to contain (follow the links on that page).

Some HTML5 elements are known as Phrasing Elements (which are a subset of flow elements). Examples include: <em>, <strong>, and <span>. For the most part, these phrasing elements can only contain phrasing content, which includes other phrasing elements (but they cannot contain flow elements).

Some phrasing elements and flow elements are empty elements that can't contain any other elements (examples are the phrasing elements <img> and <br>, and the flow element <hr>).

The <a> element (which we will learn about a couple classes from now) is a phrasing element, but it is "transparent," meaning that it can contain either flow elements or only phrasing elements depending on what the parent element of the <a> element can contain.

Some HTML5 element are known as Metadata Elements, such as <link> and <style>, which generally don't contain page content.


Web Page Validation



Assignment 3 - Due Saturday, Sept. 14

Build a Web page using the elements and page structure we have covered in Chapters 3 and 4. It would be best if you can figure out an appropriate place to use each tag below (rather than just sticking it on any random text to show the effect). The elements that you should be using include:

DOCTYPE - html standard for this page. Use the DOCTYPE appropriate for HTML5.
html - html page
head - html page head section
body - html page body
meta - declaring the character encoding
title - page title
h1, h2, h3 - use section headings for structure
p - paragraphs (several of them).
NOTE: You may use the align attribute in headings or paragraphs for this exercise, but be aware that this will cause validation errors.
article, section, aside, header, footer, div - use some of these sectioning elements to markup sections of your page content
span - a section of in-line text
br - line break
comments - put some html comments in your code
strong - important bold text
em - emphasized italic text
small - To indicate a fine-print notice you put at the bottom of your page.
code - monospaced font
pre - pre-formatted text
blockquote - block-level quote
q - inline quotation
sup & sub - superscript and subscript text
ins & del - inserted and deleted text
abbr - abbreviation.

Use the title attribute in at least one paragraph or heading.

Note: Rather than typing in large amounts of text, you can copy and paste text into your page from any handy resource (such as Wikipedia pages or the UNM-LA catalog), but be sure to edit the text so that it doesn't contain strange characters or links. Just copy the plain text from the source...don't copy the HTML of the source page. You are just using this as a source of text to edit and format for this exercise.

Upload the page to your web space on ftp.unm.edu using the web tools discussed/used in class or similar tools. You may name the page whatever you like.

Validate your page using the W3C HTML validator at: http://validator.w3.org/

If there are any validation errors that occur, be sure to explain the reasons for them in your email to me (such as, "There are two validation errors from using the align attribute because I wanted to center my h1 title line and justify the text is the paragraph about butterflies." It's OK if your code does not validate at this point as long as you can explain WHY.

Send an email to tbeach@unm.edu that includes the URL to your Web page for this assignment.

NOTE! The Subject line of this email should be "IT145 YourName Asg. 3"

You will be graded on:

How many different web elements you used from Chapters 3 and 4.
How many different element attributes you used.
You sent the correct URL in your email.
The page either validates using the W3C page validator, or you have explained any validation errors.

Reading Assignment: