What Software Is Required to Create a Webpage

No Need to Purchase Any Extra Software to Create a Webpage!

The good news is that if you want to create your own hand-written webpages you need not to purchase any extra software to start your journey of the wonderful world of web development. The creators of HTML had worked hard for us in such a brilliant way that we can even use a simplest word processor i.e. note pad (for windows) to develop a webpage without facing any serious hurdle.

Software You Can Use to Create a Webpage

Two types of software can be used to develop a webpage which are explained here below:

Specially Designed Software:

You can create a webpage using specially designed software for web development i.e. Dream Viewer or any other. These type of software provide tow interfaces; HTML Interface, for HTML code writing or/and editing, and a Design Interface to provide the facility of creating a webpage without writing any code.

In the Design interface you need not to enter HTML tags and lengthy pieces of code to perform various tasks in your webpage such as formatting text and paragraphs, inserting tables, lists, form’s elements and other elements. All these tasks are done just by clicking on icons, selecting commands from menus and setting and providing some values like you do in advance word processors while working on your official or personal documents. These software also provide the facility of managing folders containing your webpages, images and sub-folders quite easily. Another facility provided by these software is auto word completion/suggestion for the words which are reserved by the language developers for the HTML language or reserved by the web developer who is creating webpages using HTML. Auto word completion/suggestion means when you type a few letters of these reserve words you are shown a list of words next to the ending letter of the word and you can select the appropriate word from that list instead of typing the complete word.
The HTML Interface, of such software, provides you an access to HTML code which is generated automatically at the back-end of the software while working on the fronted (in Design Interface). This interface is helpful when you want to gain more control for designing and securing your website or solve a problem which is not possible to solve by working with Design Interface. In my opinion, this is very useful tool. One important thing about such software which should be remembered is: "More ease causes less control/security i.e. in Design Interface, while less ease causes more control/security i.e. in HTML Interface".

Simple Word Processor

Using a simple word processor, like note pad, you have to write and manage the HTML code of your webpage yourself as the word processor will not do this job for you unlike in Dreamweaver's Design Interface (if you did not understand at this moment, keep reading, you’ll understand at the end of this heading). By writing HTML code and managing the folders containing your webpages and images yourself, you gain less ease but much control/security. Some word processors like Notepad ++ (a freeware software) are user friendly and provides you some facilities such as to show the code in different colors and inserting the line numbers on the start of each line to help the web developers and someone else who want to read and understand that code.

Beginners Should not Use Specially Designed Software for Web Development

If you want to become a top quality webmaster, I would recommend you not to use software like Dream viewer at beginning level. The reason is that when you use such a software you don’t write the code yourself, as a result you don’t get familiar of HTML syntax—the rules of any computer language which describes the way of writing statements to tell the computer what to do -- and coding style, you are not habitual of time consuming process of understanding and writing code. This could put you in trouble while you are working on a project and unfortunately you’ve faced a problem which is not getting solved with the Design Interface of your software and the only way to solve the problem is to use HTML Interface to overcome this problem. Working with the Design Interface of these software you could not solve it as you are not familiar of the HTML syntax, coding style and understanding code. But feel free to use Design Interface of such software when you’ve full control over HTML syntax and coding.

Use Simple Word Processor for Web Development

It is good for the beginners to use word processors or HTML Interface of such software to write code of a webpage. In this way you have to write the code yourself and you’ll get aware of what and how you are doing on your webpage. You'll learn HTML syntax, coding style, and understanding of code which will be useful in future. Notepad can also be used but you can download Notepad++ and install it on your computer.
After installation of Notepad++ you are ready to create your own webpage. Proceed to the next topics to understand the structure of a webpage and then start your coding properly to create a webpage!

Text Hyper Link

What is Hyperlink & What Hyper-Link Does!

A piece of text or an image that directs a user to another document i.e. webpage, next/previous topics or sections on the same webpage or to an Email Address just by clicking/taping on it is called a Hyperlink.

Difference in the Look of Hypertext and Normal Text:

By default, simple and non-hyper-linked text is in black color and the picture looks same as it looks in any image viewer without any change and nothing happens by clicking such text or image.
While on the other hand, a Hyper-linked text looks different from the non-hyper-linked text. By default Hyper-linked text is in blue color and is underlined and the image looks same as it looks in any image viewer without any change.

Whenever a user drags mouse pointer over (in technical term hover) a Hyper-linked text or image, the mouse pointer gets changed into a hand shape from a normal arrow shape (on windows). When a user clicks a Hyper-linked text its color also gets changed, normally from blue to purple, to indicate that the user has already visited this particular link.

Anchor Element and Its Important Attributes:

An Anchor Element is used to create a Text Hyper-Link or an Image Hyperlink
Syntax: <a attribute="value">Text to be displayed</a>
Important Attributes:

1. href: takes the URL of the target id as its value.
2. target: describes whether the linked document should get opened in the same or new tab, parent frame or child frame or in a new window.
3. name: takes any valid group of alphanumeric characters as its value.

Examples:

Following are some examples which illustrate how to use an Anchor Element to create a:

1. Text Hyperlink Targeting a Webpage/Document
2. Text Hyperlink Targeting a Section with in a same Webpage
3. Text Hyperlink Targeting a Section in a Different Webpage

Text Hyperlink Targeting a Webpage/Document

Exemplary Code:

<a href="http://webdevelopingwithkhuram.blogspot.com/p/html-tutorial.html">Go To WebdevelopmentwithKhuram.blogpost.com</a>
                

Example Result:

Go To WebdevelopmentwithKhuram.blogpost.com

Explanation of the Example:

1. Anchor Element is used here to create a Text Hyperlink.
2. The url of the target document is given as a value of the href attribute.
3. The text to be displayed (such as Home, About Us, Help, Download) is put in between <a> and </a> tag.

Text Hyperlink Targeting a Section with in a same Webpage

Exemplary Code:

<a href="back_to_top"></a> 
<nav>
    <a href="#target_1">Go To Target_1</a>
    <a href="#target_2">Go To Target_2</a>
</nav>
<p>
    This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.
</p>
<a name="target_1"></a>
<p><h2> This is target 1</h2></p>
<a href="#back_to_top">Top</a>
<p>
    This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.
</p>
<a name="target_2"></a>
<p><h2> This is target 2</h2></p>
<a href="#back_to_top">Top</a>

Example Result:

Go To Target_1
Go To Target_2

This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.

This is target 1

Top
This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.

This is target 2

Top

Explanation of the Example:

1. Anchor Element is used to set the "target 1", "target 2" and " back_to_top" targets.
2. name attribute of the Anchor Element takes the values "back_to_top", "target_1" and "target_2" to set the targets.
3. href attribute of the Anchor Element takes names("target 1", "target 2" and " back_to_top") of the target preceded by a '#' symbol as a url.
4. The text to be displayed (such as Home, About Us, Help, Download) is put in between <a> and </a> tags for the links.
5. No text is displayed in between the <a> and </a> tags where the targets are set and the href attribute is not used.

Note: Hash symbol '#' in href indicates that the target is in internal link and can be in the same or in a different document.

Text Hyperlink Targeting a Section in a Different Webpage

Exemplary Code:

<a href="back_to_top_1"></a> 
<nav>
    <a href="#target_1">Go To Target_1</a>
    <a href="#target_2">Go To Target_2</a>
</nav>
<p>
        This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.

</p>
<a name="target_1"></a>
<p><h2> This is target 1</h2></p>
<a href="#back_to_top">Top</a>
<p>
            This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.

</p>
<a name="target_2"></a>
<p><h2> This is target 2</h2></p>
<a href="#back_to_top">Top</a>

Example Result:

Go To Target_1 of Other Page
Go To Target_2 of Other Page

This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.

This is target 2

Top
This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.

This is target 2

Top

Explanation of the Example:

1. Anchor Element is used to set the "target 1", "target 2" and " back_to_top" targets.
2. name attribute of the Anchor Element takes the values "back_to_top", "target_1" and "target_2" to set the targets.
3. href attribute of the Anchor Element takes the url of the other webpage and the names("target 1" and "target 2") of the target preceded by a '#' symbol as a url (i.e url + target section).
4. The text to be displayed (such as Home, About Us, Help, Download) is put in between <a> and </a> tags for the links.
5. No text is displayed in between the <a> and </a> tags where the targets are set on the targeted webpage and the href attribute is not used.

Note: Hash symbol '#' in href indicates that the target is in internal link and can be in the same or in a different document.

Web Development, A Step By Step Guidance

Is It Difficult to Learn Web Development?

Many people think that creating their own website is quite difficult but after reading this tutorial you'll witness that actually how easy it is to create a website. So, let’s start to create your own website following this blog. In this blog you’ll come to know that how you can learn web development in a quick and easy way by following a step by step guidance -- instead of choosing topics randomly. Always follow the right steps of learning at right time whatever you want to learn in life. It proved to be more effective when you start to learn things step by step and in a regular way. Things get easy to learn and you learn them very fast due to consistency in your learning behavior. Let’s start.

How to Start Learning Web Development

First of all you must learn some basic terms related to web development & internet such as website, webpage, web server, web client, IP address, HTTP, domain name, WWW, web browser, and etc. Then you should gain introductory knowledge of different languages, which are sued to develop a website, such as HTML, X-HTML, JavaScript, Visual Script, PHP, ASP.NET, SQL, Rail, and many more. After gaining some basic knowledge of web development and its languages, it’s time to move forward and coding to develop your website. For coding you need to learn some languages which I’ve mentioned in the previous paragraph.

HTML

Now you will want to create your own hand generated web pages to develop a website. You may want to include some images or embed videos as well as a web form, paragraphs, lists and tables in your web pages. For doing all of this you must learn HTML before learning any other language during your web development learning process. But before learning HTML I would recommend you to know that actually what HTML is and then you should start to learn it. Click this link to know What is HTML. But if you’ve already learnt HTML then you should proceed to the next paragraph to know that what you should do next after learning HTML.

CSS

As now you can develop your own web page quite easily and you’ve developed some one. But at this stage you can’t make your website quite attractive and good looking. You want to make its look very attractive but with HTML you can’t do that at all. For providing attraction and good look to your website you need to learn CSS instead of learning any other language at this time. But before learning CSS, I, once again, would recommend you to know that what CSS is and then you should start to learn it. Click this link to know What is CSS. But if you’ve already learnt CSS as well, then you should proceed to the next paragraph to know that what you should do next after learning CSS. If you are missing any of these two languages then you should learn the missing one first to move forward.

JavaScript

You are doing your job very well. Your website would getting look good enough with an eye catching view but it’s still unable to respond the user/visitor i.e. you can’t make calculation, take decision, checking the validation of data and processing that data. For all of this you need to learn JavaScript before moving towards any other language. But I would recommend you to know that what JavaScript is before start it learning and then you should start to learn it. Click this link to know What is JavaScript. But if you’ve already learnt HTML, CSS and JavaScript then you should proceed to the next paragraph to know that what you should do next after learning CSS. If you are missing any of these three languages then you should learn the missing one first to move forward.

SQL

Now you are happy as well as a bit confused. You would be keen to make your web pages dynamic, run some sever side script and work with database. Now it’s time to learn SQL instead of learning any other language and even PHP (as, when you’ll start learning PHP, you’ll learn to interact with database, and for database you need SQL. If you’ll not learn SQL on this stage, you could not interact with database). But before learning SQL I would recommend you to know that what SQL is and then you should start to learn it. Click this link to know What is SQL. But if you’ve already learnt HTML, CSS, JavaScript and SQL then you should proceed to the next paragraph to know that what you should do next after learning SQL and if you are missing any of these four languages then you should learn the missing one first to move forward.

PHP

As you’ve learnt SQL you make dynamic web pages, work with some database and running server side script by learning PHP which is here waiting for you! Why should you wait anymore!!!! Before starting PHP learning, I, again, would recommend you to know first that what is PHP and then you should start to learn it. Click this link to know What is PHP. But if you are missing any of these languages; HTML, CSS, JavaScript and SQL, then you should learn the missing one first to move forward.

HTML Elements and Tags

How Browsers Renders an HTML Document?

All of you know that an HTML Document is simply a text file rendered by the web browsers. But the question is that how does the browser knows that a particular piece of text should be rendered as a heading and other as a paragraph or a table. The page you are currently browsing also contains heading, paragraphs etc .

Here is the answer: HTML uses Elements to tell the browsers that how the HTML Document should be rendered. How the particular piece of text should be rendered as a heading and other should be rendered as a paragraph, this data should be rendered as a table and that should be rendered as a list etc.

HTML Element:

Most of the HTML Elements are consists of a pair of a Starting Tag and Ending Tag. Every thing from starting tag to ending tag is an HTML Element. We have two type of HTML Elements which are given as follows:

Not-Empty HTML Elements:

An HTML Element which needs to have both the starting and ending pair of tags otherwise browser might be unable to render that Element correctly such as <html></html> and <body></body> etc.

Empty HTML Elements:

An HTML Elements consists of only Starting Tag and don't need to have an Ending Tag such as Paragraph Element <p> and Image Element<img> .

HTML Tags:

An HTML Tag starts/opens with a left angle bracket (<) and ends/closes with a right angle bracket. There are two types of HTML Tags which are given as follows:

Starting Tag:

A Starting Tag consists of the name of the element and some attributes having values. Empty tags such as <br /> and <hr /> don't contains any attribute.

Ending Tag:

An Ending Tag consists of the name of the element preceded by a forward slash. Empty tags don't have the Ending Tag such as <br /> and <hr />. Instead the Element name is followed by a forward slash in in the Starting Tag.

Example of Bold Element:

Here is an example of an HTML Bold Text Element:

Exemplary Code:

<b>Hello! I'm part of the Bold Element of HTML!</b>
                

Example Result:

Hello! I'm part of the Bold Element of HTML!

In the above example <b> is the Starting Tag and </b> is the Ending Tag of the HTML Bold Text Element. “Hello! I'm testing the Bold Text Element of HTML!” is the phrase which, now, is the part of the HTML Bold Text Element.

Example of Nested Elements:

Here is an example of the nested HTML Elements which is a modification of the  previous example. Point to be noted here is that when you want to nest many HTML Elements you should take care of the order of the Elements. The Element started first will be closed in the end. Look at the following example, the starting tag of the Paragraph Element <p> is the first tag but it's closing tag </p> is the last one.

Exemplary Code:

<p><b><i> Hello! I'm testing the bold & Italic Text Elements of HTML! </i></b></p>

Example Result:

Hello! I'm testing the bold & Italic Text Elements of HTML!

What Is HTML

Background of HTML

Earlier when internet was very new and with a slow data transfer speed it was not possible to browse webpages like we do now a days. The data was transferred over internet in the form of separate files like *.txt, *.doc or any other file instead of a hypertext file (webpage). User had to download the complete file which s/he wanted to. But still it wasn’t sure that user could access files’ data. As after downloading the file, to access its data, user needed the appropriate application to run/execute that file. If the user didn’t have the appropriate application, to run/execute the file, s/he couldn’t access the data of the file.

Also, it was a very much time consuming process to download the file as speed of the internet was very slow and files were very heavy sized due to having formatted data. In this scenario low internet speed was very annoying for the users to download heavy sized files.
These were the real problems as everyone didn’t have the appropriate application or faster internet speed to download or even have a look at (browse) a file on internet. Then it was realized that software (web browser) should be designed which could display a simple hypertext markup files (without any formatting) into well-formatted and well-organized document (webpages). For this purpose HTML and web browsers were developed.
HTML is not a case sensitive language- a language which doesn’t care whether the statements are written in upper or lower case- and HTML tags can be written in either lower or upper case letters and you'll not receive any error. Feel free to write HTML tags in whatever case you want to but it is recommended to write in lower case instead of upper case letters.

Why HTML Is Called Hypertext Markup Language

You’ll be thinking as a hypertext file contains simple text without any formatting then how the webpage looked formatted when we download and see them on a web browser. You’ve raised a valid and a good question. HTML is a called a markup language which means it uses some marks (symbolized letters i.e. some text ). These marks play a vital role in the formatting of a webpages and help the web browser to recognize the specific formatting to be applied on the text or part of text, makes tables and inserts lists and images in a webpage. You’ll further read about tags in the next blog What Are Tags (Marks) in HTML.

Why It Is Called Hypertext Markup Language

Now the actual and core problem was solved. Then further it was realized that these webpages should be interlinked to each other so that users should be provided an easy access to other related webpages of the website being visited. To fulfill these requirements Hyper Link was introduced. Hyper Link is a link assigned to simple text or to an image which directs a user to another webpage or website by clicking on it. You can identify and distinguish a Hyper Link from the simple ordinary text or image by observing the change in the shape of the mouse pointer, from an arrow to hand, and after clicking on it you get another webpage or website on the same or in new window. Due to these marks (a browser reads to format a webpage) and Hyper Links HTML is called Hyper Text Markup Language.

Versions of HTML

HTML has many versions. Its versions start from HTML 2.0 and goes to HTML 4.01. It’s new and upcoming version is HTML 5 which will be released in 2014.

Important Terms:

1. Compiler is a program that converts High Level code into Binary code.
2. Web Browser is a program that reads a simple text (HTML) file-webpage-, which contains marks, and displays it as a well-formatted document with the help of some marks in the text file mixed with the original text/data.
3. Website is a collection of related webpages.
4. Webpage is a document containing every type of data from simple text to videos.
5. HTML tags are paired set of symbol to indicate the start point and end point of specific formatting i.e. bold, italic.
6. Hyper Link is simply a text (or can be an image) and normally is in blue colored and underlined which direct the user to a specific webpage or website.

Web Development, Some Basic Terms

If you want to learn web development and want to create your own website then you are on a right place to start. But I would recommend you to you read my blog Web Development, A Step By Step Guidance, then read this one for better understanding and proceed to this blog. If you are not interested, you can skip them and continue to read this post.

Web Development

The process of designing, developing, publishing and maintaining the websites is known as web development. It is the method of publishing data across the world via World Wide Web-i.e. text, audio, videos, and images-using internet.

Webpage

A web page is document written in HTML which can contains any type of data such as text, images, videos etc.

Website

A website is collection of related webpages which are linked using hyperlinks. A web site may contain fewer or even hundreds of webpages stored on web servers.

Web Browser

A web browser is software which is used to display the hyper text files in the form of a well formatted, well designed webpage. Web browsers reads marks in the hyper text file and with help of these marks decides that where the text should be displayed as bold, italic, colorful, large size, etc. It is clear, to know the duty of web browser, that web developer thinks and instructs the web browser about the look of a web page and web browser obeys the instructions and displays webpage as instructed by the web developer.

Internet

Internet is a network of billions of computers connected to each other from all over the world. Computers are connected using different types of communication medium such as cables, radio waves, satellite and etc. Computers also need a transfer protocol for sending and receiving data.

World Wide Web (WWW)

World Wide Web is the combination of all the resources on internet such as web pages, web servers and clients on internet. It is used to share and display data worldwide using a network protocol named HTTP.

IP Address

39.55.97.170 -- this is an IP address. Whenever a computer is connected to internet it is given a unique address which is called an IP address. This address helps a computer to access other computers and website. Web servers have a constant IP address but the IP address of client computer is changed every time when it gets connected to the internet.

Domain Name

It was difficult for the users to remember the complete IP address of each website. To solve this problem the IP addresses of web servers are, now, represented in easy to remember English like words such as webdevelopmentwithkhuram.blogpost, Google, yahoo and etc. otherwise you’ll have to remember lengthy and hard to remember IP Addresses to get access to a website.

URL:

URL stands for Uniform Resource Locator and is known as web address. It consists of two main parts i.e. network protocol and file resource. http://webdevelopmentwithkhuram.blogpost.com is the example of a URL of this page.
Network Protocol is a rule of sending and receiving data, HTTP in the above example. File Resource is the address of the resource you are looking for, http://webdevelopingwithkhuram.blogspot.com in the above example.

Web Client:

The computer you are using to connect to internet to read this blog is considered as a client computer. Client sends request/s to the web server and, in response; server sends the requested webpage/s to client. Client, then, renders the sent webpage and displays it via a web browser i.e. Chrome, Firefox or any other.

Web Server

A web server is a powerful computer which is used to store the websites. A server receives the web client's request and sends the requested webpages, of the typical website, to the user’s computer (web client).

Client Side Scripting

Some part of the webpage code is run on the web client and other is run on the web server. The part of code run on the web client is known as Client Side Scripting such as filling an online web form where you might be warned, if something gets wrong, or suggested the alternative by prompting you to re-enter your data.

Server Side Scripting

The part of code run on the web client is known as Client Side Scripting such as filling an online web form where you might be warned, if something gets wrong, or suggested the alternative by prompting you to re-enter your data.