Cargando

Ir a contenido

X

 


Cómo hacer una página Web HTML en Notepad

Tutorial para saber cómo hacer una página Web HTML en Notepad, ver la estructura del sitio web y validarla.


Escrito por sep 26 2019 12:04

Desde el año 1993 se dio inicio a algo que cambiaria por completo la forma de nuestro día a día y es que en ese año se lanzó el navegador Mosaic dando origen a lo que hoy conocemos como páginas web. El porque decimos que esto cambia nuestra vida, es simple ya que hoy encontramos mas de 1.100 millones de páginas web con todo tipo de información, diseños, estructuras, lenguajes y más.

 

Lógicamente existen páginas web profesionales, intermedias y otras amateur, pero todas tienen el propósito de brindar algún tipo de información a las personas que las visitan. Es por ello que si quieres saber cómo crear una pagina web hoy Solvetic te explicará de una sencilla cómo hacerlo, usando Notepad y HTML como lenguaje de programación.

 

HTML (HyperText Markup Language) es un lenguaje de programación que permite el desarrollo de páginas web de forma dinámica con grandes prestaciones de edición.

 

Tutorial con vídeo para instalar y usar Notepad++ en Windows 10 fácilmente.

 


1. Cómo crear una página web en Notepad

 

Paso 1

Para acceder al bloc de notas podemos usar alguna de las siguientes opciones:
  • Usar las teclas Windows + R y ejecutar el comando “Notepad”
  • Usar Cortana o el cuadro de búsqueda de Windows 10.

 

hacer-una-página-Web-HTML-en-Notepad-1.png

 

Paso 2

Una vez abramos el bloc de notas iremos al menú Archivo y allí seleccionamos “Guardar como” o bien podemos usar las teclas Ctrl + Shift + S:

 

 

Ctrl + Shift + S

 

 

hacer-una-página-Web-HTML-en-Notepad-2.png

 

Paso 3

Al dar clic allí vamos a la ruta donde se ha de guardar y por defecto veremos lo siguiente:

 

hacer-una-página-Web-HTML-en-Notepad-3.png

 

Paso 4

Al tratarse del bloc de notas podemos ver que el valor predefinido es .txt, para editar esto, desplegamos las opciones en el campo Tipo y seleccionamos “Todos los archivos”. Asignamos el nombre del archivo seguido por la extensión .html:

 

hacer-una-página-Web-HTML-en-Notepad-4.png

 

Pulsamos en "Guardar" para aplicar los cambios.

 

 


2. Ver estructura del sitio web

 

Paso 1

Una vez guardemos el archivo con la extensión .hmtl, es hora de proceder con su edición añadiendo la etiqueta del idioma HTML para la página web. Para ello ingresamos lo siguiente:
<!DOCTYPE html>
<html>

hacer-una-página-Web-HTML-en-Notepad-5.jpg

 

 

Paso 2

Ahora vamos a agregar las etiquetas de encabezado o “heads”, el objetivo de estas etiquetas es marcar el inicio y final del título de la página a crear. Para ello vamos a escribir <head> después de la etiqueta "<html>", pulsar la tecla Enter dos veces con el fin de dejar un espacio y luego escribir de nuevo </head>:

 

hacer-una-página-Web-HTML-en-Notepad-6.png

 

Paso 3

El siguiente paso será añadir el título de la página web, este título estará ubicado entre las etiquetas "<title> </title>", y va bajo las etiquetas "head" de la siguiente forma. El título asignado será el que veremos en la pestaña del navegador.

 

hacer-una-página-Web-HTML-en-Notepad-7.png

 

Paso 4

Es hora de agregar las etiquetas “body” las cuales van bajo la etiqueta </title> y la función de body es permitir que el código de la página web vaya entre estas etiquetas y sea visible al usuario:
<body>
</body>

hacer-una-página-Web-HTML-en-Notepad-8.png

 

Paso 5

El siguiente paso será cerrar la etiqueta del lenguaje HTML, esta es la última etiqueta en el archivo y es una etiqueta HTML la cual indica el final de la página. Para esto vamos a escribir </html> bajo la etiqueta "</body>" con el objetivo de cerrar la etiqueta HTML:

 

hacer-una-página-Web-HTML-en-Notepad-9.png

 

Guardamos los cambios usando las teclas Ctrl + G o desde el menú Archivo / Guardar.

 

Paso 6

Es momento de agregar los elementos a la página web en proceso, todos estos elementos deben ir después de la etiqueta "<body>" y antes de la etiqueta "</body>" para que sean visibles.

 

El primer elemento a añadir será el encabezado principal de la página web, para ello ingresamos <h1> </h1> entre las etiquetas de "<body>" y entre <h1> </h1> digitamos el texto deseado:

 

hacer-una-página-Web-HTML-en-Notepad-10.png

 

Con este lenguaje HTML podemos usar las etiquetas "<h2> </h2>" hasta "<h6> </h6>" con el fin de crear el texto de encabezado con menores dimensiones.

 

Paso 7

A continuación vamos a agregar párrafos a la página web, las etiquetas de párrafo son "<p> </p>" y entre ellas ingresaremos el texto del sitio:
<p>Solvetic Internet, el punto de encuentro de profesionales y amantes de la tecnología </p>

 

 

Paso 8

Para añadir un salto de párrafo en la página, debemos ingresar <br> después de la etiqueta de cierre de la línea que hemos añadido, por ejemplo:
<p>Solvetic Internet, el punto de encuentro de profesionales y amantes de la tecnología </p><br>
<p>Una comunidad que te sorprenderá y ayudará en más de una ocasión </p>

 

Nota
Podemos agregar una etiqueta "<br>" adicional para crear un espacio entre el primer párrafo y el segundo.

 

Paso 9

Ahora es momento de aplicar formato al texto ingresado tal como negrita, cursiva, superíndice, subíndice o subrayado, las etiquetas disponibles serán:
<b> Texto en negrita </b>
<i> Texto en cursiva </i>
<u> Texto subrayado </u>
<sup> Texto superíndice </sup>
<sub> Texto de subíndice </sub>

 

 

 


3. Cómo validar página web

 

Paso 1

Para validar que todo funcione de la forma esperada vamos a la ruta donde se ha guardado el archivo HTML, damos clic derecho sobre este y seleccionamos Abrir con y elegimos el navegador deseado:

 

hacer-una-página-Web-HTML-en-Notepad-14.png

 

Paso 2

Al dar clic allí veremos la estructura que hemos creado:

 

 

Así de simple has aprendido a crear una página web en el Bloc de Notas (Notepad) con Solvetic y así estar en la capacidad de crear una web básica para múltiples tareas que puedas necesitar.

 

Tutorial para centrar y alinear una imagen en una página web usando HTML, CSS y Bootstrap.



AYUDA A MEJORAR ESTE TUTORIAL!

¿Crees que puedes corregir o mejorar este tutorial? Puedes enviar tu Edición con los cambios que consideres útiles.

0 usuarios han editado este tutorial. ¡Edita y conviértete en un reconocido experto!


Tutoriales Relacionados



Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

  Información

  •   Publicado sep 26 2019 12:04
  •   Actualizado sep 26 2019 12:35
  •   Visitas 1.4K
  •   Nivel
    Intermedio