Saving and Inserting an Image
Saving and Inserting an Image
Embedded Files
Empowering Today’s Learners to Become Tomorrow’s Leaders
You are still working in the page table.html in procedures!
Placing images on your Web page is a sure way to dress it up and make it interesting to others.
Before you can do this, you must have an image ready. It must be in either .gif (Graphics Interchange Format), .jpg (Joint Photographic Experts Group) format, or .png (portable network graphics). Also, please keep in mind that while Windows refers to a .jpg format as 'jpeg', the file extension does NOT include the 'e'!
The image element (img) is not a block-level element and does not require a closing tag. It does not contain any content.
The / within the tag acts as the closer.
The image element tells the browser where to place an image on the page. It also tells the browser where to get the image; the attribute source.(src="locationand/or image name").
Important note: The image is not an HTML file. The image is a separate file. The HTML merely tells the browser where to get the file and where to put it on the page.
Another Important note: Does your image folder start with a capital 'I' instead of a small 'i'? Is that going to be a problem? YES, IT IS, because you are about to define a path to a folder called 'images' (with a small 'i').
Procedures to Practice
Procedures to Practice
Position the cursor over the image below.
Right-click the mouse and a shortcut menu appears.
Click Save image as... to display the Save Picture dialog box.
4. In the File name, the file name image1.gif or just simply image1 will appear. It is a GIF. In the Save as type, the file type will be GIF image.
Most images for the web are JPEGs, GIFs or PNGs.
5. In Save in text box at the top of the screen, select the location in which you saved. We will save it in the images folder inside the Procedures folder...are you sure are in the PROCEDURES folder and not in Portfolio folder??? The image will be stored in this location, ready for you to use.
6. Open table.html from the procedures folder.
Open with Notepad.
Position the cursor just after the </table> tag
Press Enter to move the cursor to the next line.
7. Type in following HTML (or copy and paste)
<p><img src="images/image1.gif" alt="new image" border="0" /></p>
The HTML tells the browser to look in the folder called images and get the file image1.gif src="images/image1.gif"
8. Save and preview in a browser to see the results.
The image you selected should appear on your Web page under the table.
Something else to try: If you want a border, you can indicate the thickness of the border by changing border attribute to a positive number, "1", "2", "3", and so on. The greater the number the thicker the border. Pick any thickness up to 9 and choose a border thickness.
More info:
Page updated
Report abuse