Creating Your First Web Page – Topic: Creating a wiki, blog, image blog and podcast Click Arrow -...
-
Upload
marshall-black -
Category
Documents
-
view
234 -
download
0
Transcript of Creating Your First Web Page – Topic: Creating a wiki, blog, image blog and podcast Click Arrow -...
1
Creating Your First Web Page – Topic: Creating a wiki, blog, image blog and
podcast
Click Arrow - Next Slide
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
3
Create an XHTML templateIn the Notepad screen, type the
following code.
<xhtml><head>
</head><body>
</body></xhtml>
Click Arrow – Next Slide
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
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
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.
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
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
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
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.
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
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
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
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.
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
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
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
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: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
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
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
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:1. Hyperlink tags are
added around the linked text.
2. The <a href=“URL”></a> and tag is used.
Click Arrow – Next Slide
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
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
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: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
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
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
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