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 - Includes en PHP
Includes en ASP /
Includes en PHP
Para los includes en PHP, se utiliza casi el mismo código que en ASP, obvio, con sus variantes y diferencias entre uno y otro. En PHP, la sintaxis que se utiliza para el código es la siguiente:
Puesto que nuestros includes estarán debajo de un directorio /inc/, la sintaxis presentada sufrirá cambios. El código que utilizaremos requiere de dos pasos. Primero se define la variable respectiva:
En el directorio que has elegido para realizar las pruebas con el tutorial, crea dos nuevas páginas PHP cuyos nombres sean top.php y pie.php. Abrelos en ventanas adicionales del Bloc de Notas para tenerlos a la mano cuando sean requeridos.
En el archivo pruebaCSS.php que has creado, copia y pega el siguiente código (si lo anotas para que vayas acostumbrándote y aprendiéndolo, es mejor):
En el archivo pie.php, anota el siguiente código, exactamente donde se indica:
Has hecho todo un include y ahora ya sabes cómo se implementan y cómo funcionan.
Sólo debes dar clic en el botón "Actualizar" o "Refresh" del navegador para visualizar los cambios implementados.
¡Ah! Pero no estás utilizando el Bloc de Notas y realizas el tutorial empleando Dreamweaver... bueno, calma... si no visualizas en forma correcta los cambios utilizando la opción "Design" (Diseño) que ofrece Dreamweaver, no te desesperes... es normal cuando utilizas este tipo de programación en las páginas. Es decir, la página se visualiza, en Dreamweaver, en forma incorrecta y parece que estás haciendo las cosas mal...
Pues bien, la cosa es bastante sencilla. Al inicio del tutorial he comentado que se utilizaría el Bloc de Notas para el desarrollo del tutorial... simplemente porque Dreamweaver no puede visualizar las páginas en forma correcta cuando implementas programación con includes
Includes en ASP / Includes en PHP
Experimentemos todo lo aprendido: página de ejemplo con ASP y PHP
Includes en PHP
Para los includes en PHP, se utiliza casi el mismo código que en ASP, obvio, con sus variantes y diferencias entre uno y otro. En PHP, la sintaxis que se utiliza para el código es la siguiente:
<?php include("ruta y nombre de archivo"); ?>
ruta y nombre de archivo es donde se especifica el directorio o
subdirectorio y el nombre del archivo que se va a incrustar o insertar. Es algo del tipo
/inc/top.php.Puesto que nuestros includes estarán debajo de un directorio /inc/, la sintaxis presentada sufrirá cambios. El código que utilizaremos requiere de dos pasos. Primero se define la variable respectiva:
<?php
$rutaSol = "../";
?>
... y, posteriormente, se establece el include ya con la variable en el código.$rutaSol = "../";
?>
<?php include($rutaSol.'/inc/nombre_de_archivo.php'); ?>
Veamos un ejemplo para entrar en forma práctica al tema. El código siguiente nos indica que la parte
superior e inferior de la página han sido removidos y se cargan como un include. Así mismo, nos permite
notar que se ha definido una variable previamente:
<?php
$rutaSol = "";
?>
<?php include($rutaSol.'/inc/top.php'); ?>
<div class="izquierda">Menu</div>
<div class="contenido">Contenido de la página</div>
<div class="derecha">Parte dercha</div>
<?php include($rutaSol.'/inc/pie.php'); ?>
El código del archivo top.php es el siguiente:$rutaSol = "";
?>
<?php include($rutaSol.'/inc/top.php'); ?>
<div class="izquierda">Menu</div>
<div class="contenido">Contenido de la página</div>
<div class="derecha">Parte dercha</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 PHP</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">@import url(prueba.css);</style>
</head>
<body>
<div class="top">Top</div>
Mientras que el código del archivo pie.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 PHP</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">@import url(prueba.css);</style>
</head>
<body>
<div class="top">Top</div>
<div class="pie">Pie</div>
</body>
</html>
¡Pruébalo!</body>
</html>
En el directorio que has elegido para realizar las pruebas con el tutorial, crea dos nuevas páginas PHP cuyos nombres sean top.php y pie.php. Abrelos en ventanas adicionales del Bloc de Notas para tenerlos a la mano cuando sean requeridos.
En el archivo pruebaCSS.php que has creado, copia y pega el siguiente código (si lo anotas para que vayas acostumbrándote y aprendiéndolo, es mejor):
<?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(prueba.css);</style>
</head>
<body>
<div class="contenedor">
<div class="top">Top</div>
<div class="contenidos">
<div class="izquierda">Menu</div>
<div class="contenido">Contenido principal de la página</div>
<div class="derecha">Parte derecha</div>
</div>
<div class="pie">Contenidos del pie de página</div>
</div>
</body>
</html>
Ahora, corta el código que a continuación se coloca en negritas:$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(prueba.css);</style>
</head>
<body>
<div class="contenedor">
<div class="top">Top</div>
<div class="contenidos">
<div class="izquierda">Menu</div>
<div class="contenido">Contenido principal de la página</div>
<div class="derecha">Parte derecha</div>
</div>
<div class="pie">Contenidos del pie de página</div>
</div>
</body>
</html>
<?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(prueba.css);</style>
</head>
<body>
<div class="contenedor">
<div class="top">Top</div>
<div class="contenidos">
<div class="izquierda">Menu</div>
<div class="contenido">Contenido principal de la página</div>
<div class="derecha">Parte derecha</div>
</div>
<div class="pie">Contenidos del pie de página</div>
</div>
</body>
</html>
... y pégalo en el archivo top.php. Ahora, en el archivo pruebaCSS.php
agrega el siguiente código:$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(prueba.css);</style>
</head>
<body>
<div class="contenedor">
<div class="top">Top</div>
<div class="contenidos">
<div class="izquierda">Menu</div>
<div class="contenido">Contenido principal de la página</div>
<div class="derecha">Parte derecha</div>
</div>
<div class="pie">Contenidos del pie de página</div>
</div>
</body>
</html>
<?php
$rutaSol = "";
?>
<?php include($rutaSol.'/inc/top.php'); ?>
<div class="contenidos">
<div class="izquierda">Menu</div>
<div class="contenido">Contenido principal de la página</div>
<div class="derecha">Parte derecha</div>
</div>
<div class="pie">Contenidos del pie de página</div>
</div>
</body>
</html>
Toca el turno para el código presentado al fondo de la página. En el archivo pruebaCSS.php
corta el código que a continuación se coloca en negritas:$rutaSol = "";
?>
<?php include($rutaSol.'/inc/top.php'); ?>
<div class="contenidos">
<div class="izquierda">Menu</div>
<div class="contenido">Contenido principal de la página</div>
<div class="derecha">Parte derecha</div>
</div>
<div class="pie">Contenidos del pie de página</div>
</div>
</body>
</html>
<?php
$rutaSol = "";
?>
<?php include($rutaSol.'/inc/top.php'); ?>
<div class="contenidos">
<div class="izquierda">Menu</div>
<div class="contenido">Contenido principal de la página</div>
<div class="derecha">Parte derecha</div>
</div>
<div class="pie">Contenidos del pie de página</div>
</div>
</body>
</html>
... y pégalo en el archivo pie.php. A continuación, en el archivo
pruebaCSS.php, agrega el siguiente código:$rutaSol = "";
?>
<?php include($rutaSol.'/inc/top.php'); ?>
<div class="contenidos">
<div class="izquierda">Menu</div>
<div class="contenido">Contenido principal de la página</div>
<div class="derecha">Parte derecha</div>
</div>
<div class="pie">Contenidos del pie de página</div>
</div>
</body>
</html>
<?php
$rutaSol = "";
?>
<?php include($rutaSol.'/inc/top.php'); ?>
<div class="contenidos">
<div class="izquierda">Menu</div>
<div class="contenido">Contenido principal de la página</div>
<div class="derecha">Parte derecha</div>
</div>
<?php include($rutaSol.'/inc/pie.php'); ?>
Como podrás notar, no existe cambio alguno pues lo único que hemos realizado es implementar los
includes sin realizar modificaciones o adiciones. Pasemos a conocer para qué hemos hecho estos
pasos...$rutaSol = "";
?>
<?php include($rutaSol.'/inc/top.php'); ?>
<div class="contenidos">
<div class="izquierda">Menu</div>
<div class="contenido">Contenido principal de la página</div>
<div class="derecha">Parte derecha</div>
</div>
<?php include($rutaSol.'/inc/pie.php'); ?>
En el archivo pie.php, anota el siguiente código, exactamente donde se indica:
<div class="pie">Derechos Reservados ®</div>
</div>
</body>
</html>
¡Eso!</div>
</body>
</html>
Has hecho todo un include y ahora ya sabes cómo se implementan y cómo funcionan.
Sólo debes dar clic en el botón "Actualizar" o "Refresh" del navegador para visualizar los cambios implementados.
¡Ah! Pero no estás utilizando el Bloc de Notas y realizas el tutorial empleando Dreamweaver... bueno, calma... si no visualizas en forma correcta los cambios utilizando la opción "Design" (Diseño) que ofrece Dreamweaver, no te desesperes... es normal cuando utilizas este tipo de programación en las páginas. Es decir, la página se visualiza, en Dreamweaver, en forma incorrecta y parece que estás haciendo las cosas mal...
Pues bien, la cosa es bastante sencilla. Al inicio del tutorial he comentado que se utilizaría el Bloc de Notas para el desarrollo del tutorial... simplemente porque Dreamweaver no puede visualizar las páginas en forma correcta cuando implementas programación con includes
Includes en ASP / Includes en PHP
Experimentemos todo lo aprendido: página de ejemplo con ASP y PHP
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: