Buscar

 

Hacer una página web desde un bloc de notas

Este tutorial enseña como hacer una página web con el bloc de notas "notepad" de windows. Explica las etiquetas básicas de html, mostrando como se aplican.

Conceptos básicos

Es posible que desees saltarte los conceptos básicos.

HTML

HTML, sigla en inglés de HyperText Markup Language (lenguaje de marcas de hipertexto). Es un estándar que sirve de referencia del software que conecta con la elaboración de páginas web, define una estructura básica y un código para la definición de contenido de una página web, como texto, imágenes, videos, juegos, entre otros.

Lo importante de este concepto es la palabra estándar, significa que para todo el mundo es el mismo código, no importando el idioma o el navegados que se prefiera.

WWW

Es importante que al tratarse de un estándar es necesario que alguien se haga cargo, y ese es el Consorcio WWW, en inglés: World Wide Web Consortium (W3C), es un consorcio internacional que genera recomendaciones y estándares del código html.

Este consorcio fue creado en octubre de 1994,​ y está dirigido por Tim Berners-Lee, el creador original del URL (Uniform Resource Locator, Localizador Uniforme de Recursos), del HTTP (HyperText Transfer Protocol, Protocolo de Transferencia de HiperTexto) y del HTML (Hyper Text Markup Language, Lenguaje de Marcado de HiperTexto), que son las principales tecnologías sobre las que se basa la Web.

Comenzamos con las etiquetas

Si hablamos de conceptos nunca vamos a terminar, vamos a lo nuestro, en este tutorial vamos a entender el concepto de etiquetas html, Hay muchas, pero en este tema vamos a aprender solo dos. El objetivo principal es aprender cómo se define y cómo se aplica.

En lenguaje html es fundamental comprender el tema de las etiquetas. Para colocar las etiquetas se emplea los símbolos "menor que (<) y mayor que (>), vamos a ver por ejemplo la etiqueta de párrafo. La etiqueta de párrafo se especifica con la letra “p”. Entonces si quisiera abrir un párrafo se escribe”<p>” y para cerrar el párrafo se escribe “</p>”. A continuación un ejemplo de dos párrafos.

<p>Este es un ejemplo de párrafo</p>
<p>Este es el segundo párrafo</p>

Vamos a la práctica

Vamos a hacer la primera página web con las herramientas más básicas que puede tener un computador (ordenador) y de la forma más sencilla posible.

Primero llamamos al editor de texto básico. En tu sistema Windows haz clic en el botón inicio:

botón inicio

Luego escribe “bloc de notas”

bloc de notas

Al hacer clic en “bloc de notas” se abrirá una ventana donde se puede escribir texto. Simplemente llena con el texto que se muestra en la siguiente imagen.

bloc de notas contenido

Luego haz clic en la opción “Archivo” y luego en “Guardar”

bloc de notas guardar

Elije la carpeta donde se guardará el archivo y asígnale un nombre, para el caso de este ejemplo le asignaremos el nombre de “primeraweb.html”

bloc de notas - guardar como

Hay que notar que la extensión predeterminada con al que el bloc de notas guarda es la extensión “txt”, es necesario cambiar la extensión a “html”, asignarle esta extensión se guarda como una página web.

Por último cerrar el bloc de notas. Luego buscar en la carpeta donde se guardó el archivo, una vez ubicado hacer doble clic sobre el archivo.

icono página web

En este caso al guardar con la extensión html el icono que toma es del explorador predeterminado, en mi caso es crhome, pero por ejemplo si en otra computadora el explorador predeterminado es mozilla, o explorer o cualquier otro, va a tomar siempre el icono del explorador predeterminado. Al hacer doble clic en el archivo se abre con el explorador web predeterminado mostrando la página web.

vista de página web

Como se puede ver, en la página web ya no se muestran las etiquetas, sino que éstas son interpretadas. En el archivo de texto, la leyenda “mi primera página web” está encerrada entre las etiquetas “<h1></h1>”. Estas etiquetas se usan para establecer lo encerrado como título, es por ello que automáticamente se muestra con tamaño mayor que el normal y en negrita. Luego tenemos los dos párrafos que se ha especificado con las etiquetas “<p></p>”