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

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

3. Create an XHTML template In the Notepad screen, type the following code. Click Arrow – Next Slide 3

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

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

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 6

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

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

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

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 10

11. Create Headings Enter the headings into the XHMTL template. 1.The headings are entered into the BODY section. 2.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 11

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

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

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 14

15. Create a Paragraph Enter a paragraph into the XHTML template. 1.The paragraphs are entered into the BODY section. 2.The tag is used. 3.A blank line is automatically entered between paragraphs. Click Arrow – Next Slide 15

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

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

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 18

19. Add Bolding and Underling to Text Bold and Underline Text: 1.Bold and underline tags are added around the text. 2.The and tags are used. 3.It is possible to bold and underline the same text. Click Arrow – Next Slide 19

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

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

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 22

23. Create Hyperlinks Hyperlinks: 1.Hyperlink tags are added around the linked text. 2.The and tag is used. Click Arrow – Next Slide 23

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

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

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 26

27. Add a List Lists: 1.Lists are either ordered (numbered - ) or unordered (bulleted - ). 2.The tag is added around each list item. Click Arrow – Next Slide 27

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

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

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 30

31. End of Tutorial 31