content to date review course work/labs assigned to date review html image tag editing code for...
TRANSCRIPT
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 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
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.
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
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”>
Image Tag with AttributesStored in images folder
<img src=“images/dog.jpg" height="130" width="192“ align="right">
Sample image tag….
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
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”>
Handling Color
Changing specific text color…Text between tags will be changed.
<font color=“red”>ITC181</font>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 255 0 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
<font color=“red”>ITC181</font>
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
<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>
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/
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
