Cómo crear una simple página web usando el Bloc de Notas

PDF download Descargar el PDF
Crea fácilmente una página web con el software ya instalado en tu computadora
Coescrito por Personal de wikiHow

PDF download Descargar el PDF

¿Quieres aprender diseño web? No necesitas un software de edición sofisticado para comenzar a crear páginas web. Puedes crear páginas web con el Bloc de notas, que viene preinstalado en tu computadora con Windows. El lenguaje utilizado para crear páginas web se llama "HTML", que significa lenguaje de marcado de hipertexto (por sus siglas en inglés). Puedes escribir HTML usando el Bloc de notas o cualquier otro programa de edición de texto. Luego, todo lo que necesitas hacer es guardar el archivo como un documento HTML. El HTML es fácil de aprender , incluso si no tienes conocimientos de programación. Este artículo de wikiHow te enseñará cómo crear una página web simple usando el Bloc de notas.

Cosas que debes saber

  • El HTML es el idioma principal utilizado en el diseño web.
  • Puedes escribir en HTML fácilmente usando el Bloc de notas o cualquier otro programa de edición de texto.
  • No olvides guardar el archivo como documento HTML (.html).
Parte 1
Parte 1 de 4:

Crear un documento

PDF download Descargar el PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/77\/533547-1.jpg\/v4-460px-533547-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/77\/533547-1.jpg\/v4-728px-533547-1.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Haz clic en el logo de Windows en la esquina inferior izquierda de la pantalla. Aparecerá el menú Inicio.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0c\/533547-2.jpg\/v4-460px-533547-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0c\/533547-2.jpg\/v4-728px-533547-2.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Para buscarlo, escribe bloc de notas . En la parte superior del menú Inicio aparecerá una lista de los resultados que coincidan con tu búsqueda.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/ee\/533547-3.jpg\/v4-460px-533547-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/ee\/533547-3.jpg\/v4-728px-533547-3.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Es el ícono azul que está en la parte superior de la lista de resultados de búsquedas. Haz clic en esta aplicación para abrir una página en blanco en el Bloc de notas.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/3a\/533547-4.jpg\/v4-460px-533547-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/3a\/533547-4.jpg\/v4-728px-533547-4.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Está en la esquina superior izquierda de la ventana del Bloc de notas. Al hacer clic en esta opción, se abrirá un menú desplegable.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/9b\/533547-5.jpg\/v4-460px-533547-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/9b\/533547-5.jpg\/v4-728px-533547-5.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Es una de las opciones del menú desplegable. Se abrirá la ventana "Guardar como".
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/cc\/533547-6.jpg\/v4-460px-533547-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/cc\/533547-6.jpg\/v4-728px-533547-6.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Este menú está en la parte inferior de la ventana. Dirá "Documentos de texto (*.txt)". Al hacer clic en él, se abrirá un menú desplegable.
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/3c\/533547-7.jpg\/v4-460px-533547-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/3c\/533547-7.jpg\/v4-728px-533547-7.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Es una de las opciones del menú desplegable. De este modo, tu archivo se guardará como un documento HTML.
  8. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/28\/533547-8.jpg\/v4-460px-533547-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/28\/533547-8.jpg\/v4-728px-533547-8.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    En el lado izquierdo de la ventana, selecciona el nombre de la carpeta donde quieras guardar el documento.
    • Por ejemplo, para guardar el documento en el escritorio, desplázate hacia arriba y haz clic en Escritorio en la barra lateral izquierda.
  9. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d8\/533547-9.jpg\/v4-460px-533547-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d8\/533547-9.jpg\/v4-728px-533547-9.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Haz clic en el cuadro de texto "Nombre de archivo".Luego escribe el nombre que quieras ponerle al archivo seguido de .html que es la extensión de archivo para un documento HTML.
    • Por ejemplo, si quieres que tu página web se llame "hola", entonces escribe hola.html .
  10. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/6d\/533547-10.jpg\/v4-460px-533547-10.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/6d\/533547-10.jpg\/v4-728px-533547-10.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Al hacerlo, tu documento actual del Bloc de notas se transformará en un documento HTML. Ahora puedes proceder a crear la estructura inicial de tu página web.
    • Si el Bloc de notas se cierra inesperadamente o más adelante tienes que regresar para hacer alguna edición en el documento, haz clic derecho en el archivo HTML y selecciona Editar en el menú desplegable que aparece.
    Anuncio
Parte 2
Parte 2 de 4:

Agregar código estructural

PDF download Descargar el PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/96\/533547-11.jpg\/v4-460px-533547-11.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/96\/533547-11.jpg\/v4-728px-533547-11.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    La primera etiqueta que deberás agregar es la etiqueta de lenguaje. Esto le dice al navegador web que se trata de un documento HTML y que el lenguaje que se utiliza es HTML. Escribe lo siguiente en el Bloc de notas en la parte superior de la página: 
     <!DOCTYPE html> 
 < 
 html 
 >
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/30\/533547-12.jpg\/v4-460px-533547-12.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/30\/533547-12.jpg\/v4-728px-533547-12.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    La sección "head" de un documento HTML contiene los metadatos de la página web. Esta información no se muestra en tu navegador web. Puede contener información como el título de la página, hojas de estilo (CSS) , scripts y más. Por ahora, simplemente escribe <head> abajo de la etiqueta "<html>", presiona Enter dos veces para dejar un espacio en blanco. Luego agrega </head> .
    • Cada elemento HTML tiene una etiqueta de apertura y cierre. Cuando agregamos un nuevo elemento, como la etiqueta "<head>" para abrir el encabezado, también debemos agregar una etiqueta de cierre. Para la cabeza, esta es la etiqueta "</head>".
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1c\/533547-13.jpg\/v4-460px-533547-13.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1c\/533547-13.jpg\/v4-728px-533547-13.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    El título va dentro de la sección "head" del documento HTML, por lo que deberás ingresarlo entre la etiqueta de apertura "<head>" y la etiqueta de cierre "</head>< /nowiki>". Para agregar un título, escribe la etiqueta de título de apertura, que es {{kbd|<nowiki><title>"}}. Luego escribe el texto de su título. Agrega la etiqueta de título de cierre inmediatamente después, que es </title> . Por ejemplo, si quisieras titular tu página web, "Mi sitio web", ingresaría lo siguiente: 
     < 
 title 
 > 
Mi sitio web </ 
 title 
 >
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/90\/533547-14.jpg\/v4-460px-533547-14.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/90\/533547-14.jpg\/v4-728px-533547-14.jpg","smallWidth":460,"smallHeight":258,"bigWidth":728,"bigHeight":409,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Todo el código de tu página web debe ir entre estas etiquetas, que van debajo de la etiqueta "</title>": 
     < 
 body 
 > 
 </ 
 body 
 >
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d8\/533547-15.jpg\/v4-460px-533547-15.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d8\/533547-15.jpg\/v4-728px-533547-15.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    La última etiqueta del documento debe ser la etiqueta de cierre de HTML para indicar el fin de la página. Escribe </html> debajo de la etiqueta "</body>" para cerrar la etiqueta HTML.
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/37\/533547-16.jpg\/v4-460px-533547-16.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/37\/533547-16.jpg\/v4-728px-533547-16.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Ahora, tu documento deberá verse así: 
     <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 title 
 > 
Mi sitio web </ 
 title 
 > 
 </ 
 head 
 > 
 < 
 body 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/8a\/533547-17.jpg\/v4-460px-533547-17.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/8a\/533547-17.jpg\/v4-728px-533547-17.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Para guardarlo, presiona Ctrl + G . Ahora puedes proceder a agregar otros elementos de la página web como, por ejemplo, los párrafos y encabezados.
    Anuncio
Parte 3
Parte 3 de 4:

Insertar elementos a la página

PDF download Descargar el PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e7\/533547-18.jpg\/v4-460px-533547-18.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e7\/533547-18.jpg\/v4-728px-533547-18.jpg","smallWidth":460,"smallHeight":258,"bigWidth":728,"bigHeight":409,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Todos los elementos, ya sean encabezados o párrafos, deben ir después de la etiqueta "<body>" y antes de "</body>".
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/2f\/533547-19.jpg\/v4-460px-533547-19.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/2f\/533547-19.jpg\/v4-728px-533547-19.jpg","smallWidth":460,"smallHeight":259,"bigWidth":728,"bigHeight":410,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Escribe <h1></h1> entre las etiquetas "body" y luego escribe el encabezado principal que quieras ponerle a tu página web entre las etiquetas "<h1></h1>". Por ejemplo, para crear una página web con el encabezado "Bienvenido", tendrás que escribir lo siguiente: 
     < 
 h1 
 > 
Bienvenido </ 
 h1 
 >
    • Utiliza las etiquetas desde la "<h2></h2>" hasta la "<h6></h6>" para crear encabezados con texto más pequeño.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b1\/533547-20.jpg\/v4-460px-533547-20.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b1\/533547-20.jpg\/v4-728px-533547-20.jpg","smallWidth":460,"smallHeight":258,"bigWidth":728,"bigHeight":408,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Escribe las etiquetas de párrafo "<p></p>" y luego escribe el texto que quieras entre esas etiquetas. El resultado final deberá verse así: 
     < 
 p 
 > 
Este es mi sitio web. ¡Vótenme como presidente de la clase! </ 
 p 
 >
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1c\/533547-21.jpg\/v4-460px-533547-21.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1c\/533547-21.jpg\/v4-728px-533547-21.jpg","smallWidth":460,"smallHeight":258,"bigWidth":728,"bigHeight":409,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Si quieres agregar más espacio entre párrafos o encabezados escribe <br> después de la línea de cierre. Por ejemplo, para insertar un salto de línea después de un párrafo, tu código deberá verse similar al siguiente: 
     < 
 p 
 > 
Este es mi sitio web. ¡Vótenme como presidente de la clase! </ 
 p 
 >< 
 br 
 > 
 < 
 p 
 > 
También me gustan las papas. </ 
 p 
 >
    • Si quieres, puedes agregar más etiquetas <br> después de la primera para insertar más saltos. Así tendrás más espacio entre el primer párrafo y el segundo.
  5. 5
    Dale formato al texto. Puedes poner cualquier palabra, oración o bloque de texto en negrita, cursiva o subrayado (también como subíndice o superíndice), siempre y cuando el texto esté entre las etiquetas de párrafo: 
     < 
 b 
 > 
Texto en negrita </ 
 b 
 > 
 < 
 i 
 > 
Texto en cursiva </ 
 i 
 > 
 < 
 u 
 > 
Texto subrayado </ 
 u 
 > 
 < 
 sup 
 > 
Texto como superíndice </ 
 sup 
 > 
 < 
 sub 
 > 
Texto como subíndice </ 
 sub 
 >
  6. 6
    Revisa el aspecto de tu página web. Si bien los elementos de la página pueden variar, tu documento deberá verse similar al siguiente: 
     <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 title 
 > 
Mi sitio web </ 
 title 
 > 
 </ 
 head 
 > 
 < 
 body 
 > 
 < 
 h1 
 > 
¡Bienvenidos! </ 
 h1 
 > 
 < 
 p 
 > 
Este es mi sitio web. ¡Espero que les guste! </ 
 p 
 > 
 < 
 p 
 >< 
 b 
 > 
Este texto está en negrita para enfatizarlo. </ 
 b 
 ></ 
 p 
 > 
 < 
 p 
 >< 
 i 
 > 
La cursiva a veces puede ser aterradora. </ 
 i 
 ></ 
 p 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
    Anuncio
Parte 4
Parte 4 de 4:

Probar la página

PDF download Descargar el PDF
  1. 1
    Guarda el documento. Para guardarlo, presiona Ctrl + G . Así te asegurarás de que tu documento HTML muestre la versión más reciente de tu página web cuando lo abras.
  2. 2
    Haz clic derecho en tu documento HTML. Aparecerá un menú desplegable.
  3. 3
    Selecciona Abrir con . Es una de las opciones del menú desplegable. Al seleccionarla, se abrirá un menú emergente.
  4. 4
    Selecciona tu navegador web favorito. Todos los navegadores web pueden abrir documentos HTML, así que, en el menú emergente, selecciona el navegador web que quieras usar. Tu documento HTML se abrirá en el navegador seleccionado.
  5. 5
    Revisa tu página web. Si consideras que el formato parece estar bien, entonces cierra el Bloc de notas.
    • Si quieres seguir editando tu documento HTML, regresa al Bloc de notas y haz los cambios necesarios. Asegúrate de guardar los cambios a menudo.
    Anuncio

Consejos


Anuncio

wikiHows relacionados

Cómo
copiar una página web
Cómo
editar archivos XML
Cómo
crear un menú desplegable con HTML y CSS
Cómo
hacer que un archivo se pueda descargar desde tu página web
Anuncio

Acerca de este wikiHow

En otros idiomas
Esta página ha recibido 375 388 visitas.

¿Te ayudó este artículo?

Anuncio