You will need access to the following template files to complete the tutorial.
http://www.w3schools.com/html/html_intro.asp
(Note: If you have not already done so, please downloaded the html template files.)
(Note: If you have not already done so, please downloaded the html template files.)
*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 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
ExampleOpen 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.
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. |
http://www.w3schools.com/html/html_lists.asp
(Note: If you have not already done so, please downloaded the html template files.)
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.]
ExampleNow, 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. |
http://www.w3schools.com/html/html_formatting.asp
(Note: If you have not already done so, please downloaded the html template files.)
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.
ExampleTry 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? |