{"id":4573,"date":"2022-05-20T15:43:25","date_gmt":"2022-05-20T20:43:25","guid":{"rendered":"https:\/\/www.luisguerra.co\/como-hacer-una-pagina-web-en-html-en-bloc-de-notas\/"},"modified":"2025-04-14T22:02:30","modified_gmt":"2025-04-15T03:02:30","slug":"como-hacer-una-pagina-web-en-html-en-bloc-de-notas","status":"publish","type":"post","link":"https:\/\/www.luisguerra.co\/es-us\/como-hacer-una-pagina-web-en-html-en-bloc-de-notas\/","title":{"rendered":"C\u00f3mo hacer una p\u00e1gina web en HTML en Bloc de Notas"},"content":{"rendered":"

\"COMO<\/p>\n

El Bloc de notas es un editor de texto incorporado que viene preinstalado en las m\u00e1quinas con Windows de todas las versiones: XP, Windows 7, Windows 8, Windows 10, etc.<\/p>\n

El Bloc de notas de Windows\u00a0es un programa b\u00e1sico de procesamiento de texto que puede usar para escribir sus p\u00e1ginas web.\u00a0Las p\u00e1ginas web son solo texto y puede usar cualquier programa de procesamiento de texto para escribir\u00a0HTML\u00a0.<\/p>\n

Abra el editor de texto del Bloc de notas<\/h2>\n

Como dije anteriormente, el block de nota es un editor de texto que viene preinstalado con el sistema operativo Windows.\u00a0Por lo tanto, no necesita descargar e instalar el Bloc de notas si est\u00e1 utilizando un dispositivo con Windows.
\nSimplemente vaya a su cuadro de b\u00fasqueda en la parte inferior de tu pc hay una lupa y busque el Bloc de notas.
\nEncontrar\u00e1 el Bloc de notas en sus resultados de b\u00fasqueda.\u00a0Haga doble clic para iniciar el editor de texto del Bloc de notas en su pc con Windows.<\/p>\n

C\u00f3mo usar el Bloc de notas para HTML<\/h2>\n

El Bloc de notas es como otros editores de HTML.\u00a0Puede abrir, editar, guardar todo el proceso que puede hacer con otros editores de HTML.
\nPero no es compatible con muchas funciones que admite otro editor HTML como:
\nResaltador de sintaxis ,predicci\u00f3n de c\u00f3digo , generador de c\u00f3digo autom\u00e1tico e identificador de etiqueta de inicio y cierre.<\/p>\n

Entonces, si no necesita esas funciones, el Bloc de notas te ser\u00e1 de gran utilidad.<\/p>\n

C\u00f3mo crear un archivo HTML en el bloc de notas<\/h2>\n

Para crear un archivo HTML con el Bloc de notas, debe crear un archivo en blanco.\u00a0(Que se crea autom\u00e1ticamente cuando inicia la aplicaci\u00f3n Bloc de notas o puede hacer clic en el men\u00fa Archivo desde la esquina superior izquierda y seleccionar Nuevo desde all\u00ed. Esto abrir\u00e1 un nuevo archivo en blanco)
\nDespu\u00e9s de eso, escriba su c\u00f3digo HTML\u00a0 la p\u00e1gina en blanco que te muestra el bloc de notas.<\/p>\n

Empiece a escribir su c\u00f3digo HTML en su bloc de notas<\/h2>\n

Me imagino que estas ancios@ por aprender a crear tus propios sitios web, y creo que el mejor camino, para comenzar es con algo simple as\u00ed entender\u00e1s la sintaxis de HTML, tu \u00fanico trabajo es seguir al pie de la letra el paso a paso y lograr tu primera p\u00e1gina web hecha por ti mismo.<\/p>\n

\u00a1Empecemos \u00a1<\/p>\n

Hora de empezar con el <! DOCTYPE html5><\/h2>\n

Este c\u00f3digo le dice al navegador (browser) web qu\u00e9 lenguaje estamos usando (HTML) o (HTML5), cada p\u00e1gina que desarrolles siempre debe iniciar con este c\u00f3digo.
\nAhora estamos listos para comenzar una estructura real de tu primera p\u00e1gina web.\u00a0Comience agregando el siguiente c\u00f3digo a su documento, directamente debajo de nuestro \u00faltimo c\u00f3digo:<\/p>\n

<html>
\n<\/strong><\/html><\/strong><\/p>\n

La etiqueta de inicio <html> le dice al navegador(browser) web que queremos comenzar nuestro documento; De igual manera, la etiqueta final <\/html> le dice al navegador que queremos finalizar nuestro documento.\u00a0 Antes de que podamos agregar cualquier contenido emocionante a nuestra p\u00e1gina, hay un elemento m\u00e1s que debemos agregar. Inserte el siguiente c\u00f3digo directamente debajo de la etiqueta de inicio <html><\/p>\n

<body>
\n<\/strong><\/body><\/strong><\/p>\n

El elemento <body> aloja todo el contenido que desea mostrar a la audiencia que visite tu p\u00e1gina, ya sea (texto, im\u00e1genes, videos, juegos o cualquier otra cosa.).\u00a0Usted puede estar pensando “\u00bfPero luego eso no lo hacen etiquetas <html>?”\u00a0De hecho, el elemento <html> aloja todo, tanto nuestro contenido (que va dentro del elemento <body>) como elementos m\u00e1s complejos que m\u00e1s adelante te ense\u00f1are.
\n\u00a1Ahora, agregaremos nuestro primer contenido a nuestra p\u00e1gina! \u00bfQu\u00e9 tal un gran t\u00edtulo en negrita? Agrega el siguiente c\u00f3digo debajo de la etiqueta de inicio <body><\/p>\n

<h1>Mi primera p\u00e1gina web con el bloc de notas de Windows <\/h1><\/h2>\n

S\u00e9 que en este momento te debes estar preguntando: \u201c\u00bfC\u00f3mo se supone que voy a saber cu\u00e1ndo y c\u00f3mo usar la etiqueta <h1>?
\n<\/em>Decidimos usar la etiqueta\u00a0<h1><\/strong>\u00a0para describir nuestro encabezado porque este es el encabezado m\u00e1s importante (y \u00fanico) en nuestra p\u00e1gina.\u00a0utilizaremos las etiquetas <h1>, <h2> y <h3> dependiendo de la importancia o si es un t\u00edtulo o si es subtitulo.<\/p>\n

Sigamos con nuestro documento HTML e ilustremos completamente este punto, ahora volvamos nuestro documento HTML m\u00e1s interesante para ilustrar agreguemos una lista con vi\u00f1etas a nuestra p\u00e1gina.\u00a0Agregue el siguiente c\u00f3digo directamente debajo de su\u00a0etiqueta final\u00a0<\/h1>:<\/strong><\/p>\n

<ul><\/strong>
\n<\/strong>\u00a0 \u00a0 \u00a0 <li> HTML <\/li><\/strong>
\n<li>Java <\/li><\/strong>
\n<li>JavaScript<\/li>
\n<\/ul><\/strong><\/p>\n

El elemento <ul> es el c\u00f3digo de “Lista desordenada” y el elemento <li> es el c\u00f3digo de “elemento de lista”; en ocasiones no querr\u00e1s hacer listas ordenadas sino listas desordenadas para ello podr\u00edas reemplazar <ul> por <ol> como en este ejemplo:<\/p>\n

<ol><\/strong>\u00a0\u00a0\u00a0 <li> HTML <\/li>
\n<\/strong>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<li>Java <\/li>
\n<\/strong>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<li>JavaScript<\/li>
\n<\/strong><\/ol><\/strong><\/p>\n

Guardemos nuestro documento<\/h2>\n

Llego la hora de guardar nuestro documento y luego ver c\u00f3mo se ve en nuestro navegador (browser) web.\u00a0Desde el bloc de notas, haga clic en Archivo y luego en Guardar.\u00a0Solo para que estemos hablando el mismo idioma, acordemos nombrar el archivo “mi_primer_pagina_web.html”.\u00a0Es\u00a0muy importante<\/strong>\u00a0que nuestro archivo termine con la extensi\u00f3n \u201c.html\u201d.\u00a0Esto le dice a nuestro pc qu\u00e9 tipo de archivo es.<\/p>\n

 <\/p>\n

\"como<\/p>\n

 <\/p>\n

\"como<\/p>\n

Si est\u00e1 en una\u00a0PC con Windows<\/strong>, aseg\u00farese de hacer clic en el cuadro desplegable debajo de la entrada del nombre del archivo, etiquetado como ” Tipo:” y seleccione la opci\u00f3n “Todos los archivos”.\u00a0Esto asegurar\u00e1 que su documento se guarde en el formato correcto.\u00a0Continue y guarde su documento.<\/p>\n

\"como<\/p>\n

Ejecutemos el archivo en el navegador web<\/h2>\n

Listo ahora debes de buscar en el lugar donde guardaste el archivo y darle doble clic y se ejecutara en el navegador de tu preferencia veras el t\u00edtulo en negrita y una lista desordenada de tres enunciados.<\/p>\n

\"como<\/p>\n

D\u00e9mosle un t\u00edtulo a la p\u00e1gina<\/h2>\n

Es posible que haya notado que tu p\u00e1gina no tiene un t\u00edtulo (generalmente se muestra en la barra de t\u00edtulo de nuestro navegador web).\u00a0Los t\u00edtulos de las p\u00e1ginas web son una necesidad, ya que juegan un papel muy importante en los motores de b\u00fasqueda que pueden encontrar sus p\u00e1ginas.\u00a0Ahora que est\u00e1 un poco m\u00e1s familiarizado con la sintaxis de HTML, avancemos y demos un t\u00edtulo a nuestra p\u00e1gina.<\/p>\n

El elemento\u00a0<title><\/strong>\u00a0debe almacenarse en una nueva secci\u00f3n de la p\u00e1gina llamada\u00a0<head>.<\/strong>\u00a0 Esta etiqueta nos sirve para almacenar el t\u00edtulo.\u00a0Agregue el siguiente c\u00f3digo directamente debajo de tu etiqueta de inicio <html>:<\/p>\n

\u00a0<\/strong><head><\/strong><\/p>\n

\u00a0\u00a0\u00a0 <title>Mi primer p\u00e1gina web<\/title><\/strong><\/p>\n

<\/head><\/strong><\/p>\n

Nuevamente guarde su documento y luego cambie a la ventana de su navegador web y actualice la p\u00e1gina (presionando F5 ). Observe que tu p\u00e1gina ahora tiene un t\u00edtulo en la barra de t\u00edtulo del navegador web.<\/p>\n

\u00a1\u00daltimo paso!<\/h2>\n

Antes de terminar, agreguemos un poco m\u00e1s de c\u00f3digo que ayudar\u00e1 a todos los navegadores web a comprender mejor nuestro Inserte la siguiente l\u00ednea de c\u00f3digo directamente debajo de la\u00a0etiqueta de inicio\u00a0<head>:<\/strong><\/p>\n

\u00a0<\/strong><meta charset=”utf-8″><\/strong><\/p>\n

\u00a0<\/strong>Acabas de confirmar que el block de notas es un editor de texto f\u00e1cil y r\u00e1pido de usar, aunque para un programador ya profesional se requiere utilizar editores de texto m\u00e1s completos como los son sublime tex, visual estudio code, entre otros que tienen funciones como predecir c\u00f3digo.<\/p>\n

Para que te puedas guiar y confirma si tu c\u00f3digo ha quedado bien te lo dejamos aqu\u00ed abajo.<\/p>\n

<!DOCTYPE html5><\/strong>
\n<\/strong><html><\/strong>\u00a0<\/strong>
\n<head><\/strong>
\n<meta charset=”utf-8″>
\n<\/strong>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<title>Mi primer p\u00e1gina web<\/title>
\n<\/strong>\u00a0 \u00a0 \u00a0 \u00a0<\/head><\/strong>\u00a0<\/strong>
\n<body><\/strong>\u00a0<\/strong>
\n<\/strong>\u00a0 \u00a0 \u00a0 <h1>Mi primera p\u00e1gina web con el bloc de notas de Windows <\/h1><\/strong>
\n<\/strong><ul><\/strong>
\n<li> HTML <\/li><\/strong>
\n<li>Java <\/li><\/strong>
\n<\/strong>\u00a0 \u00a0 \u00a0 <li>JavaScript<\/li>
\n<\/strong>\u00a0 \u00a0 \u00a0<\/ul><\/strong>
\n<\/body>
\n<\/strong><\/html><\/strong><\/p>\n

Pero si quedaste confundido, y necesitas una p\u00e1gina web profesional por favor cont\u00e1ctenos que estaremos con toda la disponibilidad para ayudarte.<\/p>\n

Quiz\u00e1s te interese:<\/p>\n