Actividad html.

 

1. Historia del html5.

Podría decirse que HTML5 nació en 2004, cuando se fundó el grupo de trabajo WHAT con miembros de Apple, laFundación Mozilla y Opera Software. Dos años después consiguieron uno de sus principales apoyos, pues el W3C(World Wide Web Consortium) decidió abandonar XHTML y comenzó a trabajar con WHAT.
2008 fue un gran año para este lenguaje, pues se finalizó su primera versión. Esto permitió que Firefox 3, el navegador de Mozilla, fuese compatible con HTML5. Más adelante se sumarían Internet Explorer, Google Chrome y Safari.
Poco a poco se fueron sumando compañías y se fue abandonando el uso de tecnologías como Flash. De hecho, en septiembre de 2011, 34 de las 100 páginas con más tráfico según el ranking de Alexa utilizaban este lenguaje.

 

 

2. Estructura de una página en html5.

HTML5 es la versión 5 del lenguaje de marcado HTML. Un documento escrito en HTML tiene una estructura básica como la siguiente:

Analicemos un poco el código:

Lo primero que nos encontramos es la declaración del tipo de documento que se está mostrando. El DOCTYPE variará según el tipo de documento realizado, en nuestro ejemplo hemos utilizado el doctype del HTML5 que es maravillosamente sencillo.

html :Tras declarar el tipo de documento, indicamos que iniciamos nuestro documento HTML. Esta etiqueta se cierra cuando finalizamos el documento. Vemos que lleva un atributo lang, esto sirve para indicar el idioma del documento (en nuestro caso español)

head: En un documento HTML tenemos una cabecera dónde colocaremos los metadatos de la página, el código JavaScript y el CSS que utilizará el navegador para renderizar la página.

meta charset: Obligatorio en HTML5, informa el juego de caracteres del documento, debería ser siempre utf-8. Como todo metadato debe ir dentro del head

title: Es un tipo de metadato especial que nos proporciona el título de la página. Por motivos de posicionamiento (SEO) se recomienda que el meta title sea parecido al H1 del documento y a la URL de la página.
body: En su interior tendremos el contenido de la página.

 

3. Que es una etiqueta y cual es su sintáxis para su manejo en html5?

Una etiqueta o marca HTML es un código que se incluye en los archivos creados con el lenguaje HTML para estructurar, añadir significado o formato al contenido a una página web.

Ejemplo de uso de b
<b> la musica libre o copyleft</b>

Para definir una etiqueta HTML, primero se debe definir un elemento HTML. Un elemento HTML es un componente individual de un documento HTML. Los documentos HTML están compuestos de un árbol de elementos HTML y otros nodos, como nodos de texto. Cada elemento puede tener atributos especificados. Los elementos también puede tener contenido: otros elementos y texto. Los elementos HTML representan la semántica o el significado. Por ejemplo, el elemento "title" (título) representa el título del documento. En la sintaxis HTML, la mayoría de los elementos son escritos con una etiqueta (tag) de inicio y una etiqueta (tag) final, con el contenido dentro de estos. Las etiquetas (o tags) están compuestas de un nombre de elemento, rodeado de paréntesis angulares: "<" y ">". La etiqueta final tiene un barra en el paréntesis angular que abre para distinguirlo de la etiqueta inicial. No todos los elementos requieren una etiqueta HTML final, en ocasiones se "sobreentiende".

4. Etiquetas básicas que maneja html5 con ejemplos

En primer lugar, todo página html5 necesita un encabezado, Si bien es verdad que no es imprescindible para hacerlo funcionar es altamente recomendable, pues si creamos un página web para que sea encontrada por otros usuarios, los motores de búsqueda dan suma importancia a estas etiquetas.Nos referimos a las famosas etiquetas "h", del ingles "Heading", que significa encabezado. tenemos 6 etiquetas de encabezado numeradas del 1 al 6 según su importancia.
<h1> , <h2>, <h3>, <h4>, <h5>, y <h6>
Así la etiqueta h1 es la mas importante de nuestro documento html y la etiqueta h6 sería la etiqueta menos importante. De esta manera la primera etiqueta que debemos introducir sería la etiqueta h1, la cual ha de darnos una descripción general de toda la página, seguido de la etiqueta h2 para el siguiente encabezado y así ir definiendo una estructura clara y semántica del contenido.
Párrafos
Una vez que tenemos claras las etiqutas "h" o heading es la hora de introducir los párrafos que anuncian nuestras etiquetas de encabezado o "h"
Para nuestros párrafos utilizaremos la etiqueta <p> de párrafo. Cada vez que envolvamos un texto con estas etiquetas estaremos indicando al navegador que interprete ese texto como un único párrafo, bien sencillo verdad?.
Saltos de linea
Si quisiéramos incluir un salto de linea, podremos usar la etiqueta <br/>. Esta etiqueta tiene auto cierre igual que nos pasaba con las etiquetas <meta>, cerramos la etiqueta en la misma etiqueta de apertura con el símbolo "/".
Linea horizontal
También tenemos otra útil etiqueta, <hr/>, la cual también se usa cerrando la en la misma etiqueta de apertura al igual que las etiquetas <meta> y <br>, y sirve para imprimir una linea horizontal en el documento.

 

5.  Manejo de tablas en Html5, Realizar un ejemplo

Ahora veremos el uso y manejo de tablas en html, una tabla es una rejillas para ubicar datos, similar a una cuadricula de Excel y se usa principalmente para mostrar datos tabulados, hace tiempo las tablas se usaban también como objeto de diseño por su facilidad para dividir columnas y crear espacios de contenido, sin embargo por semántica esta práctica no debe usarse más, las tablas no deben usarse como objeto de diseño ya que son de hecho un objeto de contenido y debe ser usado para llamar listados de datos.
Al igual que en capítulos anteriores no nos centraremos en el diseño ya que esta parte le corresponde mas a CSS que a HTML por lo cual algunos atributos como background y border serán ignorados.
La etiqueta que determina una tabla es y como esta tiene contenido en su interior tiene una etiqueta de cierre
, pero esta etiqueta es un poco más compleja ya que cada tabla contiene filas y columnas que determinan las celdas que son las casillas de contenido en las que pondremos la información.
Tanto en HTML como en otros programas las tablas se utilizan para organizar datos, pero también nos puede ayudar en organizar la información en la pantalla, dado a que una celda de tabla puede contener cualquier elemento HTML, como por ejemplo un párrafo o un campo de texto de un formulario.
En HTML una tabla está formada por un conjunto de directivas, unas obligatorias y otras opcionales. La directiva principal que delimita e incluye las otras directivas es la directiva
. Los elementos definitorios para una tabla son las filas, las columnas y las celdas. HTML ofrece directivas como para construir las filas y , , , y son directivas opcionales, pero importantes, porque con ellas las tablas se pueden estructurar visualmente mejor.

Los atributos @headers y @scope facilitan a los navegadores especiales de voz la tarea de comprender como está estructurada la información de la tabla. Es lo que se llama "Accesibilidad Web". La utilización de estos atributos es vital en páginas Web destinadas a ofrecer información a las personas con discapacidad visual.
 

6. Manejo de formularios en HTML, realizar un ejemplo

Un formulario HTML es una sección de un documento que contiene contenido normal, código, elementos especiales llamados controles (casillas de verificación (checkboxes), radiobotones (radio buttons), menúes, etc.), y rótulos (labels) en esos controles. Los usuarios normalmente "completan" un formulario modificando sus controles (introduciendo texto, seleccionando objetos de un menú, etc.), antes de enviar el formulario a un agente para que lo procese (p.ej., a un servidor web, a un servidor de correo, etc.)

Un formulario es un elemento que permite recoger datos introducidos por el usuario.
Los formularios se utilizan para conocer las opiniones, dudas, y otra serie de datos sobre los usuarios, para introducir pedidos a través de la red, tienen multitud de aplicaciones.
Un formulario está formado, entre otras cosas, por etiquetas, campos de texto, menús desplegables, y botones.
Es muy recomendable utilizar tablas para organizar los elementos de los formularios. Utilizando tablas se consigue una mejor distribución de los elementos del formulario, lo que facilita su comprensión y mejora su apariencia.
 

 

Nota:  insertar videos que nos visualicen como trabajar con las etiquetas anteriores...
 

Actividad Html5

1.  Crear una tabla en Html5 con la  hora, los dias de la semana y las clases que reciben por dia y en la parte superior debe aparecer horario de clase y una imagen que tenga ver con ingeniería o tecnolgía de sistemas.

2.  Realizar el siguiente formulario con codigo Html5....