Embed Size (px)
Citation preview
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.
How to view changes you make
EOS
<html>
<body>
<h1>Search engines</h1>
Yahoo<br>
Excite<br>
Google<br>
</body>
</html>
<br> creates a line break
<p> and </p> can be used to
begin and end a paragraph
Line Break Tags
Line Break Tag
EOS
• Tag to make text Font Bold:
<B> Hello </B>
• Tag to make text Font Italic:
<I> Hello </I>
Task!
Bold, Italic and Underline search engine names on
your web page – (One of each)
More Useful Tags
EOS
• Tag to make text Font Underline:
<U> Hello </U>
<html>
<body>
<h1>Search engines</h1>
<B><a href="http://www.yahoo.co.uk"> Yahoo</a></B><br>
<I>Excite</I><br>
<U>Google</U><br>
</body>
</html>
Hyperlink Tags
The URL of a hyperlink must be
enclosed in quotation marks “”
(Shift + 2)
EOS
Task!
Add the hyperlinks for Excite and Google.
• Web colours are changed using a hexadecimal code
• Each colour has 6 characters
1st two characters determine the level of RED
2nd two characters determine the level of GREEN
3rd two characters determine the level of BLUE
• Red, Green, Blue characters mix to make other colours.
• Characters have a # in front of them
• Values of each character are scaled 0 – FF (FF = Full)
Web Colours
<body bgcolor=“#FF0000”> = Background Colour Red
EOS
• Use tags:
<body bgcolor =“ ”>
• To make the background colour Red:
<body bgcolor=“#FF0000”>
• Background will appear Red.
• Add the RED HTML code as you see it in the box on the next slide.
• Save file.
• Refresh the Browser to view your updated Web Page.
Changing Background Colour
EOS
<html>
<body bgcolor =“#FF0000”>
<h1>Search engines</h1>
<B><a href="http://www.yahoo.co.uk"> Yahoo</a><br></B>
<I><a href="http://www.excite.co.uk"> Excite</a><br></I>
<U><a href="http://www.google.co.uk"> Google</a><br></U>
</body>
</html>
Changing the
Background Colour
Background Colour inserted
into the Body Tag.
<body bgcolor=“ ”>
Changing Background Colour
EOS
Changing Foreground (Text) Colour
• Use tags:
<font color =“ ”> </font>
• To make the foreground colour Green:
<font color=“#00FF00”> Text Here </font>
• Foreground will appear Green.
• Add the RED HTML code as you see it in the box on the next slide.
• Save file.
• Refresh the Browser to view your updated Web Page.
EOS
<html>
<body bgcolor =“#FF0000”>
<h1>Search engines</h1>
<B><a href="http://www.yahoo.co.uk"> Yahoo</a><br></B>
<I><a href="http://www.excite.co.uk"> Excite</a><br></I>
<U><a href="http://www.google.co.uk"> Google</a><br></U>
<font color=“#00FF00”>This is green text</font>
</body>
</html>
Changing the
Foreground Colour
Changing Foreground (Text) Colour
EOS
Good Colour Contrast
Good Color Contrast
Good Color Contrast
Good Color Contrast
Good Color Contrast
Bad Colour Contrast
Bad Color Contrast
Bad Color Contrast
Bad Color Contrast
Bad Color Contrast
Colour Contrast
EOS
• Try out a combination of Background/Foreground colours
• Try to get the Contrast of colours at a good level
Colours should not clash
Text should be easy to read against the background
Hexadecimal colour codes can be found at:
http://www.etntalk.com/colorpicker/flash/colorpicker.swf
Link to the Colour Picker button can be
found on the Web Design – Part 2 page
Colour Contrast
EOS
• Download the Google image from the Web Design – Part 2
web page. (Right Click Image Save Picture As)
• Save the file into your Web Design Folder.
• Add the RED HTML code as you see it in the box on the next slide.
• Save your file.
• Refresh your browser to show the image.
If you finish, try adding the yahoo.gif
and excite.gif as well
Inserting Images in HTML
EOS
<html>
<body bgcolor =“#FF0000”>
<h1>Search engines</h1>
<B><a href="http://www.yahoo.co.uk"> Yahoo</a><br></B>
<I><a href="http://www.excite.co.uk"> Excite</a><br></I>
<U><a href="http://www.google.co.uk"> Google</a><br></U>
<font color=“#00FF00”>This is green text</font>
<img src = “google.gif”>
</body>
</html>
Adding the Google
image
Inserting Images in HTML
EOS
Slide 22
• Your final Search
Engine HTML web page
should look something
like this:
(Your colours may differ)
• The HTML code
should look like this:
Search Engines HTML Example
EOS
Congratulations!
You have passed the
HTML course and are
officially a whiz-kid.
![The basic structure of any HTML The basic structure of any HTML page is: Your web page title here ** [all the HTML for display] ** : : CENG 449 Lecture](https://img.pdfslide.us/doc/110x75/56649d0e5503460f949e3d5c/the-basic-structure-of-any-html-the-basic-structure-of-any-html-page-is-your.jpg)
