IT145 HTML and CSS

Week 3

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?

Review "Other Stuff From Chapter 2" at the end of last week's notes.
Preview your page from Komodo Edit

Chapter 3: Basic HTML Structure

The basic skeleton of an HTML document (files with the basic HTML skeleton structure can be found on the Resources page)
DOCTYPE. The DOCTYPE declaration is found at the beginning of an HTML document, and it tells the browser program what type and flavor of HTML is being used so that it knows how to render the document properly.
HTML5 uses a very simple DOCTYPE declaration:
- <!DOCTYPE html>
- Note that the word DOCTYPE is capitalized
XHTML had a much more complex DOCTYPE declaration (this example is for an XHTML Transitional document):
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html> ... </html>. These tags surround the HTML of the page.
- For HTML5, the <html> tag is simple and should contain the lang attribute to specify the language used in the text (en=English, es=Spanish, etc.)
  - <html lang="en">
- In XHTML, the attributes used include an xmlns attribute that specified the namespace where the XHTML tag names are defined:
  - <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
TIP: When you type in the <html> tag, you may want to immediately enter the </html> tag (with some blank lines in between for the space where content will go) just so you won't forget to type it later. This is a handy tip when entering any tag that requires a closing tag. Some HTML editor programs will automatically type in the closing tag for you when you enter the opening tag.
<head> ... </head>. The title and meta tags go in the head. Later we will learn that CSS styles, JavaScript code, and other stuff can go here as well. In general, the content in the head is not displayed on the rendered Web page.
- Encoding. The encoding specification of the Web page goes in the head. The encoding specifies how the characters are translated into numbers and stored in the file. Examples of encodings are US-ASCII, ISO 8859, and UTF-8. The most commonly used encoding is UTF-8 (Unicode Transformation Format), which is a variable-length character encoding for Unicode that is backward compatible with ASCII. UTF-8 encoding would be specified in an HTML5 document with the line:
  - <meta charset="UTF-8" />
- In XHTML, the encoding line would look like:
- <meta> tags in the head of the page can also specify other things, such as:
  - <meta name="keywords" content="rockets NAR launch hobby">
  - <meta name="description" content="Description of site goes here">
  - <meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
- <title>...</title>. The title tags surround the title of the Web page.
  - This goes in the head of the page.
  - When the Web page is viewed in a browser, this title appears at the top of the browser window and/or appears in the tab of a tabbed browser.
  - This title is also used in the browser's Bookmarks and History lists.
  - Do not leave the title of your page as "Untitled" or some other default that might be in your HTML skeleton template file.
  - Give each page of your site its own description title, but it's best not to make them too long.
  - Do not confuse the page title with the file name of the document

<body> ... </body>
- The main content of the page goes in the body element.
- Note that the body tag can contain various attributes that are deprecated in HTML5 in favor of doing the same formatting using CSS, but you can play with these attributes for now (until we learn CSS). Here is an example:
  - <body bgcolor="#00FFFF" text="#FF0000">
    (which would display red text on a cyan page background).

Headings
- Don't confuse headings with the head element, or with a header section of your document.
- Headings are lines of text marked up with <h1>,<h2>, <h3>, <h4>, <h5>, or <h6> tags. For example:
  - <h1>Heading text goes here</h1>
- Headings are block level elements, so they automatically get space above them by default (but you will learn to control this later with CSS).
- IMPORTANT: Headings are a structural elements used to specify the importance of different parts of the page. They are used to outline the content of the page by labeling the titles of the importance of different parts of the text.
- The heading tags have default formatting in browsers (bold...largest for h1, tiny for h6). But heading elements are NOT meant to be used for formatting.
- You can specify the language used in a heading line (if it is something different from the rest of the document) with the lang attribute. For example:
  - <h2 lang="es">
- The align attribute can be used with the direction values left, center, right, or justify... but this attribute is now deprecated in favor of using CSS. For example, the heading below would center the heading:
  - <h1 align="center">Heading Goes Here</h1>
  - You can use the align attribute for now (until we learn to do things the preferred way using CSS) to align your headings.

Sectioning Elements.
- One of the ways that HTML5 is encouraging better structuring of Web pages is the addition of several new elements for dividing up, or sectioning, the content of the Web page. In older versions of HTML, the only element of this type was the div element, and the div element did not really imply anything about the STRUCTURE of the page...it was mainly there to allow us to apply different formation to different sections of the page. The div element still exists in HTML5 (but mainly for use as an element to apply formatting), but new elements have been added that give specific structural meaning to different parts of the Web page. These new elements include: section, article, aside, nav, header, and footer.
- One of the main points of the new sectioning elements is to make it easy to markup parts of the document that are self-contained and could be pulled out and dropped into another Web page without messing up the structure of that page. This makes it easier to syndicate articles, reviews, reports, blog entries, or other independent content to other Web sites.
- Each of these sections may contain several sub-sections to break down the content within in. An article, for example, might contain (in addition to the text content of the article), an aside that contains related material, nested article elements that are sub-articles, and a footer with information about the article's author or copyright.
- Each of these sections should have its own internal outlining marked up with headings (h1 through h6) that indicate the importance of the text material inside the section. BUT, the author of the textbook recommends starting the outlining of the sections with h2 headings (using h1 headings only in the main body of the page).
- NOTE that this outlining and sectioning does not produce any visible effects in the display of the page, but screen readers and future browsers may use this information when reading or displaying the page. Outlining is not yet finalized in the HTML5 standard.
- There are resources online that can read you Web page and show you a representation of the structure of your page (such as http://gsnedders.html5.org/outliner/).
- We will briefly discuss some of the sectioning elements below:
- article tags would go around a section of the document that could be used elsewhere on another Web page. A blog entry, news report, product review, trip report, commentary, event coverage, and a product description are examples of sections of the page that could be marked up as an article. But remember, the article could also contain sub-sections that are marked up with nested article tags (when we nest elements, the opening and closing tags of the nested element are entirely within the parent element; it is usual practice, but not required, to indent the nested element's code in the HTML of the Web page).
- aside tags are used to markup material that is tangentially related to the main article content, but is not vital to the main content. The aside element could be a nested element within an article, or it could be a separate element that follows the main article (sometimes one way works better than the other for formatting purposes). (Note that HTML5 considers it improper to nest an aside inside of an address element.)
- section tags are used to markup material when article or aside may not be appropriate. The section element is a more general element that is not as semantically specific as the article or aside elements. When you would use one or the other is often a user call with no hard and fast rules.
- header elements can be used for both the main header section of the Web page, but also for headers within sub-sections of the page (be they marked up as section or article elements). You might have your page's banner and/or navigation links appear in the header section. (Note that HTML5 considers it improper to nest headers inside of another header, or inside a footer, or inside of an address element.)
- footer is similar to header, but it's used to markup content that either goes at the bottom of your Web page (copyright information, last-update dates, links, etc.), or material that goes at the end of an article or other section of the page (author information for the article, related links, etc.). (Note that HTML5 considers it improper to nest footers inside of another footer, or inside a header, or inside of an address element.)
- nav tags are used to markup the main navigation links for the Web page. A nav element could be used to contain secondary navigation links (links that apply to a specific article). You might have your nav element inside your page's header, or enclosed in an element formatted as a sidebar. (Note that HTML5 considers it improper to nest a nav inside of an address element.)
- div elements were already mentioned above. A div has no semantic meaning (like article, aside, or footer)... it is primarily used to markup sections of the HTML to which we want to apply CSS formatting. You might have div tags around the entire contents of the body to apply overall formatting (to set the width or background color of the page, for example), or mark a section of the page that will be formatted as a sidebar. In older versions of HTML, the div (with descriptive id names) did the work of all the new sectioning elements. But the use of the new elements is encouraged where appropriate since they have semantic meaning for the structure of the page that the div element lacks.
Also new in HTML5 is the hgroup element that can be put around multiple consecutive headings. If the headings are in an hgroup, only the highest-order heading would show up in the outline of the page. Since we won't be doing much with outlining, we won't necessarily use the hgroup element, but here is an example of how it would be used around two heading lines:

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

Naming Elements
- You can apply a unique name to an HTML element (such as a heading, paragraph, div, etc.) by using the id attribute, as shown here.
  - <h1 id="bigtitle">I'm a Heading</h1>
  - The primary reason for doing this is so these ids can be used later to target CSS formatting to these elements (assigning an id to an element has no visual effect by itself).
  - Each particular id should be used on ONLY ONE element on the web page, otherwise it won't validate.
  - An id attribute on an element can also be used to target hyperlinks to that part of the page (more on this when we learn to make links).
- You can apply a non-unique name to many HTML elements by using the class attribute, as shown here.
  - <h2 class="blueindent">Heading Text Goes Here</h2>
  - The same class name can be applied to multiple elements on a web page.
  - Note that this does not make any visible change to the element, but we will use this later to apply CSS styles to elements.
- You can apply both an id and multiple class names to an element.
- While the id and class attributes are primarily used to apply CSS formatting, you can also use them to add some meaning to the element, such as:
  - <div id="sidebar">...
  - <div id="maincontent">...
  - <h1 id="losalamos">...
  - <article class="review">..

Comments.
- You can insert comments into the HTML code of your web page like this:
- 
- A Comment can be at the end of a line of HTML code, embedded within a line, in its own line, or spanning multiple lines (as shown below):

- Comments are very important for remembering what you did, or so that somebody else can later figure out what you did in your HTML code. Comments are great for putting in notes to yourself or others reading the HTML code.
- Comments only appear in the HTML code; they do not display on the Web page in the browser.
- Comments are useful to "comment out" some line or lines of HTML code if you want to temporarily remove them from the page without actually deleting them.
- Comments can NOT be nested within other comments!

Labeling Elements with the title Attribute
- You can use the title attribute with most HTML elements. When the user points at that element on your web page, a "screen tip" (also called a "tool tip") will pop up and display the value of the title attribute. For example:
- <p title="Your instructor">Tom Beach</p>
  
  ...would do this (point at my name below):

Tom Beach

ARIA:

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:

Paragraphs

<p>text of the paragraph goes here</p>
Paragraphs are block level elements, so they automatically get space above them by default.
The align attribute (which is deprecated in HTML5 in favor of using CSS) can be used with the direction values left, center, right, or justify. The example below would center the paragraph:
- <p align="center">Paragraph text goes here.</p>
WORKAROUND: You can't put multiple spaces in a row in an HTML document (since HTML collapses all spaces), but you can use   (the non-breaking space entity) to insert multiple spaces: ...as I just did there.
WORKAROUND: If you want to have more space between paragraphs, you can insert a blank paragraph with <p> </p>
(browsers will ignore <p></p> if you try to use that).
BUT...you should really be controlling spacing between paragraphs using CSS formatting. When we get to CSS you will have a more formatting options for paragraphs.

Line Breaks
- The <br /> tag allows you to start a new line without making a new paragraph.
- This can be useful for keeping several short lines close together, for example:
  - <p>Tom Beach<br />315 Common St.<br />Waterville, MN</p>
    
    ...would display as:
    Tom Beach
    315 Common St.
    Waterville, MN
  - Trying to do that with a separate paragraph for each line would result in extra space appearing between the lines of that address (until you learn to control paragraph spacing with CSS).
  - Note that because the line break is a Empty Element, XHTML requires that it be closed with the space-slash-greater than symbol as shown. (HTML5 will allow you is use <br> without the extra space and slash.)
  - You can add extra space between elements on a web page by putting multiple <br /> tags in a row...but you should really control spacing with CSS formatting.

Inline Spans
- To markup a small section of code that is not a block element, you use the <span>...</span> tags, such as:
- <p>I recently read <span class="book">Footfall</span> by Larry Niven and Gerry Pournelle.</p>
- Spans can have id or class names applied to them (as shown above).
- Marking a span does not automatically change the formatting, but we will use spans later to apply CSS formatting to spans of web page content. For instance, in the example above I could use the span to apply CSS formatting to the word "Footfall" (and anything else that I apply the class "book" to would get the same formatting).
- <span> is an inline element (it does not automatically get spacing before it).

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.

Making Text Bold
- <strong>important words</strong>
- The strong element should be used to mark important text.
- ...or...
- <b>text to be bold</b>
- The b element is to markup text to be displayed in a way to draw extra attention to it without implying it is important. The name of a company's product might be formatted with the b element.

Making Text Italic
- <em>words to emphasize</em>
- The em element is for marking text that should be emphasized.
- ...or...
- <i>text to be italic</i>
- The i element is now supposed to be used for words that are to be in italics without implying emphasis, such a scientific names of plant species.
Other tags that markup content that most browser will display using italics are:
- <var> For mathematical variables referred to in text.
- <cite> Markup a citation or reference to a source.
- <dfn> Marks a term you are about to define (the word or term is put in the dfn element, not the definition itself. You would do this the first time you use the word on your page (subsequent uses of the word appear in normal text).

Making Text Display in Monospaced Font
- <code>computer code text</code>
- The code element is used to markup examples of computer code, file names, etc.
- <samp>sample computer output</samp>
- The samp element is to markup samples of output from a computer program or system.
- <kbd>stuff typed on keyboard</kbd>
- The kbd element is used to markup text that is to be typed on a keyboard, such as part of computer login instructions.
- <tt>text to look like it was output by a teletype</tt>
- This tag is purely physical, so it is deprecated in HTML5.

Marking Edited Text as ~~Deleted~~ or Inserted
- <del>deleted text</del>
- <ins>inserted text</ins>
- These are logical tags that can be used to mark changes made to a document. The del element formats the text with a strikethrough, and the ins element shows the text as underlined.
- NOTE that HTML5 has deprecated the <u> tag that was previously used for underlining.
- NOTE that HTML5 has deprecated the <s> and <strike> tags that were previously used for ~~strikethrough~~ (although the textbook still mentions the <s> tag as acceptable).

Superscripts and Subscripts
- Note that the superscripts and subscripts are also displayed in a smaller font size.
- Einstein's famous equation is E = mc<sup>2</sup>
- Einstein's famous equation is E = mc²
- The formula for water is H<sub>2</sub>O
- The formula for water is H₂O

Preformatted Text
- We previously discussed the <pre> tag for Preformatted text. This displays content as monospaced font, and it overrides the way HTML handles white space (multiple spaces, tabs, and returns are displayed as typed).
- The <pre> tag is a block level element.
- The pre element is NOT meant as a way to avoid doing proper CSS formatting to achieve the spacing desired.
- Example below:

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

Changing the Size of Text. Previous versions of HTML used the <big> and <small> tags to change the size of text. This usage is deprecated in HTML5, since that sort of formatted should be handled with CSS. The <big> tag has been entirely deprecated in HTML5, but the <small> tag can still be used to markup small spans of "fine print" such as copyright or legal notices. It's for relatively short phrases...not for ling paragraphs of legal notices.

<small>fine print text</small>
Used to markup fine print. Most browsers will show this text in a small size.
<big>Text To Be Bigger</big>
The big element is deprecated in HTML5, so don't use it.

Blockquote
- The <blockquote>...</blockquote> element is used to mark a block of quoted text. Browsers also indent the block of quoted text on both the left and right sides, so in the past, HTML authors often used it just to indent text, but that's not its purpose.
- Blockquote is a block level element. You can't use a blockquote within a paragraph.
- You should include <p> tags around paragraphs (or other tags around other block level elements) within the blockquote (otherwise your page may not validate).
- You can include a cite="url" attribute in the <blockquote> tag to identify the source of the quote (where url is the URL the quote is from). However, browsers don't give the user access to this URL, so it isn't particularly useful.
- Example below. I made it gray colored to make it easier to see what's included in the blockquote.:
IT 145: HTML and Cascading Style Sheets

Hands-on course in designing and developing World Wide Web pages using HTML (HyperText Markup Language) and CSS (Cascading Style Sheets). The course will cover HTML tags for text, images, links, lists, simple layouts, complex layouts, tables, frames, styles, internal style sheets, and external style sheets. Basic issues in using Web graphics will also be covered.
Prerequisite: CT 102
Inline Quote
- This can be used to quote a short phrase within a line of text (it is an inline element). Example:
- <q lang="en">This is the quoted text.</q>
- Example: General Douglas MacArthur vowed, I shall return when he was driven out of the Philippines in 1942.
- (The words "I shall return" are the inline-quoted text in the example above. The double-quotes are supplied by the <q> element.)
- Specifying the language will ensure that the proper type of quote marks are used. Language codes can be found here.

Abbreviations
- Abbreviations can be marked with the abbr element, with the title attribute used to display the meaning of the abbreviation (this can also be used for acronyms, since the acronym element has been deprecated). Some browsers will display a dotted underline below the word to indicate that there is information about the abbreviation. Point at the abbreviation to see the info pop up as a screen tip. Not all browsers will show the dotted line, but you could apply CSS formatting to the abbr element (later) to make that happen even in those browsers.
- The Saturn V rocket was launched by <abbr title="National Aeronautics and Space Administration">NASA</abbr> from Florida.
- The Saturn V rocket was launched by NASA from Florida.
- Typically you would do this only for the first occurrence of the word in the text (and wouldn't really do it for very common abbreviations or acronyms, such as NASA).

Author Contact Information
- The address element is for marking up the contact information of the author of an article or page. This is usually and email address link or a Web page link, but could rarely be a postal address. Since we haven't done links yet, we'll wait until then before we use this element.
- The address element specifies the contact info for the author of the sectioning element that is its parent element. For example, it can specify the contact info for the author of an article. If used in the footer of a Web page, the contact info should apply to the author of the Web page.

Highlighting Text

New to HTML5 is the mark element for highlighting text, as if it was marked with a highlighter pen. The purpose is to draw attention to the text, but it should not be used purely for decorative purposes (that sort of thing should be done using CSS).
This line contains some <mark>highlighted text</mark> to see the result
This line contains some highlighted text to see the result.

Figure markup

Chapter 4 of the text also mentions the figure and figcaption elements, but we'll wait until we have images on our pages before we discuss this. The figure element is used to markup self-contained content, such as a figure and its caption, that can be positioned independently of the rest of the article's flow.

Time markup

Chapter 4 of the text also mentions how to specify a precise time/date using the time element. As of now, the time tag is not supported by any major browsers, so it does not have any specific effects other than marking up the time in the text. Its purpose is to specify time in a machine-readable format that browsers or search engines could interact with.
It can be used to specify the publication date of an article or Web page by including the pubdate="pubdate" attribute (which indicates the date/time shown is a publication date and not some other kind of date), as shown in the next lines:
Last update: <time datetime="2012-08-26T3:30-6:00" pubdate="pubdate">Aug. 26, 2012 3:30 MDT</time>
Last update: Aug. 26, 2012 3:30 MDT
The time tags can be wrapped around any precise time or date if they are in the valid required format (date in yyyy-mm-dd and time in 24-hour format), but if you want some other representation of the date/time to display on your page, you can use the datetime attribute to specify the date/time in the required format, and then put the text you want for showing the date/time on the page between the <time>...</time> tags.
The date/time format required by <time> (or the datetime attribute in the <time> tag) is: yyyy-mm-ddThh:mm:ss (where the T separates the times from the date. You can end the time with Z to specify that the time is UTC (Universal Coordinated Time, also known as "zulu time"), or specify a time zone offset from UTC after a plus or minus (Mountain Standard Time is -7:00 hours from UTC, while Mountain Daylight Time is -6:00 hours from UTC). You can see the time zone shift in my example above.

The textbook also discusses some other elements that we will not discuss here, but you can experiment with if they look useful to you: wbr, ruby, rp, rt, bdi, bdo, meter, and progress. Some of these are not yet supported by all browsers.

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

We will try validating all of our pages from now on, but I don't expect all of your pages to validate yet, since we may still be using some elements or attributes that won't validate in HTML5 (until we learn how to do the desired formatting with CSS).
The web validator for pages that are on a server are at http://validator.w3.org/
The "Validate Local HTML" Tool in the Web Developer Toolbar (which can be installed in Firefox or Chrome) is very handy.

Top of Page

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:

Read Chapters 5 of HTML5 and CSS3 (for next week's lecture)