Adding a Banner

Top Banner

For our fourth web page experiment we are going to add a banner image at the top of the web page.

Put an image called MyBanner.jpg in the Images folder.

Copy your “index03.htm” to “index04.htm” and edit as follows:

<!DOCTYPE html>
<html lang="en-US">
<html>
<body>

<img src="../Images/MyBanner.jpg" alt="A banner image of the Aguillon Town Hall" width="1012" height="256">  

<h1>This is a Heading</h1>

<p title="I'm a tooltip">
This is a paragraph with a tooltip.
</p>

<img src="../Images/MyPortrait.jpg" alt="A Picure of the author" width="104" height="104">

<p>
This is a paragraph with a link <a href="https://www.w3.org/">Click Here</a>
</p>

</body>
</html>

Note: additions/edits are in bold text

Save the HTML page as “index04.htm”

View the HTML Page in Your Browser

There should be a banner image at the top of the page then a heading and two paragraphs with an image placed between them.

The images will be displayed at the sizes specified by the width and height attributes

It is considered best practice to use relative file paths because in using relative file paths, your web pages will not be bound to your current base URL. All links will work on your own computer (localhost) as well as on your current public domain and your future public domains.

We will continue by learning more about headings in Minimal Website 05.

 

Eric Pickstone