Basic HTML Editors
To write your first HTML document we recommend to use simple text editors-
- Notepad for Windows
- TextEdit for Mac
We are using these inbuilt text editors because they are perfect to start with and are distraction free. You will also get an idea of how to write, save, open, edit the HTML file easily.
Opening Notepad in Windows
Method 1: Right click > New > Text Document
Method 2: Press windows key and search Notepad
Method 3: Start menu > Programs > Windows Accessories > Notepad
Opening TextEdit in Mac
Method 1: Open Finder > Applications > TextEdit
In Preferences > Format > choose “Plain Text”
Then under “Open and Save”, check the box “Display HTML files as HTML code instead of formatted text”.
Then open a new document to write your code.
Ok, so now you have a new document. Now let’s write some HTML content that will be displayed in the browser.
Writing HTML code
Mention doctype: First thing is to specify the document type before doing anything.
Main html tag: Line 2 and line 0 are the opening and closing HTML tags. It is like the walls of a room. These tags will contain our whole HTML code we will be writing.
head tag: Then comes the head tag. It contains other essential information about the document like metadata. We will talk about it later. For now, we will just write the title of the document inside the head tag. This title will be displayed on the tab of the browser.
body tag: Then comes the body tag. The body tag contains rest of the HTML that we need to display on the browser’s window. Usually the main content.
footer tag: Then the footer section to display some content in the bottom section of the website.
The code altogether might look like this-
<title> Title of the document</title>
<h1>What goes inside body section?</h1>
<p>The content you want to display in the browser's window must be written inside body tags. The body tags inform the browser that this portion contains all the main content like headings, images, paragraphs, tables, forms etc. </p>
<p>Copyright 2018 - All rights reserved</p>
I am rewriting the basic markup for you to remember. It can, however, include additional markup or parent tags but we will look at it later on.
Saving HTML file
After writing this example code in your editor, try to save the file.
Goto File > Save As
Choose your location, write the file name and type .html as the extension of the file.
Now double click the file to open in the browser.
Using Advance HTML Editors
You can also download and use anyone of these professionally built editors for programming.
- Sublime Text
- Atom Editor