Spring.Into.HTML.and.CSS [Electronic resources] نسخه متنی

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

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

Spring.Into.HTML.and.CSS [Electronic resources] - نسخه متنی

Barry J. Rosenberg

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

فونت

اندازه قلم

+ - پیش فرض

حالت نمایش

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






The img Element


When working with images, the element you'll be using is img. This is an empty elementin other words, it does not contain any text content. As a result, it doesn't require a closing tag. It's written in XHTML as follows:


<img />

Placed all by itself within the body of your document, this will do nothing at all. So along with the img element itself, you'll need to point to the location of the image. This is done using the src attribute, which stands for "source."

In the value of the source attribute, you'll add the location and the name of the actual web graphic file, along with its extension. Example 3-1 shows a complete document with the image source included.

Example 3-1. Adding the image into the document body


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Chapter 3</title>
</head>
<body>
<img src="/image/library/english/10233_photo.jpg" />
</body>
</html>

NOTE

You'll notice that I've used a subdirectory called images in which to store my web graphics. It's conventional to place images in a subdirectory beneath the documents that use them or, if you have a fairly small site, in one image location off the root directory.

This causes the image to appear in your browser window (see Figure 3-1).

Figure 3-1. The image appears within the browser window.

Without any content in the document, the image automatically is placed in the upper-left corner. You'll ultimately be doing a lot more with this image to make it more useful:

Assist browsers with better rendering

Provide helpful information to those who might not be able to view the image

Link the image


Chapter 8, "Working with Color and Images Using CSS," you'll learn more advanced methods to control an image's presentation using CSS.


/ 171