imagen 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
... 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í:
Pero si quieres ser parte de los diseñadores que usan el genial XHTML, el elemento <img> tendría una pequeña diferencia:
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>
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.
El atributo class sirve para relacionar elementos, es decir, un grupo de elementos que tengan algo en común.
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í:
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:
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.
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:
Selectores
Un selector es una sentencia de CSS que le da un estilo a una propiedad.
Reglas
Una regla es un grupo de selectores que se aplican a un elemento o grupo de elementos:
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:
si te gustó esta entrada, tal vez quieras suscribirte via RSS
Hola, soy
Comentarios
deja un comentario
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.
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?
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."
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.
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).
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.
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,
Cualquiera de las dos formas está bien, eso ya es cuestión de preferencias, tienes razón, al final depende de cada uno.
Muy Bueno ^^
Gracias!
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
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
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