When you order your coffee, you're asked multiple questions: Do you want it hot or cold? regular or decaf? Having it here or take away? These is a set of additional information that's required to fit the coffee to your needs, or the attributes of how you'd like your coffee to be in that moment in time. Attributes are conditions that let's us customize our tags.
The Anchor tag
a is used to create links between two resources on the web, internal or external, and can be a web page, email, image or a download. The
a tag has multiple attributes, but let's focus on just 1,
Let's create another page in our portfolio. Create a new file called
work.html in the same directory as your
index.html. Here is some basic template code to get your going:
<html> <head> <title>Work</title> </head> <body> <p>Works</p> </body> </html>
The syntax for using
a with the
href attribute is:
Now we need to link our
index.html file to
work.html. For this, let's write a new
p that just says
Go Home in our
<p> Go Home </p>
Now to make this text clickable, we wrap it between
<p> <a> Go Home </a> </p>
Now we need to specify where this button takes us. Since both the files are in the same folder, we can just specify the name of the file with it's full extension:
<p> <a href="index.html"> Go Home </a> </p>
Great! Now open this in your browser and click on it. You'll notice you're taking to
index.html! As an exercise, try to create a link from
Create a new folder called
work and move your
work.html in it. Your folder structure should look something like this:
You'll notice your linking breaks. This is becuase we need to navigate directories. We'll need to remember two things for this:
../: Go up one folder
folder-name/: Go inside the folder
index.html link to
work.html, change the
<p><a href = "work/work.html">My Work</a></p>
And the link should be working again! But your link from
index.html is still broken. Let's get in there and fix it.
<p> <a href="../index.html"> Go Home </a> </p>
There you go! Now the links will be working again! Remeber, you can chain
../ multiple times to navigate directories, so if you want to go up by two folders, you need to use
../../file.html . This way of
navigation is consistent throughout your system, even in Terminal / Command Prompt! (using the
Now in our
work.html file, we want to link
https://admin2dev.com becuase ofcourse, we make it. Doing this is much simpler than internal linking. We just write in the full url:
<p> <a href="https://admin2dev.com"> Admin2Dev </a> </p>
Bonus: If you want to open it in a new tab, add
target="_blank" in your tag:
<p> <a href="https://admin2dev.com" target="_blank"> Admin2Dev </a> </p>
There are a lot of attributes to every tag we discuss in this starter course, if you want to dive deep into it, I highly recommend taking a look at
w3schools which lists and explains every single attribute of every tag.
Working with images is very similar to working with
a tags. Images are represented with an
img tag, and has 4 prominent attributes:
src: Source, tells the tag where to get the image from.
width: Sets the width of the image. (optional)
height: Sets the height of the image. (optional)
alt: Sets alternative text for better accessibility. This is also displayed if the image fails to load. (optional)
Now back in our
index.html, let's add a picture so the visitor knows how we look like. First, make a folder called
images and copy/paste the image in your
image folder and take a note of it's full
name and extension. I have renamed my image to
me.png. Now back in our
index.html, right after the
h1 tag, let's add our picture!
The dimensions are a little too, big. Let's change it's dimensions. For this, let's use the
width attribute. There are two ways of using the
- Specify the exact image size in pixels.
- Specify a percentage of the current window size (responsive).
It's a good practice to use percentage for images so it scales up and down based on the current window size, so mobile and desktop users have a great experience.
<img src="images/me.jpeg" width=20%>
Now to see the responsiveness in action, play around with your image size
Now, an important attribute, the
alt. Change the
src to random gibberish and add your
alt attribute like so:
<img src="images/me.jpeg" width=20% alt="picture of my face">
Now the image has a text stating what the image is about. This is also an accessibilty feature where a virtual assisstant can read out
alt text of an image to describe the person what the image is about. While not
necessary, it improves the accessibility of your website / content.
Bonus: Wrap your
a to make the image into a link!
You can download a zip of our current progress here.Join Discord Server to stay updated on Chapter 2