IMAGES

Storing images in your web site :

If you are building a site from scratch, it is good practice to create a folder for all of the images the site uses.

On a big site you might like to add subfolders inside the images folder. For example, images such as logos and buttons might sit in a folder called interface, product photographs might sit in a page called products, and images related to news might live in a folder called news.

Three result for creating images :

• Save images in the right format : Websites mainly use images in jpeg, gif, or png format. If you choose the wrong image\ format then your image might not look as sharp as it should\ and can make the web page slower to load.

• Save images at the right size : You should save the image at the same width and height it will appear on the website. If the image is smaller than the width or height that you have specified, the image can be distorted and stretched. If the image is larger than the width and height if you have specified, the image will take longer to display on the page.

• Use the correct resolution: Computer screens are made up of dots known as pixels. Images used on the web are also made up of tiny dots. Resolution refers to the number of dots per inch, and most computer screens only show web pages at 72 pixels per inch. So saving images at a higher resolution results in images that are larger than necessary and take longer to download.

COLOR

Color can be show by :

• RGB Values: rgb(102,205,170);

• Hex Codes :#66cdaa ;

• Color Names: Red , Blue… ;

  

Text

Size of Type:

Pixels: Pixels are commonly used because they allow web designers very precise control over how much space their text takes up. The number of pixels is followed by the letters px.

Percentages: The default size of text in browsers is 16px. So a size of 75% would be the equivalent of 12px, and 200% would be 32px.

Ems An em is equivalent to the width of a letter m.

Upper Case & Lower Case :

• uppercase : This causes the text to appear uppercase.

• lowercase : This causes the text to appear lowercase

• capitalize: This causes the first letter of each word to appear capitalized.

  

  Responding to Users:

• Hover :This is applied when a user hovers over an element with a pointing device such as a mouse.

• Active: This is applied when an element is being activated by a user

• Focus: This is applied when an element has focus. Any element that you can interact with, such as a link you can click on or any form control can have focus.

Done by : Omar Al-Zoubi GitHub