Páginas

martes, 14 de febrero de 2017

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".

lunes, 13 de febrero de 2017

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

Una página web se puede crear desde el programa más sencillo como el bloc de notas. Sin embargo, para ser más eficientes a la hora de crear nuestra página web vamos a necesitar herramientas que nos permitan agilizar el trabajo y tener nuestro código bien estructurado.

Para estos fines puedes utilizar notepad++, Visual Studio Code, etc.

Yo utilizo Visual Studio Code, ya que me permite tener mi código mejor estructurado y a la hora de tener cientos de líneas de código pues se me hace mucho más fácil a la hora de buscar un bloque de código.

Si eres un usuario de Windows, puedes descargar Visual Studio Code desde la páginal oficial haciendo click en el siguiente enlace: https://code.visualstudio.com/

Si eres un usuario de Mac, puedes descargar TextWrangler desde la página oficial haciendo click en el siguiente enlace: https://itunes.apple.com/do/app/textwrangler/id404010395?mt=12

Espero haberte ayudado,
Daniel Peña

Mi primera página web | Hola mundo | HTML

En este tutorial quiero mostrar como crear nuestra primera página web. Observa la estructura de esta página, pues es la misma estructura que deben llevar TODAS las páginas web.

Vamos a estar creando una página web con un título que diga: "Hola mundo".

Pasos:

1. Crea una nueva carpeta en la ubicación que desees.
2. Crea un nuevo archivo en el bloc de notas.
3. Copia y pega el código aquí propuesto en tal archivo.
4. Debajo de la casilla del nombre, haz clic en el menu desplegable y selecciona: Todos los formatos
5. Guarda el archivo con el siguiente nombre: index.html
6. Haz doble clic en el archivo y ábrelo con el navegador que desees.

<!DOCTYPE HTML>
<html>
    <head>
        <title>Hola mundo</title>
    </head>
    <body>
        <h1>Hola mundo</h1>
    </body>
</html>

Analizando el código anterior

La expresión "<!DOCTYPE HTML" es la declaración del tipo del documento. Esto le avisa al navegador que el documento que estamos tratando de visualiar está escrito siguiendo una estructura la definida (DTD). Puedes buscar sobre los DTD en un buscador para obtener más información.

Cada página web comienza y termina con el tag "<html> / </html>".

Dentro de la etiqueta "<head> / </head>", es donde vamos a definir información de nuestra página web, NO el texto que el usuario podrá ver.

Dentro de la etiqueta "<body> / </body>", es donde escribiremos y daremos formato al contenido de nuestra página web.

Dentro de la etiqueta "<h1> / <h1>" podemos introducir el primer título de nuestra página web.

Dentro de la etiqueta "<title> / </title>" escribimos el título que queremos que aparezca en la pestaña de nuestro navegar, el título de nuestra página web.