CSCE 102 - Chapter 5 (Links, Images, & Multimedia) CSCE 102 - General Applications Programming...

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


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


Links Images

Multimedia


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


Links Images

Multimedia


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


Links Images

Multimedia


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


Links Images

Multimedia

Combining External and Internal Links


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


<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


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



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



Images as LinksLink an image to a URL<a href=“SomeURL”><img src=“ImageURL” alt=“Text about image” /></a>

Links Images

Multimedia



Links & Images Code SummaryConsult page 136

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



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


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


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

Date post:	29-Dec-2015
Category:	Documents
Upload:	scot-cunningham
View:	217 times
Download:	0 times

CSCE 102 - Chapter 5 (Links, Images, & Multimedia) CSCE 102 - General Applications Programming...

Documents