In this tutorial, I will teach you how to develop a website from scratch step by step. I will start from basics and gradually move to advance level. In order to develop a website, you should know three technologies – HTML, CSS and JavaScript. HTML is used to develop web pages, CSS is used to design and beautify web pages and JavaScript is used to make the web pages dynamic. Let’s start with HTML.
Introduction:
HyperText Markup Language (HTML) is the markup or tag based language that is used to create web pages or html documents. HTML comes with couple of tags using which we can define the structure of the document and logically organize the content in it, for example defining headings, sections, paragraphs and data tables, or embedding images and videos in the page. Collection of such inter-related web pages is known as Website.
The standard structure or markup of a basic web page is given below –
<!DOCTYPE html>
<html>
<head>
<title>First Web Page</title>
</head>
<body>
<p> Hello there! </p>
</body>
</html>Here the words enclosed with<> brackets (like <html>, <head>, <body> etc.) are known as tags.
In HTML we have two types of tags, the first type of tags come in pair – opening and companion closing tags. These tags are called Paired Tag or Container Tag. A forward slash (/) is added in the beginning of a tag to close it. For example, <html> is opening tag and </html> is the companion closing tag. Almost 99% of tags in HTML are paired.
The second type of tags do not have the companion closing tag. Such tags are known as Singular Tag or Stand-alone Tag or Empty tag. Some of the Singular tags are listed below-
| Tag | Name | Description |
| <hr> | Horizontal Rule | Insert a horizontal line |
| <br> | Line Break | Insert a line break |
| <img> | Image | Insert Image |
| <input> | Form Input | Insert form input |
| <!DOCTYPE> | Document Type | Specify the html version used |
There are close to 100 tags in HTML, but we end up using only few of them. In the last 12 years, being a Web Developer, I might have used hardly 30-40% of the tags and it is perfectly normal. Some of the most commonly used tags while building web pages are given below –
| Tag | Name | Description |
| <!– –> | Comment | This tag is used to apply comment in an HTML document |
| <!DOCTYPE> | Document Type | This tag is used to specify the version of HTML |
| <html> | Html | Root element of html document |
| <head> | Head | Contains meta data of the document |
| <title> | Title | Contains page title of the document |
| <body> | Body | Contains document’s main content |
| <div> | Division | A section in the document |
| <p> | Paragraph | Defines a paragraph |
| <span> | Span | A smaller section |
| <table> | Table | Defines a table |
| <ol> | Ordered List | Defines an ordered list |
| <ul> | Unordered List | Defines an unordered list |
| <li> | List Item | Defines an item in list |
| <form> | Form | Defines a html form to capture user inputs |
| <input> | HTML Form Input | Html for controls |
| <select> | Dropdown List | Defines a dropdown list |
| <option> | Dropdown List Option | Defines a dropdown list option |
| <b>, <strong> | Bold | Makes text bolder |
| <i> | Italic | Makes text italic |
| <u> | Underline | Underline text |
| <sup> | Super Script | Create superscripted text (appears above) |
| <sub> | Sub Script | Create subscripted text (appears below) |
| <h1> to <h6> | Header | Define page headers |
| <a> | Anchor | Create a hyper link |
| <link> | Link | Link external style sheet (CSS) file |
| <script> | Link JavaScript | Link external JavaScript file |
<html> is the root tag of a web page, and it contains<head> and <body> tags. The <head> tag contains information about the web page and other meta data. The <title> tag comes under <head> tag and it contains the title of the web page. Any thing you write inside the title tag will appear in the browser tab when you view the page.
The title tag may also contain many more other tags which I will discuss as we progress. The body tag contains the actual content of the page, anything you write inside body tag will be visible in the browser.
Elements and Attributes:
In html, a tag along with it’s content is known as element. For example, in the following code, p is an element.
// An element
<p class="text"> This is a paragraph </p>
HTML attributes provide additional information about HTML elements. It is not mandatory that every element should have some attribute. In the above example, the element has an attribute class with value text, which is nothing but a CSS class that defines the style of the element. At this point you might not be familiar with CSS. While learning CSS, you will understand the use of this attribute. An element may have multiple attributes as well. Some of the commonly used attributes are – id, class, style and title.
The are some tag specific attributes which can not be used in any other element. For example, src and alt can be used with <img> tag only. Similarly, href and target can be used only with <a> tag.
// Only image (img) element may have src, alt attributes
<img src = "images/some-image.png" alt="This text will appear if the image is not found."/>
// Only anchor (a) element may have href and target attributes
<a href = "www.facebook.com" target="_blank">Go to Facebook</a>Getting Started:
We have sufficient theoretical knowledge now. Let’s get into coding now!
1. Create a folder anywhere in your computer and give a name of your choice, let’s say mywebsite. Open any text editor/notepad and write the html code given below.
<!DOCTYPE html>
<html>
<head>
<title>First Web Page</title>
</head>
<body>
<h1> Hello world! </h1>
<p> I am learning HTML </p>
</body>
</html>2. Name the file index.html and save it in the folder you created. Note that html files should be saved with .html extension. You can also save the file with just .htm extension, but I will not recommend it. Let’s code clean.
Technically, index means first page or home page of your website. Although, it is not mandatory, it is good practice to name it index. It also helps browser to understand which page it should display if there are multiple pages in the folder once we deploy our website in server. You will understand this later.
3. Open the file in a browser.
This is how the page will appear in the browser –
That’s all. You have successfully developed your first web page.
As you can see, content written inside body tag is only visible in the browser. Browser does not display the html tags, it just interpret the file and displays the content in the same order we wanted to display. The page seems very plain and null. To style & make it look beautiful, we will have to write CSS code.
Tips: For better coding experience, you can use notepad++, it has some more features. You can download it from here.
Now, lets add some more content in the page and leverage other html tags.
<!DOCTYPE html>
<html>
<head>
<title>First Web Page</title>
</head>
<body>
<h1> Hello world! </h1>
<p> I am <b>learning</b> HTML </p>
<p> This text will appear <i>italic</i> </p>
<p> This is my 1<sup>st</sup> web page</p>
<p> Scientific name of water is H<sub>2</sub>O <p>
<h2> Unordered List Example </h2>
<ul>
<li>HTML</li>
<li> CSS </li>
<li> JavaScript</li>
</ul>
<hr>
<h2> Ordered List Example </h2>
<ol>
<li>HTML</li>
<li> CSS </li>
<li> JavaScript</li>
</ol>
<hr>
<div>
This is a division. Division can contain all other tags.
<p> I am a paragraph inside div.</p>
<span> I am a span1 </span>
<span> I am a span2 </span>
</div>
</body>
</html>The output of the above code would be something like this-
Isn’t it easy? Okay. Now here is an exercise for you. Create your resume in html. Here are some hints:
- Use <div> tags to separate each section.
- Add description in <p> tags.
- Use header tags <h1>, <h2> etc. for section’s titles.
- Use <ol> and <ul> to list your skills and educational qualifications.
- Use <hr> to separate sections.
- Use <b>, <i>, <u> tags to highlight text.
Good luck.