all we need to start with is :
text editor: Notepad++. did i mention its free?
web-browser: Google Chrome
Ambition
Here is my HTML code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="stylefile.css">
</head>
<body>
<div id="big_wrapper">
<header id="top_banner">
<h1>Welcome to my new WebSite</h1>
</header>
<nav id ="Menu">
<ul>
<li>Home</li>
<li>Tutorials</li>
<li>Contact Us</li>
</ul>
</nav>
<section id ="main_section">
<article>
<header>
<hgroup>
<h1>HTML5 Overview</h1>
<br>
<h2>HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and
XHTML 1.1. HTML5 is a standard for structuring and presenting content on the World Wide Web.</h2>
</hgroup>
<header>
</article>
<footer id ="foot">
<p>Created By Supreet</p>
</footer>
</section>
</div>
</body>
</html>
CSS
styling the boring lame webiste
1) setting margins and padding to 0px to all tags because some elements have default margins and padding. below code will reset to zero
*{
margin : 0px;
padding: 0px;
}
Rest of the css code:
body
{
text-align:center;
}
#big_wrapper
{
Margin:20px auto;
border: 1px solid black;
width:1000px;
text-align:left
}
#top_banner
{
background-color:cyan;
font-family:Tahoma;
padding:20px;
border:1px bold
}
#Menu li
{
display:inline-block;
padding:5px;
font:bold 12px Tahoma;
}
#Menu
{
background-color:grey;
}
h1{
font:bold 20px Tahoma;
}
h2
{
font:bold 14px Tahoma;
}
header,section,footer,aside,hgroup
{
display:block;
}
#foot
{
text-align:center;
padding:20px;
border:1px solid black;
font:bold 12px Tahoma;
}
text editor: Notepad++. did i mention its free?
web-browser: Google Chrome
Ambition
Here is my HTML code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="stylefile.css">
</head>
<body>
<div id="big_wrapper">
<header id="top_banner">
<h1>Welcome to my new WebSite</h1>
</header>
<nav id ="Menu">
<ul>
<li>Home</li>
<li>Tutorials</li>
<li>Contact Us</li>
</ul>
</nav>
<section id ="main_section">
<article>
<header>
<hgroup>
<h1>HTML5 Overview</h1>
<br>
<h2>HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and
XHTML 1.1. HTML5 is a standard for structuring and presenting content on the World Wide Web.</h2>
</hgroup>
<header>
</article>
<footer id ="foot">
<p>Created By Supreet</p>
</footer>
</section>
</div>
</body>
</html>
CSS
styling the boring lame webiste
1) setting margins and padding to 0px to all tags because some elements have default margins and padding. below code will reset to zero
*{
margin : 0px;
padding: 0px;
}
Rest of the css code:
body
{
text-align:center;
}
#big_wrapper
{
Margin:20px auto;
border: 1px solid black;
width:1000px;
text-align:left
}
#top_banner
{
background-color:cyan;
font-family:Tahoma;
padding:20px;
border:1px bold
}
#Menu li
{
display:inline-block;
padding:5px;
font:bold 12px Tahoma;
}
#Menu
{
background-color:grey;
}
h1{
font:bold 20px Tahoma;
}
h2
{
font:bold 14px Tahoma;
}
header,section,footer,aside,hgroup
{
display:block;
}
#foot
{
text-align:center;
padding:20px;
border:1px solid black;
font:bold 12px Tahoma;
}
No comments:
Post a Comment