Actividad 2

1) Historia del HTML

En 1989 Tim-Beners Lee fue el inventor del HTML, cuyo propósito en ese tiempo era para compartir inventos científicos. 

Al comienzo, era limitado, ya que solamente poseía 18 etiquetas para texto, pero también permitía ligar o ligar otros documentos, gracias a esto, se volvió de Hiper Texto, toda esta información se podía visualizar en un navegador llamado World Wide Web (www).

Tomó tanta importancia en dichos tiempos, que el IETF (Grupo de Trabajo de Ingeniería de Internet) pensó que debería de tomarse como estándar. Debido a la importancia que tomó, se creó un organismo para crear las reglas de HTML W3C (World Wide Web Consortium).

En 1993 el mundo navegaba por internet en el primer navegador popular llamado NCSA Mosaic, pero una compañía deseaba ser la pionera en los navegadores, así que en el año de 1994 lanzaron la primera versión de Netscape y en tan sólo 4 meses ya era utilizado por 3/4 de los usuarios. Pero Netscape deseaba hacer mucho más, así que implementaron JavaScript, de allí, salió la versión HTML2, donde le dieron cabeza (head) y cuerpo (body) y gracias a esta evolución, se comenzó a implementar imágenes, tipografías, colores, inputs.

Estos cambios a algunos usuarios no les gustó, diciendo que el HTML solamente debería de ser utilizado para realizar la estructura de la página, así que nacieron las hojas de estilo en cascada (Cascading Style Sheet).

En la versión HTML3 se intentó realizar etiquetas específicas para Netscape y otros navegadores, así que esto realizó un pequeño cambio. En la versión de HTML3.2 se retiraron todas estas etiquetas, y por fin se volvió un estándar en la industria, donde se agregaron más etiquetas para así tener más contenido para las páginas que se realizaban en esos tiempos.

En la versión HTML4 se incorporaron botones, iframe para así poder abrir páginas dentro de páginas.

En la versión HTML5, en el año 2014 ya se comenzó a implementar inputs, videos, audios  

2) Estructura de una página web HTML

  • Cada página comienza con: < HTML > .
  • A continuación viene la cabecera, delimitada por < HEAD > y < /HEAD > .
  • Después, el comando < BODY >, que indica el comienzo del cuerpo de la página. Las instrucciones HTML se escribirán a continuación, y finalizarán con < /BODY >.
  • La página acabará con < /HTML > .

Es decir:

<HTML>

            <HEAD>

                       Definiciones de la cabecera

            </HEAD>

            <BODY>

                       Instrucciones HTML

            </BODY>

</HTML> 

Tomado de: Estructura de una página HTML (usc.es) 

3) ¿Qué es una etiqueta y cual es su sintaxis para su manejo en html5?

Las etiquetas HTML son fragmentos de código que permiten crear elementos HTML, estructuras básicas del lenguaje de programación HTML en el que se escriben las páginas web porque es el que entienden los navegadores.

El formato de una etiqueta HTML es un fragmento de texto encerrado entre corchetes angulares < >, y cada elemento HTML tiene una etiqueta de inicio del tipo <etiqueta> y suele terminar con una etiqueta de cierre que lleva una barra inclinada al principio </etiqueta>.

Los elementos HTML tienen dos propiedades básicas:

  1. Atributos, que se encuentran en la etiqueta de inicio
  2. Contenido, ubicado entre las dos etiquetas
Sintaxis:

<ejemplo> 

            Contenido

</ejemplo>


Tomado de: Qué son las etiquetas HTML? 🥇 masterSEOsem

https://www.masterseosem.com/diccionario-seo-glosario-de-terminos-de-marketing-digital/etiquetas-html 

Ver más: Ejemplos y etiquetas básicas de HTML (uv.es)

https://www.uv.es/cerveron/paginasweb/notashtml.html


4) Etiquetas básicas que maneja html5 con ejemplos 

  • <html>: indica el comienzo del documento HTML.
  • <head>: indica que empieza la cabecera de la página. En ella se suele poner el título (<title>) de la web, una descripción y otras informaciones relacionadas con el contenido de la página.
  • <body>: es el cuerpo de la página, donde va lo que se ve en el navegador al cargar una web. En el body van los textos, las imágenes y todos los contenidos de la web.
  • <h1>, <h2>, etc.: son los títulos o encabezados. Se utilizan para establecer determinados textos de la página como titulares, suelen tener un tamaño de fuente mayor para diferenciarlos del resto del texto. Son importantes en el posicionamiento en buscadores.
  • <a>: define los enlaces.
  • <table>: es una tabla, y dentro de esta tenemos filas <tr> y celdas <td>.
  • <p>: el texto dentro de esta etiqueta forma un párrafo.
  • <img>: imágenes.
  • <ul>: los textos dentro de esta etiqueta se estructuran en listas. Mediante el uso de <li> definimos cada guión dentro de la lista, y usando <ol> en lugar de <ul> tendremos listas ordenadas.
  • <b> y <strong>: se utilizan para resaltar el texto.
  • <u>: texto subrayado.
  • <i> y <em>: texto en cursiva.


Ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="https://www.w3.org/1999/xhtml" xml:lang="es">

            <head> 

            <title>

                     Título de la página

            </title> 

            </head> 

            <body> 

                      <h1>Encabezado de la página</h1> 

                      <h2>Encabezado de menor tamaño</h2> 

                      <p>Este es el texto de un párrafo.</p> 

                      <p>Este es el texto de otro párrafo. Dentro de este párrafo, pueden ir palabras                        <strong>en negrita</strong>, <em>en cursiva</em> o lo que quieras.</p> 

                      <p>También podemos poner listas como la siguiente:</p>

                      <ul> 

                      <li>Guión número uno.</li> 

                      <li>Guión número dos.</li> 

                      <li>Guión número tres.</li> 

                      </ul> 

                      </body> 

</html>

Tomado de: Conceptos básicos de HTML - Manual de HTML y CSS (lawebera.es)

https://www.lawebera.es/xhtml-css/conceptos-basicos-html.php

5) Manejo de tablas en Html5, Realizar un ejemplo 

Una tabla no es otra cosa más que un medio de organizar datos en filas y columnas. Este concepto ha estado presente en nuestra sociedad por un largo período de tiempo y ha sido adoptado por HTML en sus etapas iniciales, como una forma de transmitir información que, de otro modo, no sería comprendida tan fácilmente.

Como muchas otras estructuras de HTML, las tablas son construidas utilizando elementos. En particular, una tabla básica puede ser declarada usando tres elementos, a saber, table (el contenedor principal), tr (representando a las filas contenedoras de las celdas) y td (representando a las celdas [Columnas]). Dejémoslo más claro con un ejemplo: 

<table> 

           <tr>

                <td>Celda 1</td>

                <td>Celda 2</td>

                <td>Celda 3</td>

           </tr>

            <tr>

               <td>Celda 4</td>

               <td>Celda 5</td>

               <td>Celda 6</td>

            </tr>

</table>

Este código daría como efecto la siguiente tabla:

Tomado de: Tablas en HTML (htmlquick.com) 

https://www.htmlquick.com/es/tutorials/tables.html


6) Manejo de formularios en HTML, realizar un ejemplo

Un formulario es un conjunto de controles (botones, cajas de texto, casillas de verificación, botones radio, etc) que permiten al usuario introducir datos y enviarlos al servidor web para su procesamiento.

<form action="ejemplo.php" method="get"> 

        <p>Nombre: <input type="text" size="40"></p> 

        <p>Año de nacimiento: <input type="number" min="1900"></p> 

        <p>Sexo: 

             <input type="radio" value="h"> Hombre 

             <input type="radio" value="m"> Mujer 

         </p> 

         <p> 

             <input type="submit" value="Enviar"> 

             <input type="reset" value="Borrar"> 

          </p> 

</form>

Este código daría como efecto el siguiente formulario: 

Tomado de: Formularios. HTML. Páginas web HTML y hojas de estilo CSS. Bartolomé Sintes Marco. www.mclibre.org

https://www.mclibre.org/consultar/htmlcss/html/html-formularios.html


Ver más explicaciones sobre HTML


Horario de clases


Formulario

© 2020 YUSEP RUIZ | Todos los derechos reservados
Creado con Webnode
¡Crea tu página web gratis! Esta página web fue creada con Webnode. Crea tu propia web gratis hoy mismo! Comenzar