HTML
Es importante saber que HTML no es un lenguaje de programación.
HTML es un lenguaje de marcado estandar para construir páginas web.
Este lenguaje de marcado ha evolucionado muchísimo con los años, sin embargo, aunque encontramos otras herramientas para crear un sitio web, la estructura básica de HTML se mantiene gracias a su estandarización, permitiendo su evolución hasta el momento.
Cuando conocí HTML a finales de los 90 del siglo pasado, no había escuchado PHP o CSS, y si, se escuchaba, eran sólo rumores o ejemplos muy escasos. Así que antes de comenzar a aprender a utilizar HTML como base para crear tu página web, necesitamos conocer algunos conceptos con los que te encontrarás durante el proceso.
Nota:
Esta página estará en constante actualización. Así que te recomiendo estar al pendiente de los cambios.
Contenido
El Contenido es lo más importante en un sitio. Desafortunadamete la mayoría de los usuarios están acostumbrados a no leer.
Con el lanzamiento de los smarthphones el dar un click para resolver cualquier problema, ha logrado que se deje de leer alguna instrucción. Se piensa que con un botón, la solución está más cerca.
Algo parecido está sucediendo con las aplicaciones de voz. Estas herramientas han logrado que un dispositivo lea por nosotros lo que necesitamos saber. Incluso las instrucciones que antes se hacían con un botón están a nada de la extinción porque ya son sustituidos por una instrucción de voz y pronto será nuestra información biométrica la que indique cualquier acción que se necesite o se quiera realizar en nuestro medio inmediato.
Sin embargo, al acercar más las tecnologías a la percepción humana quizá permita al humano acercarse a la lectura del contenido de nuevo.
Sea un humano o una máquina, el contenido es lo más importante de un sitio porque es lo que el usuario buscará, y si es importante, ese contenido se transforma en una referencias hacia tu sitio web.
Encontramos sitios con datos, gráficas, videos, etc. que sintetizan contenidos extensos, pero la curiosidad humana permitirá auto-motivarse a leer lo que necesita y los creadores de sitios deben estár preparados sean humanos o Inteligencia Artficial.
Por ello la importancia de los Foros, Wikis o sitios Web especializados, a pesar de que los chats inteligentes son hoy la primera opción a pesar de sus grandes errores y sesgos.
Elemento
El Elemento en HTML es una pieza de un gran rompecabezas que necesitamos para crear una página web. El Elemento está contenido en una etiqueta de inicio y otra de cierre que facilita una estructura y referencia para los creadores de sitios web para aplicar Atributos, Propiedades, valores o herramientas complementarias.
¡Así de importante es cada elemento!
En cada tema cuando se haga referencia a cada Elemento, quizá sea confuso al principio porque en los ejemplos se escribirán Etiquetas pero es importante que sepas que la Etiqueta es sólo una de muchas utilidades que tendrá cada Elemento.
Cada tema se dividirá por Elemento por Atributo, Propiedad y Valor con el que se relacione.
Etiqueta
Imagina que un Etiqueta es una bolsa y en cada bolsa contendrá todo lo que se puede realizar el Elemento incluido. Saber si ese Elemento usará un Atributo, Propiedad o Valor particular o compartido con otro Elemento contenidos en otras bolsas llamadas Etiquetas
Las Etiquetas son aquellas que delimitan el Contenido. Comienza con un < (menor qué), El Elemento y > (mayor qué). Se vería de la siguiente manera:
<Elemento>
Después de la Etiqueta agregamos el contenido, por ejemplo:
<Elemento>Mi contenido
Por último, agregamos la etiqueta de cierrecon un < (menor qué) / (una diagonal), El Elemento y > (mayor qué). Entonces quedaría de la siguiente manera:
<Elemento>Mi contenido</Elemento>
Estas dos Etiquetas, la de inicio y la de cierre, nos permite saber qué pasará con el Contenido entre las dos Etiquetas.
Es importante saber que hay Elementos que no necesitan una Etiqueta de cierre. Sólo se coloca la Etiqueta de Inico.
Estas etiquetas conforman un Elemento Vacío y su efecto se dará sólo en la línea que se ponga y hasta el final del ancho de la pantalla.
Nota:
Veremos una lista de etiquetas para Elementos Estandar y Etiquetas de Elementos Vacíos y su respectiva descripción de uso.
Atributo
Sabemos hasta el momento cómo usar un Elemento por medio de Etiquetas. Los < (menor qué) y los > (mayor qué) nos permiten agregar Atributos al Elemento.
Estos Atributos nos permitirán modificar el contenido que se encuentre entre las Etiquetas del Elemento.
Los Atributos son puertas de entrada y salida para modificar nuestro contenido.
Quizá no lo sabías, pero el internet en sus inicios eran sólo con texto. La manera de acceder a otro lugar de un sitio era a partir de hipertexto y las imágines era emuladas en el mejor de los casos con combinaciones de caracteres.
Por la razón anterior verás que se trabaja sólo con Etiquetas y sus Atributos para los resultados en nuestra páginaina web aunque en nuestro archivo html no sea visible.
Por ejemplo: las imágenes. Las Imágenes no serán visualizadas en el archivo html pero por medio del Elemento img utilizando el Atributo src mandamos a llamar la imagen y al abrir el archivo html en un navegador, mostrará la imagen asignada desde el archivo html.
Los Atributos son necesarios para muchos Elementos con el propósito de que el contenido no sea plano por completo.
Si tú también estás contruyendo una web desde cero y sin programas para realizarlo, te darás cuenta que aplicando Etiquetas, verás la transformación del contenido con cada Atributo que agregues. Conocerlas te permitirás aplicar a tu gusto muchas caracterísitcas para su funcionamiento.
Propiedad
Los Atributos nos permiten saber qué es lo que el Elemento puede realizar, sin embargo, quienes realizan el cambio son las Propiedades del Atributo. Las Propiedades podemos encontrarlas de dos formas:
La primera es el valor directo que pide el Atributo. Un ejemplo de ello es una ubicación en específico de algún archivo, imagen y otro recurso.
La segunda es ser el puente entre el Atributo y Valores para ser aplicado por el navegador al leer las Etiquetas del elemento.
Quizá suene un poco confuso, pero espero compartir ejemplos claros para entenderlo mejor.
Valor
Las Propiedades necesitan Valores para que el Atributo sepa qué hará con el contenido entre de las Etiquetas.
Los Valores dependerán de las necesidades de la Propiedad que sea usada por el Atributo. No podemos poner un Valor cualquiera para una Propiedad cualquiera. Si lo hacemos de esa manera no funcionará.
En éste sitio encontrarás una lista de Propiedades donde veremos los Valores con los que estén asociados.
Es imposible enumerar por el momento cada Valor, porque cada uno de ellos depende de la Propiedad que los mande a llamar. Debe tener su propio espacio para ser comprendido.
Por ejemplo: En el caso de la Propiedad color, los Valores que puede leer son en RGB, HEX o HLS. Después de darle los Valores, la Propiedad se lo entrega al Atributo quien se encargará de aplicarlo en la Etiqueta del elemento con el que estamos trabajando.
Comentario Final
Estos son los conceptos generales que debemos conocer para entender la estructura de un archivo html. Con lo que vimos hoy tendríamos de manera general una estructura como la siguiente:
<Elemento Atributo = Propedad: Valor>Mi contenido</Elemento>
Recordemos que estamos aprendiendo HTML. Cuando descubramos otros elementos relacionados con CSS, la estructura puede modificarse pero no cambiar en esencia.
