HTML TUTORIAL for IS:103

This page is a quick reference guide to help IS:103 students with their Personal Web Page Assignment. You will find examples of basic HTML codes which you will be using in your web page, along with some info on advanced features such as manipulating text tags and embedding music files into your page.

Before you begin:
HTML, or Hypertext Markup Language, is used in order to create the web pages you see on the internet. Every single site online has been created using a series of codes which tells your web browser how to view and intepret the site. That said, it is EXTREMELY IMPORTANT that when you create your own page you use the proper coding. You MUST type in the HTML code EXACTLY as you see it in the examples, only modifying the code where you are prompted to do so. One misspelled word, missing quotation mark or missing "/" in a single code on your page will cause EVERYTHING on your page to either appear distorted or in a worst case, not be viewable at all. ALWAYS check your work for errors!

Your Web Page Assigment requires the following features:

  1. An introductory paragraph
  2. A photo of yourself
  3. One web graphic
  4. An ordered list
  5. An unordered list
  6. A horizontal rule
  7. 3 links to other web pages
  8. A link to your email address

Required HTML Code Table

The following table shows examples of the basic HTML tags you are required to use in your web page assignment.
Ordered List
 <OL>
<LI>Item 1
<LI>Item 2
<LI>Item 3
</OL>
 Example Ordered List
  1. Example 1
  2. Example 2
  3. Example 3
Unordered List
 <UL>
<LI>Item 1
<LI>Item 2
<LI>Item 3
</UL>
 Example Unordered List
  • Example 1
  • Example 2
  • Example 3
Inserting an Image <IMG SRC="image name.gif">
note: You must save your image onto your flash drive or floppy! 		Example Image
Horizontal Rule
 <HR /> Example Horizontal Rule
Links <A HREF="http://WEBSITE URL HERE.com">SITE NAME HERE</A> Example Link
BBC WORLD NEWS
E-mail Link <A HREF="MAILTO:YOUR EMAIL HERE@DOMAIN NAME.COM">YOUR NAME OR TEXT HERE</A> Example E-mail Link
E-mail me

Optional HTML Code Table

Now that you have learned the basic required tags, here are some optional elements you may wish to add to your web page.
Bold Text <B> TEXT HERE </B> Example Bold Text
Underlined Text <U> TEXT HERE </U> Example Underlined Text
Strikethrough Text <S> TEXT HERE </S> Example Strikethrough Text
Italicized Text <B> TEXT HERE </B>
Example Italicized Text
Text Font and Size <FONT SIZE="4" FACE="FONT NAME HERE">TEXT HERE</FONT>
note: Fonts such as "Times New Roman", "Verdana", "Arial" and "Helvetica" are commonly used on websites.
Try inserting any of those font names into the FACE="FONT NAME HERE" tag. 		Example "Arial" Size "4" Text
Inserting Embedded Music <EMBED SRC="YOUR MUSIC FILE NAME HERE" AUTOSTART="FALSE" LOOP="TRUE">
note: You must save your music file to your flash drive or floppy!
Also, to make your music file auto-play, change the tag AUTOSTART to AUTOSTART="TRUE" 		Example Embedded Music File

There are many other codes that can create a variety of effects on your page. To learn more, simply search for "HTML tutorial" on any search engine such as Google or Yahoo.

Links

Links will open in a new window

site created by A. Boyd