Adding graphics to your web page

1,839 views

Published on

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,839
On SlideShare
0
From Embeds
0
Number of Embeds
1,484
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Adding graphics to your web page

  1. 1. Adding Graphics to your Web Page
  2. 2. Starter Activity: Create a montage of zoo logo’s that you like. Adding Graphics to your Web Page
  3. 3. In this lesson you will learn how add and resize graphics using html. You will create and add the logo along with three other images to your zoo homepage. Lesson Objectives  Be able to add graphics to a web page  Be able to resize graphics on a web page  Be able to create simple animations  Be able to add animations to a web page Adding Graphics to your Web Page
  4. 4. Graphics There are two main types of graphics files that are used on web pages. .gif files: usually animated graphics .jpg files: usually photographs To help the browser identify and find an image, you use the following command: <img src="bike.gif"> Adding Graphics to your Web Page
  5. 5. Height, Width and Alignment of Graphics The Height and width of graphics are listed in pixels. The code for the below image is like this: <img src="masks.jpg" width="149" height="140"> The code to align an image is like this: <img src="masks.jpg" align="left" width="149" height="140"> Adding Graphics to your Web Page
  6. 6. Task 12: Zoo Homepage 1.Create a logo for the zoo which includes the name of the zoo using a graphics program 2.Save the logo as logo.jpg into you ‘Coding Websites’ folder 3.Load the text editor and open your HTML document: zoohomepage.html 4.Add the logo to the top left of your web page 5.Add a minimum of three other images of your chose – resize the images using code. 6.Save the document and then preview your work. Adding Graphics to your Web Page
  7. 7. Height, Width and Alignment of Graphics The Height and width of graphics are listed in pixels. The code for the below image is like this: <img src="masks.jpg" width="149" height="140"> The code to align an image is like this: <img src="masks.jpg" align="left" width="149" height="140"> Adding Graphics to your Web Page
  8. 8. Plenary: Animated Gif 1.Save three images of animals from the Internet – all the same size 2.Make an animated gif of the different animal images using the website: http://makeagif.com/ 3.Add the animation to your zoo webpage Adding Graphics to your Web Page
  9. 9. Keywords  Be able to add graphics to a web page  Be able to resize graphics on a web page  Be able to create simple animations  Be able to add animations to a web page Objectives  img scr  Width  Height  Align  .gif  .jpg     Adding Graphics to your Web Page
  10. 10. Keywords  Be able to add graphics to a web page  Be able to resize graphics on a web page  Be able to create simple animations  Be able to add animations to a web page Objectives  img scr  Width  Height  Align  .gif  .jpg     Adding Graphics to your Web Page

×