Curso html / CSS desde cero 2
Curso HTML / CSS desde cero 2 ¿Te apuntas aprender con Ivardev? Cursos desde 0, donde aprenderás lo imprescindible.

 

 

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>