HTML
Hyper Text Markup Language
HTML is a language which provides the web browser with special instructions. HTML is structured in tags. Each HTML tag has a specific purpose.
Below is the full HTML coding it takes to turn our concept design into HTML. I will walk you through most of the tags here and explain how everything works.
<![CDATA[
<!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" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href = "css/main.css" rel = "stylesheet" type="text/css" />
<title>ParadiseVodka</title>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<p id="logo"><a href="#">ParadiseVodka</a></p>
<div id="top-nav" class="corners">
<ul>
<li id="active">Home</li>
<li><a href="#">Drinks</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About Paradise</a></li>
<li><a href="#">Press</a></li>
</ul>
</div>
<div class="clear"></div>
<div id="left-column">
<h1>Paradise in a bottle</h1>
<p id="introducing">Introducing ParadiseVodka, 100 proof</p>
<div id="bottle">
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="626" height="246">
<param name="movie" value="water.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="water.swf" width="626" height="246">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p>
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" />
</a>
</p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</div>
<div id="right-column">
<h2>Win a free vacation</h2>
<p id="destination"><strong>Destination</strong>: Bahamas, 7 nights for 2</p>
<div id="form" class="corners">
<form id="entry" method="post" action="">
<fieldset>
<legend>Vacation Form</legend>
<label for="name" class="label">First Name</label>
<input type="text" id="name" name="name" class="txtfld" value="">
<label for="email" class="label">Email Address</label>
<input type="text" id="email" name="email" class="txtfld">
<p id="never-share">* We will never share your information</p>
<input type="image" name="submit_order" src="images/submit.gif" id="submit-button" />
</fieldset>
</form>
</div>
</div>
<div class="clear"></div>
<div id="impurities" class="corners">
<h3>Impurities no more.</h3>
<p class="sub-desc">ParadiseVodka is the purest of all vodkas.</p>
<a href="#">Learn More</a>
<div id="dirt"></div>
</div>
<div id="drink-mixer" class="corners">
<h3>Drink Mixer</h3>
<p class="sub-desc">Over 300 ParadiseVodka mixed drinks.</p>
<a href="#">Find Drinks</a>
<div id="mixer"></div>
</div>
<div id="social">
<h4>Let's get social..</h4>
<p id="facebook"><a href="#">Facebook</a></p>
<p id="twitter"><a href="#">Twitter</a></p>
<p id="rss"><a href="#">RSS</a></p>
</div>
<div class="clear"></div>
<div id="bottom-nav" class="corners">
<ul>
<li id="active">Home</li>
<li><a href="#">Drinks</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About Paradise</a></li>
<li><a href="#">Press</a></li>
<li id="terms"><a href="#">Terms</a></li>
<li id="privacy"><a href="#">Privacy Policy</a></li>
</ul>
</div>
<p id="copyright">Copyright 2010 @ ParadiseVodka.com</p>
</div>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>
</body>
</html>
]]>
- The DOCTYPE is the very first line that belongs on every HTML document. It lets the browser know about what version of markup language the page is written in. You don't have to give this much attention or thought, just make sure you include it!
- The head tag contains several other important tags within it.
- There are 3 meta tags listed in our document. The keywords and description tag let the search engines know which keywords the page is associated with, and the description of the page. It's always a good idea to include these tags and specify the information in content="".
- Our link href tag simply links to the CSS file we will be using in the next step.
- The text between the title tag is what will show up as the title text in the browser when someone visits the page.
- The script src code is simply for the flash that we will integrate later on. Pay no attention to it!
The following coding proceeding the end of the head tag deal with the HTML that actually structures the layout.
- The Body tag is the first html tag, and all HTML coding goes between the opening and closing of this tag.
- The next tag is a DIV tag. A div tag is used to structure a layout. It is referenced by CSS and given special properties like width, height, color, margin, padding, etc.. You will see a number of DIV tags within the HTML.
- There are several other tags used throughout the HTML. P, UL, A, H1/H2/H3/H4, and a few others. The best way to acquaint yourself with unfamiliar HTML tags is to read this tutorial. It will let you know exactly what each tag does.
- A very important thing to note is the "id" parameter within the HTML tags. You can reference HTML tags 3 ways from within CSS. By an ID, a class, and the html tag itself. An ID is a unique identifier of an html tag, and is never repeated. Whenever you have a unique element in your design, you want to reference it with an ID. A class is exactly what the name states, a group of html tags that are to be styled exactly the same.
Within this coding you will find other numerous html tags, and if you're new to this, it will come off as being very confusing! But do not worry, most of it will make sense in the next step (CSS). So instead of attempting to explain every HTML tag, it will become rather self explanatory when you take a look at the CSS and how it interacts with the HTML.
<- Part 3 - Flash
Part 5 - CSS ->