Basic Html Tutorial

BASIC HTML TUTORIAL FOR BEGINNERS (HTML 5)

In this guide, we will focus on the basic html tutorial for beginners. This is one of the most important languages in the world of web development. Html is the basis of almost every website, it is what we use to organise contents, set up headings, paragraphs, images, lists, forms and much more.

NOTE: A code editor will be put at the end of this post so you can practice as you like and also see the outputs of your codes.

WHAT IS HTML?

HTML is a short term for Hypertext Markup Language and it’s the most widely used language to structure pages. It was created by Berners -Lee in late 1991, but HTML 2.0 was the first specification for a standard HTML, and it was released in 1995. And the current version of HTML which is widely used is HTML 5. Likened to a house, we can say HTML is like a building without painting, electricity, furnitures etc.

Most people ask this question “is HTML a programming language?”. There has been lots of debates and arguments on if it is a programming language. A programming language is a language that serves a functions such as declaring variables, modifying data and more. Examples of such languages are Javascript, Python and many more.

We can simply say HTML is a structural language used to create web pages. HTML is open-source and supported by all current browsers makes it cost-free to use and guarantees that your text, graphics, and other elements are shown as you intended. If HTML didn’t exist, all web pages would simply be plain text files like the image below.

Plain Text Files
Plain Text Files

HTML helps you format documents with headings, paragraphs, lists, images, videos, audio files, and other elements. And you can also set up navigation to link from one page to another. This language is one of the most important and foremost for every website.

HOW TO WRITE HTML (HTML TUTORIAL FOR BEGINNERS)

Writing HTML is simple, it has to do with knowing how to position the tags and elements. To begin writing, the first thing we need is a code editor (Visual Studio code, Sublime Text, Atom) ,these are some of the most popular and powerful code editors. A code editor is program designed specifically for writing and editing codes.

After downloading your choice of a code editor, the next thing to do is a create a folder on your local computer, open it up in your code editor and create an html file. To create an html file, you name it (index.html). Index.html specifies the first or rather the homepage of every website, you can also create other html files like (about.html, contact.html and much more).

After creating your html file, you first begin by declaring your version of Html (html 5) to the browser. To do that , you create a tag with the less than symbol “<” and to close the tag you use your greater than symbol “>”. Below is an image of how to declare and set up a page to begin writing your HTML code.

Html Page Format

HTML TAGS

Tags, which are typically encased in angle brackets, are used to mark the beginning of an HTML element. The tag <h1> is an example. Tags should be opened and closed to function. (<h1> </h2> ).

In HTML, some of the basic tags are ;

  • <h1> </h1>
  • <h2> </h2>
  • <h3> </h3>
  • <h4> </h4>
  • <h5> </h5>
  • <h6> </h6>

The h1 to h6 tags are used for headings. H1 is the biggest and most important heading while H6 is the smallest and least important headings.

<!DOCTYPE html>
<html>
  <head>
    <title>Hello, World!</title>
  </head>
  <body>
      <h1>Hello World </h1>
      <h2>Hello World </h2>
      <h3>Hello World </h3>
      <h4>Hello World </h4>
      <h5>Hello World </h5>
      <h6>Hello World </h6>
  </body>
</html>

This is how headings are written in this markup language.

Another popular tag which is very useful when creating Web pages is the paragraph tag. This is usually done with the p tag.

<p> Hello World, my name is Obawharhe and this is a paragraph tag </p>

Paragraph tag always start on a new line and continues. If you want every sentence in a paragraph to begin on a new line, it is advisable to use the break tag (</br> tag ).

The function of the break tag is to take things to a new line. And it is a self closing tag. As such doesn’t need a closing tag. An example below.

<p> Hello World, </br>my name is Obawharhe and this is a paragraph </p>

OTHER USEFUL TAGS/ELEMENTS IN HTML

Html has so many tags and not every single element will be useful to you in your Web development journey. As such below, I’ll show you some very useful elements that will be needed to customize texts on your website.

S/NELEMENTSTHEIR USES
1<b> – BoldThe name is self explanatory. The bold tag helps highlight text.
<b> Hello, how are you </b>
2<strong>Strong performs almost the same function as bold but when strong is used, it is used to show that the text is very important. <strong> Hello World! </strong>
3<i>This tag is used to write contents in italic formats. <i> I am here </i>
4<em>This is used to emphasize a very important content and is most times written in italics as well. The tag is used for image captions as well.
<em> Html is fun </em>
5<small>It is used to make the font size of any text or content small. Note that small cannot replace an h6 tag because an h6 tag is an heading.
<small> A small text </small>
6<u>The tag underlines any content which is enclosed within it.
<u> My underlined text </u>
7<del>Delete tag – It’s used to either remove a text or show that the content is no longer important. When used, it strikes through the content.
<del> 5000 </del>
8<sub>It is used to create subscript text. Subscripts are usually displayed with a lower baseline and smaller text. Popular examples are ” H2O “.
<p> H <sub> 2 </sub>O </p>
9<sup>The tag generates a superscript. Superscripts are characters that are placed above the normal line. A popular example is ” 1st “.
<p> 1 <sup> st </sup> </p>
10<div>This is known as a block tag. A div is similar to a container that is used to hold contents or divide sections.
11<span>This is another type of block element. Span is similar to a container that holds contents, but it only takes up as much space as the contents.

Any of these tags could be used in a paragraph or anywhere else. The div tag can be used to divide the header, footer, and other elements, whereas the span tag can be used to divide the content into smaller chunks.

This will be discussed further in another post. Below, I will leave an example of some the tags we’ve talked about being used. You can also copy the code to a code editor to see the result.

<h1> ABOUT HTML </h1>

<div>
<p> Html is a <b>fun</b> language. </br> It is <strong>very</strong> important in the <i>development</i> of most <em>Web</em> pages. It could be <small>likened</small> to a <u>foundation</u> of a <del>horse</del> house.
</div>

INSERTING LINKS IN HTML

Links are very important as they enable you navigate from one page to another or from one website to another website.

To add a link, the anchor tag is used <a>. Now let’s make a link to Google.

<a href="https://www.google.com"> GOOGLE </a>

We can also link it to a blog post on our site by following the same process.

<a href="https://sketchvase.com/introduction-to-web-development/"> INTRODUCTION TO WEB DEVELOPMENT</a>

HOW TO ADD IMAGES TO YOUR WEBSITE

Adding images in html is quite simple. This is done with the <img> tag and some attributes. Images are very important in website building, it could be used as a background, for contents and much more.

Most people prefer to resize an image (height and width) using Cascading Style Sheet popularly known as CSS ,which is a styling language. However, this is also easily accomplished using HTML.

Images in any format including jpg, png, svg, and gif can be added. The alt attribute is another significant attribute when adding images.

It is essential for visually impaired visitors, as well as when images fail to load properly. You can add images with external links or images from your folder.

The <img> tag is used as shown in the example below;

<img src="image.jpg" alt="about the image" height="150" width="150">

HOW TO MAKE A LIST

Lists are important for so many reasons ,they are easy to read, it makes information organized and it is easy to share. In HTML, there 3 types of list.

They are unordered list, ordered list and description list.

UNORDERED LIST

Unordered list are usually bulleted.

Html tutorial for beginners
An unordered list code with result
<h2> LIST OF FRUITS  </h2>
<ul>
<li> Orange </li>
<li> Apple </li>
<li> Strawberry </li>
</ul>

ORDERED LIST

Ordered lists are also known as numbered lists.

<h2> NAMES OF COUNTRIES </h2>
<ol> 
<li> Nigeria </li>
<li> United States of America </li>
<li> New Zealand </li>
</ol>

DESCRIPTION LIST

This list is used to describe or define terms or items.

<dl>
<dt> HTML </dt>
<dd> : Means Hypertext Markup Language 
</dl>

HOW TO CREATE AN HTML TABLE

Tables allow people arrange data (information) in rows and columns. A table was used when we talked about “OTHER USEFUL TAGS/ELEMENTS IN HTML”.

A table consist of a table head <th>, table row <tr> and table data <td>.

When creating tables, some developers also include table header, table body and table footer but that will be left for a more advanced tutorial.

<table>
<tr>
<th> NAME </th>
<th> LEVEL </th>
<th> COUNTRY </th>
</tr>
<tr>
<td> John </td>
<td> 200 </td>
<td> Nigeria </td>
</tr>
<tr>resources
<td> Lisa </td>
<td> 100 </td>
<td> Belgium </td>
</tr>
</table>

Congratulations on finishing this article! Now that you know the fundamentals of html, you can create a simple webpage.

The following resources can be used for more reference on html;

  1. w3shools
  2. freecodecamp

BELOW IS A ONLINE IDE/COMPILER FOR YOU TO PRACTICE;

To make use of this online IDE, you can remove every detail from the index.html and build the html structure yourself.

To see your results, you can click “RUN” and scroll down.

Do you need an in-depth training on web development and other related digital skills, then you are in the right place. To reach us CONTACT US now.

Add a Comment

Your email address will not be published. Required fields are marked *