HTML desde cero – Clase 2

En la clase 1 hicimos una página muy sencilla.
Hasta ahora sólo tenemos la estructura básica de la página web, y dentro de su contenido depositamos unos párrafos sin ningún estilo.
Ahora vamos a modificar esa misma página web, agregándole negrita, cursiva, enlaces. En la tercera clase le vamos a agregar imágenes, título y encabezados.

Destacamos partes del texto

  • Comienzo de texto destacado: <strong>
  • Fin de texto destacado: </strong>
  • Comienzo de texto en cursiva: <em>
  • Fin de texto en cursiva: </em>

Vamos a abrir el archivo HTML en el editor de texto (Notepad++, Geany, etc.)
Y vamos a elegir algunas palabras para destacar en cursiva y en negrita.
Lo que tenemos que hacer es marcar con el comienzo del texto destacado, y marcar con el cierre del texto destacado. Lo mismo para cursiva, pero con em:

<strong>Martín Fierro</strong>

<em>La vuelta de Martín Fierro</em>

El Gaucho Martín Fierro es un poema narrativo, escrito en verso por José Hernández en 1872, obra literaria considerada ejemplar del género. Debido a que tiene una continuación, La vuelta de Martín Fierro, escrita en 1879, este libro es también conocido como «La ida». Ambos libros han sido considerados como libro nacional de la Argentina, bajo el título genérico de «El Martín Fierro». En «La ida», Martín Fierro es un gaucho trabajador al que la injusticia social lo vuelve gaucho matrero (fuera de la ley).

Agregamos enlaces

  • Comienzo de enlace: <a href=”https://es.wikipedia.org/”>
  • Fin de enlace: </a>

La estructura de un enlace es un poco diferente a los tags que venimos viendo, porque -si bien hay apertura y cierre- hay otros dos elementos fundamentales:

  • El destino del enlace (la dirección, por ejemplo, https://es.wikipedia.org/ )
  • El texto visible en el enlace, lo que uno quiere que se lea en el link (por ejemplo “Enciclopedia libre”)

<a href=”https://es.wikipedia.org/”>Enciclopedia libre</a>

Se ve de esta manera:

Enciclopedia libre

Hay dos recomendaciones muy importantes para mejorar la accesibilidad del sitio web:

  • Los enlaces no tienen que tener texto igual entre sí, por ejemplo: haga clic “aquí“, “aquí” y “aquí” para leer más. Una persona que navega escuchando el sitio (como los invidentes o personas con altas dificultades de visión), sólo va a escuchar la palabra “aquí”, lo cual no lo ayuda para saber de qué se trata. La forma correcta es: Acceda a la enciclopedia Wikipedia, al sitio de Martin Fierro, o busque más información en Google.
  • Los visitantes de tu página tienen que poder decidir si quieren que un enlace se abra en la misma ventana o en una nueva. Está desaconsejado el uso de enlaces que se abren en una ventana nueva, ya que el usuario pierde el dominio de su navegación. Si aún así lo necesitaras, al código anterior se le agrega lo siguiente: target=“_blank”

<a href=”https://es.wikipedia.org/” target=“_blank”>Enciclopedia libre</a>

Se ve de esta manera:

Enciclopedia libre

Te propongo hacer el siguiente ejercicio:

  • Tomá un texto que te interese y creá una página web nueva, usando la estructura aprendida como base, y poniendo negrita, cursiva y enlaces en diversos lugares del texto.

Cómo ver el código de una página web

Cuando quieras ver y por qué no copiar código (es frecuente y está permitido, esto es código abierto!) podés hacer clic con el botón derecho sobre una página web y mirar cómo está hecha. Si no tiene programación  (javascript, php, etc) o cosas hechas con Flash u otros plugins, vas a poder aprender copiando, pegando y modificando.

Más tutoriales de HTML

En el sitio de w3schools hay excelentes tutoriales de HTML y CSS.

1 opinión en “HTML desde cero – Clase 2”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *