Lesson 2

Images

Picture is worth a thousand words! So let’s bring one to our webpage.

This might look somewhat familiar, now that you know the anchor tag (<a>). Similarly here we’re adding an attribute and passing it a path. This time it is a path to an image. The attribute is called src – which stands for “source” – source of our file. As long as our path is correct, the above img tag will render an image of a cake.

Now that we’re done with the basics of rendering images on web pages, let’s do some housekeeping.

It is perfectly valid to keep all your files in root (main) folder, but – as you would probably do in your personal documents – it is a good practice to group your files in folders. So we will put all our image files into a separate folder – the foto folder.

folders-tree

So, now that we have all images in the foto folder, we need to update our path:

All the people who will visit our web page will now be able to see a great picture of a cake there. But what about the robots? What will they see?

Web pages are not being visited only by humans. Sometimes they need to be read by screen readers. A screen reader is a piece of software for a blind or visually impaired people for reading out loud all the content of web pages. It is easy for the machine to read text, but images are still most often impossible to be interpreted as anything meaningful without a super sophisticated shape recognition software. That’s why it is very important to help those machines by giving our images a meaningful description in a form of an alt tag:

alt stands for alternative text. It is not only being used by screen readers – many of the major search engines also use alt tags for indexing images in search results for graphics.

In fact it is so important to add alt tags to images, that your web page will not validate if it’s missing (we’ll talk about markup validation later). In other words – you should always add alt tags to all your images.

CSS

Now that we have text and images displaying on our page, lets shape a bit the way they look. On the web whenever we want to change the way something looks, we need to use CSS.

CSS (Cascading Style Sheets – we’ll talk about what it means later) is a very powerful language, that tells the browser how we want the HTML on our page to look like.

Basic CSS syntax is very simple. It is made of key value pairs and often look like plain English. Important thing to remember is that between key and value we put colon (:) and after each declaration we put semicolon (;).

There are three standard ways we can apply CSS styles to our markup:

1) Inline Styles

Inline styles apply only to the element they’ve been added to. We set inline styles by adding style attribute to given tag.

0

2) Embed styles

Very often we want to have the same styles for the same elements across the page – i.e. to make all h2 tags red and bold. Making it with inline styles would mean we need to add style attribute to every single h2 tag on page. And later if we would like to change colour from red to green – we would need to update them all.

Better approach to this is using embeded styles (sometimes also called internal stylesheet). We do it by placing a <style> block above the markup (best to place it in <head>) and writing CSS rules within it. To tell the browser what element we want to style, we use selectors. In our case we want to style all h2 tags on page – h2 is our selector. We place all CSS rules for it within {}.

0

3) External stylesheets

Thanks to embeded styles we don’t need to repeat inline styles for every h2 or p or other tag we want to target. However, we would still need to repeat <style> block with all our CSS rules on every page of our website. This is where external stylesheets come to rescue!

In today’s professional websites we put at least a vast majority of our CSS rules in an external file and link to it from the <head> of our html pages.

Styleshet files use .css extension. We will call our stylesheet styles.css

adding styles.css

Inside .css files we do not need <style> tags – we can write pure CSS.

To link html document to a stylesheet we use a <link> tag.

***

CSS properties to play with now

If you wish to explore more CSS properties, visit:

http://www.w3schools.com/cssref/

« Lesson 1 Index Lesson 3 »