We'll create a complete web page from scratch using HTML and our recently acquired knowledge about various elements used in HTML . Create a folder on your desktop with the name Movies Freak and add a new notepad file to it .Rename this file to index.html . index.html signifies the home page of your website .
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Movies Freak</title>
</head>
<body>
</body>
</html>
Now divide your page into different sections . Define each section with a <div> .Assign an id to
each division to uniquely identify it .
e.g.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Movies Freak</title>
</head>
<body>
<div id="header">
</div>
<div id="welcome">
</div>
<div id="reviews">
</div>
<div id="footer">
</div>
</body>
</html>
Adding content to the footer
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Movies Freak</title>
</head>
<body>
<div id="header">
</div>
<div id="welcome">
</div>
<div id="reviews">
</div>
<div id="footer">
<p>Copyright 2010 Movies Freak , All rights reserved.</p>
</div>
</body>
</html>
Adding links to the header
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Movies Freak</title>
</head>
<body>
<div id="header">
<h2><a href="index.html">Movies Freak</a> </h2>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="recently-reviewed.html">Latest</a></li>
<li><a href="highly-recommended.html">Greatest</a></li>
<li><a href="about.html">About Us</a></li>
</ul>
</div>
<div id="welcome">
</div>
<div id="reviews">
</div>
<div id="footer">
<p>Copyright 2010 Movies Freak , All rights reserved.</p>
</div>
</body>
</html>
Adding text to our page .
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Movies Freak</title>
</head>
<body>
<div id="header">
<h2><a href="index.html">Movies Freak</a> </h2>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="recently-reviewed.html">Latest</a></li>
<li><a href="highly-recommended.html">Greatest</a></li>
<li><a href="about.html">About Us</a></li>
</ul>
</div>
<div id="welcome">
<h1>Welcome to Movies Freak!</h1>
<p>We are a group of movies freak who watch some insane number of movies round the clock .
We'll review each and every movie for you so that you can find out which one is for you to watch .</p>
</div>
<div id="reviews">
</div>
<div id="footer">
<p>Copyright 2010 Movies Freak , All rights reserved.</p>
</div>
</body>
</html>
Adding This Week Reviews
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Movies Freak</title>
</head>
<body>
<div id="header">
<h2><a href="index.html">Movies Freak</a> </h2>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="recently-reviewed.html">Latest</a></li>
<li><a href="highly-recommended.html">Greatest</a></li>
<li><a href="about.html">About Us</a></li>
</ul>
</div>
<div id="welcome">
<h1>Welcome to Movies Freak!</h1>
<p>We are a group of movies freak who watch some insane number of movies round the clock .
We'll review each and every movie for you so that you can find out which one is for you to watch .</p>
</div>
<div id="reviews">
<h2>Weekly Specials</h2>
<ul>
<li>Memento</li>
<li>The Dark Knight</li>
<li>Avatar</li>
<li>The Last Samurai</li>
<li>Blade Runner</li>
</ul>
</div>
<div id="footer">
<p>Copyright 2010 Movies Freak , All rights reserved.</p>
</div>
</body>
</html>
You can check if your markup is correct by inputting your markup on http://validator.w3.org .
HTML Help & Templates - Learn HTML tags including form, frames, and tables with help from this free reference.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Movies Freak</title>
</head>
<body>
</body>
</html>
Now divide your page into different sections . Define each section with a <div> .Assign an id to
each division to uniquely identify it .
e.g.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Movies Freak</title>
</head>
<body>
<div id="header">
</div>
<div id="welcome">
</div>
<div id="reviews">
</div>
<div id="footer">
</div>
</body>
</html>
Adding content to the footer
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Movies Freak</title>
</head>
<body>
<div id="header">
</div>
<div id="welcome">
</div>
<div id="reviews">
</div>
<div id="footer">
<p>Copyright 2010 Movies Freak , All rights reserved.</p>
</div>
</body>
</html>
Adding links to the header
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Movies Freak</title>
</head>
<body>
<div id="header">
<h2><a href="index.html">Movies Freak</a> </h2>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="recently-reviewed.html">Latest</a></li>
<li><a href="highly-recommended.html">Greatest</a></li>
<li><a href="about.html">About Us</a></li>
</ul>
</div>
<div id="welcome">
</div>
<div id="reviews">
</div>
<div id="footer">
<p>Copyright 2010 Movies Freak , All rights reserved.</p>
</div>
</body>
</html>
Adding text to our page .
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Movies Freak</title>
</head>
<body>
<div id="header">
<h2><a href="index.html">Movies Freak</a> </h2>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="recently-reviewed.html">Latest</a></li>
<li><a href="highly-recommended.html">Greatest</a></li>
<li><a href="about.html">About Us</a></li>
</ul>
</div>
<div id="welcome">
<h1>Welcome to Movies Freak!</h1>
<p>We are a group of movies freak who watch some insane number of movies round the clock .
We'll review each and every movie for you so that you can find out which one is for you to watch .</p>
</div>
<div id="reviews">
</div>
<div id="footer">
<p>Copyright 2010 Movies Freak , All rights reserved.</p>
</div>
</body>
</html>
Adding This Week Reviews
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Movies Freak</title>
</head>
<body>
<div id="header">
<h2><a href="index.html">Movies Freak</a> </h2>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="recently-reviewed.html">Latest</a></li>
<li><a href="highly-recommended.html">Greatest</a></li>
<li><a href="about.html">About Us</a></li>
</ul>
</div>
<div id="welcome">
<h1>Welcome to Movies Freak!</h1>
<p>We are a group of movies freak who watch some insane number of movies round the clock .
We'll review each and every movie for you so that you can find out which one is for you to watch .</p>
</div>
<div id="reviews">
<h2>Weekly Specials</h2>
<ul>
<li>Memento</li>
<li>The Dark Knight</li>
<li>Avatar</li>
<li>The Last Samurai</li>
<li>Blade Runner</li>
</ul>
</div>
<div id="footer">
<p>Copyright 2010 Movies Freak , All rights reserved.</p>
</div>
</body>
</html>
You can check if your markup is correct by inputting your markup on http://validator.w3.org .
HTML Help & Templates - Learn HTML tags including form, frames, and tables with help from this free reference.
No comments:
Post a Comment