Beginner’s Guide to Web Development Part 2 : Building Up the Index Page

Beginner’s Guide to Web Development Part 2: Building Up the Index Page

Welcome back to Beginner’s Guide to Web Development series. Today we’re on Part 2. We’ll be learning some more HTML tags today. We’ll learn the commonly used tags in web development. We’ll continue with building our own website.

If you would also like to check out the accompanying YouTube video, here’s the link:

In the first part, we wrote the following HTML code:

<a href="https://medium.com/media/cccd6cf0533551152118d9ae96b2ff5b/href">https://medium.com/media/cccd6cf0533551152118d9ae96b2ff5b/href</a>

And the output on the browser was:

Now let’s go ahead and add a heading tag. Heading tag is represented in 6 different levels. <h1>, <h2>, <h3>, <h4>, <h5> and<h6>. H1 being the highest level and h6 being the lowest level. Read more about heading tags at: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements

It is a good practice to have h1 level heading to be the first, then as we represent the inner heading section, we go lower and lower numbers.

Since we’re building a personal site, let’s give our name as the main heading tag.

<a href="https://medium.com/media/b09b540f480c0758b3ee4f9741beebf3/href">https://medium.com/media/b09b540f480c0758b3ee4f9741beebf3/href</a>

Output:

Next thing is a paragraph. A paragrap tag is represented by, you guessed it: <p> tag. And the closing is </p>. Let’s add a description paragraph about ourselves.

<a href="https://medium.com/media/da05487f0bab3f62684552c2cfbf0d37/href">https://medium.com/media/da05487f0bab3f62684552c2cfbf0d37/href</a>

Output:

Notice the paragraph going all the way to the right corner of the page. We can avoid this by adding a break line tag between the content text. A break line tag is a singular tag without any closing pair tag. It is represented by <br>.

<a href="https://medium.com/media/407dc173088733fc5b75210b1e1135af/href">https://medium.com/media/407dc173088733fc5b75210b1e1135af/href</a>

Now the output looks good:

Now let’s change the unordered list items. We want it to signify something useful for our site. Let’s make it a list of hobbies.

<a href="https://medium.com/media/9e0468b506837aaa1c09847460b2c265/href">https://medium.com/media/9e0468b506837aaa1c09847460b2c265/href</a>

The output:

Awesome! It’s starting to look like a personal website :).

Time to celebrate!! Yuhhoo 😄

Now wouldn't it be great if we could let the visitors click on the external https link? Enter the anchor tag <a>. We can use the anchor tag to link to other external resources as well as internal pages in the same website.

Now let’s learn a new thing. A tag may contain attributes and corresponding values within it’s opening tag. For example: <a href=”https://sameernyaupane.com”>

Here “href” is an attribute and “https://sameernyaupane.com” is the attribute’s value. Similarly a tag can contain any number if attribute, value pair with a space between the pairs. For example, <a> tag also as another attribute which defines the behavior of the click. The attribute is called “target”. When you give the value “_blank” to the attribute “target”, the link will open in a new tab. Whereas, if you do not include that attribute value pair, the link opens by default in the same tab.

So finally we have:

<a href=”https://sameernyaupane.com” target=”_blank”>

Let’s use that format for our links in the hobbies section.

<a href="https://medium.com/media/af052d6cab8ddf5b0698d51fe742d2fe/href">https://medium.com/media/af052d6cab8ddf5b0698d51fe742d2fe/href</a>

The links should change color as shown in the above image. And when you click them, they should open in a new tab. The first link is in a violet color because it has already been visited. This is determined by the browser. If you clear your browser history it will again become blue.

And now finally let’s add a footer. A footer is a text or any information that appears on the bottom of every page. And it is usually the same content for all of the pages in the same website. For now let’s just make it simple and include a copyright text.

<a href="https://medium.com/media/f63fbd28c9dc26da632f2d5044761600/href">https://medium.com/media/f63fbd28c9dc26da632f2d5044761600/href</a>

And now what is that weird looking text on the footer?

Uhh! I’m confused? 😯

No worries! 😄 “©” is an entity. It represents the copyright “©” character. They are used to represent characters that are hard to type in a keyboard or represent characters that would otherwise be interpreted as html syntax. For example the “<” and “>” sign, which signify tags. Read more about entities here: https://developer.mozilla.org/en-US/docs/Glossary/Entity. And you can find the list of all the entities to use at: https://dev.w3.org/html5/html-author/charref

Our final output:

Well all right. We have a web page built! Congratulations! 😃

We’ll continue to build up our website in the next episode. Please don’t forget to follow my medium profile for the notification to the next episode. Also please do give some claps 👏 if you found the article helpful :)

Questions? Issues? Suggestions? Please leave them below in the comments section. 👍

Thanks for reading and see you soon in the next episode!

Check out my other series at:

• PHP Software Architecture Part 1: MVC
• PHP Test Driven Development Part 1: Introduction