Content To Date Review Course Work/Labs Assigned to Date Review HTML Image Tag Editing code for image folder Introduce HTML Color Tags Webpage Safe Colors Instructional Activities

Webpage Images & Color ITC181 Fluency in IT Prof. Sheila D. Shea

Labs Assigned To Date DescriptionFilename 1.Student Profile Sheet 2.Creating a webpage Chapter 02 hungerfight.html 2.Adding image to a webpage Chapter 02 hungerfighti.html 3.Adding color to a webpage Chapter 02 hungerfightc.html 4. Creating a Student webpage with skills from Chapter 2 5. Creating a HTML template 6. Creating a.zip file 7.Printout a screen capture of your USB drive studentwebpage.html htmltemplate.html yourlastnamech02.zip

Image Tag src means source Insert the filename of the image in HTML page if in same directory as page you want to insert image If image is not in the same directory, add the name of the folder.

Image Attributes Result of Align Right? image file inserted in HTML page and paragraph of text flows around it Where is the image inserted? Depends on location of cursor

Adding image Folder Consistency with webpage design protocols -- create a folder (images) to stored all images for entire website

Image Tag with Attributes Stored in images folder

Sample image tag….

Handling Color Hardware components deliver color: The processor The video card The monitor Use color tag for: 1. Changing font text color 2. Background color of webpage 3. Hyperlink text color (before & after linking) 4. Table properties, i.e. cells, rows, columns

Handling Color Textbook Reference: pp Color added to webpages by: 1. Predefined color terms p. 104 chart 2. Hexadecimal Number color HTML Tag

Handling Color Changing specific text color… Text between tags will be changed. ITC181 Displays as… ITC181

Handling Color Color by Number Computer colors described by Red, green blue light (RGB) Intensity specified by a number Numbers…0 through for all three numbers (0,0,0) produces black Order always… RGB RGB color specification

Handling Color Examples (255,0,0) intense red (0,255,0) intense green (0,0,255) intense blue

Handling Color Select custom numbers for backgrounds/fonts by giving the RGB intensity values Catch? Cannot use a value between 0 through 255 Must use hexadecimal numbering system Use a pair between 00 – FF See p. 60 textbook

Review - Handling Color HTML tag to change specific text ITC181

Handling Color – Sample Code HTML Color Tags applied by: 1. Predefined color terms – 2. Number color (intensity values)- Appendix B HTML Color Defined Tag My Webpage Fluency in IT

Web Safe Color Charts Select custom numbers for backgrounds/fonts by giving the RGB intensity values Websites for Charts displaying for browser safe colors

What should be completed by Wed., Sept. 28 DescriptionFilename 1. Edit all webpages assigned to date by adding an image folder in the pathname of the tag hungerfight.html hungerfighti.html hungerfightc.html 2.Print the browser view & source code for webpages assigned to date studentwebpage.html htmltemplate.html 3.On the printouts, highlight the source code for all image tags 4. Revise your student webpage to add color enhancements, such as, font text color using pre-defined color terms and hexadecimal numbers. 5. Submit printouts to instructor on Wed., Sept. 28