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 3 - PHP - Código base para el sitio
El enfoque se orienta a generar la base del código que será empleado en todas las páginas del sitio.
Por tanto, procedemos a implementarlos. Primero incluímos lo relacionado a la declaración del
documento: DOCTYPE.
Notarás que <?xml version="1.0" encoding="utf-8"?> no se implementa. La razón es simple: PHP considera que <? es donde inicia el código que deberá interpretar y presentar en pantalla. No se implementa esta línea para evitar un error, pero más adelante la implementaremos, cuando se llegue al tema PHP - Variables e includes
Con lo anterior, se facilitar que nuestros contenidos, principalmente los textos, puedan ser visualizados en cualquier tipo de dispositivo y en cualquier idioma. XHTML 1.0 Strict requiere de cumplir con ciertos lineamientos en el código HTML y scripts empleados dentro de las páginas.
Procedemos, ahora, a implementar las etiquetas HTML, HEAD y BODY:
El título es el que aparece en la parte superior del navegador y/o en las lengüetas o pestañas (tabs) de los mismos. El nombre que asigno es Proyecto v1... puedes cambiarle si deseas.
$rutaSol debes recordar que es la variable que nos permitirá manejar las rutas entre directorios en forma relativa y se utilizará para intentar imitar lo que se hace con ASP Includes en su modalidad virtual.
Nota: recuerda que puedes cambiar el "es-Mx" por el que representa a tu país. Ejemplo: "es-Ar".
A continuación implementamos el código para la distribución de los contenidos.
Como puedes ver, se trabaja tomando como base un diseño que no contiene las secciones superior e inferior y cuyos contenidos se distribuyen en zona izquierda --para el menú-- y zona derecha--para los contenidos de cada página.
Importante: observa que se utilizará el archivo x.css para implementar, en éste, toda la codificación CSS requerida en los estilos del sitio. Asumo que ya has generado ese archivo siguiendo lo explicado en la introducción del Capítulo 1.
De tener dudas, utiliza el formulario abajo presentado para enviarlas. Pasemos a establecer la estructura del sitio.
Participa con tus comentarios o lee lo que otros opinan:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Aquí, declaramos el tipo de documento que vamos a emplear: XHTML 1.0 Strict//ESNotarás que <?xml version="1.0" encoding="utf-8"?> no se implementa. La razón es simple: PHP considera que <? es donde inicia el código que deberá interpretar y presentar en pantalla. No se implementa esta línea para evitar un error, pero más adelante la implementaremos, cuando se llegue al tema PHP - Variables e includes
Con lo anterior, se facilitar que nuestros contenidos, principalmente los textos, puedan ser visualizados en cualquier tipo de dispositivo y en cualquier idioma. XHTML 1.0 Strict requiere de cumplir con ciertos lineamientos en el código HTML y scripts empleados dentro de las páginas.
Procedemos, ahora, a implementar las etiquetas HTML, HEAD y BODY:
<?php
$rutaSol = "";
?>
<!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>
</body>
</html>
He asignado el nombre x.css al archivo CSS que vamos a utilizar. Puedes asignarle
el que más te plazca.$rutaSol = "";
?>
<!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>
</body>
</html>
El título es el que aparece en la parte superior del navegador y/o en las lengüetas o pestañas (tabs) de los mismos. El nombre que asigno es Proyecto v1... puedes cambiarle si deseas.
$rutaSol debes recordar que es la variable que nos permitirá manejar las rutas entre directorios en forma relativa y se utilizará para intentar imitar lo que se hace con ASP Includes en su modalidad virtual.
Nota: recuerda que puedes cambiar el "es-Mx" por el que representa a tu país. Ejemplo: "es-Ar".
A continuación implementamos el código para la distribución de los contenidos.
<?php
$rutaSol = "";
?>
<!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">contenidos del menú</div>
<div id="der">contenido principal</div>
</div>
</body>
</html>
Lo que hemos realizado, hasta este punto, ha sido establecer la base que será utilizada para el
desarrollo e implementación del resto del código y estructura.$rutaSol = "";
?>
<!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">contenidos del menú</div>
<div id="der">contenido principal</div>
</div>
</body>
</html>
Como puedes ver, se trabaja tomando como base un diseño que no contiene las secciones superior e inferior y cuyos contenidos se distribuyen en zona izquierda --para el menú-- y zona derecha--para los contenidos de cada página.
Importante: observa que se utilizará el archivo x.css para implementar, en éste, toda la codificación CSS requerida en los estilos del sitio. Asumo que ya has generado ese archivo siguiendo lo explicado en la introducción del Capítulo 1.
De tener dudas, utiliza el formulario abajo presentado para enviarlas. Pasemos a establecer la estructura del sitio.
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:
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: