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;
}

Tidak ada komentar:

Posting Komentar