Dia 3 - Parte 1

Desarrollo Web

•

SIN SIGLA

Florentina Aparicio

6/9/2023

¡Este material tiene más páginas!

Entonces, ¿te gustó este material?

Ayude a animar a otros estudiantes a mejorar el contenido

¿Te gustó este material? ¡Compartir! 🧡

Desarrollo Web

6938 Materiales compartidos

Descarga la aplicación para disfrutar aún más

Lea materiales sin conexión, sin usar Internet. Además de muchas otras características!

Vista previa del material en texto

Introducción al 
Desarrollo Web
Departamento de Informática
HTML - Día 3
2022
● Introducción
● Mejoras
● Nuevas etiquetas.
HTML 5
Es la quinta y la actual versión de HTML estándar.
Publicado en Octubre de 2014 por World Wide Web Consortium (W3C).
Extiende y mejora las etiquetas disponibles
Enriquece el lenguaje agregando soporte multimedia.
Evitar plugins de empresas privadas.
Nuevos elementos: Estructura, formularios, etc
Interfaces de Programación: Canvas, arrastrar y soltar, trabajo offline, 
geolocalización, etc.
HTML 5 - Nuevo Doctype
“El Doctype o “Declaración del tipo de documento” es una 
instrucción especial que va al inicio de nuestro documento HTML y 
que permite al navegador entender qué versión de HTML estamos 
utilizando.”
● La declaración de DOCTYPE es bastante simple
• Ejemplo de DOCTYPE en HTML 4.01 Strict:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
HTML 5 - Nuevo Charset
El elemento “meta” con atributo charset en un documento HTML indica la 
codificación de caracteres utilizada (charset).”
UTF-8 (UCS Transformation Format 8) es la Codificación de caracteres 
más común en la red.
● La declaración de codificación de caracteres es bastante simple
• Ejemplo de Charset en HTML 4.01 Strict:
<meta http-equiv="Content-Type" content="text/html; 
charset=UTF-8">
HTML 5 - Otras metaetiquetas 
<meta charset="UTF-8">
Establece el tipo de codificación del documento.
<meta name="title" content="Título de la WEB">
Contiene el titulo que se mostrará en los buscadores.
<meta name="description" content="Descripción de la WEB">
Es el texto que se muestra bajo el título en los motores de búsqueda.
HTML 5 - Elementos estructurales
• HTML5 ofrece nuevos elementos estructurales para establecer 
diferentes partes de una página web.
HTML 5 - Elementos estructurales
header : La cabecera de una página. No confundir con el elemento 
head
footer : El final de la página.
nav : Una colección de links a otras páginas
section : Puede ser un capítulo, una sección de un capítulo. Es 
para agrupar contenido.
article : Una entrada independiente en un blog, revista, etc.
aside: Dentro de este elemento va el contenido que está fuera del 
tema principal de la página.
main: Contenido importante de la página.
HTML 5 - Elementos estructurales
HTML 5 - Mejoras
Los elementos <figure> <figcaption>
Antes: 
<img src="img/boca.jpg" alt="El rey de copas" width="50%">
 <p>Fig. 1 - Escudo de Boca Juniors</p>
Ahora:
<figure>
 <img src="img/boca.jpg" alt="El rey de copas" width="50%">
 <figcaption>Fig.1 - Escudo de Boca Juniors</figcaption>
</figure>
HTML 5 - Mejoras
El elemento <video>
Especifica un estándar para incrustar video en una página web
<video width="320" height="240" controls>
 <source src="bandera.mp4" type="video/mp4">
 <source src="bandera.ogg" type="video/ogg">
 Su navegador no soporta la etiqueta video
</video>
HTML 5 - Mejoras
El elemento <audio>
Especifica un estándar para incrustar audio en una página web
<audio controls>
 <source src="dale-boca.ogg" type="audio/ogg">
 <source src="dale-boca.mp3" type="audio/mpeg">
 Su navegador no soporta el elemento audio 
</audio>
HTML 5 - Mejoras
<p>Click para obtener sus coordenadas.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
 if (navigator.geolocation) {
 navigator.geolocation.getCurrentPosition(showPosition);
 } else { 
 x.innerHTML = "Geolocation is not supported by this browser.";
 }
}
function showPosition(position) {
 x.innerHTML = "Latitude: " + position.coords.latitude + 
 "<br>Longitude: " + position.coords.longitude;
}
</script>