HTML Manual
advertisement
Creating Web Pages with HTML Tamara Sanchez 0 Table of Contents Abstract Introduction Creating an HTML document Creating an HTML file Creating Heading tags Entering Paragraph text Entering Remaining Paragraphs To add paragraphs tags for blank lines Creating list Creating Character tags Inserting Images Inserting Horizontal lines Conclusion Glossary Sources Pages 2 3 4 5-6 7-8 9 10-12 13-14 15-17 18-20 21-24 25-26 27 28 29 1 Abstract This process manual seek to assit non information technology students at UMBC in designing a basic Web page. The manual first overview basic HTML code follette by a tutorial style format in which students will practice by creating a HTML document that I have previously format, which consist of: 1. learning HTML Syntax 2. Creating an HTML file 3. Creating Headings 4. Creating Paragraphs and lists 5. Paragraph tags 6. Creating charater tags 7. Creating lists 8. Inserting image After going through the tutorial style format and getting practice students will be able to manipulate the given codes to produce their own page. 2 Introduction Web pages are text files, written in a language called Hypertext Markup Language or HTML. A markup language is a language used to describe the content and format of documents. HTML was developed from the Standard Generalized Markup Language (SGML), a language used for large-scale documents. SGML proved to be too cumbersome and difficult for use on the Internet, and thus HTML was created based on the principles of SGML. The success of the World Wide Web is due in no small part to HTML. HTML allows Web authors to create documents that can be displayed across different operation systems, and the HTML code is easy enough to use that even nonprogrammers can learn to use it. Because HTML is so easy to use, I will write a process manual so that noninformation technology student can create a basic web page. The manual will be written in a tutorial style format, allowing student to practice and manipulate given codes. Later, student can use and manipulate the codes in the manual to create their own pages. The manual will include information on how to create an HTML file, creating tags, inserting graphic, inserting paragraph text, creating headings, creating lists, and creating paragraph tags. 3 Creating an HTML Document It’s always a good idea to plan the appearance of your Web page before you start writing code. (For this manual, I will design a web layout for you and then after learning the codes and syntax you can modify this page layout to create your own.) HTML Syntax An HTML file contains both formatting tags and content. Document content is what the users see on the page, such as heading and images. Tags are the HTML codes that control the appearance of the document content. HTML tags are applied to document content using the following syntax: <tag attributes>document content</tag> Where tag is the name of the HTML tag, attributes are properties of the tag, and document content is the actual content that appears in the Web page. This type of tag is know as a two-sided tag because it contains an opening tag that tells the browser to turn on a feature and apply it to the content that follows, and a closing tag that turns off the feature. Note that closing tags are identified by the slash(/) that precedes the tag name. Not every tag is two-sided. Some tags are one-sided tags or empty tags, because they require only a single tag without content. The syntax for a one-sided tag is simply: <tag attributes> A one-sided tag is used to insert non-character data into the Web page, such as a graphic image or a video clip. 4 Creating an HTML file 1. Create a new document with a text editor Trouble? If you don’t know how to locate your text editor, go to start at the left margin of your computer “click” on start, then find programs, “click on it” then find Accessories “click” on it again then find Note Pad. 2. Type the following lines of code into your document. Press the enter Key after each line. Press the Enter key twice for a blank line between lines of code. <html> <head> < title> Mr. Dube’s Chemistry Classes </title> </head> <body> </body> </html> 3. Using your text editor, save the file as Chem.htm in the student drive. It would be a good idea to create a folder in your student drive, name the folder project so that you can save all your HTML file in that one folder. Your initial tags in notepad should look like Figure 1 Figure 1 5 Trouble? Don’t worry if your screen doesn’t look exactly like Figure1 the Text editor shown in the figure is the Windows Notepad editor, Your text may look different, take the time to ensure that you entered the text correctly. Trouble? If you are using the Windows Notepad text editor to create your HTML file, make sure you don’t save the file with the extension.txt, which is the default for Notepad. Using an invalid file extension renders the file unreadable to Web browsers, which require.htm or .html as file extensions. So make sure you’ve save the file with an .htm or .html extension. Trouble? If you are using Microsoft Word for your text editor, be sure to save your files as Web page files and not as word document. To View This Web Page: 1. Start your browser. You do not need to be connected to the Internet to view local files stored on your computer Trouble? If you try to start your browser and are not connected to the Internet, you might get a warning message. Netscape Navigator, for example, gives a warning message telling you that it was unable to create a network socket connection, Click OK to ignore the message and continue. 2. After your browser loads its home page open the chem.htm file that you saved. Your page should look like figure2. Figure 2 Creating Heading Tags 6 HTML supports six levels of headings, numbered <h1> through <h6>, with <h1> being the largest and most prominent. Headings are always displayed in a bold font. The syntax for a heading tag is: <hy> heading text </hy> Where y is a heading numbered 1 through 6 and heading text is the text that is displayed in the heading. To add Headings to the Chemistry file: 1. Using your text editor, open chem.htm if it is not currently open. 2. Place the insertion point after the <body> tag; press the Enter key to move to the next line. And then type the following code. Be sure to press the Enter Key at the end of each line of code. <h1 align = “ center” > <Mr. Dube’s Chemistry Classes </h1> <h2 align = “center” > at Robert Service High School </h2> <h2> Chemistry Classes </h2> <h2> Classes Policies </h2> <h3> Grading </h3> <h3> Appointments</h3> <h3> Safety </h3> 3. Your page should look similar to figure 3. Figure 3 To display the revised version of the Chemistry Page: 1. Return to your Web browser. Note that the previous version of Chem.htm probably 7 appears in the browser windows. 2. To view the revised file, click View on the menu bar, and then click Refresh. If you are using Netscape, you will need to click View and then click Reload. Trouble? If you closed the browser of the file in the last set of steps, reopen your browser and the chem.htm file. The updated version looks like figure 4. Figure 4 To enter paragraph text 8 1. Using your text editor, open chem.htm if it is not currently open. 2. Place the insertion point at he end of the line that specifies the <h2> heading “at Robert Service High School” and press the Enter key to create a blank line. 3. Type the following text. As you type, let the text wrap to the next line; don’t press Enter. Welcome to Mr.Dube’s Web site. I hope you will use this site to learn more about your class, my expectations, and Chemistry in the world around you. Your text should be placed after the first <h2> head and before the <h2> Chemistry Classes head, as shown in figure 1.13. Check your work for mistakes, and edit your file if necessary. Your code should look like figure 5. Figure 5 Trouble? If you are using a text editor like Notepad, the text might not wrap to the next line automatically. Don not press the Enter key. Instead, you might need to select the Word Wrap command from the Format Menu, or a similar command, so you can see all the text on your screen. 3. Save your changes to Chem.htm 4. Using your Web Browser, refresh or reload chem.htm to view the text you’ve added. The paragraph text in the browser should look like figure 6. 9 Figure 6 To enter Remaining Paragraphs: 1. Using your text editor, open chem.htm if it is not currently open. 2. Place the insertion point at the end of the <h3> Grading heading and then press the Enter key to crate a blank line. 3. Type the following Text: Homework will be given daily, is due at the beginning of he period the school day after it was assigned, and will be worth 5 to 10 points. A periodic quiz consisting of 1 to 2 homework problems from the past week may be given in lieu of collection homework. 4. Press the Enter key two times and then Type. Test and quizzes will be used to check your understanding of concepts, procedure, and information. Quizzes will be worth 10 to 25 points and will be given at least once a month. Tests will be worth up to 100 points and will be given 2 to 3 times a quarter. 100 points and will be given 2 to 3 times a quarter. 5. Press the Enter key two times and then type: Labs will be worth 10 to 30 points and will grade on safety, participation, and write-up. I expect neat handwritten or typed reports. I’ll also assign small research projects throughout the semester. 6. Press the Enter key two times and then type: You must make up missed texts and quizzes the day you return, and you must submit missed homework assignments and labs within two days for every one day you missed. Failure to make up work these time frames will result in a 0 for that test or assignment. 10 7. Move the end of the <h3> Appointments heading, press the Enter key once, and then type. I can meet with you before of after school. I will also be in my room (H113) during most lunch hours. Please do not hesitate to stop in if you need extra help-----do not wait! Chemistry id a building subject, and it is a very hard to catch up once you fall behind. 8. Move to the end of ht e<h3> Safety heading, press the Enter key once, and then type: We will be doing lab work nearly every week. Because of the potential danger of any lab exercise, I will hold you to the highest Standards of behavior, and will remove you from the class if your pose a threat to yourself or other students. After entering paragraph text your code should look like this figure 7. Figure 7 9. Save your changes to chem.htm 10. Using your web browser, refresh chem.htm and view the changes. 11 12 To add Paragraph tags for Blank lines 1. Using your text editor, open chem.htm 2. Modify the grading text, bracketing each paragraph between a <p> and </p> tags, so that the text reads as follows. <p> Homework will be given daily, is due at the beginning of the period the school day after it was assigned, and will be worth 5 to 10 points. A periodic quiz consisting of 1 to 2 homework problems from the past week may be given in lieu of collecting homework. </p>. Repeat this procedure at the paragraph where you started the information for text and quizzes, labs and finally the paragraph where you wrote the missed tests information. After entering the paragraph tags your code should look like figure 8. Figure 8 3. Save you changes to chem.htm 4. Using your web browser refresh or reload chem.htm. The text in the Grading section is now properly separated into distinct paragraphs. 13 14 Creating Lists An ordered list is used to display information in a numeric order. The syntax for creating an ordered list is: <ol type = “option”> <li> Item1 <li> Item2 ……….. </ol> Where option specifies the type of character to number the list and Item1 and Item2, etc, are items in the list. The type attribute must have one of the following values: “I” “a” “A” “i” or “I”. A value of “I” displays a list with numbers. The values “a” and “A” create a list with either lowercase or uppercase letters. The values “i” and “I” create a list with Roman numerals. If you omit the type attribute, browsers assume that you want to create an ordered list using numbers. You can also create an unordered list, in which list items are not listed in a particular order. The syntax for an unordered list is: <ul type = “options”> <li> Item 1 <li> Item 2 . ………. </ul> Where the type attribute can have one of the following values: “disc”, “circle”, or “square. A value of “disc” inserts a bullet before each list item, “circle” instructs the browser to use an open circle, and “square” creates a filled-in square. To add an unordered list to the Chemistry file: 1. Using your text editor, open chem.htm if it is not currently open. 2. Place the insertion point at the end of the line specifying the “Chemistry Classes” heading and press the Enter key to create a blank line. 3. Type the following code: <ul> <li> Conceptual Chemistry: An introductory course requiring basic math but no algebra skills <li> Advanced Placement Chemistry: An advanced course requiring a grade of A or B 15 in Chemistry 1 and designed for students who want to prepare for the AP Chemistry exam (which can count toward college credits) </ul> After entering the above code your work should look like figure 9 Figure 9 4. Save the file when you are sure that it matches the code that I have instructed you to type. 5. using your Web browser refresh or reload chem.htm. The latest version of the file is displayed. The unordered list in your browser should now look like figure 10 16 Figure 10 17 Creating Character Tags A tag that you apply to an individual character is called a character tag. There are two types of character tags: logical and Physical. Logical character tags specify how you want to use text, not necessarily how you want it displayed. For example, <em> tag, indicates that a character should be emphasized in some way. Usually displayed with italics, <strong> tag, Emphasizes characters more than <em>, usually displayed in a bold font. To add character tags to the chemistry file: 1. Using your text editor, open chem.htm. If it is not currently open 2. Type the <id> and <b> tags around the keywords in the Grading section of the handout as follow. <i> <b> Homework</b> </i> will be given daily… <i> <b> Tests and quizzes </b></i> will be used <i> <b> small research projects </b></i> through out the semester.. After entering the above code your document should look like figure 11. 18 Figure 11 3. Save the changes to Chem.htm 4. Using your Web browser, refresh or reload chem.htm. The updated Grading section of your page should look like figure 12. 19 Figure 12 20 Inserting Graphics One feature of Web pages that has made the Web so popular is in the ease with which images can be displayed. Images can be displayed in two ways: inline image or as external images. An inline image is displayed directly on the Web page and is displayed when the pages is accessed by a user. An inline image can be placed on a separated line in your HTML code, or it can be placed directly within a line of text- hence the term inline. An external image is not displayed with the Web page. Instead, the browser must have a file viewer, which is separate program that the browser launches when it encounters and external image file. To Add Image the Chemistry file: 1. Using your text editor, open chem.htm 2. Near the top of the file, select the two lines of code just below the <body> tag (from the <h1> opening tag to the </h2> closing tag) 3. Press the Enter key to insert a blank line if necessary, and then type: <p align = “ center”><img src “ dube. jpg” </p> NOTE: Please use any jpg file(picture) just for practice or you can also copy this image and save it to your project folder so you can use it on the page. 4. Save your changes to chem.htm . 5. Using your browse, refresh or reload chem.htm and compare your Web page to figure 13 21 Figure 13 Adding Special Characters Occasionally you will want to include special characters in your Web page that do not appear on your Keyboard. For example, a page might require mathematical symbols or you might need to place the copy symbol to show that an image or text is copyrighted. To add Character code to the Chemistry Page: 1. Using your text editor, open Chem.htm if it is not currently open. 2. in the “Welcome to Mr.Dube’s Web site “paragraph, select the e in “ Dube” and then type &# 233 so that the code reads as follows: Welcome to Mr. Dube’s #233’s Web site. After entering the new character your code should look like figure 14. 22 Figure 14 3. Save your changes to chem.htm. 4. Using your Web browser, refresh or reload chem.htm. Your page should now look like figure 15. 23 Figure 15 24 Inserting Horizontal lines The syntax for creating a horizontal line is: <hr align = “align” size = “size” width= “width” color = “color” noshade> Where align specifies the horizontal alignment of the line on the page (center, left or right), size specifies the height of the line, width indicates the width of the line, color indicates the color of the line, and noshade specifies that the browser display a solid line. Note that the color attribute is supported by Internet explorer but not Netscape. To add a Horizontal line to Chemistry file: 1. Using your text editor, open chem.htm. If it is not currently open. 2. At the end of the line specifying the dube.jpg image (just above the “Welcome” paragraph), press the Enter Key to insert a new blank line. 3. In the new line, type <hr> Your code should look like figure 16. Figure 16 4. Save your changes to chem.htm 5. Using your Web browser, refresh or reload the chem.htm file. The new horizontal line is displayed in figure 17. 25 Figure 17 26 Conclusion This manual was formulated to assists non- information technology students at UMBC to create a basic Web page. The manual include information such as , Creating and HTML file, Creating Character Tags, Inserting Images, Inserting paragraphs, Creating tags, Creating tags, Learning syntax and much more. The manual was constructed in a tutorial style format. That is, a layout was given, and terms and syntax was explain. This was done with the hopes that students can follow the tutorial style format. Then later manipulate the given codes and direction to make their own pages. 27 Glossary To find a complete list of HTML syntax go to: http://www.htmlcompendium.org/Menus/0framefn.htm 28 Sources 1. HTML 4 for Dummies, Fourth Edition by Ed Tittel, Natanya Pitts, Ed Tittel "Welcome to the wonderful world of the Web and HTML... 2. How to Do Everything with HTML by James H. Pence…….. 3. Sam’s Teach Yourself HTML & XHTML in 24 Hours, Sixth Edition by Dick Oliver, Michael Morrison……….. 4. HTML Goodies (2nd Edition) by Joe Burns… 5. Creating Cool HTML 4 Web Pages by Dave Taylor…………. 29 Link to Home Page http://userpages.umbc.edu/%7Esanchez2/403/project/fatema12.htm 30
