Un sitio web consta de tres partes principales que son encabezadas, cuerpo y pie de página. Estas partes son creadas por la combinación de muchos otros elementos, como el encabezado, el párrafo, las imágenes y más. Más específicamente, el encabezado es la parte más importante de cualquier página web porque contiene toda la información relacionada con la página web, incluido el título, la descripción y el logotipo.

En este manual, discutiremos el "" etiqueta. Entonces, comencemos!

Etiqueta de encabezado HTML

HTML proporciona el ""Etiqueta, que se utiliza para definir el título y el encabezado del contenido relacionado en una página web. También puede agregar un encabezado, párrafo, logotipo, imagen y enlaces en el encabezado.

Sintaxis

La sintaxis de la etiqueta del encabezado es:

Elementos html

Los elementos que desea incluir en el encabezado se deben agregar entre las etiquetas de encabezado de apertura y cierre.

Pasemos al ejemplo donde aprenderemos a crear un encabezado.

Ejemplo: cómo crear un encabezado?

En el archivo HTML, primero, usaremos el ""Etiqueta para crear un encabezado. Después de eso, agregue un encabezado "

"Y cuatro enlaces usando el""Etiqueta dentro del"" etiqueta. En el "href", agregar "#"Y configure el enlace de la página que desea agregar. A continuación, asigne los nombres de los enlaces como "Hogar","Acerca de","Contáctenos", y "política de privacidad". Estos nombres de enlaces aparecerán en el encabezado de la página web.

Html

Linuxhint

Hogar
Acerca de
Contáctenos
política de privacidad

En la imagen proporcionada a continuación puede ver que se crea el encabezado:

También puedes peinar el encabezado con CSS. Aquí está el método para hacerlo.

En el CSS, usaremos "encabezamiento"Para acceder al encabezado creado en HTML. Aquí, usa el "texto alineado"Valor de propiedad como"centro"Para alinear el encabezado y los enlaces en el centro de la página. También estableceremos el color de fondo del encabezado como "RGB (80, 80, 79)"Y establece el color del encabezado como"RGB (206, 158, 34)". Ajustaremos el tamaño de la fuente a "30px". Después de eso, configure el relleno como "30px".

CSS

encabezado
Text-Align: Center;
Antecedentes: RGB (80, 80, 79);
Color: RGB (206, 158, 34);
tamaño de fuente: 30px;
relleno: 30px;

La siguiente imagen muestra que el encabezado tiene con éxito:

Ahora, peinaremos los enlaces.

Enlaces de estilo

Para hacer esto, primero, usar "a"Para acceder a los enlaces. Aquí, estableceremos el valor del "decoración de texto"Propiedad como"ninguno”Para borrar la decoración predeterminada de los enlaces. Después de eso, establezca el margen-izquierda como "40px", Margen-derecha como"30px", Y margen-top como"50px". Al final, estableceremos el color de los enlaces como "RGB (206, 158, 34)":

a
Decoración de texto: ninguna;
margen izquierda: 40px;
margen-derecha: 30px;
margen-top: 50px;
Color: RGB (206, 158, 34)

Aquí está el resultado que demuestra que el encabezado tiene con éxito:

Encabezado con logotipo

También puede agregar un logotipo al encabezado de la página web. Para esto, debe agregar una imagen de logotipo en el archivo HTML y configurarla en el encabezado usando CSS.

Ejemplo

Aquí, crearemos un DIV dentro de la etiqueta del encabezado y nombraremos la clase Div como "imagen". La parte restante del encabezado es la misma que el ejemplo anterior:

…

En el CSS, usaremos ".imagen"Para acceder al DIV y agregar una imagen de logotipo utilizando el"fondo" propiedad. En el "url ()", Agregaremos la ruta de la imagen como"URL (logotipo.PNG)". Aquí, usaremos "sin repetición"Para evitar la repetición de la imagen. Al final, estableceremos el ancho del logotipo como "250px"Y la altura como"100px":

.imagen
Antecedentes: URL (logotipo.png) sin repetición;
Ancho: 250px;
Altura: 100px;

Usando el código anterior, se obtiene la siguiente salida, y se puede ver que el logotipo se agrega en la esquina superior izquierda del encabezado:

Encabezado con imagen

También es posible crear un encabezado con la imagen de fondo. Vamos a crearlo.

Ejemplo

Primero, agregaremos la imagen en el archivo HTML, lo mismo que el ejemplo anterior, luego agregaremos la ruta de la imagen en la url () como "imagen.JPG"Y usa un"sin repetición"Valor para evitar la repetición de la imagen. Después de eso, use la propiedad de posición de fondo para establecer la posición de la imagen como "centro"Y la propiedad de tamaño de fondo como"cubrir"Para configurar la imagen en todo el encabezado. Por último, establezca la altura de la imagen como "250px":

.imagen
Antecedentes: URL (imagen.jpg) no repatoso;
Posición de fondo: centro;
tamaño de fondo: cubierta;
Altura: 250px;

Aquí está el resultado que demuestra que la imagen se agrega en el encabezado:

Eso es todo! Hemos explicado la etiqueta del encabezado en detalle.

Conclusión

En HTML, el ""La etiqueta se usa para crear el encabezado de la página web. En la parte del encabezado de la página web, se pueden agregar el encabezado, el párrafo corto, el logotipo, la imagen de fondo y la barra de navegación. En este manual, discutimos la etiqueta y proporcionamos un ejemplo creando y diseñando el encabezado de la página web.