HTML & CSS COURSE FOR ABSOLUTE BEGINNERS(Part one A)

Facebook Twitter Email Whatsapp

 

 

                                                       HTML SKELETON

The last time was introduction to this course and we practically explained what HTML and CSS is. So, make sure you have watched that video before this one in order not to get confused about the whole thing.

Check that video 

 Today, we will go straight into part one of this course.

Today's video here

We are going to start by writing an HTML code.

 HTML code is full of tags that look exactly like this.

The tags at your left hand side are called the opening tags or you can as well call it the starting tag. An opening tag has a less than symbol followed by a word or a letter and then followed by a greater than symbol like this.

  The tags at your right hand side are called the closing tags or ending tags. A closing tag has a less than symbol followed by a forward slash then the word or the letter followed by a greater than symbol.

 A web browser will only read what is written between the opening and the closing tags. Anything else outside of these tags are not displayed on your browser or the internet.

For example, my chrome browser can only read this sentence and displays it on the screen as long as I make sure this sentence is written in-between the tags like this. The browser does not display the tags, it only displays the content within the tags.

 Having said that, there are some tags that don't need a closing tag to display their content on the browser. A few of these tags are the hr tag, br tag, image tag and so on.

 So, multiple or several of these tags come together to build a beautiful webpage and we will grab all of the essential ones very easily as we move further in this course.

Now, html code has a structure or skeleton inside which all other tags found within form a page or a website. Only a few main tags come together to form the html skeleton or structure.  We have what we call the head tag, body tag, title tag and some others.

Now, let’s place these tags to form the html skeleton. But before we start, let me remind you that, the html skeleton must always be included in any html file that you will write. 

You might not understand the elements in the html skeleton for now but don’t bother yourself to memorize tags for now. Just learn to write it down. You will get very good at it by default as we get along this course.

First things first, pause the video and go to your desktop and create a folder and name it HTML FILE. This is the folder we will like to store all our html files including the skeleton.

 Create another folder and name it exercise. This folder is where we will carry out all our practical assignments.

Now, open your brackets editor or visual studio depending on which of them you have.

Come to the extreme left of your brackets and click on file and select new. Press the keyboard shortcut CTRL + S  to save your new file. Choose your HTML FILE FOLDER you created on your desktop as your location and save this file in it.

 

Now, we will write our html skeleton on this white space. we start by writing the html tag and then we close it. Some text editors automatically closes the tags for you once you open a tag as in brackets.

 And inside this html tag, we have the head tag. And then, we have the body tag.

Inside the head tag we have what we call the title tag. According to standards, DOCTYPE html is then added to it at the top here to make it complete. At this point, let’s keep it simple like this for now.

There is something we call parent-child relationship between these tags. 

The parent element is the outer element in html and the inner tags are called the child elements. For example, the html tag is the parent element of all the other tags inside it.

 The title tag is the child element of the head tag and the html tag and so on. Grab this concept on your memory as it will be very important for us in this course.

Now, the parent and the child element should not be on the same vertical line. So, all the child elements of the html tag have to move inside a bit by simply highlighting them and pressing the tabs key on your keyboard.

The title tag is also a child element of the head tag so it will move in as well.

Once again, all parent elements should be on the same vertical line and child elements on the same vertical line as well in your entire html code.

The head section of the html code contains information like the title of a web page. For example, when we write a name for the title of our file, html skeleton.

 Save and click on live preview to see what happens.  The name of our file has appeared on the address bar of the browser. This helps us to easily identify different web pages if we have to open several tabs on the browser. Now you see how important this one is?

Alright, let’s move to the body section. The body section contains all other information that will appear on your browser window. 

For example, let’s write a simple sentence inside the body and see what happens on the browser. Save and click on live preview. And that sentence appears on your browser. 

So, if you have added pictures, videos, tables, diagrams etc, they would have appear on your browser as well. So now you can tell what the body section is used for isn’t it?

 

Alright, stick with this for today.

Congrats! You’ve successfully learnt how to create your first html skeleton.

In the next lecture, you shall learn how to make use of this skeleton and create your first web page so that you will have something on your browser window to show to your friends.

 

If you were not able to write the html skeleton well, the link to the code is given in the description. Open it compare with your own to correct your errors.

 

 

QUICK SUMMARY

1. ·         HTML code is made of tags
2. ·         We have the opening tags and the closing tags
3. ·         A web browser will only read what is written between the opening and the closing tags. Anything else outside of these tags are not read.
4. ·         There is a parent-child relation between tags.
5. ·         Outer elements are called parent elements.
6. ·         Inner elements are called child elements.
7. ·         HTML has a skeleton within which all the tags are written.

 

 SOURCE CODE TO HTML SKELETON

Copy source code here