Bootcamp Notes – Day 3 (Wed) – Anchors and Multimedia

Hyperlinks and the <a> Element

<a href=”https://www.google.com”>Google</a>

The href attribute is the hyperlink reference. To link to another webpage or file, provide an absolute or relative path. Relative path is like saying “left” or “right” — changes depending on context; absolute path is like saying “north” or “south”

Use absolute paths when you need to link to an online resource that is not part of your website.

A relative path is relative to the current file or webpage’s location. Link to resources (other webpages, images, etc) in same location with only the resource name.

Same filesystem/different directory? Specify relative path from current directory by adding directory names before filename. Use ../ to go down a directory level.

Other ways to use <a> are…

Link to another element in the same page using id attribute.

Set id attribute on element to link to, eg: <section id=”chapter2″>

Set href on anchor element to that id using #, e.g.: <a href=”#chapter2″>Chapter 2</a>

Link to phone number: <a href=”tel:1+123-555-1212>Call</a>

Link to email: <a href=”mailto:info@somewhere.com”>Email</a>

Anchors and Multimedia

You can also optionally use width and height to control image size: otherwise, defaults to actual image size. You can specify number in pixels, without unit size – “100” not “100px”.

If you specify only one size or the other, then the browser will autosize the image with original ratio.

Now we talk about the <video> element. It is new in HTML5 and it replaces FLASH and silverlight which were used before to play video. It requires src attribute: path to video file. It also supports these three major video format: MP$, OGG, WEBM

Look at this example below:

<video src=”someVideo.mp4″ controls>Your browser does not support HTML5 video. Here is <a href=”someVideo.mp4″>a link to the video</a> instead. </video>

From the example above, text between start and end tag is called the fallback content. The fallback content shows in browsers that don’t support HTML5 embedded video. It is a good idea to link the video using <a> element so it can still be accessed. The controls is a Boolean attribute which embeds a video player.

Now we can add width and loop to our example:

<video src=”someVideo.mp4″ controls width=”200″ loop>Your browser does not support HTML5 video. Here is <a href=”someVideo.mp4″>a link to the video</a> instead. </video>

Width & height can be specified just the same as with <img>

The loop cause the video to replay when video is finished. If you don’t want the video to loop then just leave the loop out!

Words of advice for autoplaying a video. The autoplay attribute exists but don’t use it!

Additional Resources

• What are VOID Elements?
• W3Schools – HTML a tag
• MDN – Anchor <a> element
• CoffeeCup – Absolute vs. Relative Paths/Links
• MDN – What is a URL?
• W3Schools – HTML <img> tag
• MDN – Images in HTML (guide)
• MDN – <img> element (reference)
• Moz – Alt Text
• W3Schools – Multimedia
• MDN – Video and audio content