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.
With hTML 3.2 you may add thetag.
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"
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.
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.~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 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 theNotice 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.