Create a Web Page or Write an Article With HTML

Learn HTML(Hypertext Markup Language) programming language by creating a web page or writing a simple paragraph or an essay or an article, etc. All we need to use is HTML elements and a text editor.

This post is for absolute beginners. Even if you don't know how to write code, it won't be a problem. All you need is patience.

Remember, the computer is not a human or a magician. You have to tell it what to do, where to start, where to end, what is the text for that you typed right now, I mean everything.

How to write HTML code

To write HTML code for the first time I recommend you use your default text editors like Notepad(Windows) or TextEdit(Mac) or Text Editor(Ubuntu).

Now open up your text editor and paste the code from below. Don't get bored just by watching the code, I will try my best to explain what those are.

<!DOCTYPE html>
<html>
  <body>
    <h1>This is the Headline of the paragraph</h1>

    <p>Here goes the whole description of the paragraph</p>
  </body>
</html>

Next, You have to save the file to your computer.

For Notepad got to File > Save as or for Text Editor just click on Save, It will popup an explorer window to select where to save your file.

Select any folder where you want to save, name that file index.html with "UTF-8" encoding selected option and click on Save.

Now open the file in your internet browser by double-clicking on it or drag and drop the file on your browser. You will see something like below:

HTML File Preview In Browser

We learned how to create an HTML file and preview it on the browser. Now it's time to explain what the code was. Let's start one by one.

What is doctype in HTML?

We used <!DOCTYPE html> at the very beginning of the code. It's not related to the paragraph you wrote. It just tells the browser that this is an HTML file and the browser preview the file as HTML.

Also DOCTYPE is not case sensitive. You can use <!Doctype> or <!doctype> etc.

<html> tag in HTML

The <html> tag contains all the HTML tags we write in HTML.

If you look at the code you will see every tag like <body>, <p> are in the middle of the <html>...</html> tag. This is where we will write our all HTML code.

Why every HTML tag has a duplicate tag with a slash('/') in the end?

When you write an article, you know this is the end of my article headline, after that, You will write the description of that paragraph.

But the computer doesn't know that this should be the end. You have to tell it to stop recognizing as heading after the word of your article headline with the end tag.

The end tag starts with a slash("/") to represent the end of the tag. For example <html> has an end tag like </html>.

Body tag in HTML

<body> tag contains all elements of the document's body like your body contains your eyes, hair, hands, etc.

You might be wondering then what is the use of the <html> tag if the body contains all the elements. <html> contains the head tag(i.e., CSS stylesheets, Metadata, etc.) like the brain in your head.

What is the meaning of nested elements in HTML?

By nested we mean is to put a piece of information, text, etc. inside another.

If you look at the code you will see the <body> tag is stored inside the <html> tag.

So you can call the <body> element is a nested element. You can also call the <html> element as a container.

What is h1, h2, h3, h4, h5, h6 in HTML?

Those are called HTML Headings like titles or headlines or sub-headlines of a paragraph or article.

h1 is the bigger and the important one, h2 is less big and important than h1 which we use after h1. h6 is the last and the smallest one. Most of the time, They play the role of subtitles under the <h1> tag.

Let's change the code with different headings like the code below and save.

<!DOCTYPE html>
<html>
  <body>
    <h1>This is Heading One</h1>
    <h2>This is Heading Two</h2>
    <h3>This is Heading Three</h3>
    <h4>This is Heading Four</h4>
    <h5>This is Heading Five</h5>
    <h6>This is Heading Six</h6>

    <p>Here goes the whole description of the paragraph</p>
  </body>
</html>

Click on the refresh button on your browser, see if it's like the screenshot below.

HTML Heading Example

Paragraph(<p>) tag in HTML

<p> tag defines a paragraph like the description of a paragraph after the headline. It displays normal plain text in the browser as you saw in the screenshots.

Now, what if you want to add another paragraph after a paragraph to make a new line. Well, all you have to do is add another <p> tag. It will add a new line.

Update your code like below and save the file. Always remember one thing that whenever you change or update your code you have to hit Save and click the refresh button on your browser to see changes. Because the browser doesn't know that you have edited your file.

<!DOCTYPE html>
<html>
  <body>
    <h1>Title of the Paragraph</h1>

    <p>
      Magnis eleifend aenean condimentum est sodales purus sagittis duis
      parturient nulla vulputate cubilia, eget urna natoque dictum etiam eros
      convallis bibendum rhoncus egestas. Nisl platea aliquam lacus ridiculus
      odio fringilla lacinia urna phasellus ornare, ultricies condimentum
      praesent luctus pretium convallis placerat tempor. Id vivamus vitae
      lobortis in suscipit aenean diam sociosqu commodo non lacinia, dui mi
      integer hendrerit nisl habitant cubilia nibh fames nunc. Lobortis semper
      cubilia morbi tristique vestibulum, per nulla mi euismod inceptos nibh,
      convallis id varius quis. Sollicitudin pellentesque himenaeos sed proin
      habitant gravida, metus etiam eu blandit potenti primis vehicula, molestie
      nascetur duis bibendum commodo. Pretium ut turpis id bibendum magnis ad
      iaculis leo, tempus facilisi fringilla varius velit inceptos vel est,
      himenaeos urna a lacinia conubia quisque nulla. Ante parturient commodo
      nunc in leo quam imperdiet euismod, dictum etiam morbi fermentum quis ad
      pellentesque porttitor scelerisque, sociosqu ultrices nam at hac molestie
      dapibus.
    </p>

    <p>
      Lorem ipsum dolor sit amet consectetur adipiscing elit integer, magna
      consequat nostra magnis commodo quis praesent. Lobortis nostra aliquam
      quam ac platea nam at ut tempor conubia cubilia etiam sociis neque cras,
      lectus sodales venenatis nunc molestie iaculis mus dignissim aenean mauris
      magnis mi feugiat. Posuere odio per aenean torquent litora feugiat potenti
      duis mollis eu, metus condimentum ut taciti vestibulum non mauris
      malesuada a facilisi, tellus tempus vivamus mattis nostra nullam turpis
      euismod pretium.
    </p>
  </body>
</html>

I added some random text as an example. Try to change the text or add a new <p> tag to practice HTML.

Final Paragraph

How to change the text of the browser tab name or title?

Right now, in the browser tab name, your file name is displaying. But what if you want to display your article headline or add a document title. Let's do that.

We will have to use <head> tag like we were using <body> tag. Unlike <body> tag the <head> tag contains document's <title>, <meta> tags etc.

<title> tag represents the title of the document. So, We are going to use the <title> tag.

Add the <title> tag in your code like the code below.

<!DOCTYPE html>
<html>
  <head>
    <title>Here goes the title of the document</title>
  </head>
  <body>
    <h1>Title of the Paragraph</h1>

    <p>...</p>

    <p>...</p>
  </body>
</html>

document title html

Conclusion

Try changing or adding new text, HTML tags to practice and learn more.

What I talked about HTML in this whole post was very basic of HTML. You will have to gradually learn other HTML elements one by one and how to group them and where should you use it or not things like that.

The complete HTML file can be found here.

Good Luck!

Related Article: Design your HTML Web Page like other websites you see on the inernet

Share:
Show Comments
By using our website you agree to our Cookie Policy.