Web Technologies and Programming Lecture 08

1Web Technologies and ProgrammingLecture 082Adding Image, audio and video files to web pages 3Summary of the previous lectureInternal linksExternal linksDirectory StructureInternal document referenceSome attributes of Other type of links4OutlineAdding images to web pagesUsing images as linksImage mapAdding video to web pagesAdding audio to web pages51. 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 imageThe tag is empty, it contains attributes only, and does not have a closing tag.61. Adding images to web pagesImages can be added as followsWe can add an image by71. Adding images to web pagesHTML Images SyntaxIn HTML, images are defined with the  tag.The tag is empty, it contains attributes only, and does not have a closing tag.The src attribute specifies the URL (web address) of the image:81. Adding images to web pagesThe alt AttributeThe alt attribute specifies an alternate text for an image, if the image cannot be displayed.The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).If a browser cannot find an image, it will display the alt text91. Adding images to web pagesImages can be added as followsIMG stands for "image." It announces to the browser that an image will go here on the page. SRC stands for "source." This again is an attribute. It's telling the browser where to go to find the image. 101. Adding images to web pagesImages supported by web.jpg.gif.png.jpeg.bmp111. Adding images to web pages...12Root Directoryexamplesex.htmlimagesimg1.jpgImage tagSrc attributeImage path and name1. Adding images to web pages...131.1 Attributes of tag Height and width:You can use the style attribute to specify the width and height of an image.The values are specified in pixels (use px after the value):Specifies the height and width of an image141.1 Attributes of tag Alt attribute:Shows alternate text when an image is not available 151.1 Attributes of tag Align attribute:Align the image as desired161.1 Attributes of tag Align attribute:Some values for aligned are 17 ValueDescription leftAlign the image to the left rightAlign the image to the right middleAlign the image in the middle topAlign the image at the top bottomAlign the image at the bottom1.1 Images in Another FolderIf not specified, the browser expects to find the image in the same folder as the web page.However, it is common to store images in a sub-folder. You must then include the folder name in the src attribute:Example181.1 Animated ImagesThe GIF standard allows animated images:Example19Border attribute:Add border around the image201.1 Attributes of tag Differences Between HTML 4.01 and HTML5The following attributes: align, border, hspace, and vspace are not supported in HTML5.211.1 Attributes of tag 221.1 Attributes of tag 231.1 Attributes of tag 241.1 Attributes of tag 251.1 Attributes of tag Align topAlign middle261.1 Attributes of tag Wrong image name271.1 Attributes of tag Image is foundImage not found281.1 Attributes of tag 291.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 302. Using images for linking31LinkImage 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 323. Image mapsDefining a map:Step1 (Define a map): 333. Image mapsDefining a map:Area can contain following valuesRectCirclecoord343. Image mapsDefining a map:Step2(using the map):Applying map on an image353. Image maps36Map 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 as374. Adding videos to web pagesVideos can also be added asYour browser does not support the video tag.384. Adding videos to web pagesIt supports following video formats39File FormatMedia Type MP4video/mp4 WebMvideo/webm Oggvideo/ogg4. Adding videos to web pagesAttributes of tag:Auto-playControlsHeightLoop404. Adding videos to web pages41Video tagSource of the videoAuto-play attributeLoop attributeControls attribute5. Adding audio to web pagesThe tab is used to add a audio 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 audio to our page as425. Adding audio to web pagesAudio can also be added as  Your browser does not support the audio tag.435. Adding audio to web pagesAudio formats supported by audio tag are44File FormatMedia TypeMP3audio/mpegOggaudio/oggWavaudio/wav5. Adding audio to web pagesAttributes of tag:Auto-playControlsLoop455. Adding audio to web pagesControl In audioThe controls attribute is a boolean attribute.Audio controls include:PlayPauseSeekingVolume46SummaryAdding images to web pageUsing images as linksImage mapAdding audio and video to web page47SummaryUse the HTML  element to define an imageUse the HTML src attribute to define the URL of the imageUse the HTML alt attribute to define an alternate text for an image, if it cannot be displayedUse the HTML width and height attributes to define the size of the imageUse the HTML  element to define an image-mapUse the HTML  element to define the clickable areas in the image-map48THANK YOU49