Cómo crear una página web simple con HTML: 9 pasos (con imágenes)

Thystale You Keaches Cómo escribir una página web simple con HTML (lenguaje de marcado de hipertexto). HTML es uno de los componentes centrales de la World Wide Web, que inventa la estructura de las páginas web. Una vez que haya creado su página web, puede guardarla como un documento HTML y verlo en su navegador web. La creación de una página HTML es posible utilizando editores de texto básicos que se encuentran en las computadoras Windows y Mac.

Pasos

Parte 1 de 6:

Añadiendo una cabeza a tu html

1. Abrir un editor de texto. En una computadora que ejecute el sistema operativo Windows, generalmente usará el Bloc de notas, o Notepad ++, mientras que los usuarios de MacOS usarán los usuarios de TextEdit y Chromeos usarán texto:

Ventanas - Abierto Comienzo

, escribir bloc, o bloc++ y haz clic Bloc o "Bloc de notas ++ o sublime" en la parte superior de la ventana.

Mac OS - Hacer clic Destacar

, escribir textedit, y doble clic Textedit en la parte superior de los resultados.

Chromeos - Abra el lanzador, luego haga clic en Texto. (El icono dice el cojín de códigos).

2. Escribir y presionar ↵ entrar. Esto le dice al navegador web que este es un documento HTML.

3. Tipo y presiona ↵ entrar. Esta etiqueta de apertura para su código HTML.

4. Escribe y presiona ↵ entrar. Esta es la etiqueta que abre tu cabeza HTML. La información de la cabeza HTML que generalmente no se muestra en su página web. Esta información puede incluir, el título, los datos metáticos, las hojas de estilo CSS y otros idiomas de scripting.

5. Escribir . Esta es la etiqueta para agregar un título a tu página.

6. Escriba un título para su página web. Este puede ser cualquier título que desee nombrar su página web.

7. Escribe y presiona ↵ entrar. Esta es la etiqueta para cerrar tu etiqueta de título.

8. Tipo y presiona ↵ entrar. Esta es la etiqueta para cerrar la cabeza. Su código HTML debe verse así.

Parte 2 de 6:

Agregando un cuerpo y texto a tu HTML

1. Escribe debajo del cierre "Cabeza" etiqueta. Esta etiqueta abre el cuerpo de su documento HTML. Todo lo que va en el cuerpo HTML se muestra en la página web.

2. Escribir . Esta es la etiqueta para agregar un encabezado a su documento HTML. Un encabezado es un texto en negrita grande que normalmente va en la parte superior de su documento HTML.

3. Escriba un encabezado para su página. Este puede ser el título de su página o un saludo.

4. Tipo después de su texto en dirección y presione ↵ entrar. Esta etiqueta cierra tu encabezado.

Añadir encabezados adicionales a medida que avanza. Hay seis encabezados diferentes que puedes crear usando las etiquetas a través de. Estos crean encabezados de diferentes tamaños. Por ejemplo, para crear tres encabezados de tamaño diferente en sucesión, puede escribir lo siguiente:

Los encabezados muestran la prioridad o la importancia del texto. Pero no es necesario usar un encabezado más alto si desea utilizar cualquier partida inferior. Uno puede usar directamente H3, incluso si no hay H1 en su publicación.

5. Tipo . Esta es la etiqueta para abrir un párrafo. El texto del párrafo se utiliza para mostrar texto de tamaño normal.

6. Escribe algún texto. Esto puede ser una descripción para su página web o cualquier otra información que desee compartir.

7. Tipo después de su texto y presione ↵ entrar. Esta es la etiqueta para cerrar el texto del párrafo. El siguiente es un ejemplo del texto del párrafo en HTML:

Puede agregar múltiples líneas de párrafos seguidas para crear una serie de párrafos bajo un encabezado.

Puede cambiar el color de cualquier texto enmarcando el texto con las etiquetas. Asegúrate de escribir su color preferido en el "color" sección (mantendrás las cotizaciones). Puedes convertir cualquier texto (E.gramo., encabezados) en un color diferente con este conjunto de etiquetas. Por ejemplo, para convertir el archivo de texto de un párrafo, escribiría el siguiente código: Las ballenas son majestuosas criaturas.

Puede agregar negrita, cursiva y otros formatos de texto utilizando HTML.Los siguientes son ejemplos de cómo puede formatear el texto utilizando etiquetas HTML:

Si utiliza texto en negrita y cursiva para énfasis, no solo para peinar, use los elementos y los elementos en lugar de y . Esto hace que su página web sea más fácil de entender al usar tecnologías como un lector de pantalla o el modo de lector proporcionado en algunos navegadores.

Parte 3 de 6:

Añadiendo elementos adicionales a su HTML

1. Añadir una foto a tu página. Puede agregar una imagen a su HTML usando los siguientes pasos:

Tipo Para abrir la etiqueta de su imagen.
Copia y pega la URL de la imagen después de la "=" Iniciar sesión Cotizaciones.
Tipo > Después de la URL de la imagen para cerrar la etiqueta de su imagen. Por ejemplo, si la URL de la imagen es "http: // mi foto.com / lago", Usted escribiría lo siguiente:

2. Enlace a otra página. Puede agregar un enlace a su HTML usando los siguientes pasos:

Tipo Para abrir su etiqueta de enlace.

Copia y pega la URL después de la "=" Iniciar sesión Cotizaciones.

Tipo > Después de la URL para cerrar la parte del enlace del HTML.

Escriba un nombre para el enlace después del soporte de cierre.

Escriba después del nombre del enlace para cerrar el enlace HTML. El siguiente es un ejemplo de un enlace a Facebook.

3. Añadir una línea de descanso a su HTML. Puedes agregar una línea de descanso escribiendo a tu html. Esto crea una línea horizontal que se puede usar para dividir diferentes secciones de su página.

Parte 4 de 6:

Colores de personalización

1. Echa un vistazo a la lista de nombres y códigos de color HTML oficial. El World Wide Web Consortium (W3C) administra una lista oficial de colores que encontrará en https: // w3.org / wiki / css / propiedades / Color / Palabras clave. Cada color tiene un nombre oficial, código hexadecimal de 6 dígitos y un valor decimal. Puede usar cualquiera de estos valores para agregar color a elementos de su página web. Para este ejemplo, usaremos los nombres de color oficiales.

2. Establecer el color de fondo en la etiqueta. Lo harás agregando el estilo atributo a la etiqueta. Digamos que querías hacer el color de fondo de toda la página lavanda:

3. Establece el color de texto para cualquier etiqueta. También puedes usar el estilo atributo para especificar qué color desea que todo el texto dentro de una etiqueta en particular sea. Por ejemplo, digamos que querías hacer el texto en una de tus etiquetas de medianoche:

El cambio de color solo afectará el texto dentro de esa etiqueta. Si inicia otra etiqueta más tarde, eso también debería ser de medianoche, Tendrá que establecer el atributo de estilo allí también.

4. Establecer el color de fondo para un encabezado o párrafo. Similar a cómo configuras el color de fondo para la etiqueta del cuerpo, también puedes configurar colores de fondo para otras etiquetas. Digamos que querías hacer el color de fondo de un lightgrey, y el color de fondo de un encabezado de estilo H1 LightskyBlue, Usted usarías:

Parte 5 de 6:

Cerrando su documento HTML

1. Tipo para cerrar tu cuerpo. Después de que haya terminado de agregar todo su texto, imágenes y otros elementos al cuerpo de su documento HTML, agregue esta etiqueta en la parte inferior de su documento HTML para cerrar el cuerpo de su documento HTML.

2. Escriba para cerrar su documento HTML. Esta etiqueta pasa por debajo de la etiqueta para cerrar su cuerpo HTML al final de su documento HTML. Esto le dice al navegador web que no hay más código HTML después de esta etiqueta. Todo su documento HTML debe verse como esto:

Parte 6 de 6:

Guardando y abriendo tu página web

1. Convierta su documento a texto sin formato (solo usuarios de Mac). Haga clic en el Formato Artículo de menú en la parte superior de la pantalla, luego haga clic en Hacer un texto liso En el menú desplegable resultante.

Este paso no es necesario ni es posible en Windows.

2. Hacer clic Archivo. Está en la barra de menú en la parte superior de la pantalla.

3. Hacer clic Guardar como. Está en el menú desplegable a continuación "Archivo".

Alternativamente, puedes presionar control+S (Windows) o ⌘ comando+S (Mac) para hacerlo.

4. Ingrese un nombre para su documento HTML. Escriba lo que quiera nombrar su documento en el "Nombre del archivo" (Windows) o "Nombre" Caja de texto (mac).

5. Cambiar el tipo de archivo del documento. Tendrá que cambiar el documento desde un archivo de texto a un archivo HTML. Utilice los siguientes pasos para cambiar el tipo de archivo:

Ventanas - Haga clic en el "Guardar como tipo" Caja desplegable, haga clic en Todos los archivos, y luego escribe .html al final del nombre del archivo.

Mac OS - Reemplace la .TXT al final del nombre del archivo con .html en lugar de.

Chromeos - Haga clic en el "Guardar como" botón. Nombra el archivo con .html al final. El comienzo depende de ti.

6. Hacer clic Ahorrar. Está en la parte inferior de la ventana. Hacerlo creará un archivo HTML.

Los archivos HTML normalmente se abren con su navegador web predeterminado.

7. Cierre su editor de texto. En este punto, está listo para abrir su archivo HTML en su navegador para que pueda ver su página web.

8. Abra el documento HTML con su navegador. En la mayoría de los casos, podrá hacer doble clic en el documento HTML para hacer esto. Si hace doble clic en el documento produce un error, haga lo siguiente:

Ventanas - Haga clic con el botón derecho en el documento, seleccione Abrir con, y haga clic en su navegador preferido.

Mac - Haga clic en el documento una vez, haga clic en Archivo, Seleccione Abrir con, y haga clic en su navegador preferido.

9. Edite el documento HTML si es necesario. Puede notar un error en su página HTML. Para cambiarlo, puede editar el texto del documento HTML:

En Windows, puede hacer clic con el botón derecho en el documento y haga clic en Editar En el menú desplegable resultante (si tiene notepad ++ instalado, esto dirá Editar con el bloc de notas++ en lugar de).

En Mac, querrá hacer clic en el documento para seleccionarlo, haga clic en Archivo, Seleccione Abrir con, y haz clic Textedit. También puede arrastrar el documento a TextEdit.

En Chromebook, cierre la aplicación de texto, abra los archivos, encuentre su archivo y luego haga clic en él.

Muestra html

Hoja de trucos HTML

Página web de muestra con HTML

Video.

Al utilizar este servicio, se puede compartir información con YouTube.

Consejos

Las etiquetas siempre deben cerrarse en una imagen de espejo de sus contrapartes abiertas. Por ejemplo, debe estar cerrado como .

Puede agregar texto de desplazamiento lateral a su sitio web usando la etiqueta, pero tenga en cuenta que esta etiqueta podría no ser reconocida por algunos navegadores.

Muchas personas Utilizar el bloc de notas++ Para escribir y compilar su código.

Si desea centrar una imagen en su página, puede escribir después del nombre de la imagen en el img Etiqueta (por ejemplo,).

Advertencias

Es mejor alojar sus propias imágenes en Imgur o similar si planea cargar imágenes en su página web. Publicar fotos de otras personas puede resultar en infracción de derechos de autor.