When including an image within a page the following aspects must be included: <img src= "" />

Transcription

1 HTML LESSON #2 Images Inserting images requires the <img> tag, however like the font tag, the <img> tag requires an attribute, in this case the src="" attribute. It doesn't do anything by itself. When including an image within a page the following aspects must be included: <img src= "" /> <img src="seal4.gif" /> Directory paths Look at the directory path for the image. This is a document relative directory path name. Relative pathnames mean that the HTML address is relative to where you put the current HTML file. In this case, this HTML code will tell the browser to look in the same directory as the "inserting Images" page for the image seal4.gif. Document relative directory paths are just file names. If you have the image file in a different directory, such as an image directory (or folder), the directory path would look like this: "Image/seal4.gif" means that "seal4.gif" is in the "Image/" directory. HTML uses the forward slash "/"to indicate that "Image/" is a directory. Note: HTML is case sensitive. Image/ is different from image/ Absolute pathnames reference the fixed URLs of webpages. You always use absolute pathnames when referencing objects or pages on the web. They would include Creating sites and directories in Dreamweaver Create a folder on your U drive. Name it "DCOM130_HTML" Inside this directory, create the "Images" directory. When you create the directory on your computer, you don't need to use a forward slash or quotes. You could also use Dreamweaver to create the directory. Click on the Dreamweaver Sites menu and choose manage sites.

2 Create a new site Define the local root folder as DCOM130_HTML by clicking the folder and browsing until you find the directory. Save your current file as "index.html". You might have to browse to find the directory. This file name means that any browser looking into the directory will pull up the index.html file. If you don't do so, people can browse your directories. You don't want that. Creating and saving images into your HTML document Ordinarily, you would create images for your site in Photoshop or some other graphic authoring software or you can use preexisting images. We'll use a preexisting image for now. Open up the lvc webpage. Download the seal into your "Images/" directory. <img src="images/seal4.gif" /> Now press refresh. width and height attributes for images You can just use the HTML tag <img src="" />, however when the browser reads the page and is downloading the images, nothing else will load until the image is completely downloaded. To create placeholders for these images, you'll want to use the attributes. width="" and height="" <img src="images/seal4.gif" width="109" height="109"> These tags will allow the browser to continue to download the remaining content.

3 NOTE: Don't change the dimensions of the image by using the width and height attributes. Doing so to make the image smaller will make the image appear smaller on the screen, but the image will still take as long to download. Trying to make the image larger by changing these attributes will only distort the image. Instead, you should use an imaging authoring program change the actual image itself. Try changing the dimensions and see what happens to the image. Defining alternative text attributes for images alt="" Current practice for inserting images requires that we insert an alt text attribute so that those visually impaired browsers and those individuals who turn off the images on their browsers can still navigate the site. The alt text attribute is: alt="description of graphic here" The final HTML would appear as: <img src="images/graphic.jpg" width="x" height="x" alt="description"> <img src="images/seal4.gif" width="109" height="109" alt="the seal of LVC" /> Inserting Borders The border attribute measures the space around the image in pixels. <img src="images/seal4.gif" width="109" height="109" alt="this is the seal of LVC" border="5" /> <p>this image has a 5 point border</p> Image Alignment and Spacing Align The align values are top, middle, bottom relate to the images position relative to the surrounding text. The default value of align is "bottom"

4 <img align="top" src="images/seal4.gif" width="109" height="109" alt="this is the seal of LVC" />This image is top aligned. Change the values to experiment. The values left and right cause the image to stick to the left or right margin of the page and wrap the text along the image's opposite side. <img align="left" src="images/seal4.gif" width="109" height="109" alt="this is the seal of LVC" />This image is left aligned. Play around with the align attribute values to experiment. Centering To center an image, you will have to use the <div> or division tag and the align attribute. <div align="center"> <img src="images/seal4.gif" width="109" height="109" alt="this is the seal of LVC" /> </div> NOTE: Supposedly, it is bad form to use the <p> tag with images. Paragraphs are defined as text. Use the <div> tag whenever you need to divide up the content that isn't text on a page. Spacing The white space around an image is controlled by the hspace="" and vspace="" attributes. <img align="center" src="images/seal4.gif" width="109" height="109" alt="this is the seal of LVC" hspace="50" vspace="50" />This image is center aligned with 25 pixels of space. Linking There are two different types of links you will create: relative pathname links and absolute pathname links

5 Creating hyperlinks requires that you use both an anchor link <a></a> and the hypertext reference attribute href="". Combined, they would look like: <A href="">object or text to contain the link</a> Insert relative pathnames within quotations when linking within your website. For Example: <p>this is a text link to <A href="page2.html ">Page 2</A></p> An image link would be: <p>this is an image link to page 2<a href="page2.html"><img src="images/seal4.gif" width="109" height="109" /></a></p> Notice what happens when we don't set the border to 0? <p>this is an image link to page 2<a href="page2.html"><img src="images/seal4.gif" width="109" height="109" border="0" /></a></p> Linking using relative pathnames to files in different directories Using dreamweaver, create two new directories. Name them "section3" and "section4" Then, create two new pages. Name the first "page3.html" and save it in "section3" Name the second "page4.html" and save it in "section4" Open page 2 Format it as an HTML page In the body, insert a link to page 3 <p>this is a link to <a href="section3/page3.html" > page 3</a>.</p> Now, open page 3 Format it as an HTML page <html> <title>page 3</title> <h1 align="center" Page 3</h1> <p>this is a link to <a href="../page2.html">page 2</a></p> <p>this is a link to<a href="../section4/page4.html"> page 4</a></p> </html> Note that the "../" in the file name is a relative pathname that refers to the directory that contains the directory in which this file is located. Each set of periods and a forward slash

6 "../"takes you one step up in the directory structure. What this hypertext reference attribute is telling the browser is that it needs to move up one in the directory structure, then look in the section4 directory, for the page4 file. Absolute pathname URLS Always use absolute pathnames when you link to an off-site URL. The easiest way to do so is to navigate to the site to which you want to link, copy the full URL pathname from the browser's address bar, and then paste it in your HTML file. For example: <A href=" Links that open new pages To format the link so that a new page opens up, use the target attribute and set the value to "blank". <A href=" target="blank">amazon</a> Try this and see what happens. Creating Mailto links <p>this is a mailto link. It works like a regular hyperlink, but it tells the computer to <a href="mailto:ritchie@lvc.edu">mail the </a>.</p> Anchors Place the <a> anchor tag and the name="" attribute before the text you would like to label as an anchor. Create a label that best describes what you would like to link to within the document. I chose <p><a name="anchor">anchor</a> </p> To create a link to an anchor in a page, <A href="# ">, </A> - To be placed before text you would like linked to another portion of your current document. For example if you were linking from the top of your document down 3/4 of the page to an exam schedule you may make your This is a <a href="#anchor">link</a> to an anchor.