Mis primeros conocimientos para la creación de Páginas Web. Pte. I

Soy un autodidacta, y me gusta cacharear (termino usado en mi país "Colombia", para describir alguien que prefiere el uso intuitivo y experimental, al seguimiento metódico de un curso que sin ánimo de demeritar, regularmente enseña la teoría, y aunque no siempre, regularmente se queda corto a la hora de la práctica.).

Sin embargo aunque pretencioso pretendo por medio de esta serie de artículos, acortar la curva de aprendizaje, de las tecnologías utilizadas actualmente (año: 2020), para la creación de páginas web.

Aunque existe una cantidad impresionante de información al respecto, no he encontrado artículos que no solo enseñen html, si no que además en el mismo proceso, muestren en paralelo conocimientos de diseño y animación (CSS), interacción con el front-end (nombre usado para definir lo que se ve en pantalla), usando javascript (JS, jQuery, ....etc.) y php en el back-end (nombre usado para determinar lo que sucede en caso de una interacción con un elemento u objeto).

Para ello si no existe ningún conocimiento al respecto, vamos a iniciar con el glosario o la definición de términos que son utilizados.

HTML: se trata de la siglas que corresponden a HyperText Markup Language,
es decir Lenguaje de Marcado de HiperTexto en español.
Con HTML puedes crear tu propio sitio web.
ya que es el lenguaje de marcado estándar para crear páginas web.

CSS (Cascading Style Sheets = Hojas de estilo en cascada):
Es un lenguaje de diseño gráfico para definir y crear la presentación o estilo de un documento estructurado escrito en un lenguaje de marcado.

HTML describe la estructura de una página web, para lo cual utiliza una serie de etiquetas.
Los elementos HTML le dicen al navegador cómo mostrar el contenido, gracias a los atributos.
Los elementos HTML están representados por etiquetas
Las etiquetas HTML definen piezas de contenido como "encabezado", "párrafo", "tabla", "tipo de contenido", "idioma", "inclusión de archivos externos"  etc.
Los navegadores no muestran las etiquetas HTML, pero las usan para determinar como representar el contenido de la página.
Cabe destacar dos tipos de etiquetas:

1. De inicio y cierre como <div style="background-color: white; color: black">Contenido</div>, donde el contenido esta dentro de las etiquetas <div> y </div>, que indican al navegador donde incia y donde termina el contenido a mostrar como elemento div (El elemento div es una división con un contenido dentro de las etiquetas de inicio y cierre ). Se puede ver el atributo style y entre comillas esta definiendo propiedades css que determinan el color de fondo y de texto.
2. O con etiqueta de auto cierre como <img src="https:\sitio.com\link.jpg" />

Sigamos con el glosario, ya que hay que tener claridad sobre que son:

Elementos, Etiquetas y Atributos.

Elemento:

Un elemento tiene una etiqueta que lo define, esta etiqueta puede o no tener unos atributos.

Muchos consideran que no hay diferencia entre un elemento y una etiqueta (label en ingles).

Sin embargo hay ciertos detalles que cabe anotar.

Etiqueta o Label en ingles:

Una etiqueta es el nombre que identifica el tipo, o clase de elemento que le entregara la

información al navegador para poder saber como tratarla y/o representarla en el mismo.

Elementos y etiquetas:

Todo elemento HTML, tiene una etiqueta, sin embargo la etiqueta no posee atributos, ni contenido.

Un elemento se basa en una etiqueta estándar o una que podemos definir.

Solo hay que escribir un estilo, la etiqueta es el nombre que puede estar definiendo una sección o una clase.

Las etiquetas tipo sección se declaran con un nombre directamente y entre corchetes se definen las características que determinan los atributos que tendrá el elemento.

Cuando definimos una etiqueta para una clase, estas se declaran con un punto antes del nombre, en lo demás son exactamente iguales.

Así pues se nota que una etiqueta es una convención (propia o externa), que en conjunto con sus atributos y en caso de usar una clase, conforman un elemento.

Hay elementos que requieren que el contenido se encuentre dentro de la etiqueta de inicio y fin del elemento.

Ejemplos:

Elemento HTML: <html> y </html> son las etiquetas que indican el inicio y fin del contenido de la página.

Elemento head: <head> y </head> son las etiquetas que indican el inicio y fin del encabezado de la página.

Elemento body: <body> y </body> son las etiquetas que indican el inicio y fin del cuerpo de la página.

Y hay otros elementos que contienen atributos que determinan su contenido y forma, y se cierran sobre si mismos.

Los cuales hemos denominado elementos de auto-cierre.

Ejemplos elementos de auto-cierre:

Elemento img: <img src="https:\sitio.com\link.jpg" width="500px" height="auto" /> en este elemento, el atributo src determina el contenido, que es la referencia al lugar donde esta la imagen a mostrar, los atributos width y height determinan el ancho y alto respectivamente, img es la etiqueta que admite x atributos.

Elemento link: <link rel="stylesheet" href="clg.css"> Este elemento se usa en la head o cabecera, para indicar al navegador donde encontrar los estilos, que contienen los atributos para determinar las caracteristicas con que se mostraran los elementos.

Elemento meta: <meta name="viewport" content="width=device-width, initial-scale=1"> Este elemento se usa en la head o cabecera, y tiene multiples usos según los atributos asignados, en este ejemplo definimos la escala incial en 1 = 100%, para el uso de las unidades vh y vw.

Ejemplo Practico: 

Dentro de una página se pueden declarar estilos usando la etiqueta style que es del tipo 1 "De inicio y cierre" como explicaba anteriormente no es un elemento, es una etiqueta.

Etiqueta body

<style>

   body {

                background-color:black;

                color: white;

   }

</stile>

Otra etiqueta que se utiliza mucho es la que hace la inclusión de un archivo, con unos estilos cuyos atributos se utilizan para mostrar la página con un diseño personalizado. Ya la vimos en el Elemento link.

Esto es mucho más practico que definir los estilos en cada página.