Virus from hack - Original page

Size: px

Start display at page:

Download "Virus from hack - Original page"

Jonah Ball
5 years ago
Views:

1 Virus from hack - Original page

2 Virus

3 Adding images to your web pages

4 File types Most web browsers support 3 types of image files.jpg.gif.png Simplified definition of usage: JPG s used for big images (most common format) GIF s used for small, icon-like images PNG s used for transparent images (newer format)

5 Image tag <img src= xxxxx.jpg > Image Source Name of image Image format *No </img> tag Web designer usually put all the images in 1 folder <img src= images/xxxxx.jpg >

6 Image tag attributes <img src= images/brodie.jpg" alt="brodie photo" width="365" height="247" title="brodie at the dog show." hspace="10" vspace="5" border="3" align="left"> 1. <img src= images/brodie.jpg" 2. alt="brodie photo 3. width="365" 4. height="247" 5. title="brodie at the dog show." 6. hspace="10 7. vspace="5" 8. border="3" 9. align="left"> Just like with other tags, you can control how the images are displayed with attributes inside the tag *You don t need the line breaks; I added for understanding

7 Titles 1. <img src= images/brodie.jpg" 2. alt= Brodie photo 3. width="365" 4. height="247" 5. title="brodie at the dog show." 6. hspace="10 7. vspace="5" 8. border="3" 9. align="left"> alt="brodie photo" If a user has their graphics turned off, these words will come up (ADA compliant) title="brodie at the dog show. The words that show up when a user places their mouse on the photo *Some of the might be turned wrong, it s a PowerPoint thing

8 Size 1. <img src= images/brodie.jpg" 2. alt= Brodie photo 3. width="365" 4. height="247" 5. title="brodie at the dog show." 6. hspace="10 7. vspace="5" 8. border="3" 9. align="left"> width="365" height="247" Sets the size and height of the image (better to do this in PhotoShop) border="3" Controls the width of the border around the image Set either the width OR height if unsure on photo

9 Padding 1. <img src= images/brodie.jpg" 2. alt= Brodie photo 3. width="365" 4. height="247" 5. title="brodie at the dog show." 6. hspace="10 7. vspace="5" 8. border="3" 9. align="left"> hspace="10" Controls the amount of space on left/right side of image (in pixels) vspace="5" Controls the amount of space above/below the image (in pixels)

10 1. <img src= images/brodie.jpg" 2. alt= Brodie photo 3. width="365" 4. height="247" 5. title="brodie at the dog show." 6. hspace="10 7. vspace="5" 8. border="3" 9. align="left > Alignment <div align= center > <img src= images/brodie.jpg > </div>

11 1. Download photo and create dummy text 2. Write web page to display the above example 3. Set photo width to 3 in

12 <html><head> <title>master list</title> </head> <body>  <img src="untitled-1.jpg" width="271"> <p>blah, Blah, Blah</p> </body> </html>

13 <img src="untitled-1.jpg" width="271" border="1" align="left" hspace="5" vspace="5"/> How do you do this?

14 How do you do that?

15 <head> <title>master list</title> </head> <body> <div align="center"> <h1>bernanke says exec compensation must be monitored</h1> <img src="untitled-1.jpg" width="271" border="1" hspace="5" vspace="5"/> </div> <p>blah, Blah, Blah</p> </body> </html>

16 Image as a background <body background= images/dogs.jpg > Just like when we added color to the background <body bgcolor="#ffffff"> Large file fills the screen, small file tiles the image I m just showing you this, I wouldn t use it for your project

17 <img> vs. <a href> Image as clickable link Use <img></img> to display graphics on your page Put the image tag inside an <a href> </a> tag You use<a href></a> if you want people to click on something first in order to have a graphic displayed <a href= index.html"><img src="brodie.jpg"></a>

18 Headline centered, different font Partial text in bold and space between paragraphs Hyperlink Photo flush left and clickable as a link (get from net) Background image

19 <html><head> <title>working with images</title> </head> <body background="bgwall.jpg"> <div align="center"> <h1><font face="verdana, Arial">Make a difference in Haiti</font></h1> </div> <p><a href=" src="baby.jpg" alt="baby photo" width="278" hspace="5" vspace="5" border="2" align="left" title="a Haitian baby waits for help."></a></p>  <p align="left"><font face="times New Roman, Times, serif"> Blah blah blah blah blah. Blah blah blah blah blah. Blah blah blah blah blah. Blah blah blah blah blah. Blah blah blah blah blah. Blah blah blah blah blah. Blah blah blah blah blah. Blah blah blah blah blah. Blah blah blah blah blah.. <br /> <br />  <strong>day 1, Wednesday, January 13</strong>: Blah blah blah Blah blah blah. <a href=" trauma center in Port-au-Prince</a>. Blah blah blah blah blah. </font></p> </body> </html>

20 Make this Photos from Google, put in images folder

HTML Exercise 20 Linking Pictures To Other Documents Or Web Sites

HTML Exercise 20 Linking Pictures To Other Documents Or Web Sites Turning pictures into hyperlinks is nearly the same as what you learned in Exercises 4 and 5. If a picture is essential to a Web page,