1 / 36

HTML Overview

HTML Overview. Part 5 – Adding Images. Types of Images. Image files added to HTML documents should be in one of the following formats: GIF – Graphics Interchange Format . Limited to 256 colors. Best used for logos and clip art.

portia-mccormick
Download Presentation

HTML Overview

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML Overview Part 5 – Adding Images

  2. Types of Images • Image files added to HTML documents should be in one of the following formats: • GIF – Graphics Interchange Format. Limited to 256 colors. Best used for logos and clip art. • JPG – Joint Photographic Experts Group. Supports millions of colors. Bets used for photographs. • PNG – Portable Network Graphics. New image format supported only by newer browsers.

  3. Defining an Image • In HTML, images are defined with the <img /> tag.  • The <img />tag is empty – it contains attributes only, and has no closing tag. • To display an image on a page, you need to use the src=“value”attribute. • The value of the src attribute is the URL of the image you want to display. • Syntax for defining an image: <imgsrc="url“ alt=“text”/>

  4. Image Attributes • Attributes of the <img/> tag include: • border=“value” – specifies the size of the border around the image in pixels • alt=“value” – specifies alternate text that will display on the web page if the image does not load, The value of the altattribute is text. • height=“value” – specifies the height of the image in pixels • width=“value” – specifies the width of the image in pixels

  5. The browser displays the image where the <img/>tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, then the second paragraph. • A typical image is specified as follows: <imgsrc="pulpit.jpg" alt="Pulpit rock" width="304" height="228" /> The tag

  6. The browser displays the image where the <img> tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, then the second paragraph. • A typical image is specified as follows: <imgsrc="pulpit.jpg" alt="Pulpit rock" width="304" height="228" /> The source attribute – defines the URL of the image.

  7. The browser displays the image where the <img> tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, then the second paragraph. • A typical image is specified as follows: <imgsrc="pulpit.jpg" alt="Pulpit rock" width="304" height="228" /> The alt attribute – defines alternative text to display if the image does not load

  8. The browser displays the image where the <img> tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, then the second paragraph. • A typical image is specified as follows: <imgsrc="pulpit.jpg" alt="Pulpit rock" width="304" height="228" /> The width attribute – defines the width of the image in pixels

  9. The browser displays the image where the <img> tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, then the second paragraph. • A typical image is specified as follows: <imgsrc="pulpit.jpg" alt="Pulpit rock" width="304" height="228" /> The height attribute – defines the height of the image in pixels

  10. HTML Links Tags

  11. Assignment Work through the W3Schools HTML images tutorial http://www.w3schools.com/html/html_images.asp

  12. HTML Overview Part 5 - Comments

  13. Formatting Comments • Comments can be inserted into the HTML code to make it more readable and understandable. • Comments are ignored by the browser and are not displayed. • Comments are written like this: <!-- This is a comment --> Note: There is an exclamation point after the opening bracket, but not before the closing bracket.

  14. Comment Example <html> <body> <!--This comment will not be displayed--> <p>This is a regular paragraph</p> </body> </html>

  15. HTML Comment Tags

  16. HTML Overview Part 5 –Style Sheets

  17. What are Cascading Style Sheets? • CSS was introduced together with HTML 4, to provide a better way to style HTML elements. • CSS can be added to HTML in three ways: • A linked style sheet which is stored in separate style sheet files (CSS files) that contain style rules only • Embedded style sheet defined in paired tags in the head section of the HTML document. • In the style attribute in single HTML elements

  18. Style Sheet Rules • Style sheets can include rules and classes. • A style sheet rule modifies an HTML element and is comprised of a selector and declarations. • The selectoris the HTML element being redefined, such as the font. • Declarationsare the formats to be applied (font name, size, color)

  19. Style Sheet Rules Example p {font-family: Georgia, “Times New Roman”, Times, serif; font-size: 14px;} • In the above example, the selectors are font-family and font size • The declarations are • Georgia, “Times New Roman”, Times, serif • 14 pixels The above rule will display paragraphs in 14px Georgia.

  20. Style Sheet Classes • A style sheet class is a set of declarations (formats) that can be applied to different tags. • Class names begin with a dot ( . ) • Declarationsare the formats to be applied (font name, size, color)

  21. Style Sheet Class Example .para_with_space { font-family: Georgia, “Times New Roman”, Times, serif; font-size: 14 px; line-height: 28 px; } What are the selectors in the above example? What are the declarations in the above example? To apply the style sheet class to a paragraph, use the tags: <p class=“para_with_space”> </p>

  22. Style Example – Background Color <html><body style="background-color:yellow;"><h2 style="background-color:red;">This is a heading</h2><p style="background-color:green;">This is a paragraph.</p></body></html>

  23. Style Example – Font, Color, Size <html><body><h1 style="font-family:verdana;">A heading</h1><p style="font-family:arial; color:red;font-size:20px;">A paragraph.</p></body></html>

  24. Style Example – Text Alignment <html><body><h1 style="text-align:center;">Center-aligned heading</h1><p>This is a paragraph.</p></body></html>

  25. Assignment Work through the W3Schools HTML styles tutorial http://www.w3schools.com/html/html_styles.asp

  26. HTML Overview Part 5 – Adding Color

  27. Color Values • HTML colors are defined using a hexadecimal code for the combination of Red, Green, and Blue color values (RGB). • HEX values are specified as 3 pairs of two-digit numbers, starting with a # sign.

  28. 16 Million Different Colors The combination of Red, Green, and Blue values from 0 to 255, gives more than 16 million different colors (256 x 256 x 256).

  29. Shades of Grey Gray colors are created by using an equal amount of power of all of the light sources.

  30. Color Names • Color names are supported by all browsers • 147 color names are defined in the HTML and CSS color specification. •  The 17 standard colors are: aqua maroon black navy blue olive fuchsia purple gray red grey silver green teal lime white yellow

  31. Style Example – Background Color <p style="background-color:#FFFF00"> Color set by using hex value</p> <p style="background-color:rgb(255,255,0)"> Color set by using rgb value</p> <p style="background-color:yellow"> Color set by using color name</p>

  32. To change the background and text color of an HTML document with a style sheet rule, the HTML body element is modified in the rule: body {background-color : #000000; color : #FFFFFF} In the above example, the background would be black and the text would be white. • The change the text color of a selected tag, the HTML element is modified in a style sheet rule. For example: h1 {color : #0000FF} In the above example, the #1 heading would appear in blue.

  33. HTML Overview Part 5 – Changing Alignment

  34. Alignment • HTML content is left-aligned by default. • To change the alignment of an entire document, the body element is modified in a style sheet rule: body {text-align : center} In the above example, the text of the entire document would be centered on the page. • To change the alignment of only a part of a document, modify the appropriate HTML element: h1 {text-align : right} In the above example, the #1 heading would be aligned at the right of the page.

  35. Style Example – Alignment <html><body><h1 style="text-align:center;">Center-aligned heading</h1><p>This is a paragraph.</p></body></html>

  36. Assignment Work through the W3Schools HTML color tutorial http://www.w3schools.com/html/html_colors.asp Complete Practice: Computer Viruses – part 4 of 5 Save your file as lastname_computer_viruses4

More Related