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

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

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

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.

Tomada de: https://es.wikipedia.org/wiki/HTML

 

Aporte personal:  

HTML es un lenguaje de programación utilizado para el desarrollo de paginas web, donde se hace uso de etiquetas para el desarrollo. Permite incluir en las paginas web archivos multimedia ( Gráficos, sonidos, imágenes, videos , etc).  Este lenguaje de programación fue creado originalmente por Tim Berners-Lee en los años 80's. HTML es un codigo más "simple" ya que permite hacer paginas mas ligeras que se cargan más rapidamente favoreciendo la usabilidad.

Tomada de: https://bg.wikipedia.org/wiki/HTML año 2015

 

Comentario ..

En este interesante video se dara a conocer algo de la historia de HTML, Incluyendo las competencias y obstaculos que llevarón a este lenguaje a obtener el exito, los navegadores utizados para la ejecución del codigo programado con algo de historia, el futuro de la web y  las ventajas de HTML5.

Estructura de una pagina en HTML 

 
Los documentos HTML siguen una estricta organización.

Cada parte del documento está diferenciada, declarada y englobada con etiquetas específicas.

En primer lugar, tenemos que indicar el tipo de documento que estamos creando. En HTML5 esto es muy sencillo:
<!DOCTYPE html>

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

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

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

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

<title>
La etiqueta <title>, como siempre, especifica el título del documento, y no hay nada nuevo en HTML5.

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

Tomado de: https://www.edu4java.com/es/web/html5-estructura-global.html

 

Aporte personal:

Una página HTML debe tener dos partes primordiales:

El HEAD o cabecera, donde está la información sobre la página web, como el título, una descripción y algunas palabras clave. También puede contener información de estilos CSS.

El BODY o cuerpo, donde está todo el contenido que el usuario va a ver en su navegador.

Las siguientes etiquetas HTML se utilizan para construir la estructura básica de una web:

<html> significa el inicio (y final) del documento.

<head> significa el inicio (y final) de la sección de cabecera del documento.

<title> Es el título del documento. Esto se muestra por la mayoría de los navegadores como título de la ventana, cuando agregas una web a favoritos, etc.

 

Tomada de : https://t3.gstatic.com/images?q=tbn:ANd9GcQo2TGFx4HkK2GvB--NhRjZUQOcdWG0ZYQvM-0h5nAXSm5ExHBCUcR5wggwfQ

 

 

 

 

Comentario ...

Este interesante video nos muestra la estructura global que vamos a  utilizar a la hora de programar una pagina web en HTML5 , Ademas mostrara un poco el manejo de ciertas etiquetas que utiliza este lenguaje.

¿Que es una etiqueta? - Sintáxis

 

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.    
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. <ETIQUETA>Elementos Afectados por la Etiqueta</ETIQUETA>
 
Tomado de: https://www2.uca.es/manual-html/etiquet.htm
 
Aporte personal:
 
Una etiqueta es un código que se incluye en las paginas creadas con el lenguaje HTML para estructurar o añadir significado o formato al contenido de dichas paginas web, Todas las etiquetas comparten el mismo formato: empiezan con el signo menor que "<" y terminan con el signo mayor que ">".  Ejemplo de uso:
 
<b>
Esteban Alvarado Restrepo
</b>
 
 
Tomada de: https://www.desarrolloweb.com/articulos/etiquetas-semanticas-html5.html
 
Tomada de: https://www.desarrolloweb.com/articulos/etiquetas-semanticas-html5.html

Comentario...

En este interesante video se explicara el manejo de las etiquetas estructurales en HTML5 que seran de gran ayuda para el desarrollo de una pagina web, Se mostrara el uso y sintaxis de cada etiqueta.

Etiquetas basicas que maneja HTML5

 
Headings
 
Nos definen el tamaño de un título o cabecera.
 
<h1> nos dá el tipo de letra más grande.
<h6> nos dá el tipo de letra más pequeño.
HTML agrega automaticamente un espacio antes y después de cada título.
 
<h1> al ser usado como título de una página Web, es de suma importancia ya que es uno de los parámetros que Google y demás buscadores tiene en cuenta, a la hora de indexar un sitio web.
 
Párrafos
 
Los párrafos se definen con la etiqueta <p>.
 
Comentarios
 
La etiqueta <!-- ... --> se utiliza para insertar un comentario dentro del código que estamos escribiendo. El mismo es ignorado por el navegador al momento de leerlo. Los comentarios nos sirven para explicar mejor el código y son de gran ayuda en el momento que necesitemos editarlo.
 
<!-- Esto es un comentario. -->
 
Salto de línea
 
El salto de línea está definido con la etiqueta <br>. Es utilizado cuando queremos cortar una línea sin necesidad de terminar con el párrafo. La etiqueta <br> obliga a saltar de línea dondequiera que la ubiquemos.
 
Trazar una línea
 
La etiqueta <hr> nos permite trazar una línea horizontal como las que separan las distintas secciones de este tutorial.
 
La etiqueta <hr> no tiene cierre.
 
Imagenes e información tomadas de: https://www.virtualnauta.com/html-etiquetas-basicas

 

Comentario...

En este interesante video que hace parte de un curso de HTML5 se mostratara el uso de las etiquetes basicas que podemos utlizar para darle estructuración a la pagina web que estamos desarrollando en el momento.

EJEMPLOS ...