Transcript Document
IT 117 - Introduction to Website Development Welcome! Welcome to Unit 5! Images and Colors This week’s reading: Read Lesson 4 and work through the labs Be sure to read the PDF file Working With Graphics, Resolution and Color Introduction Unit 5 is about graphical elements and how to add images to your Web pages. You will review image file paths, file formats, image attributes. You will also learn how to include horizontal rules in your Web pages to separate sections of data. To-Do-List Review Key Terms On the Reading page Read Assigned Text On the Reading page Respond to the Discussion Board 30 Points Lists, Cascading Style Sheets, and Deprecated Tags Complete the unit project and upload to assignment dropbox In unit 6 for grading 50 Points On the Assignment page Attend the Weekly Seminar or complete the FLA quiz 20 Points Log in from Student's Home page Readings Overview Read Lesson 4 and work through the labs. You do not need to work lab 4.6: Formatting text with the <font> tag, because the <font> tag has been deprecated in favor of using CSS. You should however look the lab over so you will be familiar with the use of the <font> tag. You are sure to encounter in your career. Readings Overview Textbook Reading Summary: Lesson 4 and its labs will review file formats, image size and resolution, and inserting images on a web page. It will also explore how to format text around your images, alignment and the use of horizontal rules. Seminar Overview This week’s Seminar session is about editing and adding images to your Web pages. We will review file paths, file formats, and discuss sizing. Images in Web Pages Has anyone tried adding an image to the page? What HTML tag would you use to insert an image? Images in Web Pages Use the <img> tag to insert an image file using either of two formats to close the tag: <img src="imagefile.gif"> </img> <img src="imagefile.gif"/> Images in Web Pages Image file formats Graphics Interchange Format (GIF) Joint Photographic Experts Group (JPEG) Portable Network Graphics (PNG) Comparing Image File Formats Format Transparency Interlacing Compression Animation GIF Yes Yes Yes Yes JPEG (standard) No No Yes No PNG Yes Yes Yes Yes Images and the alt Attribute In XHTML, every image must follow good coding practice by including the alt attribute with a corresponding value Code will not validate as XHTML without this attribute Browsers and screen-reader technology can read alt description and render it in audio for disabled users <img src="image.gif" alt="Alternative text"/> Images in Web Pages You can store images in the root directory, or create the "images" folder <img src="imagefile.gif"/> <img src="images/imagefile.gif"/> The path will reflect your folder structure Combining Background Images and Colors The bgcolor attribute: The background attribute: Specifies background colors Inserts an image as a background If you use both the bgcolor and background attributes in a <body> tag, then only the attribute specified last in the tag will render Aligning Images Relative to Text The align attribute positions images relative to text <img src="imagefile.gif" align="alignment value"> Values include: "bottom" "middle" "top" "left" "right” Aligning Images Relative to Text The align attribute has been deprecated in favor of style sheets, but can still be used; code will still validate as XHTML 1.0 Transitional Review The <img> tag embeds an image in an HTML page. Notice that images are not technically inserted into an HTML page, images are linked to HTML pages. The <img> tag creates a holding space for the referenced image. The <img> tag has two required attributes: src and alt. Review In HTML the <img> tag has no end tag. In XHTML the <img> tag must be properly closed. Src - Specifies the URL (the LOCATION) of an image, including the file name What other properties can you specify for an image? Specifying Colors Colors can be specified by name or by Hexadecimal "Red Green Blue (RGB)" value Web-Safe Color Palette A set of 216 colors guaranteed to render properly Ensures that colors in pages render as expected If you specify a color not supported by the monitor or operating system, the system will approximate the color, a process called dithering Unexpected results may occur as the result of dithering Page Colors and Backgrounds Specifying page colors: <body bgcolor="colorNameOrCode"> Specifying text color on the page: <body text="colorNameOrCode"> Specifying color of unvisited links: <body alink="colorNameOrCode"> Specifying color of visited links: <body vlink="colorNameOrCode"> Providing a background image: <body background="image.png"> Web Design Issues Color combinations Popular color combinations Consider existing sites Habitat for Humanity (www.habitat.org) Microsoft (www.microsoft.com) Red Hat (www.redhat.com) Cultural and audience concerns Web Design Issues Page layout Layout guidelines Document structure, the <div> tag and style sheets Relative path names White space, the <img> tag and XHTML HTML <hr> Tag Definition and Usage The <hr> tag creates a horizontal line in an HTML page. The hr element can be used to separate content in an HTML page. HTML <hr> Tag Example: <p>This is some text.</p> <hr /> <p>This is some text.</p> Project 5 Unit Outcomes: Integrate an image into a Web page. Apply the “alt” tag to a web image Apply alignment of images relative to text with XHTML Course Outcome: IT117-2: Create web sites using web page building blocks. Project 5 Project Instructions: For the Unit 5 project, you will be adding images to your Web pages. All images for this project must be either GIF or JPEG files. Images should be sized to fit appropriately on each Web page. Your images should be contextual or related to the page topic. In other words, make sure the images you add to the page, add value to the page and are not a distraction. The labs you worked through in lesson 4 will have prepared you for this project. Tip: All images must be uploaded to the appropriate subfolder located on your server and the file path must be correct in your code. Project 5 Create a subfolder named images within the folder you previously created to hold your web files on your computer. Plan to save all your jpg and gif files here. Your path to images will be images/imagename.jpg. Create a subfolder on your web server space and name it images. Plan to upload all your jpg and gif files to this folder. Your path to images will be images/imagename.jpg. (Refer back to the topic “Relative path names” in lesson 4, if needed). Project 5 Insert a horizontal rule somewhere on your index.html page. (See lab 4.1). Insert one image on your index page and a second image on your bio page. These can be a graphic or photo of your choice, but it would be great to include your headshot on your bio page! (see lab 4.2) Add the alt attribute within each image tag. Choose your own alt text to appear with each image. (see lab 4.2) Project 5 Align images relative to text with XHTML. (see lab 4.3) Upload the index.html and bio.htm pages plus your two image files to your Web server space. Make sure you place your image files in the images subfolder. Test your online pages by going to each complete URL to ensure your images display as expected. Project 5 - Grading Rubrics 1. Added an image to the index.html page : 0-10Z 2. Added an image to the bio.htm page : 0-10 3. Aligned both images to text with xhtml : 0-10 4. Applied the alt attribute to both images : 0-10 5. Added a horizontal rule to index.html : 0-10 Thank you! Feel free to contact me with any questions! [email protected] Use the Virtual Office to post questions throughout the week, as well as to upload your zipped folder if you need me to look at the code!