Taller HTML

Bienvenidos a nuestro taller de HTML. Aquí van a encontrar el paso a paso de lo que haremos esta semana. Se pueden guiar por acá y tendrán todos los enlaces necesarios para que funcione.

Crear cuenta en CodePen

  1. Para este ejercicio vamos a usar CodePen, un software de acceso libre para desarrollar código. Creen una cuenta y un nuevo proyecto. Si no encuentran dónde, abran el avatar de su usuario y seleccionen «New Pen».
  2. Desplegar la flecha dentro del botón de Save y asegurarse de tener activo «Auto-save».
  3. Nombrar su archivo como «taller1_nombre».
  4. Como no vamos a trabajar con JavaScript (JS), seleccionar el botón de flecha hacia abajo y elegir la opción “Minimize JavaScript Editor”. Así, tendremos la ventana HTML, la ventana CSS y en la parte inferior podremos visualizar cómo se ve nuestro código.

Cómo funciona HTML

  • HTML es el lenguaje que se encarga de diseñar la estructura de nuestro sitio web. La principal figura que utilizaremos en HTML son las “etiquetas” o “tags”, que se presentan así:

    <nombre de la etiqueta> </nombre de la etiqueta>.

    Es muy importante entender que las etiquetas se abren y se cierran. Por ejemplo, si yo quiero escribir un párrafo, voy a abrir la etiqueta:

    <p> Este será el contenido de mi párrafo, y enseguida la voy a cerrar </p>.

    Así, el computador sabrá cuándo deja de ser un párrafo. Hay etiquetas que se cierran solas, pero esas las veremos más adelante.

    Estas etiquetas tiene como objetivo dar orden al documento. Es decir, que el computador sepa que tiene que ejecutar distintos tipos de elementos en la web. Estas etiquetas pueden tener atributos, pero eso lo veremos más adelante.
  • Un documento HTML tiene etiquetas esenciales como:

    <!DOCTYPE> y <html>: las veremos más adelante.

    <header>: representa un grupo de ayudas introductorias o de navegación. Puede contener algunos elementos de encabezado, así como también un logo, un formulario de búsqueda, un nombre de autor y otros componentes. Estos elementos son fundamentales para el correcto funcionamiento de nuestra web. CodePen trae de manera predeterminada todo lo que va en el header (lenguaje, título, tipo de caracteres, etc.), así que para este taller no lo vamos a necesitar. Más adelante tendrán la oportunidad de aprender esto.

    <body>: Es el contenedor para todos los aspectos representables de un documento. Este es el lugar donde los autores arrojan todos los elementos y contenidos que sus visitantes alcanzarán. 

    <footer>: Representa la parte inferior de la web, que se mantiene estática a pesar de que cambiemos de página. Este se suele usar para datos de contacto y redes sociales.
  • Nos vamos a concentrar en trabajar en <body>. El cuerpo es donde incluiremos todo lo que tiene que ver con el contenido de la web, es decir texto, imágenes, hipervínculos, entre otros.
  • Hay dos temas importantes visualmente que les van a ayudar a trabajar en código: las jerarquías y los colores.

    Las jerarquías es la organización del código para saber qué elementos están dentro de otros. Ejemplo: es más fácil entender que <title> está dentro de <head> si visualmente lo sitúo indentado. Esto es fundamental para encontrar partes específicas del código y solucionar errores.Esto se conoce como anidar contenido. Ej: title está anidado dentro de head.
  • Los colores. Casi todos los editores de código utilizan colores para diferenciar las etiquetas de sus atributos y componentes del texto. CodePen tiende a usar colores terrosos. A mí me gusta más utilizar varios colores, pero esto es predeterminado de este software.

¿Qué etiquetas utilizaremos en este taller?

  • <body> </body> Donde va todo el contenido (podríamos decir contenido editorial) que queremos que aparezca en la web.
  • <h1></h1> Header 1. El primer tipo de encabezado en su jerarquía.
  • <h3></h3> Header 3. El tercer tipo de encabezado en su jerarquía.
  • <p></p> Párrafo
  • <ul> </ul>Unordered list: cuando queremos crear una lista de ítems que no tienen un orden específico con viñetas (diferente a <ol>, que organiza los ítems por 1.,2.,3.,…)
  • <li> </li> List item: se usa este atributo para cada uno de los items que vamos a mencionar en nuestra lista.
  • <fig> </fig> Identifica que hay un elemento de imagen y unos componentes relacionados a esta. Si quieren entender mejor, entren aquí.
  • <img/> Permite insertar una imagen a la visualización web. Tiene una etiqueta distinta, que se cierra sola. No necesita finalizar con </img> sino que, en la etiqueta de apertura, antes de >, se incluye el slash. Esto porque no tiene contenido adicional.
  • <figcaption> Figcaption permite tener un pie de foto.
  • <a> Hipervincular mi texto.

Tengan esto a la mano por si se les olvida qué hace cada una de estas etiquetas.

Conceptos importantes

  • Abrir/cerrar etiquetas
  • Anidar

Empezar a escribir en HTML

  • Vamos a hacer nuestro primer ejercicio. Para esto, abriremos la etiqueta body y en seguida la cerraremos. Una vez las escribimos, nos vamos a parar entre ambas y daremos enter. Van a ver cómo el editor automáticamente indenta el espacio. Esto quiere decir que lo que viene estará anidado en el body.
<body>

</body>
  • Vamos a abrir y cerrar una etiqueta H1 dentro de Body. Entre las dos etiquetas escribimos: ¡Hola, mundo! Les debe quedar así:

Bienvenid_s a programar en la web.

  • Vamos a realizar un sitio web muy sencillo sobre la historia del Internet y la Web, como vimos la semana pasada. Borramos nuestro texto h1 y ahora escribimos “Internet y la World Wide Web”. Este será nuestro título.
  • Como subtítulo, vamos a escribir “Inicios” dentro de una etiqueta de h3. Esto lo haremos en el renglón siguiente a nuestro primer h1. Nos quedará así:
<body>
  <h1>Internet y la World Wide Web<h1>
    <h3>Inicios</h3>
</body>
  • Enseguida, vamos a crear un párrafo usando la etiqueta <p>. Este será el texto:

    Los inicios de Internet nos remontan a los años 60. En plena guerra fría, Estados Unidos crea una red exclusivamente militar, con el objetivo de que, en el hipotético caso de un ataque ruso, se pudiera tener acceso a la información militar desde cualquier punto del país. Esta red se creó en 1969 y se llamó ARPANET. En principio, la red contaba con 4 ordenadores distribuidos entre distintas universidades del país, Dos años después, ya contaba con unos 40 ordenadores conectados. Tanto fue el crecimiento de la red que su sistema de comunicación se quedó obsoleto. Entonces dos investigadores crearon el Protocolo TCP/IP, que se convirtió en el estándar de comunicaciones dentro de las redes informáticas (actualmente seguimos utilizando dicho protocolo).

    No olviden cerrar la etiqueta.
  • Vamos a crear un segundo párrafo.

    ARPANET siguió creciendo y abriéndose al mundo, y cualquier persona con fines académicos o de investigación podía tener acceso a la red. Las funciones militares se desligaron de ARPANET y fueron a parar a MILNET, una nueva red creada por los Estados Unidos. La NSF (National Science Fundation) crea su propia red informática llamada NSFNET, que más tarde absorbe a ARPANET, creando así una gran red con propósitos científicos y académicos. El desarrollo de las redes fue abismal, y se crean nuevas redes de libre acceso que más tarde se unen a NSFNET, formando el embrión de lo que hoy conocemos como INTERNET.
  • Después de nuestro segundo párrafo, vamos a hacer un nuevo subtítulo con etiqueta h3 titulado “Personajes importantes”. Hasta ahora, nuestro código se debe ver así:
<body>
  <h1>Internet y la World Wide Web<h1>
    <h3>Inicios</h3>
    
    <p>Los inicios de Internet nos remontan a los años 60. En plena guerra fría, Estados Unidos crea una red exclusivamente militar, con el objetivo de que, en el hipotético caso de un ataque ruso, se pudiera tener acceso a la información militar desde cualquier punto del país. Esta red se creó en 1969 y se llamó ARPANET. En principio, la red contaba con 4 ordenadores distribuidos entre distintas universidades del país, Dos años después, ya contaba con unos 40 ordenadores conectados. Tanto fue el crecimiento de la red que su sistema de comunicación se quedó obsoleto. Entonces dos investigadores crearon el Protocolo TCP/IP, que se convirtió en el estándar de comunicaciones dentro de las redes informáticas (actualmente seguimos utilizando dicho protocolo).</p>
    <p>ARPANET siguió creciendo y abriéndose al mundo, y cualquier persona con fines académicos o de investigación podía tener acceso a la red. Las funciones militares se desligaron de ARPANET y fueron a parar a MILNET, una nueva red creada por los Estados Unidos. La NSF (National Science Fundation) crea su propia red informática llamada NSFNET, que más tarde absorbe a ARPANET, creando así una gran red con propósitos científicos y académicos. El desarrollo de las redes fue abismal, y se crean nuevas redes de libre acceso que más tarde se unen a NSFNET, formando el embrión de lo que hoy conocemos como INTERNET.</p>
   
    <h3>Personajes importantes</h3>
</body>
  • Vamos a aprender a hacer una lista en viñetas, justo como está en este tutorial. Como ya les conté, hay dos tipos de listas, las ordenadas, compuestas por orden numérico, y las desordenadas, compuestas por bullets o viñetas. Vamos a crear una lista desordenada (unordered list) con su etiqueta respectiva.
  • Dentro de la lista que acabamos de crear, vamos a anidar tres ítems (list items <li>) con su respectivo cierre. En el primero escribiremos Lawrence Roberts, en el segundo Leonard Kleinrock y en el tercero Doug Engelbart. Se verá así:
 <ul>
      <li>Lawrence Roberts</li>
      <li>Leonard Kleinrock</li>
      <li>Doug Engelbart</li>
 </ul>
  • Vamos a hacer un nuevo subtítulo, como los dos anteriores, titulado “La creación de la World Wide Web”.
  • Queremos insertar una imagen de Tim Berners-Lee, el inventor de la WWW. Pero además de insertar la foto, queremos darle un pie de foto para escribir quién es él.

    Para poder tener la imagen y el pie de foto agrupados, vamos a crear un elemento llamado “figure”, que nos permitirá trabajarlos juntos. Creamos una etiqueta <fig> y la cerramos con </fig>.
  • Dentro de la figura, lo primero que queremos hacer es insertar nuestra foto de Berners-Lee. Para esto, crearemos dentro de nuestro elemento fig un elemento de imagen, su etiqueta será <img>.
  • Peeeero, acá falta algo. Es muy importante que recordemos sobre el cierre de las etiquetas. Casi todas necesitan una etiqueta de cierre, pues entre estas dos está el contenido. En las imágenes, como no queremos que salga un texto sino vincular una imagen que ya está en el internet, no necesitamos hacer una etiqueta de cierre. Esta etiqueta se puede cerrar sola, escribiendo:
<fig>
   <img/>
</fig>
  • Ahora… ¿cómo hacemos para vincular la imagen? Para vincular la imagen, utilizaremos un nuevo concepto fundamental en HTML: los atributos. Los atributos de HTML son palabras especiales utilizadas dentro de la etiqueta de apertura, para controlar el comportamiento del elemento. Los atributos de HTML son un modificador de un tipo de elemento de HTML.
  • Para vincular nuestra imagen, utilizaremos el atributo src, source. Este (src) nos va a permitir que, cuando el computador entienda que queremos insertar una foto, encuentre la fuente y la muestre en la web. Escribiremos el código así:
<fig>
   <img src=""/>
</fig>
  • Dentro de las comillas, ingresaremos la URL correspondiente:

    https://www.latercera.com/resizer/ITHZeFyuak38TEFOy9DZFfVQIrw=/900×600/smart/arc-anglerfish-arc2-prod-copesa.s3.amazonaws.com/public/NVFJD3TVUNFZ3DHTZPB6OOLPSU.jpg

    Cuando la ingresen, debe aparecer en la parte inferior de su pantalla.
  • Ahora queremos poner un pie de foto que diga «Tim Berners-Lee, el creador de la World Wide Web». Para esto, justo después de la etiqueta <img/>, crearemos la etiqueta <figcaption></figcaption>. Entre estas dos insertaremos el texto. El código de nuestra figura quedará así:
<fig>
  <img src="https://www.latercera.com/resizer/ITHZeFyuak38TEFOy9DZFfVQIrw=/900x600/smart/arc-anglerfish-arc2-prod-copesa.s3.amazonaws.com/public/NVFJD3TVUNFZ3DHTZPB6OOLPSU.jpg"/>
  <figcaption>Tim Berners-Lee, el creador de la World Wide Web</figcaption>
</fig>

Ya casi acabamos, nos queda el último párrafo.

  • Para terminar, escribiremos un último párrafo. En este, escribiremos este texto:

    Tim Berners-Lee, un científico inglés que trabajaba en el CERN, la Organización Europea para la Investigación Nuclear, con sede en Suiza, inventó un protocolo de comunicación basado en hipertexto (enlaces dentro de palabras), que permitía crear páginas con texto e imágenes que se enlazaban entre sí. Lo llamó World Wide Web (WWW). Aquí puedes entrar a la primera página web de la historia.
  • Si se dan cuenta, la última frase de nuestro párrafo invita a que las personas puedan acceder a un link para conocer la primera página web de la historia. Para hacer esto, queremos hipervincular solo la última frase dentro del párrafo. Anidaremos esta frase entre una etiqueta <a></a>. Quedará así:
<a> Aquí puedes entrar a la primera página web de la historia.</a> </p>

Una vez anidada, nos damos cuenta que no le ocurre nada al texto. Esto es porque no lo hemos vinculado a ninguna URL o archivo.

  • Para poder vincularlo, utilizaremos el atributo “href=”””, que significa referencia de hipertexto o hypertext reference. Funciona parecido a source, sin embargo href funciona para crear un vínculo y source para imágenes o videos que queremos que aparezcan en nuestra web. Lo haremos de la misma manera que escribimos el atributo src=»» para vincular nuestra imagen. Nos quedará así:
<a href=""> Aquí puedes entrar a la primera página web de la historia.</a> </p>
  • Por último, dentro de las comillas de href vamos a incluir la URL a nuestro vínculo:

    https://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html

Así, esta frase debe quedar azul y subrayada.