Introduction to Web Site Development

1. John Hurley Department of Computer Science California State University, Los Angeles Introduction to Web Site Development Lecture 3: More Elements Hyperlinks and Images Audio and Video

2. Set up speakers

3. URL

4. Filenames • Don’t put spaces in your filenames – this will confuse a web server • Avoid using capital letters in filenames • UNIX is case-sensitive, although some web servers are configured to ignore case • Windows is not case-sensitive, so you may encounter a very confusing situation

5. index.html • If a path shows no filename, server will look for index.htm or index.html in the directory indicated. • That’s why you don’t need to type “index.html” at the end of the url to the class page.

6. Absolute URLs • Full URL, including protocol, hostname, path and filename (optional) • <a href="http://www.yahoo.com">Yahoo</a>

7. Relative URLs • A URL that is relative to a base URL • Plain filename finds that file in the current directory • ./ = current directory • ../ = parent directory • / = replaces everything from hostname onwards • // = replaces entire path, back to the protocol • See http://www.calstatela.edu/faculty/jhurley2/classes/cs120/pathlinks.html

8. Slashes Are More Complicated Than You Think! • Windows uses backslashes in paths, eg C:\users\john\documents\resume.docx • UNIX uses frontslashes, eg: Cs120s100/public_html/mydocument.html • Frontslashes will work in relative paths in html, even if the file is on your Windows machine: <imgsrc = “images/godzilla.jpg” /> • If you use backslashes in your relative paths, they will work on your Windows HD but NOT on the Linux server

9. Linking to A Specific Location In A Document • In your destination document, define a location to link to using the ID attribute • Example: • <p id="security">This is a paragraph with an ID.</p> • In your source document, define a hyperlink to the destination document, appending an #id to the URL • Example: • <a href="http://www.site.com/index.html#security">Security Link</a> • If you are linking to a location in the same page, just set the href to # followed by the id: • <a href = "#origins">Origins</a>

10. Images • A rectangular array of pixels • Bitmaps (Map of bits) • Pixmaps (Map of pixels) • Images tend to be quite large so compressed formats are quite common, especially on the web • Some compression techniques include • Color reduction • Frequency analysis

11. Web-Friendly Images • Joint Photographic Experts Group (JPEG) • JPG, JPEG, JP2 extensions • Variable loss format • Graphic Interchange Format (GIF) • GIF extension • Lossless format • Portable Network Graphic (PNG) • PNG extension • Lossless format

12. The IMG Element (Basics) • The img element can be used almost anywhere • For example: • Within body and li elements • Within p

13. The IMG Element (Syntax) • Description • Marks embedded image content • Link to external image (outside your site) with similar syntax to anchor element • Self-closing tag • Example • <p>Watch out, Godzilla is coming! </p> • <img src = "images/godzilla.jpg"alt = "godzilla" />

14. The IMG Element (Attributes) • Required Attributes • src: URL to specify location of image • alt: Alternative text (called fallback content) • Most browsers will display fine without alt, but it is required by the specs for html • Alt is what blind people will hear when using a screen reader

15. The IMG Element (Attributes) • src includes the url of the location of the image file. Usually this is a relative path • A src attribute like src = “c:\users\john\pictures\mypicture.jpg” will never work on the server, because it is pointing to a document on your hard drive.

16. The IMG Element (Attributes) • If the relative path is different on the server that on your hard drive, your file will work locally but not on the server. I recommend you set up a directory structure on your HD corresponds to the one you set up on the server. • If your file will be at public_html/labs/myfile.html And uses an image at public_html/labs/images/mypic.jpg The relative path is images/mypic.jpg

17. The IMG Element (Attributes) • Non-required Attributes • usemap: Associates an img with a map • title: Associates an img with a tool tip • width in px or % • with %, image will scale when you change the window size • height in px • combining height and width distorts aspect ratio

18. Figure • Used to associate a figure (often an image) with a caption <figure> <img width = “50%" src = "godzilla.jpg" /> <figcaption> Watch out! </figcaption> </figure>

19. Images and Hyperlinks • The img element can be a child of the a element • Example: <p>Click the picture to learn more about Godzilla</p> <a href="http://en.wikipedia.org/wiki/Godzilla"> <img src="images/godzilla.jpg" /> </a>

20. Imagemap • Image that contains links. Clicking on different parts of the image directs the browser to different links • Example: http://www.mediawiki.org/wiki/Extension:ImageMap

21. The MAP Element (Basics) • The map element defines an image map • An image map is a set of clickable regions (areas) on an image that can be associated with hyperlinks • Contains zero or more area elements

22. The MAP Element (Syntax) • Description • Used to define an image map. • Example • <map name="thismap"></map>

23. The MAP Element (Attributes) • Required Attributes • name: Associates a map element with a named identifier. This named identifier is used by the img element to associate it with a particular map. Names are referenced by img using hash-name references (# sign followed by the named identifier) • Example: • <map name="thismap"></map><img src="image.jpg" usemap="#thismap" />

24. The AREA Element (Basics) • The area element specifies a region of an image that is associated with some text, a hyperlink, or a dead area • Text: alt (fallback) text • Hyperlink: area has a hyperlink (href) attribute • Dead Area: area with no href or alt text

25. The AREA Element (Syntax) • Description • Marks a clickable region of an image map. • Self-Closing Tag • Example • <AREA shape="circle" coords="170, 100, 50" href="http://www.yahoo.com" alt="Yahoo!" /> • If you change the size of the image, the coordinates won’t be correct!

26. The AREA Element (Attributes) • Attributes • href: Specify a hyperlink to go to when an area is clicked on • alt: Alternative (fallback) text • shape: Shape of area (circ, poly, or rect) • coords: List of image coordinates

27. Associating Maps to Images • How to associate an image with a map • Give the map a name attribute • The map *must precede the img element in the file* • Use the usemap attribute of the img element, which, let’s say again *comes after the map in the file* • Reference the name using a hash name reference. Don’t forget the hash. • Example • <map name=“thismap"> <area shape="circle" coords="170, 100, 50" href="http://www.yahoo.com" alt="Yahoo!" /></map><img src="image.jpg" usemap="#thismap" />

28. How To Get Coordinates • Commercial html editors have imagemap editors, Free ones usually don’t • GIMP (free alternative to Adobe Photoshop) has one • There is an online one at http://www.mobilefish.com/services/image_map/image_map.php • This generator is limited: picture file can not exceed 100K. • Undocumented but *very important* instruction: when you create a polygon with this map generator, hit the windows key when you click on the last point. • Copy and paste the map code it outputs into your document. You will need to change the src attribute in the image tag to match the path on the server, and you will probably also need to add file:// to the beginning of the path to the file.

29. Dead Space • Dead space consists of areas of an imagemap that are not linked to any URL. • You can set all dead space to point to a particular url by putting the image inside an anchor element.

30. HTML5 Video New in HTML5, may not be supported by all browsers. <video src="sample.mp4" poster="images/godzilla.jpg" width = "70%" controls = "controls" > This is fallback content to display if the browser does not support the video element. </video> If a browser supports <video>, it will ignore the text. If not, it will ignore the element tags. If it does this, it will end up displaying the content as if there were no tags. Pretty cool, huh?

31. HTML5 Audio Another new HTML5 element. Works well in at least IE and Chrome. <audio controls="controls"> <source src="ladonna.mp3" >ladonna.mp3</source> Your browser does not support the audio element. </audio> Optional: autoplay = "true" bad idea!

32. The BDO Element • Description: • Controls the direction of text • Override the DIR attribute • Used to put right to left text in a document that generally used a left-to-right alphabet • Comments: • Start Tag: Required • End Tag: Required • Self-Closing Tag: Forbidden • Example: • <bdo dir=“rtl">Madam, I’m Adam<bdo>

33. BDO Example <body> <p> Madam, I'm Adam. </p> <p> <bdo dir="rtl">Madam, I'm Adam.</bdo> </p> </body>

34. The Dir Attribute • Description • Controls the direction of the flow of content. Use for creating right-to-left flow in documents using right-to-left alphabets • Values • RTL (right-to-left) • LTR (left-to-right) is only necessary when you want some content in an rtl element to revert to ltr

35. dir Example <!DOCTYPE html> <html dir = "rtl"> <head> <meta charset="utf-8" /> <title>Lab 2</title> </head> <body> <img src = "images/godzilla.jpg" width = "25%"/> <p> The Smog Monster is coming! Only Godzilla can save us now! </p> <p> <bdo dir="rtl">The Smog Monster is coming! Only Godzilla can save us now!</bdo> </p> </body> </html>

36. Metadata • Data about the page • Used by browsers, other applications that parse your documents. • Certain meta elements may help with search engine ranking • Also helps browsers and other applications parse your document • Use <meta> element in head

37. Metadata • Search engine ranking algorithms are proprietary, but some meta elements are thought to improve your document’s visibility • <meta name="description" content=“lab assignment for cs120“ /> • <meta name = “keywords” content = “exciting, dynamic, useful, educational />

38. More on UNIX commands • It is easy to find lists of basic UNIX commands on the WWW. One useful one is at http://kb.iu.edu/data/afsk.html • You will certainly need to use the UNIX commands cd, ls, put, mkdir, mv, and chmod. • Note that, to go up a directory hierarchy one level, use cd .. with a space before the dots (confusingly similar to DOS!). In other words, if you are in directory1/directory2 and type cd .., you will end up in directory1.

39. Directory Permissions • For this week’s lab, you will need to create a new directory within public_html • You will need to set the permissions for this directory so that all users (that is, anyone on the internet) can execute. In this case, the directory will be called labs. • You can set the execute permission for the directory from it’s parent directory, which in this case is public_html, like this: • chmod a+x labs • Note that this is the same way you set permissions for a regular file • Permissions for public_html are the same, but they are already set up this way