You are on page 1of 43

Section 1: Getting Started

Section 2: Moving Banner Section 3: Formatting text Section 4: Adding Images Section 5: Adding links to a web site Section 6:Adding sound Section 7: Common Tags

Miss Khan

Exit

Press F5 and then Click on the links on the left to get to the section you want

Miss Khan

Exit Exit

Section 1
This section tells you how to begin to make a web page

Back

CONTENTS

Next

Miss Khan

Exit Exit

1.
2. 3.

Go to Start > Programs > Accessories> Notepad Write <html> Press enter a few times a write </html>

Back

CONTENTS

Next

Miss Khan

Exit Exit

1.
2. 3. 4. 5.

Go to File> Save As Find your HTML folder Save as My Site.html Click OK DO NOT close the notepad

Back

CONTENTS

Next

Miss Khan

Exit Exit

1.
2. 3.

Go to My Documents Double click on My Site.html DO NOT close this

Back

CONTENTS

Next

Miss Khan

Exit Exit

1.
2.

The head section is the top section of the page Between the tags <html> and </html>, write <head> and </head>

Back

CONTENTS

Next

Miss Khan

Exit Exit

3. Between <head> and </head> write the <title> and </title> 4. Between <title> and </title> write the title of your webpage 5. Save

Back

CONTENTS

Next

Miss Khan

Exit Exit

You

should still have the web page up Click refresh If not open double click on My Site.html from your HTML folder It should look like this

Back

CONTENTS

Next

Miss Khan

Exit Exit

1.

2. 3. 4.

5. 6.

7.

After </head> write <body> Press enter twice Write </body> Type some text you want on your page Save Click refresh on your web page You should have see the screen on the next slide

Back

CONTENTS

Next

Miss Khan

Exit Exit

CONGRATULATIONS!! You have successfully set up your first web page . Keep working to see how fantastic your page can look...maybe be the best in the class?

Back

CONTENTS

Next

Miss Khan

Exit Exit

Section 2
This feature allows you to create a banner across the top of your web page with text that moves across the screen

Back

CONTENTS

Next

Miss Khan

Exit Exit

1.
2. 3.

After </head> write <marquee> Then type the text you want to go across the page Then write </marquee>

Back

CONTENTS

Next

Miss Khan

Exit Exit

This text moves across the screen

Back

CONTENTS

Next

Miss Khan

Exit Exit

Section 3
This next section tells you how to make change text so it looks clearer and more presentable

Back

CONTENTS

Next

Miss Khan

Exit Exit

1.

2.

3. 4.

Before the text you want to make bold type <b> After the text you want to be bold type </b> Save See what it looks like by pressing refresh on your internet explorer

Back

CONTENTS

Next

Miss Khan

Exit Exit

Back

CONTENTS

Next

Miss Khan

Exit Exit

1.

2.

3. 4.

Before the text you want to make italic type <i> After the text you want to make italic type </i> Save See what it looks like by pressing refresh on your internet explorer

Back

CONTENTS

Next

Miss Khan

Exit Exit

Back

CONTENTS

Next

Miss Khan

Exit Exit

1.

2.

3. 4.

Before the text you want to underline type <u> After the text you want to underline type </u> Save See what it looks like by pressing refresh on your internet explorer

Back

CONTENTS

Next

Miss Khan

Exit Exit

Back

CONTENTS

Next

Miss Khan

Exit Exit

You

can make text bold italic and underlined

Back

CONTENTS

Next

Miss Khan

Exit Exit

1.

2.

3.

To make text stand out as headings we can change the size of this text: h1 is the biggest size and h6 is the smallest Before the text you want to make a heading type <h1> (if you want the heading to be really big!!) After the text you want to make a heading type </h1>

Back

CONTENTS

Next

Miss Khan

Exit Exit

Back

CONTENTS

Next

Miss Khan

Exit Exit

1.
2. 3.

Before the text you want to change the colour of type <font color = > After = type the colour you want the text to be After the text you want to change the colour of type </font>

Back

CONTENTS

Next

Miss Khan

Exit Exit

Back

CONTENTS

Next

Miss Khan

Exit Exit

***Align = the position of the text on the screen***


To align text, type <h1 align=center> instead of <h1> Save

Back

CONTENTS

Next

Miss Khan

Exit Exit

Back

CONTENTS

Next

Miss Khan

Exit Exit

1.

To start a paragraph write <p> before the text you want to be in a paragraph

Back

CONTENTS

Next

Miss Khan

Exit Exit

Back

CONTENTS

Next

Miss Khan

Exit Exit

1.
2.

3.
4.

Your font goes from being very large (size 7) down to very small (size 1) Before the text you want to change the font size of write <font size = > After the = sign write the font size you want After the text you are changing the font size of write </font>

Back

CONTENTS

Next

Miss Khan

Exit Exit

Back

CONTENTS

Next

Miss Khan

Exit Exit

1.

Before the text you want on a different line write <br>

Back

CONTENTS

Next

Miss Khan

Exit Exit

Back

CONTENTS

Next

Bullet points
1.
2. 3. 4.

Write <ul> and after that write <li> write the text you want to be the first bullet point and then write </li> Repeat step 2 as many times as you want Finish by writing </ul>

Numbered list
1.
2. 3. 4.

Write <ol> and after that write <li> Write the text you want to be the first bullet point and then write </li> Repeat step 2 as many times as you want Finish by writing </ol>

Miss Khan

Exit Exit

Section 4
This next section tells you how to add images to your web page

Back

CONTENTS

Next

Miss Khan

Exit Exit

1.
2. 3.

Go to the internet and find an image you like Save it in your HTML folder with a sensible name In your notepad file, write <img src=> and between the write the name of you image

Back

CONTENTS

Next

Miss Khan

Exit Exit

Section 5

Back

CONTENTS

Next

Miss Khan

Exit Exit

1.
2. 3.

4. 5. 6.

Find a place where you want the link to be displayed Write <A HREF = http:// Write the address of the website you want to link to eg. google.com Write > after the address Write the text you want to appear on your website Write </A>

Back

CONTENTS

Next

Miss Khan

Exit Exit

Back

CONTENTS

Next

Miss Khan

Exit Exit

Section 6
This section will tell you how to play sound on your site

Back

CONTENTS

Next

Miss Khan

Exit Exit

1.
2. 3. 4. 5.

Find a sound file in mp3 format Save it to your HTML folder Move the mouse to after <body> Press enter Write <BGSOUND SRC = Music.mp3> and replace Music by the file name of your sound file

Back

CONTENTS

Next

Miss Khan

Task Bold Bullet point list

Tag <b>example</b> <ol> <li type="disc">example 1</li> <li type="disc">example 2</li> </ol> <center>example</center> <font face="Arial">example</font> <h1> example</h1> <hr /> <a href="http://mywebsite.com">mywebsite </a>

Exit Exit

Center Font style Heading Horizontal rule Hyperlink

Image
Italic Line break Numbered list

<img src="myimagename.jpg" />


<i>example </i> <br> <ol> <li>example 1</li> <li>example 2</li> </ol> <p> <p align="left"> example <br> <p align="right"> example <br> <p align="center"> example <br> <u>example</u>

Paragraph Paragraph (left align) Paragraph (right align) Paragraph (centre align) Underline

Back

CONTENTS

Next