HTML

HTML5, CSS3, Jquery y Boostrap
2012. rea de las Tecnologas de la Informacin y las Comunicaciones Aplicadas.

ndice
HTML
CSS
Javascript
Bootstrap

Estructura de una pgina web
Pgina Web
Prrafos Tablas
Estructura
Capas
Encabezados Etc.
Listas HTML
Textos
Contenido Imgenes
Enlaces
Colores Fondos
Apariencia Tamaos
Tipografas Etc.
CSS

Alineacin
Efectos
Comportamiento Validaciones
Javascri
Automatizacin
pt
HTML5
Qu es HTML5?
Es un lenguaje de marcas utilizado para el desarrollo
de pginas 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 estndar de diseo web por
el W3C.
Los navegadores deben saber interpretar este lenguaje
de manera correcta (no siempre IE)
Sobre HTML se desarrollan tecnologas para facilitar a
los
2012. rea de usuarios
las Tecnologas el diseo
de la Informacin de una Aplicadas.
y las Comunicaciones web.
HTML5
Evolucin:
En 1997 nace HTML4 publicado por el W3C como
estndar de diseo web.
En 1999 nace XHTML 1.0 que extiende HTML4
En 2001 se publica la nueva versin de XHTML, la 1.1
En 2002 se prepara un borrador para una nueva
versin 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 rpidamente insertando diferentes
contenidos a ofrecer en cada pgina.
HTML 4.0 no cubre esas necesidades por lo que se
crearon diversas tecnologas que suplieran este vaco:
Flash Player
Silverlight
Se tiende a un trabajo distribuido por lo que se exigen
herramientas tipo "escritorio" en versin 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 diseado.
Conclusin: hay que hacer evolucionar el estndar 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 bsicas:
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 propsito del texto y no denotan ningn formato
especfico.
<h1>Curso HTML</h1>
De Presentacion:
Describen la apariencia del texto, independientemente de su funcin.
<b>Curso HTML</b>
Los elementos de presentacin se encuentran obsoletos desde la
aparicin 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>Ttulo</title>
<! Encabezado de la web. Aqu incluiremos metainformacin 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 lnea 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 seccin HEAD
Contiene metainformacin de la pgina
Establecemos ttulo y palabras clave para los
buscadores
Incluimos hojas de estilo (CSS) a utilizar en la pgina
Podemos introducir cdigo javascript a usar en nuestra
pgina.
Referencia:
http://www.w3schools.com/html/html_head.asp

HTML5
La seccin BODY
Alberga el "contenido" real de la pgina.
Establece cmo se visualizan los elementos.
Hace uso de los scripts y hojas de estilo definidos en la
seccin HEAD.
En este punto tenemos a nuestra disposicin de todos
los tags disponibles para maquetar nuestra pgina.
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 cientfico 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 cientfico 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 caractersticas
Permite definir el estilo de cada elemento
HTML de manera exacta.
Permite escalar tamaos en funcin del tamao
de la pantalla.
Asla el contenido de la presentacin.
Permite incorporar cierta lgica 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 aadir pequeos retoques
directamente sobre el HTML.

CSS3
Cmo se define un estilo en css:
Declaracin
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 jerarquas de estilos.
Podemos definir estilos por defecto para los elementos
HTML estndar.
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, tendrn ese estilo.
De clase
Todos los elementos HTML cuya propiedad "class"
tenga un determinado valor tendrn ese estilo.

CSS3
Normalmente se le aplica un estilo por defecto a los

elementos HTML para conformar una plantilla.
La personalizacin definitiva se suele realizar haciendo uso
de la propiedad "class".
No es recomendado usar el selector por id. Slo se
recomienda cuando el componente, adems 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 maquetacin y decoracin de los elementos.
Se han aadido propiedades para aplicar efectos de
pintado.
Se permiten realizar animaciones.
Habilita el uso de lgica 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 interaccin cliente-servidor,
nicamente opera en el cliente (Conseguido con
jQuery).
Javascript
Diseado para programas sencillos y pequeos.

Muy utilizado para validacin de datos.
Utilizado junto con CSS para poner efectos en las
pginas de Web.
Es independiente de la plataforma.
Es bajamente tipado.
Fcil de aprender, pero difcil de depurar.
Gran parecido con Java pero mucho ms limitado.

Javascript
Javascript se integra en HTML de dos maneras:

Como fichero *.js incluido en la misma seccin
que los CSS.
Como cdigo 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 declaracin de variables se hace sin especificar

el tipo:
var miVariable;
Si intento hacer una operacin 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 mtodos se declaran con la etiqueta function:
function hola(){ }
Para devolver un valor haremos uso de
"return".
Javascript
La llamada a los mtodos Javascript se har desde

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

Javascript: jQuery
Jquery es una librera Javascript que pretende

facilitar el uso del cdigo Javascript a los
programadores.
Aade 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 libreras 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"): recuperara todos los elementos HTML
de tipo <p>
$(".test"): recuperara todos los elementos
HTML cuyo atributo "class" fuera "test".
$("#test"): recuperara todos los elementos
HTML cuyo atributo "id" fuera "test".

Bootstrap
Framework CSS que facilita a los desarrolladores la

maquetacin de las pginas.
Incluye un conjunto de clases CSS para maquetar
de manera fcil una pgina a cualquier resolucin.
Es mantenido y actualizado por Twitter.
Est optimizado para dispositivos mviles.
Permite un diseo Responsive
Web de Boostrap

Bootstrap
El problema
A la hora de maquetar una web tenemos que
tener en cuenta infinitas resoluciones y
tamaos de pantalla.
Nuestros diseos 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 segn el dispositivo en el que se vern.

Bootstrap
Solucin Responsive Design

Disea una sla vez para todos tus
dispositivos.
El diseo se adaptar dinmicamente a la
resolucin en la que se est visualizando.
Los diferentes elementos saben que
propiedades deben tener, segn la resolucin.
Definimos la estructura que debe tener la web
y esta se adapta segn 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 maquetacin de calidad que
sea responsive,

HTML

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

HTML

Încărcat de

Drepturi de autor:

Formate disponibile

HTML5, CSS3, Jquery y Boostrap

2012. rea de las Tecnologas de la Informacin y las Comunicaciones Aplicadas.

2012. rea de las Tecnologas de la Informacin y las Comunicaciones Aplicadas.

2012. rea de las Tecnologas de la Informacin y las Comunicaciones Aplicadas.

2012. rea de las Tecnologas de la Informacin y las Comunicaciones Aplicadas.

2012. rea de las Tecnologas de la Informacin y las Comunicaciones Aplicadas.

El concepto de elemento HTML

2012. rea de las Tecnologas de la Informacin y las Comunicaciones Aplicadas.

El concepto de elemento HTML

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

2012. rea de las Tecnologas de la Informacin y las Comunicaciones Aplicadas.

Tipos de elementos HTML

2012. rea de las Tecnologas de la Informacin y las Comunicaciones Aplicadas.

Estructura base de un documento html.

2012. rea de las Tecnologas de la Informacin y las Comunicaciones Aplicadas.

Definir un documento HTML.

Una vez realizado esto podremos comenzar

2012. rea de las Tecnologas de la Informacin y las Comunicaciones Aplicadas.

2012. rea de las Tecnologas de la Informacin y las Comunicaciones Aplicadas.

2012. rea de las Tecnologas de la Informacin 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 Tecnologas de la Informacin y las Comunicaciones Aplicadas.

Cmo se define un estilo en css:

Selector { propiedad: valor; ...}

2012. rea de las Tecnologas de la Informacin y las Comunicaciones Aplicadas.

Un selector es un identificador para saber sobre qu

2012. rea de las Tecnologas de la Informacin y las Comunicaciones Aplicadas.

2012. rea de las Tecnologas de la Informacin 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 Tecnologas de la Informacin y las Comunicaciones Aplicadas.

2012. rea de las Tecnologas de la Informacin y las Comunicaciones Aplicadas.

Inicialmente se llamaba LiveScript.

Diseado para programas sencillos y pequeos.

2012. rea de las Tecnologas de la Informacin y las Comunicaciones Aplicadas.

Javascript se integra en HTML de dos maneras:

2012. rea de las Tecnologas de la Informacin y las Comunicaciones Aplicadas.

La declaracin de variables se hace sin especificar

La llamada a los mtodos Javascript se har desde

2012. rea de las Tecnologas de la Informacin y las Comunicaciones Aplicadas.

Jquery es una librera Javascript que pretende

Al igual que en CSS haremos uso de selectores para

2012. rea de las Tecnologas de la Informacin y las Comunicaciones Aplicadas.

Framework CSS que facilita a los desarrolladores la

2012. rea de las Tecnologas de la Informacin y las Comunicaciones Aplicadas.

2012. rea de las Tecnologas de la Informacin y las Comunicaciones Aplicadas.

Solucin Responsive Design

2012. rea de las Tecnologas de la Informacin y las Comunicaciones Aplicadas.

Boostrap incluye un conjunto de estilos para hacer

2012. rea de las Tecnologas de la Informacin y las Comunicaciones Aplicadas.

S-ar putea să vă placă și