Fall 2006 week 3: 09/27

1. TOPICS:
   1. LINK   Ordered Lists;
   2. LINK   Unordered Lists;
   3. LINK   Definition Lists;
   4. LINK   Images;
2. HOMEWORK: LINK   Download this week's homework here:
3. QUESTIONS: Here are some questions to help guide you through this weeks' material:
   • What does the abbreviation XHTML stand for?
   • What is XML?
   • What is the difference between XHTML and conventional HTML?
   • What are some of the standards that should guide the typing of strict XHTML?
   • What does CSS stand for? What is it used for?
   • What is the difference between XHTML and CSS?
   • What is an empty tag? What are some examples of empty tags?
   • What attribute must be used with the <img/> in order to place an image into a web page?
4. INTRODUCE: 
   1. Lists: HTML Lists are used to organize and present categories of information to your readers one point at a time; however, because there many ways to present information, there are a few types of lists to choose from. The code for creating an HTML list, when read by the browser, the will automatically create a list formatted depending on which type is chosen.
      1. Ordered Lists are particular types of lists in which the elements that make up the list must be in a particular order. This order may be numbered or lettered, but whatever the case, the order that the items come is important. To create an ordered list you must use the <ol> tag.     To specify a kind of list, you must use the type attribute, and give it a value of 1 for a numbered list, A for a lettered list with upper case letters, a for a lettered list with lower case letters, i for a numbered list using lower case Roman Numerals, and I for a numbered list using upper case Roman Numerals.     If you wish to start the list with a different number or letter, in addition to the type attribute, you must use the start attribute, and then its value will be whatever number or letter you wish to start.     The heading of the list is indicated by a pair of tags, <lh>list heading</lh>, with the heading typed in between them; and, likewise, each item in the list itself is indicated by a pair of tags, <li>list item</li>, with the text for that item in between them.
      2. Unordered Lists are particular types of lists in which the elements that make up the list are NOT in a particular order. This is a bulleted list organized like a shopping list in which the items listed are randomly placed, indicated by a graphic symbol known as a bullet. To create an unordered list you must use the <ul> tag. To specify the kind of bullet graphic, you must use the type attribute here as well, and give it a value of circle, disk, or square. The heading of the list, is indicated by a pair of tags, <lh>list heading</lh>, with the heading typed in between them; and, likewise, each item in the list itself is indicated by a pair of tags, <li>list item</li>, with the text for that item in between them.
      3. Definition Lists are particular types of lists in which the elements that make it up are terms and their definitions. To create a definition list you must use the <dl> tag. The term to be defined is indicated with a pair of tags,<dt>definition term</dt>, and the definition of that term is noted by another pair of tags, <dd> the definition of the term</dd>.
   2. Images are somewhat more complicated that most of the rest of HTML and four (4) things must be kept in mind:
      1. To place an image inside a web-page, one must use a different kind of tag, an empty tag. As mentioned last week, an empty tag does not come in pairs that surround some text or content that it formats or modifies. Instead, they are singular tags that create the content itself.
      2. On its own, the <img/> tag does nothing, so it must be accompanied by a particular attribute which has the task of noting to the browser which image file will be placed in the web-page. This is the src attribute, the source attribute. Following this attribute, you must type the file/folder path of the particular image you wish to place in the web page as its value.
      3. In order for this image to display in the browser, the files in your folder for this web-page must be well-organized and well placed. Here I will make a note of the importance of file organization to the creation of web-pages. I will start with the example of this particular file I am typing now, this week’s class notes.     I typed this document on my computer in my office and I saved it on my hard disk, the C: drive. Inside my C: drive, I have a folder named classes. Inside of that folder I have another folder named spring07 (I have a different folder for each semester). Inside that folder, I have yet another folder named dma110 (once again, I have a different folder for each of the classes I teach); and finally, inside that folder I have a series of folders named by week—week1, week2, week3, etc. up to week14. As this is the third week of class, I saved this document in the week3 folder, and I named it dma110wk3.doc . The folder hierarchy looks like this—    C://classes/spring06/dma110/week2/dma110wk3.doc    I go through explaining all of that because it addresses the issue of hierarchy. This is known as a folder hierarchy. The most important folder comes first as every-thing else is found inside that folder. In my case, all of my files for all of my classes for all of the terms I’ve taught here are located in my classes folder.     Likewise, when you create a new webpage, it is important to create a separate folder for that web-page. You should then save your HTML document inside that folder. This will be the main folder for the new HTML project. Also inside this main folder should be a series of other folders, a folder for each type of content, for example. One folder for your images probably, another for flash files perhaps, yet another for CSS, and still another possibly for sound/music files. If you are not organized, your web-page will likely not appear properly in the browser when you view it. Some images may not show up, you might duplicate some files accidentally, or some other mistake if everything is not in its proper place.
      4. There are attributes which may be used with the <img/> tag:
         1. src—a required attribute which indicates to the browser which image file is to be displayed in the web-page. The location of the file, followed by the filename, and then the file extension must be typed;
         2. alt—another required attribute but one which displays a small box over the image with some text that you type for the value of the attribute. This is alternative text that will be displayed in the case the image does not show up, or whenever you mouse over the image with your cursor;
         3. width—changes the width of the image in the web-page without changing the actual number of pixels in the image file itself. This attribute is meant primarily to make only minute changes in the width either down or up. For large changes, an image editor, such as PhotoShop, should be used;
         4. height—changes the height of the image in the web-page without changing the actual number of pixels in the image file itself. This attribute is meant primarily to make only minute changes in the height either down or up. For large changes, an image editor, such as PhotoShop, should be used;
         5. border—adds a border around the image with a thickness of the designer’s choice. To be used sparingly as it tends to be over-used and used badly.

Fall 2006 week 2: 09/20

1. TOPICS: You will be quizzed over this week's and last week's material next week.
   1. LINK   XHTML;
   2. LINK   CSS;
   3. LINK   Empty Tags;
   4. LINK   Images;
2. HOMEWORK: LINK   Download this week's homework here:
3. QUESTIONS: Here are some questions to help guide you through this weeks' material:
   • What does the abbreviation XHTML stand for?
   • What is XML?
   • What is the difference between XHTML and conventional HTML?
   • What are some of the standards that should guide the typing of strict XHTML?
   • What does CSS stand for? What is it used for?
   • What is the difference between XHTML and CSS?
   • What is an empty tag? What are some examples of empty tags?
   • What attribute must be used with the <img/> in order to place an image into a web page?
4. INTRODUCE: 
   1. XHTML: is an abbreviation for eXtensible HyperText Markup Language, and is not a separate language from HTML. Instead, it is a variation, much like the difference between the language that you use to write an essay for your English class and street slang. The primary differences is that it has stricter standards than conventional HTML. It is actually an attempt to marry the standards for XML (eXtensible Markup Language) to the purpose of HTML, creating web pages.     XML is a cross-platform markup language, used primarily for organizing the information in databases. However, since some devices (such as wireless devices) cannot run web-browsers to display the data and information of databases stored on servers, conventional web-pages (created with HTML) may not be displayed on them. HTML is the markup language used specifically for web browsers on ordinary laptop and desktop computers, not for smaller handheld devices.     XML has very rigid standards of construction and organization. Therefore, as a way to merge the two mark-up languages, and as a way to prepare for the day when all browsing will be done with XML (so as to make all web-pages cross-platform), stricter standards were created for HTML. Thus the formation of XHTML.     As the standards had been, HTML standards are actually quite loose and forgiving. It is possible to make many mistakes and even leave out some tags when typing HTML and still have the web-browser translate the code and present it correctly. This is unreliable, however, as the composer of the code never knows what might come out as a result of the mistakes. Fortunately, web-browsers can decode both HTML and XHTML equally as if there were no difference between them. XHTML, comparatively, has much more rigid standards, and those are the standards that we will use for the creation of our web-pages in this class:
      1. All tags and their attributes must be typed in lower case;
      2. Quotation marks must surround the values for all attributes;
      3. Units must be supplied for all attribute values where necessary;
      4. All tags must be closed and typed in pairs—except in the case of open tags such as <img/> and <br/>
      5. All empty tags must be typed in the XHTML format with the closing slash before the second angle bracket;
      6. Some conventional HTML inline tags are deprecated. This means that these tags are not considered a legitimate part of the language and are not to be used if strict standards are being followed. The primary reason for this is that CSS is preferred and can perform all of the same functions more efficiently and with greater flexibility
      7. A doctype (DTD) indicator must be present at the start of the document. For this reason, if you make mistakes when typing XHTML, the browser will likely not register them, and your page will still be rendered properly. Nonetheless, you would still not be typing XHTML (just standard HTML), and your code would not be able to undergo any scrutiny by an XHTML code validator (see: http://validator.w3.org).
   2. CSS: otherwise known as Cascading Style Sheets, is not a programming language, and neither is it a mark-up language (as is HTML). It is a series of formatting indications made to a web-browser. When the browser reads these specifications, it carries them out on a particular web-page or set of web-pages. For this reason, the tags—primarily some of the in-line tags—that have mostly to do with formatting, are considered deprecated. This means that they will eventually be eliminated and no then longer considered part of the code. Some of these deprecated tags are <b>, <i>, <u>, and <font>.     CSS is a much more efficient way to accomplish the tasks that these tags once did, as most of the styling is centralized in a couple of locations, either in the head of a document or in a separate document altogether devoted solely to CSS, instead of being dispersed throughout the various bodies of documents. Moreover, much more styling and formatting can be accomplished with CSS than standard HTML was ever capable of.   code tasks:     XHTML—organization and structure of data in a web page.     CSS—presentation and aesthetics of the data in a web page.
   3. Empty Tags: Last week there were two types of tags mentioned, block tags, and inline tags. To review, the task of block tags is to organize information into categories. There are seven categories, six levels for headings tags and then for ordinary paragraph text. These seven categories serve to set off text into distinct blocks according to how important it is.     Inline tags make up the other set of HTML tag. As noted, they serve primarily for presentation rather than organization, and therefore are concerned about the look of the text. So, whereas the block tags create blocks, the in-line tags distinguish text within these blocks with various colors, typefaces, sizes and other factors that modify appearance.     There is a third set of tags, however, known as empty tags. These tags are called empty because they do not format content. All other tags surround text or other content: one tag goes in front of the content (or text) and the second tag goes at the end, where one marks the beginning and the other marks the end. Empty tags do not operate in this way. They do not surround content because they do not come in pairs. They are singular tags and as a result are considered empty. Furthermore, they do not surround content but rather generate it, or create it. One empty tag creates a vertical blank space in a web-page, another draws a horizontal line, while yet another creates an image.
      1. The<br/> tag is one example of an empty tag, and it also known as the break tag . It creates a specific kind of content. It does not create text characters, but rather it creates a blank character, also known as a breaking space. It is called a breaking space because it breaks the line and starts anything that follows back at the margin on the next line. Many of these tags may be used together to create multiple breaking spaces, or to push content further down.
      2. The<hr/> tag is another example of an empty tag, otherwise known as the hard rule tag . It creates a specific kind of content, not text nor spaces, but a horizontal line across the page. This tag may be modified by three attributes:
         1. size which alters the thickness of the line;
         2. width which sets the distance of the line extending across the web-page; and
         3. color which, obviously, changes the color of the line. Like the bgcolor attribute for the <body> tag, and the color attribute for the <font> tag, the color is set using the Hexadecimal Color Code.
      3. The<img/> tag is the third example of an empty tag (there are still others), otherwise known as the image tag. It creates a specific kind of content, not text, spaces, or lines, but an image. However, alone this tag does nothing other than indicate to the browser where the image should go (before some bit of text and after some other bit of text, for example). It does not tell the browser which image to put there. In order to do that, an attribute must be used that indicates which image file from your set of folders is to be drawn into the web-page. This attribute is the src attribute, or source attribute. For the value of this attribute, you must type three (3) things:
         1. the location of the file (usually the images folder within the main folder;
         2. the name of the file (typed without spaces); and, followed by
         3. the 3 or 4-letter file extension .