HTML Images

The <img> tag is used to define HTML images. Images are used to improve the design and the appearance of a web page.

HTML Images Syntax

<img src=”image-url”>

The src attribute specifies the URL of the image.

HTML Images Example

<img src=”my_image.jpg”>

The alt Attribute

The alt attribute provides an alternate text for an image, if the user for some reason cannot view it. The text should be a short description of the image.

<img src=”my_image.jpg” alt=”Profile Image”>

Image Sizes

The width and height attributes are used to define the image size. Also the style attribute can be used to specify the width and height of an image.

<img src=”my_image.jpg” alt=”Profile Image” width=”500″ height=”500″>
<img src=”my_image.jpg” alt=”Profile Image” style=”width:500px;height:500px;”>

Image as a Link

Images can be used as links. To use an image as a link, put the <img> tag inside the <a> tag.

<a href=”http://www.tutorialsgenie.com/scripting/html-tutorial/”>
<img src=”html-img.jpg” alt=”HTML tutorial” style=”width:50px;height:50px;border:0;”>
</a>

HTML Hyperlinks

HTML Hyperlinks allow users to click their way from page to page. You can click on a link and jump to another document.

HTML Hyperlinks Syntax

HTML <a> tag is used to define hyperlinks.

<a href=”target-url”>link text</a>

The href attribute specifies the destination address and the link text is the visible part.

HTML Hyperlinks Example

<a href=”http://www.tutorialsgenie.com/scripting/html-tutorial/”>HTML Tutorial</a>

Hyperlink Colors

You can set different colors for each state of the link. By default an unvisited link is underlined and blue, a visited link is underlined and purple and an active link is underlined and red.

Hyperlink Colors Example

a:link {
color: blue;
text-decoration: none;
}
a:visited {
color: pink;
text-decoration: none;
}
a:hover {
color: red;
text-decoration: underline;
}
a:active {
color: yellow;
text-decoration: underline;
}

Hyperlinks target Attribute

The target attribute specifies where to open the linked document which can be one of followings.
_blank – Opens the document in a new window or tab
_self – Opens the document in the same window/tab as it was clicked (this is default)
_parent – Opens the document in the parent frame
_top – Opens the document in the full body of the window

The target Attribute Example

<a href=”http://www.tutorialsgenie.com/scripting/html-tutorial/” target=”_blank”>Html Tutorial</a>

Hyperlink title Attribute

The title attribute specifies extra information about an element which is shown as a tooltip text when the mouse moves over the element.

Hyperlink title Attribute Example

<a href=”http://www.tutorialsgenie.com/scripting/html-tutorial/” title=”HTML tutorial for beginners”>Html Tutorial</a>

CSS background-color Property

The CSS background-color property is used to set the background color of an element. The background of an element is the total size of the element, including padding and border, excluding the margin.

CSS background-color Example

body {background-color: khaki;}

Set background color with a HEX value

body {background-color: #FFDAB9;}

Set background color with an RGB value

body {background-color: rgb(255,218,185);}

CSS background-image Property

The css background-image property is used to set one or more background images for an element. By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally. The background of an element is the total size of the element, including padding and border excluding the margin. It can be used with background-color property which will be used if the image is unavailable.

CSS background-image Example

body {
background-image: url(“background_img.gif”);
background-color: #f0f0f0;
}

Multiple Background Images

You can set multiple background images for an element using following syntax.

background-image: url(“background_img.gif”), url(“background_img2.gif”);

CSS Classes

You may be wondering if it is possible to give an HTML element multiple looks with CSS. Say for example that sometimes you want the font to be large and white, while other times you would prefer the font to be small and black. CSS would not be very useful if it did not allow you to have many different types of formats for a single HTML tag. Well, you are in luck! CSS allows you to do just that with the use of classes.

Using CSS Classes

Using classes is simple. You just need to add an extension to the typical CSS code and make sure you specify this extension in your HTML. Let’s try this with an example of making two paragraphs that behave differently. First, we begin with the CSS code, note the red text.

CSS Classes Example

CSS Code:

p.one{ color: blue; }
p.two{ color: red; }

HTML Code:

<p>This is a normal paragraph.</p>

<p class=”one”>This is a paragraph that uses the p.first CSS code!</p>
<p class=”tow”>This is a paragraph that uses the p.second CSS code!</p>

You can use CSS classes with any HTML element. if we had already defined a value for the default <p> tag, the CSS class for any <p> tag will override the default <p> CSS. If the CSS class uses a CSS attribute already defined by the default CSS, then the formatting defined by the class will be the value that is used.

It may be easier to imagine that the CSS for a generic HTML element is the starting point and the only way to change that look is to overwrite the attributes using CSS classes.

CSS Code:

p{ color: red; font-size: 20px; }
p.test1{ color: blue; }
p.test2{ font-size: 12px; }

HTML Code:

<p>This is a normal paragraph.</p>
<p class=”test1″>This is a paragraph that uses the p.test1 CSS code!</p>
<p class=”test2″>This is a paragraph that uses the p.test2 CSS code!</p>