Estructura HTML5
Presentation
•
Computers
•
10th Grade
•
Practice Problem
•
Medium
Sergio López
Used 13+ times
FREE Resource
12 Slides • 5 Questions
1
Estructura HTML5
Esta estructura define el espacio dentro del documento donde el contenido estático y dinámico es posicionado y es la plataforma básica para toda aplicación.
2
Tipo de documento
Debido a que los navegadores son capaces de procesar diferentes tipos de archivos, lo primero que debemos hacer en la construcción de un documento HTML es indicar su tipo. Para asegurarnos de que el contenido de nuestros documentos sea interpretado correctamente como código HTML, debemos agregar la declaración <!DOCTYPE> al comienzo del archivo
3
IMPORTANTE:
la línea con la declaración <!DOCTYPE> debe ser la primera línea de su documento, sin ningún espacio o código previo. Esto activa el modo estándar y obliga a los navegadores a interpretar HTML cuando es posible o ignorarlo en caso contrario. Para documentos programados con HTML5, la declaración debe incluir el atributo html <!DOCTYPE html>
4
Elementos estructurales
Los elementos HTML conforman una estructura de tipo árbol con el elemento <html> como su raíz. Esta estructura presenta múltiples niveles de organización, con algunos elementos a cargo de definir secciones generales del documento y otros encargados de representar secciones menores o contenido.
5
Elementos para definir la columna vertebral de la estructura
<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).
6
Estructura básica HTML
<!DOCTYPE html>
<html lang="es">
<head
</head>
<body>
</body>
</html>
7
La cabecera
Incluye toda la información y los recursos necesarios para generar la página.
Lo primero que tenemos que hacer cuando declaramos la cabecera del documento es especificar el título de la página con el elemento <title>. Este texto es el que muestran los navegadores en la parte superior de la ventana, y es lo que los usuarios ven cuando buscan información en nuestro sitio web por medio de motores de búsqueda como Google o Yahoo.
8
La Cabecera
Además del título, también tenemos que declarar los metadatos del documento. Los metadatos incluyen información acerca de la página que los navegadores, y también los motores de búsqueda, utilizan para generar y clasificar la página web. Los valores se declaran con el elemento . Este elemento incluye varios atributos, pero cuáles usemos dependerá del tipo de información que queremos declarar. Por ejemplo, el valor más importante es el que define la tabla de caracteres a utilizar para presentar el texto en pantalla, el cual se declara con el atributo charset.
9
La cabecera
Otro elemento importante de la cabecera del documento es . Este elemento se usa para incorporar al documento estilos, códigos, imágenes o iconos desde archivos externos. Por ejemplo, algunos navegadores muestran un icono en la parte superior de la ventana junto con el título de la página. Para cargar este icono, tenemos que incluir un elemento con el atributo rel definido como icon, el atributo href con la ubicación del archivo que contiene el icono, el atributo type para especificar el formato con el que se ha creado el icono, y el atributo sizes con el ancho y la altura del icono separados por la letra x.
10
La Cabecera
<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.
11
La cabecera
<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 JavaScrip
12
Estructura de la Cabecera
<!DOCTYPE html>
<html lang="es">
<head
<title> Este texto es el título del documento </title>
<meta charset="utf-8">
<meta name="description" content="Este es un documento HTML5">
<meta name="keywords" content="HTML, CSS, JavaScript">
<link rel="stylesheet" href="archivo.css">
</head>
<body>
</body>
</html>
13
Multiple Choice
Elemento que se usa comúnmente para cargar archivos desde la cabecera.
href
<link>
rel
<meta>
14
Multiple Select
Selecciona los elementos básicos estructurales en HTML
<title>
<head>
<body>
<html>
15
Multiple Choice
Porque la declaración <!DOCTYPE html> debe ser la primera línea de su documento.
Para asegurarnos de que el contenido de nuestros documentos sea interpretado correctamente como código HTML
Para que el navegador interprete documentos programados con HTML5
Para probar los códigos HTML5
Para ayudar al navegador a decidir cómo debe generar la página web
16
Multiple Choice
Cual de los siguientes no es un atributo del elemento <meta>
charset
content
name
href
17
Multiple Select
Seleccione los atributos del elemento <link>
rel
media
size
name
Estructura HTML5
Esta estructura define el espacio dentro del documento donde el contenido estático y dinámico es posicionado y es la plataforma básica para toda aplicación.
Show answer
Auto Play
Slide 1 / 17
SLIDE
Similar Resources on Wayground
13 questions
Triangle Sum Theorem Notes
Presentation
•
10th Grade
13 questions
Recordando algunos saberes...
Presentation
•
10th Grade
12 questions
Apps para docentes
Presentation
•
10th Grade
10 questions
REC 1º ANO - 1º Trimestre
Presentation
•
10th Grade
11 questions
Sofware y Hardware
Presentation
•
10th Grade
11 questions
ORGANIZADORES GRÁFICOS
Presentation
•
10th Grade
15 questions
1_1 CIUDADANÍA DIGITAL 1
Presentation
•
10th Grade
12 questions
Eficiencia y Eficacia de los Sistemas Tecnológicos
Presentation
•
10th Grade
Popular Resources on Wayground
20 questions
STAAR Review Quiz #3
Quiz
•
8th Grade
20 questions
Equivalent Fractions
Quiz
•
3rd Grade
6 questions
Marshmallow Farm Quiz
Quiz
•
2nd - 5th Grade
20 questions
Main Idea and Details
Quiz
•
5th Grade
20 questions
Context Clues
Quiz
•
6th Grade
20 questions
Inferences
Quiz
•
4th Grade
19 questions
Classifying Quadrilaterals
Quiz
•
3rd Grade
12 questions
What makes Nebraska's government unique?
Quiz
•
4th - 5th Grade
Discover more resources for Computers
50 questions
STAAR English 2 Review
Quiz
•
10th Grade
20 questions
Figurative Language Review
Quiz
•
10th Grade
20 questions
Grammar
Quiz
•
9th - 12th Grade
31 questions
Easter Trivia
Quiz
•
KG - 12th Grade
16 questions
Circles - Equations, Central & Inscribed Angles
Quiz
•
9th - 12th Grade
46 questions
Unit 4 Geosphere Test Review
Quiz
•
9th - 12th Grade
10 questions
Calculating Surface Area of a Triangular Prism
Interactive video
•
6th - 10th Grade
20 questions
Central Angles and Arc Measures 2
Quiz
•
10th Grade