HTML
HTML
HTML
• Colores • Fondos
Apariencia • • Tamaños CSS
Tipografías • Etc.
•
Alineación
• Efectos
Comportamiento • Validaciones
•
Javascri
Automatización
pt
© 2012. Área de las Tecnologías de la Información y las Comunicaciones Aplicadas.
HTML5
• ¿Qué es HTML5?
• Es un lenguaje de marcas utilizado para el desarrollo
de páginas web.
• Define la estructura y contenido que debe tener una
web.
• No define el estilo visual que tendrá para eso se usará
CSS.
• Ha sido establecido como estándar de diseño web por
el W3C.
• Los navegadores deben saber interpretar este lenguaje
de manera correcta (no siempre IE)
• Sobre HTML se desarrollan tecnologías para facilitar a
los
© 2012. Área de usuarios
las Tecnologías el diseño
de la Información de una Aplicadas.
y las Comunicaciones web.
HTML5
• Evolución:
• En 1997 nace HTML4 publicado por el W3C como
estándar de diseño web.
• En 1999 nace XHTML 1.0 que extiende HTML4
• En 2001 se publica la nueva versión de XHTML, la 1.1
• En 2002 se prepara un borrador para una nueva
versión de XHTML
• En 2008 naceHTML5 como el sucesor de HTML4 y
XHTML 1.1
Elemento
Etiqueta de Apertura Contenido Etiq. de Cierre
<!DOCTYPE html>
<html lang="es">
<head>
<title>Título</title>
<!– Encabezado de la web. Aquí incluiremos metainformación y
cargaremos componentes y estilos utilizados en la web-->
</head>
<body>
<!– Cuerpo de la web. Aquí escribiremos el contenido-->
…..
</body>
</html>
• La sección HEAD
• Contiene metainformación de la página
• Establecemos título y palabras clave para los
buscadores
• Incluimos hojas de estilo (CSS) a utilizar en la página
• Podemos introducir código javascript a usar en nuestra
página.
• Referencia:
http://www.w3schools.com/html/html_head.asp
• La sección BODY
• Alberga el "contenido" real de la página.
• Establece cómo se visualizan los elementos.
• Hace uso de los scripts y hojas de estilo definidos en la
sección HEAD.
• En este punto tenemos a nuestra disposición de todos
los tags disponibles para maquetar nuestra página.
• Referencia: Elementos HTML
• Principales características
• Permite definir el estilo de cada elemento
HTML de manera exacta.
• Permite escalar tamaños en función del
tamaño de la pantalla.
• Aísla el contenido de la presentación.
• Permite incorporar cierta lógica a los estilos
aplicados (LESS y SASS).
• Permite crear plantillas de estilos que pueden
importarse en otros HTML.
© 2012. Área de las Tecnologías de la Información y las Comunicaciones Aplicadas.
CSS3
Declaración
Selector { propiedad: valor; ...}
Ejemplo:
H1 {color:#CC9900;}
• Tipos de selectores:
• De elemento HTML:
• h1, table, div, span…
• De identificador
• Todos los elementos HTML cuya propiedad "id"
tenga un determinado valor, tendrán ese estilo.
• De clase
• Todos los elementos HTML cuya propiedad "class"
tenga un determinado valor tendrán ese estilo.
• El problema
• A la hora de maquetar una web tenemos que
tener en cuenta infinitas resoluciones y
tamaños de pantalla.
• Nuestros diseños no se adaptan a todas las
resoluciones.
• Debemos hacer un gran esfuerzo para crear un
CSS que maquete bien.
• Tenemos que hacer diferentes versiones de la
web según el dispositivo en el que se verán.