Links and multimedia

Websites

To be precise, files with HTML code are webpages. When they're joined together, they become a website.

Links

That's what links, or hyperlinks, do: they join together webpages and connect them with other websites.

Clicking links

So, instead of having to type a webpage's or website's address into a web browser, links can take us there with a simple click.

Link tag

The link tag is short and simple: <a>. In between the opening and closing tag goes text we want to be visible on the webpage.

<!doctype html>
<html>
 <body>
  <a>Take me somewhere!</a>
 </body>
</html>

Easy! The web browser will display anything in between the opening and closing tag as a link.

Attributes 1

To make the link work, we still need to add a destination address. For that, we'll use something known as a attribute.

Attributes 2

Attributes provide additional information to tags and go inside the opening tag. The attribute we need for links is called href.

<!doctype html>
<html>
 <body>
  <a href>Take me somewhere!</a>
 </body>
</html>

Sweet! We'll use href to add a destination address we want to link to.

Attributes 3

The href attribute still needs a value. For that, we need to add an equals sign and quotation marks.

<!doctype html>
<html>
 <body>
  <a href="">Take me somewhere!</a>
 </body>
</html>

Awesome! This means that href will receive the value of what we'll put inside the quotation marks.

Attributes 4

Now we only need to provide a destination address, also known as a Uniform Resource Locator, or URL for short.

<!doctype html>
<html>
 <body>
  <a href="https://pywe.org/">Take me somewhere!</a>
 </body>
</html>

Finally, we have a working link! Where might it take us?

Using href

Let's build the href attribute from scratch.

<!doctype html>
<html>
 <body>
  <a href="https://pywe.org">Take me somewhere!</a>
 </body>
</html>

Simple! We can add any URL we want as a value.

Using links

Now let's create another link tag just to get the hang of it.

<!doctype html>
<html>
 <body>
  <a href="https://pywe.org/courses/">Take me somewhere!</a>
 </body>
</html>

You're great at making links! Maybe you should be called "Link", just like in that old video game.

Local links

We can also link to local files. This link works only if we have an index.html file saved in the same folder.

<!doctype html>
<html>
 <body>
  <a href="index.html">Take me somewhere!</a>
 </body>
</html>

Nice! We'll use these type of files when we'll start working on our own website.

Images 1

If we want to add images to our site, there's a tag for that as well.

<!doctype html>
<html>
 <body>
  <img>
 </body>
</html>

Nice! We'll soon add an actual image to this tag as well.

Images 2

Just like <br>, <img> is an empty tag, which means it has no closing tag.

<!doctype html>
<html>
 <body>
  <img>
 </body>
</html>

Perfect! If we want to add an image, we just need to use the <img> tag and not worry about closing it.

Images 3

Because <img> is an empty tag, we need to use an attribute to point to an image: the word src, which stands for source.

<!doctype html>
<html>
 <body>
  <img src="">
 </body>
</html>

Nice! This src attribute will let us specify where to get the images from.

Local images

Again, we can use local images. That means we can point to images that are in the same folder as the webpage.

<!doctype html>
<html>
 <body>
  <img src="image.png">
 </body>
</html>

Great! Just like before, this link works as long as we have an image.png file in the same folder.

Linking images

But we can also use a URL to point to an image on another website.

<!doctype html>
<html>
 <body>
  <img src="https://www.pywe.org/static/edufield/img/logo.png">
 </body>
</html>

Sweet! We can link any images we want this way.

Width

We can also use attributes that change the size of images. For example, the width attribute adjusts the width of the image.

<!doctype html>
<html>
 <body>
  <img src="https://www.pywe.org/static/edufield/img/logo.png" width="100">
 </body>
</html>

Nice! We've just changed the width to 100 pixels.

Height

If we want to adjust how high an image is, we just need to add the height attribute with a value inside quotation marks.

<!doctype html>
<html>
 <body>
  <img src="https://www.pywe.org/static/edufield/img/logo.png" width="100" height="70" >
 </body>
</html>

That's it! That's how we can adjust the images in our website.

Webception

There's another very useful tag we can use to display a webpage inside another webpage. 

Inline frames 1

We can do that with the inline frames tag, <iframe>.

<!doctype html>
<html>
 <body>
  <h1>My favorite website</h1>
  <iframe src="https://pywe.org.com"></iframe>
 </body>
</html>

Great! We can use the <iframe> to add a webpage, or something from a webpage, inside another webpage.

Inline frames 2

A great way to include videos in a web page is to use YouTube and the easiest way to get there is to add an inline frame.

<!doctype html>
<html>
 <body>
  <h1>My favorite video</h1>
  <iframe src="https://youtube.com/embed/Vhh_GeBPOhs">
  </iframe>
 </body>
</html>

Isn't that great? Most websites add videos the exact same way.