images and links
referencesStock.XCHNG - free stock photography
FreeFoto - free pictures
Images, cliparts, templates, etc.
a useful toolOne of the ways to learn html is to study what others have written. Did you know that you can see the html code behind any webpage that you're looking at?
If you use Firefox, look in the Menu --> View -->Page Source
In Internet Explorer, in the Menu --> View -->Source
When you see a page that you like and you wonder how they did that, maybe the page source will help. Unfortunately it won't show you the stylesheet that sets the layout but it can be interesting for all the rest of the code.
navigationAs in all other applications, you must master the file structure to know where to store and recover the objects that you will use regularly.
The file structure on your server, as well as on your local computer, might look something like this:
If I'm working with index.html and I want to insert a picture from folder "images" I have to write the command as:
<img src="images/web37html31.jpg" ...
Since index.html is in "root", I have to go down to "images" to get the .jpg file.
If I'm in a .html in another folder, such as "membres", I have to go back up to "root" then go down into "images" like this:
<img src="../images/web37html31.jpg" ...
using picturesPictures are absolutely essential to the design of your website. Pictures are used to convey ideas, to draw attention to particular sections and to break-up text sections that are too long and boring.
To insert an image in a page, use the <img /> tag, like:
Note that there is no </ img> tag.
The attributes of img are:
- src=" " source of the image; may be a local folder or a URL;
- width=" " and height=" " the size of the image, in pixels; these attributes are not compulsory but they may help to load the page faster since the browser does not have to wait to see the whole image before continuing to display text;
- border=" " displays a border - that should be done by the stylesheet;
- alt=" " important for accessibility - it's what is said when the page is converted to voice, for a blind person. There's another attribute, longdesc=" " which might contain the URL of a complete document to describe the image;
- title=" " the description presented on mouseover and an important aspect of SEO because the words contained in title are indexed by Google and may increase traffic.
image formatsAll images must be in a compressed format: jpeg, gif or png. Never use the bitmap format (.bmp) because it's way too big!
- .gif - use when the image is text or solid colors, without gradients, like cliparts - supports animation and transparency - may be interlaced which makes it faster to load but is bigger.
- .jpeg - used for photos, when there are many color gradients - up to 16 million colors - cannot do animation - progressive jpeg is like an interlaced gif.
- .png - like a .gif, with more colors - no animation - avoids certain licencing problems that may arise when using .gif or .jpeg.
If you use a digital camera to take pictures for the website, they will certainly have to be resized. The picture in your camera may be 3700 X 2600, which is way too big to display. The only reason to keep a high-resolution image is for printing, where resolution is essential. To display the image it does not matter.
creating linksThe Web site consists of a series of pages tied together by links, called anchors in html. The links connect to paragraphs in the same page, other pages in the same website or other websites altogether.
To link to an outside website, we use the anchor tag:
<a href= "URL ">link text</a>
<a href="http://www.profsr.com" target="_blank">Free tutorials</a>
The attributes of the <a ...> tag are:
- href=" " the URL of the linked website
- target=" ": will open the target site in a new window (IE) or in a new tab (Firefox and Chrome).
- link text: description of the target site; Google uses it to rate the importance of the link.
internal linksTo link to a point inside the page, you must first create an anchor at the point we want to go to:
This would be inserted at the top of the page, after the <body> tag.
To use it we write: <a href="#top">Top</a>
This works as you see below.