INICIO

EJEMPLO PARA APRENDER HTML

Después de haber visto la introducción al HTML, ya sé que sabes manejar el editor de código y que sabes cómo funciona la interpretación del navegador web.

Has aprendido un poco de vocabulario básico.

Y, tienes que admitirlo, ya eres un friki de los buenos.

Ahora toca seguir aprendiendo, y para eso vamos a continuar con la web que estábamos haciendo en el capítulo anterior.

Aprender HTML avanzado

<html>
<head>
<title>Cocodrilolandia</title>
<meta charset="utf-8">
</head>
<body>
    <div>
        <h1>Mi primera web</h1>
        <h2>Bienvenidos a Cocodrilolandia</h2>
        <h3>Una web inteligentemente estúpida</h3>
        <p>Ejemplo para <strong>aprender HTML</strong></p>
        <p>Desarrollo web en <strong><i>Salamarkesa.com</i></strong></p>
    </div>
    <div>
        <h1>Puedo usar todas las palabras que quiera</h1>
        <h6>Y hacer lo que me dé la gana con ellas</h6>
        <p>Si quieres volar, <a href="http://salamarkesa.com">haz clic aquí</a>.</p>
        <p>Si quieres comer algo bueno, cómete un aguacate</p>
        <p>
            <h5>Aunque también puedes elegir una de estas opciones:</h5>
            <ul>
                <li>Calamares en salsa de sapo verde</li>
                <li>Chispitas de carne a la brasa con cebollas</li>
                <li>Ensalada de verduras fritas con curry del bueno</li>
                <li>Colorín colorado de salmón ahumado</li>
            </ul>
        </p>
    </div>
    <div>
    Gracias por tu atención, señorita.
    </div>
</body>
</html>

Puedes copiarlo y pegarlo en tu proyecto.

Cuando actualices el renderizado en tu navegador, verás que obtienes una cosa muy similar a esta:

ejemplo-html

Ya habrás descubierto lo que hace cada etiqueta.

Pero como siempre puede quedar alguna dudilla, te voy a hacer un breve resumen de lo que hemos debido deducir.

<h3>: Encabezados

Vaya, si había más que primario y secundario.

Sí, puedes usar encabezados hasta el <h6>

Cuanto más grande es el número, más chico es el texto.

Qué paradoja tan simple.

<div>: División

Una división sirve para dividir partes.

Aparentemente no estás viendo que se divida nada, pero ya verás cuando empecemos a meter colores y formas.

Serán muy útiles estas divisiones.

Y te vas a obsesionar con ellas.

Ya verás.

Incluso hay una enfermedad en el mundillo de los desarrolladores.

Se llama divitis: sobreuso de divisiones.

<a>: Enlaces

¿Una a para representar enlaces?

Si, porque los enlaces te llevan a algún sitio.

¿Y por qué tiene ese href dentro?

El href es un atributo.

Los atributos son trozos de información extra que se meten en la apertura de la etiqueta.

No se muestran en la pantalla directamente, pero sirven para aportar información extra sobre la etiqueta.

En este caso, el href contiene el destino del enlace.

Cuando el usuario hace clic, el navegador sabe que tiene que cargar la página que indica el atributo.

En este caso es http://salamarkesa.com.

Los atributos siempre tienen esta forma:

<etiqueta atributo="loquesea" otro="otracosa">contenido visible</etiqueta>

Facilísimo.

Ah, sí.

Puede haber muchos atributos dentro de la misma etiqueta.

<ul>: Listas

Pues muchas veces querrás mostrar una lista.

Para eso está la etiqueta <ul>.

La etiqueta <ul> se usa para crear el paquete completo.

La caja contenedora de los elementos de la lista.

Dentro de esa caja, usarás la etiqueta <li> para cada elemento listado.

Para que quede claro:

<ul>
   <li>Azul</li>
   <li>Naranja</li>
   <li>Rosa</li>
   <li>Atún</li>
</ul>

Fácil.

Espacios en blanco

¿Qué espacios en blanco?

Pues esos, la separación de cada línea.

¿Qué?

Sí. Que unas líneas están más a la derecha que otras.

Ah! ¡La indentación!

Bueno, pues eso lo estoy haciendo para tener el código bien organziado y limpio.

Si todo estuviese pegado sería más difícil de leer y de mantener, ¿no?

<h3>Una web inteligentemente estúpida</h3>
<p>Ejemplo para <strong>aprender HTML</strong></p>
<p>Desarrollo web en <strong><i>Salamarkesa.com</i></strong></p>
</div>
<div>
<h1>Puedo usar todas las palabras que quiera</h1>
<h6>Y hacer lo que me dé la gana con ellas</h6>
<p>Si quieres volar, <a href="http://salamarkesa.com">haz clic aquí</a>.</p>
<p>Si quieres comer algo bueno, cómete un aguacate</p>
<p>
<h5>Aunque también puedes elegir una de estas opciones:</h5>
<ul>
<li>Calamares en salsa de sapo verde</li>
<li>Chispitas de carne a la brasa con cebollas</li>
<li>Ensalada de verduras fritas con curry del bueno</li>
<li>Colorín colorado de salmón ahumado</li>

Ah sí. Verdad. Estaba más bonito con la indentación.

Bueno, pues eso se hace con la tecla de tabulador (Tab ↹) de tu teclado.

Prueba a ver si lo consigues.

La indentación se usa para saber qué cosas están dentro de qué cosas.

¿Y qué pasa si quiero meter una imagen?

Pues la metes.

No pasa nada.

<img src="http://salamarkesa.com/wp-content/uploads/2016/06/imagen-prestada.jpg" alt="Descripción">

Y ya está.

Esta es de esas etiquetas que hemos dicho que no se cierran.

Ella se cierra sola.

Tiene dos atributos que son importantes.

¿Y los colorines?

Ahora que tienes una web más o menos básica, supongo que te estarás preguntando cómo meter colores y sombras y rectángulos y esquinas redondas y uuuh!

Pues sí, se puede hacer. Es lo que haremos en la próxima lección.

Capítulo siguiente: Introducción a los colorines