Fall 2007 week 3: 09/26

Hi everybody, I have been working with the rest of the DMA faculty and TCI faculty and committees on proposals to create new classes and majors and expand our curricula, seek out new directions for us and for our students. So, if any of you have ideas of topics that you wish to study, or that you think TCI should cover, such as new majors that we should offer, then please let me know. This school tends to listen to the students. You have a much larger voice than you might realize. All you have to do is speak up. You are the ones who are actually paying the bills around here anyway, right?     I covered quite a few things in the last class; and, in addition, there was quite a lot that I did not cover. Whatever you read in this week's blog, therefore, that I did not cover in class, I will cover in the next class. I'm speaking mainly of course of what you will find below about lists. But HTML lists is a relatively easy, short, and minor concept compared to images and tables, so we will not spend much time on them.     The first 3 links below are for those lists, and the last 4 have to do with what we covered in class, resizing images with PhotoShop, inserting images into the page, and then putting them into a table.

1. TOPICS:
   1. LINK   Ordered Lists;
   2. LINK   Unordered Lists;
   3. LINK   Definition Lists;
   4. LINK   Editing & Resizing Images;
   5. LINK   Inserting Images;
   6. LINK   Creating HTML Tables;
   7. LINK   Images within Tables;
2. HOMEWORK:
   • LINK   Download this week's homework here:
   • Also, do the questions below due next week in class.
3. QUESTIONS: Here are some questions to help guide you through this weeks' material:
   • What are the three (3) types of lists?
   • What is the difference between an Ordered List and Unordered List?
   • What are four types of Ordered Lists?
   • What are three types of Unordered Lists?
   • What are the two main tags for Definition lists?
   • What attribute must be used with the <img/> in order to place an image into a web page?
   • What are the three tag pairs necessary to create a table?
   • Between what two table tags must content be typed?
   • What are ALL the sorts of content which may be placed within a table?
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. Image Editing & Preparation—Before Images may be inserted into a web-page, they always have to be prepared. This has to do with resizing, cropping or any sort of color correction. The most widely used software application for image editing & preparation is Adobe PhotoShop. Once an image has been prepared, then it is ready for insertion into the page along with all of the other content. The most common operation performed on images is resizing them down to fit properly within a page-layout and design. The following steps outline a simple resizing process for a single image intended for a web-page.
      1. Open the image with PhotoShop.
      2. Select: Image >> Image Size Then, in the dialog box that opens up, select an appropriate width or height. For images intended for web-pages, the resolution should always be 72ppi. Click okay.
      3. Save the image with its new dimensions. If you aren't certain, save it with a new name so that you will still have the original if you must go back and change it again.
   3. Inserting Images: The subject of images is 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.
      5. Below is an example of an <img/> tag used with an src attribute:     <img src="images/myPicture.jpg"/> In the above code, the first term after the src attribute is the location of the image. In this case, it is in the images folder. Following that we have the name of the file and its file extension, myPicture.jpg . The location of your images is within their own folder. This folder is ALWAYS within the main folder of the web-page. You should never place it outside the main folder of your web-page as this will cause your images to fail to load in the browser window.
   4. Tables—To create a table in HTML, the first tag pair required is the <table></table> tag pair. These two tags mark the beginning and the ending of the table respectively.
      1. Table Rows—Alone, the <table></table> tag pair does very little. Tables are constructed row by row to form horizontal bars, one at a time. To create a single row, the<tr></tr> tag pair must be placed between the <table> tags. If more than one row is desired, then more than one pair of <tr> tags must be typed.
      2. Table Cells—Likewise, the <tr></tr> tag pair does very little on its own. As mentioned, tables are constructed row by row to form horizontal bars, which are created by typing a <tr></tr> tag pair for each row desired. Furthermore, these rows are made up of smaller rectangular divisions, known as cells, where data is to by typed. There must be at least one cell within each row. To create a cell, the <td></td> tag pair must be placed between the<tr> tags. <td> here stands for Table Data. If more than one cell is desired, then more than one pair of <td> tags must be typed.
      3. Content—In order for there to be a table visible in the page at all, some content must be place between the <td></td> tag pair. This content may be in the form of text, links, images, or even other tables. If no content is desired, if the cell should appear empty, then the content must be invisible. To accomplish this, you must type a "blank space" between the <td> tags. To type a SINGLE blank space in a page of HTML, you must type the following string of characters &nbsp; Observe the following example:   <table>     <tr>       <td>&nbsp;</td>     </tr>   </table> In the above example, there is one pair of <table> tags at the beginning and ending to mark the extents of the table. Inside of those tags, there is one pair of <tr> tags that will create one single row in this table. Then, finally, between those two tags, there is a single pair of <td> tags that will create a single cell within that row. This means that the table consists of a single row with one single cell. What we will see as a result of this table, then, is a little box. To create a table with three rows, you will have to type three pairs of <td> tags, as in the example below:   <table border="1px">     <tr> 1       <td>&nbsp;</td> 2       <td>&nbsp;</td> 3       <td>&nbsp;</td>     </tr>   </table> The above code will create the table below: Although it appears as if there is no content in the cells of the table above, the computer or the browser considers this to be false. There is content, albeit invisible content. There is a blank space inside of each cell created by the characters &nbsp;. There may be, however, other types of content besides characters, whether visible or invisible. Images may also be used as the content within a table.     To place an image within a table, you must put the <img/> tag between the <td></td> tags. For example:   <table border="1px">     <tr>       <td>&nbsp;</td>       <td><img src="images/myPicture.jpg"/></td>       <td>&nbsp;</td>     </tr>   </table> This code might result in the stunning image inside the table below:

Fall 2007 week 2: 09/19

Hello Everyone, I am sorry for not posting last week as I said I would, and also that this week's posting took longer than I thought it would. I decided to combine two postings, but it should also serve as a belated welcome back to TCI (after a far too short break) after the summer term.     So here it is, This is my blog for the DMA110 class of Fundamentals of Internet Applications, which is just a long way to say that we will be working on XHTML/HTML & CSS in this class for the next 14 weeks.     The Fall term tends to be a little more hectic for everyone. There are more students than in the summer when the days seem longer. The days are actually shorter, and I think we all just generally have more to do. Now, although I don't increase the amount that I teach in this class during the fall, the fact that there are more students, that the class are somewhat larger, will put a little pressure on all of us. I want to be able to give everyone individual instruction, but sometimes that just is not possible. This is especially the case when people do not come to class prepared. Each week there will be homework, which is the minimum amount that you should complete just to keep up with what we are covering in class. If you feel lost or behind, you should practice, read, and just do more HTML. Don't avoid the subject. It will come back and bite you in the end if you do.     Each week, I will post the all the information that I cover in the previous class, and usually give step-by-step instructions. It will pretty much be a repeat of what we cover in class, so if you ever need to recall something, or need additional practice, or if you miss a class, this will be a good resource for you. Please note also that at the bottom of each posting (just click where it says comments), YOU CAN POST QUESTIONS AND COMMENTS HERE YOURSELF. If you have a question, or need to request more information from me, then chances are someone else in class needs it also. So please don't be shy about posting your own concerns. Check back here in a day or two for your homework and this weeks' class posting. In this week's posting, I simply put up some terms that I wish all of you to know and become familiar with. There will be a quiz over them at the beginning of class during WEEK 4 of the term, so please do not neglect studying. I do remember what it was like being a student (as a matter of fact, I am still a student studying for another master's), and believe me I know how tough it can be. For me, the toughest thing is simply getting past my own laziness, and trying to work through my own natural tendency to procrastinate. I still do it, but luckily I don't do it as much. So, please try to keep in mind that when I suggest that you do something, it is always with your interests in mind. My goal is to help each of you become a success, and I am serious about that. I really want all of you to do well. First and foremost, I think that means to do well in this class, but it may in fact mean different things for each of you, something entirely different. I am here to help however I can. Carter-

1. TOPICS: You will be quizzed over this material in week 4.
   1. LINK   General Information;
   2. LINK   Basic Structure;
   3. LINK   Block Tags;
   4. LINK   Attributes;
   5. LINK   Inline Tags;
   6. LINK   Hyperlinks;
   7. LINK   CSS;
   8. LINK   Empty Tags;
   9. LINK   Images;
2. HOMEWORK: Answer the questions below as you read through the material. Below, you will find homework due the coming week.
3. QUESTIONS: Here are some questions to help guide you through this weeks' material:
   • What type of computer application (program) is necessary to view a web-page?
   • What type of basic computer application (program) is necessary to TYPE or CREATE a web-page?
   • What does the abbreviation HTML stand for?
   • What does the abbreviation HTTP stand for? Where do you usually find it?
   • What are the individual pieces of code called in HTML?
   • What are the first and last tags typed in a web-page?
   • What are the two (2) parts of most web-pages?
   • What are the three (3) types of HTML tag discussed in Wednesday's class? What is the main difference among them?
   • What are attributes used for?
   • What are some examples of block tags? What are some examples of inline tags?
   • Which tag is the anchor tag? What is the attribute that goes with it to create a hyperlink? What is hypertext?
   • What does the abbreviation XHTML stand for?
   • Describe what XML is?
   • 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--XHTML and the Internet: 
   1. General Information:
      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:     The internet is a network or ‘web’ of interconnected devices, such as home computers, that store and exchange information via the phone lines, other types of cables—DSL or Cable, or wireless communications (radio waves).
      2. The world wide web is one feature of the internet in which information is shared and exchanged between home computers and more powerful devices used primarily for storage known as servers. Its primary mode of exchange is via HTML, Web Browsers, and their related technologies.
      3. A web browser is a computer application (a ‘program’), such as Netscape Navigator and Internet Explorer, that permits the exchange and transfer of the information displayed on a web-site from one machine (the server where it is stored) to another machine (the home computer of the individual interacting with the website). When a person opens up a particular web-site, the information on it is automatically downloaded into his/her computer, where it is temporarily saved in a folder known as the cache. In this way, the information on an external website is transferred directly into his/her home computer’s hard drive.
      4. The information that we view on a web-site with our web browser is known as hyptertext, and it is created with a language known as HTML (HyperText Mark-up Language) . HTML is a special coded language that is combined with regular language (regular text such as that which you are reading here on this page). When you view this mixture of languages with a web-browser such as Internet Explorer, the regular text is visible, but the code is rendered invisible. In this way, the web-browser application translates or decodes the information for us and presents it in such a way that we may easily comprehend and enjoy.
      5. Web-browsers utilize a special method of information transfer when they display web-pages and web-sites. Since hypertext is the combination of ordinary text and HTML that makes up all web-pages, this type of information transfer is called HyperText Transfer Protocol otherwise known as http. There are other types of information transfer (protocols), and one other type you may have seen is known as ftp, or File Transfer Protocol. This one is used primarily for the download of large files such as whole applications like when you go to the Macromedia site to download a trial version of Flash or Dreamweaver.
      6. Together, the protocol and the web address are known as the url (Uniform Resource Locator). The particular protocol always precedes the web address of a particular web-site or web-page, for example:
               http://www.yahoo.com
         The http tells us what sort of transfer will occur and what kind of information will be transferred (hypertext—a mixture of ordinary text and HTML). The particular web address tells us which document we will transfer, or download, into our computers to view and read.
      7. A text editor is a computer application, such as Notepad for PC’s or TextEdit for Macs. Such applications’ only use is to create and edit plain text, text without any kind of formatting information (styling such as bold, underline, color, tables, tabs and indents, etc). Plain text, or code, is all that is necessary to create a hypertext; therefore, a text editor will be used to create HTML documents, and a web-browser will be used to view them.
      8. HTML is a computer code composed of a finite series of individual terms known as tags. These tags may be a single letter, a whole word, or an abbrieviation, but they are always surrounded by angle brackets as such: <html>. They give formatting or organizational instructions for the web-browser to decode and carry out on the presentation of the web-site. The overwelming majority of tags come in pairs, each with an opening tag— <html>, and a closing tag— </html>.
       
   2. Basic Structure:
      1. The <html> tag indicates to the browser the extents of a web document: it is its beginning and ending limits. When the web-browser ‘reads’ a page of hypertext, it should encounter this as the first tag before any others so that it may decode the page properly. In this way, it ‘marks’ the beginning of the document. Likewise, it should also ‘mark’ the end of the document (this is why it is called a markup language); therefore, the last thing that the browser should read is the second tag of the pair, marking the end of the document. As all HTML tag pairs, the second tag is identical to the first, aside from one difference, a backslash that precedes the term: </html>.
      2. All HTML documents consist of two discreet parts. The first part, indicated by the <head> tag, is always known as the head section. Like the <html> tag, the <head> tag comes in pairs, and so the pair follows the same pattern as the <html></html> tag pair. Therefore, the </head> marks the end of the head section. The information that comes in between this tag pair is primarily information about the document, information such as who wrote it, when it was written, what sort of codes and languages are used, what are some of the main topics and main subject matters of the document, etc. It may also contain additional information that aids in the presentation and interactivity of the document such as stylesheet information, and interactive script information.
      3. The <title> tag, is the single most important element of the head section. The title of the document itself follows the first title tag, which, in turn, is followed by the second of the tag pair, such as:
               <title>My First HTML Document</title>
         As mentioned, the first tag of the pair marks the beginning of the title, and the second of the tag pair marks its ending.
      4. Also mentioned, there are two parts to all HTML documents, and in most of them the second part is known as the body section. As the head section contains information about the document and aiding the document, the body section contains the information of the document itself—all of the primary content of the document, the text, the images, the animations, the links, etc. All content belongs between the <body> tag pair. If nothing is typed between the two body tags, then when the document is displayed in the web-browser, it will be entirely blank.
       
   3. Block Tags:
      1. The content of the body is organized by a series of html tags known as block tags. Block tags are a distinct set of tags used to organize information into discreet blocks. Although they do change the size and appearance of text in the page, their primary purpose is NOT to do this. They are NOT intended to format the appearance of the page. As such, they are NOT about presentation (the look of the page) but instead about organization (the structure of the information). This means they are meant to organize and indicate a heirarchy of the information: what is most important, what is secondary in importance, what is tertiary in importance, and so on. There are seven main levels in the HTML heirarchy of organization of textual information: six levels of headings and subheadings, and one level of ordinary paragraph text. Block tags separate blocks of information by blank spaces above and below. Other block tags will be discussed in the future.
      2. Headings Tags mark out the document's headings and sub-headings. The primary heading of your document will always be marked by the <h1> tag pair, secondary headings by the <h2> tag pair, tertiary headings by the <h3> tag pair, and so on down the hierarchy to the <h6> tag pair, which marks any sub-heading of the least significance. All headings’ tags separate the heading text by a blank space below. It further distinguishes the text by making it bold and changing its size depending on its importance, the more important is larger, the lesser is smaller. It is not necessary to utilize all six headings. They are to be used only when required.
      3. The <p> tag pair marks an ordinary block of paragraph text. One tag marks the beginning of a paragraph, and the second marks the end of the paragraph. Paragraph text is never bold and never more than 10 or 12pt in size, but each paragraph is separated by a blank space above and below.
       
   4. Inline Tags:
      1. Apart from block tags, inline tags are a second distinct set of tags. With them, the look of the textual content of the body may be modified to a rather limited basis. Unlike the block tags, this group of tags is NOT concerned with organization of information. Rather, they only concern the presentation of the information, the way it appears to us. These tags may italicize the text, underline it, make it bold, change its size, the typeface or the color of the text. Most importantly, the key feature of HTML, what actually makes it hypertext (the links), is achieved with a particular pair of in-line tags. The most significant characteristic common among all in-line tags, however, is that they do not mark out blocks of text. In other words, they do NOT add space above and below the text when you open and close the tag pair.
      2. The <u> tag pair is an in-line tag that when used underlines text. A single letter, a series of letters, a whole word or groups of words, or even entire sections of text may be set off with this tag to underline it when viewed in the browser.
      3. The <i> tag pair is an in-line tag that when used italicizes text. A single letter, a series of letters, a whole word or groups of words, or even entire sections of text may be set off with this tag to italicize it when viewed in the browser.
      4. The <b> tag pair is an in-line tag that when used bolds text. A single letter, a series of letters, a whole word or groups of words, or even entire sections of text may be set off with this tag to bold it when viewed in the browser.
      5. The <font> tag pair is an in-line tag that when used alone doesn’t do much of anything. A single letter, a series of letters, a whole word or groups of words, or even entire blocks of text, however, may be set off with this tag to alter its appearance it when viewed in the browser. One or more of three attributes must also be used with this tag in order for any modifications of the text to take place: the color attribute changes the color of the text; the size attribute changes the size of the text, and the face attribute changes the typeface.  
      6. Hyperlinks: The <a> tag pair is a very special in-line tag known as the anchor tag, but when it is used alone without any attributes, it does little or nothing. As a result, an attribute must accompany this tag, and the most common attribute used with it is href which means hypertext reference. This tag and attribute is what distinguishes HTML. It is what defines HTML and allows a user to connect to a seemingly endless array of documents, to go from one site to another with a click of the mouse. A single letter, a series of letters, a whole word or groups of words, whole sections of text, or even images may be set off with this tag and attribute to turn it into a clickable link to another document. It follows the same format as other tags and attributes: format:     <tag term   attribute   =   "value"> example:         <a       href   =   "put a URL here">
   5. 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 .
       
   6. Attributes: Sometimes additional terms, known as attributes, must be used together with tags. In fact, all HTML tags may be modified and extended with such additional terms, extending their capabilities in order to encompass additional tasks. These terms are placed between the angle brackets after the initial tag term in the first tag of a tag pair. Also, at times there may be more than one attribute per tag, but the order that they are typed is irrelevant. A common attribute of the block tags is align which sets the alignment of the content of the particular block. A common attribute of the <body> tag is bgcolor which sets the background color of the entire page. Tags and attributes always adhere to the following format: format:     <tag term   attribute = "value"> example:         <h1     align   =   "center">
   7. XHTML Standards:
      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).
   8. 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.