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 - ASP - 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.
Lo que hacemos, aquí, es facilitar que nuestros contenidos, principalmente los textos, puedan ser presentados 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.
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:
<?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">
Aquí, primero, definimos el tipo de codificación de los contenidos (la primera línea); y, segundo,
declaramos el tipo de documento que vamos a emplear: XHTML 1.0 Strict//ES (segunda línea).<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Lo que hacemos, aquí, es facilitar que nuestros contenidos, principalmente los textos, puedan ser presentados 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:
<?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>
</body>
</html>
He asignado el nombre x.css al archivo CSS que vamos a utilizar. Puedes asignarle
el que más te plazca.<!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.
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.
<?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">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.<!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: