![Page 1: 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](https://reader030.vdocuments.mx/reader030/viewer/2022032611/56649e7a5503460f94b7ac59/html5/thumbnails/1.jpg)
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
![Page 2: 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](https://reader030.vdocuments.mx/reader030/viewer/2022032611/56649e7a5503460f94b7ac59/html5/thumbnails/2.jpg)
Webpage Images & Color
ITC181 Fluency in IT
Prof. Sheila D. Shea
![Page 3: 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](https://reader030.vdocuments.mx/reader030/viewer/2022032611/56649e7a5503460f94b7ac59/html5/thumbnails/3.jpg)
Labs Assigned To DateDescription Filename
1. Student Profile Sheet2. 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 25. Creating a HTML template6. Creating a .zip file7. Printout a screen capture of your USB
drive
studentwebpage.html
htmltemplate.htmlyourlastnamech02.zip
![Page 4: 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](https://reader030.vdocuments.mx/reader030/viewer/2022032611/56649e7a5503460f94b7ac59/html5/thumbnails/4.jpg)
Image Tag
<img src=“filename”>
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.
![Page 5: 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](https://reader030.vdocuments.mx/reader030/viewer/2022032611/56649e7a5503460f94b7ac59/html5/thumbnails/5.jpg)
Image Attributes<img src=“john.jpg” align=“right”>
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
![Page 6: 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](https://reader030.vdocuments.mx/reader030/viewer/2022032611/56649e7a5503460f94b7ac59/html5/thumbnails/6.jpg)
Adding image Folder
Consistency with webpage design protocols -- create a folder (images) to stored all images for entire website
<img src=“images/john.jpg” align=“right”>
![Page 7: 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](https://reader030.vdocuments.mx/reader030/viewer/2022032611/56649e7a5503460f94b7ac59/html5/thumbnails/7.jpg)
Image Tag with AttributesStored in images folder
<img src=“images/dog.jpg" height="130" width="192“ align="right">
![Page 8: 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](https://reader030.vdocuments.mx/reader030/viewer/2022032611/56649e7a5503460f94b7ac59/html5/thumbnails/8.jpg)
Sample image tag….
![Page 9: 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](https://reader030.vdocuments.mx/reader030/viewer/2022032611/56649e7a5503460f94b7ac59/html5/thumbnails/9.jpg)
Handling Color
Hardware components deliver color: The processor The video card The monitor
Use color tag for:1. Changing font text color2. Background color of webpage3. Hyperlink text color (before & after linking)4. Table properties, i.e. cells, rows, columns
![Page 10: 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](https://reader030.vdocuments.mx/reader030/viewer/2022032611/56649e7a5503460f94b7ac59/html5/thumbnails/10.jpg)
Handling Color Textbook Reference: pp. 68-70
Color added to webpages by:1. Predefined color terms p. 104 chart2. Hexadecimal Number color
HTML Tag<body bgcolor=”silver”>
<body text=“aqua” link=“fuchsia”>
![Page 11: 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](https://reader030.vdocuments.mx/reader030/viewer/2022032611/56649e7a5503460f94b7ac59/html5/thumbnails/11.jpg)
Handling Color
Changing specific text color…Text between tags will be changed.
<font color=“red”>ITC181</font>Displays as…
ITC181
![Page 12: 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](https://reader030.vdocuments.mx/reader030/viewer/2022032611/56649e7a5503460f94b7ac59/html5/thumbnails/12.jpg)
Handling Color Color by Number Computer colors described by
Red, green blue light (RGB) Intensity specified by a number Numbers…0 through 255 0 for all three numbers (0,0,0) produces black Order always… RGB RGB color specification
![Page 13: 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](https://reader030.vdocuments.mx/reader030/viewer/2022032611/56649e7a5503460f94b7ac59/html5/thumbnails/13.jpg)
Handling Color Examples (255,0,0) intense red (0,255,0) intense green (0,0,255) intense blue
![Page 14: 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](https://reader030.vdocuments.mx/reader030/viewer/2022032611/56649e7a5503460f94b7ac59/html5/thumbnails/14.jpg)
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
![Page 15: 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](https://reader030.vdocuments.mx/reader030/viewer/2022032611/56649e7a5503460f94b7ac59/html5/thumbnails/15.jpg)
Review - Handling Color HTML tag to change specific text
<font color=“red”>ITC181</font>
ITC181
![Page 16: 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](https://reader030.vdocuments.mx/reader030/viewer/2022032611/56649e7a5503460f94b7ac59/html5/thumbnails/16.jpg)
Handling Color – Sample Code
HTML Color Tags applied by:
1. Predefined color terms – 2. Number color (intensity values)-
Appendix B HTML Color Defined Tag
<body bgcolor=”silver”><body text=“aqua” link=“fuchsia”>
<body bgcolor="#000000" text="#DDDDDD" link="#FFCC66">
<h1 align="center"><font COLOR="yellow">My Webpage</FONT></h1>
<h2><font
color="#FF8E2A">Fluency in IT
</font></h2>
![Page 17: 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](https://reader030.vdocuments.mx/reader030/viewer/2022032611/56649e7a5503460f94b7ac59/html5/thumbnails/17.jpg)
Web Safe Color Charts Select custom numbers for backgrounds/fonts by giving the RGB intensity values
Websites for Charts displaying for browser safe colors.
http://www.web-source.net/216_color_chart.htm http://www.jqjacobs.net/web/palette.html
http://www.webmonkey.com/webmonkey/reference/color_codes/
![Page 18: 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](https://reader030.vdocuments.mx/reader030/viewer/2022032611/56649e7a5503460f94b7ac59/html5/thumbnails/18.jpg)
What should be completed by Wed., Sept. 28Description Filename
1. Edit all webpages assigned to date by adding an image folder in the pathname of the <img src> tag
hungerfight.htmlhungerfighti.htmlhungerfightc.html
2. Print the browser view & source code for webpages assigned to date
studentwebpage.htmlhtmltemplate.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
![Page 19: 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](https://reader030.vdocuments.mx/reader030/viewer/2022032611/56649e7a5503460f94b7ac59/html5/thumbnails/19.jpg)