Images, Links and HTML
Home
About HTML Color
Images and Links Lists
Tables
Inserting Images on Web Pages
Images
Links
Inserting Images on Web Pages
- Images are not inserted into a web page. The image tag is a LINK to an image file that the browser will display.
-To use an image as a background, include this in your body tag:
<body background = "imagename.file_extension">
-To put an image onto a page, use the image tag.
<img src = "imagename.extension">
- This ONLY works if the image is in the SAME folder as the page.
If the image is inside a folder that the page is in, this is the tag: < img srce =
"foldername/picturename.extension">
<img src = "pics/smiley.jpg">
Attributes for the Image Tag
- alt stands for alternate text. It is a verbal description of the content of the image for someone who is blind or who has
the images turned off while surfing the web. Sometimes a picture is used as a link and these two groups could not access
the link or see the image for information. If you put alt text, it will display the information in text.
-example: alt = "snow in Dallas"
- width and height - The width and height attributes specify the size of the picture. If you tell the browser the
size of the picture, it can start laying out the page even before the pictures are there (allowing the viewer to start reading the text.
You can also resize a picture using the browser because the file size will still be very large if you are making the image smaller. If you make the image larger,
it will be pixelated. Use photoshop or some other program to resize your image. Size is expressed in pixels
-example: width = "800" height = "600" (this example would be part of an image tag)
- Images are not inserted into a web page. The image tag is a LINK to an image file that the browswer will dispaly. >br />
- To use an image as a background, include this in your body tag
< body background = imagename.file_extension" >
- To put an image on a page, use the image tag shown below
< img src = "imagename.extension" >
- This will ONLY work if the image is in the same folder as the page
< img src = "foldername/filename.extension" >
- The width and height of a picture are expressed in pixels. Pixels stands for picture element.
width = "40"
length = "70"
- These tags help the page load faster because the text will load as the images are loading.
- You should ALWAYS include the image size. It helps the browser lay out the page on the screen
while images are loading. However, changing the size of the picture in photoshop or in the specifications
of your webpage can change the quality of and distort the image. You must change the size in photoshop and
in the image tag.
- Allignment choices: top, middle, bottom (where the text is compared to the picture) If you have a paragraph,
it will make one line of text next to the picture.
-left, right (where the picture is on the screen) The writing will flow around the picture.
- hspace, horizontal, space adds space (pixels) to the left and right of an image which makes text around
it easier to read.
- vspace, vertical space, adds space above and below the image (measured in pixels)
Examples
Hello top allignment!toptoptoptoptoptop
toptoptoptoptoptoptoptoptoptoptoptoptoptoptoptoptoptoptoptoptoptoptoptoptoptoptoptoptoptoptoptop
toptoptoptoptoptoptoptoptoptoptoptoptoptoptoptoptoptoptoptoptoptoptoptoptoptoptoptoptoptoptop
Hello middle allignment! middlemiddlemiddlemiddle
middlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
middlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
Hello bottom allignment!bottombottombottombottombottom
bottombottombottombottombottombottombottombottombottombottombottombottombottombottombottombottombottombottom
bottombottombottombottombottombottombottombottombottombottombottombottombottombottombottombottombottom
Hello left allignment!leftleftleftleftleftleftleftleftleftleftleft
leftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleft
leftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleftleft
Hello right allignment!Hello right allignment!
rightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightright
rightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightright
Image Types
A) Raster Images
- A pixel stands for a picture element.
- You are expressing how many pixels there are on the screen
- The higher then number of pictures, the higher the resolution will be.
- Each picture element has three little lights--red, green, and blue.
- How much red, green, or blue is turned on will determine the color of the pixel you see.
- Images can be compressed to take up less space. A non-compressed raster image, it tells how much red/green/blue is in each pixel. Tells the information "pixel by pixel."
- Take up more memory on your computer, so you want to compress them.
- A compression algorithm assigns certain colors to similar colors--JPG helps the computer not have to save individual colors for every single pixel; take sup less space.
- Each raster image is about pixel to pixel saving with designated amounts of red, green, and blue for each image.
- Pixelation occurs when you enlarge a raster image--you can start to see jagged edges. They do not resize well.
Raster File Types
PSD images will not show up in a browser.
-JPG does not give you transparency.
- You can get transparency with shading of color***mine didn't work.
- Can get transparency but no shading.
-The most used iamge types for web pages are jpeg, gif, and png.
- JPG stands forJoint Photographic Experts Group. JPG images use a method of lossy compression, meaning that
the data can be compressed in one form, but is then retrieved in another form, preserving the image enough to
be useful when it is retrieved. JPG images usually compress at a 10:1 ratio.
- PNG stands forPortable Network Graphics. PNG images use a method called lossless data compression (DEFLATE).
PNG images can also be interlaced. PNG is themost common file type for images which need transparency
-GIF stands for Graphics Interchange Format. GIF's are smaller files, because they have a reduced color set. They can be good for logos where shadings of color are not important. The GIF file type supports transparency. Many simple web animations are GIF's.
B) Vector Images
- A vector image is drawn on your screen mathematically.
- Uses a mathematical calculation of a circle. (uses radius)
- Something that looks like an oval, again, tells the width and the heighth.
- Main point: It is mathematical. Shows a rectangle and then an oval/circle that fits inside it. When you resize the image, the oval or circle is re-calculated. It is NOT interpreting pixels like in a raster image. It is literally changing the math involved in the heighth and the width, keeping the image looking clear and sharp.
- Photographic images do not do well in vector images because there are too many subtle lines and colors (shading and variations). But, for cartoons and logos, vectors are optimal.
- Photos = raster.
- Cartoons/Logos = vector
C) File Size
- Images are measured in bytes and take up a certain amount of space on a hard-disk.
The VIS, the viewable image size, refers to the amount of available space for a picture on the web.
-The more bytes an image has, the greater the color depth and resolution.
-On the computer, images are compressed using algorithms.
-Images can be compressed using lossless or lossy compression. Lossless compression reduces the file size without
reducing the quality of the image. Lossy compression, however, uses an algorithm that alters the actual image when
reducing the file size (it plays to the disadvantage to the human eye by subtley compressing undetectable information).
Links
-Linking is what makes web page interactive. With web pages, it is difficult to see where you are on the page. Links
take you to a different part of the page that you are on, a different page, a different website, a even a different
type of resource.
- The internet is known has hyper media because of its linking ability. Therefore, it is considered non-linear, meaning
that you do not read it from the beginning to the end--people read only the information that they need.
- The tag < a href = "somepage.html" > linked text and < /a > makes a link
Absolute Links
- The full and complete path to the webpage
- You use these when you are referring to any webpage that you go to. For example: http://www.dallasstars.com OR
http://esdeagles.com/naglerm/images.html
Relative Links
- In the folder that you are in, look for the place that you want to link. The folder is relative to the original location.
This link will not break as long as you keep it where the webpage index is located in the computer files.
More concisely, a relative link is a link to another page within the folder structure.
For example, < a href "proj1/abouthtml.html"> OR < a href "filename.ext"> OR < a href "foldername/filename.ext">
- *important* No matter where you move the original folder, the link still works.
- If you want to go to something in a higher folder, use ../filename
Anchor Links
-Achor links link to a different part of the same webpage.
-An anchor link requires something that you can click on to take you to the right place on the page, but you also
have to tell the computer/page where you want to go. We have to tag the place we want it to go, and that is creating
an anchor on the page.
- You make an anchor point by adding
< a name = "format" >label <h2 > Image Format < /h2>< /a >
- You have to put this tag right next to the place that you want to go to: <a name = "top"> text-on-webpage </a>
Mail-to Links
- You click your name and a window opens that is an email.
- < a href = "mailto:johnsmith@aol.com"> John Smith
Images as Links
- You can click on an image and it will take you to directly as a website--it acts as a link
My Links
Absolute Links
Youtube
Food Network
Adobe Kuler
Relative Links
About HTML
My Webpage
Pic of Granada, Spain
Image as a link
Anchor link
- (see second row of links on top of page)
- Back to Top
Created by:
MeReDiTh
February 2010