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.
Comments