PRACTICA 1

Actividad HTML5

Nota: insertar videos que nos visualicen como trabajar con las etiquetas anteriores...

Actividad Html5

1. Crear una tabla en Html5 con la hora, los días 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.

En el siguiente link se encuentra el codigo HTML de la anterior tabla

drive.google.com/drive/folders/1NfV1V_QbxyLjaIb2SZPjjsoOEJoPQICx?usp=sharing

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

Solución

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

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: <Title></Title>

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.

2. Estructura de una página en html5

<!DOCTYPE html>

<html lang="es">

<head

<meta charset="utf-8" />

<title>Hola Mundo!</title>

</head>

<body>

<h1>Hola Mundo!</h1>

</body>

</html>

DOCTYPE

<!DOCTYPE html>

La etiqueta doctype declara el tipo de documento, por lo que esta está señalando que este es un documento HTML.

HTML

Delimita el documento HTML.

Atributo a destacar

LANG

Indica el lenguaje de contenido del código.

HEAD

El elemento head delimita la cabecera del documento, entre sus etiquetas contiene información como scripts, metadatos, estilos, ubicación de documentos de estilos, título de la página, etc.

LINK

Esta etiqueta contiene un link a una hoja de estilos externa, la cual se utilizará en este documento.

Atributo a destacar

HREF

Especifica la url donde se localiza la hoja de estilo.

BODY

La etiqueta body delimita el cuerpo del documento y contiene todo aquello que podremos ver en nuestro navegador. Imágenes, textos, enlaces, video, etc...

HEADER

El contenido de esta etiqueta debe ser la cabecera de nuestra página donde se suele encontrar el título, el logotipo y poco más.

NAV

Esta etiqueta sirve para delimitar el menú de la página, donde colocaremos los enlaces internos para movernos entre nuestras diferentes secciones del sitio web.

A

<a href="https://dominio.com/seccion2.html">IR SECCIÓN 2</a>

Representa un enlace o hipervínculo.

Atributos a destacar.

HREF

Dirección URL hacia la que apunta el enlace.

H1, H2, H3, H4, H5, H6

1234 <h1>Título de la WEB</h1><h2>CONTENIDO PRINCIPAL</h2><h3>Testimonios</h3><h4>Avisos legales</h4>

Estas etiquetas establecen los encabezados. Se organizan por niveles siendo H1 el más importante y H6 el menos importante.

SECTION

La etiqueta section engloba una sección de texto, imágenes y otros elementos que guardan cierta relación entre ellos. Normalmente siempre le podremos poner un título o encabezado.

ARTICLE

La etiqueta article se suele encontrar dentro de una etiqueta section y sirve para dividir y ordenar los contenidos en su interior.

DIV

Otra forma de dividir contenido para posteriormente aplicarle clases y modificar su estilo.

P

<p></p>

Entre las etiquetas P colocaremos un párrafo de texto.

IMG

Esta etiqueta coloca una imagen en el documento mediante un enlace.

Atributos a destacar.

ALT

Representa el texto alternativo, muy importante para que los bucadores puedan obtener información de la imagen.

SRC

URL donde se encuentra la imagen.

ASIDE

Contiene información no vital o que no está estrechamente relacionada con el contenido principal de la página como podrían ser banners de anuncios, citas o enlaces externos.

FOOTER

Aquí encontraríamos el código perteneciente al pie de página, donde se suelen colocar los enlaces a textos legales, el copyright, etc.

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

Son fragmentos de texto rodeados por corchetes angulares < >, que tienen funciones y usos específicos y se utilizan para escribir código HTML.

Las etiquetas o tags son la forma de escribir código HTML.

En HTML existen etiquetas de apertura y etiquetas de cierre, tienen la forma: <etiqueta> </etiqueta>. Donde <etiqueta> es la etiqueta de apertura y </etiqueta> es la etiqueta de cierre indicada por la diagonal. HTML tiene definidas gran variedad de etiquetas para distintos usos.

Aunque la mayoría de las etiquetas tienen su etiqueta de apertura y etiqueta de cierre, es importante aclarar que no todas las etiquetas tienen su correspondiente etiqueta de cierre.

Algunos ejemplos de etiquetas son:

4. Etiquetas básicas que maneja html5 con ejemplos

<p></p>: representa un párrafo (+info).
<br>: representa un salto de línea (+ìnfo).

<h1></h1>: esta etiqueta se utiliza para representar el encabezado de una página, como si fuera el índice de un libro. Puede variar desde 1 hasta 6 para diferenciar subniveles (+info).
<ul></ul>: representa una lista de elementos, donde el orden de los elementos no es importante - esto quiere decir que el cambio del orden no modifica el significado. (+ìnfo).
<ol></ol>: representa una lista de elementos, donde el orden de los elementos sí es importante - esto quiere decir que el cambio del orden modifica el significado. (+ìnfo).
<li></li>: representa un elemento de la lista y su padre siempre tiene que ser una etiqueta ol o ul. (+ìnfo).
<strong></strong>: representa algo muy importante, serio (para avisos o precauciones) o urgente (que debe ser leído antes). (+ìnfo).
<em></em>: sirve para enfatizar en el contenido. (+ìnfo).
: se utiliza para añadir comentarios dentro del código que el usuario no podrá ver. Por ejemplo para añadir notas de tareas pendientes, aclaraciones que nos ayuden a nosotros o a otras personas a entender el código, etc. (+ìnfo).El siguiente ejemplo muestra una página web que combina todas ellas:

El siguiente ejemplo muestra una página web que combina todas ellas:

5. Manejo de tablas en Html5, Realizar un ejemplo

En HTML cada tabla está asociado a un elemento table, dentro de este elemento se indican las filas mediante el elemento tr y dentro de cada fila se indican las celdas mediante elementos td.

En HTML 5 las etiquetas table y tr no tienen atributos, aunque hay atributos, como por ejemplo el atributo border, que reconocen los navegadores por estar presentes en versiones anteriores de HTML.

En este link se encuentra el código como se creo la tabla:

drive.google.com/file/d/1djryjIxfWzJ73YarsDflLM7W4RfdmZQ3/view?usp=sharing

6. Manejo de formularios en HTML, realizar un ejemplo

Los formularios son esas famosas cajas de texto y botones que podemos encontrar en muchas páginas web. Son muy utilizados para realizar búsquedas o bien para introducir datos personales por ejemplo en sitios de comercio electrónico. Los datos que el usuario introduce en estos campos son enviados al correo electrónico del administrador del formulario o bien a un programa que se encarga de procesarlo automáticamente.

Los formularios son definidos por medio de las etiquetas <form> y </form>. Entre estas dos etiquetas colocaremos todos los campos y botones que componen el formulario. Dentro de esta etiqueta <form> debemos especificar algunos atributos:

Como se puede observar, las etiquetas <form> y </form> delimitan el formulario, el cual contiene en este ejemplo tres elementos "input" para que el usuario pueda:

Introducir su nombre (dato de tipo texto, type="text").
Introducir su edad (dato de tipo número, type="number").
Enviar dichos datos, type="submit".
"radio": control que puede ser marcado o desmarcado por el usuario, de forma que normalmente cuando se marca una opción se desmarca la que estuviera seleccionada previamente. Es muy típico cuando se requiere elegir entre varias opciones.
name: identifica un control dentro de un formulario. Este atributo nos va a resultar necesario para poder rescatar la información.
value: cada control tiene un valor inicial y un valor actual. Normalmente, el valor inicial de un control puede especificarse con el atributo value
id: el valor de estre atributo permite relacionar un control con una etiqueta. Por ejemplo, si un control tiene por id el valor, esto significa que ese control está relacionado con la etiqueta (label) cuyo atributo for es for="email".
Label o etiqueta: podría considerarse que no es un control en sentido estricto, puesto que es algo que no es modificable por el usuario. Un label o etiqueta es un texto que va asociado a un control con el que puede interactuar un usuario. Un label contiene habitualmente dos informaciones importantes: el nombre del control con el que va asociado, y el texto a mostrar.