creating your first web page – topic: c reating a wiki, blog, image blog and podcast
DESCRIPTION
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 - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Creating Your First Web Page – Topic: C reating a wiki, blog, image blog and podcast](https://reader036.vdocuments.us/reader036/viewer/2022062501/56816284550346895dd2f3b8/html5/thumbnails/1.jpg)
1
Creating Your First Web Page – Topic: Creating a wiki, blog, image blog and
podcast
Click Arrow - Next Slide
![Page 2: Creating Your First Web Page – Topic: C reating a wiki, blog, image blog and podcast](https://reader036.vdocuments.us/reader036/viewer/2022062501/56816284550346895dd2f3b8/html5/thumbnails/2.jpg)
2
Open NotepadUsing Windows Vista
1. Click Start button2. Click in Search box
under the All Programs text (bottom of menu)
3. Type in Notepad4. Press the Enter key
Click Arrow – Next Slide
![Page 3: Creating Your First Web Page – Topic: C reating a wiki, blog, image blog and podcast](https://reader036.vdocuments.us/reader036/viewer/2022062501/56816284550346895dd2f3b8/html5/thumbnails/3.jpg)
3
Create an XHTML templateIn the Notepad screen, type the
following code.
<xhtml><head>
</head><body>
</body></xhtml>
Click Arrow – Next Slide
![Page 4: Creating Your First Web Page – Topic: C reating a wiki, blog, image blog and podcast](https://reader036.vdocuments.us/reader036/viewer/2022062501/56816284550346895dd2f3b8/html5/thumbnails/4.jpg)
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
![Page 5: Creating Your First Web Page – Topic: C reating a wiki, blog, image blog and podcast](https://reader036.vdocuments.us/reader036/viewer/2022062501/56816284550346895dd2f3b8/html5/thumbnails/5.jpg)
5
View the Template in the Browser1. 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
![Page 6: Creating Your First Web Page – Topic: C reating a wiki, blog, image blog and podcast](https://reader036.vdocuments.us/reader036/viewer/2022062501/56816284550346895dd2f3b8/html5/thumbnails/6.jpg)
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
![Page 7: Creating Your First Web Page – Topic: C reating a wiki, blog, image blog and podcast](https://reader036.vdocuments.us/reader036/viewer/2022062501/56816284550346895dd2f3b8/html5/thumbnails/7.jpg)
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
![Page 8: Creating Your First Web Page – Topic: C reating a wiki, blog, image blog and podcast](https://reader036.vdocuments.us/reader036/viewer/2022062501/56816284550346895dd2f3b8/html5/thumbnails/8.jpg)
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
![Page 9: Creating Your First Web Page – Topic: C reating a wiki, blog, image blog and podcast](https://reader036.vdocuments.us/reader036/viewer/2022062501/56816284550346895dd2f3b8/html5/thumbnails/9.jpg)
9
View the Template in the Browser1. 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
![Page 10: Creating Your First Web Page – Topic: C reating a wiki, blog, image blog and podcast](https://reader036.vdocuments.us/reader036/viewer/2022062501/56816284550346895dd2f3b8/html5/thumbnails/10.jpg)
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
![Page 11: Creating Your First Web Page – Topic: C reating a wiki, blog, image blog and podcast](https://reader036.vdocuments.us/reader036/viewer/2022062501/56816284550346895dd2f3b8/html5/thumbnails/11.jpg)
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
![Page 12: Creating Your First Web Page – Topic: C reating a wiki, blog, image blog and podcast](https://reader036.vdocuments.us/reader036/viewer/2022062501/56816284550346895dd2f3b8/html5/thumbnails/12.jpg)
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
![Page 13: Creating Your First Web Page – Topic: C reating a wiki, blog, image blog and podcast](https://reader036.vdocuments.us/reader036/viewer/2022062501/56816284550346895dd2f3b8/html5/thumbnails/13.jpg)
13
View the Template in the Browser1. 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
![Page 14: Creating Your First Web Page – Topic: C reating a wiki, blog, image blog and podcast](https://reader036.vdocuments.us/reader036/viewer/2022062501/56816284550346895dd2f3b8/html5/thumbnails/14.jpg)
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
![Page 15: Creating Your First Web Page – Topic: C reating a wiki, blog, image blog and podcast](https://reader036.vdocuments.us/reader036/viewer/2022062501/56816284550346895dd2f3b8/html5/thumbnails/15.jpg)
15
Create a Paragraph
Enter a paragraph into the XHTML template.
1. The paragraphs are entered into the BODY section.
2. The <p></p> tag is used.3. A blank line is
automatically entered between paragraphs.
Click Arrow – Next Slide
![Page 16: Creating Your First Web Page – Topic: C reating a wiki, blog, image blog and podcast](https://reader036.vdocuments.us/reader036/viewer/2022062501/56816284550346895dd2f3b8/html5/thumbnails/16.jpg)
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
![Page 17: Creating Your First Web Page – Topic: C reating a wiki, blog, image blog and podcast](https://reader036.vdocuments.us/reader036/viewer/2022062501/56816284550346895dd2f3b8/html5/thumbnails/17.jpg)
17
View the Template in the Browser1. 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
![Page 18: Creating Your First Web Page – Topic: C reating a wiki, blog, image blog and podcast](https://reader036.vdocuments.us/reader036/viewer/2022062501/56816284550346895dd2f3b8/html5/thumbnails/18.jpg)
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
![Page 19: Creating Your First Web Page – Topic: C reating a wiki, blog, image blog and podcast](https://reader036.vdocuments.us/reader036/viewer/2022062501/56816284550346895dd2f3b8/html5/thumbnails/19.jpg)
19
Add Bolding and Underling to Text
Bold and Underline Text:1. Bold and underline
tags are added around the text.
2. The <b></b> and <u></u> tags are used.
3. It is possible to bold and underline the same text.
Click Arrow – Next Slide
![Page 20: Creating Your First Web Page – Topic: C reating a wiki, blog, image blog and podcast](https://reader036.vdocuments.us/reader036/viewer/2022062501/56816284550346895dd2f3b8/html5/thumbnails/20.jpg)
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
![Page 21: Creating Your First Web Page – Topic: C reating a wiki, blog, image blog and podcast](https://reader036.vdocuments.us/reader036/viewer/2022062501/56816284550346895dd2f3b8/html5/thumbnails/21.jpg)
21
View the Template in the Browser1. 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
![Page 22: Creating Your First Web Page – Topic: C reating a wiki, blog, image blog and podcast](https://reader036.vdocuments.us/reader036/viewer/2022062501/56816284550346895dd2f3b8/html5/thumbnails/22.jpg)
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
![Page 23: Creating Your First Web Page – Topic: C reating a wiki, blog, image blog and podcast](https://reader036.vdocuments.us/reader036/viewer/2022062501/56816284550346895dd2f3b8/html5/thumbnails/23.jpg)
23
Create Hyperlinks
Hyperlinks:1. Hyperlink tags are
added around the linked text.
2. The <a href=“URL”></a> and tag is used.
Click Arrow – Next Slide
![Page 24: Creating Your First Web Page – Topic: C reating a wiki, blog, image blog and podcast](https://reader036.vdocuments.us/reader036/viewer/2022062501/56816284550346895dd2f3b8/html5/thumbnails/24.jpg)
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
![Page 25: Creating Your First Web Page – Topic: C reating a wiki, blog, image blog and podcast](https://reader036.vdocuments.us/reader036/viewer/2022062501/56816284550346895dd2f3b8/html5/thumbnails/25.jpg)
25
View the Template in the Browser1. 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
![Page 26: Creating Your First Web Page – Topic: C reating a wiki, blog, image blog and podcast](https://reader036.vdocuments.us/reader036/viewer/2022062501/56816284550346895dd2f3b8/html5/thumbnails/26.jpg)
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
![Page 27: Creating Your First Web Page – Topic: C reating a wiki, blog, image blog and podcast](https://reader036.vdocuments.us/reader036/viewer/2022062501/56816284550346895dd2f3b8/html5/thumbnails/27.jpg)
27
Add a List
Lists:1. Lists are either
ordered (numbered - <ol> </ol>) or unordered (bulleted - <ul></ul>).
2. The tag <li></li> is added around each list item.
Click Arrow – Next Slide
![Page 28: Creating Your First Web Page – Topic: C reating a wiki, blog, image blog and podcast](https://reader036.vdocuments.us/reader036/viewer/2022062501/56816284550346895dd2f3b8/html5/thumbnails/28.jpg)
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
![Page 29: Creating Your First Web Page – Topic: C reating a wiki, blog, image blog and podcast](https://reader036.vdocuments.us/reader036/viewer/2022062501/56816284550346895dd2f3b8/html5/thumbnails/29.jpg)
29
View the Template in the Browser1. 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
![Page 30: Creating Your First Web Page – Topic: C reating a wiki, blog, image blog and podcast](https://reader036.vdocuments.us/reader036/viewer/2022062501/56816284550346895dd2f3b8/html5/thumbnails/30.jpg)
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
![Page 31: Creating Your First Web Page – Topic: C reating a wiki, blog, image blog and podcast](https://reader036.vdocuments.us/reader036/viewer/2022062501/56816284550346895dd2f3b8/html5/thumbnails/31.jpg)
31
End of Tutorial