WEB DESIGN GARAGE [Electronic resources] نسخه متنی

اینجــــا یک کتابخانه دیجیتالی است

با بیش از 100000 منبع الکترونیکی رایگان به زبان فارسی ، عربی و انگلیسی

WEB DESIGN GARAGE [Electronic resources] - نسخه متنی

Marc Campbell

| نمايش فراداده ، افزودن یک نقد و بررسی
افزودن به کتابخانه شخصی
ارسال به دوستان
جستجو در متن کتاب
بیشتر
تنظیمات قلم

فونت

اندازه قلم

+ - پیش فرض

حالت نمایش

روز نیمروز شب
جستجو در لغت نامه
بیشتر
لیست موضوعات
توضیحات
افزودن یادداشت جدید








Chapter 30. Positioning Inline Images with HTML




Inline images are images that appear inside a block of text. These are typically content images, such as charts, graphs, or photos, as opposed to logos, nav-bar buttons, and other graphical interface elements, which usually have their own table cells or CSS divs in the page layout.




GEEKSPEAK



Inline images are images that appear inside a block of HTML text.



The simplest way to add an inline image in HTML is to insert the img tag into the text exactly where you want the image to appear, as in Figure 30.1. As you can see, this method is serviceable but not very aesthetically pleasing. If the image is taller than the point size of the surrounding text, the browser splits the lines of type in the most unattractive way imaginable.


Listing 30.1. View Source for Figure 30.1.

[View full width]



<h2>A complete brain-trust solution</h2>
<p>When you consult with us, you'll be amazed at the results. We offer the most
="/image/library/english/10077_ccc.gif"> interesting, creative, out-of-the-box, and forward-thinking ideas <img src="
border="0" width="14" height="9" left" src="/image/library/english/10077_ccc.gif
]">.gif" width="47" height="84"> in the industry.
You won't believe what we'll come up with
next. We have won
several international awards for our ideas alone, including the
prestigious Nobel Prize.
You simply won't find better ideas anywhere.</p>



Figure 30.1. Dropping the img tag into a block of text creates an inline image, but the browser splits the lines of type without much artful subtlety.




The align attribute of the img tag helps you to place the image more effectively, as in Figure 30.2. Just choose a value for the align attribute from Table 30.1. You can float the image to the left or right of the entire block of text, or you can align the image vertically to the top, middle, or bottom of the line of text in which the inline image appears.



Figure 30.2. Use the align attribute of the image tag to tell the browser how to place the image in relation to the surrounding text.





Table 30.1. Align Attribute Values for the img Tag


VALUE



EFFECT



bottom



Vertically aligns the bottom of the image with the bottom or baseline of the line of text



left



Floats the image to the left of the block of text



middle



Vertically aligns the image with the middle of the line of text



right



Floats the image to the right of the block of text



top



Vertically aligns the top of the image with the top of the line of text





GEEKSPEAK




Floating an inline image means pushing it to the left or right of a block of text so that the text wraps around it.



Listing 30.2. View Source for Figure 30.2.

[View full width]



<h2>A complete brain-trust solution</h2>
<p><img src="/image/library/english/10077_bulb.gif" width="47" height="84" align="left">
When you consult with
us, you'll be amazed at the results. We offer the most interesting,
creative,
out-of-the-box, and forward-thinking ideas in the industry.
You won't believe what we'll
come up with next. We have won several international awards for
our ideas alone, including
the prestigious Nobel Prize. You simply won't find better ideas
anywhere.</p>




TIP




To float an inline image to the right or left of a block of text, move the img tag to the beginning of the block of text, as in the View Source of Figure 30.2.




/ 175