Personal tools
  •  

The Basics of HTML

Document Actions
  • Content View
  • Bookmarks
  • CourseFeed

Objectives:

In this tutorial you will learn how to create a basic Web document, using HTML. To do this you will learn about the structure of Web documents and how to use head, title, body and other basic web page tags.

You will need access to the following template files to complete the tutorial.

Optional Readings:

http://www.w3schools.com/html/html_intro.asp

Template File(s):

  • heading.html

(Note: If you have not already done so, please downloaded the html template files .)

Process for completing HTML tutorials

  • Use the template files specified for the tutorial (I suggest you copy it to your hard drive)
  • Follow instructions in the tutorial.
  • Open the required template file in a text editor. SimpleText for Macs or Notepad for Windows are the recommended text editors.
  • Save the changes that you make, and then view your changes by opening your file in a Web browser such as Netscape Navigator or Internet Explorer. You may need to use the "refresh" button in the browser to see your new changes.



> <br >

Tutorial 1 of 3

Objectives:

  • Create a basic Web document, using HTML
  • Tags discussed: <HTML> <HEAD> <TITLE> <BODY> <HR> <P> <H1>

Optional Readings:

http://www.w3schools.com/html/html_intro.asp

Template File(s):

  • heading.html

(Note: If you have not already done so, please downloaded the html template files .)

Creating a web document

  • Open a file in your favorite text editor (e.g. Notepad or Simpletext)
  • Create a file with .html (or .htm) file name extension. This step is very important
  • Type in your content, using appropriate HTML tags
  • Embed hypertext links, via document's unique pointer (called Uniform Resource Locator)
  • Embed multimedia elements, e.g. graphics
  • Test with browser (e.g. Netscape or Explorer)
  • Upload your document to your World-Wide Web server. It is then available to the world.

*One method of uploading is to use FTP. If you are unfamilar with FTP, please refer the 'Technical Details' page, and check under the link 'FTP settings' .

HTML tags:

HTML tags are labels enclosed in angle brackets. They usually come in pairs (an opening and closing tag) and act as containers. The closing tag is just like the opening tag except that the label is preceded with the "/" character. The HTML labels are not case- sensitive

Example

Open heading.html in your browser. You can open the file in your browser by either clicking on the file link or open it from your templates folder with the "Open File" command under the "File" menu option. Once you have opened it, look at the file. This file shows all the different HTML text heading options.

Now open the same file in your text editor, and note the various HTML tags.

<HTML></HTML> pair serves to enclose the document's content

<HEAD></HEAD> encloses the head of the document

<TITLE></TITLE> denotes the title of the document, which appears in the menu bar in your browser. The title tag always appears in the head of the document.

<BODY></BODY> denotes the body of the document. Content contained within these tags appear in the main window of your browser.

Now we will modify this template to begin to create a home page for a course. Please think of a course for which you would like to practice creating a home page.

  1. Modify contents of <TITLE> tag. Thus, select the text surrounded by <TITLE> </TITLE> and replace it with something appropriate for your class.
  2. Note <P></P> tag. This is the paragraph tag. Modify contents to say "Welcome to blah blah class"
  3. Note <HR> tag. This draws the horizontal rule across the screen. Note that this tag (and others) does not come as a pair, unlike most HTML tags.
  4. Modify contents of <H..> tags, as follows
  • <H1> course name </H1>
  • <H2> course meeting location </H2>
  • <H3> course meeting time </H3>
  • <H4> Instructor name </H4>
  • <H5> Instructor email address </H5>
  • <H6> Instructor telephone number </H6>

Now, you are ready to view the fruits of your labor. Save the file under a new name (use the "Save as" command), for example, course.html

Then, use your browser to open this file. You should now be able to see the document containing the beginning of your course home page.




> <br >

Tutorial 2 of 3

Objectives:

  • Learn more HTML tags
  • Tags discussed: <LI> <UL> <OL>

Optional Readings:

http://www.w3schools.com/html/html_lists.asp

Template File(s):

  • list.html

(Note: If you have not already done so, please downloaded the html template files .)

Lists in HTML

HTML supports several kinds of lists, including bulleted and ordered lists.

Ordered Lists are denoted by enclosing the list within <OL> and </OL> . Each List Item is then denoted by enclosing it within <LI></LI> .

Similarly. Unordered Lists are denoted by enclosing the list within <UL> and </UL> . Each List Item is then denoted by enclosing it within <LI></LI > .

For an example, please open the template file list.html in your browser. Then view the HTML code. You can either open the file within your text editor, as above or use the "View ? Page Source" command in your browser [This command, incidentally, is a useful way to learn more HTML tricks by examining the source of cool documents found on the Web.]

Example

Now, insert two lists into your course home page. Open the file containing your course home page, course.htm, in the text editor.

Insert an unordered list, describing course objectives. For example:

<UL>

<LI> Course objective 1 </LI>

<LI> Course objective 2 </LI>

</UL>

Insert an ordered list, describing course assignments. For example:

<OL>

<LI> Course assignment 1 </LI>

<LI> Course assignment 2 </LI>

</OL>

Save the file, then view it in your browser. How does it look? If you have problems, go back and fix the source using the text editor. Then review the document in your Web browser by clicking on the "Reload" or "Refresh" icon.




> <br >

Tutorial 3 of 3

Objectives:

  • Learn more HTML tags
  • Tags discussed: <B> <I>

Optional Readings:

http://www.w3schools.com/html/html_formatting.asp

Template File(s):

  • physical.html

(Note: If you have not already done so, please downloaded the html template files .)

Changing the appearance of documents

Several tags exist to modify the physical appearance of documents, for example bold and italic. Enclose text within the <B></B> tags to create bold. Enclose text within the <I></I> tags to create italic. See physical.html file for more examples of these tags.

Example

Try these tags out. Using your text editor, modify your evolving course home page by enclosing some text within the bold and italic tags. Save the file, then view it within your browser. How does it look?

[End of tutorial]

Copyright 2008, by the Contributing Authors. Cite/attribute Resource . admin. (2008, May 20). The Basics of HTML. Retrieved January 07, 2011, from Free Online Course Materials — USU OpenCourseWare Web site: http://ocw.usu.edu/instructional-technology-learning-sciences/producing-distance-education-resources/resource8.html. This work is licensed under a Creative Commons License Creative Commons License
Online Degree Program
Utah State University offers an online masters degree program (MS & MEd) in Instructional Technology and Learning Sciences. Click below to find out more.