HTML: ¬ŅQu√© es y como se relaciona con el CSS y JavaScript?

Sin duda, la digitalizaci√≥n de las empresas est√° cambiando el mercado como lo conocemos. Pues, este proceso imparable est√° transformando todos los sectores a un ritmo cada vez m√°s acelerado. Esto puede darse gracias a las nuevas estrellas del mercado, los programadores. Siendo los especialistas en HTML, Python, y JavaScript, entre otros, como los m√°s cotizados y buscados en el mercado.

Abarcar todo sobre la programaci√≥n llevar√≠a demasiado tiempo, as√≠ que hoy solo nos centraremos en el lenguaje HTML. As√≠ que haremos una peque√Īa analog√≠a para ver que hace este lenguaje.

Siempre qu√© debemos encarar un nuevo proyecto, siempre tenemos qu√© arrancar por el principio. ‚ÄĒ Por ejemplo, cuando queremos construir una casa. Para hacerla correctamente, primero debemos colocar la estructura, luego le podemos pintar las paredes, y finalmente los mubles y funcionalidades.

Este ejemplo se asemeja mucho al lenguaje de programación, siendo el HTML la estructura, el CSS la pintura, y el JavaScript las funcionalidades.

Por esta razón el HTML es el lenguaje de programación es fundamental del mundo web. Pues, este lenguaje es la base de todas las páginas de internet, y conocerlo es crucial para poder entender el funcionamiento de las mismas. En definitiva, el HTML, es una valiosa herramienta.

Conocer el correcto funcionamiento de nuestras herramientas pueden brindarnos una ventaja competitiva frente a quienes no lo hacen. Y a su vez, podrían ayudarnos a generar oportunidades para emprender.

¬°Sin m√°s qu√© a√Īadir, vamos a por el post!.


¬ŅQu√© es el HTML?

El HTML es un lenguaje de programación ampliamente utilizado en el mundo web. Sus siglas en inglés significan Hypertext Markup Language, el cual, podría significar Lenguaje de marcaje de hipertexto.

Volviendo a la creaci√≥n de p√°ginas web, para ello, el lenguaje HTML utiliza dos tipos de contenidos, los tags ¬ęmarcadores¬Ľ y los atributos. Estos elementos son, en definitiva, lo qu√© nos va a mostrar c√≥mo se va a ver un contenido web en el navegador.

Acá es donde entra el hipertexto, el cual refiere a un texto con bloques interconectados, que contienen párrafos, imágenes, y demás multimedia. Pero, también estos hipertextos pueden tener rutas a otros hipertextos, los cuales, son conocidos cómo hipervínculos, hyperlinks, o simplemente links.


¬ŅC√≥mo nace el HTML?

El origen de HTML se remonta a 1980, cuando el f√≠sico Tim Berners-Lee, trabajador del CERN propuso un nuevo sistema de “hipertexto” para compartir documentos. C√≥mo dato de color, Tim Berners-Lee tambi√©n es uno de los creadores de la World Wide Web.

En cuanto a los est√°ndares oficiales HTML son el HTML 2.0, el HTML 3.2, el HTML 4.0, el HTML 4.01 y el HTML 5.

El HTLM 5 es la √ļltima especificaci√≥n oficial y se espera que contin√ļe evolucionando a lo largo de los pr√≥ximos a√Īos. El XHTML, una forma m√°s avanzada del HTML que se supon√≠a iba a sustituir a este. Pero, pasaron cosas, y a d√≠a de hoy podemos considerar que ha quedado integrado dentro del HTML 5

Como podemos ver, el HTML pas√≥ por diversas versiones hasta ser lo qu√© es hoy. Gracias a este proceso, se convirti√≥ en la base para blogs, e-commerce, redes sociales y todo tipo de p√°ginas accesibles desde un navegador web.


¬ŅCu√°les son los elementos HTML que podemos usar?

Bueno, no vamos a ver todos en un post, porque nos llevaría demasiado tiempo, pero si veremos los principales elementos que competen a un blog.

Para ello, tenemos qué recordar qué los tags requieren ser identificados con signos: <tag>. Este es un ejemplo de marcador de apertura. Entonces, sí hay uno de apertura, cómo norma general, debe haber un marcador de cierre. El cual utiliza una barra, cómo se puede ver en este ejemplo: </tag>.

Ahora toca ver unos ejemplos qué podemos utilizar en blogs.

1. P√°rrafos

El tag <p> debe abrirse y cerrarse para definir un p√°rrafo. El p√°rrafo es aquel texto se encuentra conformado por un conjunto de oraciones.

<p>Ejemplo de P√°rrafo con sus respectivas etiquetas de apertura y cierre.</p>

2. Encabezado o Heading

Los heading tag, encabezados, o simplemente etiquetas h, son tags qué ayudan con la jerarquía de las secciones del texto.

Estas etiquetas H, tienen distintas jerarquías qué van desde la H1, hasta la H6. Siendo la H1 el título principal del contenido, y normalmente hay uno solo por URL; el H2 es el subtítulo principal; el H3 es el subtítulo secundario; las H4, H5, y H6, son etiquetas menores qué tienen poca relevancia a nivel SEO, pero sirven para organizar los textos.

Veamos un ejemplo de p√°rrafos y encabezados:

<h1>Título principal</h1>

  <p>Primer párrafo que sirve cómo introducción.</p>

<h2>Primer subtitulo H2</h2>

  <p>Primer párrafo del subtítulo H2</p>

  <p>Otro p√°rrafo del primer H2.</p>

<h2>Segundo título H2</h2>

  <p>Primer párrafo del segundo subtítulo.</p>

  <p>Segundo párrafo del segundo subtítulo.</p>

<h2>Tercer título H2</h2>

  <p>Párrafo del tercer título.</p>

 <h3>Subtítulo menor del tercer título H2</h3>

   <p>Parágrafo del subtítulo H3</p>

 <h3>Otro subtítulo menor del tercer título H2</h3>

   <p>Último párrafo del subtítulo</p>

3. Im√°genes

El marcador de las imágenes es uno de esos tags que no requiere una etiqueta de cierre. Además, tiene la particularidad de poder utilizar un atributo obligatorio, conocido cómo <src>, y otro accesorio <alt>. Entonces, la Syntax de las imágenes son algo así:

<img src="url" alt="alternatetext">

Ahora veremos un ejemplo solo con el atributo <src>, y otro con el atributo <src> y el <alt>.

<img "src=https://tupacbruch.com/wp-content/tupacbruch.jpg">

El cual puede ¬ęy deber√≠a¬Ľ tener una atributo alt, qu√© sirve para ponerle un nombre alternativo a dicha imagen.

<img src="https://tupacbruch.com/wp-content/tupacbruch.jpg" alt="tupac bruch home">

4. Ancla o enlace

El tag de anclaje define un enlace a otra p√°gina. El atributo ¬ęhref¬Ľ determina el destino de este link.

<a href="https://tupacbruch.com/google-seo-marketing/">50 Elementos a comprobar en un checklist SEO</a>

5. Lista ordenada

Se muestra una lista ordenada con elementos numerados. Cada elemento debe estar etiquetado con el tag <li> (elemento de la lista), la cual debe ser aclarada s√≠ est√° ordenada <ol> o desordenada <ul>.

<ol>
  <li>SEO on page</li>
  <li>SEO off page</li>
  <li>Contenido</li>
</ol>

6. Lista desordenada

El tag de lista desordenada muestra los elementos como puntitos sin orden, también conocidos cómo bulletpoints.

<ul>
  <li>SEO Black Hat</li>
  <li>SEO Grey Hat</li>
  <li>SEO White Hat</li>
</ul>

7. Tabla

El tag de la tabla muestra informaci√≥n en forma de filas y columnas. Dentro del tag <table>, usamos los tags <tr> para representar las filas, <th> para representar los encabezados y <td> para representar cada celda.

<table>
    <tr>
      <th>Nombre</th>
      <th>Apellido</th>
    </tr>
  
    <tr>
      <td>Lionel</td>
      <td>Messi</td>
    </tr>
  
    <tr>
      <td>Luis</td>
      <td>Su√°rez</td>
    </tr>
  
    <tr>
      <td>Ney</td>
      <td>Mar (?)</td>
    </tr>
  </table>

8. Comentarios en HTML <! ‚Äď ->

Usamos este tag para escribir alg√ļn comentario que ayude a comprender el c√≥digo.

Entonces, lo escrito entre los marcadores <! ‚Äď -> no se mostrar√° al usuario, y sirve solo para dejar una anotaci√≥n por s√≠ necesit√°s recordar algo en el futuro. Esto es muy √ļtil en especial cuando m√°s de un desarrollador trabaja con el mismo c√≥digo.

<p>O HTML es fundamental para qui√©n desee crear un sitio en la web.</p> <!‚Äď Este es un p√°rrafo en HTML ‚Äď>.

9. Línea de quiebre

El elemento HTML line break o l√≠nea de quiebre se crea con el c√≥digo <br>. Este tag produce un salto de l√≠nea en el texto, el cual es √ļtil para escribir y generar un salto dentro del mismo p√°rrafo. Se usa mucho en poemas, direcciones, o donde se requiera de divisiones para esquematizar el contenido.

En este caso, utilicé una canción de Elvis que estoy tratando de tocar con la guitarra como ejemplo:

Love me tender, love me sweet <br>
Never let me go <br>
You have made my life complete <br>
And I love you so


¬ŅC√≥mo es la estructura b√°sica de un documento HTML?

Reci√©n vimos algunos elementos sueltos para crear un c√≥digo HTML, pero ahora, toca ponerlos en un contexto. Al igual que cualquier est√°ndar web, debe seguir algunas reglas para generar estos c√≥digos.

Comenzamos con la declaración <!DOCTYPE html> para informar al navegador web que el documento en cuestión es un HTML.

Luego abrimos un tag <html>, que tendremos que cerrar al final, así </html>.

Entonces, en su interior agregamos <head>, que debe contener los metadatos de la p√°gina (datos sobre datos), como el t√≠tulo que aparecer√° en la pesta√Īa del navegador <title>, llamadas a archivos externos y otras que son cruciales para un trabajo de SEO, como las meta tags.

html head y body ejemplo

Es importante incluir la tag <meta charset = ‚ÄĚutf-8 ‚Ä≥> para que el navegador muestre correctamente ciertos caracteres que usamos en espa√Īol, como los acentos o la virgulilla.

Finalmente, abrimos el tag <body>, donde agregamos la parte del documento HTML que contiene los elementos visibles para el usuario.

<!DOCTYPE html>
<html>
  <head>
    <meta charset=¬Ľutf-8‚Ä≥>
      <title>El meta-título va acá</title>
  </head>

  <body>
    <h1>El título principal acá</h1>
        <p>Este es un ejemplo de p√°rrafo</p>
      <h2>Título secundario</h1>
        <p>Párrafo del título secundario</p>
  </body>
</html>


¬ŅC√≥mo crear tu primer c√≥digo HTML?

Para crear c√≥digo HTML, solo necesitas de un editor de texto simple, c√≥mo el bloc de notas de Windows; y un navegador web para ejecutar el c√≥digo, c√≥mo Firefox o Safari, para ejecutar el c√≥digo creado.

Aunque se puede crear código con un simple bloc de notas, lo recomendable es utilizar un programa especializado, como Visual Studio Code.

En este programa podrás crear un archivo .html. En dicho archivo generaremos nuestro código, y para ejecutarlo, debemos abrirlo desde el navegador.

<! DOCTYPE HTML>
<html>
  <head>
    <meta charset=¬Ľutf-8‚Ä≥>
      <title>El meta-título va acá</title>
  </head>

  <body>
    <h1>El título principal acá</h1>
        <p>Este es un ejemplo de p√°rrafo</p>
      <h2>Título secundario</h1>
        <p>Párrafo del título secundario</p>
  </body>
</html>


Del HTML al CSS y al JavaScript

Bien, ya tuvimos una visión general del HTML, el cual es la estructura de toda una web. Pero, el HTML por sí solo no tiene estilo, es muy genérico el resultado, para auxiliarnos con esto, tenemos al CSS.

El CSS es la herramienta que permite configurar fuentes, colores, alineaciones, entre otros, para los distintos códigos HTML.

¬ŅQu√© es el CSS?

CSS es un acr√≥nimo en ingl√©s que significa Cascading Style Sheets, en espa√Īol ser√≠a algo as√≠ c√≥mo hojas de estilo en cascada.

Aunque, s√≠ bien es posible usar estilos dentro de un c√≥digo HTML, se recomienda el uso de uno o m√°s archivos CSS individuales. Esto hace que el c√≥digo sea m√°s organizado, pues a√≠sla la estructura del estilo.

El CSS se basa en selectores y declaraciones con propiedades y valores. Es decir, elegimos los elementos HTML a los que queremos aplicar los estilos y declaramos cu√°les ser√°n las propiedades de estos componentes.

Ahora veremos un CSS personalizado para un determinado p√°rrafo. En este, simplemente definiremos tres atributos, el color, la fuente, y el tama√Īo de la fuente utilizada, en p√≠xeles.

p {

color: white;

font-family: Calibri;

font-size: 15px;

}

¬ŅQu√© es el JavaScript?

Hay otra etapa de desarrollo web, que se dedica a crear comportamientos din√°micos, hablo de justamente, el JavaScript. El JS, no debe confundirse con Java a secas, pues son cosas distintas.

El JavaScript es propiamente un lenguaje de programaci√≥n, y es qui√©n permite una mayor interactividad de la p√°gina y una mejor experiencia del usuario.

Aqu√≠ podemos elegir qu√© sucede cuando se hace una acci√≥n dentro de cierta parte de la p√°gina, presiona una tecla, desplaza la p√°gina y m√°s. Las aplicaciones son numerosas y dependen b√°sicamente de la creatividad del desarrollador.

Incluso JavaScript es ideal para aquellos que desean aprender a programar, ya que la sintaxis del lenguaje es dentro de todo, simple. Adem√°s, es posible realizar pruebas inmediatas viendo el resultado de su c√≥digo directamente en el navegador web.


Conclusión

Bueno, ¬°llegamos al final!. Conocer el HTML tiene su gran relevancia en los tiempos digitales que corren. Es cierto, no pudimos tocar todos los temas HTML en este post, pero al menos pudimos hacer un peque√Īo tour para despertar la curiosidad.

Espero que el post te haya servido para comprender lo básico del HTML. Por otra parte, quiero dejarte un enlace aquí debajo, con un regalo de 25 dólares para que puedas hacer un nuevo sitio en WordPress.

¬°Nada para a√Īadir!, ¬°Hasta la pr√≥xima!.

Consigue 25 dólares para tu sitio WordPress
Consigue 25 dólares para tu próximo sitio WordPress

14 comentarios en “HTML: ¬ŅQu√© es y como se relaciona con el CSS y JavaScript?”

Deja un comentario

Post relacionados

Por si te quedaste con ganas de m√°s...

Como seguramente seguis con muchas ganas de leer post de mni blog ¬ędijo nunca, nadie¬Ľ, te dejo algunos otros post que podr√≠an ser de inter√©s, ordenados de manera completamente random.

¬ŅNecesit√°s contactarte conmigo?

Si ten√©s ganas de ponerte en contacto porque necesit√°s ayuda particular o simplemente te falta uno para el f√ļtbol, no dudes en dejarme un mensaje por mail o en las redes sociales.

error: Content is protected !!
Ir arriba
A %d blogueros les gusta esto: