Test #1: Tutorial 1: Developing a Basic Web Page
advertisement
Page1 of 16: Complete Test #1 Tutorial #1: Mrs. Lily C. Bordallo Test #1: Tutorial 1: Developing a Basic Web Page:HTML AND XHTML Test #1: Tutorial 1: Developing a Basic Web Page 1. Read HTML and XHTML Tutorial 1: HTML 1.03 Developing a Basic Web Page: Creating a Web Page for Stephen Dube’s Chemistry Classes Make sure you download your data files for your Test #1 such as the following: go to www.course.com this was done earlier: Page2 of 16: Complete Test #1 Tutorial #1: Mrs. Lily C. Bordallo Test #1: Tutorial 1: Developing a Basic Web Page:HTML AND XHTML 2. Read Tutorial 1: HTML3, HTML 4, HTML5, HTML 6, HTML7, HTML8, HTML9, HTML 10 FIGURE 1-5 – The Chemistry Class handout, HTML 11, HTML 12, HTML 13, AND HTML 14: THE STRUCTURE OF AN HTML FILE Page3 of 16: Complete Test #1 Tutorial #1: Mrs. Lily C. Bordallo Test #1: Tutorial 1: Developing a Basic Web Page:HTML AND XHTML 1. Ensure that you can access your data files from your zip drive, usb flash drive or A: drive. 2. Carat a new document with a text editor such as: word or note pad or FrontPage 3. HTML 15: Type the following using FrontPage or Word or Note Pad. If you use note pad or word processing please copy and page your HTML Code to Front Page such as: FrontPage: Word processing: Page4 of 16: Complete Test #1 Tutorial #1: Mrs. Lily C. Bordallo Test #1: Tutorial 1: Developing a Basic Web Page:HTML AND XHTML Note Pad: Page5 of 16: Complete Test #1 Tutorial #1: Mrs. Lily C. Bordallo Test #1: Tutorial 1: Developing a Basic Web Page:HTML AND XHTML 4. Using your text editor such as frontpage, note pad or word, save your file as chem.html in the tutorial.01/tutorial folder where your Data Files are stored, but do not close your text editor. The text you typed should look similar to the text displayed in Figure 1-6. Initial HTML Code in chem.htm Page6 of 16: Complete Test #1 Tutorial #1: Mrs. Lily C. Bordallo Test #1: Tutorial 1: Developing a Basic Web Page:HTML AND XHTML 4. HTML 16 – To view Stephen’s Web Page: 5. Start your browser. You do not need to be connected to the Internet to view local files stored on your computer or disk. 6. After your browser loads it’s home page, open the chem.html file that you saved in the tutorial.01/tutorial folder. Such as: Page7 of 16: Complete Test #1 Tutorial #1: Mrs. Lily C. Bordallo Test #1: Tutorial 1: Developing a Basic Web Page:HTML AND XHTML 5. READ HTML 17: Working with Block-Level Elements and Creating Headings such as: <hy>content</hy> noted the <hy> is an open and </hy> is a close tag with the / and open tag is without a / <hy> Page8 of 16: Complete Test #1 Tutorial #1: Mrs. Lily C. Bordallo Test #1: Tutorial 1: Developing a Basic Web Page:HTML AND XHTML 6. READ HTML 14 and Type using front page: The Structure of an HTML File: Now that we’ve studied the general syntax of HTML tags, we’ll create our first HTML Document. The most fundamental element is the HTML DOCUMENT itself. WE MARK THIS ELEMENT USING THE TWOSIDED <html> tag as follows: <html> </html> The opening <html> tag marks the start of an HTML document , and the closing </html> tag tells a browser when it has reached the end of that HTML document. Anything between these two tags makes up the content of the document, including all other elements, text, and comments. An HTML document is divided into two sections: the head and the body. The head element contains information about the document – for example, the document’s title, or keywords that a search engine on the Web might use to identify this document for other users. The content o fthe head element is not displayed within the Web page, but Web Browsers may use it in other ways; for example, Web browsers usually display a documents title in the title bar. The body element contains all of the content to be displayed in the Web page. It can also contain code that tells the browser how to render that content. To mark the head and body elements, you use the <head> and <body> tags as follows: <html> <head> </head> <body> </body> </html> Note that the body element is placed after the head element. Page9 of 16: Complete Test #1 Tutorial #1: Mrs. Lily C. Bordallo Test #1: Tutorial 1: Developing a Basic Web Page:HTML AND XHTML The first thing we’ll add to the document’s head is the page title, also know as the Title Element. A given document can include only one title element. You create a title by inserting the two-sided <title> tag within the documents head. Since Stephen wants to give his page the title, “Mr. Dube’s Chemistry Classes”, our HTLM code now looks like this: <html> <head> <title>Mr. Dube’s Chemistry Classes</title> </head> <body> </body> </html> The technique of placing one element within another is called nesting. When one element contains another, you must close the inside element before the outside element, as shown in the code above. It would not be correct to close the outside element before closing the inside one, as in the following code sample: NOT CORRECT <head><title>Mr. Dube’s Chemistry Classes</head></title> Now that you’ve seen how to insert HTML tags, let’s start crating the chemistry Web Page. In addition to the above code, we’ll also add a comment at specifies the page’s purpose and author, as well as the current date. SAVE YOUR WEBPAGE AS D:\TUTORIAL.01\TUTORIAL\CHEM.HTML 7. READ HTML 17: FIGURE 1 – 8: html headings 8. HTML 18 – HTML Headings This is an h1 heading This is an h2 heading This is an h3 heading This is an h5 heading This is an h6 heading 9. Inserting a Heading To define a heading use they syntax <hy>content</hy> where y is a heading number 1 through 6, and content is the content of the heading. Page10 of 16: Complete Test #1 Tutorial #1: Mrs. Lily C. Bordallo Test #1: Tutorial 1: Developing a Basic Web Page:HTML AND XHTML 10. HTML 19: To Add heading to the Chemistry file: 11. To Add Heading 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 the next line, and then type the following lines of code: <h1 style=”text-align: center”>Mr. Dube’s Chemistry Classes</h1> <h2 style=”text-align: center”>at Robert Service High School</h2> <h2>Chemistry Classes</h2> <h2>Class Policies</h2> <h3>Grading</h3> <h3>Appointments</h3> <h3>Safety</h3> Note: See Figure 1-9: Displays the revised code. To make it easier for you to follow the changes to the HTML file, new and modified text in the figures is highlighted in red. This will not be the case in your own text files. HTML 20: FIGURE 1-9 Entering Heading Elements: Page11 of 16: Complete Test #1 Tutorial #1: Mrs. Lily C. Bordallo Test #1: Tutorial 1: Developing a Basic Web Page:HTML AND XHTML 3. Save your changes to D:\tutorial.01\tutorial\chem..html. You can leave your text editor open. Now view the revised page in your Web Browser IE. To display the revised version of the chemistry page: 1. Return to your Web browser. Note that the previous version of chem.htm probably appears in the browser window. 2. To view the revised page, click View on the menu bar, and then click Refresh. If you are using a Netscape browser, you will need to click view and then click Reload. Trouble? If you closed the browser or the file in the last set of steps, reopen your browser and the chem.htm file. Page12 of 16: Complete Test #1 Tutorial #1: Mrs. Lily C. Bordallo Test #1: Tutorial 1: Developing a Basic Web Page:HTML AND XHTML The updated Web Page looks like figure – 1-10 Figure 1-10: Heading as they appear in the browser: In order for your HTML command to show exactly like it’s preview below do the following: 1. Type your HTML command in Note Pad. Then, Edit, Select All, copy and paste to Frontpage (HTML) TAB. 2. Go to Front Page (HTML) – TAB and Paste your HTML Code from Note Pad is listed below. 3. Go to Front Page (PREVIEW) – TAB (your screen shot should look like the following listed below: FIGURE 1-10: HEADING as they appear in the browser: Page13 of 16: Complete Test #1 Tutorial #1: Mrs. Lily C. Bordallo Test #1: Tutorial 1: Developing a Basic Web Page:HTML AND XHTML 12. HTML 21: Creating Paragraphs: The Next step is to enter text information for each section. As you saw earlier, you can insert a paragraph electne using the <p> tag as follows: <p>content</p> Where content is the content of the paragraph. When a browser encounters the opening <p> tag , it starts a new line with a blank space above it, separating the new paragraph from the preceding element. In earlier versions of HTML when standards were not firmly fixed, Web authors would often include only the opening <p> tag, omitting the closing tag entirely. While many browsers still allow this, your Web pages display more reliably if you consistently use the closing tag. Additionally, if you wish to write XHTML – compliant Code then you must include the closing tag. Creating a Paragraphs: To create a paragraph, use the syntax: <p>content</p> Where content is the content of the paragraph. To enter paragraph text: 1. Return to chem..htm in your text editor such as Notepad, word or Front Page. 2. Place the insertion point at the end of the line that creates the h2 heading, “at Robert Service High School”, and press the Enter key to crated a blank line. 3. Type the following text in notepad and copy to Front Page: <p>Welcome to the Robert service High School Chemistry Web page. Here you’ll learn more about our chemistry classes and our policies.</p> 4. Press the Enter Key to insert a blank line below the paragraph. Note: that a blank line is not required for the text to display correctly in your browser. However, adding this space makes it easier for you to read the code by separating the first paragraph from the heading that follows. See Figure 1-11. Inserting the first pargraph – Figure 1-11 Page14 of 16: Complete Test #1 Tutorial #1: Mrs. Lily C. Bordallo Test #1: Tutorial 1: Developing a Basic Web Page:HTML AND XHTML 5. Save your changes to chem..htm. 6. Using your Web browser, refresh or reload chem..htm to view the new paragraph. See figure 1-12. 13. HTML AND XHTML 22 and HTML 23:paragraph in the browser Hypertext Markup Language and Extensible Hypertext Markup Language Figure 1-12: First paragraph in the browser: To Enter the remaining paragraphs: 1. Return to the chem..htm file in your text editor such as notepad, word or Frontpage. 2. Below the h3 heading “Grading,” insert the following three paragraphs: <p>Homework: is worth 5 to 10 points and will be given daily. A quiz consisting of 1 or 2 homework problems from the previous week may be given in place of homework.</p> <p>Tests and Quizzes: Quizzes are worth 10 to 25 points and will be given at least once a month. Tests are worth up to 100 points and will be given three times each quarter.</p> <p>Labs: Labs are worth 10 to 30 points and will be graded on safety, participation, and write-up. Reports should be neatly written or typed. Research projects will also be assigned throughout the year.</p> Page15 of 16: Complete Test #1 Tutorial #1: Mrs. Lily C. Bordallo Test #1: Tutorial 1: Developing a Basic Web Page:HTML AND XHTML 3. Below the h3 heading “Appointments,” insert the following paragraph: <h3>Appointments</h3> <p>You can meet with Mrs. Bordallo before 6:00 p.m. or after class or during most hours in room D8. Do not hesitate to ask for help! It can be very hard to catch up with your test #1 and Test #2 if your fall behind. Please make an effort to complete Test #1 and Test #2. Thank you, Mrs. Lily C. Bordallo, BAED/VTSE/Computer Technology, AS Computer Science and Certificate, Pursuing a Master Degree in Supervision and Manage/Online Teaching and Learning in Education Thank you.</p> 4. Below the h3 heading “safety,” insert the following paragraph: <h3>Safety</h3> <p>Labs are completed weekly. Because of the potential danger on any lab exercise, you will follow the highest standards of conduct. Misbehavior can result in dismissal from the lab.</p> 5. Save your changes to the file: Page16 of 16: Complete Test #1 Tutorial #1: Mrs. Lily C. Bordallo Test #1: Tutorial 1: Developing a Basic Web Page:HTML AND XHTML 6. Return to your Web browser and refresh or reload chem.htm to view the new paragraphs. 7. Figure 1-14 displays gthe revised version. 14: HTML AND XHTML 24: Creating Lists
