Scribd
Cargar
501 vistas33 páginas

HTML5

El documento resume los conceptos básicos de HTML, CSS y JavaScript para el desarrollo de páginas web. Define la estructura, contenido y presentación de una página web utilizando HTML, el estilo visual con CSS y el comportamiento con JavaScript. Explica elementos, etiquetas y atributos fundamentales de cada tecnología para crear sitios web.

Cargado por

Alex Sanchez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPT, PDF, TXT o lee en línea desde Scribd
501 vistas33 páginas

HTML5

El documento resume los conceptos básicos de HTML, CSS y JavaScript para el desarrollo de páginas web. Define la estructura, contenido y presentación de una página web utilizando HTML, el estilo visual con CSS y el comportamiento con JavaScript. Explica elementos, etiquetas y atributos fundamentales de cada tecnología para crear sitios web.

Cargado por

Alex Sanchez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPT, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 33

Índice

• HTML
• CSS
• Javascript
• Bootstrap
Estructura de una página web

Página Web •Tablas


• Párrafos
Estructura •• Encabezados • Capas
Listas • Etc.
HTML
• Textos
Contenido • Imágenes
• Enlaces

• Colores • Fondos
Apariencia • Tipografías • Tamaños CSS
• Alineación • Etc.

• Efectos
Comportamiento • Validaciones Javascript
• Automatización
• ¿Qué es HTML5?
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
usuarios el diseño de una web.
• Evolución: HTML5
• 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
• ¿Por qué HTML5?
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.
• ¿Por qué HTML5?
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
• El concepto de elemento HTML
HTML5
• 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
• Tipos de elementos HTML
HTML5
• 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>
• Estructura base de un documento html.
HTML5
<!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>
• Definir un documento
HTML5 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
• La sección HEADHTML5
• 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.
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.
• El lenguaje HTML está limitado a la hora de aplicarle
CSS3
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.
• Los estilos CSS deben
CSS3darse 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.
• Cómo se define un
CSS3
estilo en css:

Declaración
Selector { propiedad: valor; ...}

Ejemplo:
H1 {color:#CC9900;}
• CSS3 para saber sobre qué elemento
Un selector es un identificador
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
• Tipos de selectores: CSS3
• 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.
• CSS3un estilo por defecto a los elementos
Normalmente se le aplica
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
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).
• Diseñado para Javascript
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>
• La declaraciónJavascript
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.
• Jquery es Javascript: jQuery que pretende facilitar el
una librería Javascript
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
• El problema
Bootstrap
• 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”,

También podría gustarte