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.