HTML & CSS Tutorial 4: Learning the Basics

Since we have already learned how a basic HTML page generally works and how the different parts of an HTML document interact with the browser, now we can move on to learning the basic HTML tags which will enable us to add contents to the web page according to our wish.

In the previous tutorial, we used the <h1> tag for adding headers to the document. As already described, the size of the heading tag varies with the number associated with it and decreases as the number progresses from 1 to 6.
If we write the following code:

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

We will get the output like this:

headings HTML & CSS Tutorial 4: Learning the Basics

The next thing we need after we have added a heading, is a paragraph. We are gonna have a lot of text on a page, and all of that text are generally going to be organized into several paragraphs. For adding a paragraph onto a page, we use the paragraph tag, which is just a simple pair of <p> tags. For instance:

Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

this code would return the text inside the tag in a single paragraph. Try it yourself!

The next important element we might need to add in a page is an image. Any page with only textual description would fail to attract visitors as we are generally attracted more towards visual demonstrations. For this, we shall need the <img> tag.
It’s an important tag because it is the first single tag that we are going to learn. As we had learned in our first tutorial, a single tag is a tag that doesn’t require a separate closing tag. Learning the image tag is also important because it also features the use of attributes.

Attributes are keywords that are used to describe or assign properties to the certain tag it belongs to. Different tags have different range of attributes that can be assigned to them. The basic form of a single tag with an attribute is like:

<tag attribute1=“value” attribute2=“value”/>

There are some noticeable features that we can learn from this example. Firstly, a tag can hold more than one attributes at a time. The double quotation marks hold the value of the attribute you need to define. It is worth mentioning that, though we have used a single tag as an example, attributes can also be used with regular tags in the same manner. But it should be remembered that attributes are declared only in the opening tags.

We are going to learn how to add an image and other aspects of it in the next tutorial.

life2coding_icon [] HTML & CSS Tutorial 4: Learning the Basics

One thought on “HTML & CSS Tutorial 4: Learning the Basics

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.