Basic HTML
Basic HTML
Slide 1
The task:
create a web page
give it a title
give it a heading
add links
add a picture
Slide 2
HTML: Hypertext Markup Language
Pull down View, then Source, to see the HTML code.
Slide 3
Basic page
<html>
<body>
Search engines
</body>
</html>
Slide 4
Basic page
<html>
<body>
<h1>Search engines</h1>
</body>
</html>
Slide 5
Basic page
<html>
<body>
<h1>Search engines</h1>
Yahoo<br/>
Excite<br/>
Google<br/>
<br/> creates a line break
</body>
<p> and </p> can be used to
</html> begin and end a paragraph
Slide 6
Adding hyperlinks
<html>
<body>
<h1>Search engines</h1>
<a href="http://www.yahoo.com">Yahoo</a><br>
<a href="http://www.excite.co.uk">Excite</a><br>
<a href="http://www.google.fr">Google</a><br>
</body>
</html>
The URL of a hyperlink must be
enclosed in quotation marks
Slide 7
Adding the title
The title is not the same
<html> as the page heading
<head>
<title>Information on search engines</title>
</head>
<body>
<h1>Search engines</h1>
<a href="http://www.yahoo.com">Yahoo</a><br>
<a href="http://www.excite.co.uk">Excite</a><br>
<a href="http://www.google.fr">Google</a><br>
</body>
</html>
Slide 8
Levels
Judge how successful your work has been and ways in which it can be
improved.
Slide 9
Adding an image
Note the img tag trailing
<html>
slash
<head>
<title>Information on search engines</title>
</head>
<body>
<h1>Search engines</h1>
<img src="http://www.ealing. uk/images/banner_badge.gif "
height="120" width="120" />
<a href="http://www.yahoo.com">Yahoo</a><br/>
<a href="http://www.excite.co.uk">Excite</a><br/>
<a href="http://www.google.fr">Google</a><br/
</body>
</html>
Slide 10
Creating the HTML file
The text file can be created in a
simple text editor such as Notepad.
The file name must have .htm at the
end to indicate that it is a web page.
The file contains instructions to the
web browser that describe how the
page should look.
Slide 11
Judging a website
Is the information relevant to the users?