Por fin vamos a empezar con el primer articulo perteneciente al curso de HTML paso a paso y desde cero. Este articulo va a servir para cuatro cosas principalmente, una de ella es como presentación del curso, otra es mostrar lo que necesitamos para hacerlo, otra es mostrar la metodología de trabajo que voy a seguir y la ultima es para hacer vuestra primera pagina web.
Vamos con la primera de las cuatro tareas que es la presentación del curso. Este curso va dirigido a todo aquel que tenga ganas de aprender diseño web y que tiene que empezar de alguna forma y la mejor es aprender el lenguaje básico para la creación de paginas web, el HTML. En cada tema que trate daré por hecho que la persona que esta leyendo el articulo no tiene conocimientos previos sobre este o cualquier otro lenguaje de programación e intentare explicar las cosas lo mas claro que pueda, ademas haré ejercicios prácticos, videotutoriales con cada lección y resolveré las dudas que os puedan surgir.
Ahora vamos con lo que necesitaremos para seguir este curso. Lo primero es un ordenador con conexión a Internet
Si estáis usando Ubuntu o cualquier otra distribución Linux no podréis usar Internet Explorer a menos que tengáis una maquina virtual con Windows instalado. Mas adelante escribiré algún articulo para mostraros como crear una maquina virtual e instalar Windows en ella. Si usáis Windows como sistema operativo os recomiendo tener los tres instalados en vuestro ordenador ya que ocupan poco espacio y aunque para este curso de HTML solo es necesario uno de ellos para el próximo de CSS que haré los necesitareis.
Ademas también necesitareis un editor de texto. Si estáis usando Windows podéis usar incluso el Notepad que viene instalado por defecto aunque yo os voy a hacer dos recomendaciones:
- Notepad++
- Geany
El Notepad++ es un editor avanzado de texto que esta enfocado a la programación y el Geany también. El primero lo tenéis disponible para instalar en Windows, es gratuito y esta bastante bien. El segundo, el Geany, esta disponible para Windows y Linux y esta muy bien también, es algo mas completo que Notepad++. La verdad es que cualquiera de los dos os servirá igualmente. Yo personalmente prefiero el Geany y es el que voy a utilizar durante el curso y el que uso habitualmente.
La ultima cosa que necesitamos para hacer el curso serán las ganas de aprender y de colaborar para que todos salgamos beneficiados y podamos aprender lo máximo posible
Vamos con la metodología de trabajo, dicho así parece difícil pero no lo es. La metodología de trabajo es la forma en la que vamos a hacer este curso y sera bastante sencilla. Yo voy a hacerlo así ya que me parece la forma mas sencilla de hacerlo. Lo primero que voy a hacer es crear una capeta en la cual voy a meter todos las paginas que vayamos creando durante el curso y cada una en un directorio diferente para no confundirnos. Cuando vayamos a crear una pagina web yo voy a tener abierto a la vez el Geany, el directorio de la pagina con la que estemos trabajando y el navegador en el que la vamos a ver, de esta forma podremos hacer cambios y verlos al instante. Os mostrare en el próximo articulo como hacerlo en un videotutorial. Es muy fácil, esa es la forma en la que voy a hacer el curso, los artículos y los videotutoriales.
Bien, vamos con lo primero que vamos a aprender, que es la estructura básica de una pagina web. Primero abrís el Geany (o el Notepad++) y escribís el siguiente texto:
<html>
<head>
</head>
<body>
Esta es mi primera pagina web
</body>
</html>
Una vez que hayáis escrito esto guardáis el archivo poniéndole como nombre “pagina1.html”. Hay que ponerle extensión “.html” para que el ordenador sepa que es una pagina web y que tiene que abrirlo con el navegador. Una vez que lo hayáis guardado hacéis doble click en el y se os abrirá el navegador web que uséis mostrando algo así:
Esta pagina web que hemos creado solo sirve para mostrar en el navegador web el mensaje que hemos escrito entre las etiquetas “body”. Os voy a explicar un poco las partes del código de esta pagina web y que tienen que estar en todas las paginas que hagamos.
La primera linea es “<html>” y con esto estamos indicando al editor de textos y al navegador que el documento que estamos usando es una pagina web. Al final de la pagina esta “</html>”, esto quiere decir que la pagina web se acaba ahí.
La segunda linea de la pagina web es “<head>” y esto indica el comienzo de la cabeceara de la pagina web y el final de la cabecera es “</head>”. En esta pagina web que hemos creado no hay nada entre estas dos etiquetas, pero mas adelante veremos que es una parte que sirve para varias cosas.
Después de la cabecera va el cuerpo de la pagina, que es la pagina web en si misma. Empieza en “<body>” y termina en “</body>”. Aquí dentro vamos a poner todo el contenido de la pagina web, desde texto a imágenes pasando por enlaces y otras muchas cosas.
Otra cosa que vamos a aprender hoy es como añadir información a la pagina web para que si hacemos una pagina grande que tengamos una forma de organizarla o saber lo que estamos mirando, ademas sirve también para añadir información importante para el programador que hace la pagina y son los comentarios. Los comentarios son eso mismo, comentarios, información útil para el creador de la pagina y nos pueden ser muy útiles el día de mañana. Aquí os pongo una pagina web con un comentario.
<html>
<head>
</head>
<body>
<!– esto es un comentario –>
Esta es mi primera pagina web
</body>
</html>
Los comentarios siempre tienen que ir al principio con “<!–” y al final con “–>”, lo que escribamos en medio no se vera en la pagina web.
Bien, creo que con esto tenemos suficiente para la primera parte de este articulo. Espero haberme explicado bien, si tenéis alguna duda, por favor comunicadmelo a la dirección de contacto que podréis ver en el menú, en la sección “Contacto” y os responderé.
Como ya he mencionado antes sacare videotutoriales de cada articulo, en los cuales es mas fácil explicar algunas de las cosas y os recomiendo que los veáis, intentare que no sean largos para que no se hagan pesados.
Si te ha gustado el contenido o te ha servido para algo compártelo en las redes sociales y así puede que le sirva también a otra persona, muchas gracias.
Puzzle Bobble
Karate Blazers
Puzzle De Bloques
Magical Cat Adventure