How to create a simple Web page using HTML and CSS.
Hi Everyone!!!
Hope you’re all doing well!!! In here I’m going to share the basic idea of creating a CSS website layout using HTML and CSS. So I’m going to explain in a simple manner. If you’re a beginner in HTML and CSS, don’t be afraid, it’ll be super easy after referring this.
Before moving to creating our website we want to have an idea about HTML and CSS. So what is HTML? HTML (Hypertext Markup Language) defines the structure and contents of a web page where things go, how they are laid out, and what’s on the page. And also CSS (Cascading Style Sheets) defines the styling or presentation of a web page and the elements on it. In here you can’t have one without other because these two are work with together to make up the final web page with designs and also content. So I want to clearly mention that web page is a single HTML document and it is a part of your website. So web site is the complete one that your whole site with all its individual web pages.
Now here onwards I’ am going share my knowledge with you all. First of all we want to know about web server mean hosting. There are many web hosting companies sell a simple hosting service on their machines. So just google for web hosting and out of them pick something that isn’t too expenses.
01. Basics Of HTML
The main element of HTML structure is HTML tag. There are so many HTML tag you want to know. Note that in here HTML cording <!DOCTYPE html> is actually not a HTML tag. This informs your web browser to what type of files are expected.
In here <html> </html> tag is the container of all the HTML elements and it is the main tag in HTML. All of the other tags in between this html tag. In here <head> </head> tag container metadata. It calls metadata because it has data about data. It is not an essential part in html and also the content of the head tag won’t appear on our web site, it’s for only developing purpose.
After that we want to add <body> </body> tag. All of the content of your document is contained in here inside the body tag. They all are opening and closing tags. It is essential to use these both tags together. I have briefly mentioned here some other tags also.
<h1> </h1> It is the main header on the web page
There are heading styles to h1-h6. In here we can use each one of them when we want to create a headline.
<b>…</b> Use to bold the text
<u>…</u> Use to underline text
<p></p> It is a paragraph of text
<i></i> It italicize the text between the opening and closing tags
Apart from that tags there are more complex tags also. In here I mentioned some of special tags used in our web page. If you want to add list to your web page you can use <ul>/<ol> tag with <li> </li> tags. ul tag for unorder list and ol tag for order list.
Now look how to add a link to another page. You can do it with using <a> </a> tag.
<a href="https://Index.html">This is a link for my homepage</a>Before move forward I highly recommended to you all read this one and get the more idea about HTML tags. It will become useful to you when you creating completed web site.
02. Get clear understand about HTML Document Structure.
Here’s the simplest HTML structure.
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8">
<title>Hello World!!!</title>
</head>
<body>
<h1>Hello World</h1>
<p>My first web page</p>
</body>
</html>Output will be as follow,
03. Basics of CSS.
So what is CSS? CSS stands for Cascading Style Sheets and describes how HTML elements are to be displayed on screen. CSS saves a lot of work. It can control the layout of multiple web pages all at once. External stylesheets are stored in CSS files.
04. Get to know CSS Selectors.
In HTML we use tags and as well as here CSS has selectors. Selectors determine how appearance-wise a given element should behave. It usually use to style an HTML document. A single piece of CSS formatting information, such as text alignment or font size is referred to as a style.
E.g: Alert fonts, backgrounds, colors, sizes
Modify the layout of elements as they appear in a web browser.
Syntax of CSS :-
01. Selector — HTML element at which a style will be applied. e.g: <table>, <h1>
02. Property — A property is a type of attribute of HTML tag.
03. Value — Values are assigned to properties.
For example a class selector in CSS looks like this,
.normal-text {
font-size : 18px;
}Clearly notice that the dot(.) before the name of the class. With the “normal-text” class defined we can assign that class to specific HTML tags that we want to make font size 18px in size.
Now I think you all have good idea about HTML and also CSS. So now we look how to create a CSS website layout in step by step. First select text editor like Visual Studio, Sublime text which is comfortable for you. Then make separate folders to save your HTML and CSS files.
A website is often divided into headers, menus, content and a footer. There are tons of different layouts design to choose from. However in here I’m going to mention most common layout and here onwards you will take a closer look at it in this blog.
To begin we’ll create just a very basic project of layout,
- There’s a full-width headline block
- A navigation menu below the header bar
- The main content section in the middle and other content columns
- And a footer
Step 01 :- How to create Header.
A header is usually located at the top of the website. Sometimes we can create it right below a top navigation bar. In header contains website name with a logo.
.header {
background-color: #557ed6;
text-align: center;
padding: 20px;
}In here we want to link CSS style sheet to an HTML document, using
<link rel=”stylesheet” type=”text/css” href=”Index.css”>
This is the complete HTML code for linking CSS style sheet to an HTML document.
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>CSS Website Layout</title>
<meta charset=”utf-8">
<meta name=”viewport” content=”width=device-width, initial-scale=1"><link rel=”stylesheet” type=”text/css” href=”Index.css”>
</head>
<body>
<div class=”header”>
<h1>Header</h1>
</div>
</body>
</html>Step 02 — How to add Navigation Bar
A navigation bar consists a list of links to help visitors navigating through our website. The horizontal navigation bar is the most common website navigation menu. It lists the major navigation pages side by side and is placed in the website header. Many websites feature the some sections, like “Home”, “Products”, “About Us”, “Contact Us” because visitors expect to see them.
In here I’m going to do makes a class of <div> called “nav” inside the <body> tag. The <div> tag is normally use to define a section of our HTML document.
<nav>
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>In CSS,
/* The navigation bar container */
nav {
margin-top: 20px;
background: #000;
text-align: center;
background: linear gradient ( #334d4d, #444, #334d4d)
border-radius: 5px;
}/* Navigation bar links */
. nav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}nav ul {
list-style: none;
}nav ul li {
display: inline;
}nav ul li a{
color: white;
text-transform: uppercase;
margin: 10px 40px 10px 40px;
display: inline-block;
}a {
text-decoration: none;
font-size: 18px;
}nav ul li a:hover {
color: red;
}
Step 03 — How to create Content columns
There are three main types we often used in our layout. We can use 1 column and it often used for mobile browsers and 2 column often used for tablets and laptops and also 3 column only used for desktops. In here I’m going to create 3 column layout.
<div class=”row”><div class=”column side”>
<h2>Side</h2>
<p>Text</p>
</div><div class=”column middle”>
<h2>Main Column</h2>
<p>Text</p>
</div><div class=”column side”>
<h2>Side</h2>
<p>Text></p>
</div></div>
In CSS ,
/* Create three equal columns */
.column {
float: left;
width: 33.33%;
background-color: rgb(136, 208, 241);
}
/* Clear floats after the columns */
.row: after {
content: “”;
display: table;
clear: both;
}
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
In here I have to add this @media screen and (max-width: 600px) code part to make the three columns stack on the top of each other instead of next to each other on smaller screens. The @media rule introduced in CSS2, made it possible to define different style rules for different media types.
I want to mentioned here some tips for create column layouts. To create a 2 column layout change the width to 50% and to create a 4 column layout use 25% width etc. Noted that, the modern way of creating columns layout is to use CSS Flexbox. However it is not supported in Internet Explorer 10 and earlier versions also. The Versatile Box Layout Module makes it easier to build a flexible, sensitive layout framework without floating or positioning.
<div class=”flex-container”>
<div>1</div>
<div>2</div>
<div>3</div>
</div>In CSS ,
.flex-container {
display: flex;
background-color: DodgerBlue;
}.flex-container > div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
If you want to mention the main content is the biggest and the other parts are in same size we can use unequal columns. It is common with unequal column widths, so that most of the space is reserved for the main content column. The side content is often used as specify information relevant to the main content or any other information. You can change the widths as you like, but remember that it should add up to 100% in total.
.column {
float: left;
}
/* Left and right other related column */
.column.side {
width: 25%;
background-color: rgb(136, 208, 241);
}
/* Main column */
.column.main {
width: 50%;
}
@media screen and (max-width: 600px) {
.column.side, .column.main {
width: 100%;
}
}Step 04 — How to create Footer
The footer is placed at the bottom of your web page. The <footer> represents a footer for its nearest sectioning content or sectioning root element. A footer typically contains information about the author of the section, copyright data or links to related documents.
.footer {
background-color: #557ed6;
text-align: center;
padding: 10px;
}Finally I did it. You also can try it. I believe that you get clear idea about how to create a simple web page using HTML and CSS. In here I’m explained it in very simple manner. Now you can create your own web page and this is specially for beginners.
Thank you for reading !!!
Hope you enjoy making this simple web page. See you with another article. Till Good Bye!!!
