Algunas de las etiquetas mas utilizadas comúnmente son PARRAFOS <p></p>. Esta se utiliza para organizar el texto en parrafos, por ejemplo, podriamos armar dos parrafos asi: <html> <head> </head> <body> <p>Hola, este es el primer parrafo</p> <p>Hola, este es el segundo parrafo.</p> </body> </html>
NEGRITAS Para poner el texto en negrita, utilizamos la etiqueta <strong></strong>, por ejemplo <strong>Hola, esto esta en negrita</strong> O sino: <p>Hola, esto esta en <strong>negrita</strong> ( ahora, unicamente la palabra “negrita” esta en negrita )</p>
ENFASIS <em></em>, por ejemplo: <p>Hola, este texto esta en un parrafo, y esta <strong>palabra</strong> esta en negrita, y tambien le voy a dar énfasis a <em>esta palabra</em></p> todo el texto forma un parrafo, porque esta encerrado entre <p></p>, “palabra” esta en negrita porque esta encerrado entre <strong></strong>, y “ esta palabra” tiene énfasis porque esta encerrado entre <em></em>!!!
LISTA ORDENADA Tambien con HTML, podemos ordenar en lista, o sea, tipo 1, 2 , 3 ,4 , etc. La etiqueta utilizada es <li>, y todos los elementos de una lista se agrupan con <ul>, o sea, con <ul> indicamos que comienza un listado, con <li></li> colocamos cada elemento, y cuando termina la lista, cerramos con </ul>, por ejemplo, seguimos combinando todas las etiquetas aprendidas:
<p>Hola, este texto es un parrafo, y ahora <strong>esto va en negrita</strong> y aca <em>con énfasis</em>, y ahora armamos un listado:</p> <ul> <li> este es el 1er elemento, y fijense que abrimos la agrupación con UL</li> <li>este es el segundo elemento</li> <li>este el tercer elemento</li> <li>este el cuarto y ultimo, y abajo vamos a cerrar el listado con UL</li> </ul> <p>Aca abrimos otro parrafo! Y ponemos <strong>NEGRITA!</strong></p>
Cabeceras (encabezados o headers) Las cabeceras fueron creadas para representar con tamaño adecuado a los títulos o subtítulos del tema de una web en su contenido. Estos encabezados o cabeceras representan a la etiqueta con la incial de la palabra Header (cabecera) mas un número del uno al seis dependiendo de la importancia dentro de nuestro contenido. Las cabeceras son las siguientes: <h1> <h2> <h3> <h4> <h5> <h6>
Las cabeceras tomaron un rol importante en el posicionamiento web <h1> es el encabezado mas importante, por lo tanto, elije bien las palabras que se incluiran dentro de él. ( Para que se entienda bien todo, ya ahora voy a incluir la estructura completa, que habiamos visto al principio:
<html> <head> </head> <body> <h1>Este es el titulo!</h1> <p>Hola, aca estamos colocando texto en un parrafo <strong>con negrita</strong> y aca <em>con énfasis</em></p> <ul> <li>armamos un listado</li> <li>elemento 2</li> <li>ultimo elemento, y cerramos el ul</li> </ul> <h2>Un titulo menor </h2> <p>aca otro parrafito</p> </body> </html>
ESPACIOS Y LINEAS HORIZONTALES Si queremos dejar espacios de lineas para abajo sin abrir otro párrafo, utilizamos la etiqueta <br />, esta no tiene apertura y cierre, es unica, al colocar <br /> el navegador tira el contenido una linea abajo. También, esta la etiqueta <hr />, esta, lo que hace es trazar una linea horizontal en toda la pagina, vamos a verla en practica:
<html> <head> </head> <body> <h1>Este es el titulo!</h1> <p>Hola, aca estamos colocando texto en un parrafo <strong>con negrita</strong> y aca <em>con énfasis</em></p> <p>aca escribo algo, y dejo espacio abajo con br <br /><br /><br /> cada br es un espacio, ahora voy a trazar una linea horizontal <hr /> <ul> <li>armamos un listado</li> <li>elemento 2</li> <li>ultimo elemento, y cerramos el ul</li> </ul> <h2>Un titulo menor </h2> <p>aca otro parrafito </p> </body> </html>
Lista de etiquetas del HTML y XHTML estándar y obsoletas Aquí tenemos presente una lista con todas las etiquetas HTML permitidas por la W3C, estandarizadas por el XHTML 1.0 strict y también una referencia de las que ya no se deberían utilizar por una mala usabilidad y/o semántica en nuestra web.
Etiqueta HTML y Breve descripción <!-- ... --> Define un comentario oculto <!DOCTYPE> Define el tipo de documento <a> Define un enlace o hipervínculo <abbr>Explica una breviación <acronym>Explica un acrónimo <address>Provee información de contacto <applet>obsoleta.Inserta un applet <area>Define un area a enlazar dentro de un mapa de imagen <b>Define un texto en estilo negrita (bold) <base>Define la URL base de todos los links en una pagina <basefont>Obsoleta. Define el tamaño base de una fuente <bdo>Suprime el algoritmo bidireccional <big>Define un tamaño grande para una fuente <blockquote>Inserta una citación en formato de párrafo <body>Define el cuerpo del documento HTML
<br>Inserta un salto de línea <button>Define un botón de formulario <caption>Define el título para una tabla <center>obsoleta. Define el centrado de un texto <cite>Define una citación en línea <code>Define código de programación <col>Define atributos para una columna de un tabla <colgroup>Agrupa columnas en una tabla <dd>Define una definición en una lista <del>Define texto eliminado <dfn>Asigna una definición a un término <dir>obsoleta. Define una lista de directorios <div>Define un bloque de contenido <dl>Define una lista de definición <dt>Define un termino a definir en la lista <em>Define una énfasis para un texto <fieldset>Agrupa elementos en un formulario <font>Obsoleta. Define el tipo, tamaño y color de una fuente <form>Define un formulario <frame>Define una sub ventana, marco o frame
<frameset>Define un grupo de frames <h1> - <h6>Define encabezados de nivel 1 a 6 <head>Define información del documento HTML <hr>Inserta una línea horizontal separadora de contenidos <html>Define al documento HTML <i>Define un estilo cursiva o itálica a una fuente <iframe>Inserta un frame en línea <img>Inserta una imagen <input>Inserta una entrada de formulario <ins>Define un nuevo texto insertado <isindex>Obsoleta. Define una entrada de línea simple <kbd>Expresa un texto ingresado por el teclado de un usuario <label>Establece un control de elementos <legend>Define un título para <fieldset> <li>Define un ítem de una lista <link>Define información relacionada <map>Define un mapa de imagen <menu>Obsoleta. Define una lista-menú <meta>Define información del documento (metatag)
<noframes>Define un contenido alternativo para frames <noscript>Define un contenido alternativo para scripts <object>Inserta una aplicación externa <ol>Define una lista ordenada por números <optgroup>Define un grupo de opciones de una lista de selección <option>Define una opción de una lista de selección <p>Define un párrafo <param>Define un parámetro para un <object> <pre>Define un texto preformateado <q>Define una cita en una línea <s>Obsoleta. Define un texto tachado (strikethrough) <samp>Representa un texto de programas <script>Inserta un script <select>Define una lista de selección <small>Define texto de tamaño pequeño <span>Define una sección de elemento del documento <strike>Obsoleta. Define un texto tachado (strikethrough) <strong>Define una énfasis fuerte para un texto
<tfoot>Define el pie de una tabla <style>Define estilos de la CSSS <sub>Define un texto de subíndice <sup>Define un texto de super-índice <table>Define una tabla <tbody>Define el cuerpo de una tabla <td>Define una celda de una tabla <textarea>Define un área de texto libre <tfoot>Define el pie de una tabla <th>Define una celda de encabezado de una tabla <thead>Define el encabezado de una tabla <title>Define el título del documento HTML <tr>Define las filas de una tabla <tt>Define un texto de teletipo <u>Obsoleta. Define un texto subrayado (underlined) <ul>Define una lista <var>Define una variable <xmp>Obsoleto. Define un texto preformateado
Lista de atributos del HTML y XHTML estandar y obsoletas Aqui tenemos presente una lista con todos los atributos estándar para todas las etiquetas del HTML permitidas por la W3C, estandarizadas por el XHTML 1.0 strict y también una referencia de las que ya no se deberían utilizar por una mala usabilidad, accesibilidad y/o semántica en nuestra web.
Atributo, Descripción, Valor/Ejemplo Class Define una clase para uno o varios elementos en una etiqueta del HTML. Generalmente utilizado para aplicar estilos CSS (también se usa en javascript).nombre_cualquiera Ejemplo: <table class="grueso"> id Define una identificación única para un elemento en una etiqueta HTML. Generalmente utilizado para aplicar estilos CSS (también se usa en javascript).nombre_cualquiera Ejemplo: <ul id="mi_introduccion"> Style Inserta uno o varios estilos con propiedades CSS en línea para un elemento en una etiqueta HTML.propiedad:valor; Ejemplo: <div style="margin:4px;"> title Explica elemento contenido dentro de una etiqueta. El valor de title se muestra como tooltip.explicacion_cualquiera Ejemplo: <abbr title="etcetera">
dir Determina la dirección del texto que contiene la etiqueta (izquierda a derecha o derecha a izquierda).ltr | rtl Ejemplo: <bdo dir="rtl"> lang Expresa el idioma en el que esta escrito el contenido de una etiqueta.Más usados: enInglésesEspañolfrFrancésdeAlemánjaJaponészhChino (simplificado y tradicional)Ejemplo: <cite lang="en"> align Obsoleto. Define el alineamiento horizontal de un elemento contenido en una etiqueta HTML de bloque (que ocupa toda una línea). Se reemplazo por la propiedad CSS text-alignleft | right | center Ejemplo: <img align="right">
A qué le llamamos posicionamiento? Obviamente no me refiero a los buscadores como Google o Yahoo, posicionamiento en CSS consiste en ubicar los elementos HTML en la pagina, el "layout" o distribución de la pagina. Básicamente esto se logra ordenándole desde CSS a los elementos que tengan cierto tamaño y posición, además de obtener una buena organización del código HTML o XHTML. El posicionamiento con CSS nos permite control total sobre los elementos de la pagina, además con documentos muy livianos y completamente válidos ante W3C.
Los Divs Antes de comenzar con el CSS quiero exponer aqui la importancia de usar los divs, un div es basicamente un contenedor, en el podemos meter cualquier clase de contenido, con la gran ventaja de que los podemos manipular a nuestro antojo con CSS, colocarlo en cualquier parte de la pagina, de cualquier tamaño, de cualquier color, con bordes o sin ellos, con imagenes de fondo o sin ellas, a diferencia de las tablas, los divs no se dividen por dentro, pero podemos anidarlos y organizarlas casi como las tablas (en caso de ser necesario).
Esto significa que a la hora de hacer el codigo HTML, este bien organizado jerárquicamente, o sea anidar los divs segun importancia, agrupados segun sección, utilizar las etiquetas h1, h2, h3, etc para los títulos, las etiquetas <ul> y <li> para las listas, las etiquetas <p> en los parrafos, ayuda a organizar mejor el contenido, ademas de que estan ahi para eso. La mayoria se ha olvidado del uso de estas etiquetas por trabajar en entornos gráficos para diseñar, o porque solo le dan importancia a lo que se ve. Otras ventajas son que los buscadores entienden el codigo, por ejemplo google sabe que <h1>Titulo</h1> es un titulo y le da la importancia necesaria, si alguien usa Lynx para navegar, o cualquier navegador de texto, podra ver un contenido ordenado y lógico y es mucho más fácil de mantener/modificar. Un ejemplo de una estructura sencilla:
<div id="encabezado"> <h1>Titulo de la Pagina</h1> </div> <div id="menu"> <ul> <li><a href="#">Link</a></li> </ul> <div id="contenido"> <h2>Subtitulo 1 </h2>
Asi se ve el ejemplo sin estilos <p> Lorem ipsum vitae, venenatis vel, arcu. Lorem ipsum, luctus a, enim. Mauris justo. Nulla rutrum sapien nec mi. Proin dolor neque, auctor ut, pulvinar ut, mattis eu, erat.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed commodo facilisis arcu. Nunc semper. Donec in risus at tortor semper wisi est in est. Aenean lobortis, wisi ac varius malesuada, lorem est varius enim, sit amet ultrices quam risus sed quam. Maecenas euismod adipiscing diam. Sed dui tortor, pellentesque at, vehicula et, gravida vel, magna. Integer condimentum dignissim erat. </p> <h3>Sub-subtitulo</h3> <p> Praesent tincidunt. Nam quis quam at nunc pretium eleifend. Praesent ipsum Fusce viverra ante gravida quam. Vestibulum varius lacus vitae lorem. Sed malesuada. Maecenas non urna vitae metus elementum imperdiet. Donec justo enim, pulvinar ultricies, dapibus aliquam, laoreet sed, libero. Ut odio purus, ultricies in, condimentum non, tincidunt ac, odio. Nulla eget velit. Suspendisse massa. </p> <div id="footer">Copyright2005 - Derechos reservados</div> </div></div> </body> </html> Asi se ve el ejemplo sin estilos
Lo primero que haremos será centrar nuestro div "contenedor" en la ventana del navegador, y darle un tamaño específico
/*empezamos por esto, para evitar resultados extraños en distintos navegadores, y algo de estilo al texto*/ body { font-family:Georgia, "Times New Roman", Times, serif; font-size:12px; color:#666666; text-align:center; /*aqui mandamos a centrar todo el contenido*/ } y luego al div:
#contenedor { width:600px; /*ancho total de la pagina*/ border:1px solid #333333; /*encadeno los 3 atributos claves del borde en una sola linea, ahorrando codigo XD*/ background-color:#FFF8F0; margin:10px auto; /*10px arriba y abajo, y auto a los lados, para los navegadores nuevos es suficiente para centrar la pagina*/ text-align:left; /*aqui alineamos todo de nuevo a la izquierda, pero dentro del contenedor*/ }
margin:10px; /*para que no se pegue al borde*/ Bien, ya tenemos el div contenedor centrado en la pagina, ahora vamos con el "encabezado": Aquí, vemremos como funciona float. Así como suena, float nos permite "flotar" elementos hacia la izquierda o la derecha de la pagina, haciendo que los demas elementos fluyan alrededor #encabezado { margin:10px; /*para que no se pegue al borde*/ padding:10px; /*algo de relleno*/ width:224px; /*este ancho es para que cuadre con el texto*/ height:50px; /*idem*/ border:1px solid #333333; /*decoracion*/ background-color:#CC6600; /*more*/ float:left; /*lo flotamos a la izquierda*/ display:inline; /*(*)*/ }
Ahora algo de estilo para el titulo: #encabezado h1 { /*encadenamos el identificador del div, con la etiqueta par areferirnos solo al h1 dentro del div encabezado, asi no afectara otros h1 en el resto del documento.*/ font-size:18px; font-weight:bold; width:224px; border-bottom:16px solid #FFFFFF; color:#FFFFFF; margin:0; /*los h1 vienen con margen, con esto se lo quito*/ text-transform:uppercase; /*convierte todas en mayusculas*/ padding-bottom:10px; }
Seguimos con el menu: #menu { float:left; margin:10px 10px auto 0; border:1px solid #333333; width:320px; height:24px; } Y luego con la lista. las listas traen varios pre-formatos desde HTML, como las viñetas, margen, saltos de línea a cada item, padding, etc... Aqui vamos a cambiar completamente el aspecto de una lista, con sus vinculos dentro.
ul { list-style-type:none; /*con esto quitamos las viñetas*/ margin:0; /*le quitamos el margen a la lista*/ padding:0; /*y el relleno*/ } li { margin:0; /*le quito el margen al elemento de la lista*/ float:left; /*y los floto a la izquierda para eliminar el salto de linea*/ li a { display:block; /*con esto el vinculo tendra un area rectangular, asi no sera solo el texto*/ background-color:#CC3300; /*algo de color*/ color:#FFFFFF; /*mas*/ width:58px; /*defino el ancho del rectangulo del vinculo*/ padding:4px 0 5px 22px; /*sumamos el relleno al ancho y alto del rectangulo para obtener el div #menu completamente ocupado con los ítems del menú*/ text-decoration:none; /*elimino el subrayado del vínculo*/ font-weight:bold; /*decoración*/ text-transform:uppercase; /*decorare los vinculos en mayusculas*/ li a:hover { background-color:#999900; /*decoración para el evento hover (mouse encima)*/
Esto es suficiente para cambiar el aspecto de la lista, y los vinculos en el menu. Así podemos jugar con los anchos y rellenos para lograr menúes mas complejos, poniendole bordes, etc ... Ahora el contenido: #contenido { width:580px; /*el ancho mas el padding me da 600px de ancho que es loque mide la pagina */ clear:both; /*con esto nos aseguramos de que no se ponga nada a los lados*/ padding:10px; }
Algo de estilo para los titulos: contenido h2 { font-size:16px; color:#CC3300; width:246px; text-transform:uppercase; border-bottom:1px dotted #CC3300; } #contenido h3 { font-size:14px; color:#999900; border-bottom:1px dotted #999900;
Y terminamos con el footer: width:560px; /*menos porque debemos sumar el padding del div contenido*/ text-align:right; padding:10px; font-size:80%; /*mas pequeño el texto*/ font-style:italic; color:#999999; }