Attributes

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.

Anchor

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, the href.

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:

<a href="url-goes-here">...</a>

Internal Linking

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 work.html file.

<p> Go Home </p>

Now to make this text clickable, we wrap it between <a> and </a>.

<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 index.html to work.html.

Navigating Directories

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

In your index.html link to work.html, change the href to:

<p><a href = "work/work.html">My Work</a></p>

And the link should be working again! But your link from work.html to 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 cd command).

External Linking

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.

Images

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!

<img src="images/me.jpeg">

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 width and height attributes.

  • 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 img with 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