Estructura del documento HTML: aprenda la estructura básica de HTML

Publicado: 2020-12-14

HTML se ha utilizado como lenguaje de marcado estándar para documentos accesibles en Internet a través de los datos del navegador. HTML consta de una serie de elementos cortos, etiquetas y códigos que, cuando se compilan en un formato estructurado, crean una página web que cualquier persona puede ver con un acceso adecuado a Internet.

Ha cambiado la forma de trabajar de la gente. HTML y CSS se utilizan para crear y manipular elementos en una página web junto con javascript, HTML permite a los creadores definir diferentes roles para cada elemento, lo que brinda total libertad de personalización en el proceso de creación.

HTML significa lenguaje de marcado de hipertexto y se utiliza para diseñar páginas web que se muestran en sitios web.

Hay tres aspectos principales que, cuando se juntan, ayudan a construir una página web.

Estructura HTML : admite los elementos estructurales.
Estilo CSS —ayuda a diseñar y da estilo a esos elementos estructurales
Interacción JS : permite la interacción entre esos elementos.

En la estructura HTML, los elementos y las etiquetas se emparejan entre sí para marcar el contenido.

Cada página disponible en Internet incluye etiquetas HTML. Estas etiquetas ayudan a mostrar contenido en línea con una perspectiva clara y abierta, que siempre se puede moderar y modificar. Para explicar las cosas de manera más simple, describamos cómo se usan los elementos y las etiquetas en el programa.

Los elementos de apertura y cierre cambian, pero las etiquetas siguen siendo las mismas. Las etiquetas se insertan antes y al final de las oraciones, lo que les permite formatearse en la página. Una página web ideal consta de tres secciones principales y esenciales:

Título
Cabeza
Cuerpo

El elemento Head se utiliza para resaltar el inicio/título de la sección de encabezado. La sección de encabezado siempre ayuda como descripción de la página. El contenido dentro de las etiquetas de encabezado, es decir, el encabezado, es lo que se utiliza como fuente para identificar el contenido de la página.

A continuación se enumeran todas las etiquetas que se pueden utilizar en el elemento de cabecera:

<base>
<enlace>
<meta>
<sin guion>
<script>
<estilo>
<título>

Por ejemplo:

<JEFE>

<TITLE> Un ejemplo de Hola mundo en HTML<TITLE>

</HEAD>

Los elementos de nivel de bloque se utilizan para identificar secciones específicas de una página web, ya sea un párrafo, subtítulos o algunas listas para crear.

Párrafo: <P>y </P>

Encabezado, nivel uno:<H1>Encabezado, nivel dos:<H2>y </H2>

Regla horizontal:<HR> Centrado:<CENTRO>

Pie de página : no hay etiquetas especiales para indicarlo, pero aún así se recomienda tener un pie de página en la página web para ayudar a identificar las secciones que requieren contacto con el autor. Pueden incluir una sección de preguntas frecuentes o un correo electrónico para suscribirse a un boletín.

<HTML>

<JEFE>

<TITLE>Una empresa de calzado <TITLE>

</HEAD>

<H1>¡Bienvenido a Amazing Shoes! </H1>: </H2>

<CENTER> Por qué no visitar <A HREF =..http://www.example1.com/..>Sitio web de ejemplo

</A>

</CENTRO>

</BODY>

</HTML>

La sección anterior explicó los elementos principales en una página web de una estructura HTML.

Ahora, nos movemos hacia la fuente HTML y tratamos de entender cómo se puede usar para entender la estructura del programa y sus elementos.

Como principiante, esto ayuda mucho a comprender cómo se desarrollan otras páginas y puede usarse como referencia para crear una versión personalizada para su propia página web.

Haga clic en el botón derecho en cualquier parte de la página web y luego seleccione 'ver código fuente de la página'. Esto abrirá una ventana que contiene el código fuente de la página.

Para inspeccionar una página

Haga clic en el botón derecho en cualquier parte de la página web y luego seleccione 'Inspeccionar' para ver la lista y los tipos de elementos utilizados para construir esa página web específica. Incluiría tanto HTML como CSS, que se pueden modificar a través del panel de estilo.

Con la estructura básica de HTML y sus etiquetas explicadas, ahora avancemos hacia la comprensión de los elementos básicos necesarios para escribir contenido en HTML.

<p> Esta etiqueta se usa en una página web cuando se necesita un párrafo, y para finalizar se usa la etiqueta </p>.

<br> Esta etiqueta se usa para dividir líneas y se usa principalmente para escribir líneas individuales, ya sea contacto o dirección.

<hr> Esta etiqueta se utiliza para separar el contenido de la página web en dos secciones.

Todas las etiquetas aquí están implementadas en un código de página web de muestra

Aprender: 21 ideas de proyectos de desarrollo web

APORTE

<html>

<título></título>

</cabeza>

<h1>Estructura de HTML</h1>

<p>

Por upGrad Education<br>

<hr>

Aprenda lo básico <br>

<hr>

Por upGrad Education<br>

</p>

</cuerpo>

</html>

Atributos

Para todas las etiquetas mencionadas, se utiliza un atributo cuando se necesita información adicional. Los atributos se definen con dos parámetros, a saber, 'valor' y 'nombre'.

Aquí, el parámetro 'nombre' tiene la función de tomar el nombre de la propiedad que se considera asignada. Y el parámetro 'valor' tiene una función similar para tomar el valor de los nombres de propiedad que se alinean con el elemento.

<img> Este atributo se usa para agregar/incrustar una imagen en la página web. Esta etiqueta ayudará a especificar la ruta de la imagen. Y el <height> y <width> indican el alto y el ancho de la imagen, respectivamente.

<alt> Este atributo se aplica cuando la imagen no puede cargarse debido a un error en la conexión o por alguna otra razón. La etiqueta alt sirve como subtítulo para la imagen.

Inscríbase en cursos de ingeniería de software de las mejores universidades del mundo. Obtenga programas Executive PG, programas de certificados avanzados o programas de maestría para acelerar su carrera.

Leer: 8 emocionantes ideas y temas de proyectos de pila completa

Ejemplo

<html>

<h2>El atributo src</h2>

<p>Las imágenes HTML se definen con la etiqueta img y el nombre de archivo de la fuente de la imagen se especifica en el atributo src:</p>

</cuerpo>

</html>

Para cambiar el estilo del texto, el tamaño, la fuente y cualquier otra función relacionada con el texto, se usa la etiqueta <style>

Ejemplo

<html>

<h2>El atributo de estilo</h2>

<p>El atributo se usa para cambiar estilos, como el color:</p>

<p style=”color:red;”>Este es un párrafo rojo.</p>

</cuerpo>

</html>

Con las aplicaciones de modificación de texto, HTML también proporciona etiquetas para modificar el texto según las solicitudes personalizadas utilizando estas etiquetas.

<b> – texto en negrita
<strong> – Texto importante
<i> – Texto en cursiva
<em> – Texto enfatizado
<mark> – Texto marcado
<pequeño> – Texto más pequeño
<del> – Texto eliminado
<ins> – Texto insertado
<sub> – Texto de subíndice
<sup> – Texto en superíndice

Para resumir el artículo, aprendimos las siguientes características y conceptos básicos de HTML:

Estructura HTML
Etiquetas, elementos y sus tipos.
Etiquetas básicas y sus aplicaciones

Todas estas características, etiquetas y atributos ayudan a comprender la necesidad de HTML.

Si está interesado en obtener más información sobre el desarrollo de software de pila completa, consulte el programa Executive PG de upGrad & IIIT-B en desarrollo de software de pila completa, que está diseñado para profesionales que trabajan y ofrece más de 500 horas de capacitación rigurosa, más de 9 proyectos, y asignaciones, estado de ex alumnos de IIIT-B, proyectos finales prácticos y asistencia laboral con las mejores empresas.

Prepárate para una carrera del futuro

Aplicar ahora para Maestría en Ingeniería de Software