Basics of HTML

  1. Terms and Definitions
  2. Principles of WEB 2.0
  3. The structure of the HTML-document
  4. Main metatags
  5. Formatting Text HTML
  6. Lists html-page
  7. Text fixed format
  8. Selected text html-page
  9. Change font options
  10. Graphics html-page
  11. Tables html-page
  12. Hyperlinks
  13. IMAGEMAP
  14. Frames

CSS-based

  1. What is CSS
  2. CSS syntax
  3. Style classes
  4. Combined styles
  5. CSS table
  6. CSS cascading rules
  7. Recommendations applying styles
  8. Font options
  9. Line breaks, vertical alignment
  10. Background settings
  11. Parameters of the paragraph
  12. List options
  13. The parameters of the cursor
  14. Options indentation
  15. Parameters frame
  16. Parameters selection
  17. Display options
  18. Containers


   

Graphics html-page

To work with graphics in HTML tag used IMG .

Now there are many different formats for storing graphics files. The HTML format used by the three.

Format GIF (Graphics Interchange Format) - developed in 1987, is considered obsolete, but is still quite widely used. The main advantage of the format GIF - the ability to store an animated image, which is not found in any other graphics format. The GIF format allows you to create the image "transparent" color. Places in the picture that painted a "transparent" color are the "holes" through which the background is visible. The GIF format is great for storing images, creates barcode - maps, charts, pencil drawing. The main drawback of the format GIF - unsuitable for storage of halftone images. Reason - GIF-images can contain a maximum of 256 colors, so when compressing halftone image quality it would be much worse.

Format JPEG (Joint Photographic Experts Group) - was developed in 1993. The JPEG format was developed specifically for the storage of halftone images. The JPEG format does not support "transparent" color and animation.

Format PNG (Portable Network Graphics) - developed in 1996. The format combines the advantages of PNG formats GIF, JPEG - it's great for storage as the line images and halftone images, also supports "transparent" color. Lack format PNG - it does not give the opportunity to keep an animated image.

File Format GIF, PNG have similar file extension - .gif, .png. Format JPEG - .jpg, .jpeg, .jpe.

The main difference between the text of html-pages of the graphic is that the text is located directly in the body of html-pages, and the image is stored separately from html-pages and inserted into her body with the help of tag IMG.

EXAMPLE:

<p>1. <img src="image1.png"></p>
<p>2. <img src="images/image2.png"></p>
<p>3. <img src="http://othersite.com/img/image3.png"></p>

See an example of the browser..

It refers to the IMG tag integrated elements, and can not exist "by itself" - IMG tag must be part of a block element, for example, paragraph (P tag).

The attributes of the IMG tag

EXAMPLE:

<p>1. 
<img src="images/1.png" align="left" border="2" hspace="10">
Lorem ipsum dolor ...
</p>
<br clear="left">
<p>2. 
<img src="images/2.png" align="middle" alt="img" title="image">
Lorem ipsum dolor ...
</p>
<br clear="all">
<p>3. 
<img src="images/3.png" alt="" width="300" height="300" border="1" align="right">
Lorem ipsum dolor ...
</p>

See an example of the browser..

We must remember that, the more the image, the longer it is loaded into the browser, slowing down the whole load html-pages. Therefore, large images should be optimized to minimize its "weight", but while maintaining an acceptable quality.


TOP ↑