Si tenés ganas de aprender a hacer páginas web desde cero, lo primero que tenés que saber es que casi nadie empieza a programar abriendo un editor de textos vacío y escribiendo todo. Así que no vamos a empezar aprendiendo a escribir código, sino modificando un código ya existente.
¿Dónde se escribe el programa? En cualquier editor de texto plano, por ejemplo Geany (para Linux) o Notepad++ (para Windows).
¿Cómo se ve lo que hace el programa? Abriendo el archivo en un navegador (Mozilla Firefox, Chrome, etc.)
Empezamos.
- Comienzo de párrafo: <p>
- Fin de párrafo: </p>
- Copiá el siguiente código y pegalo en tu editor de texto. En este código lo que hice fue tomar de Wikipedia unos párrafos sobre el Martín Fierro, pegarlos en el editor y utilizar los TAGS (etiquetas) correspondientes a comienzo y final de párrafo.
<p>Narra el carácter independiente, heroico y sacrificado del gaucho. El poema es, en parte, una protesta en contra de la política del presidente argentino Domingo Faustino Sarmiento de reclutar forzosamente a los gauchos para ir a la frontera contra los indígenas.</p>
- Guardá el archivo con un nombre como “martinfierro.html”
- Abrilo en un navegador (o en todos los navegadores que tengas, de a poco vas a aprender las diferencias entre navegadores)
¿Qué ves en el navegador? Probablemente ves el texto lleno de símbolos raros. ¿Por qué? Porque al comienzo de una página web le tenemos que indicar algunas cosas importantes para que el navegador pueda entender en qué idioma está el texto, entre otras cosas.
La estructura de una página web
La estructura básica de una página web podría resumirse de la siguiente manera:
Comienzo de página
Comienzo de encabezado
---contenido del encabezado---
Fin del encabezado
Comienzo del cuerpo de la página
---contenido del cuerpo de la página---
Fin del cuerpo de la página
Fin de la página
- Una página web en HTML siempre tiene que empezar con la declaración de tipo de documento y la codificación de caracteres. Por eso todos empezamos una página siempre abriendo otra, porque esto no creo que nadie lo escriba “de memoria”:
- Comienzo de página web: <!DOCTYPE html>
- Fin de pagina web: </HTML>
- Comienzo del encabezado: <head>
- Fin del encabezado: </head>
- Comienzo del cuerpo de la página: <body>
- Fin del cuerpo de la página: </body>
Ahora nuevamente, copiá este código y pegalo en tu editor de texto. Guardá el archivo como html y abrilo en un navegador:
<head>
<meta charset=“UTF-8”>
</head>
<body>
<p>El Gaucho Martín Fierro es un poema narrativo, escrito en verso por José Hernández en 1872, obra literaria considerada ejemplar del género. Debido a que tiene una continuación, La vuelta de Martín Fierro, escrita en 1879, este libro es también conocido como «La ida». Ambos libros han sido considerados como libro nacional de la Argentina, bajo el título genérico de «El Martín Fierro». En «La ida», Martín Fierro es un gaucho trabajador al que la injusticia social lo vuelve gaucho matrero (fuera de la ley).</p>
<p>Narra el carácter independiente, heroico y sacrificado del gaucho. El poema es, en parte, una protesta en contra de la política del presidente argentino Domingo Faustino Sarmiento de reclutar forzosamente a los gauchos para ir a la frontera contra los indígenas.</p>
</body>
</html>
Ahora sí, hiciste tu primera página web. Felicitaciones. 🙂
4 opiniones en “HTML desde cero – Clase 1”