HTML and CSS

  Links

Creating links between pages

Relative URLs – Relative to the present directory

<a href = “../index.html” > relative URL index </a>

When you refer a folder, the index.html is listed.

In some servers when index.html is not present, then the directory content is listed

E-mail links:    

<a href=”mailto:john@sample.com” > Click here to mail john </a>

Opening links in new window: 

<a href=www.google.com target="_blank"> Open Google </a>

Linking to a specific part in same page:

Provide ID to the heading tag
For example: <h1 ID = "Aerospace"> Aerospace </h1>
When you refer in anchor tag: <a href="#Aerospace"> About Aerospace </a>
How about linking to specific part in another page:
<a href="htmlbooks.com/#bottom> HTML and CSS section </a>.
Now, bottom is the ID tag available in the web page.


Images

> How to add Images to web page?
 You can use the background-image property of the CSS to add
 You can use the <IMG> tag to add images
 <IMG src="ratsand bats.jpg" title="About Rats and Bats" alt="This image details the behaviour of rats and bats in night"  />

> Where to place the image in your web page?
  1. Before the paragraph
  2. Inside the start of the paragraph
  3. In the middle of the paragraph

<p>
   <IMG src="images/bird.gif" align = "left" />
   There are around 10,000 birds living in this area that has inhibited the ecosystems in different space.
</p>

<hr />

<p>
   <IMG src="images/bird.gif" align = "right" />
   There are around 10,000 birds living in this area that has inhibited the ecosystems in different space.
</p>


> 3 Rules of image
  1. Save image in right format.
          Images involving many colours - JPEG
          Iconic images - GIFF or PNG
  2. Save images in right format (PNG, GIFF, JPEG)
  3. Use the correct resolution

> How do I optimise the images for best view on my web page?