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 PHP
- Variables en ASP
- Variables en PHP
- Includes en ASP
- Includes en PHP
- Página ejemplo ASP y PHP
- Capítulo 3 - El sitio
- Actualizaciones
- Comentarios
- Donativos
Tutorial HTML Nivel Intermedio del Bicentenario
Capítulo 2 - ASP y PHP - Páginas de ejemplo con ASP y PHP - Parte 2
Continuación de Página ejemplo con ASP y PHP...
Iniciamos especificando que ninguna etiqueta HTML implemente espacios que trae consigo:
Si lo deseas, puedes experimentar con los valores asignados a los estilos izquierda, contenido y derecha --los implementados en el último paso-- para que veas cómo difiere la estructura de la página e inicies a experimentar con tus propias "aleaciones".
Ten muy presente que los mejores programadores y desarrolladores se diferencian por ser muy originales en la forma de aplicar e implementar el código de sus aplicaciones, estructura o scripts... así que nada pierdes con experimentar, al contrario, te servirá enormidades... desde el Tutorial Básico he dicho que "echando a perder se aprende".
Damos ahora el gran salto al Capítulo 3, donde ya estaremos enfocados a estructurar y programar el sitio prediseñado y dónde experimentarás con todo lo aprendido hasta el momento para generar un sitio real, funcional y cumpliendo con los estándares web respectivos.
Iniciamos especificando que ninguna etiqueta HTML implemente espacios que trae consigo:
* {
margin:0;
padding:0;
}
Toca el turno a la etiqueta body:margin:0;
padding:0;
}
* {
margin:0;
padding:0;
}
body {
font:normal 13px arial,verdana;
color:#333;
margin-left:50%;
}
Ahora se aplica estilo al DIV cuyo ID es contenedor:margin:0;
padding:0;
}
body {
font:normal 13px arial,verdana;
color:#333;
margin-left:50%;
}
* {
margin:0;
padding:0;
}
body {
font:normal 13px arial,verdana;
color:#333;
margin-left:50%;
}
#contenedor {
position:relative;
width:970px;
height:100%;
margin-left:-495px;
margin-top:5px;
margin-bottom:5px;
padding:6px;
padding-top:15px;
background:#fff;
border:3px solid #e0e1e1;
}
Y asignamos los valores para los DIVs top, contenidos y pie:margin:0;
padding:0;
}
body {
font:normal 13px arial,verdana;
color:#333;
margin-left:50%;
}
#contenedor {
position:relative;
width:970px;
height:100%;
margin-left:-495px;
margin-top:5px;
margin-bottom:5px;
padding:6px;
padding-top:15px;
background:#fff;
border:3px solid #e0e1e1;
}
* {
margin:0;
padding:0;
}
body {
font:normal 13px arial,verdana;
color:#333;
margin-left:50%;
}
#contenedor {
position:relative;
width:970px;
height:100%;
margin-left:-495px;
margin-top:5px;
margin-bottom:5px;
padding:6px;
padding-top:15px;
background:#fff;
border:3px solid #e0e1e1;
}
#top {
position:relative;
width:970px;
height:70px;
border:1px solid #ccc;
}
#contenidos {
position:relative;
width:970px;
height:100%;
}
#pie {
position:relative;
clear:both;
width:970px;
height:70px;
border:1px solid #ccc;
}
Finalmente, implementamos los valores para los DIVs izquierda, contenido y derecha:margin:0;
padding:0;
}
body {
font:normal 13px arial,verdana;
color:#333;
margin-left:50%;
}
#contenedor {
position:relative;
width:970px;
height:100%;
margin-left:-495px;
margin-top:5px;
margin-bottom:5px;
padding:6px;
padding-top:15px;
background:#fff;
border:3px solid #e0e1e1;
}
#top {
position:relative;
width:970px;
height:70px;
border:1px solid #ccc;
}
#contenidos {
position:relative;
width:970px;
height:100%;
}
#pie {
position:relative;
clear:both;
width:970px;
height:70px;
border:1px solid #ccc;
}
* {
margin:0;
padding:0;
}
body {
font:normal 13px arial,verdana;
color:#333;
margin-left:50%;
}
#contenedor {
position:relative;
width:970px;
height:100%;
margin-left:-495px;
margin-top:5px;
margin-bottom:5px;
padding:6px;
padding-top:15px;
background:#fff;
border:3px solid #e0e1e1;
}
#top {
position:relative;
width:970px;
height:70px;
border:1px solid #ccc;
}
#contenidos {
position:relative;
width:970px;
height:100%;
}
#pie {
position:relative;
clear:both;
width:970px;
height:70px;
border:1px solid #ccc;
}
.izquierda {
float:left;
width:140px;
padding-left:0px;
margin-right:10px;
background:#fff;
}
.contenido {
position:relative;
float:left;
width:570px;
padding:6px;
margin-bottom:25px;
}
.derecha {
position:relative;
float:left;
width:180px;
border:1px solid #ccc;
height:100%;
padding:5px;
color:#666;
margin-left:15px;
}
¡Felicidades! Has logrado estructurar y aplicar CSS a tu página utilizando ASP y PHP.margin:0;
padding:0;
}
body {
font:normal 13px arial,verdana;
color:#333;
margin-left:50%;
}
#contenedor {
position:relative;
width:970px;
height:100%;
margin-left:-495px;
margin-top:5px;
margin-bottom:5px;
padding:6px;
padding-top:15px;
background:#fff;
border:3px solid #e0e1e1;
}
#top {
position:relative;
width:970px;
height:70px;
border:1px solid #ccc;
}
#contenidos {
position:relative;
width:970px;
height:100%;
}
#pie {
position:relative;
clear:both;
width:970px;
height:70px;
border:1px solid #ccc;
}
.izquierda {
float:left;
width:140px;
padding-left:0px;
margin-right:10px;
background:#fff;
}
.contenido {
position:relative;
float:left;
width:570px;
padding:6px;
margin-bottom:25px;
}
.derecha {
position:relative;
float:left;
width:180px;
border:1px solid #ccc;
height:100%;
padding:5px;
color:#666;
margin-left:15px;
}
Si lo deseas, puedes experimentar con los valores asignados a los estilos izquierda, contenido y derecha --los implementados en el último paso-- para que veas cómo difiere la estructura de la página e inicies a experimentar con tus propias "aleaciones".
Ten muy presente que los mejores programadores y desarrolladores se diferencian por ser muy originales en la forma de aplicar e implementar el código de sus aplicaciones, estructura o scripts... así que nada pierdes con experimentar, al contrario, te servirá enormidades... desde el Tutorial Básico he dicho que "echando a perder se aprende".
Damos ahora el gran salto al Capítulo 3, donde ya estaremos enfocados a estructurar y programar el sitio prediseñado y dónde experimentarás con todo lo aprendido hasta el momento para generar un sitio real, funcional y cumpliendo con los estándares web respectivos.
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
Mantente al día con tutoriales más cortos sobre desarrollo de sitios web. Políticas de Privacidad
Términos de uso