1 enero 2010 in XHTML/CSS by dacho

votar
Share

Hola, en esta oportunidad saldare la deuda pendiente con este tutorial que ya lo deberia haber terminado hace tiempo pero justamente por falta de tiempo no he podido, Comencemos.

Lo que veremos en este articulo del tutor es como armar estructuras de paginas web, para poder ordenar los elementos de manera que sea accesible y de mejor navegacion para los usuarios y les permitira hacer el diseño que necesiten.

A la hora de comenzar a maquetar una web, hay que tener claro como funciona. Basicamente uno puede ver el maquetado de una pagina web como cajas adentro de cajas, o cuadrados dentro de cuadrados. No se puede enseñar todas las combinaciones posibles de cuadrados dentro de cuadrados, por ello me limitare a un par de ejemplos y luego ustedes tendran que utilizar su creatividad para lograr mayor cantidad de variaciones!.

IMAGENTUTO

El elemento div

Un div es una simple caja contenedora, si uno coloca un div con contenido adentro practicamente no se veran cambios si no se realizan modificaciones por medio de css. En este caso veremos que pasa:

 
<!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" dir="ltr" lang="es-ES">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Analisis matematco I: Programa de la materia</title>
</head>
 
<body>
 
<div class="centrado">
 
<div class="header">
<h1>Analisis I - Analisis Matematico I - Matematica 1 - Analisis II (C)</h1>
<p>Curso regular primer cuatrimestre año 2009</p>
</div>
 
<div class="contenido">
<h2>Primer parcial</h2>
<p><strong>fecha:</strong> 17 de Febrero, <strong>Hora:</strong> 17 hs., <strong>Lugar:</strong> Aula 3 del Pab. I</p>
 
<h2>Segundo parcial</h2>
<p><strong>Fecha:</strong>13 de Marzo, <strong>Hora:</strong>17 hs, <strong>Lugar: </strong>Aula 3 del Pab. I</p>
<h2>Primer Recuperatorio</h2>
<p><strong>Fecha:</strong> 18 de Marzo, <strong>Hora: </strong>17 hs., <strong>Lugar:</strong>Aula 5 del Pab. I
 
<h2>Segundo Recuperatorio</h2>
<p><strong>Fecha:</strong> 25 de Marzo, <strong>Hora: </strong>17 hs., <strong>Lugar: </strong>Aula Magna Pab. II
</div>
 
</div>
</body>
</html>

Esta es una de las paginas creadas en uno de los articulos anteriores, pruebela y vera que se ven iguales. La diferecia viene al colocar un CSS que modifique las propiedades. class=”nombre” nos permite colocarle propiedades css a distintos elementos HTML, de esta forma podemos diferenciarlos!

ahora pruebe y analise este codigo:

<!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" dir="ltr" lang="es-ES">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Analisis matematco I: Programa de la materia</title>
	<style>
			.centrado{ width: 700px; border: 1px solid silver; margin: 10px auto 10px auto; padding:0; }
			.header{ background: #ded4de; }
			h1{ text-align: center; margin-top: 0; padding-top: 10px;}
			.header p{ text-align: center; }
			h2{ margin: 0; padding: 5px 0 0 0; }
			.contenido{ padding: 10px 15px 10px 30px; }
			.contenido p{margin: 0; padding: 5px 0 0 0;}
	</style>
</head>
 
<body>
 
<div class="centrado">
 
<div class="header">
<h1>Analisis I - Analisis Matematico I - Matematica 1 - Analisis II (C)</h1>
<p>Curso regular primer cuatrimestre año 2009</p>
</div>
 
<div class="contenido">
<h2>Primer parcial</h2>
<p><strong>fecha:</strong> 17 de Febrero, <strong>Hora:</strong> 17 hs., <strong>Lugar:</strong> Aula 3 del Pab. I</p>
 
<h2>Segundo parcial</h2>
<p><strong>Fecha:</strong>13 de Marzo, <strong>Hora:</strong>17 hs, <strong>Lugar: </strong>Aula 3 del Pab. I</p>
<h2>Primer Recuperatorio</h2>
<p><strong>Fecha:</strong> 18 de Marzo, <strong>Hora: </strong>17 hs., <strong>Lugar:</strong>Aula 5 del Pab. I
 
<h2>Segundo Recuperatorio</h2>
<p><strong>Fecha:</strong> 25 de Marzo, <strong>Hora: </strong>17 hs., <strong>Lugar: </strong>Aula Magna Pab. II
</div>
 
</div>
</body>
</html>

Pues bien, hemos utilizado los elementos DIV, en un primer lugar para contener toda la pagina y centrarla y ponerle un borde gris, en segundo lugar para contener el titulo y colocarle un fondo de otro color y en tercer lugar para ponerle un margen interno al contenido de la web (padding).

Bueno, creo que con este ejemplo ya se entiende cual es la utilidad del elemento div y por lo tanto se ve que sin este elemento no hay pagina web que pueda tener un diseño complejo sin el. Asi como es importante saber que el elemento div es muy util para el diseño de webs, tambien hay que saber que no se debe abusar de el, hay que usarlo cuando es necesario, y no hace falta colocarlo en todos lados.

Es muy importante, principalmente a la hora del posicionamiento web, que se utilicen los elementos que se deben utilizar en cada caso, el orden de la web tiene que se claro, esto ayuda a que el codigo sea mucho mas legible, cuyo beneficio nos permite modificar la pagina de forma rapida en las actualizaciones y ademas en consecuencia los robots de los buscadores entenderan mas facilmente de que se trata la pagina web.

Haremos un pequeño repaso de lo los elementos html mas importantes y sus funcionalidades asi nos queda claro y luego veremos como crear una paginas web mas o menos interesante y con un nivel de dificultad un poco mas elevado que los ejemplos que habiamos visto!.

ELEMENTOS MAS UTILIZADOS

EL ELEMENTO P
Nos sirve para colocar texto en las paginas web, sin dudas es uno de os mas utilizados su sintaxis es sencilla:
<p>aca colocamos el texto, recordemos que los saltos de lineas en el codigo HTML son ignorados</p>

EL ELEMENTO H1, H2, H3, H4, H5, H6
Nos da la utilidad de ser las etiquetas para TITULOS, siempre que se escribe un titulo de algo si no estan utilizando alguna de estas etiquetas, deberian revisar su codigo. Por otro lado, mientras mas importante es el contenido del titulo, mas se debe acercar al h1 (por ejemplo el nombre de una pagina o blog) y cuanto menos importancia tenga el titulo (por ejemplo por ser un subtitulo dentro de un articulo) mas cerca del h6.

EL ELEMENTO DIV
Como vimos hace poco, es el elemento que nos permite ordenar distintas clases de elementos dentro de el y asi poder dividir partes de la pagina, logrando la distribucion de elementos de la forma que queremos por medio de CSS.

EL ELEMENTO A (enlaces)
Los enalces son fundamentales en las paginas web por permitirnos saltar de una pagina a otra y creo que no hace falta que diga mas nada.

EL ELEMENTO IMG (IMAGENES)
Hoy en dia una web que posee solo texto y colores simples de fondos es practicamente algo horrible y fuera de moda, por lo que las imagenes como elemento multimedia de la web es algo que hoy en dia es indispensable. el elemento img tiene la siguiente sintaxis: <img src=”mi_imagen.jpg” alt=”Titulo de la imagen”/>

LOS ELEMENTOS UL, OL, LI
Es uno de los pocos elementos en html que nos permite crear viñetas o listas ordenadas por numeros y de esta forma organizar informaciones como por ejemplo instrucciones o tips.

Bueno estuve viendo que el articulo quedo muy extenso y falta mucho por explicar, por lo que decidi extender el tutor a 2 lecciones mas, una con propiedades sobre los divs y como organizar los elementos en las paginas webs y otro con varios ejemplos de estructuras web.

Nos vemos mañana con la proxima leccion!

Siguiente Lección >>

>> Indice de Contenido <<

Share
Si este post te sirvio/gusto, Entonces considera Enviar un comentario o Suscribirte a nuestro feedRSS para recibir las actualizaciones de nuesdtor sitio.

¿Que Podes seguir leyendo?