Aplicando "LINKS"
En "HTML" las dos primeras letras significan Hyper Texto, o la capacidad de generar conexiones cruzadas entre contenidos (paginas, videos, imágenes, etc.). Es fácil reconocer los links de una página, porque aparece una pequeña manito como la de la imagen, y antes que pregunten: SI, es la mutilada mano del ratón Mickey Mouse 😲 (a los chicos les gusta ok?)
A éstas conexiones las llamamos LINKS, y para ello usamos la etiqueta <a></a>, de la siguiente manera:
<a href=" google.com.ar"> GOOGLE <a>
En ésta imagen vemos como se aplica dentro del body (debajo de un encabezado H1) y a la derecha como se ve al salvar el documento y activar el rayito naranja de Brackets.
En el área de estilos apliqué un tamaño de fuente a los links (línea 6).
Para ésta clase intentaremos crear documentos HTML y conectarlos mediante links para fomentar el trabajo colaborativo. Como ejemplo, guardaremos estos 4 archivos en una carpeta llamada PAGINAS :
Para cargar los archivos en brackets, lo más rápido es arrastrar la carpeta sobre la barra izquierda.
El primer archivo index.html tiene 3 links a leyendas (Tema que ven en Prácticas del Lenguaje), y apuntan a los otros 3 archivos (leyenda1.html, leyenda2.html, leyenda3.html ), aunque podemos crear links a cuantas página queramos crear.
Si clickeamos en la izquierda en alguno de los documentos, en este caso leyenda1.html que sólo tiene un LINK llamado VOLVER que apunta a index.html.
En este ejemplo comenzamos agregando una imagen desde un link de la web, como vemos a continuación en la línea 16:
En el <style> la propiedad para IMG{ } que permite que la imagen "flote" a la derecha o a a izquierda (float:right o float:left respectivamente ).De ésta manera el texto fluirá alrededor de la misma, en segunda instancia se agrega la propiedad margin-right para que el texto no esté pegado a la imagen o bien margin-left si la imagen está del otro lado.
La imagen de Pennywise, es simplemente una metáfora visual, porque el humor siempre genera que uno entienda y recuerde un concepto de forma mas fácil :D
A medida que vayamos creando prácticos usaremos éstas plantillas para crear mini-sitios web, temáticos conectados por links, con imágenes o videos de youtube.