Tutorial Template: The HTML

12Dec/090

Tutorial Template: The HTML

Sometimes trying to learn something new can be daunting. Trust me, I know. It took me a few weeks to learn the most basic things of HTML/CSS because I had no idea where to start. But hopefully if you're in that situation, I can help. Here's a 100% explained HTML template. And I mean explained, I described what everything does, just for you.

But this is just the first part. When you're ready to learn the styling, fun side, read the next tutorial after this. For now, click continue reading so we can get started.

This is the HTML coding of this template. To view the template's code directly, go to this link and hit Ctrl+U in Firefox while using Windows. Otherwise, in a Mac, hover over View at the top of the the browser window and select Page Source.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- Don't change anything from here and up. It just makes sure that this file is in the right coding and such. -->
 
		<title>Template - This Text is What's Displayed at the Top of Your Browser!</title> <!-- This is what's displayed at the top of your browser and tag. It is quite literally, the page title. -->
 
		<link rel="stylesheet" href="style.css" type="text/css" media="screen" /> <!-- This links your stylesheet. Good designers link their to keep this file clean, plus with a linked stylesheet several pages can have the same design. So if you want to change something for every page, you need only edit 1 file. -->
		<link rel="shortcut icon" href="./img/favicon.png" /> <!-- This links your favicon, that little icon at the top of the tag is what's linked to here. -->
	</head>
	<!-- Above is the head of the page, below is everything else, or the body. -->
	<body>
 
		<div id="container">
		<!-- This holds everything in the page. It's more useful than the body, more explanation in CSS. -->
 
			<div id="header">
			<!-- The top chunk of your page, commonly called a header. This oftens contains the navigation, logo, and thing like that. For now 	we'll just have text. -->
 
				<p><h1>Header with some text!</h1><br />
				Maybe even a tagline...</p>
				<!-- p for paragraph. h1 for headline size #1. br for break line, it's like hitting the return key, but you need this code for a new line to start. -->
 
				<div id="nav">
				<!-- This holds the navigation. -->
 
					<ul> <!-- Unordered List means no bullet points. This holds the list. -->
						<li><a href="#">Home</a></li> <!-- This is one of the list items, li. a href is a link. In quotes "" is the address, like "http://fynmark.org". Include the http://. -->
						<li><a href="#">Link 1</a></li>
						<li><a href="#">Link 2</a></li>
						<li><a href="#">Link 3</a></li> <!-- Hash tags/number symbols, #, are used to signal that the link's location is undecided. This is often used in templates, and this is a template. -->
						<li><a href="#">Link 4</a></li>
					</ul> <!-- Ends the list. -->
 
				</div> <!-- Ends the nav. -->
 
			</div> <!-- Ends the header. -->
 
			<div id="content"> <!-- This is where the normal stuff starts. Like you're paragraphs, your posts if you want something like that, your anything. Your content. -->
 
				<p> <!-- Put your text in <p> paragraph tags. keeps it clean and easier to manage. You'll understand when you get to styling, or CSS. -->
 
				<h1>Headline! Important!</h1> <!-- Largest headline type. -->
				<h2>Also Important</h2> <!-- Second largest headline type. -->
				<h3>Slightly Less Important</h3> <!-- Third largest headline type. -->
				<h4>Better than normal text!</h4> <!-- Fourth largest headline type. -->
				<h5>I'm kind of better...</h5> <!-- Fifth largest headline type. -->
				<br />
				<!-- Some filler text to show off the styling, when we get to that. -->
				You've got your standard text right here. <a href="#">You've got your standard link right here, too.</a><br /> <!-- All tags close with "</[tag symbol]>". Ex: Paragraphs are <p>Content</p>. -->
				<br />
				<img src="./img/image.gif"> <!-- "./" means the file's location is in the same folder as the current file. It's under the folder "img", which is under our current folder. The file is then at the link "./img/image.gif". -->
 
				</p> <!-- Closing our paragraph section. -->
 
			</div> <!-- Closing the Content section. -->
 
		</div> <!-- Closing the container, that held our header and content sections. -->
 
	</body> <!-- Closing our body. -->
 
</html> <!-- Closing the file. -->

About Tim

I'm just a regular guy who enjoys writing, web design, and designing anything. Thanks for reading my blog.

Tagged as: CSS, design, HTML, template, tutorial Leave a comment

Comments (0) Trackbacks (0) ( subscribe to comments on this post )

No comments yet.

No trackbacks yet.

« Tutorial Template: The CSS Yeah, About That… »

Twitter Feed

Monetize Your Site

Other

If you can't view the above tag cloud, you need Flash Player. Get it on Adobe.com

Fynmark.org beyond everything