Figuras geométricas | HTML5 y CSS3

En este tutorial vamos a aprender a dibujar un cuadrado, un rectángulo y un triángulo en nuestra página web utilizando HTML5 y CSS3.

Para crear cualquier figura primero debemos de crear la etiqueta "<div> / </div>", y ponerle el argumento class y darle un nombre, en este caso: box.

Para dibujar el cuadrado quedaría así:

<div class = "box"> </div>

Luego creamos otra para el rectángulo:

<div class = "rectangle"> </div>

Por último, otra para el triángulo:

<div class = "triangle">  </div>

Si guardas este documento y lo abres con el navegador te darás cuenta que no aparece nada. Esto es porque aún no le hemos dado los estilos necesarios para convertir estas etiquetas "div" en las figuras que queremos.

Para esto, vamos a crear otro documento. Lo guardaremos con la extensión .css. Puedes llamarlo "style.css". En este documento es donde vamos a especificar el diseño de nuestras figuras a través del lenguaje CSS3.

Nota que a cada div en el documento html le habíamos especificado el parámetro class, esto para que ahora podamos acceder a cada uno de ellos y aplicarle los estilos apropiados desde este nuevo archivo.

Para acceder al primer elemento y hacerle parecer un cuadrado, lo hacemos escribiendo un punto ( . ) antes del nombre de la clase que le hayamos dado. Ej:  .box

Sabiendo esto, aquí dejo el código que debe de ir en el archivo "index,html":

<!DOCTYPE HTML>
<html>
    <head>
        <title>Dibujando figuras</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="figuras">
            <div class="box">
            </div>
            <div class="rectangle">
            </div>
            <div class="triangle">
            </div>
        </div>
    </body>
</html>

Y el código en el archivo "style.css":

.figuras div
{
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}
.box
{
    width: 100px;
    height: 100px;
    background: green;
}
.rectangle
{
    width: 200px;
    height: 100px;
    background: darkcyan;
}
.triangle
{
    width: 0px;
    height: 0px;
    border-top: 100px solid transparent;
    border-bottom: 100px solid transparent;
    border-right: 100px solid transparent;
    border-left: 100px solid darkred;
}

NOTA IMPORTANTE: Observa que en el archivo index.html he añadido el tag "link" dentro del tag "head". Esto es para especificar el archivo uno de los archivos de estilos que estará utilizando el documento html actual.

Recuerda que ambos archivos deben estar en la misma carpeta. Si están en carpetas diferentes entonces la ubicación del archivo deberá ser distinto en la etiqueta "link".

Comentarios

Entradas populares de este blog

Mi primera página web | Hola mundo | HTML

¿Qué programa puedo utilizar para crear páginas y sitio web?