Antes de empezar el curso.
Grupos y foros.- Módulo 1 - Desarrollo web1.1 Sitios Web4 Temas1 Cuestionario
-
1.2 Lenguajes4 Temas1 Cuestionario
-
1.3 Herramientas3 Temas
- Módulo 2 - HTML2.1 Estructura5 Temas1 Cuestionario
-
2.2 Contenido6 Temas1 Cuestionario
-
Descargar material 1
- Módulo 3 - CSS3.1 Estilos2 Temas
-
3.2 Referencias2 Temas
-
3.3 Propiedades12 Temas1 Cuestionario
-
Descargar material 2
- Módulo 4 - Diseño web4.1 Cajas1 Tema1 Cuestionario
-
4.2 Modelo de caja tradicional4 Temas1 Cuestionario
-
Proyecto 1 - Netflix13 Temas
-
4.3 Modelo de caja flexible2 Temas1 Cuestionario
-
Proyecto 2 - Azul Web6 Temas
-
Descargar material 3
- Módulo 5 - Diseño web adaptable5.1 Web móvil
- Final del cursoProyecto final2 Temas
-
Despedida del curso
-
Encuesta
2.1.2- Elementos estructurales parte 1
Angel Sánchez 4 diciembre, 2024
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>
