1 / 11

Adding Images with HTML

Adding Images with HTML. Images and Links. Images. <img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" width="304" height="228" > The image tag is an empty tag. This means you don’t have to close it. src attribute is the location of the image.

kamana
Download Presentation

Adding Images with HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Adding Images with HTML Images and Links

  2. Images <img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" width="304" height="228" > • The image tag is an empty tag. This means you don’t have to close it. • src attribute is the location of the image. • When looking at the example, try changing the border to something other than 0 and see what happens. Example

  3. Other attributes of the Image tag • <img src="boat.gif" alt="Big Boat" /> • The "alt" attribute tells the reader what he or she is missing on a page if the browser can't load images. The browser will then display the alternate text instead of the image. Example

  4. Image Alignment <img src="hackanm.gif“ align="bottom" width="48" height="48"> • The width and height attributes can be set if you want to specify the size of the picture. You do not have to however. • The align attribute is no longer used, however still works in most browsers. We now use CSS to align text with images. Example (The old way, using align attribute)

  5. Other Image Attributes When aligning text with an image using CSS, it looks like this: img { vertical-align:middle; }

  6. You Try It! Let’s add some images to a web page. • Create a new folder in your Web Design Class folder called addingPics. • Inside this folder, create another folder called pics. • Go online and find 3 pictures of your favorite animal. Save the pictures in your new pics folder. • Create a new web page and insert your pictures. Each picture should be inside its own paragraph. • Be sure to include the following items on your web page: • A title • A heading of h1 (something like My Favorite Animal) • An ordered list that gives at least 3 reasons why you chose the animal to be your favorite. • Add a background color to your web page using CSS. • Make sure that your images don’t appear to large on the web page. • Add a border to each image and alt text. • Use CSS styles to make your h1 heading a different color font.

  7. Hyperlinks Review Four types: • Link to a file • Link to another web site • Link to a place on the same page (Anchor) • Mail to link … sends an email to an address.

  8. You Try It! • Open your My Favorite Things web page and view the source code. • Create hyperlinks to a web page for each of your movies. The title of the movie should be the link and they should open a web page about the movie. • Example: <a href=“http://www.imdb.com/title/tt0133093/ “>The Matrix</a> (Go ahead and click on the link....)

  9. W3schools.com • Use the w3 schools web site and see if you can get the next two challenges. • Save each challenge as stump3.html and stump4.html

  10. Stump the Chump #3 1. Create a web page that uses CSS to style headings 1 through 6 the following way: • H1 should be red, centered on the page, and use a font called impact. • H2 should be green, right-aligned on the page, and use a font called arial. • H3 should be blue, left-aligned on the page, and use a font called Georgia. • H4 should be yellow, left-aligned on the page, and use a font called Comic Sans MS. • H5 should be a shade of pink, centered, and use a font called Tahoma. • H6 should be a shade of orange, right-aligned, and use a font called Lucida Console. • After setting the CSS for the headings, add the following to the body of the web page: • Using the heading 1 tag type: This is what heading 1 looks like. • Using the heading 2 tag type: This is what heading 2 looks like. • Using the heading 3 tag type: This is what heading 3 looks like. • Using the heading 4 tag type: This is what heading 4 looks like. • Using the heading 5 tag type: This is what heading 5 looks like. • Using the heading 6 tag type: This is what heading 6 looks like.

  11. Stump the Chump #4 • Use this web site and choose a nice background image and save it to your folder. • Create a web page that uses the image for the background of the web page. • You will need to look on w3 schools web site in the CSS section to see how to use an image as a background for a web page. • Type one paragraph that says: I figured out how to use CSS to add an image as a background!

More Related