HTML Recap Menu: 1. Opening notepad 2. Making a basic HTML page 3. How to save a HTML Page 4. How to open and view your page 5. Using HTML tags 6. Adding a heading 7. How to view changes 8. Line Break tag 10. Adding hyperlinks 9. Bold, Italic, Underline tags 11. Web colours 12. Changing background colours 13. Changing foreground colours 14. Colour contrast 15. Inserting images
23
Embed
HTML Recap - ICT lounge · 2015. 3. 25. · HTML Recap Menu: 1. Opening notepad 2. Making a basic HTML page 3. How to save a HTML Page 4. How to open and view your page 5. Using HTML
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
HTML Recap
Menu:
1. Opening notepad
2. Making a basic HTML page
3. How to save a HTML Page
4. How to open and view your page
5. Using HTML tags
6. Adding a heading
7. How to view changes
8. Line Break tag
10. Adding hyperlinks
9. Bold, Italic, Underline tags
11. Web colours
12. Changing background colours
13. Changing foreground colours
14. Colour contrast
15. Inserting images
Now Lets Make Our First Web Page!
Type the text you can see in the blue box on the next slide
into NOTEPAD (COPY THE TEXT EXACTLY!)
Where do we start?
• Open Notepad:
Windows Button All Programs Accessories Notepad
• Open your Web Design folder
KEEP BOTH OF THESE OPEN!
EOS
This will display the words “Search Engines” on the web
page.
<html>
<body>
Search Engines
</body>
</html>
Basic Page
EOS
• In order to turn your Text file into a HTML file you MUST
follow these instructions EXACTLY
• In Notepad:
File Save As
Name your Web Page as Search Engines.htm
Save the file in your Web Design Folder.
How to save your web page
EOS
• Browse to your Web Design folder.
• Look for your Search Engines.htm file. The file should look like this:
• Double Click your Web Page to open.
• Keep Web Page open for next task.
How to open and view your web
pages
EOS
• Tags are used to tell Web Browser how to display text and images
• Tags are indicated by using < and >
• Tags almost always work in pairs – Start Tag and End Tag
Start tag example = <H1>
End tag example = </H1>
Using Tags
EOS
Tags indicate to the Browser how to display the text sitting between the start and end Tags
• Open your Search Engines.htm in Notepad.
(Right Click Search Engines file Open With Notepad).
• This will open up your HTML Text File.
• Enter the text you can see in the blue box on the next slide.
• DO NOT enter the same text again --- just add anything you can see which is new. (New Items are Coloured Red)
• Save your file.
Adding a Heading to your page
EOS
The <h1> tag sets text as a heading in style 1.
Valid tags are <h1>; <h2>; <h3>; <h4>; <h5>; <h6>.
What effect does changing the number have?
<html>
<body>
<H1>Search Engines</H1>
</body>
</html>
Heading Tag
EOS
• You can view changes you make to the HTML file in 2 ways:
1. Browse to the Search Engines file and double click it
2. Click the Refresh button in the Browser
• Both of these methods will load up your updated Web Page.