HTML and CSS Reference
In-Depth Information
Table 4-5 HTML Code for Adding and Centering an Image
Line HTMLTagandText
11
<div style=”text-align: center”>
12
<img src=”oceansidelogo.jpg” width=”866” height=”259” alt=”Oceanside
logo” style=”box-shadow: 10px 10px 12px #888888” />
</div>
13
The following step shows how to add a centered banner image.
1
With the insertion
point on line 11, enter
the HTML code shown
in Table 4-5, pressing
e n t e r at the end of
each line. Make sure
to indent the second
line of code by using
the t a b key. This
separates the start
and end <div> tag
from the <img>
tag, highlighting
the image
insertion. Press
the e n t e r key twice at
the end of line 13 to
position the insertion
point on line 15
(Figure 4-13).
start division <div>
tag to start an area
in the Web page
that is centered
end division </div>
tag to close the area
in the Web page
that is centered
insertion
point on
line 15
tags needed to insert
centered image
oceansidelogo.jpg
with box-shadow
Figure4-13
When I pressed e n t e r at the end of line 12, Notepad++ indented line 13 also. How do I
remove the indent?
You have to press the left arrow key or Backspace to get back to the left margin before you
insert the </div> tag.
How can I determine the height and width of an image?
There are several ways to determine the height and width of an image. The first way is
to click on the image in Windows Explorer; the height and width display in the status bar.
Another way is to right-click the image in Windows Explorer, select Properties, and display
the Details tab. A third way is to open the image in a paint or image-editing program and
view the dimensions in the status bar or via a command in the program. Although you can
adjust the width and height by using the width and height attributes in the <img> tag,
doing so might cause the image to look distorted on the Web page.
 
Search WWH ::




Custom Search