Adding Image, audio and video files to web pages

Adding Image, audio and video files to web pages Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.1Summary of the previous lectureInternal linksExternal linksDirectory StructureInternal document referenceSome attributes of Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.2OutlineAdding images to web pagesUsing images as linksImage mapAdding video to web pagesAdding audio to web pagesBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.31. Adding images to web pages tag is used to add images to web pagesSRC attribute of the tag is used to indicate the source of the imageWe can add an image byBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.41. Adding images to web pages...Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.5Root Directoryexamplesex.htmlimagesimg1.jpgImage tagSrc attributeImage path and name1. Adding images to web pages...Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.61.1 Attributes of tag Height and width:Alt attribute:Align attribute:Left, right, top, bottom, middle Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.74. Border attribute:Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.81.1 Attributes of tag Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.91.1 Attributes of tag Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.101.1 Attributes of tag Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.111.1 Attributes of tag Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.121.1 Attributes of tag Align topAlign middleBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.131.1 Attributes of tag Wrong image nameBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.141.1 Attributes of tag Image is foundImage not foundBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.151.1 Attributes of tag Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.161.1 Attributes of tag 2. Using images for linkingWe can put images between and tags instead of text to link other documents or portions of the page Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.172. Using images for linkingBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.18LinkImage 3. Image mapsImage maps allow you to add multiple links to the same imageEach link can point to a different pageEach of these clickable areas is known as a hotspot Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.193. Image mapsDefining a map:Step1 (Define a map): Step2(using the map):Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.203. Image mapsBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.21Map nameMapArea tagShapeCoordinatesLinkUsing a mapAdding an ImageEnd of Map4. Adding videos to web pagesThe tag is used to add a video to a web pageThis tag is provided in HTML5The src attribute of the tag is used to indicate the source of the videoWe can add a video to our page asBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.224. Adding videos to web pagesAttributes of tag:Auto-playControlsHeightLoopBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.234. Adding videos to web pagesBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.24Video tagSource of the videoAuto-play attributeLoop attributeControls attribute5. Adding audio to web pagesThe tab is used to add a video to a web pageThis tag is provided in HTML5The src attribute of the tag is used to indicate the source of the audioWe can add a video to our page asBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.255. Adding audio to web pagesAttributes of tag:Auto-playControlsLoopBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.26SummaryAdding images to web pageUsing images as linksImage mapAdding audio and video to web pageBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.27Chapter 3, Beginning HTML, XHTML,CSS, and JavaScript, by Jon Duckett, Wiley Publishing; 2009, ISBN: 978-0-470-54070-1. 28Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.References