24/06/2021
CONTENIDO
UNIVERSIDAD CENTRAL DEL
ECUADOR Introducción HTML 5
Conceptos básicos
DISEÑO WEB ¿Qué es HTML5?
¿Qué es una etiqueta/elemento/entidad?
SEXTO NIVEL
Atributos
Páginas Web dinámicas y estáticas
Estructura general de un documento HTML
Ing. Javier Guaña Moya Ph. D.
Resultado de aprendizaje:
INTRODUCCIÓN A HTML5
Dr. Javier Guaña Moya
Diseña páginas web en HTML 5 con
elementos que permitan dar una buena
interfaz gráfica en la web con orden y
responsabilidad
Qué significa HTML5 HyperText
Cuando se habla de HTML 5 lo
primero que tenemos que saber es Cuyo significado es hipertexto, que no es
que es la última versión de la más que un texto que enlaza con otros
tecnología HTML contenidos.
Cuyas siglas corresponden a Esto es la base del funcionamiento de la
“HyperText Markup Language” web tal y como la conocemos, que no es
más que páginas y recursos
interconectados.
1
24/06/2021
Markup Languaje
Marca o etiqueta, ya que todas las páginas web están Es lenguaje, porque HTML, tiene
construidas en base a etiquetas, desde las primeras
versiones hasta las últimas etiquetas de HTML 5. sus normas, tiene su estructura
y una serie de convenciones
Un ejemplo de una etiqueta HTML es la que identifica Sirven para definir tanto la
a un párrafo, que se compone de la etiqueta, el
contenido de la etiqueta y el cierre del párrafo: estructura como el contenido de
<p> HOLA </p>. una web.
Algo importante HTML5
Definición de HTML5
HTML5 se puede describir como un estándar que sirve
Tener en cuenta y no confundirse: HTML es un para definir la estructura y el contenido de una página
Web.
lenguaje, pero no quiere decir que sea un Funcionamiento HTML5
lenguaje programación. El proceso cuando se solicita una página HTML a través
del navegador es el siguiente:
Se realiza una petición a un servidor, lo que se hace a
HTML no es lenguaje de programación ya que través de una dirección del tipo http://..../index.html.
no tiene estructuras de lenguaje de
programación, como los bucles, las condiciones, Después el servidor recupera de su disco duro esa
las funciones, etcétera. página, la devuelve al navegador y la página se
muestra.
Los metadatos contienen información sobre Etiqueta / elemento / entidad
la página
2
24/06/2021
Etiqueta / elemento / entidad Etiqueta / elemento / entidad
Etiqueta / elemento / entidad Etiqueta / elemento / entidad
Etiqueta / elemento / entidad Etiqueta / elemento / entidad
3
24/06/2021
Páginas web estáticas Las características más relevantes son:
Son ideales para las empresas que no quieren muchas
pretensiones con su sitio web Ausencia de movimiento y funcionalidades.
Simplemente informar a sus clientes de sus productos y
dar a conocer su perfil de empresa entre otros. Realizadas en XHTML o HTML.
La principal ventaja es lo económico que pueden
resultar. Acceder al servidor para cambiar contenidos de la página.
Su diseño y desarrollo es más rápido que el de una web
dinámica Opacidad a los deseos o búsquedas del visitante a la página.
El usuario no puede seleccionar, ordenar o modificar
los contenidos o el diseño de la página. Lento y manual el proceso de actualización.
Páginas web dinámicas Las características más relevantes son:
Estas permiten la creación de aplicaciones dentro
de la propia web y ofrecen una mayor Infinitas posibilidades en su diseño y desarrollo.
interactividad con los usuarios que la visiten
Su creación es más compleja, ya que se requiere de El visitante puede alterar el diseño, contenidos o presentación.
conocimientos específicos de lenguajes de
programación y gestión de bases de datos.
Con este tipo de páginas web se puede hacer todo Se utilizan varias técnicas de programación.
lo que se desee.
El proceso de actualización es muy sencillo.
La web 2.0 es realmente la web dinámica, en la cual
los usuarios interactúan con la información
contenida en la web
Permite muchas funcionalidades como bases de datos, foros, etc.
Estructura de un documento HTML <!DOCTYPE html>
Lo primero que nos encontramos es la
declaración del tipo de documento que se está
mostrando.
Variará según el tipo de documento realizado,
en nuestro ejemplo hemos utilizado el doctype
del HTML5 que es sencillo.
4
24/06/2021
HTML Head
Tras declarar el tipo de documento,
indicamos que iniciamos nuestro En un documento HTML tenemos
documento HTML. una cabecera dónde colocaremos los
metadatos de la página
Esta etiqueta se cierra cuando
finalizamos el documento.
El código JavaScript y el CSS que
utilizará el navegador para renderizar
Vemos que lleva un atributo lang, la página.
esto sirve para indicar el idioma del
documento (en nuestro caso español)
Meta charset
Obligatorio en HTML5,
informa el juego de
caracteres del
documento Title Es un tipo de metadato especial que nos
proporciona el título de la página.
Debería ser siempre utf-
8. Como todo metadato Por motivos de posicionamiento (SEO) se
debe ir dentro del head recomienda que el meta Title sea parecido al
H1 del documento y a la URL de la página.
Body
En su interior
tendremos el
contenido de la
página.
5
24/06/2021
HTML5, lo nuevo HTML5, lo nuevo
Section
Nav:
Los section creados a nivel del body serán aquellos cuyo contenido de
significado a la página, o sea, formen el contenido principal de la misma. Esta etiqueta la utilizaremos para incluir el menú de navegación.
Article Footer:
Esta etiqueta es «la última etiqueta con significado semántico». Habitualmente
se utiliza dentro de un section para separar las unidades de contenido con Destinada a incluir la información sobre el elemento que lo contiene
significado semántico. (autoría, propiedad, enlaces…)
Header Aside:
Creada para incluir información destinada a ayudar en la navegación. Suele Su uso indicado es para agrupar el contenido a visualizar en la página,
incluir un H1 y, de declararse a nivel de body, la etiqueta nav. pero que no forma parte del contenido principal de la página.
Gracias
Dr. Javier Guaña Moya
ejguanam@uce.edu.ec
