Actividad II

Actividad II

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.

1. Historia:

La historia de lenguaje de marcado de hipertexto está estrictamente vinculada al científico inglés Tim Berners-Lee, quien es considerado el padre de la World Wide Web (W3) gracias a la investigación en el tema, que lideró desde 1980, mientras trabajaba para la Organización Europea para la Investigación Nuclear (CERN, por sus siglas en inglés). El objetivo de Berners-Lee fue crear un sistema hipertextual que permitiera conectar y compartir documentos entre diferentes computadores, sin importar el sistema operativo y aplicación Web (navegador).

El trabajo se apoyó en sistemas y protocolos de comunicación, los cuales habían sido desarrollados por organizaciones militares, académicas y científicas de países europeas y Estados Unidos. Además, TimBL, como también conocido Berners-Lee, recibió apoyo del ingeniero de sistemas Robert Cailliau (si Berners-Lee es el padre, Cailliau podría ser uno de los tíos de la WWW).

Para 1991, el equipo de trabajo del CERN presentó el primer documento, donde se hacía una descripción oficial del lenguaje de marcado Web. El título del texto fue: HTML Tags (etiquetas HTML). Esto documento aún reposa en el archivo de la World Wide Web Consortium (W3C) y puede ser consultado por cualquier usuario.

En 1993, la IETF (Internet Engineering Task Force) realiza otro documento sobre el tema. Este sería el segundo intento por normalizar y estandarizar la producción de hiper-documentos basados en la propuesta de Berners-Lee.

El 22 de septiembre de 1995, luego de cuatro años de trabajo, el lenguaje es reconocido como estándar, gracias a la presentación de la versión 2.0.

HTML5

Desde que Tim Berners-Lee presentara el primer documento (1991) sobre HTML comunidades mundiales de hackers y compañías de tecnología no han parado cesado las tareas de crear, probar y ajustar el lenguaje. El objetivo ha sido claro: optimizar el lenguaje a través de una constante revisión y valoración de las etiquetas en un contexto tecnológico cambiante.

Hoy, 2014, el lenguaje está en su quinta versión.

Hablar de HTML5 es remontarse a la creación del grupo WHAT (conformado por miembros de Apple, Mozilla Foundation y Opera) en el 2004.

En 2006 el desarrollo de este nuevo estándar recibe un gran impulso: la W3C, organismo encargado de auditar y recomendar el desarrollo de recursos para la Web, presidida -a propósito- por Tim Berners-Lee, decide cancelar el desarrollo del estándar XHTML y se une a la propuesta. El HTML5 se convierte en un sueño mundial y su desarrollo se acelera.

En 2008 se libera la primera versión oficial de HTML5 (escrita por Ian Hickson). Sin embargo, pese al buen trabajo de Hickson, las comunidades de desarrollo continúa trabajando y se van liberado nuevos elementos. Incluso, en 2014, continúan elementos que están pendientes por desarrollar, como es el caso de las hojas de estilo en cascada y sus prefijos de propietario.

Presente, pasado y futuro del HTML5

En el sitio Web HTML5, en su artículo "Inicio de HTML5, su crecimiento y futuro" se presenta una completa infografía sobre la historia del lenguaje.

La infografía también anexa rápidas referencias a las tecnologías que se congregan en el HTML5: semántica, fuera de línea y almacenamiento, acceso a dispositivos, conectividad, multimedia, 3D y gráficos, rendimiento y CSS3.

Aporte Personal: Con los inicios y lanzamiento de la world wide web y el internet se da por sentado que apareceria un marco de trabajo en el cual se contara con la posiblidad de realizar desarrollos orientados a la plataformas diseñadas para navegacion en internet. Es en ese momento donde se decide que la creación de HTML (Lenguaje Marcado de Hipertexto) seria la solucion a esta necesidad. Sin embargo con el paso del tiempo la exigencia a nivel tecnologico hizo nacesaria la evolución de dicho lenguaje, entendiendo que el internet y los navegadores demandarian mas exigencia a nivel de diseño, recursos, adaptabilidad y usabilidad de procedimientos. Es asi como se hace presente el HTML5 que incluye mejoras en aquellos puntos flexibles que exigia la industria de la fabricación de paginas web usadas en internet. Hoy en dia se usan Frameworks con herramientas de desarrollo como CSS, JavaScript, PHP, que permiten una mejor performance en temas tecnologicos y de diseño.

2. Estructura de una página en html5.

<DOCTYPE html>

<html lang="es">

<head>

<meta charset="utf-8"/>

<title>Lección 2 de HTML5</title>

<link rel="stylesheet" type="text/css" href="css/estilos.css">

<link rel="shortcut icon" href="favicon"/>

</head>

<body>

<header>

<h1>Lección 2 de HTML5</h1>

<h2>Cómo ser experto en html5</h2>

<nav>

<ul>

<li><a href="#">Inicio</a></li>

<li><a href="#">Programas</a></li>

<li><a href="#">Servicios</a></li>

<li><a href="#">Blog</a></li>

</ul>

</nav>

</header>

<section>

<article>

<h2>Titulo del articulo</h2>

<p>Aqui va el artículo</p>

<img src="images/logo.png">

</article>

</section>

<aside>

<h2>ASIDE</h2>

<p>Puede haber mas de uno, y se les da formato diferente asignándoles ID o CLASS con CSS</p>

</aside>

<footer>

<h2>FOOTER</h2>

<p>Aqui todo el contenido del footer</p>

</footer>

</body>

</html>

La etiqueta DOCTYPE no pasa de moda, tu documento debe empezar definiendo que tipo de documento es, de ahí que deba incluir <!DOCTYPE html>. Mientras tanto la etiqueta <HTML> se usa para abrir tu documento html.

HEAD: Es para indicar la cabeza de tu documento. No debes confundir esto con header que se define más adelante.

• META. Con esto defines el tipo de codificación del documento por ejemplo utf-8
• TITLE: Sirve para especificar el título del documento. Este aparece en la barra del navegador. Esta es muy importante incluirla a los documentos creados, ya que la asociamos a una identidad por medio de su título.

HEADER: En esta sección va la cabecera de tu sitio web. El nombre, slogan y logo deben ir aquí.

NAV: Es la principal barra de navegación o menú de navegación de tu sitio web. La posición y el estilo lo defines mediante CSS. Regularmente dentro de NAV estarán <ul> y <li>, que te sirven para dar forma y estilo a tu menú.

SECTION: Es la sección dónde va el contenido de tu sitio. Este a su vez puede agrupar articles

ARTICLE: Como su nombre lo indica, contiene un artículo. A su vez cada ARTICLE puede contener etiquetas <h2> para definir el título del artículo. Se recomienda que haya solo un <H1> por cada página que representa el título de tu página. A google no le gustan muchos <h1>, esto para tomarlo en cuenta en tu estrategia seo.

ASIDE: Contiene una barra lateral, como para poner enlaces a facebook, twitter y demás. Así divides el cuerpo de tu página en dos columnas. Una donde va el contenido, artículos, etc y otro donde van banners, ligas, etc.

FOOTER: Como su nombre lo indica este contiene el pie de página de tu sitio.

Tomado: https://www.estradawebgroup.com/Post/-Cual-es-la-estructura-Basica-de-un-documento-html5-/4173

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

Una etiqueta (términos a veces reemplazados por el anglicismo tag) es una marca con clase que delimita una región en los lenguajes basados en XML. ... La Web se basa en el HTML, o «lenguaje de marcado de hipertexto», que está basado en el uso de etiquetas.  En si una etiqueta HTML es aquello que vemos entre corchetes angulares en el código de nuestra web. 

<html> (Abrimos el documento)

<head> (Abrimos el head)

En la cabecera o "head" se inserta todo lo referente al title, styles vinculados, scripts, etc.

</head> (Cerramos el head)

<body> (Abrimos el body)

En el cuerpo del documento o "body", es donde va el contenido general, el grueso de la página.

</body> (Cerramos el body)

</html> (Cerramos el documento)

Etiqueta Función
<form>: Define un formulario html
<h1> a <h6>: Define encabezados o títulos
<head>: Define información hacerca del documento
<header>: Define la sección de encabezado del docuemnto 

Tomado de: https://cms.jz-programacionwebuno-cur.webnode.com.co/actividad-ii/ 

4. Etiquetas básicas que maneja html5 con ejemplos. 

Etiquetas básicas de HTML

• <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.
• <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> y <em>: texto en cursiva.

Tomado de: https://cms.jz-programacionwebuno-cur.webnode.com.co/actividad-ii/ 

5. Manejo de tablas en Html5, Realizar un ejemplo. 

Una tabla es una cuadricula de casillas o celdas, divididas en filas y columnas. La etiqueta <table>, permite definir tablas. 

Las tablas para componerlas se hace uso de otras etiquetas, las cuales no tienen sentido sino están situadas dentro de una etiqueta de tabla. Estas etiquetas son las siguientes:

Etiquetas Descripción 

Las tablas para componerlas se hace uso de otras etiquetas, las cuales no tienen sentido sino están situadas dentro de una etiqueta de tabla. Estas etiquetas son las siguientes.

Tomado de: https://disenowebakus.net/tablas-html.php

Ejemplo:

<!DOCTYPE HTML5>

<html>

<head>

<title>Ejercicios prácticos HTML5</title>

<meta charset="utf-8">

<meta name="author" content="">

<meta name="description" content="Ejercicios prácticos HTML5">

<meta name="keywords" content="Ejercicios, Soluciones, Prácticas, HTML5">

</head>

<body>

<table border="1">

<caption>Titulo de la tabla</caption>

<tr>

<th>Col.Cab.1</th>

<th>Col.Cab.2</th>

</tr>

<tr>

<td>Celda 1</td>

<td>Celda 2</td>

</tr>

</table>

</body>

</html>

El ejemplo anterior da como resultado una tabla como la siguiente:

Aporte Personal: Para el uso de herramientas que permitan el desarrollo de aplicaciones se hace necesario el uso de instrucciones o procedimientos que indiquen donde inicia y donde finaliza un codigo una instruccion en particular o un ciclo. Lo anterior se conoce como codigo fuente y pemite generar aplicaciones segun el ambiente necesario (Aplicaciones o paginas Web, Aplicaciones moviles, Aplicaciones de escritorio, Aplicaciones orientadas al internet de las cosas), la generacion de estas aplicaciones se orienta a la solucion de una necesidad puntual en nuestra vida real. Para el caso de HTML es necesario utilizar estas instrucciones dentro de las etiquetas <html> <head><title: Opcional></title: Opcional></head><body> ...............</body> /html>. Dentro de la definición de etiqueta encontramos que no es mas que es una marca con clase que delimita una región en los lenguajes basados en XML. Con el uso de etiquetas podemos optar or opciones que nos permiten enriquecer nuestros diseños (Tipos de letra, tamaños, colores e imagenes de fondo, iconos, ubicacion ) con elementos que organizan de mejor manera la aplicaciones o paginas diseñadas.

6. Manejo de formularios en HTML, realizar un ejemplo. 

Los formularios en HTML sirven al propósito de recolectar información proporcionada por los visitantes del sitio, la cual es luego enviada nuevamente al servidor. Para su correcto funcionamiento es importante que el formulario provisto en HTML sea acompañado de un código del lado servidor, al que denominaremos "agente procesador", que se encargará de recibir y procesar la información como el autor vea conveniente. Este procesamiento puede consistir en, por ejemplo, el almacenamiento de la información o su envío mediante correo electrónico.

Un formulario (form) es básicamente un contenedor para controles. Cada control en un formulario está pensado para recolectar información ingresada por los usuarios, en formas que pueden ir desde líneas de texto a subida de archvios, pasando por opciones, fechas, contraseñas y mucho más. Una vez que los usuarios han rellenado el formulario con los datos, pueden enviarlo de regreso al servidor para que el agente procesador administre la información recolectada.

El siguiente código muestra la estructura de un formulario, con sus etiquetas de apertura y cierre encerrando un conjunto de controles.

<form> [Conjunto de controles] </form> 

Ejemplo:

<form action="../form-result.php" target="_blank"> <p> Ingresa tu nombre completo: <input type="text"> <input type="submit" value="Enviar la información"> </p> </form>

El ejemplo de como resultado el siguiente formulario:

Tomado de: https://www.htmlquick.com/es/tutorials/forms.html 

Aporte personal: En cuanto a la realizacion de tablas y formularios, es importante destacar que existen etiquetas propias para el diseño que se realiza tenga la funcionalidad y vistosidad esperada por los usuarios que observan e interactuan con las paginas que los contienen. Las etiquetas que se usan para estos diseños obedecen a la siguiente sintaxis

<table border="1"> <caption>Titulo de la tabla</caption> <tr>

<th>Col.Cab.1</th>

<th>Col.Cab.2</th>

</tr>

<tr>

<td>Celda 1</td>

<td>Celda 2</td>

</tr>

</table>

</body>

</html>

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