Tema :
HTML5 y CSS3
Alumno : Portilla Huamani Jorge Luis
Curso :
Herramientas Multimedia
Docente : Rubí Alicia Yupanqui Piña
HTML5 INTRODUCCIÓN ¿Qué es HTML5? HTML5 es el último estándar para el HTML. La versión anterior de HTML, HTML 4.01, se produjo en 1999, y el Internet ha cambiado mucho desde entonces. HTML5 fue diseñado para reemplazar el HTML 4, XHTML y DOM HTML Nivel 2. Fue especialmente diseñado para ofrecer contenido rico sin necesidad de plugins adicionales. La versión actual ofrece de todo, desde la animación de gráficos, música de películas, y también se puede utilizar para construir aplicaciones web complejas. HTML5 es también multiplataforma. Está diseñado para trabajar si usted está usando un PC o un Tablet, un Smartphone o una Smart TV.
¿CÓMO RESULTÓ HTML5 COMIENZA? HTML5 es una colaboración entre el Consorcio World Wide Web (W3C) y el Grupo de Trabajo de Tecnología Web de hipertexto Aplicación (WHATWG). WHATWG estaba trabajando con los formularios web y aplicaciones, y la W3C estaba trabajando con XHTML 2.0. En 2006, decidieron cooperar y crear una nueva versión de HTML. Se establecieron algunas reglas para HTML5:
Las nuevas características deben estar basadas en HTML, CSS, DOM y JavaScript La necesidad de plugins externos (como Flash) debe reducirse El manejo de errores debe ser más fácil que en las versiones anteriores De secuencias de comandos tiene que ser sustituido por más de marcado HTML5 debe ser independiente del dispositivo El proceso de desarrollo debe ser visible para el público
ETIQUETAS HTML5 Etiquetas de formato HTML se llaman las etiquetas HTML. Etiquetas HTML son palabras clave (nombres de etiqueta) encerrada entre parĂŠntesis angulares como <html>
Etiquetas HTML normalmente vienen en pares como <p> y </ p> La primera etiqueta en una pareja es la etiqueta de inicio, la segunda etiqueta es la etiqueta de cierre La etiqueta final se escribe igual que la etiqueta inicial, con una barra antes del nombre de la etiqueta De inicio y fin son tambiĂŠn llamados etiquetas de apertura y cierre de etiquetas <tagname> contenido </ nombre de etiqueta>
ELEMENTOS HTML En HTML, la mayorĂa de los elementos se escriben con una etiqueta de inicio (por ejemplo <p>) y una etiqueta de cierre (por ejemplo, </ p>), con el contenido en el medio:
<p> Este es un pĂĄrrafo. </ p>
ESTRUCTURA DE PÁGINA HTML A continuación se muestra una visualización de una estructura de la página HTML:
<html> <body> Esta <h1> un título </ h1> <p> Este es un párrafo. </ p> <p> Este es otro párrafo. </ p> </ Body> </ Html>
LA DECLARACIร N <! DOCTYPE> El <! DOCTYPE> ayuda a que el navegador muestre una pรกgina web correctamente. Hay muchos documentos en la web y un navegador sรณlo puede mostrar una pรกgina HTML 100% correctamente si se conoce la versiรณn de HTML y el tipo utilizado.
Declaraciones comunes HTML5 <!DOCTYPE html>
NUEVOS ELEMENTOS EN HTML5 El Internet y el uso de la Internet, ha cambiado mucho desde 1999, cuando HTML 4.01 convirtió en un estándar. Hoy en día, varios elementos en HTML 4.01 son obsoletos, nunca utilizado, o no se utiliza de la manera que estaban destinados. Todos estos elementos se han eliminado o re-escritas en HTML5. Para manejar mejor las necesidades de Internet de hoy en día, HTML5 también ha incluido nuevos elementos para la elaboración de gráficos, que muestran el contenido de los medios de comunicación, para una mejor estructura de la página y un mejor manejo de formularios, y varias APIs nuevas, tales como arrastrar y soltar, obtener la posición geográfica de un usuario, almacenar datos locales, y más. A continuación se muestra una lista de los nuevos elementos HTML, introducidos por HTML5, y una descripción de lo que se utilizan.
EL ELEMENTO NUEVO <CANVAS> El elemento <canvas> se utiliza para dibujar gráficos, sobre la marcha, en una página web. El ejemplo de la izquierda muestra un rectángulo rojo, un rectángulo gradiente, un rectángulo multicolor, y un poco de texto multicolor que se dibuja en el lienzo. ¿Qué es el lienzo? El elemento <canvas> HTML5 se utiliza para dibujar gráficos, sobre la marcha, a través de secuencias de comandos (normalmente JavaScript). El elemento <canvas> es sólo un contenedor de gráficos. Se debe utilizar una secuencia de comandos para dibujar realmente los gráficos. Canvas tiene varios métodos para caminos de dibujo, cajas, círculos, texto y agregar imágenes.
¿QUÉ ES CSS3? Mientras que HTML nos permite definir la estructura una página web, las hojas de estilo en cascada (Cascading Style Sheets o CSS) son las que nos ofrecen la posibilidad de definir las reglas y estilos de representación en diferentes dispositivos, ya sean pantallas de equipos de escritorio, portátiles, móviles, impresoras u otros dispositivos capaces de mostrar contenidos web. Las hojas de estilo nos permiten definir de manera eficiente la representación de nuestras páginas y es uno de los conocimientos fundamentales que todo diseñador web debe manejar a la perfección para realizar su trabajo. La primera versión de CSS fue publicada a fines del año 1996 y fue logrando popularidad y aceptación hasta llegar a la versión 2.1, estándar actual que ofrece gran compatibilidad con la mayoría de los navegadores del mercado.
A partir del año 2005 se comenzó a definir el sucesor de esta versión, al cual se lo conoce como CSS3 o Cascading Style Sheets Level 3. Actualmente en definición, esta versión nos ofrece una gran variedad de opciones muy importantes para las necesidades del diseño web actual. Desde opciones de sombreado y redondeado, hasta funciones avanzadas de movimiento y transformación, CSS3 es el estándar que dominará la web por los siguientes años.