Web Programming TutorialsDeveloping a website using Html and Css

Developing a website using Html and Css

In this tutorial we will understand the role of html and css in developing a website and create a website as a project using html and css.

  • To begin with the project follow the steps below :

  1. Create a new folder and name it whatever you want.
  2. In that folder ,create two more folders and name it as CSS and images respectively.
  3. In the images folder paste the images which you are going to use in the html document.
  4. Now open Notepad++ and create a file with name index.html
  5. So know after doing all these steps your folder will contain the following three contents:
  6. v1

  7. The image folder contains texture.jpg image as shown below.
  8. v2

  9. Now open the created index.html file in Notepad++ and write the following code in it:

    <!DOCTYPE html>
    <html>
    <head>
    	<title>Web Designer Resume</title>
    	<link rel="stylesheet" type="text/css" href="css/reset.css" />
    	<link rel="stylesheet" type="text/css" href="css/style.css" />
    </head>
    <body>
    	<div id="container">
    		<div id="header">
    			<div id="name">
    			  <h1>Brad Traversy</h1>
    			  <h3>Web Designer &amp; Developer</h3>
    			</div><!--name-->
    			<div id="contact">
    			 <strong>Email: </strong>[email protected]/blog<br />
    			 <strong>Phone: </strong> (978) 555-5555
    			</div><!--contact-->
    		</div><!--header-->
    		
    		<div class="clr"></div>
    		
    		<div id="profile" class="row">
    		<h2 class="left">Profile</h2>
    		<p>Progressively evolve cross-platform ideas before 
               impactful informidaries.Lorem ipsum dolor sit amet,
               consectetur adipiscing elit.Quisque ut semper lacus.
               Aliquam malesuada velit non nisi hendrerit,
               non faucibus odio ultrices. 
    		</div><!--profile-->
    		
    		<div class="clr"></div>
    		
    		<div id="skills" class="row">
    			<h2 class="left">Skills</h2>
    			<ul>
    			<li>
    			<h2>Web Design</h2>
    			<p>I have an eye for design. 
                   I can make almost anything come together 
                   in terms of color.
                </p>
    			</li>
    			</ul>
    		</div><!--skills-->
    		
    	</div><!--container-->
    
    </body>
    </html>
    
  10. So after writting the code you will have the following view of your window
  11. v3

  12. In CSS folder create two text documents and name them as style.css and reset.css respectively and so after creating them your window will look like as shown below :
  13. v4

  14. Now open your style.css file and write the following code in it:

    body{
    	background: url(../images/texture.jpg) repeat;
    	font-family:Gerogia;
    	font-size:15px;
    }
    
    strong{font-weight:bold;}
    .clr{clear:both;}
    
    h1{
    	font-size: 48px;
    	text-transform: uppercase;
    	letter-spacing: 3px;
    }
    h3{
    	text-transform: uppercase;
    	letter-spacing: 2px;
    	font-style:italic;
    	font-size:21px;
    }
    
    #container{
    	width:930px;
    	margin:50px auto 10px auto;
    	padding:20px 30px;
    	border-top:#666 solid 6px;
    	border-bottom:#666 solid 3px;
    	background:#f5f5f5;
    }
    
    #header{
    	padding:10px 0;
    	border-bottom:#ccc dotted 1px;
    	overflow:hidden;
    }
    
    #header #name{
    	float:left;
    }
    
    #header #contact{
    	float:right;
    }
    
    .row{
    	padding:30px 0;
    	font-size:20px;
    	overflow:hidden;
    	border-bottom:#ccc dotted 1px;
    }
    
    h2.left{
    	float:left;
    	width:140px;
    	font-style:italic;
    }
    
    #profile p{
    	float:right;
    	width:700px
    }
    
    #skills ul{
    	float:right;
    	width:700px;
    }
    
    #skills ul li{
    	float:left;
    	width:180px;
    	padding:0 40px 0 0;
    	font-size:16px;
    }
    
    #technical table{
    	float:right;
    	width:700px
    }
    
    #technical table td{
    	width:100px;
    	border-bottom:#ccc solid 1px;
    	padding:5px;
    }
    
    #experience div{
    	float:right;
    	width:700px;
    	border-bottom:#ccc solid 1px;
    	padding:10px 0;
    }
    
    #experience div h3,#education{
    	font-style:normal;
    	font-size:18px;
    	line-height:1.6em;
    }
    
    #experience div h4{
    	font-style:normal;
    	font-size:16px;
    	line-height:1.6em;
    }
    
    #experience div p{
    	font-size:15px;
    	line-height:1.6em;
    }
    
    #education div{
    	float:right;
    	width:700px;
    	padding:10px 0;
    }
    
    #education div h3{
    	font-style:normal;
    	font-size:18px;
    	line-height:1.6em;
    }
    
    #footer{
    	text-align:center;
    	margin-bottom:10px;
    }
    
  15. Now open your reset.css file and write the following code in it:

    /* Reset Styles */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font-size: 14px;
    	font: inherit;
    	vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
    	display: block;
    }
    body {
    	line-height: 1.3;
    }
    ol, ul {
    	list-style: none;
    }
    blockquote, q {
    	quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    	content: '';
    	content: none;
    }
    table tr td {
    	border-collapse:collapse;
    
    }
    
  16. After writing the code in reset.css file save it , your window will have following look :
  17. v5
    v6

  18. Now open index.html file in a browser ,it will display the following window.
  19. v7

  20. Thus we have created a small website as a project in html and css.

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,106FollowersFollow
106,000SubscribersSubscribe

More article

- Advertisement -