Summer 2007 week 1: 05/16

hello everyone, welcome back to TCI (after a far too short break) for the summer term. 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 summer term is usually a little less hectic as the days seem longer (in fact, there are more hours of daylight), and there are fewer students. for the most part, new yorkers seem to slow down a bit during the summer months as well. now, although i don't reduce the amount that i teach in this class during the summertime, the fact that there are fewer students, that the class is smaller, will help us out a lot. i will be able to give everyone more individual instruction, and the class just goes more quickly when there are fewer people for me to lead through the material. so, even though you might prefer to be somewhere on a beach sipping a margarita or dacquiri or mojito all summer, i don't think things will be too awful for us here. at least you'll be learning something new.     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 will be able to post questions and comments. 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 3 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 3.
   1. LINK   General Information;
   2. LINK   Basic Structure;
   3. LINK   Block Tags;
   4. LINK   Attributes;
   5. LINK   Inline Tags;
   6. LINK   Hyperlinks;
2. HOMEWORK: Answer the questions below as you read through the material.
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?
4. INTRODUCE: 
   1. General Information:
      1. 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. As 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. 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">  
   5. 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">