Html Images Images make up a large part of the web - most websites contain images. HTML makes it very easy for you to embed images into your web page.
To embed an image into a web page, the image first needs to exist in either .jpg, .gif, or .png format. You can create images in an image editor (such as Adobe Photoshop) and save them in the correct format.
Once you've created an image, you need to embed it into your web page. To embed the image into your web page, use the <img /> tag, specifying the actual location of the image.
Example of Image Usage
HTML Code:
<img src="http://mp3down.wap.sh/files/images%202_1.jpg" width="100" height="100" alt="Mp3down"/>
This results in: The img above contains a number of attributes. These attributes tell the browser all about the image and how to display it. Here's an explanation of these attributes:
src Required attribute. This is the path to the image. It can be either an absolute path, or a relative path (remember these terms from our last lesson?)
width Optional attribute (but recommended). This specifies the width to display the image. If the actual image is wider, it will shrink to the dimensions you specify here. Likewise, if the actual image is smaller it will expand to your dimensions. I don't recommend specifying a different size for the image, as it will lose quality. It's better to make sure the image is the correct size to start with.
height Optional attribute (but recommended). This specifies the height to display the image. This attribute works similar to the width.
alt Alternate text. This specifies text to be used in case the browser/user agent can't render the image.
Image Alignment
You can determine how your images will be aligned, relative to the other content on the page (such as a paragraph of text). You do this using the align attribute.
HTML Code:
<p><img src="http://mp3down.wap.sh/files/images%202_1.jpg" width="100" height="100" alt="Smile" align="right"/>
Here is a paragraph of text to demonstrate HTML images and how
they can be aligned to the right of a paragraph (or paragraphs)
if you so desire.</p></p>This can be used to produce
some nice layout effects, especially if you have a lot of text,
and it runs right past the image.</p><p> Otherwise,
the image will just hang below the text and may look Music.</p>
Here is a paragraph of text to demonstrate HTML images and how
they can be aligned to the right of a paragraph (or paragraphs)
if you so desire.
This can be used to produce
some nice layout effects, especially if you have a lot of text,
and it runs right past the image.
Otherwise,
the image will just hang below the text and may look Music.
Image Links
You can make your images "clickable" so that when a user clicks the image, it opens another URL. You do this by simply wrapping the image with hyperlink code.
HTML Code:
<a href="http://www.mp3down.wap.sh"><img src="http://mp3down.wap.sh/files/images%202_1.jpg" width="100" height="100" alt="Mp3down" /></a>
This results in: Html Meta Tag Meta tags allow you to provide metadata about your HTML pages. This can be very useful for search engines and can assist the "findability" of the information on your website.
What is Metadata?
Metadata is information about, or that describes, other data or information.
If we relate this to a web page, if you think about it for a moment, you could probably come up with a lot more information about a web page than what you're actually displaying to the reader. For example, there could be a number of keywords that are related to the page. You could probably give the page a description. The page also has an author - right? All these could be examples of metadata.
Metadata on the Web
Metadata is a very important part of the web. It can assist search engines in finding the best match when a user performs a search. Search engines will often look at any metadata attached to a page - especially keywords - and rank it higher than another page with less relevant metadata, or with no metadata at all.
Adding Meta Tags to Your Documents
You can add metadata to your web pages by placing <meta> tags between the <head> and </head> tags. The can include the following attributes:
Attribute Description
Name Name for the property. Can be anything. Examples include, keywords, description, author, revised, generator etc.
content Specifies the property's value.
scheme Specifies a scheme to use to interpret the property's value (as declared in the content attribute).
http-equiv Used for http response message headers. For example http-equiv can be used to refresh the page or to set a cookie. Values include content-type, expires, refresh and set-cookie.
Example HTML Code:
Keywords:
<meta name="keywords" content="HTML, meta tags, metadata" />
Description:
<meta name="description" content="Contains info about meta tags" />
Revision date (last time the document was updated):
<meta name="revised" content="Mp3down, 6/12/2002" />
Refresh the page every 10 seconds:
<meta http-equiv="refresh" content="10" />
The above examples are some of the more common uses for the meta tag.
[1][2][3][4]
Mp3DowN