HTML and CSS Image and Link

HTML Images Syntax

<img src="url" alt="some_text">

HTML Images Size

 <img src="image.jpg" alt="image" width="128" height="128">

CSS Image Size

 <img src="image.jpg" alt="image" style="width:128px;height:128px;">

CSS Image Floating

<p>

     <img src="image.jpg" alt="image"    

     style="float:right">

     The image will float to the right of the

      text.

</p>

HTML Links

<a href="url">link text</a>

 HTML Links with “target_ ” attribute

<a href="http://www.pelangikasih.or.id/" target="_blank">Visit Pelangi Kasih</a>

Target Value	Description
_blank	Opens the linked document in a new window or tab
_self	Opens the linked document in the same frame as it was clicked (this is default)

CSS Links

The four links states are:

    a:link - a normal, unvisited link

    a:visited - a link the user has visited

    a:hover - a link when the user mouses over it

    a:active - a link the moment it is cl<style>

Syntax Example

/* unvisited link */

a:link {

    color: red;

}

/* visited link */

a:visited {

    color: green;

}

/* mouse over link */

a:hover {

    color: hotpink;

}

/* selected link */

a:active {

    color: blue;

}

CSS PADDING

Property	Description
Padding	A shorthand property for setting all the padding properties in one declaration
Padding-bottom	Sets the bottom padding of an element
Padding-left	Sets the left padding of an element
Padding-right	Sets the right padding of an element
Padding-top	Sets the top padding of an element

CSS Padding Example:

p {
     padding-top: 25px;
     padding-right: 50px;
     padding-bottom: 25px;
     padding-left: 50px;
}