Cómo hacer una página web en HTML

En este How.com.vn, aprenderás a escribir una página web simple con HTML (lenguaje de marcas de hipertexto). El HTML es uno de los componentes base de la red informática mundial, ya que constituye la estructura de las páginas web. Después de crear tu página web, puedes guardarla como documento HTML y visualizarla en tu navegador web. Puedes crear una página de HTML con editores básicos de texto que puedes encontrar en computadoras tanto Windows como Mac.

Parte 1

Parte 1 de 6:

Añadir un encabezado al HTML

Descargar el PDF

1
Abre un editor de texto. En una computadora que esté ejecutando el sistema operativo Windows, por lo general usarás el Bloc de Notas o Notepad++, en tanto que los usuarios de macOS usarán TextEdit:
- Windows: abre Inicio
  , escribe bloc de notas o notepad++ y haz clic en Bloc de Notas o "Notepad++ o Sublime" en la parte superior de la ventana.
- macOS: haz clic en Spotlight
  , escribe textedit y haz doble clic en TextEdit en la parte superior de los resultados.
Con esto, le indicas al navegador web que es un documento HTML.^{[1]XFuente de investigación}
Esta es la etiqueta de abertura para tu código HTML.
Esta es la etiqueta que abre el encabezado de HTML. El encabezado de HTML contiene información que no suele mostrarse en la página web. Esta información puede abarcar el título, los metadatos, las hojas de estilo en cascada y otros lenguajes de secuencias de comando.^{[2]XFuente de investigación}
Esta es la etiqueta para añadirle un título a tu página.
Puede ser cualquier título que quieras ponerle a tu página.
Esta etiqueta cerrará la etiqueta del título.
8
Escribe </head> y presiona Entrar. Con esta etiqueta, cerrarás el encabezado. El código HTML debe verse algo así:
```
<!DOCTYPE html><html><head><title>Mi página web</title></head>
```
Anuncio

Parte 2

Parte 2 de 6:

Añadirle cuerpo y texto al HTML

Descargar el PDF

Con esta etiqueta, abres el cuerpo del documento HTML. Todo lo que colocas en el cuerpo de HTML se muestra en la página web.
Con esta etiqueta, añades un encabezado a tu documento de HTML. Un encabezado es un texto grande en negrita que suele ir en la parte superior del documento HTML.
Puede ser el título de la página o un saludo.
4
Escribe </h1> después del texto del encabezado y presiona Entrar. Con esta etiqueta, cierras el encabezado.
- Añade encabezados adicionales a medida que avances. Puedes crear seis encabezados distintos mediante las etiquetas <h1></h1> a <h6></h6>. Con ellas, se crean encabezados de distintos tamaños. Por ejemplo, si quieres crear tres encabezados de tamaños distintos en sucesión, podrías escribir lo siguiente:
  <h1>¡Bienvenidos a mi página!</h1><h2>Me llamo Juan.</h2><h3>Espero que les guste.</h3>
- Los encabezados muestran la prioridad o importancia del texto. Sin embargo, no es necesario que uses un encabezado más alto si quieres usar alguno de los encabezados más bajos. Puedes usar directamente el H3 aunque tu publicación no tenga un H1.
Con esta etiqueta, se abre un párrafo. El texto de párrafo se usa para mostrar texto de un tamaño normal.
Puede ser una descripción para tu página web o cualquier otra información que quieras compartir.
7
Escribe </p> después del texto y presiona Entrar. Con esta etiqueta, cierras el texto de párrafo. Este es un ejemplo de texto de párrafo en HTML:
```
<p>Este es mi párrafo.</p>
```
- Puedes añadir varias líneas seguidas de párrafos para crear una serie de párrafos debajo de un encabezado.
- Es posible cambiar el color de cualquier texto si lo colocas entre las etiquetas <font color="color"> y </font>. Asegúrate de escribir el color que prefieras en la sección "color" (conserva las comillas). Puedes hacer que cualquier texto (por ejemplo, los encabezados) cambie a otro color usando este conjunto de etiquetas. Por ejemplo, si quieres cambiar el texto de un párrafo a azul, debes escribir el siguiente código:<p><font color="blue">Las ballenas son criaturas majestuosas.</font></p>
- Puedes añadir negrita, cursiva y otros formatos de texto con HTML. Estos son ejemplos de cómo puedes darle formato al texto con etiquetas de HTML:^{[3]XFuente de investigación}
  <b>Texto en negrita</b><i>Texto en cursiva</i><u>Texto subrayado</u><sub>Texto en subíndice</sub><sup>Texto en superíndice</sup>
- En caso de que uses texto en negrita y cursiva para hacer énfasis y no solo para dar estilo, usa los elementos <strong> y <em> en lugar de <b> y <i>. De este modo, tu página web es más fácil de comprender al usar tecnologías como un lector de pantalla^{[4]XFuente de investigación} o el modo de lectura que ofrecen algunos navegadores.^{[5]XFuente de investigación}
Anuncio

Parte 3

Parte 3 de 6:

Agregar elementos adicionales al HTML

Descargar el PDF

1
Añade una imagen a tu página. Es posible añadir una imagen al HTML siguiendo los siguientes pasos:
- Escribe <img src= para abrir la etiqueta de la imagen.
- Copia y pega la URL de la imagen después del signo "=" entre comillas.
- Escribe > después de la URL de la imagen para cerrar la etiqueta de la imagen. Por ejemplo, en caso de que la URL de la imagen sea "http://www.miimagen.com/lago", escribirás lo siguiente:
  <img src="http://www.miimagen.com/lago.jpg">
2
Agrega un enlace a otra página. Es posible añadir un enlace al HTML siguiendo los siguientes pasos:
- Escribe <a href= para abrir la etiqueta del enlace.
- Copia y pega la URL después del signo "=" entre comillas.
- Escribe > después de la URL para cerrar la parte del enlace del HTML.
- Escribe un nombre para el enlace después del cierre de corchetes.
- Escribe </a> después del nombre del enlace para cerrar el enlace HTML.^{[6]XFuente de investigación} Este es un ejemplo de un enlace a Facebook.
  <a href="https://www.facebook.com">Facebook</a>.
Es posible añadir un salto de línea si escribes <br> en el HTML. Con esto se crea una línea horizontal con la que puedes dividir distintas secciones de la página.
Anuncio

Parte 4

Parte 4 de 6:

Personalizar los colores

Descargar el PDF

El Consorcio WWW (W3C, por sus siglas en inglés) administra una lista oficial de colores que puedes encontrar aquí. Cada color tiene un nombre oficial, un código hexadecimal de 6 dígitos y un valor decimal. Es posible usar cualquiera de estos valores para añadirles color a los elementos de tu página web. Para este ejemplo, se usarán los nombres oficiales de los colores.
2
Establece el color de fondo en la etiqueta <body>. Para hacerlo, añadirás el atributo style a la etiqueta. Imagina que quieres hacer que el color de fondo de toda la página sea lavender:
- <body style="background-color:lavender;">
3
Establece el color del texto para cualquier etiqueta. Asimismo, puedes usar el atributo style para especificar el color que quieras que tenga todo el texto dentro de una etiqueta en particular. Por ejemplo, imagina que quieres que el texto en una de las etiquetas <p> sea midnightblue:
- <p style="color:midnightblue;">
- El cambio de color afectará únicamente al texto dentro de esa etiqueta <p>. En caso de que empieces otra etiqueta <p> más adelante que también deba ser de color midnightblue, será necesario que allí también establezcas el atributo de estilo.
4
Establece el color de fondo para un encabezado o párrafo. De forma similar a como estableciste el color de fondo para la etiqueta del cuerpo, también es posible establecer colores de fondo para otras etiquetas. Imagina que quieres hacer que el color de fondo de una etiqueta <p> sea lightgrey y que el color de fondo de un encabezado estilo H1 sea lightskyblue. Usarías lo siguiente:
- <p style="background-color:lightgrey;">
- <h1 style="background-color:lightskyblue;">
Anuncio

Parte 5

Parte 5 de 6:

Cerrar el documento HTML

Descargar el PDF

Una vez que hayas terminado de añadir todo el texto, imágenes y otros elementos al cuerpo de tu documento HTML, añade esta etiqueta en la parte inferior del documento para cerrar el cuerpo.

How.com.vn Español: Step 2 Escribe </html> para cerrar el documento HTML.

Esta etiqueta se coloca debajo de la etiqueta para cerrar el cuerpo del HTML al final de tu documento. Con esto, le indicas al navegador web que no hay más código HTML después de esta etiqueta. Todo el documento HTML debe verse algo así:

<!DOCTYPE html><html><head><title>Página de fans de How.com.vn</title></head><body><h1>¡Bienvenidos a mi página!</h1><p>Esta es una página de fans para How.com.vn. ¡Siéntanse como en casa!</p><h2>Fechas importantes</h2><p><i>15 de enero de 2019</i>: El cumpleaños de How.com.vn</p><h2>Enlaces</h2><p>Este es un enlace a How.com.vn: <a href="http://www.wikihow.com">How.com.vn</a></p></body></html>

Anuncio

Parte 6

Parte 6 de 6:

Guardar y abrir tu página web

Descargar el PDF

1
Convierte tu documento a un texto sin formato (solo para usuarios de Mac). Haz clic en la opción de menú Formato en la parte superior de la pantalla y luego haz clic en Texto sin formato en el menú desplegable que se abra.
- Este paso no es necesario ni posible en Windows.
Se encuentra en la barra de menú en la parte superior de la pantalla.
3
Haz clic en Guardar como. Se encuentra en el menú desplegable debajo de "Archivo".
- Como alternativa, puedes hacerlo presionando Ctrl+S (Windows) o Comando+S (Mac).
Escribe lo que quieras que sea el nombre de tu documento en el cuadro de texto "Nombre de archivo" (Windows) o "Nombre" (Mac).
5
Cambia el tipo de archivo del documento. Será necesario que cambies el documento de un archivo de texto a un archivo HTML. Sigue los siguientes pasos para cambiar el tipo de archivo:
- Windows: haz clic en el menú desplegable "Guardar como tipo", haz clic en Todos los archivos y luego escribe .html al final del nombre de archivo.
- Mac: reemplaza el .txt al final del nombre de archivo por .html.
6
Haz clic en Guardar. Se encuentra en la parte inferior de la ventana. Al hacerlo, se creará un archivo HTML.
- Por lo general, los archivos HTML se abren con tu navegador web por defecto.
Para este punto, estarás listo para abrir tu archivo HTML en tu navegador de forma que puedas visualizar tu página web.
8
Abre el documento HTML con tu navegador. La mayor parte del tiempo, podrás abrirlo haciendo doble clic en el documento HTML. En caso de que hacer doble clic en el documento produzca un error, haz lo siguiente:
- Windows: haz clic derecho en el documento, selecciona Abrir con, y haz clic en el navegador que prefieras.
- Mac: haz clic una vez en el documento, haz clic en Archivo, selecciona Abrir con y haz clic en el navegador que prefieras.
9
Edita el documento HTML de ser necesario. Quizás observes un error en la página HTML. Si quieres cambiarlo, puedes editar el texto del documento HTML:
- En Windows, puedes hacer clic derecho en el documento y luego en Editar en el menú desplegable que se abra (en caso de que tengas instalado Notepad++, aquí dirá en cambio Editar con Notepad++).
- En Mac, debes hacer clic en el documento para seleccionarlo, luego en Archivo, seleccionar Abrir con y hacer clic en TextEdit. Asimismo, puedes arrastrar el documento a TextEdit.
Anuncio

Consejos

Siempre debes cerrar las etiquetas en espejo a sus contrapartes abiertas. Por ejemplo, debes cerrar <tag1><tag2> como </tag2></tag1>.
Es posible añadir a tu sitio web texto que se desplace hacia un lado mediante la etiqueta <marquee></marquee>, aunque debes tener en cuenta que es posible que algunos navegadores no reconozcan esta etiqueta.
Muchas personas usan Notepad++ para escribir y compilar sus códigos.
Si es que quieres centrar una imagen en tu página, puedes escribir <class="center"> después del nombre de la imagen en la etiqueta img (por ejemplo, <img src="URL" class="center">).

Anuncio

Advertencias

Lo mejor es que alojes tus propias imágenes en Imgur o algo similar en caso de que tengas la intención de subir imágenes a tu página web. Si publicas imágenes de otras personas, esto podría dar como resultado una violación de derechos de autor.

Anuncio