3. Que es una etiqueta y cual es su sintáxis para su manejo en html5?
4. Etiquetas básicas que maneja html5 con ejemplos
5. Manejo de tablas en Html5, Realizar un ejemplo
5. Manejo de formularios en HTML, realizar un ejemplo
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....
.
Nota: al terminar cada punto tomarle una foto a la imagen y subirla al igual que codigo html guardado como txt... e insertarlo en el sitio Web de cada uno...
Leer más: https://sistemasremington.webnode.com/desarrollo-web-i/actividad-html/
Crea tu propia web gratis: https://www.webnode.es
HISTARIA DEL HTML
El origen de HTML se remonta a 1980, cuando el físico Tim Berners-Lee, trabajador del CERN (Organización Europea para la Investigación Nuclear) propuso un nuevo sistema de "hipertexto" para compartir documentos.
Los sistemas de "hipertexto" habían sido desarrollados años antes. En el ámbito de la informática, el "hipertexto" permitía que los usuarios accedieran a la información relacionada con los documentos electrónicos que estaban visualizando. De cierta manera, los primitivos sistemas de "hipertexto" podrían asimilarse a los enlaces de las páginas web actuales.
Tras finalizar el desarrollo de su sistema de "hipertexto", Tim Berners-Lee lo presentó a una convocatoria organizada para desarrollar un sistema de "hipertexto" para Internet. Después de unir sus fuerzas con el ingeniero de sistemas Robert Cailliau, presentaron la propuesta ganadora llamada WorldWideWeb (W3).
El primer documento formal con la descripción de HTML se publicó en 1991 bajo el nombre HTML Tags (Etiquetas HTML) y todavía hoy puede ser consultado online a modo de reliquia informática.
La primera propuesta oficial para convertir HTML en un estándar se realizó en 1993 por parte del organismo IETF (Internet Engineering Task Force). Aunque se consiguieron avances significativos (en esta época se definieron las etiquetas para imágenes, tablas y formularios) ninguna de las dos propuestas de estándar, llamadas HTML y HTML+ consiguieron convertirse en estándar oficial.
En 1995, el organismo IETF organiza un grupo de trabajo de HTML y consigue publicar, el 22 de septiembre de ese mismo año, el estándar HTML 2.0. A pesar de su nombre, HTML 2.0 es el primer estándar oficial de HTML.
A partir de 1996, los estándares de HTML los publica otro organismo de estandarización llamado W3C (World Wide Web Consortium). La versión HTML 3.2 se publicó el 14 de Enero de 1997 y es la primera recomendación de HTML publicada por el W3C. Esta revisión incorpora los últimos avances de las páginas web desarrolladas hasta 1996, como applets de Java y texto que fluye alrededor de las imágenes.
HTML 4.0 se publicó el 24 de Abril de 1998 (siendo una versión corregida de la publicación original del 18 de Diciembre de 1997) y supone un gran salto desde las versiones anteriores. Entre sus novedades más destacadas se encuentran las hojas de estilos CSS, la posibilidad de incluir pequeños programas o scripts en las páginas web, mejora de la accesibilidad de las páginas diseñadas, tablas complejas y mejoras en los formularios.
La última especificación oficial de HTML se publicó el 24 de diciembre de 1999 y se denomina HTML 4.01. Se trata de una revisión y actualización de la versión HTML 4.0, por lo que no incluye novedades significativas.
Desde la publicación de HTML 4.01, la actividad de estandarización de HTML se detuvo y el W3C se centró en el desarrollo del estándar XHTML. Por este motivo, en el año 2004, las empresas Apple, Mozilla y Opera mostraron su preocupación por la falta de interés del W3C en HTML y decidieron organizarse en una nueva asociación llamada WHATWG (Web Hypertext Application Technology Working Group).
La actividad actual del WHATWG se centra en el futuro estándar HTML 5, cuyo primer borrador oficial se publicó el 22 de enero de 2008. Debido a la fuerza de las empresas que forman el grupo WHATWG y a la publicación de los borradores de HTML 5.0, en marzo de 2007 el W3C decidió retomar la actividad estandarizadora de HTML.
De forma paralela a su actividad con HTML, W3C ha continuado con la estandarización de XHTML, una versión avanzada de HTML y basada en XML. La primera versión de XHTML se denomina XHTML 1.0 y se publicó el 26 de Enero de 2000 (y posteriormente se revisó el 1 de Agosto de 2002).
XHTML 1.0 es una adaptación de HTML 4.01 al lenguaje XML, por lo que mantiene casi todas sus etiquetas y características, pero añade algunas restricciones y elementos propios de XML. La versión XHTML 1.1 ya ha sido publicada en forma de borrador y pretende modularizar XHTML. También ha sido publicado el borrador de XHTML 2.0, que supondrá un cambio muy importante respecto de las anteriores versiones de XHTML.
En esta ocasión les comentaremos acerca de la Breve Historia del HTML, un lenguaje de programación para la elaboración de páginas web. Mencionaremos un poco de sus inicios, los cuales no son tan antiguos como se podría llegar a pensar, y de como fue evolucionando y mejorando hasta llegar a la versión HTML 5.
¿Qué es el HTML?
EL HTML es un lenguaje de programación para la elaboración de páginas web, basado en el uso de etiquetas encerradas por corchetes angulares (<>) el cual se utiliza para traducir la estructura y la información en forma de texto, con la posibilidad de agregar objetos como imágenes, videos etc. En la actualidad el HTML es complementado por otras tecnologías como las Hojas de Estilo en Cascada (CSS), el JavaScript entre otras.
Anuncios
Breve Historia del HTML
Creador del HTML
El origen del lenguaje HTML se remonta al físico Tim Berners-Lee, un trabajador del CERN (Organización Europea para la Investigación Nuclear) quien a finales de 1989 propuso el lenguaje HTML junto con el protocolo HTTP, cuya finalidad era crear un medio para poder compartir información entre diversos “grandes” físicos de la época que trabajaban por todo el mundo.
Orígenes del HTML
El primer documento que se publicó de manera formal, sobre la estructura del HTML se publicó en el año de 1991 con el nombre de: “HTML Tags“, simplemente texto en donde se explican las etiquetas que se usan en HTML. Este documento aun se encuentra disponible para su consulta en la web: HTML Tags.
Tal y como explica el documento, en HTML se utilizan etiquetas de apertura y de cierre (solo en algunas excepciones no) en donde se abre con los corchetes angulares y se cierra de igual manera con los corchetes pero anteponiendo un (/).
Es decir:
Versiones de HTML
El primero en salir fue el HTML 1, sin embargo no fue considerado un estándar, por lo que muchas veces se considera al HTML 2 como la primera versión del HTML.
HTML 2: Presentado en el año de 1995, el HTML 2 es considerado la primera versión del HTML, el cual no soportaba tablas y donde la declaración explícita de los elementos body, html y head es opcional.
HTML 3.2: Esta versión se lanzó en el año de 1997 gracias al organismo de estandarización llamado W3C (World Wide Web Consortium). El cual incorporó los últimos avances de las páginas web como applets de Java y texto que fluye alrededor de las imágenes.
HTML 4.0: Lanzada en 1998. Entre sus novedades más destacadas se encuentran las hojas de estilos CSS, la posibilidad de incluir pequeños programas o scripts en las páginas web, mejora de la accesibilidad de las páginas diseñadas, tablas complejas y mejoras en los formularios.
HTML 4.01: salió a la luz en 1999 como una revisión y actualización de la versión HTML 4.0, por lo que no incluye novedades significativas.
HTML 5: quinta revisión importante del lenguaje básico de la World Wide Web, el cual especifica dos variantes de sintaxis para HTML: el clásico HTML (text/html), y la variante conocida como HTML5 y una variante XHTML conocida como sintaxis XHTML5. Este nuevo estándar aun no es tan utilizado pero su potencial es mucho mayor a las versiones anteriores, el cual incluye interesantes mejoras como nuevos elementos y etiquetas.
Años atras html no era conocido como un estandar mundial para la creacion y el desarrollo de paginas web pero de un momento a otro html se convirtio en uno de los lenguajes de programacion mas utilizado, mas facil de manejar ya que su sintaxis es realmente comoda y amigable para los programadores dando la posibilidad de compartir o mas bien trabajar junto a otros lenguajes de programacion web eficientes, salieron grandes versiones de HTML como HTML 4.0 que dio una gran revolucion en el mundo de las paginas web y el gran exito hasta el momento HTML5 que por su gran sintaxis y su forma tan moderna y amplia a la hora de programar a todos los usuarios que se benefician de este han estan muy satisfechos.
Habla de la historia del HTML desde sus inicios hasta la actualidad, que beneficios nos trae aprender html y para que nos puede servir aprender esta herramienta.
2. Estructura de una pagia web HTML5
<!DOCTYPE html>
Esta línea deberá ser la primera línea del documento, sin espacios ni líneas previas. Esto es una manera de activar el modo estándar y forzar a los navegadores a interpretar el HTML5 siempre que sea posible, o a ignorarlo cuando no lo sea.
<html>
Después de declarar el tipo de documento, se construye la estructura del árbol con HTML. El elemento raiz del árbol es el elemento <html>. Este elemento engloba todo el código HTML.
<!DOCTYPE html>
<html lang="es">
</html>
El atributo lang en la etiqueta de inicio <html> es el único atributo que debemos especificar en HTML5. Este atributo define el lenguaje del contenido del documento que estamos creando- en este caso, es para español.
HTML5 es muy flexible con respecto a la estructura y los elementos utilizados en su desarrollo. El elemento <html> puede ser incluido sin atributos o no ser incluido.
Sin embargo, por compatiblidad y otras razones, se recomienda seguir unas reglas básicas. En este tutorial vamos a aprender como construir un documento HTML siguiendo un manual de buenas prácticas.
<head>
Sigamos con la construcción de nuestra plantilla. El código HTML incluido en las etiquetas <html> tiene que estar dividido en dos secciones principales. Como ya ocurría en versiones anteriores de HTML, la primera sección es el "head" y la segunda el "body". El siguiente paso, por tanto, es crear dos secciones en el código, utilizando esos dos elementos; <head> y <body>.
El elemento <head> va en primer lugar, y como el resto de los elementos estructurales, tiene un tag de apertura y otro de cierre.
<!DOCTYPE html>
<html lang="es">
<head>
</head>
</html>
El "tag" no ha cambiado con respecto a otras versiones y su función es la misma. Dentro de los "tags" <head>, definiremos el título de nuestra página, declararemos la codificación de caracteres, incluiremos cualquier información general que queramos sobre el documento, e incorporaremos archivos externos con los estilos, scripts o incluso imágenes necesarias para mostrar la página.
A excepción del título y algunos iconos, el resto de la información incluida en el documento dentro de las etiquetas <head> no será visible.
<body>
La siguiente sección que forma parte de la organización principal del documento HTML es el "body". Este "cuerpo" es la parte visible del documento y viene especificado con la etiqueta <body>.
Esta etiqueta no ha cambiado con respecto a las versiones anteriores de HTML:
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
</body>
</html>
<meta>
A continuación vamos a desarrollar la cabecera del documento. Existen algunas modificaciones e innovaciones dentro de esta sección, y una de ellas es la etiqueta que define la codificación de los caracteres del documento. Es la etiqueta meta y especifica como se debe presentar el texto dentro de la pantalla.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
La modificación para este elemento de HTML5, es como en muchos casos, una simplificación. La etiqueta meta nueva para la codificación de caracteres es más corta y más simple. Igualmente, se puede cambiar utf-8 por la codificación que se prefiera, y se pueden añadir otras etiquetas meta como "description" o "keywords", tal y como se ve en el ejemplo que tenemos a continuación:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="description" content="Esto es un ejemplo de HTML5">
<meta name="keywords" content="HTML5">
</head>
<body>
</body>
</html>
Nota: Como vemos, la etiqueta <meta> especifica el tipo y el atributo content declara su valor, pero ninguno de estos valores serán mostrados en la pantalla.
En HTML5, no es necesario poner una barra de cierre, pero se recomienda por razones de compatibilidad.
<title>
La etiqueta <title>, como siempre, especifica el título del documento, y no hay nada nuevo en HTML5.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="description" content="Esto es un ejemplo de HTML5">
<meta name="keywords" content="HTML5">
<title>Título del documento</title>
</head>
<body>
</body>
</html>
Nota: Normalmente, este texto es mostrado por los navegadores en la parte superior de la ventana.
<link>
Otro elemento importante que se incluye dentro de la cabecera es <link>. Este elemento se utiliza para incorporar estilos, scripts, imágenes o iconos de archivos externos. Uno de los usos más comunes de <link>, es el de insertar un archivo CSS externo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="description" content="Esto es un ejemplo de HTML5">
<meta name="keywords" content="HTML5">
<title>Título del documento</title>
<link rel="stylesheet" href="edu4javastyles.css">
</head>
<body>
</body>
</html>
En HTML5, ya no hay que especificar el tipo de hoja de estilo que estamos insertando, por lo que el atributo type ha sido eliminado.
Solamente necesitamos dos atributos para incluir nuestro archivo de estilos: rel y href. El atributo rel se refiere a la relación entre el documento y el archivo que estamos incluyendo. En este caso tiene el valor= "stylesheet", lo que le indica al navegador que el archivo edu4javastyles.css es un archivo CSS con estilos necesarios para mostrar la página.
Nota: Una hoja de estilos es un conjunto de reglas de formato que nos va a ayudar a cambiar la presentación de nuestro documento- por ejemplo, el tamaño o el color del texto.
Sin estas reglas, el texto y otros elemento se mostrarán en la pantalla utilizando los estilos estándares suministrados por los navegadores (tamaño y colores por defecto).
Leer más: https://ingeniosodiego-cur.webnode.es/programacion-web-1/actividades/html5/
Crea tu propia web gratis: https://www.webnode.es
En HTML5 la estructura interna básica de una página web se ha simplificado, reduciendo el código innecesario hasta quedarse con el esqueleto básico, que sería el siguiente:
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Título de la web</title>
</head>
<body>
Contenido de la web
</body>
</html>
Cada fichero HTML está compuesto de dos partes. El <head>, donde se añade toda la información que el navegador necesita pero que no se visualiza y el <body>, que agrupa todo el contenido de la página y que el navegador sí que muestra.
tomado de
https://www.html6.es/t1_estructura.html
año 2015
Aporte personal
La estructura de las la creacion de paginas web html5 se basa unicamente en en el head, que como su nombre lo dice es el titulo que va a llevar tu pagina web, el body que es donde va todo el contenido de tu pagina, como videos, textos, documentos etc, una pagina web puede tener 1 o muchas estructuras de estas mismas en su desarrollo.
El video habla de toda la estructura de HTML5 y la como iniciarse en este lenguaje web
3. Que es una etiqueta y cual es su sintáxis para su manejo en html5?
Significa orden, según su etimología griega. Por eso se usa en todos los ámbitos donde el orden y la armonía son requeridos
La etiqueta es un elemento que sirve para rotular. Por ejemplo, la emplean mucho los niños en los colegios, para no perder sus elementos personales, o en la cocina para identificar los productos contenidos en los envases. En los productos destinados a la venta, las etiquetas tienen la función de describir la marca, el contenido de su elaboración, y de ser un producto perecedero, la fecha de su vencimiento. También se usa el término para expresar que a alguien se lo identifica con ciertas características. Por ejemplo: te etiquetaron como miembro de los rebeldes.
En informática se denominan etiquetas a las órdenes o comandos, escritas en corchetes angulares, con el que desarrolla sus documentos el lenguaje HTML.
En el ámbito social, la etiqueta son las reglas de elegancia que se deben guardar para adaptarse a los formalismos o solemnidades de ciertos actos públicos o privados importantes socialmente. Se refieren a normas del buen vestir, del comer con distinción, del empleo de ciertos gestos calificados como formales, evitando los cotidianos e informales, y en general todo lo que las costumbres de cada lugar definen como distinguido, y restringido a ciertos sectores sociales. Implica el uso de ropas de gala, el empleo de los cubiertos en forma correcta, según esas reglas, no hablar demasiado ni alzar la voz, saber escuchar, dirigirse a todos con amabilidad, respetar los horarios, usar la mantelería que corresponda a cada caso, el modo de servir los alimentos, etcétera.
*Marca o marcas que se dejan en un texto para que luego sean interpretadas, generalmente para realizar alguna acción sobre el mismo texto marcado. Por ejemplo, el lenguaje HTML se basa en la aplicación de múltiples etiquetas para dar formato y darle características a un texto. Este texto es interpretado y mostrado por un navegador. Ver: etiqueta HTML.
* (Label). Elemento de las interfaces gráficas que muestra un texto estático generalmente usado para identificar otros elementos widgets. Estos elementos no tienen ningún tipo de interacción con el usuario.
Son las marcas que se dejan en un texto para que las personas las puedan interpretar, casi siempre sirven para que generen una accion,el lenguaje HTML se basa en la aplicación de múltiples etiquetas para dar formato y darle características a un texto, tambien son elemento de interfaz como widgets, tambien pueden mostrar palabras claves o informacion del interes para el usuario, las etiquetas fueron muy usadas en tiempos pasados para el desarrollo de actividades como en exposiciones y ahora en dia las etiquetas todavia son utilizadas en presentaciones de proyectos importantes para universidades y empresas grandes de trabajo como empresas nacionales y multinacionales.
En este video nos muestra como son las etiquetas de html5 y en que nos pueden servir etiquetas html5
4. Etiquetas básicas que maneja html5 con ejemplos
El área header .
Como su nombre lo sugiere, la etiqueta header tiene por objeto marcar una sección de la página HTML como el encabezado. Listado 3 muestra el ejemplo de código del Listado 2 modificado para que use un header .
Listado 3. Añadiendo una etiqueta header .
<!DOCTYPE html>
<html>
<head>
<title>
Una página HTML simple
</title>
</head>
<body>
<header>Header</header>
<div id='content'>Content</div>
<div id='footer'>Footer</div>
</body>
</html>
El doctype en el Listado 3 también se cambió para indicar que el navegador debería utilizar HTML5 para presentar la página. Desde este punto en adelante, todos los ejemplos suponen que usted está utilizando el doctype correcto.
Volver arriba
El área section .
La etiqueta section tiene por objeto identificar porciones significativas del contenido de la página. Esta etiqueta es de alguna forma análoga a dividir un libro en capítulos. Añadiendo una etiqueta section al código de ejemplo da como resultado el código en el Listado 4.
Listado 4. Añadiendo una etiqueta section .
<!DOCTYPE html>
<html>
<head>
<title>
Una página HTML simple
</title>
</head>
<body>
<header>Header</header>
<section>
<p>
Esta es una sección importante de la página.
</p>
</section>
<div id='footer'>Footer</div>
</body>
</html>
Volver arriba
El área article .
La etiqueta article identifica las secciones principales del contenido dentro de la página Web. Piense en un blog, donde cada publicación de cada individuo constituye una porción significativa de contenido. Añadiendo etiquetas article al código de ejemplo da como resultado el código en el Listado 5.
Listado 5. Añadiendo etiquetas article
<!DOCTYPE html>
<html>
<head>
<title>
Una página HTML simple
</title>
</head>
<body>
<header>Header</header>
<section>
<article>
<p>
Esta es una sección importante del contenido de la página.
Tal vez una publicación en blog.
</p>
</article>
<article>
<p>
Esta es una sección importante del contenido de la página.
Tal vez una publicación en blog.
</p>
</article>
</section>
<div id='footer'>Footer</div>
</body>
</html>
Volver arriba
La etiqueta aside .
La etiqueta aside indica que el contenido dentro de ella está relacionado el contenido principal de la página pero que no es parte de ella. En cierta forma es análogo a usar paréntesis para hacer un comentario en un cuerpo de texto (como este). El contenido entre paréntesis proporciona información adicional sobre el elemento que lo contiene. Añadiendo una etiqueta aside al código de ejemplo da como resultado el código en el Listado 6.
Listado 6. Añadiendo una etiqueta aside .
<!DOCTYPE html>
<html>
<head>
<title>
Una página HTML simple
</title>
</head>
<body>
<header>Header</header>
<section>
<article>
<p>
Esta es una sección importante del contenido de la página.
Tal vez una publicación en blog.
</p>
</aside>
</p>
Este es un aparte de la primera publicación en blog.
</p>
</aside>
</article>
<article>
<p>
Esta es una sección importante del contenido de la página.
Tal vez una publicación en blog.
</p>
</article>
</section>
<div id='footer'>Footer</div>
</body>
</html>
Volver arriba
La etiqueta footer .
La etiqueta footer marca el contenido dentro del elemento que es el pie de página del documento. Añadiendo una etiqueta footer al código de ejemplo da como resultado el código en el Listado 7.
Listado 7. Añadiendo una etiqueta footer .
<!DOCTYPE html>
<html>
<head>
<title>
Una página HTML simple
</title>
</head>
<body>
<header>Header</header>
<section>
<article>
<p>
Esta es una sección importante del contenido de la página.
Tal vez una publicación en blog.
</p>
</aside>
</p>
Este es un aparte de la primera publicación en blog.
</p>
</aside>
</article>
<article>
<p>
Esta es una sección importante del contenido de la página.
Tal vez una publicación en blog.
</p>
</article>
</section>
<footer>Footer</footer>
</body>
</html>
en este punto, todas las etiquetas div originales han sido reemplazadas con etiquetas HTML5 estructurales.
Volver arriba
La etiqueta nav .
El contenido dentro de la etiqueta nav tiene por objeto propósitos de navegación. Añadiendo una etiqueta nav al código de ejemplo da como resultado el código en el Listado 8.
Listado 8. Añadiendo una etiqueta nav .
<!DOCTYPE html>
<html>
<head>
<title>
Una página HTML simple
</title>
</head>
<body>
<header>Header
<nav>
<a href='#'>Algún enlace de navegación</a>
<a href='#'>Algún enlace de navegación adicional</a>
<a href='#'>Un tercer enlace de navegación</a>
</nav>
</header>
<section>
<article>
<p>
Esta es una sección importante del contenido de la página.
Tal vez una publicación en blog.
</p>
</aside>
</p>
Este es un aparte de la primera publicación en blog.
</p>
</aside>
</article>
<article>
<p>
Esta es una sección importante del contenido de la página.
Tal vez una publicación en blog.
</p>
</article>
</section>
<footer>Footer</footer>
</body>
</html>
Volver arriba
Ejemplo completado
Listado 9 muestra el resultado de reemplazar las etiquetas div originales por las nuevas etiquetas HTML5 estructurales.
Listado 9. Ejemplo completado
<!DOCTYPE html>
<html>
<head>
<title>
Una página HTML simple
</title>
</head>
<body>
<header>Header
<nav>
<a href='#'>Algún enlace de navegación</a>
<a href='#'>Algún enlace de navegación adicional</a>
<a href='#'>Un tercer enlace de navegación</a>
</nav>
</header>
<section>
<article>
<p>
Esta es una sección importante del contenido de la página.
Tal vez una publicación en blog.
</p>
</aside>
</p>
Este es un aparte de la primera publicación en blog.
</p>
</aside>
</article>
<article>
<p>
Esta es una sección importante del contenido de la página.
Tal vez una publicación en blog.
</p>
</article>
</section>
<footer>Footer</footer>
</body>
</html>
Hacer cosas como <div id=”header”> es un poco estúpido cuando el 99% de los proyectos web tienen una cabecera. <header> está diseñada para reemplazar la necesidad de crear divs sin significado semántico.
<hgroup>
Muchos headers necesitan múltiples títulos, como un blog que tiene un titulo y un tagline explicando el blog. <hgroup> permite colocar un h1, h2 y h3 dentro del header sin afectar el SEO, permitiendo usar otro h1 en el sitio.
En el HTML actual, sólo puedes usar h1 una vez por sitio o el h1 pierde prioridad de SEO.
<nav>
Igual que <header>, <nav> está diseñado para que ahí coloques la botonera de navegación principal. Puedes colocar cualquier etiqueta dentro, aunque lo recomendado es usar listas <ul>.
<section>
Define un área de contenido única dentro del sitio. En un blog, sería la zona donde están todos los posts. En un video de youtube, habría un section para el video, uno para los datos del video, otro para la zona de comentarios.
<article>
Define zonas únicas de contenido independiente. En el home de un blog, cada post sería un article. En un post del blog, el post y cada uno de sus comentarios sería un <article>.
<aside>
Cualquier contenido que no esté relacionado con el objetivo primario de la página va en un aside. En un blog, obviamente el aside es la barra lateral de información. En el home de un periódico, puede ser el área de indicadores económicos.
<footer>
Este es obvio. Es el pie de página y todo lo que lo compone.
Tomado de
https://www.aulaclic.es/guia-html5/t_1_4.htm
año 2015
Aporte personal
HTML5 brinda nuevas etiquetas con una mayor tecnologia, un enfoque mas grafico y moderno para que los usuarios de html5 esten a gusto a la hora de realizar codificacion web con html5, el antiguo html nos brindaba tambien la posibilidad de crear etiquetas en un entorno menos moderno y sin la posibilidad de hacer cambios tan avanzados como nos lo muestra html5 cambios de todo tipo, tanto graficos como de texto, mas etiquetas con mejores estilos en todo. Gracias a html5 tenemos las mejores etiquetas realizadas en paginas web y estas nos las ofrece html5 con todo su desarrollo para que el usuario se sieta siempre a gusto.
En este video nos enseñan como son las nuevas etiquetas del lenguaje web html5, y la diferencia entre estas etiquetas a las etiquetas pasadas de el antiguo html
6. Manejo de tablas en Html5, Realizar un ejemplo
Una tabla básica
Las tablas se usan con profusión en las páginas Web, muchas veces debido a que son el único instrumento con el que se cuenta, para asegurarse que las cosas estarán en su sitio. Para definir una tabla se usan las etiquetas:
<TABLE> y </TABLE> son las etiquetas donde está contenida la tabla
<TR> y </TR> son las etiquetas que indican el comienzo y fin de una fila (<th> y </th> si es una fila de cabecera)
<TD> y </TD> señalan una celda.
La tabla se va definiendo declarando una fila y a continuación las celdas que contiene esa fila, luego otra fila y sus celadas, etc. No es necesario que todas las filas contengan el mismo número de celdas.
La tabla (2x2) más sencilla que podemos hacer es la siguiente
Escribimos: Visualizamos
<TABLE >
<TR>
<TD>1 </TD> <TD> 2 </TD>
</TR> <TR>
<TD>3 </TD> <TD> 4</TD>
</TR>
</TABLE>
1 2
3 4
El resultado no es muy brillante, pero vamos a ir viendo las distintas posibilidades que tenemos para mejorarlo.
Atributos de la etiqueta TABLE
Todos los atributos son opcionales
BORDER="4". Indica el tamaño del borde en píxels, en este caso 4. Si no se indica nada carece de borde
WIDTH="5" o WIDTH="50%". Es el ancho de la tabla, puede especificarse en valor absoluto (5 píxels) o como un porcentaje (50% del ancho disponible)
CELLSPACING="2". Es el espacio entre las celdas, por defecto es 2
CELLPADDING="5". Es el espacio entre el contenido de las celdas y el borde de las mismas, por defecto es 1
ALIGN=" left", "right", "center". Alinea la tabla a la izquierda , derecha o en el centro.
Otro ejemplo
Escribimos: Visualizamos
<TABLE BORDER="3" CELLSPACING="5" WIDTH="150">
<TR>
<TD>1 </TD> <TD> 2 </TD>
</TR> <TR>
<TD>3 </TD> <TD> 4</TD>
</TR>
</TABLE>
1 2
3 4
Atributos de las etiquetas de fila y celda
Las etiquetas que soportan las filas y las celdas son
WIDTH="30". Ancho de toda la fila o celda. También se puede dar en %
ALIGN=" left", "right", "center". Alinea el contenido a la izquierda, derecha o centro
VALIGN="top" , "middle" o "bottom". Alinea el contenido verticalmente arriba, en medio o abajo
BGCOLOR="#AACCEE". Pone un fondo del color especificado a la celda o fila
COLSPAN=3. Especifica el número de columnas que abarca la fila
ROWSPAN=2. Especifica el número de filas que abarca la columna
Tercer ejemplo. Fijate en la etiqueta TH, que sustituye a TR, resalta su contenido con negrita, por eso se usa para los títulos
Escribimos: Visualizamos
<TABLE BORDER="3" CELLSPACING="5" WIDTH="200">
<TH COLSPAN=2 BGCOLOR="#6D8FFF> Este es el título</TH>
<TR align="center">
<TD>Esta es la celda de la 1ª fila y de la 1ª columna</TD>
<TD> Esta es de la 1ª fila y de la 2ª columna</TD>
</TR>
<TR BGCOLOR="#6D8FFF>
<TD>Esto está con un fondo azul</TD>
<TD align="right" valign="bottom">Y esto también</TD>
</TR>
</TABLE>
Este es el título
Esta es la celda de la 1ª fila y de la 1ª columna Esta es de la 1ª fila y de la 2ª columna
Esto está con un fondo azul Y esto también
Como ves, se pueden ir modificando los comandos básicos para obtener la tabla que deseemos.
Es frecuente no escribir las etiquetas de cierre de fila y celda, los navegadores presentan la tabla igual y nos ahorramos unas cuantas pulsaciones de teclas.
tomado de
https://platea.pntic.mec.es/~abercian/guiahtml/tablas.htm
En HTML, una poderosa herramienta a la hora de mostrar cierto tipo de información son las tablas. Hay muchos sitios que por su naturaleza no usan tablas aunque existen algunas ocasiones en que el papel de las tablas se vuelve esencial.
El fin de las tablas es preferentemente contener datos ordenados en celdas (filas y columnas). En principio, no deben ser usadas para crear divisiones de cara a mostrar una página web, es decir, es preferible que una página web no esté dividida en distintos espacios usando tablas. Para maquetar una página web y dividirla en distintos espacios se usarán otras herramientas (capas, elementos flotantes, etc.).
Las tablas pueden ser consideradas como un grupo de filas donde cada una de ellas contiene un grupo de celdas. Una tabla puede ser insertada en un documento HTML usando tres elementos básicos: el elemento TABLE (estructura contenedora principal), el elemento TR (contenedor de fila) y el elemento TD (celda).
Cuando el contenido de una celda debe ser vacío, deberías usar una espacio en blanco (que en HTML se escribe como ) como su contenido. Esto hará que tu página se visualice correctamente, ya que algunos navegadores tienen problemas representando celdas vacías. Ejemplo: <td> </td>
Veamos un ejemplo. Crea un archivo ejemplo.html con este código y visualízalo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo del uso de tablas - aprenderaprogramar.com</title>
</head>
<body>
<table border="2px"> <!-- Lo cambiaremos por CSS -->
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>
</body>
</html>
Ten en cuenta que el atributo border está deprecated o not supported por las versiones más recientes de HTML. Más adelante veremos cómo reemplazarlo usando técnicas CSS.
UNIFICACIÓN DE CELDAS
En algunas ocasiones, puede ser necesario unificar dos o más celdas en una sola que pasará a ocupar el lugar de aquellas afectadas. Estas unificaciones pueden ser llevadas a cabo con los atributos “rowspan” (para unificación vertical) y “colspan” (para unificación horizontal).
UNIFICACIÓN HORIZONTAL CON COLSPAN
Como hemos comentado con anterioridad, para la unificación horizontal de celdas, utilizaremos el atributo de celda “colspan”. Crea un archivo ejemplo.html con este código y visualízalo. Recuerda que el atributo border está deprecated o not supported y que más adelante veremos como reemplazarlo mediante el uso de CSS:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo del uso de tablas - aprenderaprogramar.com</title>
</head>
<body>
<table border="2px"> <!-- Lo cambiaremos por CSS -->
<tr>
<td>Campo 1</td>
<td>Campo 2</td>
<td>Campo 3</td>
</tr>
<tr>
<td colspan="2">Campos 4 y 5</td>
<td>Campo 6</td>
</tr>
<tr>
<td>Campo 7</td>
<td>Campo 8</td>
<td>Campo 9</td>
</tr>
</table>
</body>
</html>
UNIFICACIÓN VERTICAL CON ROWSPAN
En este caso, para la unificación vertical de celdas, utilizaremos el atributo de celda “rowspan”. Crea un archivo ejemplo.html con este código y visualízalo (recuerda que el atributo border está deprecated o not supported y que más adelante veremos como reemplazarlo mediante el uso de CSS):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo del uso de tablas- aprenderaprogramar.com</title>
</head>
<body>
<table border="2px"> <!-- Lo cambiaremos por CSS -->
<tr>
<td rowspan="3">Campo unificado</td>
<td>Campo 2</td>
<td>Campo 3</td>
</tr>
<tr>
<td>Campo 5</td>
<td>Campo 6</td>
</tr>
<tr>
<td>Campo 8</td>
<td>Campo 9</td>
</tr>
</table>
</body>
</html>
CELDAS DE ENCABEZADO
Hay dos tipos de celdas que pueden ser definidas en una tabla HTML. Una de ellas es la celda simple (elemento TD), ya definido anteriormente, y la otra es un tipo especial de celda (elemento TH ó table header, cabecera de tabla) que contiene información de encabezado para un conjunto de celdas específicas.
Los navegadores representan normalmente el contenido de las celdas especiales como texto centrado y en negrita, atributos que también pueden ser visualmente logrados con la utilización de celdas normales (elemento TD). Entonces, ¿para que son útiles estos encabezados? Cuando utilizamos th la celda queda definida como encabezado, no sólo tiene el aspecto de un encabezado. Por poner un símil, no es lo mismo vestirse de policía sin serlo, que ser policía. No es lo mismo una celda que parece un encabezado sin estar definida como tal, que una celda definida realmente como encabezado. Los navegadores para personas invidentes identifican este tipo de encabezados y le dan un tratamiento especial. Además algunos motores de búsqueda (bing, google, yahoo) dan un tratamiento distinto a este tipo de celdas, y algunos navegadores crean efectos especiales para este tipo de celdas. Finalmente, disponer de encabezados nos permitirá crear tablas con un diseño específico para los encabezados. Escribe este código con tu editor de texto y comprueba sus resultados:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo del uso de tablas- aprenderaprogramar.com</title>
</head>
<body>
<table border="2px"> <!-- Lo cambiaremos por CSS -->
<tr>
<th>Alumno</th>
<th>Asignatura</th>
<th>Calificación</th>
</tr>
<tr>
<td>Juan Pérez</td>
<td>Matemáticas</td>
<td>9</td>
</tr>
<tr>
<td>Rodolfo Cárdenas</td>
<td>Francés</td>
<td>5</td>
</tr>
</table>
</body>
</html>
TÍTULO DE LAS TABLAS CON EL ELEMENTO CAPTION
Mediante el elemento caption, podemos definir el título de una tabla. Este título debería describir de una manera breve y precisa el contenido y la naturaleza de la tabla y es habitualmente representado en algún lugar cercano a la tabla (su posición puede ser establecida usando CSS). El elemento caption sólo está permitido si va justo después de la apertura de la tabla. Escribe este código y comprueba el resultado.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo del uso de tablas - aprenderaprogramar.com</title>
</head>
<body>
<table border="2px"> <!-- Lo cambiaremos por CSS -->
<caption>Título de la tabla</caption>
<tr>
<td>Contenido 1</td>
<td>Contenido 2</td>
<td>Contenido 3</td>
</tr>
<tr>
<td>Contenido 4</td>
<td>Contenido 5</td>
<td>Contenido 6</td>
</tr>
</table>
</body>
</html>
Me parece que es una manera mu eficiente y practica de presentar o exponer la informacion, ademas el codigo de etiquetas es muy intuitivo y facil de escribir.
tomado de
https://www.youtube.com/watch?v=fQ-aTmUqg7M
año 2015
El video nos muestra como podemos realizar unas tablas en html5
5. Manejo de formularios en HTML, realizar un ejemplo
Formulario en HTML 5
Funciona en:Opera
La estructura de los formularios con HTML 5 no varía en nada con las versiones más antiguas de HTML aunque añadiendo muchas funciones, es decir para crear un formulario con nombre, e-mail, edad y pagina web como el que utilizaremos de ejemplo:
Su codigo sería:
<form id="form1" name="form1" method="post" action="consultar.php">
Nombre: <input type="text" name="nombre" id="nombre" />
Edad:<input type="text" name="edad" id="edad" />
E-mail:<input type="text" name="email" id="email" />
Web:<input type="text" name="web" id="web" />
</form>
Como podemos ver en el codigo todos los campos de texto son type="text" ya sea para numero en caso de edad o para URL en este caso con el nombre de web, también existen existen otros "types" como password para que el texto se viera con asteriscos.
En el caso de HTML5 tiene muchos "type" diferentes, cada uno específico para cada tipo de datos, són los siquientes:
text Para introducir texto, simplemente.
search Específico para input en un buscador.
url Específico para direcciones de página web. Requiere https:// o http: simplemente.
tel Se supone que para números de teléfono aunque no he conseguido que haga nada.
email El nombre lo dice.
password Escribe el contenido en asteriscos.
De tiempo datetime, date, month, week, time y datetimelocal.
number Específico para numeros.
range Sale una barra para elegir un número entre un rango, el número hay que indicarlo entre un min="10" y un max="12" (los números son de ejemplo.)
checkbox Para seleccionar y deseleccionar.
radio button Para seleccionar, uno obligatorio.
Ahora aplicando estos types a nuestro ejemplo de formulario anterior quedaría así:
<form id="form1" name="form1" method="post" action="consultar.php">
Nombre: <input type="text" name="nombre" id="nombre" />
Edad:<input type="range" max="100" min="5" name="edad" id="edad" />
<output onformchange="value = edad.value">0</output>
E-mail:<input type="email" name="email" id="email" />
Web:<input type="url" name="web" id="web" />
</form>
Como vemos esta vez hemos tenído que introducir un "output" que será un número mostrando la edad que ha señalado en el type="range" (solo funciona en Opera), como ahora veremos ese type "range" crea una barra desplazable para señalar el numero deseado.
Podemos pensar que esto de los type está muy bien pero que obtenemos el mismo resultado con type="text" simplemente. Pero para sacarle el máximo partido a todo este tutorial y grácias a HTML 5 tenemos el parámetro " required "
que se tendrá que añadir a las lineas de codigo de los imput que sean obligatorios, es decir, que no puedan tener un valor en blanco, gracias a este "required" el formulario no será enviado si algun campo está en blanco.
Pensemos un poco, si ponemos cada type correctamente con los datos que pedimos y además añadimos el "required" el formulario no será enviado hasta que en el campo email este relleno por un email correcto y lo mismo pasa con los demás type por ejemplo el URL.
De esta manera que hemos aprendido podremos validar formularios sin ningún esfuerzo y sin necesidad de javascript. El codigo finalmente quedaría así:
<form id="form1" name="form1" method="post" action="consultar.php">
Nombre: <input type="text" name="nombre" id="nombre" required/>
Edad:<input type="range" max="100" min="5" name="edad" id="edad" />
<output onformchange="value = edad.value">0</output>
E-mail:<input type="email" name="email" id="email" required/>
Web:<input type="url" name="web" id="web" required/>
<input type="submit" name="enviar" id="enviar" value="Enviar">
</form>
Con este codigo se puede jugar todo lo que quieras, podemos hacer por ejemplo que cuando el valor introducido sea correcto, es decir, que en un campo email hayan introducido un email el campo pase de ser de color rojo a verde, simplemente sería introducir entre el "head" el siquiente codigo:
<head>
<style>
#for input:valid { background:green;}
#for input:invalid { background:red;}
</style>
</head>
Este codigo modifica los colores de todos los input cuando son válidos o inválidos pero si no queremos que cambien todos los imput podemos añadir labels con cualquier nombre. Introducimos entre el "#for" y "input" una palabra, por ejemplo "este". Y encerramos el input que queramos modificar con esos colores con etiquetas que se llamen igual, en este caso "este". Aqui el codigo de ejemplo:
<head>
<style>
#for este input:valid { background:black;}
#for input:valid { background:green;}
#for input:invalid { background:red;}
</style>
</head>
<body>
<form id="for">
<p>Name: <este><input type="text" name="name" required></este></p>
<p>E-mail: <input type="email" name="email" required></p>
<p>URL: <input type="url" name="url" required></p>
<p>Edad: <input type="range" name="edad"></p>
<p><input type="submit" value="enviar"></p>
</form>
</body>
En este caso el input "name" será el unico que se volverá negro al ser válido su contenido.
esto ha sido todo, la proxima semana un tutorial HTML 5 más, muchas grácias.
Una de las características más importantes que nos brinda el nuevo standard Html5 son las mejoras y nuevos elementos disponibles para el manejo de formularios.
La nueva especificación de HTML es soportada de diferente manera por los distintos navegadores*, no todas sus características se comportan igual. A pesar de esto, ya p̶u̶e̶d̶e̶s̶ debes empezar a usar muchas de las características principales, en seguida verás porqué.
¿Por qué debo usar formularios HTML5?
Tres razones:
Para el diseñador o desarrollador brinda nuevas maneras de procesar información (algunas complejas) de manera simple, nativa, sin la necesidad de recurrir a soluciones de Javascript.
Hace mas placentera y sencilla la tarea de comprender y completar formularios para tus usuarios (si es que la palabra “placentera” puede relacionarse con “completar formularios” :/ )
Es el nuevo standard !
Hasta ahora la forma que se utiliza para validar los formularios “del lado del cliente” es javascript para ayudar al usuario a completar correctamente los formularios para recopilar coherentemente su información, desde el registro y acceso de una cuenta hasta procesos de pago de compra y otros.
Las nuevas características para manejo de formularios html5 permiten prescindir de javascript para realizar validaciones “del lado del cliente”, esto me permite como diseñador crear un formulario completo sin recurrir a un desarrollador, aumentando la productividad, sobre todo en equipos pequeños de trabajo.
Por supuesto que hay mucho mas que validación en html5, lo veremos más abajo.
Para el usuario, los formularios tienen ahora un comportamiento más inteligente, un campo de fecha mostrará al usuario un calendario interactivo, o hints (pistas) sobre qué ingresar en ese campo, foco automático en el campo inicial, formato correcto a medidas de tiempo o seleccionar color mediante una paleta de colores.
Por último, el uso de estándares es una buena práctica, dota de profesionalismo a nuestro trabajo y asegura su funcionamiento a futuro.
Ok, vamos a los demos…¿Qué hay de nuevo?
Busca un café, Html5 agrega MUCHAS novedades, nuevos atributos, elementos y tipos de campos. Además de la explicación, incluyo un link a un demo funcional para que probemos de qué va la cosa. Los demos pertenecen al sitio Wufoo, pensaba hacerlos por mi cuenta pero realmente éstos están muy bien hechos y tienen el plus de aportar documentación adicional sobre compatibilidad e información útil.
Por cierto es recomendable que prueben las demos en el navegador Opera, pues es el que actualmente soporta mejor la mayoría de las nuevas características, también muchas funcionan bien en Chrome, Firefox y hasta en Explorer, pero varias sólo están disponibles para Opera actualmente. Pero esto no es razón para no usarlos, sino al contrario, porque no serán visibles para algunos pero les será muy útil a quienes utilicen navegadores modernos.
13 nuevos atributos:
autofocus – Demo
Hacemos foco en el input que tenga asociado éste valor al cargar la página
placeholder – Demo
Para ofrecer una pista de lo que el usuario debe ingresar
accept – Demo
Permite que solo el tipo de archivo determinado pueda ser cargado en el formulario
multiple – Demo
Permite seleccionar múltiples archivos para ser cargados de una vez por el formulario
max / min / step – Demo
Podemos delimitar rango de valores numéricos permitidos máximos, mínimos y múltiplos dentro de un rango.
form – Demo no disponible
Este atributo nos permite colocar un elemento en cualquier parte de la página, no solamente dentro del form tag, y que éste siga siendo procesado por el form. Además permite asociar un mismo elemento a mas de un form simultaneamente
required – Demo
Atributo booleano que determina si el elemento debe ser obligatorio o no
(Utilizado junto con “pattern”, “max / min”, “email” y otros nuevos atributos, nos permite prescindir en gran medida de Javascript para validar nuestros formularios y hacero sólo con el navegador.)
autocomplete – Demo
Permite especificar si un elemento puede o no ser autocompletado por el navegador basado en entradas previas del usuario
pattern – Demo
Para validar un elemento en base a una expresión regular (RegEx)
dirname – Demo no disponible
Envía la dirección en que fue ingresado el texto en un input determinado (ej: de derecha a izquierda)
novalidate – Demo
Evita la validación del elemento al enviar el formulario
formaction – Demo
Para sobreescribir el comportamiento por defecto del formulario
formenctype – Demo
Para sobreescribir la codificación por defecto del formulario
formmethod – Demo
Para sobreescribir el método de envío por defecto del formulario
formnovalidate – Demo
Para sobreescribir novalidate de un formulario (Esto es útil por ejemplo si tenemos un formulario con dos botones u acciones, uno de envío y otro para guardar cambios, pero queremos que la validación ocurra al envíar un formulario y no si el formulario es guardado)
formtarget – Demo
Para sobreescribir la ventana destino por defecto del form
5 nuevos elementos:
progress – Demo
Representa el grado de progreso de una tarea o acción (ej: Representar la carga de una imágen)
meter – Demo
Se utiliza para medir algo con una escala determinada, como temperatura o distancias.
datalist – Demo
Si asociamos un text input a un Datalist (lista de valores) al hacer foco en ese input aparece un dropdown mostrando el contenido del elemento Datalist
keygen – Demo
Genera un par de claves de control privada que se guarda en local y pública que se envía al servidor
output – Demo
Se utiliza para realizar cálculos entre campos (ej: La suma de 2 números en distintos inputs)
13 nuevos tipos de campos:
tel – Demo
Para un número telefónico (En realidad, no prueba que sea un número, para validar un formato numérico en particular se debe complementar con “pattern”)
search – Demo
Sugiere ingreso de texto en el input (La diferencia entre search y un input de texto común es que puede ser reconocido por la plataforma en la cual es visto para igualar su estilo)
url – Demo
Para ingresar direcciones web absolutas
email – Demo
Para valores únicos o múltiples de direcciónes de email
datetime – Demo
Formato de fecha y hora con zona horaria UTC
date – Demo
Formato de fecha sin zona horaria
month – Demo
Mes y año sin zona horaria
week - Demo
Fecha para ingresar semana del año
time – Demo
Hora completa sin zona horaria
datetime-local – Demo
Fecha y hora sin zona horaria
number – Demo
Valores numericos
range – Demo
Valor numerico para controlar slider
color – Demo
Para elegir colores de una paleta
Conclusión:
Reflexionando sobre los cambios que esto producirá en cómo interactuamos con la web, llegué a la conclusión que el mayor cambio tal vez no lo noten los usuarios comunes (debido al actual uso de Javascript), sino los diseñadores, aún más que los desarrolladores.
Html5 espero haga universal la implementación de muchas de estas nuevas características para hacer más entendible y simple completar formularios. Esto redundará en menos frustraciones y abandonos permitiendo al usuario finalizar existosamente su tarea. Lo cual es beneficioso para la web y una satisfacción para el cliente.
Recuerda que elementos y atributos como placeholder, autofocus, email, datalist y required, entre los más comunes, ya tienen un amplio soporte, y como alternativa, siempre tenemos la posibilidad de ofrecer una experiencia similar utilizando soporte de librerías de javascript (como modernizr) para navegadores que no soportan aún estos avances de forma tal de ir incorporando poco a poco esta nueva experiencia al diseño cotidiano.
Los formuarios en html a traves del tiempo han sido mejorados con las nuevas versiones de este lenguaje de programacion web, en las paginas web del siglo XXI estas dominancualquier tiempo de formulario haciendo de ellos lo mas practico para el usuario y para los desarrolladores a la hora de crearlos, en conclusion los formularios son uy importantes para el desarrollo de una buena pagina web.
En este video nos enseñan como crear formularios en nuestras paginas web utilizando html5.
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.
