HTML4 TUTORIAL PART 2 STEP 1 - CREATING A WEB DESIGN FOLDER ON YOUR H DRIVE It will be necessary to create a folder in your H Drive to keep all of your web page items for this tutorial. Follow these steps: 1. On your desktop, click the H Drive icon (the little house). 2. Once inside your H Drive, RIGHT-CLICK somewhere on the white part. 3. Choose New and then Folder. 4. A new folder will appear. Rename it Web Design. STEP 2 OPENING A TEXT EDITOR It s best to use a simple text editor when creating web pages. Popular text editors include Notepad for Windows and SimpleText for Macintosh. All of your HTML documents must be saved as basic text documents or you will see unusual characters on your page (these characters are complicated formatting codes that you don t need). For this tutorial, we will be using Notepad. To open Notepad, select Start / All Programs / Accessories folder and choose Notepad. Use the default font... otherwise, your page might not be correctly interpreted (parsed). STEP 3 CREATING A BASIC HTML DOCUMENT The EIGHT Basic Tags o Every HTML document begins with and ends with o Within these two main tags are two parts to the document: the and <body> o Within the HEAD section are the <title></title> tags. You can type the name of your page between these tags. o The main viewable portion of your Web page is contained between the BODY tags. Make sure you have only one BODY tag in your HTML document. Type the following in your blank Notepad document (use your own name between the TITLE tags). <body>
2 Your web browser will ignore any whitespace when it interprets your page so it doesn t matter how many blank lines you have between your tags. From here, you can add more tags, tag attributes, and images, to fancy-up your page. STEP 4 - ADDING SOME TEXT IN THE BODY SECTION As mentioned above, the main viewable portion of your web page is contained between the BODY tags. We will add a simple sentence to your Notepad document. <body> This is my first web page! We have typed enough to actually view this as a web page. We will now save the document and view it in the Internet Explorer browser. Follow these steps to properly save the web page: 1. Choose File / Save As... You will get a window that looks like this:
3 2. In the top window, navigate to the Web Design folder you created in your H Drive. Under File name, delete *.txt and type mypage.html. Leave Save as type alone. It should be Text Documents (*.txt). After you save the page, you will see its name at the top of the Notepad document. Make sure it says mypage.html Notepad and not mypage.html.txt Notepad. Do not close the Notepad document when doing the next steps. Leave it open! 3. Now open the Internet Explorer browser from your desktop. Choose File / Open... 4. In the new window, click the Browse... button. 5. Navigate to your H Drive and DOUBLE-CLICK on the Web Design folder. 6. You will see your newly saved document mypage.html. 7. DOUBLE-CLICK it and then click on OK in the box. 8. You will see your first web page!! (it s kind of boring but we will fancy it up soon). Your name should be in the top strip of the browser (the head section) and your sentence will appear in the top left of your main window (the body section). Do not close the browser when doing the next steps. Leave it open! STEP 5 - CENTERING AND ADDING A HEADING DESIGNATION tags. Now that we have a basic web page structure, we will begin to fancy up your page with Centering. As shown so far, the default tendency of a web browser is to show text (or images) at the top left of your page. You can tell the browser to center any elements such as text or images by using a CENTER tag. The CENTER tag has a closing tag and should surround anything that you want centered. Go back to your Notepad document and add the following tags in the BODY section. (Note: the closing tag is placed towards the bottom of the document because we want all items centered on the page for this tutorial).
4 <body> This is my first web page! It s a good practice to save often when working on a computer, so at this time choose File / Save in your Notepad document (you only need to use Save As... the first time you are saving a document so using Save is fine). Before we see the new effect, let s make your sentence a HEADING by adding HEADING tags. Heading Tags. Headings add titles to sections of a page. HTML defines six levels of headings. Heading tags look like the following: The numbers indicate heading levels (h1 through h6). The headings, when they display, aren t numbered. They display in larger or bolder text so that they stand out from regular text. In HEADING tags, h1 is the largest size and h6 is the smallest. All sizes are relative to the size of the screen on which they are viewed. Heading #1 Heading #2 <h2>this is my first web page!</h2> Heading #3 <h3>this is my first web page!</h3> Heading #4 <h4>this is my first web page!</h4> Heading #5 <h5>this is my first web page!</h5> Heading #6 <h6>this is my first web page!</h6> When text is surrounded by HEADING tags, it is made bold and a blank line is added below the text. The blank line will become evident as you add more text and images to the page. Note that HEADING tags require a closing tag so that the browser knows when to stop affecting the text. Add the following HEADING tags (<h1> </h1>) to your sentence and add another HEADING tag size (<h2> </h2>) to a new sentence as follows:
5 <body> Be sure to choose File / Save after making any changes to your Notepad document. Now we can go back to the browser and see the results. Hopefully, you left the browser open so simply click on the Internet Explorer icon to go back to your web page. To see the new changes, you need to REFRESH the browser page. It should now look something like this: STEP 6 - ADDING A SOLID COLOR TO THE BACKGROUND The default background color displayed in a browser is white. You can change the color in the BODY tag by adding an attribute to the tag. Whenever you add an attribute to a tag you must give it a value as follows: <body bgcolor= #FFFF00 > In this example, the attribute is bgcolor and the value is #FFFF00 (Note that values are designated by using an equal sign (=) and the value must be in quotes).
6 Color Values on the Web. All colors used on the Web are designated as a particular HEXADECIMAL VALUE. A hexadecimal value is a series of six letters or numbers such as FFFF00 for the color yellow. There are numerous sites to find the hexadecimal value of a particular color. Here are two good sites: http://www.htmlref.com/reference/appe/colorchart.htm and http://www.w3schools.com/tags/ref_colorpicker.asp. When using hexadecimal values in your HTML tags, it is customary to use a pound sign (#) in front of the value. In the early 1990s, browsers began to become more user-friendly. They began recognizing colors by using actual names of colors: <body bgcolor= yellow > This technique works well for basic colors (red, blue, green, yellow) but the best guarantee to see your desired color is to use its hexadecimal value. Add the following new coding to your Notepad document in the BODY tag. You may use any color for the value by using a color name or the actual hexadecimal value. In the example below, we are using the hexadecimal value for the color yellow. <body bgcolor= #FFFF00 > Make sure that you have only ONE body tag in the Notepad document. You simply add the attribute and value to the existing body tag. Be sure to Save the changes! Now go back to your browser, refresh the page, and view the results.
7 STEP 7 - CREATING LINE BREAKS AND USING BASIC TEXT TAGS To illustrate the next point, add the following sentences to your Notepad document. <body bgcolor= #FFFF00 > These tags make my text look bold. These tags make my text look italicized. These tags make my text look underlined. Save the Notepad document and refresh the browser. You will see this:
8 This serves as a reminder that the browser ignores any whitespace. You were given a line break after the second sentence as part of the h2 tag, but the remaining sentences showed up in one long line. The browser must be told when to add another line break. To do this, you use the tag. It behaves as if you hit the ENTER key on your keyboard. If you want the lines to be stacked one on top of the other just like you typed them, then you need to add tags: <body bgcolor= #FFFF00 > These tags make my text look bold. These tags make my text look italicized. These tags make my text look underlined.
9 The tag is the first tag we ve come across that doesn t have a complimentary closing tag. Also notice that the three sentences are horizontally centered because they are under the effect of the tags we added earlier. In HTML4, you can use tags to add vertical spacing to elements. Type the following to add more space between your sentences: <body bgcolor= #FFFF00 > These tags make my text look bold. These tags make my text look italicized. These tags make my text look underlined.
10 Note that tags can be added either way and maintain the same effect because the browser ignores whitespace. It s a good coding practice to make your Notepad document look as close to your browser page, so stacking the tags on top of each other gives you the best idea of how it will look. Now we ll introduce three simple tags that can be used to affect text: <b></b>, <i></i>, and <u></u>. All of these tags should surround the text you want to affect and definitely need the closing component to tell the browser to stop doing the particular effect. Add the following tags to your Notepad document: <body bgcolor= #FFFF00 > These tags make my text look <b>bold</b>. These tags make my text look <i>italicized</i>. These tags make my text look <u>underlined</u>.
Notice that the surrounding <b></b> tags made the particular word bold, the surrounding <i></i> tags made the particular word italicized, and the surrounding <u></u> tags made the particular word underlined. You can use one, two, or all three tags around text if you want. Just be sure to close them when you are done with the effect! 11