1. Creating Your First Web Page – Topic: Creating a wiki, blog, image blog and podcast Click Arrow - Next Slide

2. Open Notepad Using Windows Vista Click Start button Click in Search box under the All Programs text (bottom of menu) Type in Notepad Press the Enter key Click Arrow – Next Slide

3. Create an XHTML template In the Notepad screen, type the following code. <xhtml> <head> </head> <body> </body> </xhtml> Click Arrow – Next Slide

4. Save the XHTML template Click on File. Click on Save. In the Folders section, Switch to the location where you want to save the file. In this example, the file will be save on the Desktop. In the Save As Screen, Change the Save as type from Text Documents (*.txt) to All Files. Type the filename – XHTMLTemplate.html (make sure that you type .html as the file extension.) Click on the Save button. Click Arrow – Next Slide

5. View the Template in the Browser Open the browser. (Internet Explorer) Click on File. (Menu) Click on Open. (Menu) Click on Browse. (Menu) Locate the file. In the Folders section, click on Desktop. On the right side of the screen, scroll down to locate the file. Click on the Open button. Click on the OK button. At this point, you should see a blank screen. Click Arrow – Next Slide

6. Test for Errors • If an error message is displayed on the screen, go back to the code in Notepad and correct the error. Click Arrow - Go Back • If no error message is displayed, go to the Next slide. Click Arrow - Next Slide

7. Create Meta tags Enter the meta tags to the XHTML template. • The META element is placed in the HEAD section of the XHMTL template. • Meta tags are used to communicate with the browser to locate the Web page. Click Arrow – Next Slide

8. Save the XHTML template Click on File. Click on Save. The updated file is automatically saved under the filename XHTMLTemplate.html Click Arrow – Next Slide

9. View the Template in the Browser Open the browser. (Internet Explorer) Click on File. (Menu) Click on Open. (Menu) Click on Browse. (Menu) Locate the file. In the Folders section, click on Desktop. On the right side of the screen, scroll down to locate the file. Click on the Open button. Click on the OK button. At this point, you should see a blank screen. Click Arrow – Next Slide

10. Test for Errors • If an error message is displayed on the screen, go back to the code in Notepad and correct the error. Click Arrow - Go Back • If no error message is displayed, go to the Next slide. Click Arrow - Next Slide

11. Create Headings Enter the headings into the XHMTL template. • The headings are entered into the BODY section. • There are six levels of headings H1 – H6. Each heading is a predefined font size. H1 headings are the largest. H6 headings are the smallest. Click Arrow – Next Slide

12. Save the XHTML template Click on File. Click on Save. The updated file is automatically saved under the filename XHTMLTemplate.html Click Arrow – Next Slide

13. View the Template in the Browser Open the browser. (Internet Explorer) Click on File. (Menu) Click on Open. (Menu) Click on Browse. (Menu) Locate the file. In the Folders section, click on Desktop. On the right side of the screen, scroll down to locate the file. Click on the Open button. Click on the OK button. At this point, you should see the four headings. Click Arrow – Next Slide

14. Test for Errors • If an error message is displayed on the screen, go back to the code in Notepad and correct the error. Click Arrow - Go Back • If no error message is displayed, go to the Next slide. Click Arrow - Next Slide

15. Create a Paragraph Enter a paragraph into the XHTML template. • The paragraphs are entered into the BODY section. • The <p></p> tag is used. • A blank line is automatically entered between paragraphs. Click Arrow – Next Slide

16. Save the XHTML template Click on File. Click on Save. The updated file is automatically saved under the filename XHTMLTemplate.html Click Arrow – Next Slide

17. View the Template in the Browser Open the browser. (Internet Explorer) Click on File. (Menu) Click on Open. (Menu) Click on Browse. (Menu) Locate the file. In the Folders section, click on Desktop. On the right side of the screen, scroll down to locate the file. Click on the Open button. Click on the OK button. At this point, you should see the two paragraphs. Click Arrow – Next Slide

18. Test for Errors • If an error message is displayed on the screen, go back to the code in Notepad and correct the error. Click Arrow - Go Back • If no error message is displayed, go to the Next slide. Click Arrow - Next Slide

19. Add Bolding and Underling to Text Bold and Underline Text: • Bold and underline tags are added around the text. • The <b></b> and <u></u> tags are used. • It is possible to bold and underline the same text. Click Arrow – Next Slide

20. Save the XHTML template Click on File. Click on Save. The updated file is automatically saved under the filename XHTMLTemplate.html Click Arrow – Next Slide

21. View the Template in the Browser Open the browser. (Internet Explorer) Click on File. (Menu) Click on Open. (Menu) Click on Browse. (Menu) Locate the file. In the Folders section, click on Desktop. On the right side of the screen, scroll down to locate the file. Click on the Open button. Click on the OK button. At this point, the text Web 2.0 will be bold and bold and underlined. Click Arrow – Next Slide

22. Test for Errors • If an error message is displayed on the screen, go back to the code in Notepad and correct the error. Click Arrow - Go Back • If no error message is displayed, go to the Next slide. Click Arrow - Next Slide

23. Create Hyperlinks Hyperlinks: • Hyperlink tags are added around the linked text. • The <a href=“URL”></a> and tag is used. Click Arrow – Next Slide

24. Save the XHTML template Click on File. Click on Save. The updated file is automatically saved under the filename XHTMLTemplate.html Click Arrow – Next Slide

25. View the Template in the Browser Open the browser. (Internet Explorer) Click on File. (Menu) Click on Open. (Menu) Click on Browse. (Menu) Locate the file. In the Folders section, click on Desktop. On the right side of the screen, scroll down to locate the file. Click on the Open button. Click on the OK button. At this point, you will see four links. You should click on each link to test the link in the browser. Click Arrow – Next Slide

26. Test for Errors • If an error message is displayed on the screen, go back to the code in Notepad and correct the error. Click Arrow - Go Back • If no error message is displayed, go to the Next slide. Click Arrow - Next Slide

27. Add a List Lists: • Lists are either ordered (numbered - <ol> </ol>) or unordered (bulleted - <ul></ul>). • The tag <li></li> is added around each list item. Click Arrow – Next Slide

28. Save the XHTML template Click on File. Click on Save. The updated file is automatically saved under the filename XHTMLTemplate.html Click Arrow – Next Slide

29. View the Template in the Browser Open the browser. (Internet Explorer) Click on File. (Menu) Click on Open. (Menu) Click on Browse. (Menu) Locate the file. In the Folders section, click on Desktop. On the right side of the screen, scroll down to locate the file. Click on the Open button. Click on the OK button. At this point, you will see four links. You should click on each link to test the link in the browser. Click Arrow – Next Slide

30. Test for Errors • If an error message is displayed on the screen, go back to the code in Notepad and correct the error. Click Arrow - Go Back • If no error message is displayed, go to the Next slide. Click Arrow - Next Slide

31. End of Tutorial