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

Web Development CS December 16, 2020

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

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”

The absolute path will stay the same no matter where the link is coming from. For web browsers, the absolute path is the full URL of the resource, such as https://www.google.com

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

We will talk about these:

The <img> element
<img> attributes
The <video> element
<video> attributes

The <img> element is a void element and only has one tag. It requires src attribute: path to image file.

Example: <img src=”someImage.jpg” /”

The most common image formats for the web: GIF, PNG, JPG, SVG.

– JPG (sometimes JPEG) and PNG are very common.

– Use JPG for photos; png for digitally created graphics such as logos.

Always include the Alt Attribute to your images. Always include alt attribute with descriptive text about image.

For example <img src=”strawberry.jpg” alt=”Photo of a ripe, red strawberry with a white background” />

Why use the alt attribute? For these reasons:

For visually impaired users using screenreaders.
If the image cannot be loaded for some reason, the text will show instead.
It will also help search engines get more information about your webpage.

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:

eBay Electronics: Best tech for way less - Up to 50% off and free shipping

<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