HTML

HTML5, CSS3, Jquery y Boostrap
© 2012. Área de las Tecnologías de la Información y las Comunicaciones Aplicadas.

• Índice
• HTML
• CSS
• Javascript
• Bootstrap

Estructura de una página web
Página Web •Tablas

• Párrafos
Estructura
• • Capas
Encabezados • Etc.
• Listas HTML
• Textos
Contenido • Imágenes
• Enlaces
• Colores • Fondos
Apariencia • • Tamaños CSS
Tipografías • Etc.
•
Alineación
• Efectos
Comportamiento • Validaciones
•
Javascri
Automatización
pt
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

HTML5
• ¿Por qué HTML5?

• HTML 4.0 era suficiente para cubrir todas las
necesidades web surgidas hasta el momento.
• La web evolucionó rápidamente insertando diferentes
contenidos a ofrecer en cada página.
• HTML 4.0 no cubre esas necesidades por lo que se
crearon diversas tecnologías que suplieran este vacío:
• Flash Player
• Silverlight
• Se tiende a un trabajo distribuido por lo que se exigen
herramientas tipo "escritorio" en versión web.

HTML5
• ¿Por qué HTML5?

• En este punto HTML4 se queda obsoleto.
• Instalar plugins de terceros genera graves agujeros de
seguridad.
• Las nuevas funcionalidades requeridas no encajan con
el esquema inicial diseñado.
• Conclusión: hay que hacer evolucionar el estándar a
las necesidades actuales  HTML5
• Referencia:
http://www.w3schools.com/html/default.asp

HTML5
• El concepto de elemento HTML

• Los elementos son los componentes fundamentales del
HTML
• Cuentan con 2 propiedades básicas:
• Atributos
• Contenido
• En general se conforman con una Etiqueta de Apertura
y otra Cierre.
• Los atributos se colocan dentro la etiqueta de apertura,
y el contenido se coloca entre la etiqueta de apertura y
la de cierre.

HTML5
• El concepto de elemento HTML
Elemento
Etiqueta de Apertura Contenido Etiq. de Cierre
<p class=“texto”>Curso HTML CEMA </p>

Nombre Valor
Atributo

HTML5
• Tipos de elementos HTML

• Estructurales:
• Describen el propósito del texto y no denotan ningún formato
específico.
<h1>Curso HTML</h1>
• De Presentacion:
• Describen la apariencia del texto, independientemente de su función.
<b>Curso HTML</b>
• Los elementos de presentación se encuentran obsoletos desde la
aparición del CSS.
• De HiperTexto:
• Relaciona una parte del documento a otros documentos.
<a href=“http://www.cema.edu.ar”>Universidad del Cema</a>

HTML5
• Estructura base de un documento html.
<!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>

HTML5
• Definir un documento HTML.

• El primer paso es crear un fichero html o xhtml.
• Una vez creado deberemos especificar el tipo
de documento, para ello la primera línea debe
ser:
• <!DOCTYPE html> si es HTML
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> si es XHTML
• Una vez realizado esto podremos comenzar

con el contenido de nuestro fichero HTML
• HTML layout
HTML5
• 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

HTML5
• 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

• Índice
• HTML
• CSS
• Javascript
• Bootstrap

CSS3
• El lenguaje HTML está limitado a la hora de

aplicarle forma a un documento.
• Sus estructuras tienen poca flexibilidad a la hora de
dar forma al contenido mostrado.
• HTML se creó originariamente para uso científico y
posteriormente fue adoptado para el desarrollo
web.
• Para "maquetar" se utilizan elementos HTML en un
uso diferente de su objetivo (tablas por ejemplo).
• Todos estos problemas dieron lugar al origen de
CSS.
CSS3
• El lenguaje HTML está limitado a la hora de

aplicarle forma a un documento.
• Sus estructuras tienen poca flexibilidad a la hora de
dar forma al contenido mostrado.
• HTML se creó originariamente para uso científico y
posteriormente fue adoptado para el desarrollo
web.
• Para "maquetar" se utilizan elementos HTML en un
uso diferente de su objetivo (tablas por ejemplo).
• Todos estos problemas dieron lugar al origen de
CSS.
CSS3
• 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.
CSS3
• Los estilos CSS deben darse de alta en un fichero

acorde para ello, no obstante:
• Pueden declararse dentro de un HTML
mediante la etiqueta <style>
• Pueden aplicarse directamente sobre un
elemento concreto en la propiedad "style".
• Lo correcto es llevar los estilos a un o unos ficheros
css, pero se permite añadir pequeños retoques
directamente sobre el HTML.

CSS3
• Cómo se define un estilo en css:
Declaración
Selector { propiedad: valor; ...}
Ejemplo:
H1 {color:#CC9900;}

CSS3
• Un selector es un identificador para saber sobre qué

elemento HTML debemos aplicar el estilo.
• Existen diferentes tipos de selectores.
• Se pueden crear jerarquías de estilos.
• Podemos definir estilos por defecto para los elementos
HTML estándar.
• Los estilos pueden sobreescribir a otro, el orden de
sobreescritura es el mismo en el que se cargan los ficheros
css o se lee el fichero.
• Si queremos que un estilo prevalezca sobre el resto,
podemos indicarlo con !important

CSS3
• 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.

CSS3
• Normalmente se le aplica un estilo por defecto a los

elementos HTML para conformar una plantilla.
• La personalización definitiva se suele realizar haciendo uso
de la propiedad "class".
• No es recomendado usar el selector por id. Sólo se
recomienda cuando el componente, además de estilo
realiza alguna funcionalidad javascript.
• Cuando incluyamos plantillas en un fichero HTML hay que
estar seguros que no incorporan estilos CSS que
sobreescriban los nuestros.
• En caso de conflicto, debemos asegurar que nuestros
estilos quedan situados por encima de los otros (aunque no
siempre es posible)
CSS3
• CSS3 como mejora de CSS incorpora propiedades para una

mejor maquetación y decoración de los elementos.
• Se han añadido propiedades para aplicar efectos de
pintado.
• Se permiten realizar animaciones.
• Habilita el uso de lógica en los CSS.
• Ejemplo de dibujado HTML + CSS: Minion

• Índice
• HTML
• CSS
• Javascript
• Bootstrap

Javascript
• Inicialmente se llamaba LiveScript.

• Lenguaje de guiones (script).
• Con el respaldo de SUN en 1995 pasó a llamarse
JavaScript.
• Es un lenguaje interpretado.
• Se ejecuta en el cliente, nunca en el servidor.
• Parte de un conjunto limitado de objetos y clases
• No permite interacción cliente-servidor,
únicamente opera en el cliente (Conseguido con
jQuery).
Javascript
• Diseñado para programas sencillos y pequeños.

• Muy utilizado para validación de datos.
• Utilizado junto con CSS para poner efectos en las
páginas de Web.
• Es independiente de la plataforma.
• Es bajamente tipado.
• Fácil de aprender, pero difícil de depurar.
• Gran parecido con Java pero mucho más limitado.

Javascript
• Javascript se integra en HTML de dos maneras:

• Como fichero *.js incluido en la misma sección
que los CSS.
• Como código directamente en el fichero HTML
haciendo uso de la etiqueta <script>
• Algunos navegadores no soportan scripts por lo
que tendremos que tenerlo en cuenta.
• Para tratar el problema haremos uso de la
etiqueta <noscript>

Javascript
• La declaración de variables se hace sin especificar

el tipo:
• var miVariable;
• Si intento hacer una operación no permitida sobre
el tipo que contiene la variable tendré un error.
• Para mostrar mensajes por pantalla haré uso de:
• alert("texto del mensaje")
• Los métodos se declaran con la etiqueta function:
• function hola(){ … }
• Para devolver un valor haremos uso de
"return".
Javascript
• La llamada a los métodos Javascript se hará desde

elementos HTML.
• Los elementos HTML tienen asociados
determinados eventos cuando su estado cambie.
• En esos eventos podemos llamar a código
Javascript.
• Haciendo uso de Jquery como extensión de
Javascript podremos realizar funcionalidad antes de
que un documento se cargue.

Javascript: jQuery
• Jquery es una librería Javascript que pretende

facilitar el uso del código Javascript a los
programadores.
• Añade un conjunto nuevo de eventos a los ya
existentes HTML.
• Permite hacer llamdas AJAX, por lo que permite
que, el cliente, llame directamente al servidor.
• Incorpora librerías de componentes HTML con
funcionalidad enriquecida que podemos usar con
poco esfuerzo. jQuery
• Tutorial: jQuery tutorial
Javascript: jQuery
• Al igual que en CSS haremos uso de selectores

para recuperar un elemento concreto.
• La sintaxis es $(selector):
• $("p"): recuperaría todos los elementos HTML
de tipo <p>
• $(".test"): recuperaría todos los elementos
HTML cuyo atributo "class" fuera "test".
• $("#test"): recuperaría todos los elementos
HTML cuyo atributo "id" fuera "test".

Bootstrap
• Framework CSS que facilita a los desarrolladores la

maquetación de las páginas.
• Incluye un conjunto de clases CSS para maquetar
de manera fácil una página a cualquier resolución.
• Es mantenido y actualizado por Twitter.
• Está optimizado para dispositivos móviles.
• Permite un diseño “Responsive”
• Web de Boostrap

Bootstrap
• 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.

Bootstrap
• Solución “Responsive Design”

• Diseña una sóla vez para todos tus
dispositivos.
• El diseño se adaptará dinámicamente a la
resolución en la que se esté visualizando.
• Los diferentes elementos “saben” que
propiedades deben tener, según la resolución.
• Definimos la estructura que debe tener la web
y esta se adapta según el dispositivo que la
visualiza.

Bootstrap
• Boostrap incluye un conjunto de estilos para hacer

nuestra web responsive.
• Es un framework potente y complejo por lo que
para profundizar a fondo requiere conocimientos
amplios de CSS.
• No obstante no es necesaria una gran experiencia
para conseguir una maquetación de calidad que
sea “responsive”,

HTML

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

HTML

Cargado por

Copyright:

Formatos disponibles

HTML5, CSS3, Jquery y Boostrap

© 2012. Área de las Tecnologías de la Información y las Comunicaciones Aplicadas.

© 2012. Área de las Tecnologías de la Información y las Comunicaciones Aplicadas.

Página Web •Tablas

© 2012. Área de las Tecnologías de la Información y las Comunicaciones Aplicadas.

• ¿Por qué HTML5?

© 2012. Área de las Tecnologías de la Información y las Comunicaciones Aplicadas.

• ¿Por qué HTML5?

© 2012. Área de las Tecnologías de la Información y las Comunicaciones Aplicadas.

• El concepto de elemento HTML

© 2012. Área de las Tecnologías de la Información y las Comunicaciones Aplicadas.

• El concepto de elemento HTML

<p class=“texto”>Curso HTML CEMA </p>

© 2012. Área de las Tecnologías de la Información y las Comunicaciones Aplicadas.

• Tipos de elementos HTML

© 2012. Área de las Tecnologías de la Información y las Comunicaciones Aplicadas.

• Estructura base de un documento html.

© 2012. Área de las Tecnologías de la Información y las Comunicaciones Aplicadas.

• Definir un documento HTML.

• Una vez realizado esto podremos comenzar

© 2012. Área de las Tecnologías de la Información y las Comunicaciones Aplicadas.

© 2012. Área de las Tecnologías de la Información y las Comunicaciones Aplicadas.

© 2012. Área de las Tecnologías de la Información y las Comunicaciones Aplicadas.

• El lenguaje HTML está limitado a la hora de

• El lenguaje HTML está limitado a la hora de

• Los estilos CSS deben darse de alta en un fichero

© 2012. Área de las Tecnologías de la Información y las Comunicaciones Aplicadas.

• Cómo se define un estilo en css:

© 2012. Área de las Tecnologías de la Información y las Comunicaciones Aplicadas.

• Un selector es un identificador para saber sobre qué

© 2012. Área de las Tecnologías de la Información y las Comunicaciones Aplicadas.

© 2012. Área de las Tecnologías de la Información y las Comunicaciones Aplicadas.

• Normalmente se le aplica un estilo por defecto a los

• CSS3 como mejora de CSS incorpora propiedades para una

© 2012. Área de las Tecnologías de la Información y las Comunicaciones Aplicadas.

© 2012. Área de las Tecnologías de la Información y las Comunicaciones Aplicadas.

• Inicialmente se llamaba LiveScript.

• Diseñado para programas sencillos y pequeños.

© 2012. Área de las Tecnologías de la Información y las Comunicaciones Aplicadas.

• Javascript se integra en HTML de dos maneras:

© 2012. Área de las Tecnologías de la Información y las Comunicaciones Aplicadas.

• La declaración de variables se hace sin especificar

• La llamada a los métodos Javascript se hará desde

© 2012. Área de las Tecnologías de la Información y las Comunicaciones Aplicadas.

• Jquery es una librería Javascript que pretende

• Al igual que en CSS haremos uso de selectores

© 2012. Área de las Tecnologías de la Información y las Comunicaciones Aplicadas.

• Framework CSS que facilita a los desarrolladores la

© 2012. Área de las Tecnologías de la Información y las Comunicaciones Aplicadas.

© 2012. Área de las Tecnologías de la Información y las Comunicaciones Aplicadas.

• Solución “Responsive Design”

© 2012. Área de las Tecnologías de la Información y las Comunicaciones Aplicadas.

• Boostrap incluye un conjunto de estilos para hacer

© 2012. Área de las Tecnologías de la Información y las Comunicaciones Aplicadas.

También podría gustarte