Elementos estructurales parte 1

Angel Sánchez 25 abril, 2024

Lección Progreso

0% Completado

Los elementos HTML conforman una estructura tipo árbol, iniciando con el elemento <html>. Dicha estructura cuenta con múltiples niveles de organización. Los siguientes son los elementos disponibles para definir la columna vertebral de la estructura y facilitar la información que el navegador necesita para mostrar la página en la pantalla.

<html> – Este elemento delimita el código HTML. Puede incluir el atributo lang para definir el idioma del contenido del documento.

<head> – Este elemento se usa para definir la información necesaria para configurar la página web, como el título, el tipo de codificación de caracteres y los archivos externos requeridos por el documento.

<body> – Este elemento delimita el contenido del documento (la parte visible de la página).

Después de declarar el tipo de documento, <!DOCTYPE html>, hay que comenzar con el elemento <html> al cual le podemos colocar el atributo lang para declarar el idioma que vamos a utilizar en nuestra página:

<!DOCTYPE html>
<html lang="es">
</html>

El código que insertamos entre las etiquetas <html> está divido por dos secciones; la cabecera y el cuerpo:

<!DOCTYPE html>
<html lang="es">
<head>
</head>
</html>

Como lo mencionamos anteriormente dentro de la cabecera colocamos el tipo de la página web, archivos externos, tipo de caracteres, etc. La siguiente sección, el cuerpo, es la parte visible de nuestro documento, aquí van todos los elementos que forman nuestro sitio web.

<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
</body>
</html>

La estructura principal ya está lista, lo siguiente es empezar a definir la cabecera. Aquí incluimos toda la información y recursos que son necesarios para generar nuestra página. Los siguientes son los elementos disponibles para este propósito.

<title> – Este elemento define el título de la página.

<base> – Este elemento define la URL usada por el navegador para establecer la ubicación real de las URL relativas. El elemento debe incluir el atributo href para declarar la URL base. Cuando se declara este elemento, en lugar de la URL actual, el navegador usa la URL asignada al atributo href para completar las URL relativas.

<meta> – Este elemento representa metadatos asociados con el documento, como la descripción del documento, palabras claves, el tipo de codificación de caracteres, etc. El elemento puede incluir los atributos name para describir el tipo de metadata, content para especificar el valor, y charset para declarar el tipo de codificación de caracteres a utilizar para procesar el contenido.

<link> – Este elemento especifica la relación entre el documento y un recurso externo (generalmente usado para cargar archivos CSS). El elemento puede incluir los atributos href para declarar la ubicación del recurso, rel para definir el tipo de relación, media para especificar el medio al que el recurso está asociado (pantalla, impresora, etc.), y type y sizes para declarar el tipo de recurso y su tamaño (usado a menudo para cargar iconos).

<style> – Este elemento se usa para declarar estilos CSS dentro del documento.

<script> – Este elemento se usa para cargar o declarar código JavaScript.

El primer paso a realizar cuando empezamos a trabajar con la cabecera es colocar el nombre de nuestra página, esto usando el elemento <title>. Este título lo vamos a ver en la parte superior de la ventana, la pestaña.

<!DOCTYPE html>
<html lang="es">
<head>
     <title>Mi primer página web</title>
</head>
<body>
</body>
</html>

Una vez que terminamos con el título hay que colocar los metadatos. Los metadatos agregan información a nuestra página que utilizan los navegadores para darle contexto.

Como lo mencionamos anteriormente el elemento <meta> cuentan con varios atributos, depende de nuestras necesidades será el que vamos a utilizar. En este caso solo usaremos el que define la tabla de caracteres a utilizar para presentar el texto en pantalla, el cual se declara con el atributo charset.

<!DOCTYPE html>
<html lang="es">
<head>
     <title>Este texto es el título del documento</title>
     <meta charset="utf-8">
</head>
<body>
</body>
</html>

Archivo index.html usado en el video.

<!DOCTYPE html>
<html lang="es">
	<head>
		<title>Mi primera pagina web.</title>
		<meta charset="utf-8">
	</head>
	<body>	
	</body>
</html>

Curso profesional de HTML y CSS.

Antes de empezar el curso.

Participantes 3875

Elementos estructurales parte 1

Angel Sánchez 25 abril, 2024

Archivo index.html usado en el video.