Autor:
Laura McKinney
Fecha De Creación:
3 Abril 2021
Fecha De Actualización:
1 Mes De Julio 2024
Contenido
HTML (HyperText Markup Language) es un lenguaje básico para crear páginas web. Fue creado como un lenguaje de codificación fácil y flexible. Casi todas las páginas web de Internet se desarrollan con alguna forma de este código (ColdFusion, XML, XSLT). HTML es fácil de entender, pero puede seguir aprendiendo sobre él durante mucho tiempo si está interesado en su funcionalidad completa. Para agregar color y diversión a su sitio web, puede aprender CSS básico tan pronto como se acostumbre a una página HTML básica.
Pasos
Parte 1 de 4: Creación de un documento
Abra un editor de texto simple. NotePad es una buena opción y se puede descargar de forma gratuita. Puede escribir HTML con la mayoría de los editores de texto, pero el software más complejo con capacidades de formato automático puede dificultar la organización de su página HTML.
- No utilice TextEdit, ya que normalmente guarda el archivo en un formato que su navegador puede no reconocer como HTML.
- También puede utilizar un editor HTML en línea. Los programas de edición de HTML dedicados no se recomiendan para principiantes.
Guarde un archivo como página web. Elija Archivo → Guardar como en el menú de la parte superior. Cambie el formato de archivo a "Página web", ".html" o ".htm". Guarde el archivo donde pueda encontrarlo fácilmente.- No hay diferencia entre estas tres opciones.
Abra el archivo en un navegador. Haga doble clic en el archivo y se abrirá automáticamente como una página web en blanco en su navegador. Alternativamente, puede abrir un navegador, como Firefox o Internet Explorer, y luego usar Archivo → Abrir archivo para seleccionar el documento.
- Este sitio web no está en línea. Solo se puede ver en su computadora.
Actualice la página web y vea los cambios realizados. Escriba lo siguiente en su documento en blanco: Hola. Guarde el documento. Actualice la página web en blanco en su navegador, y debería ver la palabra "Hola" en negrita aparecer en la parte superior de la página. Siempre que desee probar su nuevo HTML durante este tutorial, guarde el documento .htm y luego actualice la ventana de su navegador para ver cómo se compila HTML.- Si ves las palabras ""y"'' Aparece en su navegador, el archivo no se ha compilado correctamente en HTML. Pruebe con un editor de texto diferente o un navegador diferente.
Aprenda las etiquetas. Los comandos HTML están escritos en "etiquetas" que le dicen al navegador cómo compilar y mostrar su página web. Siempre se escriben entre comillas simples., y no se muestran en la página web como los usó en el ejemplo anterior: - es una "carta inicial" o "carta inicial". Todo lo que se escriba después de esta etiqueta se definirá como "negrita" (negrita en una página web).
- es una "etiqueta final" o "etiqueta de cierre", que se puede distinguir por el símbolo / signo. Denota el final del texto en negrita. La mayoría (no todas) las etiquetas necesitan una etiqueta de cierre para funcionar, así que asegúrese de incluirla.
Construye tu documento. Elimina todo en tu documento HTML. Empiece de nuevo con el siguiente texto, exactamente como fue escrito (menos las viñetas). Este código HTML le dice al navegador qué tipo de HTML está utilizando y que todo su HTML se colocará dentro de las etiquetas. y .
Agrega las etiquetas de la cabeza (head) y del cuerpo. Los documentos HTML se dividen en dos partes. La sección "superior" es para información especial, como el título de la página. La sección "cuerpo" contiene el contenido principal de la página. Agregue estas dos secciones a su documento y recuerde incluir las etiquetas finales. El texto recién agregado está en negrita:
Dale un título a tu página. La mayoría de las cartas de la sección principal no son importantes para aprender con un principiante. Sin embargo, la etiqueta del título es fácil de usar y determinará lo que aparece como el nombre de la ventana del navegador o en la pestaña del navegador. Coloque las etiquetas de inicio y finalización de su título dentro de las etiquetas de encabezado y escriba los encabezados que desee entre esas etiquetas:
Mi primera página HTML.
Parte 2 de 4: Formato de texto
Agrega texto a tu cuerpo. Para esta sección, solo trabajaremos con etiquetas corporales. El otro texto seguirá estando en su documento, pero ahorraremos espacio al no repetirlo en este tutorial. Escribe lo que quieras entre las cartas y , y aparecerá como el primer contenido de su página. Por ejemplo:
- Seguí las instrucciones de wikiHow para escribir una página HTML.
Agrega títulos para el texto. Organice su página con etiquetas de encabezado, que indican al navegador que muestre el texto entre ellas en un tamaño de fuente más grande. Estas etiquetas también las utilizan los motores de búsqueda y otras herramientas para determinar de qué trata su sitio web y cómo está organizado.
es el encabezado más grande y puede crear encabezados más pequeños hasta
. Pruébelos en su página:Bienvenido a mi página.
- Seguí las instrucciones de wikiHow para escribir una página HTML.
Mi objetivo hoy:
Objetivos cumplidos:
- Aprenda a usar los títulos.
Metas sin completar:
- Obtenga más información sobre las etiquetas de formato de texto.
Obtenga más información sobre las etiquetas de formato de texto. Ya ha visto la etiqueta "fuerte", pero hay muchas otras formas de formatear su texto. Pruebe estas etiquetas o con varias etiquetas a la vez para la misma cadena de texto. ¡Recuerde agregar etiquetas finales en la parte posterior!
- Texto importante, que se muestra en negrita en el navegador.
- Texto enfatizado, mostrado en cursiva en el navegador.
- Texto un poco más pequeño de lo habitual. Este texto cambiará de tamaño automáticamente si se usa en un encabezado.
El texto ya no es relevante, se muestra con un guión en el cuerpo.- El texto se inserta más tarde que otros documentos y se muestra subrayado.
Organiza el texto en tu página. Puede notar que presionar la tecla "Enter" no es suficiente para que el texto aparezca en otra línea. Estas etiquetas pueden ayudarlo a crear párrafos y saltos de línea, u organizar su texto de otras formas:
Abreviatura de "párrafo", la etiqueta (párrafo) mantendrá todo el texto entre estas etiquetas en un párrafo y lo separará del texto de arriba y de abajo.
Esta etiqueta generará saltos de línea. No le agregue una etiqueta final, ya que no interfiere con ningún otro contenido. Utilice esta etiqueta en poemas o líneas de dirección, no en párrafos.Si necesita mostrar el texto con mucha precisión, esta etiqueta establece el texto dentro de ella en una fuente de ancho fijo (cada letra tiene el mismo ancho) y le permite crear intervalos Los espacios en blanco y los saltos de línea que desee para la edición regular en lugar de etiquetas.
Esta etiqueta define el tipo de texto que se cita de una fuente.
Puede describir la fuente más tarde con citar tarjeta.
Agrega texto de subtítulos invisible. Las etiquetas de comentario no se muestran en la página web. Le permiten anotar usted mismo en el documento HTML sin afectar el contenido. No agregue una etiqueta de cierre.
- Las tarjetas que van solas sin etiquetas finales se denominan "etiquetas vacías".
Combínalos juntos. La mejor forma de recordar estas etiquetas es utilizarlas en su sitio web. A continuación, se muestra un ejemplo que utiliza las tarjetas en los pasos que ha aprendido hasta ahora. Intente predecir cómo aparecerán en el navegador, luego cópielos en su documento y averigüe. anuncio
Parte 3 de 4: Agregar enlaces e imágenes
Obtenga más información sobre los atributos. Las etiquetas pueden tener información adicional escrita dentro de ellas, llamadas atributos. Estos atributos están representados por palabras adicionales dentro de las propias etiquetas, en la forma nombre de propiedad = "valor específico". Por ejemplo, cualquier etiqueta HTML puede tener el atributo de título:
El párrafo de introducción está aquí.
Titula el párrafo "Introducción", que aparecerá cuando pasas el cursor sobre el párrafo en la página web.
Enlaces a otros sitios web. Uso de tarjetas para crear un hipervínculo a cualquier otra página web. Inserte la URL de la página web para vincular usando el atributo href. A continuación, se muestra un ejemplo que enlaza con la página web que está leyendo:
Agregue un atributo de identificación a la etiqueta. Otro atributo que puede utilizar cualquier etiqueta HTML es el elemento "id". En cualquier tarjeta, escribe id = "vidu" o use cualquier nombre que no contenga espacios. No produce ningún efecto visible, pero lo usaremos en el siguiente paso.
- Por ejemplo, agregue lo siguiente a su documento:
Este párrafo se utiliza como ejemplo para describir cómo funciona el atributo id.
- Por ejemplo, agregue lo siguiente a su documento:
Enlace a un elemento con una determinada identificación. Ahora podemos usar la etiqueta de hipervínculo, , para enlazar a otra ubicación en la misma página. En lugar de una URL, usaremos el símbolo #, seguido del valor de identificación al que queremos vincularnos. Por ejemplo, Este texto se vinculará al texto con la identificación "vidu".
- Todos los valores HTML distinguen entre mayúsculas y minúsculas. "#VIDU" y "#vidu" se vincularán a la misma ubicación.
- Si su página es lo suficientemente corta como para mostrar toda la página a la vez, probablemente no notará nada cuando haga clic en el enlace en su navegador. Cambie el tamaño de la ventana hasta que aparezca la barra de desplazamiento y vuelva a intentarlo.
Agregar fotos. Tarjeta
es una etiqueta vacía, lo que significa que no se necesita una etiqueta final. Toda la información que el navegador necesita para mostrar la imagen se agrega mediante atributos. Aquí hay un ejemplo para mostrar el logotipo de wikiHow, con una descripción para cada atributo detrás:
- Propiedades src = "" le dice al navegador dónde está la foto. (Tenga en cuenta que publicar una foto del sitio de otra persona se considera inapropiado y la foto desaparecerá cuando la página ya no esté activa).
- Propiedades estilo = "" Puede hacer muchas cosas, pero lo más importante es que se utiliza para establecer el ancho y el alto de una imagen en píxeles. (También puede usar los atributos separados width = "" y height = "" en su lugar, pero esto puede provocar problemas extraños de cambio de tamaño si usa CSS).
- Propiedades alt = "" es una breve descripción de la imagen que el usuario verá si la imagen no se carga. Esto se considera un requisito, ya que se utiliza para lectores de pantalla para visitantes ciegos del sitio web.
Parte 4 de 4: Obtenga más información sobre cómo agregar y poner su sitio web en línea
Confirma tu HTML. La validación HTML busca errores en su código. Si su sitio no se muestra correctamente, la validación puede ayudarlo a encontrar el error que causa el problema. También puede enseñarle más sobre HTML al determinar que el código se ve bien en la pantalla, pero ya no se recomienda debido a las nuevas actualizaciones en el estándar HTML. El uso de HTML no válido no inutiliza su sitio, pero puede causar problemas o mostrarse inestable en diferentes navegadores.
- Pruebe un servicio de validación en línea gratuito del W3C o busque otra herramienta de validación de HTML 5 en línea.
Obtenga más información sobre etiquetas y atributos. Hay muchas otras etiquetas y atributos HTML, y muchos lugares para aprenderlos:
- Pruebe w3schools y HTML Dog para obtener más tutoriales y listas completas de etiquetas.
- Busque una página web que le guste y utilice la función "Ver código fuente de la página" de su navegador para obtener el código HTML. Cópielo en su documento y estudie cómo funciona.
- Lea otros artículos y aprenda cómo crear tablas en HTML, use metaetiquetas para aumentar sus posibilidades de ser encontrado por los motores de búsqueda o use una división. establecer un área en la página) y span (usado para especificar el estilo del elemento de texto) para ayudar al estilo mediante CSS.
Obtenga su sitio web en línea. Elija un servicio para alojar su sitio web y luego podrá cargar tantas páginas HTML como desee en su dominio web personal. Para hacer esto, necesitará utilizar un software de carga FTP, pero muchos servicios de alquiler web también ofrecen este servicio.
- Al vincular a páginas o imágenes que están directamente en su sitio, deberá utilizar la dirección completa del sitio. Por ejemplo, si su nombre de dominio es www.chuyengiahtmlsieudang.com, entonces el texto está en estas etiquetas enlazará a "www.chuyengiahtmlsieudang.com/nhatky/thuhai.html"
Agrega estilos con CSS. Si su página HTML parece un poco monótona, intente aprender los conceptos básicos de CSS para agregar colores, diferentes fuentes y un mejor control sobre dónde se colocan los elementos. Vincular una "hoja de estilo" CSS a una página HTML le permitirá realizar cambios drásticos sobre la marcha, ajustando automáticamente el estilo de todo el texto dentro de una etiqueta determinada. Puede jugar un poco con la capa de formato básico aquí, o sumergirse en tutoriales más detallados en el Tutorial CSS de HTML Dog.
Agregue JavaScript a su sitio web. JavaScript es un lenguaje de programación que se usa para agregar mucha funcionalidad a sus páginas HTML. Los comandos de JavaScript se insertan entre las etiquetas de inicio y finalización y se puede utilizar para agregar botones interactivos, calcular problemas matemáticos y más. Obtenga más información en los ejemplos de w3c. anuncio
Consejo
- La declaración de tipo de documento (Declaración de tipo de documento utilizada) que se utiliza en este tutorial es "HTML 4.0.1 transitorio suelto" (HTML 4.0.1 no transición ajustada), un formato fácil. para principiantes. Utilizar () una alternativa a que el navegador lo compile en un formato HTML 5 estricto, que es el estilo estándar recomendado (aunque menos utilizado).
Advertencia
- El propósito de HTML es mantener el contenido en un formato global. No tiene control sobre la presentación de su sitio web, como el color de fondo y la ubicación exacta de los elementos. Si bien todavía hay etiquetas que le permiten hacer esto, es una buena idea usar CSS para crear un sitio web más controlable y consistente.
Que necesitas
- Un editor de texto simple, como NotePad o TextEdit
- Un navegador web, como Internet Explorer o Mozilla Firefox
- (Opcional) Un editor HTML como Adobe Dreamweaver, Aptana Studio o Microsoft Expression Web
