iMeil - Tutorial HTML Intermedio - Implementación de variables e includes

Selecciona tema:

Tutorial HTML Nivel Intermedio Capítulo 3 - ASP - Implementación de variables e includes

Hasta el momento, el código HTML de nuestro sitio es el siguiente:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-Mx" lang="es-Mx" /> <head>
<title>Proyecto v1</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">@import url(/tma/css/x.css);</style>
</head>
<body>
<div id="contenedor">
<div id="izq">
<ul class="menu">
<li>Inicio</li>
<li>Mis amig@s</li>
<li>Mis aficiones</li>
<li>Contáctame</li>
</ul>
</div>
<div id="der">
<h3 class="titulo">Tutorial HTML Intermedio<br />
con ASP y PHP</h3>

Estamos aprendiendo a realizar un sitio dinámico con base en
ASP y PHP en 3 lecciones.<br /><br />

Al terminar el tutorial, seré capaz de crear mi sitio con estas
instrucciones. En caso contrario, la razón puede originarse en que
seguí mal todo lo que este tutorial aplica y comenta o debido
a que me falta conocer un poquito más de lo que Greg
comenta se requiere para desarrollar en forma correcta
todo el tutorial.<br /><br />

¡Pero todo es muy divertido!
</div>
</div>
</body>
</html>

Definición de variables

Por el momento, la variable que vamos a definir es la del título de la página. Lo hacemos con el siguiente código, el cual resalto en negritas para mejor comprensión:

<%
Dim titPagina

titPagina = "Proyecto v1"

%>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-Mx" lang="es-Mx" /> <head>
<title><%=titPagina%></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">@import url(/tma/css/x.css);</style>
</head>
<body>
<div id="contenedor">
<div id="izq">
<ul class="menu">
<li>Inicio</li>
<li>Mis amig@s</li>
<li>Mis aficiones</li>
<li>Contáctame</li>
</ul>
</div>
<div id="der">
<h3 class="titulo">Tutorial HTML Intermedio<br />
con ASP y PHP</h3>

Estamos aprendiendo a realizar un sitio dinámico con base en
ASP y PHP en 3 lecciones.<br /><br />

Al terminar el tutorial, seré capaz de crear mi sitio con estas
instrucciones. En caso contrario, la razón puede originarse en que
seguí mal todo lo que este tutorial aplica y comenta o debido
a que me falta conocer un poquito más de lo que Greg
comenta se requiere para desarrollar en forma correcta
todo el tutorial.<br /><br />

¡Pero todo es muy divertido!
</div>
</div>
</body>
</html>

Acabas, si no lo has notado, de implementar tu primer código ASP en la página. Todo ese texto resaltado en negritas es procesado "en el lado del servidor". Es decir, sólo lo puede ver quien tiene acceso a la página al estarla programando, pues si observas el código desde el navegador, no verás diferencia alguna con el presentado en primera instancia en esta misma página.

Conforme obtengas experiencia en el desarrollo y programación de páginas web, comprenderás que el uso de las variables te facilitará la vida, pues son un aspecto muy importante en todo proyecto... pero estamos en un tutorial intermedio y no te confundiré con mayor profundidad al respecto.

Implementación de los includes

Hemos llegado al punto en que vamos a "cortar" el código hasta el momento generado. Corta el código resaltado en negritas y pégalo en un nuevo archivo, al que nombrarás top.asp y colocarás en la ruta /tma/includes/top.asp

Ahora coloca lo siguiente en el lugar en que has removido ese código:

<%
Dim titPagina

titPagina = "Proyecto v1"

%>

<h3 class="titulo">Tutorial HTML Intermedio<br />
con ASP y PHP</h3>

Estamos aprendiendo a realizar un sitio dinámico con base en
ASP y PHP en 3 lecciones.<br /><br />

Al terminar el tutorial, seré capaz de crear mi sitio con estas
instrucciones. En caso contrario, la razón puede originarse en que
seguí mal todo lo que este tutorial aplica y comenta o debido
a que me falta conocer un poquito más de lo que Greg
comenta se requiere para desarrollar en forma correcta
todo el tutorial.<br /><br />

¡Pero todo es muy divertido!
</div>
</div>
</body>
</html>

Si observas tu página web, notarás que nada ha cambiado. Incluso si observas el código fuente desde el navegador, tampoco nada ha cambiado. Lo que has hecho fue separar la parte superior que será utilizada en todas las páginas del sitio, razón por la cual un archivo --top.asp-- bastará para hacerlo, evitándonos la tediosa acción de volver a escribir ese código en cada una de las páginas que lo utilizarán.

Hagámos lo mismo con el contenido y pie de página. Vamos a meterle tijera al contenido. Corta el código marcado en negritas y pégalo en un nuevo archivo, al que nombrarás inicio.asp y guardarás en la ruta /tma/includes/inicio.asp

<%
Dim titPagina

titPagina = "Proyecto v1"

%>

<h3 class="titulo">Tutorial HTML Intermedio<br />
con ASP y PHP</h3>

Estamos aprendiendo a realizar un sitio dinámico con base en
ASP y PHP en 3 lecciones.<br /><br />

Al terminar el tutorial, seré capaz de crear mi sitio con estas
instrucciones. En caso contrario, la razón puede originarse en que
seguí mal todo lo que este tutorial aplica y comenta o debido
a que me falta conocer un poquito más de lo que Greg
comenta se requiere para desarrollar en forma correcta
todo el tutorial.<br /><br />

¡Pero todo es muy divertido!
</div>
</div>
</body>
</html>

Ahora implementa el siguiente código para "incluir" el código que recién has removido:

<%
Dim titPagina

titPagina = "Proyecto v1"

%>


</div>
</div>
</body>
</html>

Por último, hacemos lo mismo con el código restante, el cual guardaremos en un archivo llamado pie.asp y mismo que estará ubicado en la ruta /tma/includes/pie.asp. Nuestro código final deberá ser el siguiente:

<%
Dim titPagina

titPagina = "Proyecto v1"

%>

Este último código es el que vamos a utilizar para generar el resto de las páginas del proyecto y sólo cambiará el nombre de la página que se incluye a través del segundo include.

Pasemos, ahora, a producir las páginas restantes del proyecto...

Participa con tus comentarios o lee lo que otros opinan:

Registro al Newsletter
Mantente al día con tutoriales más cortos sobre desarrollo de sitios web. Políticas de Privacidad
Términos de uso

Síguenos en: