La Roche University ISTC2008 Introduction to Cyberspace
Module 5B – Designing and Creating Web Pages with HTML
LEARNING OBJECTIVES (CO F): After completing this section, students should be able to:
1. Recognize the 3 main ways of creating web pages. 2. Define the conditions under which you would use each approach. 3. Create several HTML files using an ASCII or text editor.
OUTLINE: A. Overview of web page creation B. HTML tagging Practice and Assignment C. Discussion question – HTML references
1. Overview of Web Page Creation Introduction: There are many ways to create web pages – HTML editors, HTML converter programs, and HTML editors. This section introduces– HTML tagging using text editors.
Purpose: The purpose of this activity is to experience creating HTML files by typing in the tags necessary for the page to display in a browser. (MO 2, 3)
Directions: 1. Review the lesson in Module 5B CANVAS– Web Design HTML. 2. Read Module 8 in the textbook and go over the PowerPoint. 3. Go through the practice that runs through Module 8 creating a one-page HTML file. You will
need the graphic file logo.jpg and elder_sd.html saved to the same place as the HTML file you are creating. This file should be on the disk that came with the book, obtained from the book’s web site, or retrieved from Module 6 folder in CANVAS. NOTE: Working with an ASCII or text editor requires typing tags with NO errors in syntax or typo errors for it to work.
4. Submit through the Mod5-B1 assignment feature in CANVAS.
2. HTML Tagging Introduction: There is a lot you can do with HTML tagging and much to learn. This part will provide you with additional practice in tagging.
Purpose: The purpose of this activity is to create more web pages using an ASCII or text editor to tag your files for display in a web browser. Directions:
1. Create a folder on your storage device titled – WEBHTML. New folder appears for storing the web pages and graphics.
2. In the WEBHTML folder create a folder called Images. Subfolder created.
3. Download the 4_colorful_bears animated gif to WEBHTML/images folder. File in CANVAS
4. Now, you will create your HTML file. Go to Start, All Apps, Windows Accessories, click Notepad. Notepad opens. If you are using a MAC use the ASCII (text) editor that comes with the MAC.
5. Type <!DOCTYPE html>, press Enter, type <HTML>, press Enter, type <HEAD>, and press Enter. The text is entered into the file and tells the browser this is a HTML file and create header information.
6. Type <TITLE>YOUR NAME’s Homepage</TITLE> and press Enter. This will display the title in the browser title bar.
7. Type </HEAD> and press Enter. Turns off the header information. 8. Type <BODY> and press Enter. Turns on the body tag; this is the information that will
display in the browser. 9. Type <H1>Level One Heading</H1> and press Enter. 10. Type This will be the first paragraph in my document. <P> and press Enter. 11. Type Hey this is too much typing in one day! <P> and press Enter. 12. Type Maybe I’ll give you a picture to look at….<P> and press Enter. 13. Type <IMG SRC=”images/4_colorful_bears.gif”><P>and press Enter. 14. Type I’ll also give you a site to visit that is one of my favorites!<P>. and press Enter. 15. Type <A HREF=”http://www.google.com”>Click here for Google!</A> and press Enter. 16. Type </BODY> and press Enter. 17. Type </HTML>.
18. Save the file in the WEBHTML folder as myhtml.html. Make sure to type the extension
and that the file is saved as All file (*.*)and not a text file *.txt). Here’s how to avoid
that: – Click on “File” and then “Save As”, Navigate to the folder you want to save to,
Change the “Save As Type” drop-down menu to “All Files (*.*)”, and Name your file, be
sure to include the .htm extension e.g. homepage.htm
19. Display the file. Open Browser. The browser opens. Choose File, Open. An open dialog window appears. Click the Browse button, clicking the appropriate storage drive letter and folders. The myhtml.html file should be visible. Select myhtml.html and click OK or open. The file should display in the browser. It should look like the example provided at the end of this document but stops with the Google reference. The rest of the document is completed under the revisions section.
20. Revise the file. Open the file in Notepad. 21. Place the pointer after the first <BODY> tag and press Enter. 22. Type <BODY BGCOLOR=”#FAEBD7″>. 23. Go to the tag </BODY> towards the bottom of the file. 24. Type to the left of the tag You can contact me at <A
HREF=”mailto:[email protected]”>[email protected]</A> before the </BODY> tag (substitute your email for mine). Press Enter.
25. Type <P> tag after the Google!</A> reference and press Enter. 26. Type Here is a bulleted list<P> and press Enter.
27. Type <UL TYPE=square> and press Enter. 28. Type <li>this is item 1 and press Enter. 29. Type <li>this is item 2 and press Enter. 30. Type <li>this is item 3 and press Enter 31. Type </UL>. 32. Save the file as myhtml.html. 33. View it in the browser. What happened to the file? 34. That’s all there is to it. Most people, who don’t tag all the time, refer to references
when looking for the appropriate tags or use the source code from other sites when they find something they like. In order to do that, you have to have some basic understanding of the codes. I generally use quick guides.
35. Linking tag. Copy and paste the code below into a new file in Notepad. <HTML> <HEAD> <TITLE>My Second Page </TITLE> </HEAD> <BODY> <BODY BGCOLOR=”silver” TEXT=”Blue”> Hi, My name is Irene Joos <BR> <H2>Heading 2</H2> </BODY> </HTML> Change Irene Joos to yourname. Save the file as second.html.
36. Open the myhtml.html file. 37. Go to the line after the </UL> tag.
38. Type <A HREF=”second.html”>Click to go to my second page</A>.<P> A hyperlink is made to the second page.
39. Save the file and test the hyperlink. Now add a hyperlink to your first file on the second.html file so you can move back and forth.
TIP: If the link isn’t working, make sure the location of the file is correct. They both should be at the same level in the folder i.e., in the WEBHTML folder. Also make sure the file name and extension are correct.
40. Next create two new files of your choice in the WEBHTML folder.
Create 2 HTML files.
Develop 2 html files (in the WEBHTML folder) meeting the following specifications.
• One external link in each HTML file.
• One graphic in each HTML file (make sure you place both graphics in the images folder in the WEBHTML folder).
• A bulleted list for one HTML file.
• One new code not taught in the practice exercise (this means a NEW code not just one used by changing the color codes). Identify what the new code is.
• Each file (4 html files created and found in the WEBHTML folder) linked to the other files. This means I can move between all 4 files with ease – myhtml, second, and the 2 you created.
• Hyperlink to your email. Zip the WEBHTML folder. This WEBHTML folder will contain the images folder and the 4 html files created. Submit it through the assignment feature located in CANVAS.
3. HTML Resources
No one expects that you will remember all the various tags from creating HTML files. Finding quality resources for coding is an important part of working with html files. A resource, however, is only good if it is understandable and easy to follow. Directions: 1. Search for a reference on HTML tagging. DO NOT USE ONE OF THE THREE FROM
BELOW! Include the URL in the discussion forum. Answer the questions – Why do you
feel this is a good site for beginners? Who is responsible for this site? Where good examples of coding provided or just the codes with a definition and syntax?
Select two of the following sites to provide reference sources about HTML tagging. In your opinion which two sites were the best? Why?
http://www.htmldog.com/guides/html/beginner/ http://www.html-5-tutorial.com/
http://www.w3schools.com/default.asp http://www.htmlgoodies.com/primers/html/
2. Now, post your responses to the discussion forum – Mod5B-3. Do NOT use resources already posted by another student. Respond to 2 other students’ posts with more than I agree.
Scoring: NAME:
Criteria Possible Points Your Points
1. Textbook HTML file – Created the Lakeside Police Dept web page as directed in Module 8 Created head/body sections (1)
Formatted and changed fonts (1) Created a list (1) Inserted images (1) Create a link to another HTML file (1)
5
2. Practice HTML – Created the html and images folders as directed
1
Created the two html files following the practice guidelines – 1 point each
2
Inserted the images (1); added the codes (1); bullets (1), and links (1)as directed
4
Created 2 new html files – content your choice
5
Followed directions for linking (1), inserting graphics(1), bullets (1), fonts (1) email (1)
5
Added a new code (2) and identified it (3) 5
Answered above questions in #1 (2); submitted all files as directed (1)
3
3. Discussion Forum – selected a resource not already selected by another student
2
Quality explanation about what was good about this site
3
Answered question about developer of the site 1
Explained which of provided sites were preferred and why
2
Responded with quality to 2 other students’ posts.
2
Total 40
