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
<html>
<head>
<title>Títulotitle>
<link href= "clase2_1.css" rel="stylesheet">link>
head>
<body>
<div class="estilo1" >
Esta es una capa
<div class= "estilo11" >Esta es la capa hijodiv>
div>
<div class= "estilo2" >
Esta es otra capa
div>
body>
html>
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
<html>
<head>
<title>Títulotitle>
<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 hijodiv>
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
<html>
<head>
<title>Títulotitle>
<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 hijodiv>
div>
<div class= "estilo2" >
Esta es otra capa
div>
body>
html>
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
<html>
<head>
<title>Títulotitle>
head>
<body>
<img src="img/hoja.jpg">
body>
html>
