-
Notifications
You must be signed in to change notification settings - Fork 0
/
Images.html
42 lines (24 loc) · 2.42 KB
/
Images.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="en">
<head>
<title>Images</title>
<meta charset="utf-8">
</head>
<body>
<h1>Images</h1>
<p>As a website grows, keeping images in a separate folder helps you understand how the site is organized. Here you can see an example of the files for a website; all of the images are stored in a folder called <i>images</i>.</p>
<p>To add an image into the page you need to use an <i>img</i>element. This is an empty element (which means there is no closing tag).</p>
<img src="pictures/bear.jpg" alt="A lazy grizzly bear" title="A grizzly may chow down on 90 pounds (40 kilograms) of food each day." width="360" height="360" />
<h1>Image Placement</h1>
<p>Where an image is placed in the code will affect how it is displayed. Below is an example.</p>
<img src="Pictures/squirrel.jpg" alt="squirrel" width="120" height="120" />
<p>Squirrel is a term that most use to refer to a kind of familiar fluffy-tailed, tree-climbing rodent, or "tree squirrel". However tree squirrels are only a part of the true squirrel family, which also includes chipmunks, groundhogs and prairie dogs.</p>
<hr />
<p><img src="Pictures/squirrel.jpg" alt="squirrel" width="120" height="120" />Squirrel is a term that most use to refer to a kind of familiar fluffy-tailed, tree-climbing rodent, or "tree squirrel". However tree squirrels are only a part of the true squirrel family, which also includes chipmunks, groundhogs and prairie dogs.</p>
<hr />
<p>Squirrel is a term that most use to refer to a kind of familiar fluffy-tailed, tree-climbing rodent, or "tree squirrel".<img src="Pictures/squirrel.jpg" alt="squirrel" width="120" height="120" />However tree squirrels are only a part of the true squirrel family, which also includes chipmunks, groundhogs and prairie dogs.</p>
<h1>Aligning Images Horizontally</h1>
<p>Use the <i>align</i>tribute to indicate where the image should be placed for the text to flow around. You can align left, right, middle, bottom and top.</p>
<p><img src="Pictures/penguin.jpg" alt="Penguin" width="100" height="100" align="left"/>Penguins are flightless birds. – While other birds have wings for flying, penguins have adapted flippers to help them swim in the water.</p>
</body>
</html>