Nociones básicas de HTML

Hemos visto que el html es un lenguaje de marcado, en el cual podemos “etiquetar” nuestra información en distintos trozos, permitiéndonos luego, asignarle una apariencia a los elementos encerrados en una etiqueta.

Un ejemplo (abstracto y ficticio) seria el siguiente:

“Este es un párrafo ordinario, solo esto se ve <rojo>rojo.</rojo>El resto… se ve normal.”

En un ejemplo de este tipo, las características que conforman la apariencia del texto marcado por la etiqueta “rojo” se definiría en un documento a parte (vinculado al documento html) en el que las propiedades se enumerarían de la siguiente manera:
rojo{
}

La etiqueta “rojo” es una etiqueta inventada, pero para estructurar la información en html, y hacer que nuestros navegadores “entiendan la pagina” html proporciona el siguiente listado de etiquetas:
http://www.w3schools.com/tags/

De todas ellas, hemos visto que algunas siempre están presente en un documento HTML
HTML (Solo ha de ponerse una, define el documento)

HEAD (Solo ha de ponerse una, define la parte del documento destinada a entenderse con el navegador)
TITLE (Solo ha de ponerse una,  define el titulo de la pagina)

BODY (Solo ha de ponerse una,  define la parte de la pagina que va a enseñarse en el navegador)

HEADER (Solo ha de ponerse una,  define la cabecera pagina, donde los diseñadores normalmente ponemos el logo)

MAIN, ARTICLE (Me quedo con main, pero según que fuente leas no lo deja muy claro… se usa para definir la parte de contenido de la pagina)
ASIDE (Define un área lateral)
NAV, MENU, MENUITEM (Menú de navegación)
SECTION, DIV; SPAN (contenedores genéricos)
H1,H2,H3,P (Define y pre-formatea el texto)

FOOTER (Solo ha de ponerse uno, define el pie de la página)

A todas las etiquetas les podemos asignar una apariencia, a través del nombre de la etiqueta. por ej:

section{
/* aquí definiremos como se verán todos los contenedores se llamen <section> */
}

poniéndoles un identificador (que en teoría debería ser único, y al que llamaremos empezando por #)

<section id=”slider”>

#slider{
/* aquí definiremos como se verán todos los contenedores que tengan el ID “slider” */
}

y aplicándoles una clase (Que está pensada para usarse mas de una vez y a la que llamaremos utilizando un punto “.”)

<li>opción 1</li>
<li>opción 2</li>

.menu_secunadario{
   /* aquí definiremos como se verán todos los contenedores que tengan la clase “menu_secunadario” */
}
También podremos definir la apariencia de una etiqueta utilizando “rutas”, es decir: la combinación de identificadores + nombres de etiqueta + clases, por ejemplo:
sidebar a{
   /* definirá solo los enlaces que están en la barra lateral */

}

.menu_secunadario a {
   /* definirá solo los enlaces que están dentro de un contenedor etiquetado como menu_secunadario */

}
a.menu_secunadario {
/* Nótese la ausencia de espacio entre la a y la clase. esto definirá solo los enlaces que tengan la clase menu_secunadario */
}

Como “nota al pie” una ruta nunca debería terminar en un identificador, ya que el identificador por concepto es único.