Curso profesional de HTML y CSS. 2.1 Estructura 2.1.3- Elementos estructurales parte 2

Lección 5, Tema 3

En progreso

← Anterior Siguiente→

2.1.3- Elementos estructurales parte 2

Angel Sánchez 11 marzo, 2025

Lección Progreso

0% Completado

Otro elemento que es muy importante dentro de nuestra cabecera es el elemento <link>, se usa para incorporar al documento estilos, códigos, imágenes o iconos desde archivos externos. En este ejemplo vamos a cargar el icono de nuestra página web.

<!DOCTYPE html>
<html lang="es">
<head>
     <title>Este texto es el título del documento</title>
     <meta charset="utf-8">
     <link rel="icon" href="img/favicon.png" type="image/png" sizes="16x16">
</head>
<body>
</body>
</html>

El elemento <link> también se utiliza para cargar archivos externos, ya sea archivos css o js.

<!DOCTYPE html>
<html lang="es">
<head>
     <title>Este texto es el título del documento</title>
     <meta charset="utf-8">
     <link rel="icon" href="img/favicon.png" type="image/png" sizes="16x16">
     <link rel="stylesheet" href="css/style.css">
</head>
<body>
</body>
</html>

Archivo index.html usado en el video.

<!DOCTYPE html>
<html lang="es">
	<head>
		<title>Mi primera pagina web.</title>
		<meta charset="utf-8">
	</head>
	<body>	
		<div id="boton">
			<p>Hola, soy un boton.</p>
		</div>
		<script>
			document.getElementById("boton").style.background = "#2C1D1D";
		</script>
	</body>
</html>

Archivo style.css usado en el video.

#boton{
	background: #EC4E82;
	color: #ffffff;
}