Home » Blog Posts » Create your first HTML website from scratch without a content management systems like wordpress or joomla

Create your first HTML website from scratch without a content management systems like wordpress or joomla

 Category:Web Design  
 By: usericon Nonny01  

fblog
 Created: 7/3/2016 1:20:00 PM

Introduction

Learn HTML website from scratch

HTML(Hypertext Markup Language) is a markup language used for creating web pages. Its is made up of tags that are enclosed in angled brackets: < >. Some tags stand alone and some come in pairs. In paired tags, the ending tag starts with a slash: /

Requirements for creating a web page

For static HTML website, you don't actually need a "what you see is what you get"(WYSIWYG) web editor software. You can create web pages using Notepad. Advantages of using notepad as a beginner are that you will learn the basics of how an HTML web page is created, but as you grow you can use a web editing software like Dreamweaver, visual studio e.t.c

If you want to learn how to create a website using a "what you see is what you get"(WYSIWYG) web editor like Dreamweaver, go through this post.. Learn HTML using Dreamweaver

Create your first website

Create a new folder on your desktop, name the new folder firstwebsite.

#1. Create your first web page

1. Open notepad and insert the following code. You can copy and paste the code.

<!DOCTYPE html>

<html>
<head>
<title>Home Page</title>
</head>
<body>

<h1>Welcome to my website</h1>
<p>
My first web page.
</p>

<h2> Hello </h2>
</body>
</html>
 

2. Save the file by clicking the "File" menu, followed by the "Save As...". In the save As box, type the name of the file as "index.html" and make sure you select "All Files" under "Save as Type". On the navigation panel by the left, select desktop, look for the folder you created named firstwebsite, double-click on it, click on the save button below to save the file. This is going to be your homepage.

3. Now open this file with any web browser and you should see a clean white page that says welcome to my website .

learn HMTL website

#2. Create your second web page

Open notepad and insert the following code

<!DOCTYPE html>

<html>
<head>

<title>About Us</title>
</head>
<body>

<a href="index.html">Home</a>

<h1>About Our Site</h1>
<p>
We design professional looking websites
</p>
</body>
</html>

Save the file as before. Name the file "about.hml". Now view the file in a web browser.

learn HMTL website

The files above contain HTML Tags such as headings <h1>, paragraphs <p> and Anchor <a>. To learn more about HMTL tags and its functions.

Congratulations you have created your first website.

What Is Next?

You've now learnt the basics for creating a website. The next step is learning how to style your website by adding CSS(Cascading style sheets).

Next Step - Add Cascading Style sheet(CSS) to your website


Leave your comment/question
You can use some HTML tags, such as <b>, <i>, <a>