9 Minutes
Last Updated: 25-Nov-2021


HTML EDITORS

What are the HTML file editor apps?

To display any contents in the browser, first you need app that helps you to write your contents inside of the HTML tags.

These apps are simply called text editors. In your computer there are apps called Notepad (In PC) and TextEdit (In Mac), With the help of these apps you can edit your HTML code (the contents and the HTML tags) of your contents.

Now in your computer open the app you have, then write it write like these code or copy this,


<!DOCTYPE html>
<html>
<head>
<title> This is the title of the web page </title>
</head>
<body>
<h1> This is the heading 1 of the web page. </h1>
<p> This is the paragraph of the web page. </p>
</body>
</html>

In your Notepad HTML code editor, it will looks like that,

html code

Next save this code, To save it, you should click on File (top left side) then click Save as, Next the screen will popup this box (may larger for you, if you unhide your folders).

You can give a name for the HTML file like index.html and make sure the encoding is set to UTF-8.

html code

Instead of index, you can give any name for your file, But in the file extension you must use .html or .htm, and Both of those extensions will give you the same result.

To see the code result, you need to open the file in one of your browsers. To open the file, go to your file directory and double click on that HTML file, then it will open with your computers default browser or right click on that file then click on Open with finally open the file with your preferred browser, it will looks like that,

html code

This is your first web page. You can insert a lot of contents inside of the body tag and it will open like the above result.

Explanation of the above code.

  • The first line <!DOCTYPE html> is the document type declaration. It instructs the web browser that this document is an HTML5 document.
  • The <html> tag is the opening tag for the html page, all the contents of that web page are located below this opening tag (<html>).
  • The <head> tag is the opening tag for the head container, A head container is the container that contains the title of the web page and other useful meta tags.
  • The <title> tag is the title tag for that web page, on the last of the title of the web page there is a closing tag </title> which is having slash / before the title tag. And all the contents of title of the web page are located between those starting title tag <title> and title closing tag </title> .
  • The </head> tag is the closing tag for the head container, all the contents you want to put inside of the head tag are, must be insert above this closing tag, and before <head> tag, slash / is needed to close that tag that is </head>.
  • The <body> tag is the opening tag for the body container, The body container is the container that contains all the contents of the web page except the title and other useful meta tags which are written between the two head tags.
  • The <h1> tag is the opening tag for the heading container, The heading container is the container that contains the topic or sub topic contents of the web page. then after that heading tag you can write the contents you need to insert it. Finally you must close the tag (like </h1>)with having slash / before the tag name. All the topics or the sub topics (large fonts) are written between these tags In the future chapters you will learn more about heading tags.
  • The <p> tag is the opening tag for the paragraph container, The paragraph container is the container that contains all the words that inserted between the opening tag ( <p>) and closing tag ( </p>) of the every paragraph on the web page. When you write a paragraph, you need opening tag ( <p>) before writing any word, and after you write your paragraph, you need to close the paragraph using the closing tag ( </p>). Note that: you should write opening tag ( <p>) and closing tag ( </p>) in your every paragraph, then every paragraph contents must be inserted between these every two tags.
  • The </body> tag is the closing tag for all the body container, The body closing tag will close all the contents which are located between these two body tags (opening <body> tag and closing </body> tag).
  • The </html> tag is the closing tag for the whole of that web page, </html> will close the whole web page contents. there is nothing contents should be written below this closing tag (</html>). Especially you will learn more about how those tags work in the next chapter.

In the next chapter you will learn our HTML basic Tutorial. To continue click next...



Share this page           

SUBSCRIBE to newsletter To get the most updated contents through your Email.



We've Recommended Articles for you