3. HTML: A Detailed Look

August 13, 2018


In the previous post we looked at how easy it is to actually create a webpage. Of course, not the most informational, content-rich or beautiful webpage, but one that is yours. By now you probably have a lot of questions. No worries, we will go through them one by one.

First and most importantly:

What is HTML?


HTML or Hyper Text Markup Language serves as the backbone that holds all of the content of any webpage. Literally all of them.

“Even giants like Facebook, Google, Amazon?”

Yes. They weren’t developed the way you are developing right now, but the technology to display content is the same.

Is there an <h2>?


Yes, not only <h2> but it goes all the way to <h6>. Let’s try it out and see for ourselves! In the same .html file you created when reading last post, just copy and paste the <h1> heading 5 more times, so you have 6 in total, then just change the numbering as follows:

<h1>Web Development: Day 1</h1>
<h2>Web Development: Day 1</h2>
<h3>Web Development: Day 1</h3>
<h4>Web Development: Day 1</h4>
<h5>Web Development: Day 1</h5>
<h6>Web Development: Day 1</h6>

How many elements are out there?

A lot. We’re going to go through the most important and commonly used ones in this post.

Lists


Most webpages list stuff. Be it the latest news, tops, e-shop items, pictures, you name it! So let’s list some stuff ourselves! Let’s begin with the unordered list, what does that mean? It means that the individual items are provided in no specific order.

For example, you could create a shopping list for groceries. To write a list, you have to start with the opening and closing tags:

<ul>
</ul>

(for unordered list)

Next up, lists contain list items. Each list item also has opening and closing tags:

<ul>
<li></li>
</ul>

That’s it! Now all you have to do is create as many list items and fill the area between the tags with groceries, like so:

<ul>
<li>Milk</li>
<li>Bread</li>
<li>Cheese</li>
</ul>

The result should look like this in the browser:

Ordered lists are made the same way, just edit the list tags themselves from <ul> to <ol> (for ordered list), like so:

<ol>
<li>Milk</li>
<li>Bread</li>
<li>Cheese</li>
</ol>

The result should look like this in the browser:

Links


What would the internet be without links? Obviously websites link to one another and they have links for other pages and even link to positions in the same page aswell! Let’s create a link right now. Just as with most HTML elements, links need opening and closing tags aswell. They are written like so:

<a></a>

“What does “a” stand for?”

It stands for “anchor”, don’t ask me why. We just roll with it. If you add a link element like above to your webpage and refresh the browser, nothing has appeared. Why?

It’s because a link element has multiple parts:

  • The link text
  • The link target
  • Additional elements

So let’s add the link text first:

<a>My first link!</a>

“Okay, the text appeared, but I can’t click it?”

Yes, because we’re still missing the link target. The link target is where you will be sent to after you click the link. Choose the full address to your favorite website, or just use “https://www.google.com/” and add it as a link target like so:

<a href="https://www.google.com/">My first link!</a>

Yay! It became active and is now clickable! How about the other additional link elements? Most important ones are the “target” and “title” elements, let’s add them:

<a href="https://www.google.com" target="_blank" title="Sends you to Google search!">My first link!</a>

As you see, the elements can be added within the tag, just by adding them before the “>” character.

The target element specifies what relation your page and the linked webpage have, in our case, we simply specify to open the link in a new (blank) tab.

The title element provides any additional information for when a user puts their cursor over the link but doesn’t click it yet, try it!

Tip:

Before clicking on a link, always check where it leads by looking at the lower left corner of the browser. Links, especially in e-mails might be dangerous, so compare the links whether they have the same starting part as the website you intend to go to, for example, if you receive a link that says it will go to Facebook, hover over it with your cursor and double-check whether the link really starts with “https://www.facebook.com/”. Nowadays you can easily put yourself in danger by clicking the wrong link.

Images


Ah yes, what would the internet be without cat pictures, memes and the sorts. Adding an image to your website is very easy. There are also multiple ways to do it, but I will show you the easiest for now. Let’s add an image:

<img src="https://s3-eu-west-1.amazonaws.com/onin.london/assets/macexplorer.com-puppy-dog-26.jpg">

“src” means “source”, where is the image located. You can change this part to whatever you like, just take note that the link should end with an image extension, like “.jpg” as in our case or for example: “.jpeg”, “.bmp”, “.gif” and others. 

You can get the link of any image on the internet by right clicking it and choosing “Copy image address” for Chrome.

You can also add images from your computer, just go to the folder where the image is located and copy the path from the address bar, add the image file name and extension, for example, like this:

Note, that the img element does not have a closing tag.

Summary


By now you should already feel comfortable using HTML elements. We gained a bit of knowledge about the most commonly used elements on the internet and tried them out for ourselves! Good job!


BasicsBlogDevelopmentHTMLKnowledgeLearnProgramming