Code 201 Class 11 Reading Notes

Images

Controlling the size and alignment of your images using CSS keeps rules that affect the presentation of your page in the CSS and out of the HTML markup.

You can control the size of an image using the width and height properties in CSS, just like you can for any other box.

You can group all the images to fit basic sizes on your site by doing the following:

img.large {
  width: 500px;
  height: 500px;}
img.medium {
  width: 250px;
  height: 250;}
img.small {
  width: 100px;
  height: 100px;}

The same thing can be applied to float:

img.align-left {
  float: left;
  margin-right: 10px}
}

By default, images are inline elements. This means that they flow with the surrounding text. In order to center an image, it should be turned int o ablock level element using the display property with a value of block.

There are two commmon ways in which you can horizontally center an image.

1) One the contataining elemnt, you can use the text-align property with a value of center.

2) On the image itself, you can use the margin property and set the values of the left and right margins to auto.

Practical Information

Search Engine Optimization (SEO)

SEO is ahuge topic and several books have been written on the subject. The follwoing pages will help you undersetand the key consepts so you can improve your website’s visibility on search engines.

On-Page SEO

IN every page of your website there are seven key places where keywords (the words people might search on to find your site) can appear in order to improve its findability.

1) PAGE TITLE

2) URL/WEB ADDRESS

3) HEADINGS

4) TEXT

5) LINK TEXT

6) IMAGE ALT TEXT

7) PAGE DESCRIPTIONS

<—BACK