HTML un Lenguaje de Internet

Introducción a HTML, CSS y JavaScript

Voy a explicar primero que es HTMLy su formato básico.

Sabemos que estamos en la versión 5 de HTML que difiere de las primerasversiones mantiene su diseño original de etiquetas o tags, si bien mantiene los elementos principales de envío de peticiones desde formularios o la capacidad de seguir enlaces. Esas fueron las principales funcionalidades de los primeros navegadores que con el tiempo fueron agregando funcionalidades nuevas tanto gráficas como de interacción en la parte de la aplicación cliente, es decir, el navegador.

Elemetos primigenios como <font> <table> y otros están en desuso.

Creo que mejor que pasar por todas las versiones es, sabiendo ya de donde viene, ponerse con la última que es la que se usa en la web moderna.

27/02/2022 03:16:01 Update:03/03/2022 16:24:05

El principiante debe saber que HTML no es un lenguaje de programación. Es en realidad un lenguaje interpretado por el navegador para que este realize funciones como enviar formularios o hacer presentaciones desde el navegador, que interpreta los valores de los campos de cada tag

El navegador web interpreta el html dando opciones y formato a los documentos .html

Historia

El HTML fué creado para simplificar y mejorar la retransmisión de datos en Internert

El proceso cliente servidor es el siguiente:

El cliente hace una llamada (petición) a la url del servidor

y este devuelve una cantidad variable de datos al navegador del cliente, que es el encargado de interpretarlo. Antes de existir HTML los datos se recibían en texto plano y seguir los enlaces era tarea tediosa por lo que surgio la idea de crear un formato que permitiese desde una interfaz gráfica (Browser) haciéndolo todo mucho más fácil. Siendo los hipervículos su primer avance, dando lugar después a formularios, hasta llegar a donde nos encontramos hoy.

El científico que se puso con la idea fue Tim Berners Lee , quien
es considerado como el inventor de HTML, desde su laboratio del CERN en Suiza.

El 12 de noviembre de 1990 publicó un informe detallado sobre su proyecto, que ya se encontraba en un avanzado "estado de gestación". Así, tras un rápido desarrollo final de poco más de un mes, el 20 de diciembre de ese año Berners-Lee puso en marcha el primer servidor web y la primera página web del mundo.

¿Dónde se encuentra el código HTML?

HTML es enviado por el servidor al cliente y se encuantra en archivos con la extensión .html o es generado por las aplicaciones de parte del servidor. Por convención, los servidores sirven por defecto al llamar al dominio, el archivo con el nombre index.html

Como lenguaje interpretado que es, HTML tiene un formato específico y unas reglas definidas como standard que cumplen la mayoría de los navegadores a la hora de interpretarlo.

El formato de un documento html simple es...

<html>

<head>

<title> Titulo </title>

</head>

<body>

Contenido del ducumento

</body>

</html>

Puedes guardar este código en un archivo con extension .html y abrirlo en el navegador para ver el resultado.

Antes de explicar nada más veamos el mismo código mostrando un unlace tipo hipervínculo.

<html>

<head>

<title> Titulo </title>

</head>

<body>

Contenido del ducumento <br>

<a href="https://www.miwebamiga.es">Ir a mi web amiga</a>

</body>

</html>

Podríamos decir que HTML sirve para dividir en partes diferenciadas el contenido enviado por el servidor para una mejor comprensión y usabilidad por parte del cliente, capacidad que se ha ido ampliando con el tiempo con la aparición de javascript, css y ajax.

Podríamos decir que HTML contiene elementos.

CSS define los estilos gráficos de esos elementos.

Javascript realiza interacciónes entre el navegador y el usuario y provee de capacidades gráficas y dinámicas.

y Ajax es Javascript que realiza peticiones al servidor de forma asíncrona.

Pero sigamos con HTML

HTML tiene dos tipos de formato de etiquetas:

1- Simples - el mismo tag abre y cierra, por ejemplo:

El tag único <br> realiza un salo de línea en la vista del documento por el navegador.

2- Dobles - El tag se divide en uno de apertura a continuación un texto y luego el cierre, por ejemplo

Los TAG se encierran entre los símbolos < y > como habrás comprobado. Y el contenido es lo que los tags delimitan entre > y <

Los tags más importantes:

Son aquellos que realizan la función de recabar información de un usuario, seguir enlaces, insertar otros elementos como iframes o video.

1- Formularios

Un formulario es un tag doble qu encierra tags simples, estos son de tipo input , son entradas de texto y botones. El tag del formulario es <form></form>

A día hoy con la evolución de los navegadores el tag <form> se usa menos ya que internamente se accede al valor de los inputs a través de javascript

El tipo del input se define en el campo type del tags correspondiente, no todos los tags tienen los mismo campos.

Los tags de tipo input pueden ser

radio

checkbox

select

text

textarea

hidden

button

submit

veamos un código simple de interacción de javascript con html

HTML

Resultado

Con este código el navegador muestra un campo input tipo text y un botón con el texto Pulsar Botón impreso. Al pulsar el botón, Javascript muestra un aviso alert mostrando el texto entrado por el usuario, que será uno de los valores que podremos enviar al servidor como una petición. Más adelante veremos como enviar datos al servidor usando javascript, ahora volvamos a los formularios y nada mejor que ver un ejemplo.

HTML

</form>

Resultado

Al hacer click en el botón vemos que se abre en una ventana nueva _blank la dirección contenida en action examples/forms.php que recibe dos variables por el método GET, una oculta al usuario con el valor establecido, y la otra con el valor del campo de texto entrado por el usuario.

Podemos observar que se pueden ver los valores enviados en la barra de direcciones del navegaros, esto es porque hemos utilizado el método GET, si hubiéramos usado POST estas habrían sido enviadas en el cuerpo del mensaje, la diferencia entre ambos métodos es que POST acepta mayor capacidad de datos ya que no se ve restringido a la longitud que por GET suele estar limitado a 255 caracteres mientras que POST no tiene ese limite.

Veamos ahora el ejemplo de un hipervínculo con texto de enlace

HTML

<a href="/examples/forms.php?variable1=UN VALOR&VAR2=otrovalor" target="_blank">Haz Click Aquí</a>

Resultado

Haz Click Aquí

Vamos ahora a crear un div dando formato a su contenido con css

HTML

Soy un Texto <br>

dentro de un DIV

</div>

Resultado

Soy un Texto
dentro de un DIV

El tag div significa division lo que hace es crear una división con contenido dentro de un documento HTML. Se le pueden dar múltiples propiedades con css que es lo que va dentro del atributo style, que puede ir dentro del tag o referenciarlo usando los atributos class o id que veremos más adelante.

Para insertar una imagen hacemos uso del tag img de la siguiente manera

HTML

Haz Click sobre la Imagen

<br>

Resultado

Haz Click sobre la Imagen
Hazme Click

Seguimos combinando tags html con JavaScript en el evento onclick

HTML

<a href="javascript:void(0)" onclick='

if(confirm("¿Me confirmas?")) {

window.open("/examples/forms.php?VX=CONFIRMADO","_blank","width=400,height=320,0,0,0")

} else {

alert("Vuelve a clikar para confirmar")

}'>Hazme un Click</a>

Resultado

Hazme un Click

Como podemos comprobar es bastante fácil de usar, pero a medida que las necesidades crecen, las cosas se complican un poco más, pero no demasiado si tienes tiempo y te gusta.

Veamos ahora como insertar un video, para ello utilizamos el tag <video></video>

HTML

Resultado

controls indica si el reproductor muestra la barra de controles por defecto, tambiés acepta loop que reproduce el video en bucle volume y autoplay, entre otros. Para poner una imagen previa a la reproducción del video es usa el atributo poster="ruta a la imagen"

Veamos ahora el tag span que es utilizado para designar secciones de texto, a diferencia de div, se muestran consecutivos sin salto de linea entre ellos, aunque no siempre, suelen ir dentro de un div. declarando sus propiedades desde fuera del tag usando el atributo class y las etiquetas para css <style>

HTML

.clase_x{

font-size:18px;

font-family:"paladino linotype";

margin:5px;

padding:2px;

border: solid 1px red;

background:gold;

color:#1010de;

}

</style>

Resultado

Un SpanOtro Span

Como se puede apreciar, luego de delarar dentro de la etiqueta style la clase definida como, en este caso clase_x, cualquier tag, ya sea div o span u otro al que se le añada el atributo class referenciando a dicha clase, este tag hereda los valores declarados dentro de <style> y </style>, que es CSS.

Css puede ser declarado en un archivo externo y utilizarse invocándolo, preferentemente desde dentro del tag <head></head> que vimos al principio en la estructura básica del documento HTML

Para ello se usa la etiqueta simple <link> de la siguiente manera

<link href="http://servidor.com/archivo.css" rel="stylesheet" type="text/css">

A partir de ahí cualquier elemento dentro del documento referenciados dentro del archivo css heredarán el valor de los atributos que se hubieran definido dentro del css, fuente, color,márgenes, posición, etc..

Para insertar otros documentos dentro del principal usamos el tag <iframe></iframe> , veamos como