HTML5 - Insert images and Apply page backgrounds
Download as PPTX, PDF6 likes2,633 views
The document discusses the significance of using images and graphics in web pages, highlighting their ability to enhance text content and maintain viewer interest. It provides guidelines on image formatting, file sizes, and layout considerations, emphasizing the importance of relevant visuals and proper coding techniques in HTML. Additionally, it outlines the attributes of the <img> tag and various methods for incorporating images and colors into HTML documents.
HTML5 - Insert images and Apply page backgrounds
- 1. Information and Communication Technology β 8
- 2. ο§Understand the importance of images and graphics in a web page ; ο§Utilize images into your page; and ο§Apply background in your HTML documents.
- 3. ο§ You can create a web page with only text content, but it would not be interesting compared to one that has an images. ο§ Your viewer will be able to effectively relate if there are visual illustrations supplementing your text content. ο§ You can further elaborate and present the purpose of you website into a more dynamic and creative way.
- 4. ο§ File Size β Too large file size can lead to a slow loading speed of the page. Most visitors donβt want to wait for a slow site and will certainly look for a different choice. ο§ Cropping β Viewing dimensions are important as visitors want to actually see the image, so it cannot be too small or large to fit to the screen. ο§ Irrelevance β Photos are important and great addition to the web page. But it should be related or relevant to the purpose of the website.
- 5. ο§ Complementary β Can showcase whatβs the article/website is about. When used alongside the article, it can give a readers a thorough perspective of the topic. ο§ File Size β If an image is merely for monitor viewing, then the file size should be at least 250 kilobytes. Resolution wise, it should be no more than 640x480 pixels to fit well on most displays. ο§ Format β There are three types of images formats for website use: JPEG, GIF and PNG. ο§ JPEG ( Joint Photographic Experts Group) β which is the most common and popular, has the most compressibility; however too much will reduce the quality. ο§ GIF ( Graphics Interchange Format) β have good compressibility and are ideal for photos with little color. ο§ PNG ( Portable Network Graphics) β can produce high quality display and overlay; however itβs downside is its poor compressibility.
- 7. Two Types of GIF Images: β’ Transparency β The image has transparent background and allows the web page background to show through. β’ Interlacing β The images are gradually displayed on the screen, and appear blurry at first then come into focus when loading is done.
- 8. ο§ Aesthetics β When choosing an image, consider its artistic value. Balance the brightness and contrast in order to effectively emphasize the subject. ο§ Layout β Carefully plan the position of an image by using a layout as random placement can distract viewers. Limit photos designed to direct readers to one per page; the rest should be positioned near the relevant contents so viewers can easily understand the relationship between the images and content.
- 9. ο§ There are two classes of images for web page: ο§ Inline Images β these images are loaded automatically when you load the page itself. ο§ External Images β these images are loaded only at the request of the viewer. It will not display when you load a page. Syntax : <img src= βpicture.jpgβ> ο§ In HTML, images are defined with the <img> tag. ο§ The <img> tag is empty, it contains attributes only, and does not have a closing tag. Tag Attribute Image Filename
- 10. Attributes Description src (source) This specifies Address of the resource file using URL. alt ( Alternate text) The text to be use in case the browser cant render the image. width Specifies the width of the image. height Specifies the height of the image. The table shows the attributes that are specific to <img> tag/element.
- 11. ο§ The attribute src (source) will specify the address or location of the image that you want to insert in your HTML. ο§ When the image resides on the same folder as the HMTL document that references it, you can just type the file name only with out any additional information. <img src=βpicture.jpgβ> ο§ If you want to refer to images that are stored in subfolder inside the folder that contains your HTML documents, you should indicate the subfolder name where the image is located. My HTML Folder images Example: <img src=βimages/picture.jpgβ
- 12. ο§ You can add a descriptive text that will appear if the image might not display for whatever reason. ο§ The alt attributes provides something meaningful text to replace or as a substitute for an image and gives an idea of the image that is about to be loaded. Example: <img src=βpicture.jpgβ alt=βalternate text for imageβ>
- 13. ο§ Image size is expressed in pixels. ο§ You can change the width and height of the image by adding a width=βnew valueβ or height=βnew valueβ ο§ But you can also specify both the width and the height. <img src=βpicture.jpgβ style=βfloat:leftβ width=β250β> <img src=βpicture.jpgβ style=βfloat:leftβ width=β250β height=β300β>
- 14. ο§ Similar to text images can have margins and/or padding to separate them from surrounding elements. ο§ There are two types of attributes that can control the space around the image: ο§ Padding β this attribute controls the space around the content on the inside of the element. ο§ Margin- this attribute controls the space surrounding the element. * You can use either the two attributes for an image. When the image has a border, it is better to use the margin attribute. <img src=βpicture.jpgβ style=βfloat:left;margin-right:15pxβ width=β250β>
- 15. ο§ To stop the text from wrapping around on an aligned image, use the clear attribute, to break the line so that the next line of text begins after the end if the image. ο§ You should apply this to the text tag and not inside the <img> tag. Example: <p style=βclear:rightβ> The clear attribute can have one of three values: Left β this is for left-aligned images. It will break to an empty left margin. Right β this is for the right aligned images. It will break to an empty right margin. All β breaks to a line clear to both margins.
- 16. ο§ You can apply different kinds of basic colors in your page. HTML recognizes 16 of these:
- 17. ο§ You can specify a background color for your entire page by adding an attribute to its opening <body> tag. ο§ Example : <body style=βbackground-color:aquaβ> or <body bgcolor=βgrayβ> For foreground color: <body style=βbackground-color:teal;color:whiteβ> The two attributes are combined in a single style=statement, and are separated using a semicolon as shown in the above example.
- 18. ο§ Similar to the background color, a background image is displayed behind text. ο§ By default the image is tiled to fill the page and scrolls with the page. Example: <body style=βbackground-image:url(background.jpg)β> or <body style="background-color:white;background-image:url(background.png)"> By default, the background image is repeated both horizontally and vertically to fill the window. You can force it not to repeat by adding the background-repeat to the body tag. Example: background-repeat:repeat-x (repeat horizontally) background-repeat:repeat-y (repeat vertically) background-repeat:o-repeat Syntax: <body style="background-color:white;color:white;background-image:url(image.url);background- repeat:repeat-x">
- 19. ο§ Using the different tags we have discussed in creating a webpage, create a simple HTML document that will provide you the same output on the picture given. (Triad) ο§ Use Notepad++ to create your HTML Document, name your file βThe HTML History_Grade_Section.htmlβ ο§ Save the HTML document on your sectionβs folder. ο§ Use the necessary tags we have discussed, like Structural tags as mandatory tags used to make the HTML document, formatting tags for fonts, heading tags, paragraph tags, break line tags and list tags.
- 21. Category 5 4 3 2 1 Code Structure Code are excellently clear, concise, and well organized with excellent sentence/paragrap h construction. Code are clear, concise, and organized with excellent sentence/paragrap h construction. Code are mostly clear, concise, and organized with good sentence/paragrap h construction. Code is unclear and/or disorganized.The structure is confusing. Code is unclear and disorganized and will certainly wonβt work. Requirements and Mastery Met all of the requirements, followed all the necessary formats and exceptionally shows mastery on the use of tags. 1-2 requirements are missing, followed the necessary formats and somehow shows knowledge on the use of tags. 3-5 requirements are missing, followed the formats and shows minimal knowledge on the use of tags. 6-7 requirements are missing, tries to follow the format and shows very minimal knowledge on the use of tags. All requirements was missing and not followed. No understanding on the tags at all. Use of Class Time -Used time well during class period. -Focused on getting the website done. -Never distract others. -Used time well during class period. -Usually focused on getting the website done and never distract others. -Used some of the time well during class period. -There was some focus on getting the website done but occasionally distract others. -Used some of the time well during class period. -There was some focus on getting the website done and most of the time distract others. -Did not use class time to focus on the hands-on OR often distracted others.