You are here:   GIS Web Map Tutorial > HTML Basics
  |  Login

HTML Basics

   Minimize
In your GIS Class I'm sure that you have been working with fancy tools such ArcGIS and ENVI.  There are many tools that make our work easier however for this basic tutorial we will work with the simple interface of Notepad.  You will find that making web maps does not need any special software or tools.  
 
Open Notepad
Copy and paste the following code
 
<html>
         <head>
		<style type="text/css">
  			html { height: 100% }
 			 body { height: 100%; margin: 0px; padding: 0px }
  			#map_canvas { height: 100% }
		</style>
	</head>
        <body onload="initialize()" >
                  <div id="map_canvas"></div>
        </body>
</html>
 
This code has HTML tags.  All tags should have an opening and closing tag with the exception of self closing tags which would end with  />  We shouldn't need any of these but here are a few of them you may run into in the future:
<area />
<base />
<basefont />
<br />
<hr />
<input />
<img />
<link />
<meta />

Notice the structure of the code.  Everything is inside of the html tag then inside of that are two main sections, a head and a body. The head is the section where we will do things such as store css declarations and write javascript code.  The body is where we will put the structure tags of the page.  In the body tag you will find a div tag which is just a division of the page.  We have defined it as 100% of the page and it should take up your entire page when we are finished.  This div has an id of map_canvas.  We could give it any id but we need to know what this id is because this is the element that we will turn into the map.

Next you will connect to the OpenLayers API >>