Creaaing Headings and Paragraphing in HTML and CSS ( HTML & CSS COURSE |Part One B)

Facebook Twitter Email Whatsapp

 

Creating Headings and Paragraphing in HTML and CSS

Web designers are able to come with simple to complex websites by first knowing how to make the best use of headings and paragraphing.

DOWNLOAD SOURCE CODE👉 HERE

The basic thing about building a professional website is about first knowing how you can write the appropriate text, how to caption your ideas to make meaning and where to place your text on appropriate places on your website that can attract readers.

 

So learning how to write text that the browser can understand and display to your audience is the first step to building a website.

 

So in today’s lecture, we’re going to learn how to write recognizable text, how to caption them and apply appropriate paragraphing.

 

So let’s get started!

Open your brackets editor. Create a new file and give it a name called headings-paragraphing.html. Save it in the HTML FILE FOLDER on your desktop.  

 

Copy the HTML SKELETON you created the last time and paste it here. In the head section, title it headings and paragraphing.

 

Come to the body section and open a p tag. The p tag is used to write paragraphs.

Write any text you prefer here. I have some sample text so I will go and copy it and come back and paste it in order for us to save time.

 

Now, let’s give this paragraph a heading to make it easy for readers to navigate your content. Let’s caption it as about me. H1 to h6 are used to write headings. H1 is the biggest header and h6 is the smallest.

 

Let’s use h1, so open the h1 tag. Write about me.

Let’s add another heading as my school. Under this heading, let’s write a paragraph about the school you completed. I will copy the sample text and paste them here.

 

Add another heading as my occupation.

Add your paragraphs here as well.  You can add a second paragraph here. You can add as many paragraphs as you want.

But let’s change this heading to h3 rather to see the difference from h1 to h6. You can experiment with the rest to see which one suits you.

 

Now, save and click on live preview. And bham! You can see your work so far. Under the occupation, you can see that the h3 is smaller than the rest. So, experiment with h2, h4 and h5 to see their differences.

We can add line breaks to space the three paragraphs under occupation. Save changes and check live preview. You can see that, the paragraphs are now well spaced from each other.

 

Now, let’s introduce two more tags to add some flesh to this work.

You can observe that, the about me section, my school and occupation are much close to each other, but we will like to leave little spaces between them.  So, tap the space bar to add some spaces across all.

 

Now, save and check on live preview. What happened? No changes right? The browser doesn’t understand spaces like that. This is the same thing as this, and this the same as this. So what then do we do?

 

This brings us to an important tag called the <br> tag. It is use to add breaks or spaces to your sentences. Now, add the <br> tag to the about. Save and check now to see the changes. A space has been added right? What if I need more space than this? Add more <br> tags for more spaces. Now, save and check. And that’s good!

 

This sentence is continues, if I want the sentence after the full stop to come below I cannot do this by hitting the enter key on my keyboard since this will not work. I will rather have to add a <br> tag to break the sentence to the next line. Save changes and check on live preview. And this worked as well!

 

Now, add <br> tags to the rest and wherever you want to add spaces or break sentences. Now, you can see the changes across.

 

If I want to underline the headings or any part of the sentence, there is one tag we can use. This is called the <hr> tag which is used to add a horizontal line.

 

So, we can add a horizontal line to the about me like this.  We can make it double by adding another one.

We can also add horizontal line to separate all the paragraphs like this. Good! Experiment with this to have a beautiful look. Can you add font family, font size, color to make this look more outstanding? We shall look at that further in this course.

 

Congrats! You have learnt how to create headings and paragraphs. You can use your today’s experience to design the about, contact and our services pages of your website.

 

We shall come back to add more flesh to it as we go further. So keep it handy and never forget. Master it before you move to the next lecture. When you locate the file on your desktop, you can open it with any browser. You can also share it with your friends to see your work.

QUICK SUMMARY

·       The <p> tag is use to write paragraphs

·       The <br> tag is used to add line breaks to sentences

·       <hr> tag is used to add horizontal lines to sentences