Actividad HTML5

1. Historia del html

2. Estructura de una página en html5

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

6. 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....

Leer más: https://sistemasremington.webnode.com/desarrollo-web-i/actividad-html/

Crea tu propia web gratis: https://www.webnode.esd 2

HISTORIA DE 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.

TOMADO DE https://webadictos.com/2012/12/30/breve-historia-del-html/

RESUMEN

Los inicios de html se remontan a los años de 1989 donde el fisico tim berner-lee propuso el lenguaje html con el protocolo http, 

cuya finalidad era compartir informacion con grandes fisicos de todo el mundo.

el primer documento se publico en 1991 con el nombre de HTML Tags

www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html, 

era solo texto de como se usa las etiquetas de HTML, 

en este caso se utiliza etiquetas con corchetes de angulares y se cierra con corchetes de cerradura anteponiendo un slash

luego aparecio HTML1 el cual no fue considerado un estandar y paso a la version HTML2 donde se menciona que de ahi si 

comenzaron las nuevas versiones

imagen tomada de https://webadictos.com/2012/12/30/breve-historia-del-html/

COMENTARIO

Tim berners lee, considerado el padre de la Web a partir de SGML es una estandar de aplicacion para la organizacion y etiquetado de textos

el uso de una pareja de etiquetas para marcar texto en HTML esta tomado directamente de SGML, al igual q ciertas etiquetas, que eran muy comunes en lenguajes creados a partir de SGML, sin embargo lo que SGML no traia era una etiqueta para los enlaces y los hipervinculos

en 1990 se declara el nacimiento d ela Web y tim berners lee publica su primera pagina web

sus primeras versiones no estaban estandarizadas por que su uso no estaba extendido asi que no necesitaba estandarisacion, el primer intento de estandarizacion fue en 1993, con un documento donde se considera la primera version de HTML

Estructura básica de una plantilla con HTML5

HTML5 es una actualización de HTML, el lenguaje en el que es creada la web. También en éste se agrupan y utilizan las nuevas tecnologías de desarrollo de aplicaciones web: HTML5, CSS3 y nuevas capacidades de Javascript.

HTML5 establece una serie de nuevos elementos y atributos que reflejan el uso típico de los sitios web modernos. Algunos de ellos son técnicamente similares a las etiquetas <div><span>, pero tienen un significado semántico, como por ejemplo <nav> y <footer>. Otros elementos que proporcionan nuevas funcionalidades a través de una interfaz estandarizada, como los elementos <audio> y <video>. Mejora el elemento <canvas>, capaz de renderizar elementos 3D en los navegadores más importantes.

Pero nosotros para aprender un poco del tan inmenso e increíble uso de HTML5 comenzaremos chaciendo una plantilla básica con HTML5, incluyendo elementos css, para darle estilo a la plantilla.

Estructura básica

<!DOCTYPE html>
<html lang="es">
    <head>
        <title>Example</title><!--Titulo de mi web-->
         <meta charset="utf-8" /><!--Codificacion de caracteres-->
         <link rel="stylesheet" type="text/css" href="css/style.css"><!--Estilos cargados desde un archivo-->
         <meta name="author" content="Sandra Valencia"><!--Autor-->
    </head>
    <body>
        <header><!--Cabecera principal de mi sitio-->
            <div class="logo">
                <a href="#">
                    Example
                </a>
            </div><!--URL de Mi Logo-->
            <div id="menu-s">
                <nav class="menu"><!--Menu-->
                    <ul class="menu-nav">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Design</a></li>
                        <li><a href="#">UX</a></li>
                        <li><a href="#">CSS3</a></li>
                        <li><a href="#">HTML5</a></li>
                        <li><a href="#">Linux</a></li>
                    </ul>
                </nav>
            </div>
        </header>
        <!--Contenido del sitio-->
        <div class="head-image"><!--Imagen de cabecera-->
            <img src="img/geek.jpg">
        </div>
        <!--Contenido general-->
        <div class="fila">
            <!--Articulos-->
            <section class="contenido">
                <article class="art">
                    <h1>Lorem imp?</h1><!--Titulo de articulo-->
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p><!--Contenido de articulo-->
                </article>
            </section>
            <!--Sidebar derecho-->
            <aside class="sidebar">
                <h1>Publicidad</h1>
                <p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
            </aside>
        </div>
       <!--Footer-->
        <footer class="footer">
            <p>
                Copyright © 2014 Example | Creado y diseñado por <a href="#">Tingsystems</a>
            </p>  
        </footer>
    </body>
</html>

tomado de https://tingsystems.com/estructura-basica-de-una-plantilla-con-html5-y-css3.html

HTML5, lo básico

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

    <!DOCTYPE html>
    <html lang="es">
    <head>
    <meta charset="utf-8" />
    <title>Hola Mundo!</title>
    </head>
    <body>
    <h1>Hola Mundo!</h1>
    </body>
    </html>

Analicemos un poco el código:

    <!DOCTYPE html> 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.

COMENTARIO

sin duda lo que mas reslata en la lectura es su sencilla estructura para programas HTML5, comenzando por la declaracion del tipo de documento, luego iniciamos nuestro documento HTML,esta etiqueta la finalizamos cuando se cierra el documento y dentro de ello se encuentra una etiqueta que dice "lang" en este caso indica el lenguaje a utilizar es decir el español. luego continuamos con head que es la cabecera de la web colocando metadatos de la pagina, "meta-charset" indica el paquete o juego de caracteres dentro de ella. "title" es el metadato especial que le da el nombre a la pagina donde se recomienda estar con el mismo nombre de la "url". y por ultimo "body" donde ira el contenido de la pagina.

RESUMEN

En el video anterior podemos apreciar como se epieza por lo mas basico de programacion de HTML5, comenzando por "DOCTYPE" luego colocamos "html", para indicar el tipo de documento, luego sigue con las etiquetas para abrir y cerrar. luego proseguir con el head y el body es decir todo lo que va oculto como por ejemplo el script el css, incluyendo el codigo de la pagina. dentro del body se puede ver todo lo que se va a mostrar en la pagina es decir todo su contenido. es recomendable colocar todos los scripts dentro de carpetas, y dentro de una carpeta de CSS colocar todos los archivos de CSS. una ultima recomendacion es colocar "index-html" en un servidor por que sin la "L" el servidor no la reconoce al final

HTML5 etiquetas basicas de contenido

2013-02-11 18:36:10

Hoy voy a explicaros las etiquetas mas básicas para realizar una página completa en HTML5 junto con un ejemplo explicativo para que se pueda entender con mayor claridad.

Hasta ahora habíamos explicado que es HTML5 y como empezar a crear un página web, pero no habíamos dotado de nada de contenido a nuestra página. Bien, pues vamos a ver que etiquetas necesitamos y como se usan.
Encabezados

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.
Etiquetas semánticas HTML5

Bien ya hemos vista algunas de las principales etiquetas para insertar el contenido en nuestra página web, pero aun no hemos dicho nada de donde y como usarlas. Y es que HTML5 provee unas nuevas etiquetas semánticas para poder declarar las partes del documento que estamos usando.
Etiqueta Article

Normalmente, cada documento html que creemos tendrá una temática propia. Digamos que si estamos haciendo la página principal de una pagina de frutas hablaremos sobre las variedades de frutas, por ejemplo. Todo el contenido, párrafos, encabezados y demás elementos de ese contenido los envolveremos en la etiqueta <article>. Esto significa que todo lo contenido dentro de esta etiqueta es una unidad semántica y podríamos trasladarla a cualquier otro lado fuera de la página que no perdería su sentido.
Etiqueta section

dentro de nuestra página de frutas, podríamos hablar de manzanas por un lado, de las peras por otro lado, y de plátanos por otro lado. Pues cada "sección" de frutas donde hablamos de una fruta en particular, la consideramos una sección y usamos para ello la etiqueta <section>. Es importante notar que la diferencia mas notable con la etiqueta article es que si separamos el contenido de la etiqueta <section> de la página dejaría de tener sentido. Lo cual es su principal diferencia y forma de diferenciar la etiqueta <article> con <section>.
etiqueta footer

Por último para acabar nuestro documento html5 vamos a introducir un pie de página donde incluyamos los créditos. Para esta tarea HTML5 cuenta con la etiqueta <footer>. Aunque su uso puede ser mas amplio, en principio solo la vamos a usar para el pie de página. Pero también se podría usar por ejemplo para el pie de una etiqueta <article>.

TOMADO DE https://www.informatico-madrid.com/blog/diseno-web/html5-etiquetas-basicas-de-contenido

Etiquetas basicas de html

HTML es el lenguaje por el cual construimos una página web. Este lenguaje se basa principalmente en etiquetas, con las cuales vamos construyendo los diferentes apartados de nuestra web. Es imprescindible conocer estas etiquetas y su funcionamiento para poder crear o al menos modificar una página web.


* <HTML>: indica el comienzo del documento HTML.
* <HEAD>: indica que empieza la cabecera de la página. En ella se suele poner el título (<title> de la web, una descripción y otras informaciones relacionadas con el contenido de la página.
* <BODY>: es el cuerpo de la página, donde va lo que se ve en el navegador al cargar una web. En el body van los textos, las imágenes y todos los contenidos de la web.
* <H1>, <H2>, etc.: son los títulos o encabezados. Se utilizan para establecer determinados textos de la página como titulares, suelen tener un tamaño de fuente mayor para diferenciarlos del resto del texto. Son importantes en el posicionamiento en buscadores.

* <A>: define los enlaces.

* <TABLE>: es una tabla, y dentro de esta tenemos filas <TR> y celdas <TD>.


* <P>: el texto dentro de esta etiqueta forma un párrafo.

* <IMG>: imágenes.

* <BR>: salto de línea.

* <UL>: los textos dentro de esta etiqueta se estructuran en listas. Mediante el uso de <LI> definimos cada guión dentro de la lista, y usando <OL> en lugar de <UL> tendremos listas ordenadas.

* <B> y <STRONG>: se utilizan para resaltar el texto.

* <U>: texto subrayado.

* <I>: texto en cursiva.

Ejemplo de página básica

<html>
<head>
<title>Título de la página</title>
</head>
<body>
<h1>Encabezado de la página</h2>
<h3>Encabezado de menor tamaño</h3>
<p>Este es el texto de un párrafo.</p>
<p>Este es el texto de otro párrafo. Dentro de este párrafo,
pueden ir palabras <b>en negrita</b>, <i>en cursiva</i> o lo
que quieras.</p>
<p>También podemos poner listas como la siguiente:</p>
<ul>
<li>Guión número uno.</li>
<li>Guión número dos.</li>
<li>Guión número tres.</li>
</ul>
</body>
</html>

EJEMPLOS

COMENTARIO

En los anteriores parrafos podemos pareciar las etiquetas basicas para empezar a construir una pagina web, con sus respectivos ejemplos donde nos aclara de forma basica cada cambio en ella.

sin embargo esto no es suficiente, debemos saber la posicion de cada etiqueta para una forma correcta de diseñar la pagina para un uso correcto teniendo en cuenta que debe tener una tematica y que no pierda el interes de la persona que usa, por ejemplo una pagina de deportes, donde en un lado hable de ciclismo en otra de futbol,en otra parte de voleibol y asi estara adecuada para un publico en general que demuestre interes por los deportes

RESUMEN DEL VIDEO

en el video podemos apreciar la forma correcta de establecer las etiquetas en un editor de texto como ejemplo, cada uno de sus parametros con etiquetas basicas para la elaboracion de la pagina web, si detallamos bien el video, vemos que la autora explica como se usa cada una de las etiquetas y donde van establecidas dentro del documento, a cada paso, colocando ejemplos para su mejor comprension, despues de ello nos muestra como colocarlo en el formato HTML para su posterior vista desde un navegador web.

Módulo de las tablas HTML5

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 <table>. Los elementos definitorios para una tabla son las filas, las columnas y las celdas. HTML ofrece directivas como <tr> para construir las filas y <td> para construir las celdas. Cada cruce entre las filas y las celdas forman las columnas. Sin embargo, la directiva <td> no es la única directiva con la cual se puede construir una celda. La directiva <th> también sirve para construir celdas, pero está pensada a construir celdas de cabecera. Al encontrar la directiva <th> el navegador convierte el texto que lo rodea en negrita y lo centra con respecto a la celda.

Las directivas como: <caption>, <col>, <colgroup>, <thead>, <tbody> y <tfoot> 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.

Para que el navegador imprime una tabla en la página Web necesita un conjunto básico de directivas: <table>, <tr> y <td>. El siguiente código es una estructura básica de una tabla:

 <table border="1">
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
</table> 

TOMADO DE https://www.html5.showbizreal.com/Columnas/module/tableMod.php

TABLAS HTML5

Las tablas se crean con la etiqueta <table/>, se dividen en filas <tr/> y cada una de estas filas esta compuestas por celdas <td/> Ejemplo:

Podemos variar la característica de la tabla agregándole borde, centrándola, dándole un tamaño. veamos con el siguiente ejemplo:

Existen otras etiquetas para las tablas como agregarle un titulo, un encabezado:

Se pueden agregar head, body y food como en el ejemplo siguiente:

La razon por la que el tfood este primero que el tbody es por que el contenido del body aveces es mas grande que el pie de la tabla. Esta ultima forma de hacerlo es mas frecuente cuando quiere agregarle colores con las hojas de estilo.

TOMADO DE https://hayderespinoza.blogspot.com/2012/11/tablas-html5.html

COMENTARIO

Hemos visualisado anteriormente como se empezaba a colocar etiquetas para las paginas web, con sus respectivas propiedades, ahora veremos como se establecen tablas HTML5 y para que sirven.

las tablas de HTML, sirven para establecer datos u ordenarlos en ellas, estas van organizadas por otro tipo de etiquetas donde posicionan cada palabra en la pagina y cierto rango como celda fila y columna similar por decirlo aasi a una tabla de excel pero en una pagina web, en HTML hay directivas obligatorias y opcionales, algunas directivas aparte de las necesarias para la construccion de la tabla pueden ser importantes por que tse ven de una manera mejor visualmente hablando.

RESUMEN DE VIDEO

En el video veremos un repaso de la estructura, funcion y forma de la pagina web, con sus respectaivas etiquetas incluyendo dentro de ellas sus funciones, luego veremos la forma correcta de insertar tablas y establecer listas utlizando directivas para la conformacion de las tablas, incluyendo los datos establecidos por el programador para que se muestren en la pagina.tambn etiquetas para establecer vinculos, imagenes, con sus respectivas sintaxis

FORMULARIO HTML 5

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.)

Continuando el artículo de introducción al HTML vamos a ampliar esa información en este artículo centrándonos en la estructura básica de un formulario. Veamos con un ejemplo como crear un formulario en HTML:

a. Etiqueta form.

Esta etiqueta es la que define dentro de nuestra estructura HTML el inicio de un formulario y está compuesta por:

    id: indica un nombre del formulario para que pueda ser personalizado mediante CSS.
    action: define el destino a donde irán los datos del formulario en HTML. En nuestro ejemplo el destino será un archivo llamado “enviado.php”.
    method: indica la forma en la que será enviado el formulario en HTML.

b. Etiqueta fieldset.

Esta etiqueta es de uso opcional y se utiliza para agrupar elementos en común dentro de un mismo formulario en HTML. Se suele utilizar junto a la etiqueta legend que le da un título al conjuntos de elementos definidos en el fieldset.
c. Etiqueta label.

Esta etiqueta se utiliza para definir el nombre visible de cada uno de los campos del formulario en HTML.
d. Etiqueta input.

Esta etiqueta corresponde a los campos del formulario que necesitamos para su funcionamiento. Esta está definida por:

    id: indica un nombre único del campo para que pueda ser personalizado mediante CSS.
    name: indica el nombre único del campo en el formulario en HTML y este nombre es el que nos permitirá realizar el envío de los datos de cada campo.
    type: indica el tipo de campo y la acción que tendrá dentro del formulario en HTML. Existen varios tipos de campos input en un formulario:
        text: para agregar una cadena de caracteres ya sean letras o números.
        hidden: indica que será un campo oculto para el envío de datos que no será visible para el usuario.
        password: se utiliza para los formularios de registro y los caracteres escritos serán mostrados en forma de asteriscos o puntos.
        checkbox: casillas de verificación.
        radio: botones de opción.
        submit: este type se le asigna a un campo input para realizar el envío del formulario en HTML. También existe el type reset que es para borrar todos los campos del formulario si no se desea realizar el      envío.

A continuación explicaré como realizar un formulario de contacto de manera simple y eficiente utilizando una combinación de los lenguajes HTML5, CSS y PHP. Con la nueva versión de HTML (HTML5), el código para desarrollar sitios web es más limpio, intuitivo y comprende nuevas características y propiedades que simplifican nuestro trabajo, gracias a esto los formularios también se desarrollan de una manera más simple y efectiva.

Aunque para mucho sea una obviedad, antes de comenzar quisiera mencionar que para que funcione correctamente el formulario es necesario correrlo en un servidor web para que el código php pueda ser ejecutado.

El formulario

A continuación daremos forma al formulario, vamos a crearlo con 3 campos: Nombre, Correo electrónico y mensaje. Para hacerlo, debemos incluir el siguiente código dentro de la etiqueta section.
<form action="contacto.php" method="post">
<label for="nombre">Nombre:</label>
<input id="nombre" type="text" name="nombre" placeholder="Nombre y Apellido" required="" />
<label for="email">Email:</label>
<input id="email" type="email" name="email" placeholder="ejemplo@correo.com" required="" />
<label for="mensaje">Mensaje:</label>
<textarea id="mensaje" name="mensaje" placeholder="Mensaje" required=""></textarea>
<input id="submit" type="submit" name="submit" value="Enviar" />
</form>

    Quiero mencionar la función que cumplen los atributos required y placeholder, ambos propiedades de HTML5. Required indica que el campo es obligatorio. Placeholder muestra un texto cuando el campo está vacío, para indicar al usuario que debe ir en ese campo, este texto se borra al hacer click en el campo. El tipo de campo type=”email” nos provee validación automática.

TOMADO DE https://manuelbaronetti.com.ar/blog/2013/02/facil-y-simple-formulario-de-contacto-con-html5-css-y-php/

COMENTARIO

No es dificil de descubrir que el codigo para realizar un formulario ha sido mejorado notablemente, con sus nuevas tecnicas, menos codigo, mas posibilidades de contemplar mas posibilidades de datos, los navegadores se han ido preparando para adoptar estas nuevas mejoras entre ellas poder mostrar un modulo donde se pueda esciger laguna fecha tipo calendario y en este campo el navegador opera lleva la delantera, aunque los demas han hecho sus grandes campos. se ha mejorado tambien graficamente las formas y demas carcteristicas del formulario se debe a nuevos cambios q poco a poco le dan valor agregado al html y en esta parte tan importante como esta.

RESUMEN DEL VIDEO

Es muy clara la manera como se ejecuta una accion como se realiza cada paso del formulario, comenzando con cada uno de sus atributos incluyendo cada uno de sus novedades, comenzando con la etiqueta "form", y la etiqueta "action" para guardar los datos que el ususario como el nombre correo etc. los tipicos campos de texto comienzan con la etiqueta "input" su atributo "type" señala a que tipo de entrada se desea si texto o numerico, luego continuamos con otro elemento "input" que diga password y nos esconde cada uno de los caracteres que ingresemos, por ultimo con un ejemplo, en html se coloca una etiqueta donde si ingresas un correo electronico el mismo lo valida pero solo algunos navegadores pueden realizar esta accion como el mozilla o el chrome.

en el "input check" realiza una forma para escoger ya sea por ejemplo si es hombre o mujer tambien es muy util para ingresar datos.

EJEMPLO DE TABLA

Codigo de la tabla

Vista desde el navegador

archivo original en: https://onedrive.live.com/?cid=451956FC2A72E360&id=451956FC2A72E360!121

EJEMPLO DE FORMULARIO

Codigo

Vista Desde Navegador

Archivo Original en: onedrive.live.com/?cid=451956FC2A72E360&id=451956FC2A72E360!121

ACTIVIDAD HTML5 2.1

1.Horario

Codigo fuente

Imagen desde el navegador

Archivo Original en: onedrive.live.com/?cid=451956FC2A72E360&id=451956FC2A72E360!121

O en Mediafire: www.mediafire.com/folder/vt5dy0q7jdd4b/ACTIVIDAD_2

2.Formulario de Estudiante Remington

Imagen Desde El Navegador

Archivo Original en: onedrive.live.com/?cid=451956FC2A72E360&id=451956FC2A72E360!121

O en Mediafire: www.mediafire.com/folder/vt5dy0q7jdd4b/ACTIVIDAD_2