HTML I Exercise Notes Tools You need four things to build a web page: 1. A computer with a web browser Microsoft Internet Explorer or Netscape Navigator/Communicator) to see your work in progress. 2. A simple text editor or word processor to create and save the HTML files. Any program that saves a file as ascii text is fine. Both PCs and Macintoshes come with basic text editors -- Notepad on the PC and Simple Text (Tex-Edit Plus) on the Mac. You can also use your favorite word processor, (i.e. Microsoft Word) as long as you save the file in text only format. Programs like BBEdit for the Mac and Allaire's Homesite for the PC are reasonably-priced HTML text based editors designed specifically to make web pages. 3. If you wish to also "publish" besides "author" your first web pages- you'll need your own directory folder on a web server to store your documents and files so that other people and search engines can access them. You might establish your presence as part of an account with your internet service provider (ISP) or internet presence provider (IPP). Check with your ISP or IPP for details about your storage area. 4. You might require software for transferring your pages from your computer's hard drive to your storage space on a web server. This software is called File Transfer Protocol (FTP) software. Fetch is a common Mac FTP program. CuteFTP or WSFTP are common PC FTP programs. You can download them through your ISP's or IPP's support pages or through a software repository like Shareware.com. That's all you need. That and an idea about what you want to put on your page! Make a File and Root Directory To get started create a file folder or directory to save your new HTML files (documents) in. All the objects you ultimately will add (html docs, graphics, .mov files, etc) will be related to each other via paths known as "relative paths" They are "related" by virtue of the fact that they live in this "root directory" folder. The first thing you need to do is use your text editing program to create a file that will hold your web page. You can name the file anything you want as long as it ends with the extension .htm or .html. The .htm or .html extension tells the browser that this is a web page and should be viewed as one. For example, any of these names would be fine: * index.html * contents.htm * page.1.html All names of html documents must contain NO spaces index html is INCORRECT --> index.html is CORRECT "index.html" is generally the name for the front door (splash page or homepage) to your Website. Check with your systems administrator for the appropriate syntax Tip: It's best to title all your pages in lower case. Although both will work, if you always use lower case, you'll never have to remember how you titled a page. Case sensitivity usually must be accurate for guests to locate your url on the Internet. Understanding Tags HTML pages are easy to build -- all you need to understand is a few tags. A tag is a way of identifying the different pieces of your page, like headlines and paragraphs. Tags are easy to spot. They all begin with the "less than" sign: < and end with the "greater than" sign: > Between the greater and less than signs is the tag name. For example, this tag is the paragraph tag:

You can use either upper or lower case letters for tag names, however we are now migrating towards xml integrating with HTML. The current HTML spec. supported by newer browsers is now called XHTML, which is much more exacting than the original HTML specifications. Therefore it is best to only use lower case characters for your tags. i.e. --> YES! --> NO ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ All HTML pages must include at least these tags to be an orthodox web document renderable by a browser. My Title ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Header (Headline)

If

you

can read

this then you

don't need to visit
your eye doctor this week.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Character Styling The "Paragraph Tag" delivers a double line break.

With hTML 3.2 you may add the

tag.

or

You can add "attributes" to the paragraph "element."

Can you stack several "Paragraph Tags" and gain "white space?" Try it.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ The "Break Tag" delivers a single line break
Can you stack several "Break Tags" and gain "white space?" Try it.




~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Physical and Logical Character styles "STRONG" emboldens type and is a "Logical" Character Style. It is considered the best all around choice for emboldening and is browser specific. "b" also emboldens and is a "Physical" Character Style. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ "em" Emphasis This is an italic type and is a "Logical" Character Style. "i" is also an italic and is a "Physical" Character Style. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ "address"

Your Name Your Address Your City, State Zip #
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ This is a typewriter or teletype font style.
It is the third type of "Physical" Character Style.
TT uses "Fixed Font" characters.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Pre formatted text This is known a "Pre formatted text style" and displays mono spaced font characters like Courier
adding "white paper space" that a browser usually strips out.

It uses the Text Editor's White space... including tabbed spaces... and uses "Fixed Font" mono spaced
characters. 
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ You may use the pre formatted text tag to add white space to a page.




~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ The Comment Tag This is a comment tag. What? You can't see it in your browser window? ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Lists: The Ordered list inserts numbers or letters before each list item.
  1. This is a ordered list which uses the "ol" tag.
  2. Ordered lists automatically number items.
  3. li stands for List Item.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  1. This is a ordered list which starts at what ever number you designate.
  2. A very useful feature.
  3. Driven by the client.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  1. This is a ordered list which starts with upper case characters.
  2. A very useful feature.
  3. Driven by the client.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  1. This is a ordered list which starts with lower case characters.
  2. A very useful feature.
  3. Driven by the client.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  1. This is a ordered list which starts with Roman numerals.
  2. A very useful feature.
  3. Driven by the client.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Unordered Lists ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Nested Lists You can put lists inside of lists
  1. Monday
  2. Tuesday
  3. Wednesday
  4. Thursday
  5. Friday
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  • This is a Menu List
  • Minestrone
  • Chicken noodle
  • Beef broth
  • ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ This is a listing. Of many small things. Of many small things. Of many small things. Of many small things. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    This is a BLOCKQUOTE. Notice that it tabs in the same distance from the margin as the designated definition tag. how soon how soon is the month of June when we may go barefoot under a summer moon. how soon how soon is the month of June when we may go barefoot under a summer moon. how soon how soon is the month of June when we may go barefoot under a summer moon.
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Notice that you can nest several "Blockquote tags" to gain page design control. how soon how soon is the month of June when we may go barefoot under a summer moon. how soon how soon is the month of June when we may go barefoot under a summer moon. how soon how soon is the month of June when we may go barefoot under a summer moon.
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ This is hTML BIG Type This is hTML small Type ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ This is hTML subscript Type This is hTML superscript You may experiment and stack these tags Content ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ The Division Tag - a "Block level tag" may surrend several elements collectively This is hTML...with the
    division tag...
    You may use it with an
    content
    or
    an image
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Font Elements The Font Element comes with three attributes- Size Color Face (the actual font design.) These font element comes in two styles for you to choose from. They yield the same, exact look- Logical Physical font size: Logical- minus two
    minus one
    plus one
    plus two
    plus three
    plus four
    Physical- one
    two
    three
    three equals the default size four
    five
    six
    seven
    Basefont- to change the font size of all the body text type n is a number from one to 7, the default is 3 which is the size the user has chosen in the Preferences or Styles dialog box. You might place this directly under the TAG. i.e. Font Color Alphanumeric names of colors Color or hexadecimal colors Color Font Face Face If Arial is not in the user's font folder then the client searches for the next posted font. If none are there the browser uses the original default font i.e. "Times." Notice you can have several attributes within the same tag. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ horizontal Rules! This is a normal horizontal rule:
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ This is a horizontal rule with a "no shade" attribute
    Yields a solid black line These are progressively thicker horizontal rules. Size equals its thickness in pixels.


    A horizontal rule with the width attribute added to the size:
    A horizontal rule with the width attribute added as 55% percent of the page:
    Aligned right:
    aligned left:
    Centered:
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ The Dreaded Blink Tag Use judiciously...please! The most hated element n hTML! ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Relative and Absolute Links This is an example of an relative (inline or local) hypertext link. This is an example of an absolute (remote) hypertext link. Best to code with relative links whenever possible. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Embedding an image This is an example of how to embed a graphic with a Relative Link . ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Background Color Alpha numeric hexadecimal color Background image added. © 2000 Robert Altman