Clase 3: Enlaces, Imágenes y Tablas en HTML, Apuntes de Ciencias de la Tierra y del Medio Ambiente

¡Descarga Clase 3: Enlaces, Imágenes y Tablas en HTML y más Apuntes en PDF de Ciencias de la Tierra y del Medio Ambiente solo en Docsity!

• Clase
  • HTML Parte

Una de las características más destacables de HTML es la posibilidad de enlazar

unas páginas con otras.

Para hacer esto utilizamos el elemento “" con el atributo "href" (Hypertext

Reference).

Por ejemplo:

Google

Hay 3 tipos de enlaces:

• Absoluto: es un enlace que incluye todas las partes de una URL.
• Relativo: hace referencia a un recurso que se encuentra en una posición

relativa a nuestra URL. Ejemplo: enlace a una

imagen

• Ancla (o anchor): a diferencia de los dos anteriores, este enlace se utilizar

para indicar un elemento dentro de la misma página que estamos viendo.

Enlaces

• HTML clasifica a todos los elementos en dos grupos: inline y block.
• De forma predeterminada, los elementos en bloque comienzan en una nueva

línea y los elementos en línea pueden comenzar en cualquier parte de una

línea.

INLINE BLOCK

, , , ,

, , etc.

,

,

.., ,

, , , , etc.

Elementos block e inline

Listas

: lista desordenada.

: lista ordenada.

: representa un elemento de la lista y su padre siempre tiene que ser una etiqueta ol o ul.

Ejemplo: Lista desordenada

Lunes Martes Miércoles

Lista ordenada

Enero Febrero Marzo

Mira el resultado acá! https://jsbin.com/birojac/edit?html,output

Para crear tablas se utiliza la etiqueta table y se indican las filas y columnas utilizando tr (table row) y td (table data).

Estructura básica

table: contenedor principal

tr: representa una fila de la tabla

Día th: representa a una celda de encabezado en una tabla

Mes

10 td: representa a una celda de datos

Agosto

14

Septiembre

Tablas

Colspan y Rowspan

Son atributos que permiten que una celda ocupe más de una columna o

más de una fila

Tablas

colspan y rowspan

Estructura Completa

Se utiliza para incrustar otro documento HTML en la página actual.

Para incrustar un mapa de google map en nuestro sitio web, se busca la dirección en Google Map, se hace click en Compartir, click en Insertar un mapa, click en Copiar HTML y lo pegan en el archivo HTML.

Asi se veria en el navegador

También podría agregar videos o publicidades.

https://jsbin.com/merutekaco/edit?html,output

Estas etiquetas nos permiten agregar contenido multimedia. acepta como atributos: https://www.w3schools.com/tags/tag_video.asp controls: permite activar los controles del player. https://www.w3schools.com/tags/att_video_controls.asp poster: muestra una imagen a modo de presentación. https://www.w3schools.com/tags/att_video_poster.asp autoplay, loop, muted, preload y src con la misma función que en audio. height: sets the height of the video player (pixels). https://www.w3schools.com/tags/att_video_height.asp width: sets the width of the video player (pixels). https://www.w3schools.com/tags/att_video_width.asp

y

Íconos

Hay varias formas de agregar iconos a tu sitio web, en https://fontawesome.com/ , hay iconos gratuitos y pagos, te registras en el sitio y te envian un mail con una etiqueta que podés agregar al de tu HTML. Luego podés elegir los íconos a utilizar y agregar a tu página.

https://jsbin.com/wuyeden/edit?html,output

• Qué: subir un sitio a la web.
• Cómo: https://youtu.be/-LRlQ_jaLAU
• Dónde: https://app.netlify.com/drop

Netlify:

• Netlify es una herramienta que simplifica mucho la prueba de sitios pero esa simplificación tiene

costo algunas veces. Hay forma de sincronizar herramientas Git con servidores. A continuación

algunos videos que les pueden ser de utilidad, sino siempre pueden irse a otros proveedores

(incluso gratuitos) que permitan sincronización con GitHub:

• Subir Página web a hosting gratuito con GitHub:

https://www.youtube.com/watch?v=SCxbN-UzKS

• Netlify Tutorial – Deploy a new site just by Drag and Dropping:

https://www.youtube.com/watch?v=vywDFg2uIxY

• Netlify Tutorial – Deploying from Git: https://www.youtube.com/watch?v=mN9oI98As_
• Hosting Your Website With Github and Netlify:

https://www.youtube.com/watch?v=hBQlCtfRmqs

• Setup Custom Domain On Netlify: https://www.youtube.com/watch?v=Q9giWrfIJKk
• PD: a tod@s, Googleen! que está todo en la Web. Sólo hay que tener paciencia y aprender a

buscar!

Sobre Netlify, GitHub y más...