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

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>


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.


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.


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.


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.


8


1. Click on File.2. Click on Save.3. The updated file is

automatically saved under the filename XHTMLTemplate.html


9







6. At this point, you should see a blank screen.


10

Test for Errors





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.


12





13







6. At this point, you should see the four headings.


14

Test for Errors





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.


16





17







6. At this point, you should see the two paragraphs.


18

Test for Errors





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.


20





21







6. At this point, the text Web 2.0 will be bold and bold and underlined.


22

Test for Errors





23

Create Hyperlinks

Hyperlinks:1. Hyperlink tags are

added around the linked text.

2. The <a href=“URL”></a> and tag is used.


24





25





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.


26

Test for Errors





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.


28





29





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.


30

Test for Errors





31

End of Tutorial