hand Inicio
hand JSBloqs
hand GutenBloqs
Qué?
nochedía

DESARROLLO WEB con
REACT y WORDPRESS

Apúntate a la newsletter (escribo algo de tanto en cuanto)
Wallpaper)

HTML básico

1800 palabras
7 minutos
July 5, 2020
cursoshtml5basico

La web está hecha de html, y la razón es porque escribir en html es fácil e intuitivo. En este curso vamos a dar un paseo rápido por lo más importante de este lenguaje

Prólogo

Vamos a hablar de html, un lenguaje con sus normas y constricciones (aunque no sea un lenguaje de programación) que resulta extremadamente sencillo (de ahí su hegemonía para estructurar contenido en internet)

Estrictamente, html es un subconjunto de los documentos tipo xml, por lo que entonces lo suyo sería hablar de xml y luego quedarnos con el html

Pero claro, el mismo creador de xml digo en su post XML Is Too Hard For Programmers lo siguiente:

Oddly enough, the problem isn't in writing the XML processor, which isn't that hard, look at the number that are out there. The difficulty is in using one.

Es decir, todo lo intuitivo que tenía html, de algún modo se perdió con xml

En realidad no se perdió en absoluto, pero sí es cierto que el tooling alrededor del xml ha resultado ser exageradamente caótico, tanto que el xml como herramienta de enviar información se ha visto superada por el formato json (que es simple JavaScript)

Pero de cualquier modo, el concepto de xml es el mismo que de html

  • Definir tags que se abren y se cierran
xml
<yoSoyUnTag>aquí va mi contenido</yoSoyUnTag>

Tan fácil como esto

Qué voy a aprender en este curso

Si no sabes html, necesitas saberlo, más que nada porque es como querer ir en bici sin saber qué es una bici

En este curso aprenderás básicamente qué es el html, para qué sirve y cómo funciona

Vamos allá

  1. Prólogo
  2. Introducción
  3. Elementos en Html
  4. La estructura de un documento HTML
  5. Algunos Extras

Introducción

Qué es Xml

Ya he dicho que el html es en realidad un subconjunto de un documento xml, pero qué es un documento xml?

Es un conjunto de textos donde diferenciaremos dos tipos de datos

  • Todo aquello que sean tags
  • Todo aquello que no sean tags

Un tag es esto:

xml
<tag>hola que tal</tag>

Es decir, cualquier cosa con la forma <...> y que luego se cierra con el mismo tag </...>

Con una norma:

  • Podemos tener tags dentro y fuera, pero no podemos "romperlos"

Esto es correcto

xml
<tag>hola <tag2>que</tag2> tal</tag>

Pero esto no

xml
<tag>hola <tag2>que tal</tag> pasaba por aquí </tag2>

Y esto tampoco

xml
<tag>este es el tag <tag> del que te hablaba</tag>

En este caso el xml está mal formateado porque tenemos un tag que se abre y no se cierra, pero y si queríamos escribir literalmente <tag> como texto?

Entonces deberíamos hacer esto

xml
<tag>este es el tag &#60; tag &#62; del que te hablaba</tag>

Tu escribes los caracteres &#60; pero luego en el navegador los ves transformados a <

La pregunta que seguramente pase por tu cabeza es

  • Tengo que escribir así cada vez que utilice caracteres que colisionan??

Si escribes en html puro, sí

Pero quién escribe en hmtl puro? Nadie, todo el mundo utiliza algún entorno de programación que se encarga de estas cosas

Bueno, con WordPress no se encarga del todo y tienes que utilizar funciones que te hacen este tipo de transformaciones

Argumentos

No sólo de tags vive el xml, también podemos definir argumentos dentro de los tags

xml
<saludo animo='muy bueno!'>hola</saludo>

De qué nos sirven estos argumentos? En xml de nada más allá de organizar nuestra información (que ya es mucho)

Qué es Html

Un documento html es simplemente un documento xml con una serie de tags predefinidos y concretos

En html sólo puedes utilizar una serie de tags específicos

Y en html sólo puedes utilizar una serie de argumentos específicos

Y a diferencia de xml, tenemos una ristra de navegadores que todos más o menos interpretan de la misma manera esta serie de tags y argumentos predefinidos

La diferencia entre xml y html, es que con xml no hay normas más allá de la definición de los tags, mientras que con html tienes una lista concreta y específica de tags y de propiedades

A efectos prácticos el xml ha quedado como concepto ya que (creo que) nadie usa todo el tooling que en su momento existió (como el XSLT, la versión xml de css)

Pero su explosión sí que sirvió y mucho para mejorar las especificaciones de html

Elementos en Html

Y ahora sí, al grano, vamos a ver los tags más importantes dentro de la especificación de html5 (la última versión de html es la html5)

Y de hecho es en esta versión donde se incorporaron unos cuantos elementos nuevos con sentido semántico, es decir, que se utilizan esos tags no sólo como contenedores de información sino también para definir el tipo de información que contienen

Esto es importante por dos razones

  1. Cuanto más semántico sea un código, más fácil de leer nos resultará a nosotros, los humanos desarrolladores

  2. Y exactamente lo mismo, pero multiplicado, para ellos, los bots que escanean la web constantemente (casi todos de Google, seguro)

Y los bots son los que después nos darán un ranking para que nuestra web esté posicionada en los resultados de búsqueda, por lo que es crucial utilizar estos tags

Qué diferencia hay entre los distintos elementos de html?

Dos tipos de diferencias

  • Diferencias a nivel semántico, lo cual tiene incidencia en SEO

  • Diferencias a nivel de css de serie

Por ejemplo, un tag div tiene asociado la propiedad display: block, mientras que span tiene asociado display:inline

Todo esto lo podemos cambiar luego con nuestro css, pero lo suyo es aprovechar las características inherentes de cada tag (si es que tienen)

Tag <p>

El tag más omnipresente, el tag del párrafo, úsalo para todo tipo de texto y luego lo estilas con css

Por definición te da espacio por arriba y por abajo y a nivel de SEO es la manera semántica de tener texto

html
<p>hola que tal</p>

Tag <h1>

Para los títulos importantes, aquello que quieras destacar lo pones entre los tags <h1>

html
<h1>página de ensaladas</h1>
<p>mira esta ensalada!</p>

Y para otros titulares puedes seguir con los <h2> <h3> etc, donde el número indicaría (a nivel de SEO) importancia

  • Puedes poner todo un párrafo con estos tags?

Sí, todo lo que pongas aquí tendrá más importancia a nivel de SEO que lo que vaya entre <p>

  • Cuántos <h1> puedes poner?

Los que quieras, y no existe penalización SEO por hacerlo (en palabras del propio Google)

Tag <nav>

Tag semántico, es decir, una versión semántica de <div>

Aquí es donde deberíamos situar la especie de tabla de contenidos de nuestra página, algo que sirva para orientar al usuario para que sepa rápidamente cómo se estructura la página

html
<nav>- explicación sobre ensaladas</nav>
<h1>página de ensaladas</h1>
<p>mira esta ensalada!</p>

Tag <main>

Tag semántico, aquí pondríamos nuestro contenido principal, dentro de este elemento es donde debería ir toda la estructura de texto relevante para esa página

html
<nav>- explicación sobre ensaladas</nav>
<main>
<h1>página de ensaladas</h1>
<p>mira esta ensalada!</p>
</main>

Tag <aside>

Otra tag semántico, por si queremos definir una barra lateral con un menú

Más tags semánticos, aquí irá el contenido que presumiblemente se repita en todas las páginas, en el header normalmente el logo y menús, en el footer normalmente el contenido más secundario

html
<header>Suscríbete</header>
<nav>- explicación sobre ensaladas</nav>
<main>
<h1>página de ensaladas</h1>
<p>mira esta ensalada!</p>
</main>
<footer>Quien soy?</footer>

Tag <section>

Más madera semántica, aquí con una definición más abstracto, para separar el contenido en secciones

html
<header>Suscríbete</header>
<nav>- explicación sobre ensaladas</nav>
<main>
<h1>página de ensaladas</h1>
<section>
<p>mira esta ensalada vegetariana!</p>
<p>y esta segunda ensalada vegetariana!</p>
</section>
<section>
<p>y ahora mira estos viajes turísticos donde te sirven ensalada!</p>
<p>has visto mi enlace de afiliados?</p>
</section>
</main>
<footer>Quien soy?</footer>

Tag <a>

Elemento para enlazar, necesita el atributo href para saber dónde tiene que ir el usuario cuando haga click en el link

html
<a href="https://www.kuworking.com">kuworking.com</a>

Y si queremos que se abra en una pestaña nueva, le ponemos lo siguiente (el argumento target)

html
<a href="https://www.kuworking.com" target="_blank">kuworking.com</a>

Y en realidad son buenas prácticas añadir el siguiente atributo

html
<a href="https://www.kuworking.com" target="_blank" rel="noopener noreferrer">kuworking.com</a>

Tag <img>

Este tag se utiliza para imágenes, tiene el atributo src y no tiene previsto tener ningún contenido entre los tags

Cuando pasa esto, no necesitamos abrir y cerrar el tag con <tag></tag> , podemos utilizar un tag único con <tag />

html
<img src="/miimagen.jpg"></img>
<img src="/miimagen.jpg" />

También tiene el atributo opcional alt, necesario para hacer la imagen más accesible (es el texto que aparece si la imagen no carga o si el usuario va con ayudas para por ejemplo limitaciones visuales)

html
<img alt="esto es una imagen de loquesea" src="/miimagen.jpg" />

Ojo, si la imagen es decorativa, hay que poner un alt vacío (sin contenido), pero hay que ponerlo para que el usuario (invidente) sepa que allí hay una imágen de la que no debe preocuparse

Tag <form>

El último de los tags, un elemento que lo utilizaremos sí o sí seguro, el formulario <form> con elementos hijos (aunque también podemos utilizarlos de forma independiente) como los <input>, <textarea> o <button>

Por ejemplo

html
<form>
<input />
<textarea />
<button />
</form>

Pero así poca cosa hacen

Para hacerlos útiles necesitamos identificarlos (para luego acceder a ellos con JavaScript), esto lo hacemos con el atributo id, y también añado otros atributos que vienen al caso

html
<form id="myForm">
<input id="myInput" type="text" />
<textarea id="myTextarea" rows="5" cols="20" />
<button id="myButton" />
</form>

El atributo type indica qué tipo de contenido recibirá ese elemento, y los atributos rows y cols definen las dimensiones del textarea

También tenemos el atributo placeholder para definir el texto de inicio

html
<input type="text" id="myInput" placeholder="escribe aquí tu comentario" />

Aunque lo más aconsejable es, pongamos placeholder o no, poner al lado del input un texto descriptivo de lo que esperamos que el usuario haga en ese input (algo que lo vincularíamos con los tags <label>, pero que no explicaré aquí)

Comentario sobre los atributos class e id

Estos son dos atributos especiales porque se los podemos poner a todos los tags que queramos

Son muy útiles para poder trabajar con estos elementos tanto desde JavaScript como desde css, con una diferencia importante:

  • el atributo id es exclusivo
  • el atributo class no lo es

Es decir, no podemos repetir el atributo id ya que está definido para que éste sea único

Con la class no hay problema, podemos definir 6 elementos con la misma class si queremos, y esto es útil para poder definir luego en css una class y que esa estile a todos los elementos que la tengan como atributo

html
<p id="saludo" class="importante">hola</p>
<p id="pregunta" class="importante">que tal</p>
<p class="menos-importante">cómo vamos?</p>
<p class="menos-importante">la familia?</p>

Comentario sobre las mayúsculas y las minúsculas

A todo esto, recuerda que en programación siempre (o casi) estamos con el case sensitive

html
<P>hola</P>
<p>hola</p>

El primer ejemplo NO es html (la P es mayúscula!), y el segundo sí lo es (la p es minúscula)

Lo mismo con <textarea /> que es válido y <textArea /> que NO es válido

La estructura de un documento HTML

Recordemos que mientras un documento xml no tiene casi estructura, un documento html pierde esa libertad y necesita de ciertos elementos para que todo el mundo los entienda

Pero la estructura no puede ser más simple:

html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mi página extraordinaria</title>
</head>
<body>
<p>cómo vamos</p>
</body>
</html>

La primera línea

html
<!DOCTYPE html>

no sirve para nada excepto que es necesaria, pero si se volviera a crear el lenguaje html (de cero) se eliminaría (es un vestigio histórico)

Luego el documento en sí se define por el tag <html>...</html> y dentro de este necesitamos dos elementos más, el <head>...</head> y el <body>...</body>, y con esto vamos servidos

Eso sí, hay una serie de elementos opcionales que no hay motivo para obviarlos, uno es el charset

html
<meta charset="utf-8" />

Que define los caracteres que utilizaremos en nuestro documento, nunca (digo yo) tendrás que utilizar otro set que el utf-8, así que también podríamos olvidarnos

Y luego el título

html
<title>Mi página extraordinaria</title>

Que nos definirá el texto que nos sale en el navegador, no en la página web sino en la pestaña (literalmente) del navegador

Luego, todo el contenido de la página web en sí es todo lo que vaya dentro de los tags <body>

Algunos Extras

Y para terminar, detalles menores pero importantes que vale la pena comentar por si acaso

Comentarios

Se puede comentar el html con la estructura <!--> ... <-->, esto quiere decir que todo lo que pongamos en esta estructura el navegador lo ignorará

He dicho que lo ignorará, pero no lo borrará, simplemente el navegador no lo interpretará y punto (pero la información estará allí para quien quiera mirar el código de esa página)

Espacios en blanco

Los espacios en blanco y las nuevas líneas

Los espacios en blanco son uno, no hay más, no puedes poner 3 espacios en blanco (puedes, pero se interpretarán como uno solo)

Si quieres más espacio entre dos palabras tienes que estilarlo con css

Y las nuevas líneas no existen

Si queremos una nueva línea necesitamos utilizar el elemento <br />

Pero quién usa este elemento? Poca gente, lo suyo es estilar los espacios entre bloques y los saltos de línea organizando el contenido en bloques que ya se separan entre sí

html
<p>mi texto primero</p>
<p>mi texto segundo, que ya se separa del primero</p>
<br />
<p>No necesito poner lo de arriba</p>

Todo esto, traducido, quiere decir que si tengo un código html así

html
<div>y ahora
sorpresa el elemento SPAN</div>

El navegador verá lo mismo a que si hubiera escrito

html
<div>y ahora sorpresa el elemento SPAN</div>

Ya lo tenemos, html básico para que sepamos lo mínimo para poder seguir sin agobios

🙋‍♂️

Qué tal el curso?

👌 Bien 🙌🙌
👍 Bien, pero algunas cosas podrían explicarse mejor 😬
🤷‍♂️ Da por sentadas demasiadas cosas 😒
🤷‍♂️ A ver, hay poca chicha 😬
🤷‍♂️ Los ejemplos no son muy claros 🙇‍♂️
🤷‍♂️ No se entiende, está mal escrito 👎
✍️ Hay errores, revísalo en cuanto puedas 🙏
Enviar Feedback ✍️
El texto está en blanco!
Gracias por enviarme tu opinión
👍

Si quieres explorar más cursos y más entradas en el blog, los tienes todos en la página principal, y si el contenido te ha ayudado dame las gracias por ejemplo por twitter con este enlace 👍

Privacidad
by kuworking.com
[ 2020 >> kuworking ]