csce 102 - chapter 5 (links, images, & multimedia) csce 102 - general applications programming...
Post on 29-Dec-2015
217 Views
Preview:
TRANSCRIPT
CSCE 102 - Chapter 5 (Links, Images, & Multimedia)
CSCE 102 - General Applications Programming
CSCE 102 - General Applications Programming
23/4/19 Benito Mendoza 1
By
Benito Mendoza
Department of Computer Science & Engineering
LinksImages
Multimedia
CSCE 102 - Chapter 5 (Links, Images, & Multimedia)23/4/19 Benito Mendoza 2
The power of the WWW lies in the ability to quickly load, via hyperlinks, one document from another at the click of a mouseLinks are in-line elementExternal Links:
Link to another webpageInternal Links:
Link some part of the same documentWeb Site Structure:
Web sites are normally broken in several pages (files) instead of a single file because small files load faster and smaller documents are easier for people to read
Internal LinksExternal Links
Links Images
Multimedia
CSCE 102 - Chapter 5 (Links, Images, & Multimedia)
Website StructureAny opened HTML document always uses current working path as default location
http://www.cse.sc.edu/~mendoza2/csce102/index.html
Can link to any document within path without using full location
csce102syllabus.html
Full path location required when not located on the same server/computer
http://www.google.com
Internal LinksExternal Links
Links Images
Multimedia
CSCE 102 - Chapter 5 (Links, Images, & Multimedia)23/4/19 Benito Mendoza 4
The anchor <a> tag and "href" attribute are used to create a hyperlink.<a href = “http://www.cse.sc.edu/~mendoza2/index.html”</a>The value of the href attribute for an external link is a valid URL.The link will be rendered in the browser What happens if an exact file is not specified?
The web server will send the default document specified in the server setup
What happens if the specified URL does nor exist?
The web server will return the error
Internal LinksExternal Links
Links Images
Multimedia
CSCE 102 - Chapter 5 (Links, Images, & Multimedia)23/4/19 Benito Mendoza 5
Links within the same document require a target anchor and a hyperlink anchorThe target anchor is of the form: <a id=“somelabel”>
The hyperlink anchor is of the form: <a href=“#somelabel”>
The “#” indicates that this is a target internal to the document
Internal LinksExternal Links
Links Images
Multimedia
CSCE 102 - Chapter 5 (Links, Images, & Multimedia)23/4/19 Benito Mendoza 6
It is possible to link to a document and then target an intermediate location in the page
1. Create the internal target in the page to be linked to
2. Use an external hyperlink with an internal target hyperlink
An example: http://www.mysite.com/myfile.html#contents
Internal LinksExternal Links
Links Images
Multimedia
Combining External and Internal Links
CSCE 102 - Chapter 5 (Links, Images, & Multimedia)
GIF – Graphics Interchange FormatLossless compression256 colorsPatented (cannot use free software to create)
JPEG – Joint Photographic Experts GroupLossy compression16 million colors
PNG – Portable Network GraphicsPatent free solution to GIF5% -25% more compressible than GIF
Links Images
Multimedia
TypesImages in XHTMLCreating/Saving Images
CSCE 102 - Chapter 5 (Links, Images, & Multimedia)
<img> is an empty element<img src=“URL of image” alt=“Alternative Text” />
Image location can be local or remoteAlternative Text is to be displayed in lieu of image.Required in XHTML
TypesImages in XHTMLCreating/Saving Images
Links Images
Multimedia
CSCE 102 - Chapter 5 (Links, Images, & Multimedia)
Inline image alignmentUse “align” attribute (deprecated)
<img src=“URL” align=“center” alt=“Centered image” />align values: left, center, right, top, middle, bottomaffects alignment with respect to inline text
Use <p> tag with “align” attribute<p align=“center”>
<img src=“URL” alt=“Centered image” />
</p>
Links Images
Multimedia
TypesImages in XHTMLCreating/Saving Images
CSCE 102 - Chapter 5 (Links, Images, & Multimedia)
More Image attributesWidth and Height
<img src=“ImageURL” alt=“Text about Image” width=“50” height=“100” />Can be either pixels or percentage50 and 100 are just example pixel numbersOrdering of attributes not criticalAppend % to number for percentage
Links Images
Multimedia
TypesImages in XHTMLCreating/Saving Images
CSCE 102 - Chapter 5 (Links, Images, & Multimedia)
Images as LinksLink an image to a URL<a href=“SomeURL”><img src=“ImageURL” alt=“Text about image” /></a>
Links Images
Multimedia
TypesImages in XHTMLCreating/Saving Images
CSCE 102 - Chapter 5 (Links, Images, & Multimedia)
Links & Images Code SummaryConsult page 136
Links Images
Multimedia
TypesImages in XHTMLCreating/Saving Images
CSCE 102 - Chapter 5 (Links, Images, & Multimedia)
Links & Images Code SummaryImages may be obtained from graphic art collections either on the web or on a CD-ROM, or you may create them yourselfImages may be copied right off a web page by putting the cursor over the image, right clicking, and then selecting “Save Picture as…” (Internet Explorer) or “Save Image as…” (Navigator)MS Paint
Links Images
Multimedia
TypesImages in XHTMLCreating/Saving Images
CSCE 102 - Chapter 5 (Links, Images, & Multimedia)
Audio files can be quite large and take a long time to download; video images are hugeStreaming the audio or video is a method used to playback the audio/video data before the download completes, but this requires a fast connection with sufficient bandwidthThe non-standard <embed> tag is used to place audio/video content in a web pageAnimated GIF files are image files that have multiple images stored inside a single fileAnimated GIFs are played back by the browser and require only a standard image tagEmbedding an audio (or video) file in a Web page with the full console of controls:
<embed src="soundeffect.wav" autostart="false" width="280" height="45" align="right" />
Links Images
Multimedia
CSCE 102 - Chapter 5 (Links, Images, & Multimedia)
Images can be configured with multiple hyperlinks using an image as a client-side image mapThe image “hotspots” (hyperlinks) can be rectangular, circles, or polygonsThe hotspots are located on the image using coordinatesUse the paint program to determine the coordinates on an image; the x,y coordinates can be read at the bottom of the application as one moves the cursor over the image
Links Images
Multimedia
Image Maps
CSCE 102 - Chapter 5 (Links, Images, & Multimedia)
Creating an Image Map<a href="http://www.frenchtravel.com"><img src="eiffel.gif" alt="Eiffel Tower Picture" /></a>Creating clickable map regions (two rectangles, in this case):
<map id="myFirstMap" name="myFirstMap"><area shape="rect" coords="x1,y1,x2,y2" href="someURL" /><area shape="rect" coords="x3,y3,x4,y4" href="anotherURL" />
</map>Overlaying an image on the clickable map regions to create an image map:
<img src="mapimage.gif" alt="Client-side map image" usemap="#myFirstMap" width="250" height="376" />
Links Images
Multimedia
top related