1 / 31

Creating Your First Web Page – Topic: C reating a wiki, blog, image blog and podcast

Creating Your First Web Page – Topic: C reating a wiki, blog, image blog and podcast. Click Arrow - Next Slide. Open Notepad. Using Windows Vista Click Start button Click in Search box under the All Programs text (bottom of menu) Type in Notepad

zamir
Download Presentation

Creating Your First Web Page – Topic: C reating a wiki, blog, image blog and podcast

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

More Related