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

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

1. historia del HTML.

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

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

APORTE PERSONAL:

- primero entendamos que HTML es un lenguaje de programacion, para realizar paginas web; esta nacio en el año de 1980 por el el físico Tim Berners-Lee tras la idea de un "hipertexto" para compartir documentos (un sistema de almacenamiento donde las cosas no se pierdan) y los usuarios accedieran a el de forma sencilla.

el lenguaje HTML basa su filosofía de desarrollo en la referenciación, para añadir elementos externos a la pagina como video, imagenes, etc..

HTML buscar que cualquier pagina realizada por el mismo sea interpretada por cualquier navegador web.

Tomado de : https://www.primecursos.com.br/html-basico/

año- 2015

COMENTARIO

- Este video habla sobre la historia del HTML desde sus Hinicio y su finalidad.

comenso en el año de 1989 tim berners-le creo un sistema capas de relacionar y habrir documentos de su misma clase, y a este sistema se le llamo HTML.

HTML era un lenguaje muy simple y servia a vaces de comandos de texto.

actualmente el lenguaje HTML es un lenguaje muy usado por el gran apojeo que a tenido el internet en la actualidad y el uso por supuesto de las paginas web, haciendo de HTML un lenguaje de programacion muy importante y con una gran tecnologia que a venido evolucionando de un tiempo hasta nuestro tiempo actual, ayudando a revolucionar el mundo.

2. Estructura de una página en HTML5

- Estructura básica 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:

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.

• Elementos que contiene el

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

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

HTML5, lo básico

HTML5 es la versión 5 del lenguaje de marcado HTML. Un documento escrito en HTML tiene una estructura básica como la siguiente:

*<!DOCTYPE html> : 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.

* html : Tras declarar el tipo de documento, indicamos que iniciamos nuestro documento HTML. Esta etiqueta se cierra cuando finalizamos el documento. Vemos que lleva un atributo lang, esto sirve para indicar el idioma del documento (en nuestro caso español)
* head : En un documento HTML tenemos una cabecera dónde colocaremos los metadatos de la página, el código JavaScript y el CSS que utilizará el navegador para renderizar la página.
* meta charset : Obligatorio en HTML5, informa el juego de caracteres del documento, debería ser siempre utf-8. Como todo metadato debe ir dentro del head
* title : Es un tipo de metadato especial que nos proporciona el título de la página. Por motivos de posicionamiento (SEO) se recomienda que el meta title sea parecido al H1 del documento y a la URL de la página.
* body : En su interior tendremos el contenido de la página.

Tomado de : https://rolandocaldas.com/php/html5-estructura-basica año 2015

APORTE PERSONAL.

- todo tienen una estructura y HTML5 no es la excepcion, este tiene una estructura muy basica y simple de entender, ademas de que es semantica, sus etiquetas son muy basicas, por lo que hace que la programacion web sea mas facil de entender y que pueda ser modificable mas facilmente, ya entendido esto pasemos a esplicar un poco la estructuctura que esta posee; HTML5 los elementos basicos que componen la estructura basica de una pagina en HTML5 son:

* primero comensamos escribiendo Doctipe, seguido de la etiqueda html la cual contiene el atributo lang el cual sirve para dar el idioma del sitio web. el español iria asi

* luego va el hear En un documento HTML tenemos una cabecera dónde colocaremos los metadatos de la página, el código JavaScript y el CSS que utilizará el navegador para renderizar la página.

* ahora sigle el elemento title el cual nos permite darle el nombre a la pagina y se debe colocar tambien la etiqueta meta, donde se le dice al navegador que tipo de codificado es el documento html,por preferencia usaremos utf-8 que hacepta nuestro acento y la ñ, iria asi : <title>Titulo de la webtitle>

. <meta charset="utf-8" />

* se puede usar tambien el elemento link que son las que enlazan nuestros estilos CSS, los Favicones y los Feeds. y read es para decir que estamos enlasados.

NOTA : Hasta donde vamos es la parte no visible de la pagina, ya empesaremos a la parte visible y su estructura.

* seguiremos la estructura colocando body donde se empesara a visualisar la estructura del sitio web

la estructura que tendremos, sera una igual a la de la ultima imagen espuesta

En el video se da una esplicacion muy basica de lo que es la estructura de HTML5, que es parecida a la que hablamos anteriormente.

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

<ETIQUETA>Elementos Afectados por la Etiqueta</ETIQUETA>

Por ejemplo, con la etiqueta siguiente:

<B>Texto que será en negrita</B>.

Obtendremos:

Texto que será en negrita

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

- Las nuevas etiquetas en HTML5 son altamente evocadoras, encapsulando su rol y uso. Las versiones pasadas de HTML usaban etiquetas que no eran tan descriptivas. No obstante, HTML5 tiene etiquetas altamente descriptivas e intuitivas. Proporciona etiquetas de contenido enriquecido que identifican el contenido inmediatamente. Por ejemplo, la etiqueta <div> que ha sido bastante trabajada, ha sido complementada con las etiquetas <section> y <article> . La adición de las etiquetas <video>, <audio>, <canvas> y <figure> también ofrece una descripción más precisa del tipo específico del contenido.

El HTML5 proporciona:

Etiquetas que describen exactamente lo que están diseñadas a contener

Tomado de : https://www.ibm.com/developerworks/ssa/web/library/wa-html5fundamentals/ año 2015

APORTE PERSONAL.

- pasare a dar una pequeña esplicacion de lo que pude entender lo que son etiquetas, y es que son la base principal del lunguaje HTML, y recordemos que HTML5 es solo la version 5 del mismo; las etiquetas son los elementos que nos ayudaran a tener un mejor control sobre el codigo que llevaremos en toda la construccion de nuestra pagina web.

pensemos en las etiquetas como una pequeña parte de codigo, que nos ayudaran a mejorar la visivilidad del codigo y control del mismo; las etiquetas nos ayudaran a tener control del texto de nuestro sitio web, al igual que las distintas estructuras del lenguaje, ayudandonos las etiquetas a tener una mejor presentacion a la pagina web creada, pero tambien ayudara al navegador a entender mejor el codigo de la pagina web y asi hacer mas facil poder cargarla y mostrarla.

Recordemos que hay una gran bariedad de etiquetas que nos ayudaran a manejar varias acciones como son, el texto, el sonido, las imagenes, etc...

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; algunos ejemplo se pueden visualizar en la parte de arriba.

- El presente video presenta la segunda parte de una serie de videos de tutorial de como manejar lo basico de HTML5, en este se esplica que hacen las etiquetas y las nuevas etiquetas que presenta HTML5, las cuales nos ayudaran a ver un codigo mas limpio y mas simple.

estas etiquetas mejoran la visivilidad del codigo y la busqueda, y ayuda mucho al navegador al utilizar estas etiquetas.
recuerdese que estas etiquetas no daran la forma a la pagina, solo te ayudara a llevar un orden en el codigo y te ayuda a controlarla mejor tu pagina.

en el video se esplicara el uso y la forma de utilizar de:

* <!DOCTYPE HTML> * <section> </section>

*<article> </article> * <aside> </aside>

*<header> </header> *<nav> </nav>

*<footer> </footer>

4. Etiquetas básicas que maneja html5 con ejemplos

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.

Ejemplo

Código

<html>
<head>
<title>Headings</title>
</head>

<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>

Resultado

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Párrafos

Los párrafos se definen con la etiqueta <p>.

Ejemplo

Código

<html>
<head>
<title>Párrafos</title>
</head>

<body>
<p>Este es el primer párrafo.</p>
<p>Y este es el segundo párrafo.</p>
</body>
</html>

Resultado

Este es el primer párrafo.

Y este es el segundo párrafo.

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.

* Nota: el signo de exclamación se coloca solo al principio del código.

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.

Ejemplo.

Código

Esto es <br> un salto de lí<br>nea.

Resultado

Esto es
un salto de lí
nea.

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.

Ejemplo.

Código

<hr>

Resultado

Tomado de : https://www.virtualnauta.com/html-etiquetas-basicas Año 2015

- Etiquetas de texto

<pre> </ pre>
Crea texto preformateado
<h1> </ h1>
Crea un título grande
<h6> </ h6>
Crea un título pequeño
<b> </ b>
Crea texto en negrita
<i> </ i>
Crea texto en cursiva
<tt> </ tt>
Crea, o máquina de escribir estilo de texto-teletipo
<cite> </ cite>
Crea una cita, por lo general en cursiva
<em> </ em>
Hace hincapié en la palabra (con cursiva o negrita)
<strong> </ strong>
Hace hincapié en la palabra (con cursiva o negrita)
size=?> <font </ font>
Ajusta tamaño del fuente, de 1 a 7)
color=?> <font </ font>
Juegos de color de la fuente, usando nombres o valores hex

Tomado de: https://www.taringa.net/posts/ciencia-educacion/11833897/Etiquetas-basicas-de-html.html Año 2015

APORTE PERSONAL.

- Las etiquetas que se acaban de mencionar son las etiquetas basicas de manejo de texto que maneja HTML5, es decir son las etiquetas que nos permitiran tener un mejor dominio en el aspecto escrito o de texto que tendra nuestra pagina web, como mencione, solo son las etiquetas basicas de manejo de texto, ya que hay muchas mas etiquetas que nos pueden ayudar a manejar listas, caracteres especiales,etc..

recordemos tambien que hay etiquetas de suma importancia y son las que vimos anteriormente para construir nuestra pagina web, recordemos algunas como son:

*<!DOCTYPE html>

*<head>

*<title>

*<body>

como hemos visto hasta ahora, la forma de usar las etiquetas es muy sencilla y son muy utiles, estas ban escritas entre los siguientes signos '<etiqueta >' y para terminar su uso se escribiria igual, solo que al comienso iria con este otro signo '/' terminando asi '</ etiqueta >.

mas imformacion sobre las etiquetas en:

* https://www.arumeinformatica.es/blog/html5-nuevas-etiquetas-semanticas-y-estructurales/ año 2015

*https://www.cristalab.com/tutoriales/etiquetas-de-html5-c109153l/ año 2015

*https://webdelprofesor.ula.ve/nucleotrujillo/alperez/html5_css3/02/index.html año 2015

*https://elbauldelprogramador.com/introduccion-html5/ año 2015

este video aunque es algo largo, nos esplica de muy buena forma el como se pueden usar las etiquetas basicas de HTML5, ademas es la tercera parte de una serie de videos en los que se esplica el funcionamiento de HTML5, por lo cual si se desea, se puede seguir y aprender un poco mejor el funcionamiento del mismo.

en el video se utilizaran las etiquetas basicas que son:

*<h1> , <h2>, <h3>, etc... - tamaño del texto
*<b> - poner en negrilla

*<i> - italica (diagonal)

*<u> - subrayado

*<font> - tipo de letra ( calibri, cursiva, etc..) y color de letra

* < a href =" link de la pagina " >nombre del link</a> - enlasar tu pagina web con otra
*<img src=" direccion de la imagen. formato"> - agregar una imagen
*<embed src="direccion.formato" - agregar sonido y videos

en el video se esplican todas estas etiquetas y su uso , ademas de mostrar como compartir un video y mostrarlo en nuestra pagina web.

hay que recordar que todas las etiquetas que emos mencionado funcionan de la misma forma, asi que se pueden aplicar igual a como se describe en el video, por ahora esto es lo basico de las etiquetas de HTML5.

5. Ejemplo de manejo de tablas en HTML5

una tabla basica en HTML5 se manejan con las siguientes etiquetas:

*<table> </table> ---- crea las tablas
*<tr> </tr>----- crea las filas( deben ir dentro del table)
* td> ----- crea las celdas ( deben ir dentro del tr)

- subire un bloc de notas, hay se visualizara el codigo de creacion de unas tablas en HTML5, que tambien lleva imagenes, para poner el codigo a funcionar, solo se debe guardar el bloc de notas o el codigo con (.html)

Tabla HTML5 1.txt (2146)

asi se visualizaria las tablas con ese codigo

Nota: se deben tener las siguientes 2 imagenes en el mismo lugar que esta el archivo .html

6. Ejemplo de manejo de formulario en HTML5

un formulario basica en HTML5 se manejan con las siguientes etiquetas:

*form---- crea el formulario

*label ----- se utiliza para adjuntar información a los controles.

* input ----se utiliza para el ingreso de datos por parte del usuario.

- subire un bloc de notas, hay se visualizara el codigo de creacion de un formulario en HTML5, para poner el codigo a funcionar, solo se debe guardar el bloc de notas o el codigo con (.html)

codigoFormulario1.txt (651)

asi se visualizaria las tablas con ese codigo