Debes de agregar en el encabezado de tu página html la referencia a la librería de OpenLayers con la siguiente instrucción:

<script src="http://openlayers.org/api/OpenLayers.js"></script>

Agrega un elemento div dentro de la sección body de tu página html y asignale un id:

<div id="mapa" style="width: 100%; height: 600px"></div> 

Comienza una sección de código de javascript y dentro de él crea un objeto map de OpenLayers asociado a tu elemento div que definiste en el paso 2

var map = new OpenLayers.Map("mapa");

Otra opción con más detalle en la que se detalla el rectángulo del mapa.

var map = new OpenLayers.Map('map',{maxExtent: new
OpenLayers.Bounds(287270.3309, 1065338.4815, 295472.9419, 1071486.7036),
maxResolution: 'auto',
projection:"EPSG:24719",
units: "m"});

Crea Los Layers que vas a agregar a tu visor. En este ejemplo se tienen dos layers, uno es el que MetaCarta ofrece para pruebas de OpenLayer y el segundo hace referencia al servicio de ortofotos del INEGI. Y por supuesto agregalos a tu mapa que creaste.

var ol_wms = new OpenLayers.Layer.WMS( "World",
"http://labs.metacarta.com/wms-c/Basic.py?",
{layers: 'basic', visibility: false});
var wmsinegi = new OpenLayers.Layer.WMS("Ortofotos de INEGI",
"http://antares.inegi.gob.mx/cgi-bin/map4/mapserv_orto",
{layers: "orto20k,orto3m", transparent:"true",format: "image/png"});
map.addLayers([ol_wms, wmsinegi]);

Después de eso solo es necesario darle su “manita de gato” al visor. En el ejemplo se centró el mapa en la Ciudad de México y se agregaron los controles para encender y apagar los layers y el que indica la posición del cursor:

var CdMexLatLon = new OpenLayers.LonLat(-99.147,19.41);
map.setCenter(CdMexLatLon, 13);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());

mas información en :http://www.bostongis.com/TutBook.aspx#54