1. Inicio
  2. CSS
  3. Diseño Web
  4. HTML
  5. JavaScript
  6. Miscelanea
  7. Recursos
  8. SEO
  9. Usabilidad

Aprende HTML, como cualquier otro idiomaimagen de nofrills

Aprende a hablar HTML

Como cualquier idioma, el HTML tiene reglas.

Escribo esto después de conversar con un "diseñador web" que, mientras veíamos código CSS me dijo algo así:

Esa página está mal, no están usando atributos... tu sabes, esas cosas con los michis (#)- Diseñador web X

Es hora de empezar a hablar HTML (y un poco de CSS también)

Diccionario de HTML

Etiquetas

Todos los elementos HTML tienen un par de etiquetas: de apertura y cierre.

Tomemos como ejemplo este elemento <a>enlace</a>:

Etiquetas de apertura

La etiqueta de apertura es <a> esto indica que es el comienzo del elemento.

Etiquetas de cierre

Eb este caso la etiqueta de cierre es </a>, sabemos que es una etiqueta de cierre porque tiene el /.

Contenido

El contenido es todo lo que está encerrado entre las etiquetas de apertura y cierre

elemento a

... un momento, ¿dije que todos los elementos tenían un par de etiquetas?

Pues no es cierto, casi todos los elementos tienen un par de etiquetas.

¿Elementos sin etiqueta de cierre?

Sí hay elementos sin etiquetas de cierre, un ejemplo de eso es el elemento <img>, que en HTML se representaría así:

elemento img HTML

Pero si quieres ser parte de los diseñadores que usan el genial XHTML, el elemento <img> tendría una pequeña diferencia:

elemento img XHTML

Nada del otro mundo

Y esa es la mayor diferencia en sintaxis entre HTML y XHTML.

Atributos

Un atributo es una manera de darle información extra a un elemento, por ejemplo tomemos el elemento <a>

elemento a

El atributo href indica a que página estás enlazando.

Los atributos aparecen sólo en las etiquetas de inicio y siempre se escriben de la misma manera: primero viene el nombre del atributo seguido por el signo igual (=), y luego el valor del atributo rodeado por comillas dobles (" ").

Un elemento puede tener más de un atributo, hay un par de atributos importantes que vale la pena mencionar ya que ayudan mucho para dar estilos con CSS.

Los atributos class y id.

El atributo id, sirve para identificar un elemento del resto. El id es único y no se puede usar en más de un elemento.

ejemplo de id

El atributo class sirve para relacionar elementos, es decir, un grupo de elementos que tengan algo en común.

ejemplo de class

Elementos

El elemento no es nada más que todo junto, etiqueta de inicio (incluyendo atributos) + contenido + etiqueta de cierre.

Por cuestiones prácticas a veces nos referimos a un elemento por su tag de inicio, por ejemplo al elemento <a> simplemente como <a>.

Diccionario de CSS

Sabes que cuando quieres darle estilos a un elemento vas a usar CSS, pero no sólo le puedes dar estilos a un elemento por su nombre, sino también dependiendo de sus atributos.

Por ejemplo, si quieres darle estilos al elemento <a> tu CSS se vería así:

ejemplo de estilos al elemento a

identificadores "esas cosa con los michis"

Ya sabemos como darle un atributo id a un elemento, ahora en CSS para referirnos a ese id específico usamos el signo #, por ejemplo imagina que tienes un elemento con el id="footer", si quieres darle estilos específicos a ese elemento, por ejemplo ancho y alto, usarías:

ejemplo de estilos al elemento a

Clases

Las clases son tan importantes como los id, en CSS puedes usarlas para darle estilos a un grupo determinado de elementos.

Creelo o no, hay diseñadores que saben que los elementos id son únicos, entonces crean 20 diferentes y le dan el mismo estilo a todos.

Cuando lo más fácil (y lógico) esa darle a todos ellos la misma clase y luego usar sólo un poquito de CSS.

mal uso de id

buen uso de class

Pseudo clases

Esto es un poco diferente, una pseudo clase funciona como una clase, pero no hay que definirla como atributo en el HTML, tomemos por ejemplo la pseudo clase hover.

La pseudo clase hover define qué estilos darle a un elemento cuando el mouse se posa sobre él, recuerda que esto no se define en el HTML, sólo en el CSS

Yo se que suena raro, pero la verdad es que no es complicado, miren este ejemplo:

pseudoclase

Selectores

Un selector es una sentencia de CSS que le da un estilo a una propiedad.

slectores

Reglas

Una regla es un grupo de selectores que se aplican a un elemento o grupo de elementos:

reglas

Existen varias formas de hacer reglas en CSS, pero eso ya es un tema aparte, con esto ya puedes decir que HTML y CSS es tu segundo idioma, en tu próxima reunión podrás impresionar a tus amigos hablando de atributos, elementos, pseudo clases y más!.

Etiquetas:

Comentarios

deja un comentario

  1. Avatar de Laren Laren

    No seria más útil colocar el logo dentro de <h1>, al menos así tu web se vería bien si tienes desactivado el css(y también en lectores de pantalla).
    --
    PD:Parece que seré el que más comente en tu blog, pero está interesante el contenido que brindas. Si existen más como el tuyo(dentro de PERÚ) porfa házmelo saber.

  2. Avatar de Germán Germán

    Laren, si te refieres a mi página el logo sí esta definido con <h1> pero sólo en la página principal, para los artículos defino como <h1> el título del artículo y el logo queda como <h2>.

    Hago esto por 2 razones:

    1.- En la página principal obviamente lo más importante es el título del blog.

    2.- En un post en particular lo más importante es el título de artículo.

    En mi opinión esa es la forma en que debería estar estructurado.
    ¿Por que darle más importancia al título del blog que al título del artículo?

  3. Avatar de Laren Laren

    Bueno me referia al post. Pero ya que lo mencionas creo que el logo siempre debe ser colocado dentro de <h1>, así coloques el post más completo del mundo. Lo que vale más es tu nombre, tu marca.
    --
    El significado de los encabezados según acabo de leer en W3 es:
    ///
    -H2 es subseccion de H1
    -H3 es subseccion de H2
    -H4 es subseccion de H3
    -etc
    ///
    En este sentido tu logo no es subseccion de ningun artículo que pongas, al contrario es el que engloba a todos.
    ///
    "Imagina que alguien que tiene los estilos desactivados en su navegador llega a tu blog desde un articulo(sin pasarse por la pag principal-suele suceder casi siempre). Que es lo que ve más grande? el nombre del articulo y luego el de tu logo. Habrá confusion en ese sentido."

  4. Avatar de Germán Germán

    Laren, aquí estoy completamente en desacuerdo contigo, para mi lo más importante en un artículo es su título y no el título del blog.
    En este caso la marca es secundaria.

    Me parece super chevere que esta discusión te lleve a investigar en el W3C.

    Aquí cabe mencionar que ese <h1> está dentro de un <div> lo cual lo describe como una sección.
    El h2 de mi logo está fuera de ese <div>, por eso no es una sub sección del artículo, sino una referencia en la página (igual que todo el contenido del sidebar).

    No veo la confusión a la que te refieres. si alguien llega a un artículo específico (con los estilos desactivados) lo que esperaría ver más grande es el título del artículo.

  5. Avatar de Laren Laren

    Hummm...veamoslo con ejemplos:
    -
    Este articulo se llama "Aprendiendo a hablar HTML" y ESTA DENTRO DE tu blog que se llama "Aprendiendo Web".
    -
    Si vas a mostrar los dos elementos(tu logo y el nombre del articulo), cual pondras dentro de?, si sabes que "Aprendiendo a hablar HTML" es solo el nombre del artículo, y como él pueden haber más. En cambio como tu logo no puede haber ni uno más.
    -
    Al final no hay regla estricta para esto pero hay que recordad para que sirven los encabezados(jerarquía).

  6. Avatar de Germán Germán

    Exacto, jerarquía, en el caso de un artículo lo más importante es el título del mismo y NO el título del blog.

    Veámoslo con el mismo ejemplo:

    Cómo bien lo dices el título del artículo es "Aprendiendo a hablar HTML" y de eso mismo se trata esta página en particular (por eso tiene una dirección específica).

    En el caso de un blog, cada página es un artículo en particular (que incluye la información del artículo y los comentarios), por eso es que uso esta estructura, que es la que me parece más adecuada y semántica para este caso.

  7. Avatar de Laren Laren

    Segun lo que conversamos ayer en GTALK...creo que al final uno puede enrumbarse por dos caminos. Usar los encabezados para:
    -------------------------
    Jerarquía o Importancia
    -------------------------
    En "Jerarquia", se respeta el orden desde el elemento mayor hasta el menor. Algo como [Nombre del libro > seccion > contenido > referencias].
    -
    Y en "Importancia", el nombre del artículo va primero ya que define el tema de la pagina actual, mientras el nombre del blog queda en segundo plano.
    -
    Cual usar?...Depende de cada uno. Vean sus pro y sus contras,

  8. Avatar de Germán Germán

    Cualquiera de las dos formas está bien, eso ya es cuestión de preferencias, tienes razón, al final depende de cada uno.

  9. Avatar de Laura Laura

    Muy Bueno ^^
    Gracias!

  10. Avatar de SURIEL OMAR SURIEL OMAR

    esta es mi segunda clase de html en una escuela de diseño o tecnico en web site designer en LIma, aparentemente es buena, confio en el profe y pues desde luego que estare en tu pagina de hoy en adelante mucho mas tiempo

    un saludo

  11. Avatar de Lucila Lucila

    hola si mirad no habéis puesto como se empieza una pagina web y eso es lo primero antes que los colores y poner una imagen por que es con lo que tu quieres hablar y el ordenador sera listo pero no para tanto no sabe como quieres hablar.
    <html/>
    <body/>
    <title> "pagina web"<title/>
    no es ese tipo de cosas tendrías que empezar desde 0 por que hay gente que no entiende de esto
    es un consejo que te doy

  12. Avatar de jose jose

    Gracias por la informacion, hace poco que me entere que el tamaño del titulo era importante en el seo, y estaba un poco perdido, esto ha aclarado mis dudas.

Deja un comentario

Algunos recursos para Diseñadores Web

Firebug
Genial extensión de Firefox que permite ver y editar HTML y CSS de cualquier página, entre otras cosas.
Web Developer Toolbar
Extensión de Firefox, agrega una barra de menu con muchas herramientas utiles para diseño y desarrollo web.
YSlow
Complemento para Firebug creado por Yahoo, da estadísticas de la velocidad de carga de la página así como sugerencias para mejorarla (requiere Firebug).
W3C Markup Validation Service
Valida tu HTML o XHTML, una herramienta indispensable.

Entra a la página de recursos para diseñadores web y mira la lista completa

¿Quien escribe Aprendiendo Web?

Germán MartínezHola, soy Germán Martínez, diseñador web y fundador de PreZentit.com, la primera aplicación web 2.0 creada en Perú.

La idea de Aprendiendo Web, es ser una fuente de información en español de estándares y buenas prácticas, así como de las últimas tendencias en diseño web.

Me apasiona el (X)HTML, CSS, SEO y todo lo que tenga que ver con diseño y desarrollo web.

-12.126668, -77.029910