HTML Hypertext Markup Language IMAGES Formats of the

IMAGES Formats of the files for images There are two main formats for the

Disposal the image on the page Centering the image <div align="center"> <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src="roses. gif"

Attributes of the image tag • Attributes width and height assign respectively width and

• The attribute border assign a border around the image in pixels example:

Alignment of an image towards text Some text. <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src=" roses. gif" width="150" height="112"

align = right • Other values of attribute align="top" align="middle" align="bottom" • Attributes hspace

Using image for hyperlink <a href="http: //www. dir. bg"><img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src="roses. gif" width="150" height="112" alt="Image

Colors in HTML • Background of the text and page <font color="blue">This is blue

Browsers shows the colors combining different values of 3 main colors: Red, Green and

Assigning black color of the text: <font color="#000000"> black color of the text </font>

Slides: 12

Download presentation

HTML (Hypertext Markup Language )

IMAGES Formats of the files for images There are two main formats for the images’ files: gif and jpeg (jpg) Showing the image in HTML-page <img src=“name of the image"> Example : <img src="roses. gif">

Disposal the image on the page Centering the image <div align="center"> <img src="roses. gif" /> </div> Effect:

Attributes of the image tag • Attributes width and height assign respectively width and height of the image in pixels. • The attribute alt assign alternative name of the image Combining the above attributes it follows: <img src="roses. gif" width="150" height="112" alt="Image roses" />

• The attribute border assign a border around the image in pixels example: <img src=" roses. gif" border="8" /> The effect in the browser is:

Alignment of an image towards text Some text. <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src=" roses. gif" width="150" height="112"

Alignment of an image towards text Some text. <img src=" roses. gif" width="150" height="112" alt="Image roses" align="left" /> Примерен текст. Примерен текст.

align = right • Other values of attribute align="top" align="middle" align="bottom" • Attributes hspace and vspace <img src="roses. gif" width="150" height="112" alt="Image roses" align="left" vspace="10" hspace="80" />

Using image for hyperlink <a href="http: //www. dir. bg"><img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="roses. gif" width="150" height="112" alt="Image

Using image for hyperlink <a href="http: //www. dir. bg"><img src="roses. gif" width="150" height="112" alt="Image roses"></a> Removing the border around the image <a href="http: //www. dir. bg " target="_blank"><img src=“roses. gif" width="150" height="112" alt="Image roses" border="0"></a>

Colors in HTML • Background of the text and page <font color="blue">This is blue text</font> <body bgcolor="yellow"> (Assign yellow color of the background) Using hexadecimal numerical system In HTML colors are given using 16 code 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, A, B, C, D, E, F

Browsers shows the colors combining different values of 3 main colors: Red, Green and Blue. This is so called RGB standard. Each color is coded by values from 00 to FF (255) color Decimal code Hexadecimal code HTML-code white R: 255, G: 255, B: 255 R: FF, G: FF, B: FF #FFFFFF black R: 0, G: 0, B: 0 R: 00, G: 00, B: 00 #000000 The rest colors are some combination of these values.

Assigning black color of the text: <font color="#000000"> black color of the text </font> Assigning white color of the page background and black color of the text in BODY tag is : <body bgcolor="#ffffff" text="#000000"> Codes of some basic colors and their English terms: Color 16 -code RGB code English term #000000 R: 0, G: 0, B: 0 black #ffffff R: 255, G: 255, B: 255 white #ffff 00 R: 255, G: 255, B: 0 yellow #ff 0000 R: 255, G: 0, B: 0 red #00 ff 00 R: 0, G: 255, B: 0 green #0000 ff R: 0, G: 0, B: 255 blue