viernes, 17 de mayo de 2013

Comentarios en HTML


Una práctica muy importante en cualquier lenguaje de programación es el de comentar nuestro código, ya que al transcurrir el tiempo, ni nosotros mismos sabemos lo que hicimos (creame, pasa muy seguido).

Los comentarios no son tomados en cuenta con por los navegadores: unicamente sirven para los programadores. Sin embargo, los comentarios en HTML si los puede ver dentro del código. Para hacer comentarios necesitamos las llaves <!-- y -->

Las listas de definición


El uso de las listas de difinición están cayendo en desuso. El funcionamiento de las listas de definición es similar al de un diccionario, por un lado el término y por el otro la definición de ese término o palabra. La etiqueta <dl> crea la lista de definición y las etiquetas <dt> y <dd> definen respectivamente el término y la descripción de cada elemento de la lista.

<dl>
  <dt>Byte</dt>
  <dd>Conjunto de 8 bits con significado</dd>
</dl> 

La etiqueta p de párrafo



La etiqueta <p> se utiliza para representar un párrafo. La etiqueta p es soportada por todos los navegadores (gracias a Dios).


Los hipervínculos


Dentro de una página web, los hipervínculos son las palabras, párrafos o imágenes que al darles click, te llevarán a otro lugar, ya sea a otra página, o a una sección en específico dentro de la misma página; desempeñan una función muy útil, por ello saber cómo aprender a programar hipervínculos a la hora de crear un sitio web es muy importante. 

Otra de las características que tienen los hipervínculos es que al pasar el cursor sobre ellos, el ícono del cursor cambia y se convierte en una mano.

Las etiquetas de encabezado


La etiqueta de encabezado H1 y sus hermanas menores son una de las herramientas más potentes con las que contamos a nivel de SEO para decirle a los buscadores de qué va el contenido de nuestra página web. Sin embargo, y aunque su concepto es en origen sencillo, darles un uso adecuado no es algo conocido por todos.

Las etiquetas de encabezados han tenido una importancia vital en el posicionamiento en buscadores desde sus orígenes, y con pequeñas variaciones en el peso de su influencia se han ido manteniendo en el tiempo como algo que definitivamente hay que cuidar, desde la fase de maquetación del diseño web hasta la creación de contenidos para un portal en funcionamiento. Estas nociones básicas deben ser pues conocidas por diseñadores, programadores y personas encargadas de la redacción de texto para web.

 La etiqueta <strong>


Esta etiqueta se usa para reforzar el texto en html.

El caso es que prácticamente todos los navegadores la interpretan de la misma forma poniendo el texto que las engloba en negrita, ¿entonces cual uso?.
Hay muchos webmaster que se inclinan por la etiqueta <strong> porque afirman que es mejor para el posicionamiento ya que google las interpreta como palabras clave, otros nos comentan que además aportan semántica al contenido a través de CSS y por tanto mejor accesibilidad.

Anclas: navegar dentro del documento


Sirve para definir posiciones dentro de un documento y se puede usar como destino de hiperenlaces. Para crear un ancla (anchor) se procede de la siguiente manera:

<A NAME="nombre_etiqueta">Texto del elemento ancla</A>

Visualmente est elemento no tiene niun efecto, pero si lo tiene en forma interactiva con el usuario. Para hacer referencia al ancla o posición se hace el siguiente tipo de hiperenlace:

<A HREF="#nombre_etiqueta">Texto del hiperenlace</A>

De esta manera accederemos a la posición donde hayamos puesto el ancla Por ejemplo al final de este documento hemos puesto la siguiente ancla:

<a name="final">Este es el final del documento!!</a>

Y para acceder a esa posición usamos el siguiente hipernlace:

<A HREF="#final">Vamos al final del documento</A>

La etiqueta img


La etiqueta <IMG> te servirá para situar imágenes en una página. Es una etiqueta "verdadera", pues no tiene etiqueta de cierre:

La etiqueta <IMG> requiere un origen de datos obligatorio dado por el atributo SRC=. Indica la imagen en cuestión:

<IMG SRC="imagen.gif">

Tan sólo el código anterior es necesario para añadir una imagen a tu página, mostrando la imagen situada en el mismo directorio del documento HTML.

Tablas


Las tablas son un poderosa herramienta a la hora de mostrar y relacionar cierto tipo de información. Aún cuando muchos sitios son construidos (por su naturaleza) sin usar una simple tabla, existen algunas ocasiones en que el valor de las tablas se vuelve escencial.
En las próximas líneas intentaremos cubrir todas las características de las tablas para estar listos para utilizarlas cuando se necesite.
 

Otras etiquetas


Dentro de HTML tendremos otras etiquetas, por ejemplo:

<br> Para un salto de linea
<hr> Dibuja una línea
<adress> una dirección física

Etcétera

La etiqueta div


La etiqueta <div> se emplea para definir un bloque de contenido o sección de la página, para poder aplicarle diferentes estilos e incluso para realizar operaciones sobre ese bloque específico.
El uso de la etiqueta div es sencillo. Observemos este ejemplo:
<div>
<h1>Índice</h1>
Página principal<br />
Material multimedia<br />
Autores<br />
</div>
Hemos empleado la etiqueta para crear un bloque, que hará las veces de índice de contenidos. Visualmente la etiqueta no provoca ningún cambio, pero en la estructura interna del documento hemos aplicado una división muy importante. La figura muestra el texto del ejemplo; no hay ninguna diferencia visible.

Estilos en cascada


Las hojas de estilo en cascada (Cascading Style Sheets, o sus siglas CSS) hacen referencia a un lenguaje de hojas de estilos usado para describir la presentación semántica (el aspecto y formato) de un documento escrito en lenguaje de marcas. Su aplicación más común es dar estilo a páginas webs escritas en lenguaje HTML y XHTML, pero también puede ser aplicado a cualquier tipo de documentos XML, incluyendo SVG y XUL.

La información de estilo puede ser adjuntada como un documento separado o en el mismo documento HTML. En este último caso podrían definirse estilos generales en la cabecera del documento o en cada etiqueta particular mediante el atributo "<style>".

Colores en estilos en cascada


CSS funciona a base de reglas, es decir, declaraciones sobre el estilo de uno o más elementos. Las hojas de estilo están compuestas por una o más de esas reglas aplicadas a un documento HTML o XML. La regla tiene dos partes: un selector y la declaración. A su vez la declaración está compuesta por una propiedad y el valor que se le asigne.

h1 {color: red;}

h1 es el selector
{color: red;} es la declaración

El selector funciona como enlace entre el documento y el estilo, especificando los elementos que se van a ver afectados por esa declaración. La declaración es la parte de la regla que establece cuál será el efecto. En el ejemplo anterior, el selector h1 indica que todos los elementos h1 se verán afectados por la declaración donde se establece que la propiedad color va a tener el valor red (rojo) para todos los elementos h1 del documento o documentos que estén vinculados a esa hoja de estilos.

Manejo de fuentes con CSS


Los css nos da la flexibilidad de poder darle color, tamaño, grueso y otras propiedades que trataremos de explicarla las más importantes. Antes de la versión 5 de HTML, no se podía manejar más que las fuentes que el usuario tuviera instaladas en su computadora. Era por esto que utilizábamos al menos tres tipos de fuente por si una fallaba, el navegador buscaba la segunda, y asi, hasta encontrar una de las fuentes más básicas. Algunos de los conjuntos de fuente más comunes son:

Arial, Helvetica, sans-serif
“Times New Roman”, Times, serif
“Courier New”, Courier, monospace
Georgia, “Times New Roman”, Times, serif
Verdana, Arial, Helvetica, sans-serif
Geneva, Arial, Helvetica, sans-serif


Si el nombre de la fuente contenia espacios, es necesario utilizar las comillas, por ejemplo "Times New Roman"

Modificar los hipervínculos con estilos en cascada


Cambiar el formato de los hipervínculos o "links" por medio de los estilos en cascada es fundamental en el desarrollo y diseño de páginas we. Podemos modificar los colores, el background o cambiar el clásico color azul, sin embargo, siempre es necesario que el usuario sepa cuál frase, palabra o imagen contiene un hipervínculo.

 Lugar donde se pueden escribir los estilos en cascada


La ubicación de nuestras reglas de estilo es muy importante, porque depende del órden las reglas se irán ejecutando. Podemos localizar nuestro código en ohas externas, propiamente conocidas como stylesheets, podemos escribir el código dentro de la etiqueta <style>, dentro de la página html o incluso dentro de la etiqueta, como un atributo de la misma, aunque esta última ubicación no se recomienda, porque se pierde toda la versatilidad que nos ofrecen los estilos en cascada.

La prioridad dependerá de la cercania de la regla al elemento HTML. De ahí su nombre de estilos en cascada.

Selectores, unidades en CSS


El manejo de selectores es una de las habilidades más importantes cuando se intenta utilizar los estilos en cascada en forma profesional. hasta este punto hemos utilizado las reglas de cascada que inician con un selector. Este puede ser el nombre de una etiqueta, por ejemplo, h1, de una clase, por ejemplo .rojo o de una división #encabezado.

Cuando utilizamos por selector un nombre de etiqueta, todas las etiquetas de esa clase srán modificadas. En cambio, los identificadores sólo podemos tener uno en todo el documennto. Las clases pueden aplicarse varias veces, pero hay que aplicarlas en forma manual.

Podemos aplicar a varios selectores las mismas reglas de estilo por medio de las comas, por ejemplo:

h1, h2, h3, h4{ color:white; }

Selectores compuestos


Muchas veces los selectores simples, como la etiqueta, la clase y los identificadores no son suficientes para realizar el diseño de nuestra página web, por lo que nos será importante hacer "excepciones". En un buen diseño web, las excepciones no deberán de ser la regla. Para ello necesitamos escribir los selectores principales a la izquierda y los particulares a la derecha, por ejemplo:

#menu a { color:red; }

Por lo general leeremos estos selectores de derecha a izquierda, es decir: "todas las etiquetas 'a' que se encuentren dentro de la división 'menu' su texto será de color rojo.

Valores y unidades en CSS


El manejo de unidades es fundamental dentro del diseño y desarrollo de nuestra página web. En HTML en general y en CSS en particular, tendremos dos tipos de unidades: las flexibles y las fijas. Siempre será mejor utilizar las primeras, por ejemplo el pixel (px) la em (que es la medida de la letra 'm' de la fuente base).

La medida em no tiene nada que ver con la etiqueta de HTML <em> que modifica los textos a itálicas. Por lo general esta medida es la adecuada para manejar los tamaños de los textos y sus atributos como el padding y el margen.

Validar nuestros CSS


Una parte importante, antes de lanzar nuestra página web al mundo, es validrla, es decir, verificar que todas sus etiquetas y estilos en cascada sean compatibles con los navegadores en uso. Para ello contamos con magníficos validadores. El más popular es el de la W3C. No se preocupe si encuentra errores o mensajes de advertencia, pues es muy dificil que una página que no sea tribial pueda pasar esta validación sin algún mensaje.

El modelo de caja

Los márgenes


El modelo de caja es uno de los conceptos más importantes al momento de formatear nuestra página, y puede resultar un verdadero dolor de cabeza si no poseemos los conocimientos adecuados para ello. Asi que resulta fundamental conocer bien los términos de margen, padding, border y área de contenido, para no pasar noches en vela porque nuestro modelo se "mueve", y culpar de ellos al HTML y a los CSS.

Otro problema es que algunos navegadores no "hablan" muy bien CSS y hacen las cosas algo diferentes, y en el caso de Internet Explorer, puede hacer las cosas muy diferentes, si de CSS se trata.

Los bordes


Entre el margen y el padding se extiende el borde o border. Este amigo puede ser neutral, si es que su ancho es igual a cero, o puede cambiar dependiend de su ubucación, También para él utilizaremos el nemónico TRBL (top, right, bottom y left), que nos recuerda cómo se toman los valores dentro de la sentencia correspondiente. Como veremos, es posible definir un ancho, un color y un estilo al borde de nuestra caja, es decir, tendremos doce posibles comando tomando los cuatro bordes con tres características (ancho, color y estilo).

La propiedad margin:auto


La propiedad auto nos permitirá centrar divisiones dentro de sus contenedores. Desaformtunadamente no contamos con una instrucción que centre enforma automática o que flote una división al centro. Con auto en el margen a izquierda y derecha, podemos hacer que una división flote dentro de su contenedor, pero necesitamos definir un ancho (width) para ello, ya sea en pixeles o porcentaje.

El color de fondo: background


Una propiedad fundamental para modificar el color de nuestra página web, asi como su diseño, será la propiedad background, la cual la tendrá cualquier etiqueta que posea el modelo de caja. Podremos cambiar el color o colocar una imagen que se repita o se adapte a su contenido.

El color de fondo del área se extiende hasta debajo de la línea del borde. Asi, si la línea del borde muestra espacios, por ejemplo, dashed, dotted o double el color de fondo del elemento se muestra a través de ellos.

Una pieza importantísima para el desarrollo de una composición o maquetado de una página web es comprender cómo se acomodan las cajas, es decir, su flujo natural, y cómo podemos cambiar éste. En este video iniciaremos por comprender cómo es el flujo "natural" de las cajas para después poder modificarlos.

Para realizar layouts más interesantes, necesitaremos que las divisiones comiencen a flotar. Para ello utilizaremos la propiedad float con la mayoría de sus parámetros.

En CSS casi siempre hay varias maneras de resolver un mismo problema y esto se aplica al diseño de las páginas o maquetación. Todas las posibles soluciones tienen ventajas y desventajas. Asi que mientras no exista una varita mágica que solucione todos nuestros problemas, revisaremos las diferentes formas de hacer un buen layout de una página web.

No hay comentarios:

Publicar un comentario