Download presentation
Presentation is loading. Please wait.
1
HTML GUIDE Press F5 and then
Section 1: Getting Started © Mr Ali Exit Section 2: Moving Banner HTML GUIDE Section 3: Formatting text Section 4: Adding Images Section 5: Adding links to a web site Section 6:Adding sound Press F5 and then Click on the links on the left to get to the section you want Section 7: Common Tags
2
This section tells you how to begin to make a web page
Exit Exit Getting started Section 1 This section tells you how to begin to make a web page Back Next CONTENTS
3
Creating a web page file
Exit Exit Go to Start > Programs > Accessories> Notepad Write <html> Press enter a few times a write </html> Back Next CONTENTS
4
Saving your web page for the first time
Exit Exit Go to File> Save As Find your HTML folder Save as “My Site.html” Click OK DO NOT close the notepad Back Next CONTENTS
5
To open your web page as a web page
© Miss Khan To open your web page as a web page Exit Exit Go to My Documents Double click on My Site.html DO NOT close this Back Next CONTENTS
6
Splitting your page into sections
© Miss Khan Splitting your page into sections Exit Exit The head section is the top section of the page Between the tags <html> and </html>, write <head> and </head> Back Next CONTENTS
7
Splitting your page into sections
© Miss Khan Splitting your page into sections 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 Next CONTENTS
8
What does it look like so far
© Miss Khan What does it look like so far 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 Next CONTENTS
9
Making the body After </head> write <body>
© Miss Khan Making the body Exit Exit 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 Next CONTENTS
10
© 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 Next CONTENTS
11
Section 2 Moving Banner Exit Exit Back Next CONTENTS
© Miss Khan Exit Exit Moving Banner 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 Next CONTENTS 11
12
Moving banner After </head> write <marquee>
© Miss Khan Moving banner Exit Exit After </head> write <marquee> Then type the text you want to go across the page Then write </marquee> Back Next CONTENTS 12
13
What it looks like... Exit Exit This text moves across the screen Back
© Miss Khan What it looks like... Exit Exit This text moves across the screen Back Next CONTENTS 13
14
Section 3 Formatting text
© Miss Khan Exit Exit Formatting text Section 3 This next section tells you how to make change text so it looks clearer and more presentable Back Next CONTENTS
15
Making text bold Before the text you want to make bold type <b>
© Miss Khan Making text bold Exit Exit 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 Next CONTENTS
16
© Miss Khan What it looks like... Exit Exit Back Next CONTENTS
17
© Miss Khan Making text italic Exit Exit 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 Next CONTENTS
18
© Miss Khan What it looks like... Exit Exit Back Next CONTENTS
19
Underlining text Before the text you want to underline type <u>
© Miss Khan Underlining text Exit Exit 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 Next CONTENTS
20
© Miss Khan What it looks like... Exit Exit Back Next CONTENTS
21
Combining formatting You can make text bold italic and underlined Exit
© Miss Khan Combining formatting Exit Exit You can make text bold italic and underlined Back Next CONTENTS
22
© Miss Khan Heading styles Exit Exit 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 Next CONTENTS
23
© Miss Khan What it looks like... Exit Exit Back Next CONTENTS
24
© Miss Khan Font colours Exit Exit 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 Next CONTENTS
25
© Miss Khan What it looks like... Exit Exit Back Next CONTENTS
26
Aligning headings ***Align = the position of the text on the screen***
© Miss Khan Aligning headings Exit Exit ***Align = the position of the text on the screen*** To align text, type <h1 align=“center”> instead of <h1> Save Back Next CONTENTS
27
© Miss Khan What it looks like... Exit Exit Back Next CONTENTS
28
© Miss Khan New paragraphs Exit Exit To start a paragraph write <p> before the text you want to be in a paragraph Back Next CONTENTS
29
© Miss Khan What it looks like... Exit Exit Back Next CONTENTS
30
© Miss Khan Changing font size Exit Exit 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 Next CONTENTS
31
© Miss Khan What it looks like... Exit Exit Back Next CONTENTS
32
Putting text onto a new line
© Miss Khan Putting text onto a new line Exit Exit Before the text you want on a different line write <br> Back Next CONTENTS
33
© Miss Khan What it looks like... Exit Exit Back Next CONTENTS
34
Bullet points 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>
35
Numbered list 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>
36
Section 4 Adding images Exit Exit Back Next CONTENTS
© Miss Khan Exit Exit Adding images Section 4 This next section tells you how to add images to your web page Back Next CONTENTS
37
Adding an image Go to the internet and find an image you like
© Miss Khan Adding an image Exit Exit 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 Next CONTENTS
38
Adding Links to a website
© Miss Khan Exit Exit Section 5 Adding Links to a website Back Next CONTENTS
39
Adding links to a website
© Miss Khan Adding links to a website Exit Exit Find a place where you want the link to be displayed Write <A HREF = “ 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 Next CONTENTS
40
© Miss Khan What it looks LikE... Exit Exit Back Next CONTENTS
41
Section 6 Adding sound Exit Exit Back Next CONTENTS
© Miss Khan Exit Exit Adding sound Section 6 This section will tell you how to play sound on your site Back Next CONTENTS
42
Adding sound Find a sound file in mp3 format
© Miss Khan Adding sound Exit Exit 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 Next CONTENTS
43
Section 7 - Common tags Exit Exit Back Next CONTENTS © Miss Khan Task
Bold <b>example</b> Bullet point list <ol> <li type="disc">example 1</li> <li type="disc">example 2</li> </ol> Center <center>example</center> Font style <font face="Arial">example</font> Heading <h1> example</h1> Horizontal rule <hr /> Hyperlink <a href=" </a> Image <img src="myimagename.jpg" /> Italic <i>example </i> Line break <br> Numbered list <li>example 1</li> <li>example 2</li> Paragraph <p> Paragraph (left align) <p align="left"> example <br> Paragraph (right align) <p align="right"> example <br> Paragraph (centre align) <p align="center"> example <br> Underline <u>example</u> Back Next CONTENTS
Similar presentations
