HTML Links

HTML Links – Colours

When you move the mouse over a link, two things will normally happen:

  • The mouse arrow will turn into a little hand
  • The colour of the link element will change

By default, a link will appear like this (in all browsers):

  • An unvisited link is underlined and blue
  • A visited link is underlined and purple
  • An active link is underlined and red

You can change the default colours, by using styles:

Remove Mouse on HTML Images, After Pic

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {

Mouse Stable on HTML Images, After Pic

color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>
</head>
<body>
<p>You can change the default colors of links</p>
<a href=”html_images.asp” target=”_blank”>HTML Images</a>
</body>
</html>

  • Links are found in nearly all web pages and links allow users to click there way from page to page
  • Html links are hyper links. A hyper links is a text or an image you can click on, and jump to another document.

In html links are define with the <a> tag (a mean ankle tage)

<a href=”www.apctips.com”> My Website</a>


Attribute of ankle tag:

  1. Target=”blank”
    Blank: open the link document in new tag
  1. Target=”self”
    Self: open the link document in some tab
  1. Target=”parent”
    Parent: open the link document in parent frame.
  1. Target=”top”
    Top: open the link document in the full body of the windows.


    HTML Images

    Animated Images
    The GIF standard allows animated images:

 

 

 

<!DOCTYPE html>
<html>
<body>
<p>The GIF standard allows moving images.</p>
<img src=”apctips.gif” alt=”Computer man” style=”width:48px;height:48px;”>
</body>
</html>

Using an Image as a Link
To use an image as a link, simply nest the <img> tag inside the <a> tag:

 

 

<!DOCTYPE html>
<html>
<body>
<p>The image is a link. You can click on it.</p>
<a href=”default.asp”>
<img src=”smiley.gif” alt=”HTML tutorial” style=”width:42px;height:42px;border:0;”>
</a>
<p>Add “border:0;” displaying a border around the image.</p>
</body>
</html>

Image Floating
Use the CSS float property to let the image float.
The image can float to the right or to the left of a text:

<!DOCTYPE html>
<html>
<body>
<p><strong>Float the image to the right:</strong></p>
<p>
<img src=”smiley.gif” alt=”Smiley face” style=”float:right;width:42px;height:42px;”>
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.
</p>
<p><strong>Float the image to the left:</strong></p>
<p>
<img src=”smiley.gif” alt=”Smiley face” style=”float:left;width:42px;height:42px;”>
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.
</p>
<p>Please use the CSS float property. The align attribute is deprecated in HTML 4, and not supported in HTML5.</p>
</body>
</html>

HTML Classes

Classing Block Elements
The HTML class attribute makes it possible to define equal styles for “equal” <div> elements:

<!DOCTYPE html>
<html>
<head>
<style>
div.name {
background-color:black;
color:white;
margin:20px;
padding:20px;
}
</style>
</head>
<body>
<div class=”name”>
<h2>Ankit</h2>
<p>Prince</p>
</div>
<div class=”name”>
<h2>Ankit Kumar</h2>
<p>Prince Kumar.</p>
</div>
<div class=”name”>
<h2>HP</h2>
<p>Hewlett-Packard</p>
</div>
</body>
</html>

Website Layout Using HTML5

HTML5 offers new semantic elements that define different parts of a web page:

  • <header> – Defines a header for a document or a section
  • <nav> – Defines a container for navigation links
  • <section> – Defines a section in a document
  • <article> – Defines an independent self-contained article
  • <aside> – Defines content aside from the content (like a sidebar)
  • <footer> – Defines a footer for a document or a section
  • <details> – Defines additional details
  • <summary> – Defines a heading for the <details> element

  • This example uses <header>, <nav>, <section>, and <footer> to create a multiple column layout:

    HTML Layout Using Tables
    The <table> element was not designed to be a layout tool.
    The purpose of the <table> element is to display tabular data.

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    table.lamp {
    width:100%;
    border:1px solid #d4d4d4;
    }
    table.lamp th, td {
    padding:10px;
    }
    table.lamp th {
    width:40px;
    }
    </style>
    </head>
    <body>
    <table class=”lamp”>
    <tr>
    <th>
    <img src=”file:///C:/APCTips.jpg” alt=”Note” style=”height:32px;width:32px”>
    </th>
    <td>
    The table element was not designed to be a layout tool.
    </td>
    </tr>
    </table>
    </body>
    </html>

LEAVE A REPLY

Please enter your comment!
Please enter your name here