1. Enlaces (Hyperlinks)
La etiqueta <a> (anchor) es la esencia de la web.
Enlace Básico
Código:
<a href="https://www.google.com" target="_blank">Ir a Google</a><a href="#final">Ir al final</a>2. Rutas y Direcciones (Paths)
Para que un enlace o una imagen funcione, el navegador necesita saber dónde está el archivo. Existen dos formas de indicarlo:
Rutas Absolutas
Es la dirección completa en internet. Incluye el protocolo (https://) y el dominio.
- Úsalas para enlazar a otros sitios web.
- Ejemplo:
https://www.wikipedia.org/wiki/HTML
Rutas Relativas
Indican dónde está el archivo en relación con el archivo actual. Son las mejores para tu propio sitio web.
Misma Carpeta
Si el archivo está en el mismo lugar, solo pon su nombre.
href="contacto.html" o href="./contacto.html"
Dentro de una Carpeta (Bajar nivel)
Si el archivo está dentro de una subcarpeta, indica la carpeta y luego el archivo.
src="imagenes/foto.jpg" (Entra en 'imagenes' y busca 'foto.jpg')
Carpeta Superior (Subir nivel)
Usa ../ para salir de la carpeta actual y subir un nivel.
../index.html(Sube uno y busca index.html)../../index.html(Sube dos niveles)../css/estilos.css(Sube uno, entra en 'css' y busca estilos.css)
Ejemplo Visual:
proyecto/
+-- index.html
+-- contacto.html
+-- imagenes/
¦ +-- logo.png
+-- blog/
+-- articulo.html
Desde 'index.html' a 'logo.png': src="imagenes/logo.png"
Desde 'articulo.html' a 'index.html': href="../index.html"
Desde 'articulo.html' a 'logo.png': src="../imagenes/logo.png"4. Audio y Vídeo
HTML5 permite reproducir multimedia nativamente.
Audio
<audio controls>
<source src="multimedia/cancionhtml.mp3" type="audio/mpeg">
</audio>Vídeo
<video width="320" controls poster="imagenes/portadaviideo.png">
<source src="multimedia/cancionhtml.mp4" type="video/mp4">
</video>5. Iframes
Permiten incrustar otra página web dentro de la tuya.
<iframe src="https://www.wikipedia.org" width="100%" height="300"></iframe>Final de la página
Has llegado al destino del enlace ancla.