A Step By Step Guide on How to Create Simple Website – HTML Tutorials for Beginners (Web Development Tutorial – Part 1)

HTML stands for HyperText Markup Language and is the standard language for developing web pages. Using the fundamentals of this technology we can define a structure for a webpage or website. With the Knowledge of HTML, you can create your own website.

Let’s break down the HTML and have a look into it.

HyperText – HyperText is a Reference or link to a text (data) that contains some information.

Markup – Markup is a set of instructions that uses tags for the definition and presentation of text.

Language – A Medium for communication.

Using these terminologies, HTML can be defined as a language that uses instructions(Markup) to organize the structure of the webpage and ensures the connection between webpages through a text referred to as HyperText.

Simply we can also say that HTML is used for specifying whether your webpage should contain paragraphs, Headings, Images, Links, Tables, Forms, etc, and many other HTML elements.

Getting Prepared

Before getting into the HTML code here’s what you need to do.

  1. First, you need a computer or a laptop. You can use any operating system (Windows, Macintosh, Linux/Unix) on your computer/laptop to create and view your web content.
  2. Next, We need a reliable Internet Connection.
  3. Now we need a web browser software. Web browser helps you in displaying the web content. Google Chrome, Apple Safari, Internet Explorer, etc are some of the most popular web browsers. You can install several web browsers on your machine, this allows you to test your web content over several browsers.
  4. Now we need a text editor to write HTML code. Visual Studio Code, Sublime Text, Atom, etc are some of the text editors you can use to write codes.

What is HTML?

HTML (Hypertext Markup Language) is a markup language that provides instructions to web browsers such as Google Chrome, Mozilla Firefox, Safari, etc on how to structure your web pages and display them as they are intended to be.

HTML consists of a series of elements that tell your web browser how to display the content. These elements are represented by tags.

Web browsers do not display HTML tags instead it helps web browsers to render the content of the page.

Do you know you can view these tags in your web browser?

To view HTML tags right click on the webpage. Click on View Page Source and you will be able to see these HTML tags.

Simple HTML Document

<!DOCTYPE html>
<html>
   <head>
       <title> My First HTML Webpage.</title>
   </head>
   <body>
       <h1>Welcome,To Coders Recipe Blog</h1>
       <p>
          In this article we are going to look on the basics of HTML. 
          This is a beginner guide for learning HTML.
       </p>
   </body>
</html>

Try It Yourself

Creating and Viewing a Basic Web Page.

Before diving deeper into HTML, you might want to see exactly how to create and view the document in a web browser. If so you can follow these steps.

1. Type all the HTML codes written in the “Simple HTML Document” section on your favorite text editor.
2. Save the file as index.html
3. Choose the folder where you want to keep your web page and click on the save or ok button to save the file.
4. Now double click on the file you just saved. It will open on the web browser.

Why HTML(HyperText Markup Language)?

With the use of HTML, the author can perform the following tasks:

  • An author can publish their documents online including different levels of headings, paragraphs, images, lists, and so on.
  • With the hypertext links in the document, the author can retrieve various online information.
  • To promote the services of the author business, making an online reservation, ordering products, etc.
  • Including videos, sounds, and other applications in their documents to publish online.
  • and Many More.

Recommended Books For You

Are you looking for the best book to enhance your web development skills as a beginner? If so you should check this book called Web Design With HTML, CSS, JavaScript and jQuery Set by Jon Duckett

Overview of an HTML Document

Till now we discussed what HTML actually is, creating a simple document using HTML and why to use HTML.

With these topics now you are fully aware of the definition of Hypertext Markup Language.

Now we will discuss how these individual elements are combined to form fully functioning HTML webpages.

The following is the basic structure to write every HTML websites or webpages.

HTML PAGE STRUCTURE

<!DOCTYPE html>
<html>
    <head>
         Various Documents Metadata
         Includes information on style sheets, scripts.
    </head>
    <body>
        visible content of the websites such as headings,
        paragraphs, images etc and so on.
    </body>
</html>

DOCTYPE

The DOCTYPE is specified at the top of the HTML document.

The purpose of declaring a doctype is to ensure that the browser renders the page in standard modes.

It helps browsers to display webpage correctly.The doctype declarations also define the version of the HTML that a webpage is using.

Besides the doctype is case-insensitive.

<!DOCTYPE html>
    or
<!doctype html>

HTML

The HTML is the root element of the webpage. Besides these, the HTML element acts as the main wrapper for every element in the entire webpage.

The HTML element consists of a lang attribute. lang attribute specifies the primary language for the content of the elements.

<html lang="en">
.
.
</html>

HEAD

The Head element contains all the metadata of the document. Besides, it is a container that includes all the stuff required for the HTML page.

All of the meta elements, stylesheets, script are declared inside the head element.

<head>
  ..title, meta element, stylesheets, scripts
</head>

BODY

The BODY element consists of the content that is visible to the users who visit the webpage or website. It contains all the markup with the visible content.

Headings, Paragraphs, Images, Videos, etc are declared within the body section of an HTML page.

<body>
   .headings, paragraphs, images, links
</body>

HTML Version

HTML VersionYear
HTML1991
HTML 2.01995
HTML 3.21997
HTML 4.011999
XHTML2000
HTML52014

HTML ELEMENTS AND ATTRIBUTES

HTML Elements

HTML Elements are the components present within an HTML document or webpages. These components (Elements) are responsible for displaying content in the web browser.

HTML elements consist of tags, an Opening/Start tag, and a Closing/End tag.

Note: In some cases, HTML elements have no content. These elements are known as empty tags. We will discuss these tags a bit later in this article.

HTML Elements holds content in between these opening and closing tags. These contents are the ones that will be displayed in the web browser.

Everything from opening tag to closing tag including the content can be defined as an HTML Element.

Here is the example displaying an HTML element.

<!DOCTYPE html>
<html>
    <head>
        <title>HTML Element Example</title>
    </head>
    <body>
        <p>p denotes the paragraph element and used for displaying 
            paragraph within the webpage </p>
    </body>
</html>

In the above example, the whole components from Opening tag <p> to closing tag</p> including the in-between content is an example of an HTML element

What is an HTML Tags? What are the types of an HTML Tags?

Tags are the set of characters within a web page that defines how web browsers must display the content.

Tags control the appearance of an element within the webpage. Basically, Tags are categorized into two types, Paired Tags and Singular Tags.

Paired Tags

A tag is defined as the paired tag if the element consists of both the opening and closing tag.

<tagname>Content to be displayed are written here</tagname>

In the above syntax, tags are surrounded by an angle bracket (<>) in the opening and surrounded by the angle bracket along with the forward-slash (/) in the closing.

These tags are denoted by an opening tag and a closing tag.

What is an Opening Tag in an HTML?

Opening tags are those tags that consist of a tag name wrapped by the opening and closing angle brackets as defined in the above syntax.

For example <p> is the example of an opening tag. Besides, <h1>, <h2>, <h3> etc. are some of the example of an Opening Tag.

What is a Closing Tag in an HTML?

Closing tags are those tags that consist of a tag name and wrapped by the opening and closing angle brackets as similar to the opening tag.

But the only difference is that closing brackets consist of a forward slash (/) before the tag name. You can see the above syntax as a reference.

</p> is the example of a closing tag. Besides, </h1>, </h2>, </h3> etc. are some of the other examples of a Closing Tag.

Singular Tags

Singular Tags is also known as an empty tag. These tags are single in nature and don’t contain any companion or closing tags in the end.

It only consists of an opening tag. For example <hr>, <br>, <img> etc. are some of the examples of singular Tags.

<!DOCTYPE html>
<html>
    <head>
        <title>HTML Tutorial - Empty Tag/Singular Tag.</title>
    </head>
    <body>
       <img src="Path For Your Image" alt="Alternate Text For Images">
    </body>
</html>

Nested Element

HTML Elements can contain other elements. Elements can be placed inside another HTML element within the HTML document, this is called nesting an HTML element.

All the HTML documents are nested elements by themselves.

<!DOCTYPE html>
<html>
    <head>
        <title>HTML Tutorial - Nested Elements.</title>
    </head>
    <body>
        <h1>This is a <b>heading</b></h1>
        <p>This is a <u>pragraph</u>.</p>
    </body>
</html>

The above code snippet is an example of a nested element. Each element is placed inside another element. The html element is the root element with the HTML document.

It consists of opening tag <html> and </html>. Inside the <html> element there is a body element. Similarly, there are two elements within the body <h1> and <p>.

Note: We should never forget to close the tag correctly. In some cases, elements can be displayed correctly even we forget to close the tag. But mostly errors and unexpected results may occur if we forget to close the end tag.

HTML ATTRIBUTES

Attributes in HTML are used for defining the characteristics of an HTML element. They provide additional information about the elements.

Attributes are always specified inside the elements start-tag/opening-tag. Attributes are the combination of a name and a value. Here is the syntax for HTML Attributes. name=”value”.

The attribute name is the property that you want to set, and the value is the value for that property. For example.

<!DOCTYPE html>
<html>
    <head>
        <title>HTML Tutorial - HTML Attributes.</title>
    </head>
    <body>
      <p align="center">I am center aligned</p>
    </body>
</html>

In the above code snippet, align is the attribute name while the center is the possible value for the given attribute.

Things to be considered while defining an Attribute.

  • Attributes are always specified inside an opening tag.
  • Always maintain a space between the attribute and the element name (also applies if there are one or more attributes).
  • The Attribute name is always followed by an equal sign.
  • The Attribute value is always wrapped with quotes.

The majority of an HTML element, but not all holds these four core attributes. They are ID, TITLE, CLASS, and STYLE.

Core Attributes

ID Attribute:

ID Attribute is used to define a unique ID for an HTML element within the webpage. The use of this attribute makes it easier to identify the elements and their content.

You cannot specify the same id to different elements in an HTML document. The id attribute specified is also used by the JavaScript to access and manipulate the element.

<p id="name_of_id_here">Content</p>
<!DOCTYPE html>
<html>
    <head>
        <title>HTML Tutorial For Beginners - ID Attribute Example</title>
        <style>
            #id-para {
                color: red;
            }
        </style>
    </head>
    <body>
        <p id="id-para">The id attribute specifies a unique id for 
          an HTML element. The value of the id must be unique within 
          the HTML document.
        </p>
    </body>
</html>

In the above example id “id-para” is specified to the paragraph. Then in the head section you can see that id-para is specified with the style color red.

Note: To specify a style to the id attribute write a hash character (#), followed by an id name. Then, define the CSS properties within curly braces {}.

As an output you can see that the color of the paragraph id “id-para” changed to red.

Title Attribute:

The Title Attribute is used for suggesting the title for the element within an HTML document. It is often displayed as a tooltip when the cursor moves over the element.

<p title="title_content_here">Content</p>
<!DOCTYPE html>
<html>
    <head>
        <title>HTML Tutorial For Beginners - Title Attribute Example</title>
    </head>
    <body>
        <p title="Just Hover Above Paragraph">The title attribute is 
        used for suggesting title for the element.</p>
    </body>
</html>

In the above example, a title attribute is set to the paragraph element. As an output, you will see a tooltip if you hover above the paragraph.

Class Attribute:

The Class Attribute is used for specifying the class to an HTML element. One can use the class attribute to specify CSS rules in a style sheet.

JavaScript also uses this attribute to access and manipulate HTML element with a specific class name.

An HTML element can also hold multiple values for the Class attribute separated by the space. For example.

<p class="class_name_here">Content</p>
or
<p class="class_one class_two">Content</p>
<!DOCTYPE html>
<html>
    <head>
        <title>HTML Tutorial For Beginners - Class Attribute Example</title>
        <style>
            .attr-class {
                background-color: blue;
                text-align: center;
                color: white;
                margin: 10px;
                padding: 10px;
            }
        </style>
    </head>
    <body>
        <div class="attr-class">
            <h2>Lorem Ipsum</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi 
               eius velit dolor repudiandae vel distinctio.</p>
        </div>

        <div class="attr-class">
            <h2>Lorem Ipsum</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi 
               eius velit dolor repudiandae vel distinctio.</p>
        </div>
    </body>
</html>

Note: To specify a style to the class attribute write a period character (.), followed by class name. Then, define the CSS properties within curly braces {}.

In the above example both the div is assigned with same class attribute name “attr-class”. The css rule specified to the attr-class will be applied on both the div.

Style Attribute:

With the Style attribute, you can specify CSS rules within an element. You can add styles to an element such as color, fonts, margin, padding, and many more.

Here is the syntax for the style attribute

<tagname style="property:value;">Content Here</tagname>
<!DOCTYPE html>
<html>
    <head>
        <title>HTML Tutorial For Beginners - Style Attribute Example</title>
    </head>
    <body>
        <div>
            <h2 style="color:red;">Lorem Ipsum</h2>
            <p style="color: blue;">Lorem ipsum dolor sit amet, 
               consectetur adipisicing elit. velit dolor
                repudiandae vel distinctio.</p>
        </div>
    </body>
</html>

Boolean Attributes: Sometimes you may see attributes without any values. Such values are called Boolean values and they are allowed.

Boolean Attributes have a single value, which is the same as the name of an attribute.

<input type="text" disabled="disabled">

Shorthand method for writing the Boolean Attributes.

<input type="text" disabled>

HTML Headings and Paragraphs

The Headings and Paragraph provides a structure for the text, whether you are reading a newspaper, a magazine, etc. For e.g. let’s have a look at the below example.

HTML Headings and Paragraphs Example - HTML Tutorial

Note: Headings are important as search engines like Google, Bing, etc uses these headings to index the structure and content of your webpages.

In the above picture, the content is well structured using the Headings and Paragraph. Such structured content makes the reading experience easier and enjoyable. Likewise, Headings and Paragraphs are more about structuring the text content of your webpage.

HTML Headings

HTML headings are used for defining the title or subtitle for the content of your webpage. HTML provides six levels of headings for defining your title and subtitle. These heading elements are <h1>,<h2>,<h3>,<h4>,<h5>, and <h6>.

With the use of these six headings tag, you can structure your main headings, sub-headings and so on.

The headings are displayed in bold format. The size of the text depends on the heading levels.

H1 is the largest heading and used for the most important heading while h6 is the smallest and used for the least important headings.

Let’s have a look at how you can define headings and it’s level.

<!DOCTYPE html>
<html>
    <head>
        <title>HTML Tutorial - HTML Headings</title>
    </head>
    <body>
        <h1>First Heading Example</h1>
        <h2>Second Heading Example</h2>
        <h3>Third Heading Example</h3>
        <h4>Fourth Heading Example</h4>
        <h5>Fifth Heading Example</h5>
        <h6>Sixth Heading Example</h6>
    </body>
</html>

HTML Paragraphs

HTML Paragraphs are used for defining a paragraph in a HTML document. Paragraphs are represented using the <p> element.

The text are written in between the opening <p> and closing </p> tag.Paragraphs always start on a new line

Let’s have a look at the code snippets below on how you can define a paragraph for your webpage.

<!DOCTYPE html>
<html>
    <head>
        <title>HTML Tutorial - HTML Paragraphs</title>
    </head>
    <body>
        <p>
           Welcome, To HTML Tutorial. In this article you will 
           learn on how you can define paragraphs for your 
           webpage using the p elements.
       </p>
    </body>
</html>