223 reads

HTML Fundamentals: How To Get Started [Part 1]

by Akhil VenkateshDecember 6th, 2020

Too Long; Didn't Read

Understanding the basics of HTML will be your first stepping stone to become a full-stack developer. At the end of the session you will have all the necessary tips and tricks to build your own website. This could be used as an ultimate HTML cheat sheet for beginners. An HTML editor is a precious tool irrespective of whether you are an absolute beginner or an advanced developer. We will be using Visual Studio Code, we will use the following link:https://code.visualstudio.com/download

Companies Mentioned

featured image - HTML Fundamentals: How To Get Started [Part 1]

If you are here to begin your journey to become a full-stack developer, understanding the basics of HTML will be your first stepping stone. Or if you are here to simply learn how to build an awesome website of your own, I have got your back. This could be used as an ultimate HTML cheat sheet for beginners.

Now let me answer some of the obvious questions:

Do you need to have a prior knowledge of any programming languages used for web development?

NO, Not at all

But then, Can I build a HTML page on my own?

Yes, at the end of the session you will have all the necessary tips and tricks to build your own website.

Is there any requirement?

Yes, PATIENCE.

HTML stands for Hyper Text Markup Language. It is a language of web browsers.

How is it different from other web development languages?

HTML is just a markup language that doesn't really use any programming logic. It cannot be used for functional purposes such as performing mathematical operations. It is simply used to create, design and structure web pages.

Now let us start our journey to become a hero from zero.

First, we need to have a HTML editor. HTML editors are nothing but just text editors where we will be writing our codes to build our webpage. You can always open your default text editor and start writing the codes. For example, the default text editor for windows is notepad. While saving the text files, instead of saving it with .txt extension, change the extension to .html or .htm to save it as an html document.

Then why should you use other HTML editors?

HTML editors have a lot of features such as error checking, auto-completion, highlight syntaxes etc. An HTML editor is a precious tool irrespective of whether you are an absolute beginner or an advanced developer.

You will eventually understand why using an HTML editor makes our life easy.

For the purpose of this tutorial, we will be using Visual Studio Code.

You can download it using the following link:

https://code.visualstudio.com/download

Once you set up the HTML editor, Let us begin.

Let us first try to understand the structure of a basic html code. Lets carefully examine the HTML code shown below. You could see several words enclosed within < and >. Those are called tags. Tags are used to structure and organize contents in a HTML document.

<!DOCTYPE html>                      
<html>
    <head>                           
        <title>Page Title</title>
    </head>
    <body>                           
    <h1>My First Heading</h1>        
    <p>My first paragraph.</p>       
    </body>
</html>

Feel free to copy the chunk of code and paste it in your editor. Save it and open the document in a web browser to see what we just did there.

Let's look at some basic tags:

It is important to note that every tag has two components, an opening tag and a closing tag. For example, to define the body of a html document we will use an opening tag <body> and a closing tag </body>. Every content will be enclosed within them.

Let’s explore the heading tag now:

Try these codes and observe what it does.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

As you can see, you can use different tags to define different sizes for your headings. Now, if you aren't happy with the basic 6 sizes, you could always customize it. Let’s see how you do it:

<h1 style="font-size:70px;">Heading 1</h1>

We just customized the font size by using a ‘style’ attribute. Similarly, we can customize the font style, colour and several other features.

Lets try changing the font style, colour and give our heading a center alignment:

<h1 style="text-align:center; font-size:70px; color:red"> Red Heading </h1>

Now let us move on to next tag,

The <p> tag

Let us try the following:

 <!DOCTYPE html>                      
<html>
    <head>                           
        <title>Our Page</title>
    </head>
    <body>                           
<h1 style="text-align:center; font-size:30px; color:red"> Red Heading </h1> 
	<p> Red is the color at the end of the visible spectrum of light, next to orange and opposite violet. It has a dominant wavelength of approximately 625–740 nanometres. It is a primary color in the RGB color model and the CMYK color model, and is the complementary color of cyan. Reds range from the brilliant yellow-tinged scarlet and vermillion to bluish-red crimson, and vary in shade from the pale red pink to the dark red burgundy. </p>
    </body>
</html>

Did you just see what happened?

We just created a basic page where we are talking about the colour red.

It looks like a big chunk of information under a heading. Lets try beautifying it.

Let's break the content into multiple lines. We will be using the <br> tag, this is one of those rare tags that do not require a closing tag.

<!DOCTYPE html>                      
<html>
    <head>                           
        <title>Our Page</title>
    </head>
    <body>                           
<h1 style="text-align:center; font-size:30px; color:red"> Red Heading </h1> 
	<p> Red is the color at the end of the visible spectrum of light, <br>
        next to orange and opposite violet. It has a dominant wavelength of approximately 625–740 nanometres.<br>
        It is a primary color in the RGB color model and the CMYK color model, and is the complementary color of cyan. <br>
        Reds range from the brilliant yellow-tinged scarlet and vermillion to bluish-red crimson, <br>
        and vary in shade from the pale red pink to the dark red burgundy. </p>
    </body>
</html>

Now…….

This is the best time to introduce the <div> tag to you.

<div> tag is used to define a particular section in the whole content.

Now let us say that I want to apply a certain type of styling format to only some part of my content, I will use the <div> tag.

Here, we will be using <div> tag to center align and give a maroon colour to just the paragraph content alone.

<!DOCTYPE html>                      
<html>
    <head>                           
        <title>Our Page</title>
    </head>
    <body>                           
    <h1 style="text-align:center; font-size:30px; color:red"> Red Heading </h1> 
    <div style="text-align: center;color:maroon;"
	    <p> Red is the color at the end of the visible spectrum of light, <br>
        next to orange and opposite violet. It has a dominant wavelength of approximately 625–740 nanometres.<br>
        It is a primary color in the RGB color model and the CMYK color model, and is the complementary color of cyan. <br>
        Reds range from the brilliant yellow-tinged scarlet and vermillion to bluish-red crimson, <br>
        and vary in shade from the pale red pink to the dark red burgundy. </p>
    </div>
    </body>
</html>

Let us add a picture under the content.

We will add this chunk below to our code.

Lets run it and see how it looks

If you would have followed each and every step that I have followed, our webpage will look somewhat like this.

Do you feel that the mushroom picture is too large?

Do you want to change the way it looks? Sure, let's do it.

Let's add the width, height and border option within the <img> tag.

<img src="https://www.nhm.ac.uk/content/dam/nhmwww/discover/rainbow-red/fly-agaric-full-width.jpg.thumb.1160.1160.jpg" alt="Red Mushroom"
    width="460" height="345" border= "3">

If I want the image to be in the centre. I will simply use a tag called <center> like this:

<center>
        <img src="https://www.nhm.ac.uk/content/dam/nhmwww/discover/rainbow-red/fly-agaric-full-width.jpg.thumb.1160.1160.jpg" alt="Red Mushroom"
        width="460" height="345" border= "3">
</center>