UD.2 Programamos con HTML

Los tres lenguajes básicos utilizados para programar una web son:

- HTML: para escribir contenido

- CSS: estiliza el contenido generado

- JAVASCRIPT: lo convierte en interactivo

fundamentos de html

Iniciarse en el mundo de la programación web es una decisión que cada vez más personas toman, conscientes de las oportunidades profesionales que supone contar con este tipo de conocimientos tan valorados por las empresas. Comprender el significado y la composición de las etiquetas HTML es uno de los primeros pasos que cualquier profesional que aspire a convertirse en desarrollador o ingeniero web debe dar.

El hipertexto (HTML) es un lenguaje informático que forma la mayoría de las páginas web y plataformas online.

En la actualidad existen 142 etiquetas HTML disponibles que permiten la creación de varios elementos. A pesar de que algunos ordenadores nuevos ya no admiten algunas de estas, es importante tener constancia de la existencia de ellas.

Sin embargo, el HTML ha ido evolucionando los últimos años. Para que nos hagamos una idea, la primera versión contaba solamente con 18 etiquetas. Desde entonces, cada nueva versión ha traído nuevas etiquetas y atributos. La actualización más importante fue la introducción en 2014 del HTML5.

ACTIVIDAD 1

Busca cualquier cosa en Wikipedia y, una vez estés dentro de la página, haz clic con el botón derecho y selecciona Ver código fuente de la página. Dedica algo de tiempo a investigarlo y detecta etiquetas como <head>, <title>, <body> o <ul>. ¿Qué crees que significan?

ACTIVIDAD 2

A lo largo de los siguientes apartados vamos a trabajar con muchas etiquetas diferentes que deberás recordar para programar tu propia página web utilizando HTML. A medida que vamos avanzando en la unidad, deberás tomar tus propios apuntes del significado de cada etiqueta.

Te recomiendo que ordenes las etiquetas por orden alfabético para que te sea más fácil localizarlas. Un ejemplo sería:

<title> : Esta etiqueta es la que el navegador utiliza para poner el título de la página. Esto será lo que aparece en la pestaña superior del navegador, en los marcadores o en los resultados de las búsquedas.

Classroom

estructura básica

Para comenzar, primero aprenderemos cuál es la estructura básica de una página HTML. Fíjate en la imagen de la izquierda y vamos a ir analizando cada etiqueta de manera conjunta.

1. DOCTYPE html

nos indica que la página web ha sido escrita en un HTML más “moderno”

2. <html>

Html es un lenguaje que utiliza etiquetas. Pero, ¿qué es una etiqueta?

Las etiquetas se escriben entre los símbolos “< >”

La primera etiqueta del código será siempre <html> y la última (fila 11), será siempre </html>. Como podemos ver, muchas de las etiquetas del lenguaje de HTML se escriben por parejas, indicando el inicio y el final.

3. <head>

Esta etiqueta indica el encabezado

4. <meta charset = … >

La etiqueta tipo “meta” sirve para indicar al ordenador cómo mostrar la página. No es lo mismo mostrar los caracteres comunes de nuestro idioma que los del árabe o chino. En principio, nosotros trabajaremos con< meta charset = “utf -8”>.

5. <title>

Esta etiqueta es la que el navegador utiliza para poner el título de la página. Esto será lo que aparece en la pestaña superior del navegador, en los marcadores o en los resultados de las búsquedas.

6. </head>

Cerramos la etiqueta del encabezado

7. <body>

Entre las etiquetas <body> y </body> se encuentra el contenido de la página.

ACTIVIDAD 3

Haz clic sobre el botón que aparece a continuación y crea tu estructura para comenzar a diseñar tu página en HTML. Ahora mismo, en el visualizador no verás nada porque tu página no tiene contenidos pero a medida que vayamos avanzando en la unidad los incorporaremos.

Editor HTML

PÁRRAFOS

Para poder organizar mejor el contenido, es común utilizar diferentes tamaños de textos, haciendo uso de las etiquetas h1, h2, h3, h4, h5 y h6. Por último, para introducir un párrafo de contenido, utilizaremos las etiquetas <p> y </p> tal y como puedes ver en el ejemplo siguiente:

Vamos a probar ahora a escribir un famoso poema de Antonio Machado:

¿Qué ocurre? ¿Por qué no me respeta los espacios?

La realidad es que los navegadores ignoran los espacios en blanco y los saltos de línea, por lo que si queremos que el aspecto sea el de un poema, será necesario utilizar las etiquetas de <br> al final de cada línea.

ACTIVIDAD 4

Realiza tu primera página de HTML utilizando las etiquetas que hemos aprendido. En primer lugar, escribe como título el nombre de un grupo de música. A continuación, escribe el nombre del disco y el nombre de la canción. Recuerda utilizar los diferentes tamaños para estos títulos (de más grande a más pequeño).

Por último, escribe la canción que más te guste, de manera que queden separadas las diferentes líneas.

Retoca tu página para asegurar que lo has hecho lo mejor que has podido y entrégala por Classroom.

Editor HTML

Cursivas y negritas

Ya tenemos algunas nociones básicas sobre cómo funciona el código HTML pero aún nos quedan muchas cosas más que aprender. En este apartado veremos cómo añadir cursivas y negritas a un texto.

Para poner una palabra en cursiva tendremos que “encerrarla” entre las etiquetas <em> y </em>; mientras que para poner una palabra en negrita, lo haremos entre las etiquetas <strong> y </strong>

ACTIVIDAD 5

Abre de nuevo la actividad anterior y escribe una descripción del grupo que elegiste. Recuerda utilizar:

saltos de línea
cursivas
negritas
cursivas y negritas a la vez.

Retoca tu página para asegurar que lo has hecho lo mejor que has podido y entrégala por classroom.

Editor HTML

listas

Otra de las etiquetas útiles que vamos a aprender son las necesarias para hacer listas.

Las listas pueden ser de dos tipos:

- UNORDERED LIST (UL): son listas desordenadas, por lo que el navegador no las numerará

- ORDERED LIST (OL): son listas ordenadas, es decir, llevarán un número antes de cada elemento.

En cualquiera de los dos casos, cada elemento de la lista se introducirá entre las etiquetas <li> y </li>, que son las iniciales de “list item”.

Aquí tienes un ejemplo de cómo utilizar ambos:

ACTIVIDAD 6

Vuelve a pensar en el grupo de música que utilizaste para las actividades anteriores y ahora escribe una lista desordenada con los nombres de los integrantes del grupo y otra lista ordenada con las canciones que más te gusten de ellos.

Retoca tu página para asegurar que lo has hecho lo mejor que has podido y entrégala por classroom.

Editor HTML

imágenes

Para añadir una imagen a nuestra página web, debemos utilizar la etiqueta <img> y a continuación añadir la dirección url. Es importante saber que NO podemos añadir una imagen que esté en nuestro ordenador, sino que tiene que ser una que esté en la web.

¿Cómo hacemos esto?

Como decíamos, en primer lugar introduciremos la etiqueta <img y, a continuación, escribiremos el atributo “source”, que aparecerá abreviado como “src”. Source en inglés quiere decir “fuente” y indica precisamente eso, de dónde viene la imagen que vamos a utilizar. Copiaremos la url de la imagen que queremos insertar ENTRE COMILLAS:

NOTA:

Para encontrar la dirección de la imagen, podemos buscarla en Internet u clicar sobre ella con el botón derecho del ratón. A continuación, seleccionaremos la opción de “Copiar dirección de la imagen” y la podemos pegar directamente en nuestro código.

En ocasiones, el servidor no puede cargar la imagen, por lo que es interesante decirle a nuestra web qué texto debe mostrar como alternativa. Para ello, tenemos que añadir otro atributo. En este caso lo llamaremos:

“alt= Aquí escribiremos el nombre de la imagen”

El código de la imagen que se muestra arriba, sería:

Por lo que para añadir la etiqueta de imagen, escribiré un espacio tras la última comilla y a continuación “alt=Imagen HTML5”

Esto también es interesante para adaptar nuestra página web a personas ciegas, ya que ellas utilizan una aplicación que, literalmente, lee todo lo que aparece en la página web. De este modo, el internauta no podrá ver la imagen pero sí saber qué contiene.

¿Qué más cosas podemos modificar de nuestra imagen?

Es común que el tamaño no nos cuadre con el diseño de nuestra página, por lo que tendremos que utilizar el atributo de “width=” para la anchura o “height=” para la altura. El número que escribas después del símbolo “=” hará referencia al número de píxeles. Estos atributos se escribirán directamente después del de “alt=”, dejando un espacio.

ACTIVIDAD 7

Inserta una imagen del grupo de música en tu página web. Prueba a modificar la altura y la anchura a la vez y saca tus propias conclusiones de por qué esto no es buena idea.

Una vez conforme con el resultado de tu página, entrégala por classroom.

Editor HTML

VÍNCULOS externos

Los vínculos o enlaces externos nos permiten acceder a otras páginas webs a través de un único botón. Si te fijas en cualquier página de Wikipedia, es común que se utilicen para obtener más información acerca de los diferentes conceptos. Para insertar un vínculo en HTML, primero tendremos que utilizar la etiqueta <a> nombre del vínculo </a>. La letra <a> viene de "ancla" o "anchor" en ingles. Sin embargo, aún no hemos insertado la url de la dirección a la que queremos dirigirnos. Para ello tendremos que escribir href=" " tras la primera "a". Por ejemplo:

Otra de las cuestiones que tenemos que decidir es dónde vamos a abrir nuestro enlace: en la ventana actual o en una nueva ventana. Para abrir el vínculo en una nueva ventana, tendremos que utilizar el atributo target="_blank". Es decir, el código quedaría así:

También podemos insertar vínculos a imágenes, copiando la etiqueta de imagen (<img src="">) antes de </a>. Mira este ejemplo:

ACTIVIDAD 8

Añade un link a los nombres de los integrantes del grupo para que te lleve a otra página en la que se hable de ellos e inserta un enlace en la imagen a la página web oficial de la banda.

Editor HTML

VÍNCULOS internos

Los vínculos o enlaces internos nos permiten acceder a secciones dentro de nuestra página web (como si fuera un índice). Si te fijas en cualquier página de Wikipedia, es común que se utilicen para ayudar al lector a encontrar la información que necesita. Accede al siguiente enlace de Wikipedia y diferencia entre los enlaces internos y los externos:

Wikipedia

¿Cómo hacemos esto?

Para empezar, debemos utilizar un nuevo concepto: las ID.

Las ID son "nombres" con los que se identifican elementos. Por así decirlo, es el "DNI" de cada parte de mi página web.

Para añadir un ID sobre un elemento, por ejemplo: un título, tenemos que situar el cursor a la derecha de la "h2", dejar un espacio y escribir id="nombre que le queramos poner". Te recomiendo que utilices nombres bastante precisos para tener tu página más ordenada.

NOTA: No podrás añadir espacios en el nombre de tu ID.

NOTA: No deben existir dos ID con el mismo nombre.

Una vez creada la ID del elemento que queremos enlazar, podemos referenciarlo así:

ACTIVIDAD 9

Copia el siguiente código HTML y añade vínculos internos para:

Historia de las versiones de HTML
Más información

<!DOCTYPE html>

<html>

<head>

<title>links internos en HTML</title>

</head>

<body>

<h1>HTML: HyperText Markup Language</h1>

<ul>

<li><a href="#historia-web">Historia de la web</a></li>

<li>Historia de las versiones de HTML</li>

<li>Más información</li>

</ul>

<p>Tim Berners-Lee inventó el primer buscador para permitir a los investigadores que compartieran la información entre ellos..</p>

<p>

<br>Tim Berners-Lee

</p>

<h2 id="historia-web">Historia de la web</h2>

<ul>

<li><strong>1989: La motivación</strong>

<p> El físico Tim Berners-Lee necesitaba organizar y compartir la gran cantidad de información y los proyectos en los que estaba trabajando él y sus colegas de profesión

<br>

</p>

</li>

<li>

<strong>1989: El invento</strong>

<p>Berners-Lee inventó la World Wide Web (www) ey escribión la primera mágina HTML <a href="http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html">Primera página HTML</a>.

</p>

</li>

<li>

<strong>1993: Empieza pequeño</strong>

<p>Berners-Lee presentó la www en la conferencia de IETF en una sesión con pocas personas.</p>

</li>

<li>

<strong>1993: ¡Se hace mayor!</strong>

<p>NCSA crea el buscador gratuito <a href="http://www.ncsa.illinois.edu/enabling">Mosaic</a>, y añade marcadores e imagenes</p>

</li>

<li>

<p>El número de dominios aumentó exponencialmente en el momento en que Internet comienza a ser <a href="http://en.wikipedia.org/wiki/History_of_the_Internet#Opening_the_network_to_commerce">utilizado por el comercio</a>.</p>

</li>

<li><strong>1994: El consorcio WWW</strong>

<p>Berners-Lee funda el W3C para estandalizar las estructuras HTML que todos los navegadores debían seguir.</p>

</li>

</ul>

<h2>Historia de las versiones de HTML</h2>

<ul>

<li>1997 (Enero): HTML 3.2</li>

<li>1997 (Diciembre): HTML 4.0</li>

<li>2004: Se propone un cambio hacia "HTML5" </li>

<li>2008: Se estandariza HTML5.</li>

</ul>

<h2>Más información</h2>

<p>Lee mas en <a href="http://en.wikipedia.org/wiki/HTML#HTML_versions_timeline">Wikipedia</a></p>

</body>

</html>

Editor HTML

tablas

Para hacer tablas en HTML se necesitan muchas etiquetas, por lo que te recomiendo que las describas bien en la actividad 1 de esta unidad.

1. <table>

Con esta etiqueta indicamos que vamos a hacer una tabla

2. <thead>

Utilizamos esta etiqueta para indicar que vamos a definir los títulos de las columnas

3. <tr>

Con esta etiqueta indicamos que todo lo que pongamos dentro, irá en la misma fila

4. <th>

Para introducir cada nombre de columna utilizamos la etiqueta <th> seguido del nombre de la columna. Por ejemplo <th>Nombre</th>

5. <tbody>

Esta etiqueta es la que utilizamos para indicar que a continuación escribiremos el contenido de la tabla

6. <td>

Con esta etiqueta insertamos los datos de la tabla

A continuación dejo un ejemplo en el que se entiende mejor cada etiqueta:

<table>

<thead>

<tr>

<th>Nombre</th>

<th>Especie</th>

<th>Color</th>

</tr>

</thead>

<tbody>

<tr>

<td>Perra</td>

<td>Negra</td>

</tr>

<tr>

<td>Agaporni</td>

</tr>

<tr>

<td>Antía</td>

<td>Canela</td>

</tr>

</tbody>

</table>

ACTIVIDAD 10

Basándote en el ejemplo de mis mascotas, realiza una tabla para un menú de restaurante en la que se indique en las distintas columnas: nombre del plato, ingredientes y el precio. (Te puedes inventar los datos)

Editor HTML