En esta práctica aprendemos como colocar archivos externos y enlazarlos desde nuestros archivos html.
En los archivos se encuentran comentarios explicando el comportamiento de cada versión.
clase2_1.html
<!-- Los estilos se colocan en un archivo externo
Vamos a crear nuestro primer archivo css que le llamamos clase2_1.css
tenemos que referenciarlo en el head -->
<html>
<head>
<title>Título</title>
<link href= "clase2_1.css" rel="stylesheet"></link>
</head>
<body>
<div class="estilo1" >
Esta es una capa
<div class= "estilo11" >Esta es la capa hijo</div>
</div>
<div class= "estilo2" >
Esta es otra capa
</div>
</body>
</html>
<!-- Copiamos todo el contenido de estilo al archivo css
Llamamos al archivo en la etiqueta link con el atributo href
y el atributo rel="stylesheet" -->
clase2_1.css
estilo1{color:brown; border:1px solid #0000FF;}
.estilo2{font-size:20px; text-decoration: line-through;}
.estilo11 {font-size: 40px;}
Para organizar los archivos, creamos una carpeta css para incluir los archivos css enlazados.
clase2_2.html
<!-- Como una web contiene muchos archivos se colocan en carpetas
vamos a colocar el css en una carpeta -->
<html>
<head>
<title>Título</title>
<link href= "css/clase2_2.css" rel="stylesheet"></link>
</head>
<body>
<div class="estilo1" >
Esta es una capa
<div class= "estilo11" >Esta es la capa hijo</div>
</div>
<div class= "estilo2" >
Esta es otra capa
</div>
</body>
</html>
CSS clase2_2.css
.estilo1{color:brown; border:1px solid #0000FF;}
.estilo2{font-size:20px; text-decoration: line-through;}
.estilo11 {font-size: 40px;}
En esta versión, el archivo html se encuentra en una carpeta al mismo nivel que la carpeta css. Debemos subir un nivel en el orden de carpetas, para acceder a la carpeta “css”, con ../
clase2_3.html
<!-- Para ir a un nivel superior de carpetas se escriben ../
si estuviera en dos niveles superiores ../../ -->
<html>
<head>
<title>Título</title>
<link href= "../css/clase2_3.css" rel="stylesheet"></link>
</head>
<body>
<div class="estilo1" >
Esta es una capa
<div class= "estilo11" >Esta es la capa hijo</div>
</div>
<div class= "estilo2" >
Esta es otra capa
</div>
</body>
</html>
<!-- Añadimos css/ para encontrar la carpeta que esta metido la clase2_3.css -->
clase2_3.css
.estilo1{color:brown; border:1px solid #0000FF;}
.estilo2{font-size:20px; text-decoration: line-through;}
.estilo11 {font-size: 40px;}
Ahora vamos a enlazar con una imagen, para mostrarla en nuestro archivo html. La imagen la colocamos en una carpeta “img”. Debemos referenciar la carpeta img/ más el nombre de la imagen.
clase2_4.html
<!-- Vamos a incorporar una imagen de la carpeta img -->
<html>
<head>
<title>Título</title>
</head>
<body>
<img src="img/hoja.jpg">
</body>
</html>
<!-- Las imagenes no necesitan etiquetas de cierre -->
