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
Fin de texto destacado: </strong>
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:
Martín Fierro
La vuelta de Martín Fierro
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
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:
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:
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.