[HTML5] Going up, going down!

Seguimos con HTML5, retrocediendo y avanzando constantemente en nuestro código. Porque si nos dedicamos al HTML trabajamos con la verticalidad, retrocederemos mil veces para cambiar algo. Así que no nos extrañemos ni tampoco hagamos RAGE si tenemos que hacerlo.

Vamos a seguir añadiendo complementos a lo que es el esqueleto de nuestra página web, los últimos detalles de la estructura básica para poder empezar con CSS3 y los complementación visual y decorativa.

En este post vamos a añadir varias cositas interesantes.

Y entonces, ¿enlaces, imágenes?

Podemos añadir otras muchas cosas, como pueden ser los enlaces (links) o insertar imágenes. Estas sintaxis son ya algo más complejas, así que, vayamos despacio.
Para insertar un link en nuestra página web, escribiremos lo siguiente:
<a href=”www.linkrandom.com” > El nombre del link </a>

¿Y para las imágenes? Bueno, lo primero será tener previamente almacenada la imagen en una página dedicada a ello, como puede ser Imageshak.us o alguna otra. Entonces, la sintaxis sería la siguiente:
<img src=”linkdelaimagen.jpg”  />

¡Identificate, programa!

Una pequeña y rápida tip. Algunos objetos, como pueden ser secciones del code que estamos creando, pueden ser nombradas o identificadas. Simplemente, al escribir la etiqueta, no cerraremos la llave y escribiremos id=’nombre’.
Por ejemplo, si usamos <div>, que marcará una división entre contenido y contenido, y queremos nombrarla, escribiremos <div id=’secciondepresentacion’></div>, por poner un ejemplo (aunque no será visible a efectos prácticos).

Para la web que voy creando, voy a colocar uno en esta, dentro de <body>, y seguimos picando code.

<body>
   <div id='contenido'>
    <header>
    <hgroup>
        <h1> Tecno newbie! </h1>
    </hgroup>

La lista de la compra

Existen dos tipos de listados, el numerado y el sin numerar. Dos diferencias muy sutiles y útiles para nuestra página web. Para el numerado, o lista ordenada (ordered list), utilizamos la etiqueta <ol>
Y para el no numerado, lista desordenada (unordered list), utilizado <ul>
Después de elegir el tipo de lista que queremos crear, cada elemento de ella debe estar enmarcado por la etiqueta <li>

La estructura parece simple pero debemos ser cuidadosos con ello. Debería ser algo tal que así:

<p> Primer párrafo: ¡Bienvenidos! </p>
<ul> ¿Qué haremos en esta web?
    <li> Aprender HTML </li>
    <li> Aprender CSS </li>
    <li> Relatos de clase </li>
</ul>

 ¡Voy! ¡Navegando por la vida!

¡La etiqueta <nav>! La aprendí gracias a los videotutoriales de Código Facilito, ya que W3Schools se olvidó de enseñarme (maldita perra). Aunque claro, son muchísimas cosas y no puede contener todo.
<nav> es una etiqueta que puede colocarse en cualquier lugar, pero que es muy útil si es guardada dentro de <head>, y digamos que resultan como las pestañas al inicio de página, que divide nuestro sitio web en secciones. Ya sabéis, tan conocidas como: “Acerca de”, “Contacto”, “FAQs” y cosas por el estilo.

Ahora… ¿qué tal si probamos a crear unos botones de navegación? Una botonera o algo por el estilo:

<body>
   <div id='contenido'>
    <header>
    <hgroup>
        <h1> Tecno newbie! </h1>
    </hgroup>
    <nav> 
        <ul>
          <li> Inicio </li>
          <li> Blog</li>
          <li>Tutoriales </li>
          <li> Vídeos</li>
        </ul>
    </nav>

Hasta aquí por ahora, espero que fuera de ayuda y que sea fácil de entender. Intento ilustrar todo lo mejor posible y que sea claro. Las capturas salen en una calidad bastante mejorable, pero es mejor si clicais y ampliais la imagen al archivo del blog. ¡Suerte picando! El truco está en probar y experimentar, pronto llegará la tierra prometida de CSS

SeeU!

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s