Actividad 2

 
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

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

 

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

 

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

 

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.

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.

 

Tomado de https://webadictos.com/2012/12/30/breve-historia-del-html/ año 2015

 

Aporte personal

 

El Html se origina en los años 80 donde el fisico Tim Berners-Lee, quien propone un nuevo sistema de "hipertexto" los cuales se habian desorrallodo años antes permitiendo a los usuarios acceder a la informacion relacionada con documentos . lo que el fisico proponia era un lenguaje HTML junto con el protocolo HTTP,la finalidad era un medio para compartir entre diversos fisicos que trabajaban por todo el mundo

 

Tomada de https://www.w3.org/Style/Examples/011/firstcss año 2015

 

Tomado de https://www.youtube.com/watch?v=iUNsn6mFCqk año 2015

 

Comentario del video

2. Estructura de una página en html5 

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.
Todo lo que coloquemos entre las etiquetas <head> y </head>, aunque no se visualiza en el navegador, ofrece información importante sobre la propia página, por lo que en el <head> se introduce información referente a:
• La codificación de la página (para que aparezcan símbolos como la "ñ", "ç" o los acentos correctamente) utilizando meta charset="utf-8".
• El título de la página, que aparece en la pestaña del navegador (utilizando <title>).
Otra información que habitualmente podemos encontrar en el <head> pero que no hemos añadido en el ejemplo superior para no sobrecargarlo es:
• La descripción de la página, información destinada básicamente a los búscadores (Google, Bing o Yahoo entre otros).
<meta name="description" content="Resumen del contenido de la página">
• El código CSS que la página utilizará, ya sea interna o externamente (tratado en el tema: Introducción a CSS).
<style type="text/css">
</style>

<link rel=stylesheet href="css/estilo.css" type="text/css"/>
• La programación en javaScript (en el caso de que se utilice).
<script type="text/javascript">
</script>
Por otra parte, dentro del <body> colocaremos todo aquello que sí se tiene que visualizar en el navegador, entre lo que vamos a destacar las etiquetas semánticas.
Con la versión anterior de HTML (HTML4) sólo existía un tipo de caja (<div>), por lo que una caja podía contener cualquier tipo de contenido.
Una de las novedades de HTML5, aparte de disponer de esta misma caja genérica (<div>), tenemos diferentes tipos de cajas destinadas cada una a un tipo de contenido concreto. Así, las cajas de tipo <header> están destinadas a contener los encabezados de la página, las de tipo <footer> para el pie de página, los enlaces estarán dentro de las cajas de tipo (<nav>), para el contenido normal tenemos cajas de tipo <section> y <article>, para el contenido relacionado con el tema central pero no directamente tenemos el tipo <aside> o las imágenes que tienen su propia caja <figure>.
De esta manera, posteriormente entender y encontrar cualquier elemento o contenido es mucho más rápido, sencillo y fiable.
Además, al ver (nosotros, cualquier otra persona o "araña/robot" que explore nuestra página) una estructura html es posible identificar la organización del contenido con un primer golpe de vista.

Las etiquetas semánticas más importantes son:
<header>: Es el equivalente a la cabecera de la página web. Contiene el título o nombre de la empresa/titular de la página, logo e información relacionada.

<nav>: Contiene los enlaces (barra de navegación) externos o internos de la página.

<section>: Es una gran caja que sirve para mostrar grandes bloques de contenido de la página. Puede contener diferentes subapartados de diferentes temas (de tipo <article>).

<article>: Es una caja independiente de contenido que puede estar contenida (o no) dentro de un<section>. Normalmente utilizada para contenidos no demasiado extensos.

<aside>: Define un bloque de contenido relacionado de manera indirecta con el contenido principal, pero que no es esencial para la compresión del mismo.

<footer>: Equivale al pie de página de un apartado concreto (<section>, <article>...) o de la página web en general.

Para seleccionar el nombre de estas etiquetas, Ian Hickson (el editor de HTML5) recurrió a las herramientas de Google para extraer datos de más de mil millones de páginas web reales, repasando los ID y los nombres de clase más utilizados en la web. Si quieres más información puedes acceder a Google Code: Web Authoring Stadistics: Classes.


Tomado de https://www.html6.es/t1_estructura.html año 2015


 

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

 El lenguaje HTML es un lenguaje de marcas, estas marcas serán fragmentos de texto destacado de una forma especial que permiten la definición de las distintas instrucciones de HTML, tanto los efectos a aplicar sobre el texto como las distintas estructuras del lenguaje. A estas marcas las denominaremos etiquetas y serán la base principal del lenguaje HTML. En documento HTML será un fichero texto con etiquetas que variarán la forma de su presentación.

 Una etiqueta será un texto incluido entre los símbolos menor que < y mayor que >.. El texto incluido dentro de los símbolos será explicativo de la utilidad de la etiqueta. Por ejemplo:


Existe normalmente una etiqueta de inicio y otra de fin, la de fin contendrá el mismo texto que la de inicio añadiéndole al principio una barra inclinada /. El efecto que define la etiqueta tendrá validez para todo lo que este incluido entre las etiquetas de inicio y fin, ya sea texto plano o otras etiquetas HTML.

 

Algunas etiquetas no necesitarán la de fin, serán aquellas en las que el final este implícito, por ejemplo
párrafo,
salto de línea ó  inclusión de una imagen. Definen un efecto que se producirá en un punto determinado sin afectar a otros elementos.
El uso de mayúsculas o minúsculas en las etiquetas es indiferente, se interpretarán del mismo modo en ambos casos, pero lo normal es expresarlas en mayúsculas para que destaquen con más nitidez del texto normal.

Etiquetas correctas

Todo texto que se encuentre entre los caracteres < y > se considerará una etiqueta, si la etiqueta no fuera una de las validas del lenguaje HTML no será tenida en cuenta, sin causar ningún tipo de error. Dejándose el texto o las etiquetas a las que afectaba como si no existiera la etiqueta extraña. Cuando se comete un error sintáctico al expresar una etiqueta o un atributo no se producirá ningún error, simplemente no de obtendrá el efecto que deseábamos.
El lenguaje HTML es un lenguaje que evoluciona muy rápidamente y cada nueva versión de los programas navegadores presenta etiquetas nuevas que causan efectos más espectaculares o atributos nuevos de las etiquetas ya existentes. Esto causa que los programas más antiguos no entiendan estas nuevas etiquetas y por tanto las considere erróneas y no realice la acción que deseábamos. Dándose el caso de atributos que son validos solo para un único navegador.
Cuando creemos código HTML hay que hacerlo lo más estándar posible para permitir que el documento pueda ser visto de forma efectiva por distintos navegadores en maquinas distintas. Por tanto debemos renunciar a efectos espectaculares que solo tienen validez en un navegador e intentar comprobar como se ve el documento en una variedad de navegadores, ya que las personas que se conectan a nuestras páginas no tendrán en la mayoría de los casos el mismo que nosotros. Tambien es interesante como se vería el documento en los distintos tamaños de la ventana del navegador, teniendo en cuenta que todos no tienen un monitor con la misma resolución.
En este manual se han tratado de incluir las características más estándar de HTML y en caso de tratarse de instrucciones más particulares se indicará convenientemente.

Tomado de www2.uca.es/manual-html/etiquet.htm año 2015

 

4. Etiquetas básicas que maneja html5

Una página web es en esencia un documento de texto diseñado para ser procesado por un navegador de internet. Por esta razón se le asigna la extensión html, independientemente del procesador de texto con el cual se haya creado.
Las etiquetas html5 permiten al navegador procesar el texto contenido entre ellas de diferente manera y el resultado de esta interpretación es la apariencia que presenta la página web al ser cargada.
Sintaxis de las etiquetas html5
La gran mayoria de las etiquetas html5 contienen una sentencia de inicio y una de cierre:

Adaptando nuestra primera página web a la normativa html5
Procedamos a abrir con el block de notas nuestra primera página web (click derecho sobre el archivo index.html), que contiene como único párrafo:
mi página web
Esto, aunque funciona (puesto que el navegador muestra su contenido como una página web) no cumple con la normativa html5 y será suficiente si nuestra espectativa es crear un documento web con un solo párrafo. Por lo tanto para ampliar nuestras posibilidades vamos a crearle a nuestro documento una estructura html5 adecuada.

Esta instrucción le indica al navegador que el documento debe procesarse según la codificación html5.
Esta es la primera declaración que debe tener todo documento html. Escribimos entonces esto en nuestro documento y tendremos:

Sintaxis: todas las etiquetas pueden escribirse en mayúsculas, minúsculas ó mixto. De manera que es igualmente correcto:

Etiqueta párrafo:

Se utiliza para crear párrafos en el documento.
El estandar html5 incluye la novedad de que no es necesario el uso de las etiquetas de cierre
(asi como pueden omitirse las etiquetas de cierre en otros casos); no obstante, también establece que no es incorrecto seguirlas utilizando.
Incluímos la etiqueta escribiendo:

mi página web
Etiquetas estructurales
Sirven para establecer la estructura general del documento web. Su uso es mas de proceso interno del navegador. Las principales, que debe incluir todo documento web son html, head y body:

Contenido html:

Le indica al navegador donde comienza y termina el contenido html del documento.
En realidad todo el documento debe estar contenido entre las etiquetas html, con la única excepción de la instrucción doctype html
Incluimos esta nueva etiqueta escribiendo:

Para mas etiquetas y atributos basicos de HTML5 revisar el enlace de abajo.
Tomado de webdelprofesor.ula.ve/nucleotrujillo/alperez/html5_css3/02/index.html año 2015


 


 


 

 

 

 

 


 


 

5.  Manejo de tablas en Html5

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.
Veamos un ejemplo. Crea un archivo ejemplo.html con este código y visualízalo:


 

 

 

 

 

 

 

 

 

Tomado de www.aprenderaprogramar.com/index.php?option=com_content&id=516:crear-tablas-html-colspan-y-rowspan-unir-celdas-horizontal-y-vertical-tr-td-th-caption-o-titulo-cu00719b&Itemid=192 año 2015

 

Manejo de formularios en HTML

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.)
Aquí se muestra un ejemplo de un formulario simple que incluye rótulos, radiobotones y botones para reinicializar el formulario o para enviarlo: