reading-notes

View project on GitHub

Images: did you know that you can add images to your website ? you must learn how to inseret an image to your page to attractive users when you add images you should be carefull about Property rights. there are companies who sell stock images; these are images you pay to use (there is a list of stock photography websites below). Stock photos:

  • www.istockphoto.com
  • www.gettyimages.com
  • www.veer.com
  • www.sxc.hu
  • www.fotolia.com we can use these sites so let us leave it here .. If you are building a site from scratch, it is good practice to create a folder for all of the images the site uses, you should store it on your computer . how adding images? to add an image into the page you need to use an element It must carry the ,following two attributes: src: This tells the browser where it can find the image file. This will usually be a relative URL pointing to an image . alt : to descripe text of image .

you can control of width and height ,by adding the height and width to the <img src “” height=”” width”” > height: is this specifies the height of the image in pixels. width: is this specifies the width of the image in pixels. so where you gonna put the image is really matter ,you can put it before a paragraph ,inside the start of a paragraph or in the middle of a paragraph. we can use elign element to indicate how the other parts of a page should flow around an image it can be on left or right on the top , middle or bottom. and you added it to the code <img src “” elign=>.

Three rules for creating images:

  • Save images in the right format.
  • Save images at the right size.
  • Use the correct resolution. you can insert animated gifs to your page ,animated GIFs show several frames of an image in sequence and therefore can be used to create simple animations.

color: colors will bring life to your page , Foreground color; The color property allows you to specify the color of text inside an element. Background-color;You can specify your choice of background color,by default, most browser windows have a white background.

  • every color on a computer screen is created by mixing amounts of red, green, and blue. To find the color you want, you can use a color picker.
  • The color of every pixel on the screen is expressed in terms of a mix of red, green, and blue . Contrast, when picking foreground and background colors, it is important to ensure that there is enough contrast for the text to be legible.
  • low contrast :text is harder to read when there is low contrast between background and foreground colors.
  • High contrast : Text is easier to read when there is higher contrast between background and foreground colors. -Medium contrast: For long spans of text, reducing the contrast a little bit improves readability.

. CSS 3: opacity opacity, rgba ; the CSS3 rgba property allows you to specify a color.

hsl color ,introduces an entirely new and intuitive way to specify colors using hue, saturation, and lightness values. hue: hue is the colloquial idea of color. In HSL colors, hue is often represented as a color circle where the angle represents the color. saturation :saturation is the amount of gray in a color, is a shade of gray. ligh tness; Lightness is the amount of white (lightness) or black (darkness) in a color.

Text: you know that you can control the size ,color or type of the text . type of fonts: Serif fonts have extra details on the ends of the main strokes of the letter. Sans-serif fonts have straight ends to letters, and therefore have a much cleaner design. monospace ; Every letter in a monospace (or fixed-width) font is the same width. When choosing a typeface, it is important to understand that a browser will usually only display it if it’s installed on that user’s computer. There are several ways to use fonts other than those listed on the previous page. font-family;The font-family propertyallows you to specify the typeface that should be used for any text inside the element(s) to which a CSS rule applies. Fontface: CSS specifies where a font can be downloaded from if it is not installed on the computer. Service-based font-face; Commercial services give users access to a wider range of fonts using @ font-face.

  • font size : The font-size property enables you to specify a size for the font, you can specify size by using ; pixels,percentages. The font-weight property allows you to create bold text. There are two values that this property commonly takes: normal, bold . font style; normal,this causes text to appear in a normal style (as opposed to italic or oblique). italic; This causes text to appear italic. oblique; This causes text to appear oblique.