Create a Web Page or Write an Article With HTML

Nov 21, 2022 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:

Open html file 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 headings 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 a Web Page Using HTML & CSS