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 :
- Create a new folder and name it whatever you want.
- In that folder ,create two more folders and name it as CSS and images respectively.
- In the images folder paste the images which you are going to use in the html document.
- Now open Notepad++ and create a file with name index.html
- So know after doing all these steps your folder will contain the following three contents:
- The image folder contains texture.jpg image as shown below.
- 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 & 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>
- So after writting the code you will have the following view of your window
- 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 :
- 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; }
- 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; }
- After writing the code in reset.css file save it , your window will have following look :
- Now open index.html file in a browser ,it will display the following window.
- Thus we have created a small website as a project in html and css.
Working with HTML, CSS,can be challenging but this is so helpful