Hello guys,
today i am going to tell you how to create a website.
creating a website easy but it is time taking, you should know basic of HTML and CSS
if you don't know anything about it then may be possible after reading full article you can feel that you are on "MARS" ...well it is a joke
leaving it coming back to main topic
firstly download a app Sublime text 2 or 3 it is very good app specially for creating website
firstly create folder any where on desktop or any drive
example i created a folder name mywebsite and under this folder i created few subfolder name CSS, img, about, contact etc etc etc more according to your content.
now open you app and paste this which is given below
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width">
<style>
body{ background: white;}
(you can change background if you want)
</style>
<title> You site name |Welcome </title>
<meta name="description" content=" Discribe your site if not then delete this line"></meta>
</head>
<header>
<link rel="stylesheet" href="CSS/style.css" />
<div class="container">
<div id="branding">
<h1><span class="highlight">exam</span>ple.com</h1>
(taking example.com your exam word highlight with different color which you want)
</div>
<nav>
<ul>
<li class="current"><a href="index.html">Home</a>
</li>
<li><a href="about/aboutme.html">About Us</a></li>
<li><a href="contact/contact.html">Contact</a>
</li>
</ul>
</nav></div>
</header>
<section id="showcase">
<div class="container">
<h1>Welcome to my site or write what ever you want</h1>
<p> this is optional write what ever you like for your site</p>
</div>
</section>
( post what you want )..........................................
.........................................
....................................................
.................................................................
.........................................
..................................... <footer>
<p> Created by <strong>your name</strong><br>your site name, Copyright © 2017</br></p>
</footer>
</body>
</html>
and done
after pasting this save it by the name index.html and paste this in mywebsite folder which you create
now create a new file and paste this which is given below
body{
font-family: Arial, Helvetica, sans-serif;
(Change font if you want )
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #f4f4f4; (you can change color background also just replace #f4f4f4 with your favorite color code)
}
a,{
color: BLUE; text-decoration: none;
}
h2,li,p{
margin-left: 100px;
}
h2{
color: #FF4500;
}
a{
color: #35424a;
}
article{
margin-left: 40px;
}
/*global**/
.container{
width: 80%;
margin:auto;
overflow: hidden;
}
ul{
margin: 0;
padding: 0;
}
/*header**/
header{
background: #35424a;
color: #ffffff;
padding-top: 30px;
min-height: 70px;
border-bottom: #e8491d 3px solid;
}
header a{
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li{
float:left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding{
float: left;
}
header #branding h1{
margin: 0;
}
header nav{
float: right;
margin: top:10px;
}
header .highlight, header .current a{
color: #e8491d;
font-weight: bold;
}
header a:hover{
color: #cccccc;
font-weight: bold;
}
/*showcase**/
#showcase{
min-height: 400px;
background: url('../img/yoursite logo or and image') no-repeat 0 -400px; (but save your image in img folder)
text-align: center;
color: #e8491d;
}
#showcase h1{
margin-top: 100px;
font-size: 55px;
margin-bottom: 10px;
}
#showcase p{
font-size: 20px;
}
footer{
padding: 20px;
margin-top: 20px;
color: #ffffff;
background-color: #e8491d;
text-align: center;
}
and save this file in CSS folder with the name style.css
third create new files and name it aboutme.html,contact.html
and copy paste this
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width">
<style>
body{ background: white;}
</style>
<title> yoursite | About Us </title>
</head>
<body>
<header>
<link rel="stylesheet" href="../CSS/style.css" />
<div class="container">
<div id="branding">
<h1><span class="highlight">exam</span>le.com</h1>
</div>
<nav>
<ul>
<li><a href="../index.html">Home</a></li>
<li class="current"><a href="about.html">About Us</a></li>
<li><a href="../contact/contact.html">Contact</a>
</li>
</ul>
</nav></div>
</header>
</section>
<section id="main">
<div class="container">
<article id="main-col">
<h1 class="page-title">About Us</h1>
paste about you and your website
''''''''''''''''''''''''''
;;;;;;;;;;;;;;;;;
''''''''''''''''''''
;;;;;;;;;;;;;;;
'''''''''''''''''''
;;;;;;;;;;;;;;;;
</article>
</div>
</section>
<footer>
<p> Created by <strong>yourname</strong><br>site name, Copyright © 2017</br></p>
</footer>
</body>
<html>
and save this as aboutme.html
and now its time to create contact.html file
so create a new file and paste this
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width">
<style>
body{ background: white;}
</style>
<title> yoursite | Contact </title>
</head>
<body>
<header>
<link rel="stylesheet" href="../CSS/style.css" />
<div class="container">
<div id="branding">
<h1><span class="highlight">exam</span>le.com</h1>
</div>
<nav>
<ul>
<li><a href="../index.html">Home</a></li>
<li class="current"><a href="about.html">About Us</a></li>
<li><a href="../contact/contact.html">Contact</a>
</li>
</ul>
</nav></div>
</header>
</section>
<section id="main">
<div class="container">
<article id="main-col">
<h1 class="page-title">Contact Us</h1>
paste your contact details and done
''''''''''''''''''''''''''
;;;;;;;;;;;;;;;;;
''''''''''''''''''''
;;;;;;;;;;;;;;;
'''''''''''''''''''
;;;;;;;;;;;;;;;;
</article>
</div>
</section>
<footer>
<p> Created by
<strong>yourname</strong><br>site name, Copyright
© 2017</br></p>
</footer>
</body>
<html>
after saving this close the app and open your folder and open your index.html and you will see a good basic website and most important thing copy and pasting is easy but do not forget to remove my comments before saving the files
if you face any problem then reply this post
