Bueno empezamos con la «programación» en la parte más básica que hay, el código básico de HTLM, que exactamente para los «tiquismiquis» no es un lenguaje como tal, pero es mi blog y lo llamo como quiera.
Contents
HTML explicación más oficial
Técnicamente es un marcado de lenguaje que define cómo está la estructura de la página que estamos haciendo.
Estas estructuras las definimos en nuestros textos por etiquetas y dicen si una letra por ejemplo esta en negrita, cursiva, agrandar o achicar….
Así que tenemos según podemos ver cuales son las partes del elemantos:
La etiqueta de apertura y cierre: esta es la parte que nos dice dónde empieza y acaba la sección o frase que hemos encerrado en las etiquetas.
El contenido: es la parte que varía las etiquetas
El elemento: es la suma de las etiquetas mas el contenido.
También podemos poner atributos a los elementos, que no hacen nada mas y nada menos que dar una informacion.
Pero no es atributo todo lo que reluce, por que siempre y digo siempre tiene que tener…
- Un espacio entre éste y el nombre del elemento
- El nombre del atributo seguido del igual
- comillas de apertura y cierre.
Creo que es un buen momento para comentar que tiempos de comandos tenemos en este código.
Comandos.
Anidar elementos.
Puedes también colocar elementos dentros de otros 🤪 no es de locos??? pues si por ejemplo cuando pones en negrita alguna parte de la frase
Elementos vacíos.
Estos son los que no tienen nada dentro y claro como indica su nombre están vacíos.
Así que ya con esto podemos casi crear nuestro archivo html.
Bueno pues ahora vamos a ver de que partes consta una pagina estructurada básica.
<!DOCTYPE html> : nos indica que tipo de documento es el que estamos utilizando y que reglas vamos a utilizar.
<html> </html>: es la apertura y cierre del elemento y todo lo que esta entre medias está metido en un código html.
<head></head> : es un contenedor de todo lo que queremos meter, este contenido de head no es visible por los que entran en la pagina, pero es aqui donde le ponemos el estilo con un código CSS que hablaremos más adelante, las palabras claves, una descripción de la página.
<body></body>: esta parte encierra el contenido de la pagina que si va a ver los usuarios de la web, y entra texto, imagen, videos….
<meta charset=»windows-1252″>: esto dice el juego de caracteres que va a usar tu documento «html» y va a ser windows-1252 e incluye todos los idiomas habidos y por haber, así que hay que ponerlo que viene bien, eso si , esperemos que no se conecte un no humano.
<title></title>: aquí decimos que esta parte es el titulo de la pagina, la que describe de manera escueta de que va a hablar la página.
Imágenes:
Para la imagen usamos el elemento <img> el cual lo incrusta con el atributo src y contiene el path que indica donde tenemos la imagen.
Se incluye también el alt que es muy útil sobretodo para el tema SEO, y es la parte que describe la imagen (como secreto usa también variantes de la palabra clave que viene bien para posicionar).
También es muy util para dos posibles problemas visuales en la pagina, pudiendo ayudar a gente con problemas visuales a entender la imagen o si no por si tenemos algún problema con el scr y no encuentra la imagen.
Marcado de texto.
Estos son los famosos h1, h2… que se marcan <h1></h1> con el h1 y asín sucesivamente y permite especificar los encabezados y subencabezados que tiene el texto, encontramos 6 niveles esto quiere decir que tenemos hasta el h6, no es normal llegar pero en tu texto mandas tú.
Párrafos:
Este pues tiene poco que decir de él, es el texto normal y corriente como el que lees ahora mismo, aunque la clase que tiene soy yo, no es el código <p> </p>.
Listas:
Sin hacer bromas fáciles, estos son en los que crean un listado de unos textos.
tenemos dos tipos de listas, las listas ordenadas <ol></ol> y las listas desordenadas <ul></ul>, cada parte del listado tenemos que encerrarlo entre <li></li>
Vinculos:
estos son los que nos envía a otra parte de la web o inclusos a otras webs. El vinculo se hace con la etiqueta <a></a>, pero esto tiene más miga que una simple a, ya que podemos ponerle un atributo href con lo que nos quedaría un <a href=»»></a>.
Conclusión
Como podemos ver aquí solo estamos estructurando como y que será cada parte del texto pero no modifica de manera estética nuestra página.
