HTML – HTML 5
(I)
Diseño de Sitios Web
•
¿Qué es HTML?
– Es un “lenguaje descriptivo” con el cual se
describe la estructura del texto y todos los
elementos que se muestran en la página.
– Es
el
método
más
usado
para
publicar
documentos en la Web.
HTML
•
HTML:
Hypertext Markup Language. Lenguaje de
Marcas de Hipertexto.
–
Lenguaje:
No es un lenguaje de programación típico.
Con el se crean documentos no aplicaciones.
–
Marcas:
Un documento HTML es un archivo de texto
enriquecido con instrucciones que le dicen al navegador
cómo y dónde mostrar el texto del documento. Estas
instrucciones se introducen mediante “etiquetas” o
“tags”.
–
Hipertexto:
Zona sensible del documento desde la cual
podemos acceder a otros documentos o recursos en la
Web.
HTML
Estructura y contenidos de un documento HTML
• Un documento HTML contiene:
– Textos: Información
– Etiquetas o tags: Elementos embebidos que
proveen
instrucciones
para
la
estructura,
apariencia y función de los contenidos.
Estructura y contenidos de un documento HTML
• Un
documento
HTML
se
divide
en
tres
partes
principales:
– Unadeclaración de la versión de HTML con la que se ha
creado el documento
– Unacabeceracon información del documento u otros datos que
no se consideran parte de su contenido. – Uncuerpocon el contenido real del documento.
HTML
6
HTML
• Documento HMTL debe contener al menos:
– Declaración de Versión(<!DOCTYPE html>)
– Etiqueta Inicial (<HTML>)
– Cabecera (<HEAD>)
– Titulo (<TITLE>….</TITLE>)
– Cierre de Cabecera (/HEAD)
– Cuerpo(<BODY>)
Contenido de la página
– Cierre de cuerpo(/BODY)
– Etiqueta final (</HTML>)
Componentes de un Documento HTML
• Al crear un documento HTML básicamente
utilizaremos:
– Elementos
– Atributos
– Referencias a caracteres
– Comentarios.
HTML
Componentes de un Documento HTML
•
Elementos:
– Representan estructuras mediante las cuales se organiza
el
contenido
del
documento
o
acciones
que
se
desencadenan
cuando
el
navegador
interpreta
el
documento.
– Se introducen en el documento mediante una declaración
del tipo de elemento.
– Cada declaración consta generalmente de tres partes:
•Etiqueta de Inicio:<NOMBRE DEL ELEMENTO> •Contenido:puede ser otros elementos, texto o referencias a
caracteres.
9
Tipos de Elementos
• Elementos en Bloque y en línea.
• Elementos en bloque: capaces de contener
otros elementos
Ej:
<HEAD>
<TITLE> Mi Sitio Web </TITLE>
</HEAD>
• Elementos de linea
<IMG
SRC=“imagen.gif”>
Componentes de un Documento HTML
•
Referencias a Caracteres:
– Son nombres numéricos o simbólicos de caracteres que pueden incluirse en un documento HTML.
– Comienzan con el símbolo “&” y terminan con “;”.
– Se utilizan para representar caracteres especiales u otros que no pueden introducirse directamente desde el editor.
•
Ejemplos:
á = á
á
é = é
é
í = í
í
ó = ó
ó
ú = ú
ú
ü = ü
ü
ñ = ñ ñ
HTML
Componentes de un Documento HTML
•
Atributos:
– Son propiedades asociadas a los elementos. Tienen asociado valores y modifican o extienden las acciones de los elementos. – Los pares atributo/valor se colocan antes del cierre de la etiqueta
de inicio del elemento (antes de >).
– Puede haber cualquier número de atributos separados por espacios en blanco y no tienen un orden predeterminado
– La sintaxis es: nombre del atributo = valor – El valor va entre comillas aunque pueden omitirse – Ejemplo:
<NOMBRE ELEMENTO ATRIBUTO1=valor1 ATRIBUTO2=“valor2”>
CONTENIDO </NOMBRE ELEMENTO>
<H1 ALIGN=“center”>Mi sitio web</H1>
HTML
Componentes de un Documento HTML
•
Comentarios:
– Si se desea introducir algún comentario a un documento
HTML la sintaxis es:
<!--
Comentario en una línea
-->
<!--
Primera línea del Comentario
segunda línea del Comentario
-->
– Los comentarios serán ignorados por el navegador
HTML
Consideraciones
Para generar documentos con un estilo de HTML accesible por la mayor cantidad de navegadores posibles, pueden seguirse algunas guías.– Seguir la sintaxis HTML descripta por la especificación
disponible del w3c más actualizada. http://www.validator.w3.org
– Seguir convenciones de escritura de código para hacer el documento más fácil de leer. Por ejemplo
• Tags y atributos en mayúsculas
• Usar nuevas líneas y tabs para mayor legibilidad – Evitar agregar elementos extras y redundantes – Nombrar los archivos de acuerdo a las siguientes guías
• Usar extensiones apropiadas (.html y .htm para servidores Windows) • Evitar espacios y caracteres especiales (?, %, #, etc.)
• Los nombres son Case Sensitives – Cuidar los finales de líneas
Surgimiento de HTML 5
• La versión estándar anterior era HTML
4.01 que se estableció en 1999 y no tubo
muchos cambios hasta 2012.
• HTML5 surge como una cooperación
entre la World Wide Web Consortium
(W3C) y el Web Hypertext Application
Technology Working Group (WHATWG).
• WHATWG estaba trabajando con
formularios y aplicaciones Web y W3C
trabajaba en XHTML 2.0.
14
Nueva versión – HTML 5
• Estas dos organizaciones trabajaron conjuntamente desde 2006 y establecieron algunas reglas para HTML5: • Nuevas características que debían basarse en HTML,
CSS (Hojas de Estilos), DOM, y JavaScript
• Reducir la necesidad de plugins externos (como Flash) • Mejor manejo de errores
• Mas etiquetas para reemplazar script
• HTML5 debería ser independiente del dispositivo. • El proceso de desarrollo sería visible al público.
Nuevas Características de
HTML 5
• Con esta versión se introducen nuevas
características en una variedad de áreas.
Algunas de las adiciones más notables son:
– Las etiquetas multimedia para audio
y video con soporte a distinto códec.
– La etiqueta canvas para dibujar contenido en
el navegador (2D y 3D).
– Las etiquetas
datagrid, details, menu
y command
, que permiten manejar grandes
conjuntos de datos.
Nuevas Características de
HTML 5 – cont.
– Formularios más inteligentes que nos
permitirán hacer cosas como validación de
llenado mediante el uso de atributos
requeridos, a través de los nuevos tipos email,
number, url, datetime, etc.
– APIs que permiten Arrastrar y Soltar objetos
como imágenes, trabajar Off-Line,
utilizar
Geoposicionamiento
,
Almacenamiento
persistente
con base de datos local,
Websockets y más.
17
Nuevas Características de
HTML 5 – cont.
• Con un nuevo conjunto de etiquetas
estructurales, HTML5 actualiza la forma en que
los documentos HTML están estructurados.
Estas nuevas etiquetas estructurales se enfocan
en dividir un documento HTML en partes
lógicas, cuyo nombre de etiqueta es descriptivo
del tipo de contenido que está destinado a
tener.
18
HTML 5 Cabecera <HEAD>
•
Cabecera:
La cabecera de un documento esta delimitada
por las etiquetas
<HEAD> Elementos </HEAD>
.
• Los elementos que pueden encontrarse dentro de ella son:
–TITLE:Es el más importante y usado de los componentes.
• Sintaxis: <TITLE> Titulo del Documento </TITLE>
• No puede contener ningún otro elemento ni indicación de formato (atributos)
–META:Se usa para identificar propiedades de un documento, • Cada META especifica un par propiedad/valor
• Sintaxis: <METAname = ”propiedad” content = “valor”>
–LINK: Establece enlaces entre recursos. –BASE: permite especificar a los autores la URI –STYLE:Se vera con las CSS
–SCRIPT: Para lenguaje de Script
Etiqueta HEAD
<HTML>
<HEAD>
<TITLE> Titulo de Sitio Web</TITLE> « OBLIGATORIA» <META>« Palabras claves del sitio- NECESARIA» <LINK> «Permite utilizar recursos externos- OPCIONAL» <BASE> «Relacionado a los enlaces- OPCIONAL»
<SCRIPT> « Permite incorporar un lenguaje script- OPCIONAL»
</HEAD>
<BODY>
……
</BODY>
</HTML>
20Etiqueta Cuerpo- BODY
• El cuerpo de un documento HTML esta
delimitado por la etiqueta <BODY>,
contiene la información que se desea
publicar utilizando los diferentes recursos
de HTML.
<BODY>
Contenido de la página visible al usuario
</BODY>
21
HTML5 Cuerpo <BODY>
<BODY> <HEADER>
Titulo del sitio y barra de navegación
</HEADER> <ARTICLE>
Contenido principal de la página
</ARTICLE> <ASIDE>
Contenido de la barra lateral
</ASIDE> <FOOTER>
Datos del pie de la página
</FOOTER> </BODY>
Estructura de Pagina HTML 5.0
<body>
<header> <!-- En esta sección se coloca el Nombre del Sitio, logo, -->
Titulo del Sitio
<nav> <! --Aqui se arma el menu de opciones-->
<ul>
<li><a href="/">Item para nevegar</a></li> </ul>
</nav>
</header> <!– Final del encabezado de la página-->
<article id="main"> <! -- Contenido Principal de la página-->
<h1>Titulo del Articulo</h1> <p>Contenido del Artículo.</p> <h2> sub-titulo del artículo</h2>
<p>Mas contenido.</p>
<h3>Sub-sub-heading del articulo</h3> <p>Mas contenido </p>
</article> <!– Fin del contenido principal -->
<aside> <!– barra lateral a derecha-->
<h2>Encabezado de Barra lateral </h2> <h3>sub-encabezado de la barra</h3>
</aside>
<footer> <! En esta sección va el pie de página como contacto, fecha de actualización, empresa-->
<h2>Encabezado del Footer </h2>
HTML Formato de Texto
•
Texto en HTML:
No es mucho el formato que se le
puede dar a un texto en HTML.
• Con el texto se puede:
– Delimitar los párrafos con el elemento
PARRAFO: P• Su sintaxis es: <P [atributos]> Texto del Párrafo [</P>]
• Su presentación visual depende de los navegadores. • Acomodan el texto al tamaño de la ventana
• Sucesiones de espacios y tab’s como de enters no se visualizan en el navegador.
• Si se quieren agregar espacios se debe agregar la entidad “ ” para formatear el texto.
• Para introducir una nueva línea dentro de un párrafo, se usa el
HTML Formato de Texto
•
Atributos de P: align = left – justify – center – rigth
<P ALIGN=JUSTIFY> TEXTO DEL PARRAFO </P>
•
Dar formato a las líneas de un párrafo:
– Negrita: <b> </b> o <Strong> </Strong> – Cursiva: <i> </i>
– Subrayado: <u> </u>
•
Para modificar el color, tamaño, fuente, espesor de
texto es necesario utilizar CSS.
HTML Formato de Texto
•
Encabezados:
– Se utilizan para estructurar el cuerpo de un documento dividiéndolo en secciones
– Existen 6 niveles de cabecerasH1 a H6.
•
Texto preformateado.
– Algunas veces es necesario que el espacio en blanco se muestre en algunos textos. Esto se logra con el elementopreformateado. – Su sintaxis es<PRE> ... </PRE>
