HTML Tutorial

In this tutorial you will create a simple Web page by writing HTML source code in Notepad. The Web page will contain a subtitle, a short introductory paragraph, a link to a Web site and an image.

STEP 1 - Coding your document in Notepad and viewing it in a Browser:

Launch the Notepad program as follows:
  • Select Start - AllPrograms - Accessories - Notepad) from the Start menu.
  • Type the the HTML framework statements shown in bold type in the figure on the right <html>
    <head>
    <title>
    </title>
    </head>
    <body>
    </body>
    </html>
  • View your page in a browser (Firefox or IE)
    1. Open your browser
    2. Select the Open File Command - It is under the office Logo in the top left corner of the screen. If you are on an older version of windows it is under the File menu.
    3. Browse to find your file and load it into the page
    4. Notice at this point you have created a blank canvas to use. It exist but nothing is on it.
Type HTML Tutorial between the <title> and </title> tags in the head section of your document. This will create the Title Bar when your document is viewed with a Web browser.
Now type <h2 align="center">HTML Tutorial Web Page</h2> between the <body> and </body> tags in the body section of your document. This will create a centered heading for your document.
  • Save the file (File menu - Save As )
  • Use the file name HTMLtutorial.html
  • Save to your student data USB flash drive
  • Important: Be sure you have first selected All Files (*.*) in the Save as type: textbox at the bottom of the Save As dialog box.
Using the Computer utility program (Windows Explorer), double-click the HTMLTutorial. html file you have just saved to launch your browser and view your document.
Verify that you see a page With 'HTML Tutorial - Web Browser' in the title bar of the Web Browser window and 'HTML Tutorial Web Page' in bold large letters at the top center of the document.

STEP 2 - Enter HTML Code Statements using Notepad:

Text paragraphs are entered between <p> and </p> tags. Type the following text after the subtitle (the </h2> tag) in the body section of your document (remember to change the name Joe Student to your own.)
<p> My name is Enter Your Name here . Welcome to my Web Page. This is an example of creating a simple Web document with a paragraph of text and a link to a working Web site. It will also include an image, which can be of anything I choose. I can copy this picture from any Web page on the Internet by right clicking it in my Web browser, choosing "Save Picture As..",and saving it in the same folder I used for this HTML document.</p>
In the next paragraph (don't forget the <p>...</p> tags) type in the anchor tag to provide a link to a page that interests you. If you cannot think of any interests use the BIS Department Web Site as follows:
I take <a href="http://cis.marin.edu">CIS classes</a> at the College of Marin.
  1. Locate a Picture from the web
  2. Download the Picture you have selected
  3. Make note of the file name of the picture (i.e. COMwall.jpg)
  4. Save the Picture to your USB drive
  • Point your browser to a Website for example the College of Marin Website http://cis.marin.edu
  • Locate a picture on the website (for example the picture of the brickwall with College of Marin lettering on it at the top left corner of the College of Marin front page)
  • Right-click the image and choose "Save Picture As..." to open the dialog box. Be sure to save it to the same folder that contains your HTMLTutorial.html file on your student data disk (USB flash drive.)
  • Note: the example image file is named COMwall.jpg
  • In a third paragraph (don't forget the paragraph tags), enter the following code to display your picture:

    <p><img src="COMwall.jpg" /></p>
  • In this example you are displaying the picture with the file name COMwall.jpg. If you choose to use a different picture be sure and use the appropriate name here.
  • Save your document in Notepad and then refresh the page in Internet Explorer to see the changes you have made.
Return to 110 Examples Page