How to Add Pictures to a Web Page with HTML
Now here is a lovely image.
Suppose you had an image file and you wanted to add that image to your Web page. You would use the <img> element. Like this:
<!DOCTYPE HTML>
<html>
<head>
<title>A Web page with a Picture</title>
</head>
<body>
<img src='chess_knights_dark.png' alt='Dark chess knights.' title='Some cool chess pieces.' style='width:480px;height:270px;'>
</body>
</html>
First, an <img> element does not need an end tag. But
it does need some attributes.
Probably the most important attribute, is the ‘src’
attribute. This tells the browser what your source file is and where to find
it.
If the image file is in another directory, then you must
specify it. Like this example:
<img src='name_of_folder_containing_images/name_of_image.fileExtension'>
If you want to link from another Web page online, then you will need to include the entire url address. Like this:
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVMwJx4P7tuV7R6674iP3kdgd9MHbN1xgO-1NYwEbjEwWt-rIB_OT5uTJgwnoOLTPg1kYjaCGuB9kCCu6eVI8UGQpw785B_TtAKwqG_mpuq84IxbzKIftCSdPZsiz9Rq1-mJw-2_ZOHwv4cKbOoxnDMLAEBN_JMXGE3wDN0Bfi-olGtzGtuBGGVAGCJA/s320/gamecodeplus.png'>
Be aware, however, that images online might be copywrite
protected. (On that note, the images on this tutorial were created by me. So,
feel free to link, copy, or use as you please. Enjoy.)
The ‘alt’ attribute is used to display some descriptive text,
should the image file not be found.
The ‘title’ attribute is not really needed, unless you want
it, but it will display this text when a computer mouse pointer is hovering
over the image.
Finally, the ‘style’ attribute lets you apply some CSS code
to your image. Use CSS to define the height and width of your image.
With CSS code you can do a lot with an image, like set the
image as a background and have text appear over the image. You can have the
image float to the left or right of text or even stretch the image to cover the
entire page.
There will be more discussion on CSS in tutorials to come.
Thank you for reading. In the next tutorial we will learn about creating links to other Web pages.
Comments
Post a Comment