Best HTML Editor to use and Start Coding!

Html Editor

Share This Post

Share on facebook
Share on pinterest
Share on twitter
Share on linkedin
Share on google

Web pages can be created by simple text editor

We use notepad normally. Follow the following to open Notepad or editor 

Windows 8 or later:

Open the Start Window (the symbol at the bottom). Type Notepad.

Windows 7 or earlier:

Click at Start then at Programs then at Accessories > Type Notepad

Open TextEdit (Mac)

Open Finder > Applications > TextEdit

 In Preferences click Format then  select “Plain Text”

 Then below “Open and Save”, check the checkbox by which HTML files are shown as HTML code in the form of plain text.

Then open a new document and  place the code.

Now Write some HTML

Write the following code into Notepad:-

<!DOCTYPE html>
<html>
<body>

<h1> My First Heading </h1>

<p> My first paragraph. </p>

</body>
</html>

Which looks like this :-

Now Save the HTML page :-

Save the file on your computer. Choose File then click on Save as in the Notepad menu.

It should be saved as index.html and set to UTF-8. This is the preferred encoding for all HTML files. You can write extension as .htm or html it totally depends on you.

Now view the HTML web page in your web browser :

The open  document in web browser look like this as below

Every html file start with : <!DOCTYPE html>.

The html file root element is <html> and which ends with </html>. Easily seen part of the HTML file is <body> that finishes with </body>.

The <!DOCTYPE> Declaration :

It represents the document type and helps to display web pages in the 

correct manner. It should appear once and at the top mandatory before start of any html tags. It  is not case sensitive.

The <!DOCTYPE> declaration for HTML5 is:

<!DOCTYPE html>

Now I am taking some basic examples I have already discussed about headings, links and paragraphs except images

So I am discussing them further

HTML Images : They are defined as img tag. The source file (src), alternative text (alt), width, and height  are its attributes.

For example :

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

How to see the source of HTML page :-

Righ click the web page in web browser and select “View page source” (in chrome) or view source (in Microsoft edge) and similarly in other browsers.

Now how to inspect an HTML element:

Right click any element in a web page and choose ‘Inspect’ or ‘Inspect Element’ to see what type of coding and attributes these elements are made of. You can also edit HTML or css in the style panels.

HTML is not case sensitive. This means <p> tag will be same as <P> tag. It is not mandatory to write uppercase or lowercase, but we will recommend it as lowercase tags like XHTML.

I already discussed about HTML elements now I will about HTML attributes:-

HTML attributes: All elements contain attributes. They are associated with start tag. They normally come in pairs like value and name.

Href attribute in anchor tag: – The anchor tag is defined as Hyperlink. The href will define the URL of the page. For example:

<a href=”https://www.instantpay.com“> Instant Pay </a>

You will learn more about anchor tag when I will discuss links in further topics.

The src Attribute in image tag: The src attribute defines the path of the 

image defined in the image to be displayed as :-

<img src="img_1.jpg">

The alt attribute in image tag:- The alt attribute defines the alternate text for image, if there is no image getting displayed.

<img src="img_1.jpg" alt="This is a ball">

The width and height attributes in image tag. For example :-

<img src="img1.jpg" width="500" height="600">

The style attribute: It will add style to an html element such as colour, font and font size etc. It exists in every element.

<p style=”color:blue;”>This is a blue ball paragraph.</p>

The lang attribute : It must be always included in your html tag. It is used to language of the web page. This is used to assist search engines and browsers.

The following example describes English as language :

<!DOCTYPE html>
<html lang=”en”>
<body>

</body>
</html>

Country codes can also be put in lang attribute. There can be four characters the first two is language and the last two is country code.

The below example states English as language and United States as country code :-

<!DOCTYPE html>
<html lang=”en-US”>
<body>

</body>
</html>

You can see all language codes in w3schools html language reference:

The Title Attribute: The title attribute gives the extra information about the element. It got displayed when you do mouse over  the element. It is shown as tooltip.

<p title="I'm a tooltip">This is a paragraph.</p>

Single quotes or double quotes: The double quotes are most common around HTML attributes. We can also use single quotes.

In some situations, there is mandatory to use single quotes 

<p title='John "ShotGun" Nelson'>

Or vice versa:

<p title="John 'ShotGun' Nelson">

The table below lists all HTML attributes

AttributeBelongs toDescription
Accept Input describes the type of files the server that accepts (only type=”file”)
Access keyGlobal Attributes describes a shortcut key to focus on an element
Action Formdescribes to post the form-data when any form will be submitted
Align Not Supported in HTML 5describes the alignment according to elements who are surrounding.
AltArea, Image, Input describes an alternate text where the original element has no content to display.
These are HTML attributes

Subscribe To Our Newsletter

Get updates and learn from the best

More To Explore

Digital Marketing

How to begin and originate your own online business

State, labor, property, and entrepreneurship are traditionally deemed the four significant powers of creation. Although the Internet ought revolutionized. Moreover, there is immeasurable news for

YouTube images
Digital Marketing

Why no one talks about YouTube anymore

According to the people, thoughts the golden age of youtube is completed He’s remaining on the head of his seat as his twin sibling and

Do You Want To Boost Your Business?

drop us a line and keep in touch

small_c_popup.png

Subscribe to our Newsletter