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 :
The html file root element is
<html> and which ends with
</html>. Easily seen part of the HTML file is
<body> that finishes with
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:
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 :-
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 :
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 :-
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
|Accept||Input||describes the type of files the server that accepts (only type=”file”)|
|Access key||Global Attributes||describes a shortcut key to focus on an element|
|Action||Form||describes to post the form-data when any form will be submitted|
|Align||Not Supported in HTML 5||describes the alignment according to elements who are surrounding.|
|Alt||Area, Image, Input||describes an alternate text where the original element has no content to display.|