Selecciona tema:
- Introducción
- Desarrollo del tutorial
- Advertencia
- Cómo referenciar el tutorial
- Capítulo 1 - HTML y CSS
- HTML y CSS
- Implementación de CSS
- Definición de estilos
- Selectores ID y Class
- Imágenes y CSS
- Alineación en CSS
- Estructura de sitio con CSS
- Capítulo 2 - ASP y PHP
- ¿Qué son ASP y PHP?
- Instalación de IIS
- Instalación de IIS - Win 7
- Instalación de PHP
- Instalación de PHP - Win 7
- Variables en ASP
- Variables en PHP
- Includes en ASP
- Includes en PHP
- Página ejemplo ASP y PHP
- Capítulo 3 - El sitio
- Planeación + Wireframes
- ----------
- ASP - La base
- ASP - Estructura
- ASP - CSS
- ASP - Variables + includes
- ASP - Producción de páginas
- ----------
- PHP - La base
- PHP - Estructura
- PHP - CSS
- PHP - Variables + includes
- PHP - Producción de páginas
- Actualizaciones
- Comentarios
- Donativos
Tutorial HTML Nivel Intermedio
Capítulo 2 - ASP y PHP - Páginas de ejemplo con ASP y PHP
Es momento de poner en práctica todo lo explicado hasta ahora. A continuación vamos
a estructurar una página ASP y una PHP, paso por paso.
Primero presentaré el código a utilizar en ASP y, enseguida, el respectivo para PHP. Lo hago mediante pasos para que sea mejor comprendido este proceso de estructura. Manos a la obra...
Dentro de los encabezados vamos a incluir la etiqueta body. Así que, en la página pruebaCSS.html que hemos utilizado durante este tutorial, elimina todo el código e iniciemos por colocar los tres primeros renglones que toda página HTML debe contener:
Para realizar la conversión del archivo pruebaCSS.html a ASP y PHP, tan sólo se requiere de guardar al archivo con esas extensiones o de realizar una acción "Copiar y Pegar" del archivo en el mismo directorio y, finalmente, renombrarlo como pruebaCSS.asp y pruebaCSS.php.
La conversión es necesaria si deseas seguir utilizando el mismo archivo. En caso contrario, puedes generar los archivos directamente utilizando el proceso explicado en el Capítulo 1.
Para estructurar la página, debemos incluir el código respectivo. Como se recordará, fue en la sección Estructura de sitio con CSS donde se comentó sobre este aspecto. Vamos a trabajar en base a la estructura ahí expuesta.
Primero, colocamos el código del DIV que nos servirá como contenedor. Todo dentro de las etiquetas body:
En ASP, debes generar dos nuevas páginas. Asígnales el nombre top.asp y pie.asp
En PHP, debes generar, también, dos nuevas páginas. Asígnales el nombre top.php y pie.php
Una vez generadas esas páginas, procedemos a implementar el código respectivo.
En el archivo pruebaCSS.asp, que ha resultado de la conversión desde el archivo pruebaCSS.html, implementa el siguiente código:
Ahora, para ASP, implementamos el código del archivo pie.asp:
Así que procedamos a implementar el código CSS...
Primero presentaré el código a utilizar en ASP y, enseguida, el respectivo para PHP. Lo hago mediante pasos para que sea mejor comprendido este proceso de estructura. Manos a la obra...
Paso 1 - Encabezados
Dentro de los encabezados vamos a incluir la etiqueta body. Así que, en la página pruebaCSS.html que hemos utilizado durante este tutorial, elimina todo el código e iniciemos por colocar los tres primeros renglones que toda página HTML debe contener:
<?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" />
A continuación, agregamos los encabezados de la página:<!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>Mi primera página ASP y PHP</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">@import url(/css/prueba.css);</style>
</head>
Y finalmente las etiquetas body para el cuerpo o contenido de la página:<title>Mi primera página ASP y PHP</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">@import url(/css/prueba.css);</style>
</head>
<body>
Mi primera página ASP y PHP
</body>
</html>
Mi primera página ASP y PHP
</body>
</html>
Paso 2 - Conversión a ASP y PHP
Para realizar la conversión del archivo pruebaCSS.html a ASP y PHP, tan sólo se requiere de guardar al archivo con esas extensiones o de realizar una acción "Copiar y Pegar" del archivo en el mismo directorio y, finalmente, renombrarlo como pruebaCSS.asp y pruebaCSS.php.
La conversión es necesaria si deseas seguir utilizando el mismo archivo. En caso contrario, puedes generar los archivos directamente utilizando el proceso explicado en el Capítulo 1.
Paso 3 - Implementación de estructura de la página
Para estructurar la página, debemos incluir el código respectivo. Como se recordará, fue en la sección Estructura de sitio con CSS donde se comentó sobre este aspecto. Vamos a trabajar en base a la estructura ahí expuesta.
Primero, colocamos el código del DIV que nos servirá como contenedor. Todo dentro de las etiquetas body:
<body>
<div id="contenedor">
</div>
</body>
Implementamos el código para las tres secciones en que se presentarán los contenidos (top, contenidos
y pie):<div id="contenedor">
</div>
</body>
<body>
<div id="contenedor">
<div id="top"></div>
<div id="contenidos"></div>
<div id="pie"></div>
</div>
</body>
Y finalmente el código para la estructura, en columnas, del DIV cuyo ID es
"contenidos"<div id="contenedor">
<div id="top"></div>
<div id="contenidos"></div>
<div id="pie"></div>
</div>
</body>
<body>
<div id="contenedor">
<div id="top"></div>
<div id="contenidos">
<div class="izquierda"></div>
<div class="contenido"></div>
<div class="derecha"></div>
</div>
<div id="pie"></div>
</div>
</body>
<div id="contenedor">
<div id="top"></div>
<div id="contenidos">
<div class="izquierda"></div>
<div class="contenido"></div>
<div class="derecha"></div>
</div>
<div id="pie"></div>
</div>
</body>
Paso 4 - Implementación de los includes
En ASP, debes generar dos nuevas páginas. Asígnales el nombre top.asp y pie.asp
En PHP, debes generar, también, dos nuevas páginas. Asígnales el nombre top.php y pie.php
Una vez generadas esas páginas, procedemos a implementar el código respectivo.
En el archivo pruebaCSS.asp, que ha resultado de la conversión desde el archivo pruebaCSS.html, implementa el siguiente código:
<!-- #include virtual="/inc/top.asp" -->
<div class="izquierda"></div>
<div class="contenido"></div>
<div class="derecha"></div>
<!-- #include virtual="/inc/pie.asp" -->
Para la versión en PHP, en el archivo pruebaCSS.php, el cual también es resultado de la
conversión del archivo pruebaCSS.html, debes implementar el siguiente código:<div class="izquierda"></div>
<div class="contenido"></div>
<div class="derecha"></div>
<!-- #include virtual="/inc/pie.asp" -->
<?php include($rutaSol.'/inc/top.php'); ?>
<div class="izquierda"></div>
<div class="contenido"></div>
<div class="derecha"></div>
<?php include($rutaSol.'/inc/pie.php'); ?>
Para ASP, el código del archivo top.asp es el siguiente:<div class="izquierda"></div>
<div class="contenido"></div>
<div class="derecha"></div>
<?php include($rutaSol.'/inc/pie.php'); ?>
<?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>Mi primera página ASP</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">@import url(/css/prueba.css);</style>
</head>
<body>
<div id="contenedor">
<div id="top"></div>
<div id="contenidos">
Para PHP, el código del archivo top.php es el siguiente:<!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>Mi primera página ASP</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">@import url(/css/prueba.css);</style>
</head>
<body>
<div id="contenedor">
<div id="top"></div>
<div id="contenidos">
<?php
$rutaSol = "";
?>
<?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>Mi primera página PHP</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">@import url(/css/prueba.css);</style>
</head>
<body>
<div id="contenedor">
<div id="top"></div>
<div id="contenidos">
Nota las negritas en el código, se diferencia de ASP porque debemos definir una variable para controlar
la ubicación de los archivos en nuestro sitio y evitar problemas al manejar includes en y desde diferentes
ubicaciones. ASP no lo requiere, así que continuemos adelante.$rutaSol = "";
?>
<?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>Mi primera página PHP</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">@import url(/css/prueba.css);</style>
</head>
<body>
<div id="contenedor">
<div id="top"></div>
<div id="contenidos">
Ahora, para ASP, implementamos el código del archivo pie.asp:
</div>
<div id="pie"></div>
</div>
</body>
</html>
En PHP, el código para el archivo pie.php es:<div id="pie"></div>
</div>
</body>
</html>
</div>
<div id="pie"></div>
</div>
</body>
</html>
¡Listo! Hemos terminado con la estructura de la página... sólo restaría agregar el
código CSS al archivo
prueba.css que se presenta dentro del código del archivo top.asp...<div id="pie"></div>
</div>
</body>
</html>
Así que procedamos a implementar el código CSS...
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:
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: