GDT 150 Design for the Internet

Handout: Sample HTML Markup

<!--This is a comment. It will not be read by the browser.-->

<!DOCTYPE html public "-//W3C//DTD HTML 4.0 Transitional//EN">   
		<!--This declares the document type-->

<html>   
		<!--This tells the browser that this is an HTML document-->

<head>   
		<!--The head of the document contains elements that are not 
		directly displayed by the browser, but that often impact the way the 
		browser displays the content.-->

<title>This is the title. It is displayed at the very top of the browser window.
</title>
		<!--This is a closing tag. It tells the browser that the title is done.-->

</head>   
		<!--This tag closes the head of the document-->




<body bgcolor="white">   
		<!--This opens the body of the page.  The body contains everything that will 
		be displayed in the browser window. bgcolor="white" sets the 
		background color of the page.-->
		

This will be displayed in the default font.<br>   <!--A line break-->


<h1>	<!--This is a heading.  H1 through H6, H1 is the largest-->   
This is an H1 tag.  Notice the line breaks above and below this line of text.</h1>


<font face="verdana, arial, helvetica, sans serif">   
		<!--Sets the font.  A list allows additional options for users who 
		don't have fonts installed-->   
This will display as verdana, or arial, or helvetica, or the default sans serif 
font if none of the previous are installed.
</font>   
		<!--Ends the font attributes-->
		

<br>   <!--Break-->


<font size="4">   <!--Sets the font size. Font size can be a 
number from 1 to 7, 7 is the largest-->   
This is size four.</font>


		<!--No <BR> here, even though there are line breaks in the code.  
		The following text will be on the same line as the previous text-->
		

<font color="red">   <!--Sets the font color-->   
This text is red, default size.</font>



<p>		
<!--A paragraph tag. The closing tag </p> is optional, but highly recommended.-->   

This is paragraph text.  A line break is inserted between each paragraph. This 
is paragraph text.  A line break is inserted between each paragraph. This is 
paragraph text.  A line break is inserted between each paragraph. This is 
paragraph text.  A line break is inserted between each paragraph. This 
is paragraph text.  A line break is inserted between each paragraph. This is 
paragraph text.  A line break is inserted between each paragraph. This is 
paragraph text.  A line break is inserted between each paragraph. </p>
<p>This is paragraph text.  A line break is inserted between each paragraph. This 
is paragraph text.  A line break is inserted between each paragraph. This is 
paragraph text.  A line break is inserted between each paragraph. This is 
paragraph text.  A line break is inserted between each paragraph. This 
is paragraph text.  A line break is inserted between each paragraph. This is 
paragraph text.  A line break is inserted between each paragraph. This is 
paragraph text.  A line break is inserted between each paragraph. </p>



<a href="fonts.html">This is a link.</a>   
		<!--A link tag.  The HREF="" tells the links were to go 
		when it is clicked-->

<br><br> <!--two line breaks-->



<img src="../graphics/design.gif" width="308" height="79" alt="descriptive text" border="0">   
		<!--An Image tag.  SRC="" tells the location of the file, 
		width and height tell the size, ALT provides alternate text, border 
		puts a border around the graphic-->


		<!--Notice that tags that enclose and format text (or other elements) 
		require a closing tag. Tags that insert a single item do not require 
		a closing tag-->



</body>   <!--Closes the body-->

</html>   <!--Closes HTML-->