Refresh - http://www.passco.com/sn_structure.htm  Updated:  Spell Check
Unit 2: Structure - The Basic HTML File
( Author's Notes )
 Try first, then to Return
Note: A close response may close your browser if this page is independently called.
  1. ___ Hypertext Markup Language___
       The HTML language is not a programming language. It is video display generator. It has a formal standard. In the standard are such features that a strict set of rules is not absolute. The browsers are designed to be very forgiving. The rational for that is that many original designers (and you author) take advantage of how forgiven the browser processing is when processing HTML file.
       Your author will try to mention where specific rules have to be used. For example, the character string "&nbsp;" must be in lower case. Another, absolute requirement is that <TABLE tags must have a </TABLE> tag.

  2. ___ HTML code types and syntax
       HTML coding consists of two types of text string. One type is the string that are HTML language strings call "tags". The other text strings are the "literal text" string that appear on the page.

  3. ___ blocks  ___statements
       
    Tags are composed of two types. One type of tags are those that constitute a "block" pair of tags. The HTML block, as an example, has a very simple syntax. Neither tag that begins and end the block have elements.

    Syntax: <HTML> ..... </HTML>
       The second type of HTML tag is called a "statement" tag. A comment in HTML coding is accomplished by use of a comment statement. The following are an examples of tag statements.

    Syntax examples:

    <!-- Comments start with a less than character followed immediately with an explanation point character. The end of the comment statement is a greater than character. -->

    <! Comments start with a less than character followed immediately with an explanation point character. The end of the comment statement is a greater than character. >

    <!Comments start with .........than character.>

    <!~~ Comments start with .........than character. ~~>

    <!^^^^^^^^^^Comments start with .........than character.^^>
  4. ___ Multiple spaces are reduced to a single space. The character text within HTML tags is not case sensitivity.

  5. ___ Basic Blocks___

       The HTML file is composed of two major blocks. The <HEAD> ..... </HEAD> block and the <BODY> ..... </BODY> block.

       The <HEAD> ..... </HEAD> block is used to provide the browser with specific information. Generally, the tags presented in the "Head" are browser input and control parameters. Also, tags are used to inform the user and search engines used on the Internet about the file.

       The <BODY> ..... </BODY> block provides the browser with the tags and statements that are used to present the visible aspects of the file presentation.


  6. ___ HTML block  ___HEAD block ___BODY block
       The three major block are structured as illustrated as follows
    <HTML>
    <HEAD> ..... </HEAD>
    <BODY> ..... </BODY>
    </HTML>
       Note the "nesting" of the three blocks. The HEAD and BODY blocks are serially presented within the HTML block.

  7. ___ "My First Page" (select an editor and edit a new file)
       Code the above three blocks.

  8. ___ Saving Our Page (to the desktop)
       Code the above three blocks. The first consideration is where to save your file. You might consider saving the file on the Desktop, or a folder for your course pages.
        The saving of the file will require giving the file a "filename" and an appropriate "extension". There are two extensions that are valid. They are ".htm" or ".html". Note all "extensions" include the leading period character. An appropriate name would be "myfirstpage.htm".

  9. ___ Access to Our Page (from the desktop)
       Open your browser.

  10. ___ Presentation of Our Page (repeating presentations)
       View your file by clicking the file icon from where you stored it.

  11. ___ Viewing Source of "My First Page"
       Using the browser's VIEW/PAGE SOURCE access to view the source.

  12. ___ Viewing Resources of "My First Page"
       Using the browser's VIEW/PAGE INFO access to view the resources needed.

    HEAD block purpose and content___
       Within the HEAD block the HTML file gives information to the browser. This includes a TITLE for the file. Meta statements that give information to either the browser, or to other entities, such a search firms. There are other types of statement included in the HEAD block that controls how come HTML coding should be process in the "BODY" block.

  13. ___ DOCTYPE statement
       This statement tells the browser what the browser is suppose to assume about the file that is transmitted to it. If the statement is not present in the file that the browser receives the browser will assume it is the default aspect of itself. Ii is possible that in this way, this statement be appended to the file when the file is saved by the browser. Since this is a browser to browser communication, the syntax of the statement is generally of no importance to you.

  14. ___ TITLE block
       Have you ever wondered how windows get the names presented in the TITLE BAR? Well, the method is shown below.

    Syntax: <TITLE>Web Page Design - sn_structure.htm</TITLE>
    Any additional wording is provided by the browser.

  15. ___ "My First Page" with TITLE
       Edit in a TITLE block for your file. Which block would you use? Then save and view your file.

  16. ___ META Statements
       Meta statements are the classic method to provide the browser with information it uses as input information, and what information that it is permitted to transmit to other browsers and Internet entities.
       Web Page Design - sn_structure.htmWeb Page Design - sn_structure.htmSo far, none of the block tags we have learn, HTML, HEAD, BODY and TITLE, have no "elements".

  17. ___ NAME= element
       Since there can be many different kinds of META statement, the browser must know what kind of META statement it is. This is done by including with the META statement one or more "elements".

    Syntax: <META elementname=argument elementname="argument" ...>
    Elements are composed of three components"
    1. an element name which is specific and defines the element;
    2. an assignment character, the equal sign;
    3. and an "argument". By standard, the arguments should be a literal argument, but the browsers are forgiving of this constraint. We will discuss the topic late in the Notes.

  18. ___ KEYWORDS= element
       This META statement is directed to an external entity, the Internet search engines. These firms (like Yahoo, Netscape, MSN, Goggle, etc.,) use what are called "robots" and "spider". These programs read your file when it passes through their routers and the CONTENT="argument literal" as data used in their search databases.
       Below is a sample of the keywords (only a portions of those) in the home page files for the Ewing Seniornet.

    Syntax:
    <META NAME="keywords"
    CONTENT="SeniorNet, seniors, computers, Internet, Senior Net, computer, senior, senior citizens, older adult, older adults, education, senior citizen, World Wide Web, technology, elderly, senior net, retiree, seniornet, ...., SeniorNetters, seniors and computers, seniors and the Internet, seniors online, seniors and the Web, seniors and the Net, CyberSeniors, seniors and cyberspace, computer education for seniors">
    Any repeated words, like "senior", "seniors", "Internet" are redundant. Trival wording, like "and the", are ignored by the spiders. Most of the string phrasing, like "seniors and the Net", may or may not have significance and is dependent upon how the databases are structured.

  19. ___ DESCRIPTION= element
       
       This META statement is directed to an external entity, the Internet search engines.
       When you make a search of the Internet, and you receive a "result" page, there is usually a description of the site. The literal description is provide by a META statement as illustrated below.

    Syntax:
    <META NAME="description"
    CONTENT="A Web Page Design Site for Seniors to Youngsters">
  20. ___ CONTENT= element
       The CONTENT= element provide the data significant to the "NAME=" type specified in the META statement.

  21. ___ Element types
       The concept of elements are not just relate to just the META statement. Elements are common to all kinds of HTML block tags and statements. Some elements are required by the tag. Some elements are optional, and when not present, the browser generally resorts to using a default element with a default argument.

       For example: The table data tag, <TD>, is a common tag. Although not explicitly present, the tag is assumed by the browser to be implicitly:

    <TD  WIDTH="undefined"  HEIGHT="undefined"  ALIGN="left"  VALIGN="middle"
    BGCOLOR="to that of the TABLE's  BGCOLOR=argument"  BACKGROUND="". etc., etc.,>

    The "undefined" argument are such that the browser will defined the values based on the process of displaying the TABLE.

  22. ___ Literals  ___Literal constants
       Literal is basically those strings enclosed in either a pair of double quotes, or in some occasions, a pair of single quotes. There exist a character on the keyboard the is not a quote character. It is the "back quote", the character that is lower case on the key to the left of the "1/!" key. The author has used this key in the following literal: "John didn`t come to this class session."

  23. ___ Literal constants
       What is a constant? It is something that has meaning and does not change. Since HTML files only contains characters, then all the strings of characters are "literals". Those strings that have significant meaning in HTML are thus "literal constants".
       Since, all special strings are literal constants they may be enclosed in double quotes or need not be so enclosed. If a color name, like black, could be define by the literal "black", or "BLACK", or "Black", then why could it not be just the word black. If arguments are, in all cases, literals, then single strings like black need not be enclosed in double quotes. For example, the elements BGCOLOR=black is equivalent to BGCOLOR="black".
       It is possible that as set of strings may have a specific meaning. For example, there is a FONT that has a name MS SANS SERIF. The browser would have a difficulty in processing FONT=MS SANS SERIF. The argument of an element is either a single word, like FONT=ARIAL, or COLOR=cornsilk. But, a multi-word argument must be embedded in double quotes, thus FONT="ms sans serif" is an obvious "literal constant".

  24. ___ Hexadecimals Literals
       What is a Hexadecimal anyway? Well it is a representation of a "number" where each digit has a value from zero to 15. That is there are sixteen character that are user to represent each digit. "O" for zero, "1" for one, ... , "9" for nine, "A" for ten, "B" or "b" for eleven", and finally, "F" or "f" for the sixteenth digit, fifteen.
       In assigning color values the range of values range from 000000 to FFFFFF, a six digit hexadecimal number. Hexadecimal numbers are sometime proceed with a special character, the pound character, "#". In this way one could distinguish the difference between 100 thousand and the "hex" number #100000.
       In HTML code only colors are expresses in "hex" numbers, never "decimal" numbers. And, all other numeric values that are not assigned as color arguments are decimal. Thus, COLOR="#000000", COLOR="000000" and COLOR=000000 are equivalent. And, WIDTH=1000 and WIDTH="1000" means a WIDTH with a 1000 decimal number of pixels.
       Here is a pixel, ( ). Here is a hundred pixels, ( ). Here is twenty pixels stacked vertically, ( ). Here is a 100 pixels in square, 10 by 10, ( ).

  25. ___ Constants  ___Literal  ___Numeric
       One has to determine if a string is a constant. Would tomato be a constant? Would top, or BOTTOM be a constant? Would 90% be constant? Would Light Blue be a constant?

  26. ___ Literal constants
       The following are literal constants: black, white, blue, pink, middle, absmiddle, left, right, center, noshade, nowrap, keywords, description and many others. There are roughly 140 literal colors for ALICEBLUE to yellowgreen. Don't believe me? Click here. We'll study more about colors later.

  27. ___ Numeric constants
       The following are numeric constants: All decimal values not assigned to color elements. All hexadecimal values assigned to color elements.

  28. ___ Meta Manager Site
       Meta tags are very important for improving your listings in the search engines. Check your site and build them if you need to.
    http://www.siteowner.com/system/meta.cfm

  29. ___ BASE Statement
       There are two types of URL, Uniform Resource Locator, addressing.

  30. ___ Absolute URL Addresses
       One type is called "absolute". They are explicitly the address of a server, ISP. The author's domain has an absolute URL address, "www.passco.com". This address has no path or file specification beyond the server address. When use as shown, the browser seeks a default file specific by the ISP. The common default file is "index.html" or on some ISP "welcome.html". Note the four character extension, ".html".

  31. ___ Relative URL Addresses
       The second type of addressing is called "relative addressing". These "literal string" reference a "path" through folders on the server. Suppose on the server there is a folder called "/images", and in the folder is a file called "agator.gif". The absolute address to this image would be http://www.passco.com/images/agator.gif.
       For you as a student to use this graphic on your page, you should use a "absolute" URL address. But, as the author of a specific page, the graphic is located on the "www.passco.com" server, then when his page is executed on an the "relative" address assumes the server address. Thus, this relative link address images/agator.gif should be operative.

       When the author is asked to analyze the site of another designer, all the links and resources in his/her HTML file are referenced from that servers environment. The <BASE= statement, when place in the file, and proper directed to the clients server, than all the resources accessible to the client is accessible to the author for HTML file analysis.
       If we were to assume that you were to analyze the page for the www.remoteuser.com server. We could download the file from the clients server. If the client's page uses 20 graphics off his server, we could download all of them and place them is a folder structure similar to his. There is a better method, add a BASE statement, such as, <BASE HREF="http://www.remoteuser.com/">. The effect of the BASE statement is to permit the author's browser to appear to be the browser on the clients server.

  32. FRAMESET blocks (Not discussed in this course)
       { comment }

  33. ___ Comment Statement
       Comment have be illustrate and describe earlier. Comment are used to document aspect of the code. It can also be used temporary remove code from being proceeded. Comments can be used to assist in location positions in a larger HTML file. For example: <!~BR~> would be an appropriate comment just proceeding this code. An editor could do a FIND on this string "~BR" and find this code segment.

  34. ___ Break Statement
       The BReak, <BR> is a statement that is assumed in many HTML coding situation. For example, the <LT> ...</LI> generates a BReak statement after the terminal tag. If the terminal tag, </LT> is omitted, the BReak tag is still generated.
       Normally, to obtain a blank line between to textual paragraphs the code appropriate is two BReak statements, <BR><BR>. The paragraph block is described below, but it should not be used to insert a blank line.

  35. ___ SCRIPT blocks
       JavaScripts. That could be a few classes in themselves. Scripts are used to insert a programming characteristics to an HTML file. Here is a script that documents the update date and time of this file.

    &nbsp;Updated:&nbsp;
    <SCRIPT LANGUAGE="JavaScript">>
    <!--
    document.write(document.lastModified);
    // -->
    </SCRIPT>

    The result of the above code is shown below.

     Updated: 
       Why is the date not today's date. Well, the script is used to read the ISP server for the date that this file was last uploaded. This permits the viewer and the author to deterime when the file was last modified.
       There are hundreds of JavaScript sites with dozens for accessible free scripts. Doing searches on the Internet provides wealth of information on Javascripts. Also, if you see page functioning that interests you, save the file and see what is processing the presentation. Many scripts are browser dependent. We will study one in a later session.

  36. __ STYLE blocks
       The following is a STYLE block that is placed in the HEAD block that will prevent the underscore being displayed under each literal link.
    
<STYLE TYPE="text/css"> 
<!-- 
// The embedding the following statement in an HTML comment
// is so browsers that ignore STYLE tags will ignore the block.
// These three double slash lines are a comments within the STYLE code.
A {text-decoration: none}
-->
</STYLE>
    BODY block purpose and content___
       This major block of the HTML file is the position that contains the blocks and code is a serial fashion. After the HEAD block is read by the browser, and the BODY block is read. At that time the browser build the resources, such as link addresses and locations for the graphic files the page required. It the makes requests of your local PC for resources defined to be there. Also, the browser make a request for graphic file held on your server. It also makes a request of your server to send a request to remote servers for their needed graphics. The browser accepts the resources and loads them into the PC's memory. As the resource are completely obtained, the browser proceeds to display text, TABLE structures, and graphics on the monitor and video buffer.

  37. ___ The First Rule of HTML Coding!
       The First Rule in HTML is to write code as if it were blocks within blocks.

  38. ___ The Second Rule!
       The second rule is to apply the First Rule.

  39. ___ CENTER block
       The block is used to center the presentation of text and graphics of the monitor.

    Syntax: <CENTER> ..... </CENTER>

  40. ___ "My First Page" centered

    Modify your page with the use of the Center block.


  41. DIV (division) block (Not discussed in this course)
       { comment }

  42. ___ P (paragraph) block
       The Paragraph block have specific characteristics. The default ALIGN= element argument is LEFT. Certain HTML tags define outside a Paragraph block may return to the "default" values for those tag. Thus, many tags may need to be redefined within the Paragraph block. Some browser process externally defined tag with in a <P> block.

    Syntax: <P ALIGN=[ left | center | right ]> ..... </P>

    where "[ left | center | right ]", implies the selection of one of the arguments, i.e, LEFT or CENTER or RIGHT justification.

    Modify your page with the use of the <P> block.

    Modify your page with the use of the <P ALIGN=center> block.

    Modify your page with the use of the <P ALIGN=right> block.

  43. ___ BLOCKQUOTE block
       This block is use to indent text and graphic, both on the left and right. The indention is eight characters. The syntax statement displayed below is within a BLOCKQUOTE block.

    Syntax: <BLOCKQOUTE> ..... </BLOCKQUOTE>
  44. ___ "My First Page" with margins
       
    Modify your page with the use of the BLOCKQUOTE block.

  45. ___ Our First HTML tag in depth
       Let's give our file some global appearance features. Maybe change the text color and background.

  46. ___ The BODY block tag
       Ths BODY block has in its list of elements that are global to the entire file. Here we will those appropriate to our current session.

  47. ___ BGCOLOR= element  ___Default
       The default color for the background color is white, "#00000" or the "literal color" of "white". To assign a different color to the background the element BGCOLOR="Literal color". A little later we will discuss that literals can be assigned to the BGCOLOR= element. The BGCOLOR= element is a valid element for other HTML tags, such as, TABLE and TD tags.

  48. ___ BACKGROUND= element  ___Overrideing element
       The background of the entire file can be provide with a graphic. The two standard image formats are GIF and JPG (or JPEG). This image http://www.passco.com/images/worldbgwhite.gif is use by the author for series of pages. Can you define the dimensions of the above image?

    Cut and paste this code to your editor, save it, name it, then display it.

    <BODY BACKGROUND="http://www.passco.com/images/worldbgwhite.gif">
      &nbsp;
      </BODY>

    Cut and paste this code to your editor, save it, name it, then display it.

    <BODY BACKGROUND="http://www.passco.com/images/carrie.jpg">
      &nbsp;
      </BODY>

    If the background image is not accessible the background will be white.
    To define an alternative the BGCOLOR= element could be incorporated. The BGCOLOR= element is overriden by the BACKGROUND= element.

  49. ___ TEXT= element
       Another BODY element is the TEXT= element. The argument for the TEXT= element can any common color argument.

    Cut and paste this code to your editor, save it, name it, then display it.

    <BODY BACKGROUND="http://www.passco.com/images/worldbgwhite.gif"
      TEXT=navy><CENTER>
      <H1>Better Than TV Weather</H1>
      </BODY>


 Try first, then to Return

Top-of-Page


 Author/Instructor: Ron Reed, fmt@passco.com - PASSCo.com
Printed document availability: None (print it from your browser)
http://www.passco.com/sn_structure.htm

Freeback Form

Built In Validator Link