Intro to Web Building - Unit 1
The Basics
1. Web pages consist of 2 parts: the visible page (viewed from a browser) and the underlying HTML code that creates the visible page.
2. HTML consists of a series of tags that enclose the information that the webmaster wants displayed on the web page. Special tags enclose the whole page, and other tags enclose all of the individual elements (like pictures and text) that appear on the page.
3. The tags communicate with your browser to tell it how to present the information on the page.
4. Tags are simply words enclosed in brackets, like the <I> tags below:
| <I> This tag formats the text in italics</I> |
5. Almost all tags (with a few very important exceptions) come in pairs: an opening tag at the beginning of the text that is being formatted, and a closing tag that is usually identical to the opening tag, but with a /.
6. All HTML pages must be enclosed in <HTML>... </HTML> tags. This informs the browser what sort of coding is being used, so the browser can read the file.
7. All HTML pages consist of 2 parts within the HTML tags: the head and body, desginated by the <HEAD>... </HEAD> and <BODY>... </BODY> tags. The code below is the most basic HTML code necessary for a webpage:
|
<HTML> <BODY> |
8. Only the information in the BODY section of your code is visible as a webpage. Thus, in the example above, a browser would display the sentence "this is a complete, tiny web page" in 12-pt font at the top left corner of a blank, white page (see
example). The information in the HEAD is strictly for the browser, and can contain information making your page easier to fin via search engine (specifically, it can contain
META tags for search engine spidering, but that is a more advanced skill than we will cover now.)
NOTE: The HEAD can contain a TITLE tag, which specifies the text to appear in the drag bar (on this page, the drag bar should read "Web1").
This text is not visible within the
webpage.
9. Bear in mind that the appearance of your code will not match the appearance of your page; neither spacing nor formatting are retained from the code as is appears when you compose it. (In other words, if you put some of your text in boldface or indented in the HTML file, it will NOT appear in boldface or indented on the web page. All formatting MUST be achieved through code.
10. Begin coding.
Basic Code
Begin your web page by opening a text editor: MS WordPad (in Accessories under the Start menu) on PCs or SimpleText (under the apple) on Macs. DO NOT use MS Word!! It will re-encode your code so that all you HTML tags become visible AND MS Word writes terribly sloppy, confusing, and inefficient code.
|
<HTML> <BODY> </BODY> |
So far, nothing that you have typed will be visible on a web page. Now you need to add content.
2. In between the BODY tags, ADD the words below that are not greyed (subsititute the appropriate information for yourself for the red words):
|
<HTML> <BODY> Hello. My name is Sophie. I'm a freshman English major at UT. Let me not to the marriage of true minds </BODY> |
3. Save the file (preferably to your disk or Teacher Folder). On a Mac, call it index.htm and hit Save.
On a PC, it is a little more complicated. Choose Edit / Save As, and type "index.htm" in the File name blank. Below the file name, click on the drop down list to select the file type (plain text). For complicated reasons, your life will be simpler if this main page is titled "index" rather than "SophiesPage". Trust me. NOTE: html files cannot contain apostrophes or spaces, and they must end in either .html or .htm. "Sophie's Page.doc" is an illegal file name.
4. Now view your file. Open Netscape (or MS Explorer) and choose File / Open Page. In the pop-up menu window, select Choose File (or Browse). Go to the directory in which you saved your file and double-click on the file. Compare to my example page.
5. Note that your text looks like one big blob. This is because the code did not contain any formatting tags. Even though your code was formatted (with indentions and hard breaks), your web page is not. Let's return to your code in the text editor and insert some formatting tags. Leave Netscape open.
6. To insert spaces between lines, separate your information into paragraphs, using the P tags. Add the tags below to your existing content.
|
<P>Hello. </P> <P>My name is Sophie.</P> <P>I'm a freshman English major at UT.</P> <P>Let me not to the marriage of true minds |
7. SAVE your changes to be able to view them in Netscape. Activate the Netscape window and click the Refresh or Reload button to see the changes. Note that your poem appears in paragraph form, without hard line breaks.
8. Leaving Netscape open, return to your page in the text editor. Insert BR tags at the end of each line. The BR tag is one of the few tags that occurs alone, with out a closing tag. It is called a singlet.
|
<P>Let me not to the marriage of true minds<BR> |
9. Save an view the changes in Netscape. It should be correctly formatted.
10. Now your page needs a title, as does your poem/song. To make a title, using heading tags. Like P tags, heading tags separate the enclosed text from the rest of your content by inserting a space before and after the title. Headings also add boldface, italics, and increased size. The exact appearance varies depending on the browser, but the largest is H1, and the smalled is H6. Play around with these sizes till you achieve the look you desire. Add only the text that is not in grey below.
|
<HTML> <BODY> <H1>Sophie's Home Page</H1> <P>Hello. </P> <P>My name is Sophie.</P> <H3>Shakespeare's Sonnet 116</H3> </BODY> |
11. View in Netscape and compare to my example.
12. Now we will add some basic formatting features to your text. Apply each of these to a few words or phrases of your existing content.
<B>... </B> boldface
<I>... </I> italics
<U>... </U> underline
Examples:
|
<P>My name is <I>Sophie</I> </P> |
13. All good webpages should include a link to your e-mail address so that readers can respond to your content. At the bottom of the page, just above the close-BODY tag, type the following. (Replace the red information with your own e-mail address):
|
Contact me with comments at: <A HREF="mailto:yourmail@mail.com">yourmail@mail.com</A>. |
14. Include a link to the class homepage, plus any other interesting links. Below are some possiblities (Note the BR tags at the end of each line):
|
<P> |
15. Save an view results in Netscape. Compare to my example.
Posting Online
You now have a webpage, but it is not published online. Instead os existing on a server that is part of the web, it is on your disk/Teacher Folder. You can access it on your own computer, but no one else can.
Consequently, you need to get some free server space. There are a number of companies offering free server space on the internet; these instructions are for Geocities, as they are the biggest. The down side to free server space is that the company has the right to put irritating little pop-up ads on you homepage. If you have the option to buy some server space through your Internet Service Provider, that is the best route, as it will be ad-free.
1. In Netscape, enter the URL http://www.geocities.yahoo.com/home/ in the address bar.
2. At Yahoo-Geocities, you should see a Members Sign In box. Use your Yahoo ID and password to sign in. (If you don't have a Yahoo password, here are the instructions for getting one)
3. At the Build Webpages page, select Upload & FTP.
4. In the Easy Upload page, select the first Browse button.
5. Locate your file and double-click on it.
6. Leave the remaining Browse fields empty and click the Upload Files button.
7. You should be automatically returned to the Build Webpages pages. Click on the File Manager link. File Manager is essentially your headquarters within Geocities. You will work from the File Manager in the future to add more pages, upload graphics, and edit existing pages.
8. The File Manager will open and display all of the files that you have on the Yahoo-Geocities server. Geocities automatically assigns you an index.htm page. Your upoad should have written over that original page and replaced it with your code. IF YOU HAVE 2 INDEX PAGES in your File Manager, click View to look at each one, and determine which is yours. Click the select box to the far left of the other page and click the Delete button at the top of the page to get rid of the extra page.
9. Write down your URL (and password / ID, if necessary) so that you can find them again.
10. From now on, edit your pages within the Yahoo-Geocities enviroment, rather than in a text editor.
We will explore more web building skills later in the semester. Feel free to work on this project and to build your skills independently.
This page has been accessed at least 
times since the counter was last reset
(or 28 November 2001, whichever is more recent).