Dado el título de este blog y que he comenzado con entradas un poco avanzadas, este post lo voy a dedicar a la gente que no tiene ni idea del tema pero que le gustaría saber cómo se construye una página web.
Lo primero que debéis saber es que, para empezar, sólo necesitáis un editor de texto simple como el block de notas.
Lo segundo, para la gente que no tiene ni pajolera idea de que código se usa para diseñar una página web, les recomiendo que, en cualquier página que estén viendo con su navegador, pulsen en ella el botón derecho del ratón y, en el menú que les aparece, elijan "ver código fuente de la página", así se darán una idea de la estructura.
Lo tercero, la estructura principal de una página web es la siguiente:
<html >
Si escribís y guardáis el anterior código con la extensión "html" y lo abrís en el navegador vais a ver como resultado la frase "aquí va la estructura de la página". Los principios básicos son simples: etiquetas que se abren "<body>" y se cierran "</body>" y dentro contienen lo que se quiere de ellas. Para los principiantes os recomiendo encarecidamente lo siguiente:
- Leeros la siguiente página: http://www.librosweb.es/xhtml/index.html
- Empezar transformando páginas gratuitas que os podéis descargar de, por ejemplo: http://www.plantillaswebgratis.com.es/ , o buscáis en google.Tened en cuenta que esas páginas pueden ser viejas y, por lo tanto, tal vez contengan un código obsoleto. Con esto me refiero a que ahora, para maquetar una página web, se usan mucho los contenedores o capas llamados "div". Por lo que os aconsejo que reviséis el código y que trabajéis con aquellas que contengan divs. Ejemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #42413C;
margin: 0;
padding: 0;
color: #000;
}
/* ~~ este contenedor de anchura fija y rodea los demás divs ~~ */
.contenedor {
width: 960px;
background: #FFF;
margin: 0 auto; /* el valor automático de los lados, unido a la anchura, centra el diseño */
}
/* ~~ no se asigna una anchura a la cabecera. Se extenderá por toda la anchura del diseño. Es decir, 960px ~~ */
.cabecera {
background: #ADB96E;
}
.menuizq {
float: left;
width: 180px;
background: #EADCAE;
padding-bottom: 10px;
height: 500px;
}
.contenido {
padding: 10px 0;
width: 780px;
float: left;
height: 500px;
}
.pie {
padding: 10px 0;
background: #CCC49F;
position: relative;
clear: both;
}
</style></head>
<body>
<div class="contenedor">
<div class="cabecera">
<p>aquí iría la cabecera de la página donde podríamos poner el título y el logotipo</p>
</div>
<div class="menuizq">
<p>en este lado podemos poner el menú con una altura fija igual a la de contenido de 500px</p>
</div>
<div class="contenido">
<p>aquí el contenido principal de la página </p>
</div>
<div class="pie">
<p>aquí el pie de página</p>
</div>
</div>
</body>
</html>
El código anterior sería un ejemplo sencillo de lo que podría ser una maquetación con divs. Si copiáis y pegáis el código en el wordpad y lo guardáis con la extensión ".html", lo podéis abrir con el navegador y ver el resultado. También podéis trastear con las clases cambiando sus valores para ver los resultados, como, por ejemplo cambiar "float: left" por "float:right" y comprobar el resultado.
Estudiar, empezando con el "html" y después el "css" en la siguiente dirección: http://www.librosweb.es/.
Lo primero que debéis saber es que, para empezar, sólo necesitáis un editor de texto simple como el block de notas.
Lo segundo, para la gente que no tiene ni pajolera idea de que código se usa para diseñar una página web, les recomiendo que, en cualquier página que estén viendo con su navegador, pulsen en ella el botón derecho del ratón y, en el menú que les aparece, elijan "ver código fuente de la página", así se darán una idea de la estructura.
Lo tercero, la estructura principal de una página web es la siguiente:
<html >
<head>
"aquí va el código de head"
</head>
<body>
"aquí va la estructura de la página"
</body>
</html>
Si escribís y guardáis el anterior código con la extensión "html" y lo abrís en el navegador vais a ver como resultado la frase "aquí va la estructura de la página". Los principios básicos son simples: etiquetas que se abren "<body>" y se cierran "</body>" y dentro contienen lo que se quiere de ellas. Para los principiantes os recomiendo encarecidamente lo siguiente:
- Leeros la siguiente página: http://www.librosweb.es/xhtml/index.html
- Empezar transformando páginas gratuitas que os podéis descargar de, por ejemplo: http://www.plantillaswebgratis.com.es/ , o buscáis en google.Tened en cuenta que esas páginas pueden ser viejas y, por lo tanto, tal vez contengan un código obsoleto. Con esto me refiero a que ahora, para maquetar una página web, se usan mucho los contenedores o capas llamados "div". Por lo que os aconsejo que reviséis el código y que trabajéis con aquellas que contengan divs. Ejemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #42413C;
margin: 0;
padding: 0;
color: #000;
}
/* ~~ este contenedor de anchura fija y rodea los demás divs ~~ */
.contenedor {
width: 960px;
background: #FFF;
margin: 0 auto; /* el valor automático de los lados, unido a la anchura, centra el diseño */
}
/* ~~ no se asigna una anchura a la cabecera. Se extenderá por toda la anchura del diseño. Es decir, 960px ~~ */
.cabecera {
background: #ADB96E;
}
.menuizq {
float: left;
width: 180px;
background: #EADCAE;
padding-bottom: 10px;
height: 500px;
}
.contenido {
padding: 10px 0;
width: 780px;
float: left;
height: 500px;
}
.pie {
padding: 10px 0;
background: #CCC49F;
position: relative;
clear: both;
}
</style></head>
<body>
<div class="contenedor">
<div class="cabecera">
<p>aquí iría la cabecera de la página donde podríamos poner el título y el logotipo</p>
</div>
<div class="menuizq">
<p>en este lado podemos poner el menú con una altura fija igual a la de contenido de 500px</p>
</div>
<div class="contenido">
<p>aquí el contenido principal de la página </p>
</div>
<div class="pie">
<p>aquí el pie de página</p>
</div>
</div>
</body>
</html>
El código anterior sería un ejemplo sencillo de lo que podría ser una maquetación con divs. Si copiáis y pegáis el código en el wordpad y lo guardáis con la extensión ".html", lo podéis abrir con el navegador y ver el resultado. También podéis trastear con las clases cambiando sus valores para ver los resultados, como, por ejemplo cambiar "float: left" por "float:right" y comprobar el resultado.
Estudiar, empezando con el "html" y después el "css" en la siguiente dirección: http://www.librosweb.es/.
Comentarios
Publicar un comentario