Make a Website Using HTML and CSS

If you wish to create a website by yourself or want to learn how to make a website, this article will be so helpful for you. Creating a website is not so difficult work. Anyone can create and design a website just learning HTML and CSS primarily. This article will show you how to create a website using HTML and CSS.

Make a Website

Make a Website

What is HTML?

HTML stands for Hypertext Markup Language. HTML makes the skeleton of a webpage. Without HTML no webpage is possible. Even the page that you are reading now is also built with HTML. HTML mainly represents the text, image, audio and video in a page by markup tags. So, HTML is a set of markup tags which are used to represent text, image, audio and video in a webpage.

What is CSS?

CSS stands for Cascading Style Sheets. CSS is mainly used to design a webpage. CSS covers fonts, colors, margins, width, height, background-image and other things those are used to design a page. HTML and CSS are the main technologies for building a website properly.

Creating First Page with HTML5

HTML is the core language that is used to create a webpage. Current version of HTML is HTML5 which provides a lot of markup tags to represent text, image, audio and video of a page. To make your first page with HTML5, create a new file anywhere of your computer and name it as index.html. See the file extension .html. Every HTML file should have this extension. Now open index.html file with WordPad or Notepad and write below tags in this file. Don’t worry; All tags will be explained later.


<!DOCTYPE html>
<html lang="en">
<head>
<title>Programming Sphere</title>
</head>
<body>
<h3>How to create a webpage using HTML and CSS</h3>
</body>
</html>

Now, open this file with your favorite browser. If everything is OK, you should get the below output.

How to create a webpage using HTML and CSS

In the above example, a HTML file has been written that has 9 lines and 5 tags and this is the minimal code to create a webpage. Now each HTML tag will be explained here so that you can understand so easily.

  1. First line contains a DOCTYPE macro. This macro tells your browser that this is a HTML document. Every HTML file should have this tag at starting line.
  2. Second line contains the <html> tag. This is the root tag and other tags should have under this <html> tag. Every HTML tag has a starting point and an ending point. HTML tag normally starts with less than (<) sign and ends with greater than (>) sign and the tag name will remain within this two sign such as <html>. Except some Exceptions, every HTML tag should end with that tag name which remains within less than(<) sign and forward slash (</) and greater than sign (>) sign such as </html>. In the above file, the <html> tag starts from 2nd line and ends at 9th line.
  3. The <head> tag and the <body> tag are the two immediate child tag of the <html> tag and all other tags have to have inside of these two tags.
  4. The <head> tag contains all information and link pages of a webpage but nothing is visible to browser screen except the <title> tag. The text inside the <title> tag will appear in browser tab.
  5. The <body> tag is the only visible area of a browser screen. Everything inside the <body> tag will appear on the browser screen. Thousands of elements are present in HTML5 that can be used in the <body> tag. You will learn these tags in the later articles or you can learn from Google.
  6. The <h3> tag is the only tag which will print text in the browser. This tag is known as heading tag. There are 6 heading tags which are denoted from h1 to h6. The heading tags are used to print heading text of a webpage.

The minimal HTML elements those are necessary to make a webpage have been explained in this section. Now, styling HTML elements using CSS will be shown in the below section.

Styling HTML Tag Using CSS

CSS is used to style the HTML tags. CSS covers tag’s fonts, colors, background-color, width, height and other things those are necessary to design an HTML element. There are three ways to insert CSS rules to any HTML file. These are…

  1. External Style Sheet
  2. Embedded Style and
  3. Inline Style

Adding External Style Sheet to an HTML File

Create a new file named as style.css in the same location where you have created index.html file. Every CSS file should have (.css) extension otherwise CSS rules will not be applied. Now open this file with WordPad and write the below rules for styling the <h2> tag.


h2{
  font-size: 20px;
  color: green;
}

Here, h2 is selector and rules are written inside the curly braces. Two rules are applied to change the font size and the color of the <h2> tag. Now open index.html file and add the <link> tag inside the <head> tag like below…


<!DOCTYPE html>
<html lang="en">
<head>
<title>Programming Sphere</title>
<strong><link rel="stylesheet" href="style.css" /></strong>
</head>
<body>
<h3> How to a create webpage using HTML and CSS </h3>
</body>
</html>

Now open index.html file with your browser. You will find the below output which is different from the above output.

How to create a webpage using HTML and CSS

Adding CSS Rule with Embedded Style

Embedded CSS rule can be written anywhere in your html file but it is better to write within the <head> tag with the <style> tag. See below example where embedded CSS rules are being applied for styling the <h2> tag.


<!DOCTYPE html>
<html lang="en">
<head>
<title>Programming Sphere</title>
<style>
 h2{
   font-size: 20px;
   color: green;
 }
</style>
</head>
<body>
<h3> How to create a webpage using HTML and CSS </h3>
</body>
</html>

In this case, you will get the same output like the previous one.

Adding CSS Rule with Inline Style

CSS rule can also be written inside a HTML tag which is known as inline styling. See below example where inline styling is being written for the <h2> tag.


<!DOCTYPE html>
<html lang="en">
<head>
<title>Programming Sphere</title>
</head>
<body>
<h3 style="font-size: 20px; color: green">
  How to create a webpage using HTML and CSS
</h3>
</body>
</html>

In this case, you will also get the same output like previous example. It is always better to avoid inline styling because styling will be hard coded.

The basic idea for creating a website using HTML and CSS has been explained in this article. If you face any problem to create your first webpage, feel free to contact with me from Contact us page. I’ll try my best to stay with you. Top 30 important HTML elements will be explained in the next tutorial. Spend some time to study the article and learn more important HTML tags.

9 Comments
  1. Xem thêm
  2. Kara
  3. Ulrike
  4. Catherine
  5. Rogelio
  6. guest blog
  7. Samual
  8. Maxwell
  9. Eunice

Leave a Reply to guest blog Cancel reply

Your email address will not be published. Required fields are marked *