Actividad 2 - HTML

1. HISTORIA DEL HTML

La historia completa de HTML es tan interesante como larga, por lo que a continuación se muestra su historia resumida a partir de la información que se puede encontrar en la Wikipedia.

El origen de HTML se remonta a 1980, cuando el físico , 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).

Tomado de https://librosweb.es/xhtml/capitulo_1/breve_historia_de_html.html    año 2015

HTML, siglas de HyperText Markup Language («lenguaje de marcas de hipertexto»), hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia para la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, entre otros. Es un estándar a cargo de la W3C, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación.

El lenguaje HTML basa su filosofía de desarrollo en la referenciación. Para añadir un elemento externo a la página (imagen, vídeo, script, entre otros.), este no se incrusta directamente en el código de la página, sino que se hace una referencia a la ubicación de dicho elemento mediante texto. De este modo, la página web contiene sólo texto mientras que recae en el navegador web (interpretador del código) la tarea de unir todos los elementos y visualizar la página final. Al ser un estándar, HTML busca ser un lenguaje que permita que cualquier página web escrita en una determinada versión, pueda ser interpretada de la misma forma (estándar) por cualquier navegador web actualizado.

Tomado de https://es.wikipedia.org/wiki/HTML año 2015

Habla de la evolucion de este sistema proponiendo como meta final el HTML como estandarizacion en la creacion de paginas web, ademas de la posibilidad de implementar el uso de multimedia junto con texto en un solo sitio para de esta manera tener una mejor unificacion y complementacion de la informacion aqui contenida y proporcionar al usuario la posibilidad de encontrar buena informacion en un solo sitio sin la nesecidad de estar buscando todos los complementos por separado.                                                                                                                                                                                                             

APORTE PERSONAl

El HTML surgio apartir de la idealizacion de un sistema para compartir documentos e informacion por parte del fisico Tim Berners-Lee, con este lenguaje se pueden unificar imagenes, sonido,videos en una sola pagina la parte interesante es que esto no se hace sobre el codigo de la pagina, sino que simplemete mediante un texto se direcciona la pagina a la ubicacion de dicho elemento, la palabra clave dentro de todo este contexto de la programacion web es la referenciacion, esta es la ideologia en la que se basa dicho sistema.

                                                                

2. Estructura de una pagina HTML5

Analicemos un poco el código:

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

En el video se explica paso a paso la estructura o esqueleto de todo programa HTML5 ademas de una clara explicion de las principales etiquetas y algunas de sus caracteristicas.

APORTE PERSONAL
se debe tener en cuenta que toda etiqueta en html se debe abrir y cerrar debidamente los operadores correctos serian: para abrir <> y para cerrarla  de esta manera se indica donde comienza y donde termina cada una.

Las partes fundamentales de un documento HTML son la cabezera, el doctype, el cuerpo y el titulo.

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

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

Ejemplo de uso de b

TOMADO DE https://www.desarrolloweb.com/wiki/etiquetas-html.html  AÑO 2015

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

TOMADO DE https://www.alegsa.com.ar/Dic/etiqueta%20html.php  AÑO 2015
 

El video contiene los conceptos basicos de etiquetas y algunos ejemplos usundo estas, se clarifican de nuevo la estructura de un programa html

APORTE PERSONAL
Son componentes con los que se identifican los elementos creados en lenguaje HTML y se pretende poder usuarlo posteriormente.
                                      

4. Etiquetas básicas que maneja html5 con ejemplos

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.

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

En el video se muestran las etiquetas basicas de html 5 en comparacion con versiones anteriores, ademas de especificar claramente cada parte de la pagina indicando las etiquetas adecuadas para modificar o cambiar cada una de las respectivas zonas.

APORTE PERSONAL

las etiquetas basicas en HTML5 se dibiden segun su uitilidad, es decir, estan las de cabezera, las de parrafo, las utilizadas para llamar documentos externos tales que nos permiten identificar las zonas de la pagina web.

5. MANEJO DE TABLAS
Ahora veremos el uso y manejo de tablas en html, una tabla es una rejillas para ubicar datos, similar a una cuadricula de Excel y se usa principalmente para mostrar datos tabulados, hace tiempo las tablas se usaban también como objeto de diseño por su facilidad para dividir columnas y crear espacios de contenido, sin embargo por semántica esta práctica no debe usarse más, las tablas no deben usarse como objeto de diseño ya que son de hecho un objeto de contenido y debe ser usado para llamar listados de datos.
Al igual que en capítulos anteriores no nos centraremos en el diseño ya que esta parte le corresponde mas a CSS que a HTML por lo cual algunos atributos como background y border serán ignorados.
La etiqueta que determina una tabla es y como esta tiene contenido en su interior tiene una etiqueta de cierre

, pero esta etiqueta es un poco más compleja ya que cada tabla contiene filas y columnas que determinan las celdas que son las casillas de contenido en las que pondremos la información.
TOMADO DE https://campuzoide.com/curso/diseno-web-con-html5-y-css3/temas/etiquetas-html-tablas AÑO 2015

Tanto en HTML como en otros programas las tablas se utilizan para organizar datos, pero también nos puede ayudar en organizar la información en la pantalla, dado a que una celda de tabla puede contener cualquier elemento HTML, como por ejemplo un párrafo o un campo de texto de un formulario.
En HTML una tabla está formada por un conjunto de directivas, unas obligatorias y otras opcionales. La directiva principal que delimita e incluye las otras directivas es la directiva
. Los elementos definitorios para una tabla son las filas, las columnas y las celdas. HTML ofrece directivas como para construir las filas y , , , y son directivas opcionales, pero importantes, porque con ellas las tablas se pueden estructurar visualmente mejor.

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

TOMADO DE https://www.html5.showbizreal.com/Columnas/module/tableMod.php AÑO 2015
 

En el video se muestra de forma especifica como crear tablas incluyendo los comandos necesarios al igual que la forma decuada de utilizarlos, esto se puede realizar de forma mas comprensiva el programa dream weaver que permite tener  la vision del codigo y los efectos que esto produce en la pagina.

APORTE PERSONAL.

Las tablas permiten mostrar de forma ordena la informacion dentro de las paginas web de tal modo que todo quede donde debe estar, por ende se tendra una mejor comprension del codigo para determinada zona.

 CODIGO

6. Manejo de formularios en HTML, realizar un ejemplo

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

TOMADO DE https://html.conclase.net/w3c/html401-es/interact/forms.html 2015

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

TOMADO DE https://www.aulaclic.es/html/t_8_1.htm 2015

En el video se muestran las etiquetas iniciales para el uso de los formularios, especificando las caracteristicas y atributos de cada, su funcionalidad y ejemplos. Se muestran las principales utilidades de los formularios en cuanto a la relacion cliente-servidor.