HTML significa lenguaje de marcado de hipertexto. Se utilizan varias etiquetas para hacer una estructura de páginas web. Estas etiquetas también se conocen como elementos HTML. El contenido de visualización de elementos HTML en el navegador.

Los resultados de aprendizaje de este artículo son:

• ¿Qué es la estructura de documentos HTML??
• ¿Qué son las etiquetas HTML??
• ¿Cuáles son los elementos y atributos HTML??

En la próxima sección, se discutirá la estructura del documento HTML.

¿Qué es una estructura de documentos HTML??

Un documento de estructura HTML se ve así:

Linuxhint

Sitio web del mejor tutorial

Los elementos que se utilizan en el código mencionado anteriormente se explican a continuación:

• ""¿Es la declaración de un documento HTML5.
• ""Es el componente principal de una página HTML. El atributo lang con el valor "interno"Representa el idioma inglés.
• ""Sostiene la metainformación sobre la página.
• ""Especifique la codificación UTF-8 al traducir el código al texto legible por humanos al navegador o viceversa.
• ""Contiene el enlace a la hoja de estilo CSS.
• ""Define un título de página HTML que se mostrará en la barra de título del navegador.
• ""Etiqueta de cierre del elemento.
• "El elemento contiene el contenido visible en el navegador.
• "

  El elemento determina el encabezado en el documento.

• "

  "Define un párrafo.

• ""¿Es la etiqueta de cierre del elemento del cuerpo?.
• ""¿Es la etiqueta de cierre del elemento raíz HTML.

Producción

En la salida anterior, la flecha roja representa el título, la flecha azul representa el encabezado y la flecha verde representa el párrafo.

¿Qué son las etiquetas HTML??

Hay varias etiquetas utilizadas para constituir una página HTML. Estas etiquetas también se conocen como elementos HTML y se determinan mediante una etiqueta de inicio, contenido en la etiqueta y finalización de la etiqueta. Las etiquetas son de dos tipos que son:

• Etiquetas emparejadas
• Etiquetas vacías

Ejemplo 1: Cómo usar etiquetas emparejadas en HTML?

Los elementos HTML que tienen un inicio y las etiquetas de cierre se llaman etiquetas emparejadas. Algunos ejemplos de etiquetas emparejadas se mencionan a continuación:

La etiqueta de encabezado

La etiqueta del párrafo

Este texto es cursiva
Un texto de Strikethrough

Estos elementos están escritos dentro del elemento del cuerpo del archivo HTML.

La salida del código mencionado anteriormente se muestra a continuación:

Entonces, el resultado del

La etiqueta es señalada por la flecha azul,

La etiqueta está indicada por la flecha verde, La etiqueta está indicada por la flecha rosa, y la flecha roja apunta a un resultado de la etiqueta.

Ejemplo 2: ¿Qué son las etiquetas vacías en HTML??

Algunas etiquetas HTML se conocen como elementos vacíos porque consisten solo en etiquetas de inicio, como
,

---

Etiquetas y más.

¿Cuáles son los elementos y atributos HTML??

Los elementos HTML, a veces conocidos como etiquetas, pueden asociarse con atributos. Estos atributos se escriben en la etiqueta de inicio y se utilizan para agregar información adicional a los elementos. Los atributos tienen nombres y valores.

Ejemplo: estructura de página HTML

A continuación se muestra un ejemplo de una página HTML:

• "El elemento especifica una división o componente en un documento HTML.
• "clase"Es el atributo que especifica los nombres de clases para que un elemento se use en CSS y JavaScript:

Después de que se agrega el contenedor Div. Ahora, especificaremos una sección de encabezado utilizando los siguientes elementos:

• "El elemento contiene la parte introductoria inicial.
• ""Es una etiqueta de anclaje que crea un hipervínculo a los archivos HTML.
• "href"¿Es el atributo con la etiqueta que contiene el enlace de otros archivos HTML.
• "
• "
  "Se utiliza para agregar una lista desordenada al documento HTML, como una lista de viñetas.
  • "
  • "Representa un elemento en una lista:

  
  LOGO
  
  

  Después de agregar el elemento de encabezado, agregue un elemento DIV con el nombre de la clase "principal"Eso contiene la imagen. Para colocar una imagen, un HTML ""La etiqueta se utiliza asociada con los atributos:

  • "SRC"Es el atributo que especifica la ruta de una imagen.
  • "alternativoEl atributo se utiliza para especificar algún texto que se mostrará en la pantalla en lugar de la imagen si la imagen no se carga:

  
  
  

  Luego, agregue un DIV con el nombre de la clase "artículo". Sostiene los elementos enumerados a continuación:

  • "El elemento especifica contenido independiente e independiente.
  • "

    "Se agrega para incluir el encabezado.

  • "

    El elemento se usa para especificar un párrafo en HTML:

  
  

  
  

  Cabecera del artículo

  
  

  Linuxhint es el mejor sitio web en línea. Se desarrolla con fines educativos. Escribimos artículos y hacemos videos para enseñar el mundo en línea!

  
  

  
  

  Luego, agregue un elemento de pie de página de la siguiente manera:

  • "El elemento agrega un pie de página al documento HTML. Normalmente contiene información sobre datos de derechos de autor, enlaces y sobre el autor.
  • "El elemento especifica el pequeño tamaño de fuente:

  Entonces, hemos aprendido sobre varios elementos y atributos utilizados en un documento HTML. Ahora, guarde los cambios en el archivo y ábralo en el navegador web. Como resultado, su página web se verá así:

  Ahora, diseñemos nuestra página web usando CSS.

  Elemento de estilo "cuerpo"

  cuerpo
  margen: 0;
  relleno: 0;
  dimensionamiento de la caja: border-box;
  Font-Family: Verdana, Ginebra, Tahoma, Sans-Serif;
  

  A continuación se presentan las propiedades aplicadas a la sección del cuerpo HTML:

  • "margenLa propiedad se utiliza para agregar espacio alrededor del elemento.
  • "rellenoPropiedad utilizada para insertar espacio dentro del borde del elemento o alrededor del contenido del elemento.
  • "dimensionador"Con el valor"caja de fronteras"Extiende el ancho y la altura del animal hasta los bordes de la frontera.
  • "Familia tipográficaLa propiedad está establecida con la lista de valores. Esta lista se proporciona para garantizar que si el navegador no admite el primer estilo, se utilizará el otro.

  Estilo "Container" Div

  .envase
  anchura máxima: 90%;
  margen: 0 auto;
  

  Aquí:

  • "anchura máxima"La propiedad especifica el ancho máximo del elemento.
  • "margen"La propiedad agrega espacio alrededor del elemento.

  Estilo "principal" Div

  principal
  Pantalla: Flex;
  Justify-Content: Center;
  

  El elemento principal tiene las siguientes propiedades:

  • "mostrar"Property Flex hace que el diseño del elemento sea flexible para los elementos dentro de él.
  • "Justify-Content"La propiedad establece la alineación del elemento del elemento flexible verticalmente.

  Elemento de estilo "encabezado"

  encabezado
  Top-top: 10px;
  Botón de relleno: 10px;
  Color de fondo: #ffffff;
  Pantalla: Flex;
  Justify-Content: Space-between;
  Alineación de ítems: Centro;
  

  El elemento encabezado está decorado con las propiedades mencionadas a continuación:

  • "acolchado superior"La propiedad agrega el espacio en la parte superior del elemento.
  • "fondo acolchadoLa propiedad establece el espacio desde la parte inferior del elemento.
  • "color de fondo"La propiedad asigna el color de fondo del elemento.
  • "mostrar"Propiedad con el valor"doblar"Hará que el elemento sea flexible para los elementos dentro de él.
  • "Justify-Content"Con el valor del espacio, agregará espacio entre sus elementos.
  • "ítems alineados"La propiedad establece la alineación del artículo horizontalmente.

  Estilo "UL" del elemento "Header"

  encabezado ul
  Estilo de lista: Ninguno;
  Pantalla: Flex;
  

  El elemento UL de la etiqueta de encabezado se aplica con estas propiedades de estilo:

  • "estilo de lista"La propiedad está establecida en"ninguno"Eso eliminará el estilo de bala de la lista.
  • "mostrar"La propiedad funcionará igual que se discutió antes.

  Elemento de estilo "A"

  encabezado ul li a
  Decoración de texto: ninguna;
  relleno: 10px;
  Color: #000000;
  

  Aquí:

  • "decoración de texto"Propiedad con el valor"ninguno"Elimina el subrayado del texto.
  • "relleno"La propiedad agrega espacio dentro del límite del elemento.
  • "color"La propiedad especifica el color de la fuente.

  Elemento de estilo "img"

  img
  Fit de objeto: cubierta;
  Ancho: 100%;
  Altura: 300px;
  

  El "imgEl elemento se diseña al proporcionar las siguientes propiedades:

  • "ajuste de objeto"Establece el contenido del elemento reemplazado.
  • "ancho"La propiedad define el ancho del elemento.
  • "alturaLa propiedad se usa para definir la altura del elemento.

  Elemento de "artículo" de estilo

  artículo
  Ancho: 450px;
  Text-Align: Center;
  margen: auto;
  

  El elemento del artículo está diseñado con las propiedades explicadas a continuación:

  • "anchoLa propiedad se utiliza para la configuración del ancho del elemento.
  • "texto alineado"Define la alineación del texto del elemento.
  • "margenLa propiedad genera espacio alrededor del elemento.

  Elemento de estilo "pie de página"

  pie de página
  Top-top: 20px;
  Botón de relleno: 20px;
  Color de fondo: #000000;
  Color: #ffffff;
  Text-Align: Center;
  

  El "pie de páginaEl elemento está diseñado con las propiedades que se explican a continuación:

  • "acolchado superior"La propiedad agrega espacio en la parte superior del contenido del elemento.
  • "fondo acolchadoLa propiedad se utiliza para agregar el espacio inferior del contenido del elemento.
  • "color de fondo"Establece el color de fondo del elemento.
  • "color"Se utiliza para especificar el color de la fuente.

  Estilo "H2" del elemento "Artículo"

  Artículo H2
  Text-Align: Center;
  

  El elemento H2 dentro de la etiqueta del artículo se aplica con el "texto alineado"Propiedad con el Centro de Valores.

  Estilo "P" del elemento "Artículo"

  Artículo P
  Font-Family: Verdana, Ginebra, Tahoma, Sans-Serif;
  tamaño de fuente: 20px;
  

  Aquí:

  • "Familia tipográficaLa propiedad se establece con los valores Verdana, Ginebra, Tahoma, Sans-Serif. Esta lista se proporciona para garantizar que si el primer estilo no es compatible con el navegador, se aplicará la otra.
  • "tamaño de fuente"Establece el tamaño de la fuente.

  Aquí está el aspecto final de la página HTML después de aplicar las propiedades de CSS:

  Esa fue toda la información esencial relacionada con la estructura de una página HTML.

  Conclusión

  Un documento HTML es una estructura de una página web. Varios elementos se utilizan en documentos HTML que instruyen al navegador qué mostrar en la página web. Estos elementos pueden emparejarse con sus etiquetas de inicio y finalización o pueden estar vacíos, como
  ,

  ---

  Etiquetas y más. Los elementos HTML se aplican propiedades de estilo con el uso de CSS. Para una mejor comprensión, este artículo ha explicado la estructura de la página HTML con la ayuda de un ejemplo práctico.