Entradas

Mostrando entradas 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:

<divclass = "rectangle"> </div>
Por último, otra para el triángulo:

<divclass = "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 tr…

¿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…