¿Qué es HTML y cómo crear una página web en HTML?








¿Así que te estás preguntando qué es HTML y cómo crear una página web en este lenguaje? ¡Entonces queremos felicitarte porque acabas de dar tu primer paso en el mundo del Desarrollo Web! ¡Un pequeño paso para el hombre, pero un gran paso para convertirte en developer!











Si bien en este mismo artículo te vamos a dar una definición mucho más formal sobre lo que es HTML, es importante que empecemos a explicarlo de una forma más concreta y que puedas visualizarlo como esa estructura de ladrillos, vigas de acero y plateas que van a darle su estructura fundamental a un rascacielos.











El HTML representa nada más y nada menos que ese esqueleto y las bases sobre las que vamos a componer nuestra web. El sostén necesario que posteriormente nos permitirá aplicar diseño con CSS e interacciones y dinamismo con lenguajes de programación como Javascript y PHP.


En este nuevo Coder Blog te vamos a contar en detalle qué es HTML y vamos a compartir algunas de esas primeras nociones necesarias para entender cómo crear una página web en HTML desde cero.


¡Empecemos por el principio!








1. ¿Qué es HTML?


HTML (Cuyas siglas significan HyperText Markup Language) o lenguaje de marcado de etiquetas es, valga la redundancia, un lenguaje de marcado que nos permite crear documentos para componer un sitio web. Funciona permitiéndonos indicar dónde queremos posicionar cada uno de los elementos estructurales de un sitio como podrían ser las secciones, encabezados, párrafos, links, imágenes, mapas de Google, videos de YouTube y muchos otros elementos. 


Ahora que ya sabes qué es HTML, puedes saltar hasta la parte de cómo crear una página en HTML, PERO si quieres entenderlo aún más, te recomiendo seguir leyendo ;)


Es sumamente relevante entender desde el minuto cero que:





HTML NO es un lenguaje de programación. HTML no nos permite manipular datos, ni darle instrucciones a la computadora, ni generar interacciones.


El lenguaje de marcado de etiquetas es el idioma que leen, comprenden y estandarizan todos los navegadores web más relevantes como Chrome, Firefox, Edge y Safari. Este nos permite llevar el diseño en papel a una estructura interpretable por una computadora.


HTML no representa la mejor forma de trabajar la interfaz visual o de diseño de nuestro sitio web, ya que esto se realiza de una manera más óptima asociando un archivo CSS a nuestro código HTML.





El lenguaje de marcado de etiquetas se creó en los años noventa, se lanzó oficialmente en 1993 y ha sido estandarizado por la W3C, quien establece sus normas (El consorcio internacional que se encarga del crecimiento y la accesibilidad de la World Wide Web) y actualmente existen 3 versiones funcionales: html4, xhtml y html5.








Sobre el lado izquierdo podemos observar una estructura organizada de código HTML. Sobre el lado derecho la interpretación que un navegador realiza de este código.





Un archivo HTML como tal puede dar origen a una página web y un conjunto de HTMLs organizados de manera jerárquica pueden dar origen a un sitio web. Estos conceptos se suelen tratar en el uso corriente como análogos, pero tienen un significado totalmente diferente. En la siguiente infografía podemos apreciar esa diferencia:











¿Cuál es la diferencia entre HTML y HTTP?


Mientras HTML es un archivo que define la estructura de una web, HTTP o protocolo de transferencia de hipertexto es el conjunto de reglas que permite la transferencia de información a través de estos archivos.





Conoce nuestros cursos y carreras de Programación haciendo clic en la foto:








1.2 Elementos clave de HTML


Para comprender la lógica del lenguaje de marcado de etiquetas, existen 3 términos totalmente indispensables que debemos incorporar: etiquetas, atributo y estructura.





Etiquetas: Conforman toda la extensión de un documento HTML y se agrupan para generar diferentes tipos de estructuras. Existen dos tipos de etiquetas, las etiquetas con apertura y clausura (Por ejemplo <p></p> que se utiliza para escribir párrafos) y aquellas que se cierran a sí mismas (Por ejemplo <img> que se utiliza para embeber imágenes). Lo que se encuentra dentro de una etiqueta es lo que estamos formateando.


Atributo: Son características que nutren las etiquetas para que estas se comporten de determinada manera. Por ejemplo, gracias a los atributos class=“” podemos transferir estilos de diseño a la estructura de la web desde un archivo CSS, linkear archivos externos con hrefs=“” o cambiar el tamaño de una imagen con el atributo width=“” y height=“” entre muchas otras posibilidades. Los atributos se colocan siempre en la etiqueta de apertura o en la extensión de las que se cierran a sí mismas. Podemos reconocerlos fácilmente ya que siempre se cierran entre comillas y puede haber más de uno por etiqueta.


Estructura: Es la forma en que las etiquetas se conglomeran y complementan entre ellas para formar estructuras compuestas que le otorgan su contenido a una página web determinada. Resulta sumamente útil y posible introducir etiquetas dentro de otras etiquetas, aunque debemos tener presente que estas siempre cierran en orden inverso a la apertura, como vemos en la siguiente imagen:














Repasando los 3 términos indispensables: Esta es una estructura básica de HTML, formada por etiquetas, que a su vez están dotadas de atributos, los cuales indican de qué forma deben comportarse.





Ahora que ya entiendes qué es HTML, cómo funciona, qué es una etiqueta y un atributo es momento de empezar a analizar cómo crear una página web en HTML.








2. ¿Cómo crear una página web en HTML?


Para poder crear una página web con HTML, vamos a necesitar 3 herramientas fundamentales: un bocetador, un editor de texto y un navegador.





2.1 Herramientas HTML





Bocetador: En una primera instancia y antes de volcarnos a generar código, vamos a tener que desarrollar el boceto o mock up de nuestro sitio web, que podemos crear a través de sketches en lápiz o utilizar herramientas web sumamente intuitivas como Balsamiq. Para usuarios más avanzados en el área del diseño también existen softwares pagos de alta potencia como Adobe Xd, Figma y Sketch. Asimismo, también se puede bocetar a través de herramientas más generalistas como Photoshop e Illustrator.











Editor de Texto: Para poder escribir el código que pueda llevar el diseño en boceto hacia la realidad, es necesario realizarlo por medio de un editor de texto que consiste en un software capaz de asistir a esta tarea de manera eficaz. Si bien esta misión puede ser realizada mediante un simple bloc de notas adaptado a lenguaje web (Notepad), actualmente contamos con herramientas como Visual Studio Code o Sublime Text que simplifican notablemente esta actividad. Estas herramientas cuentan con Plugins como Emmet (Una excelente autocompletador de atributos y etiquetas), Indent-Rainbow (Una funcionalidad que brinda orden al estructurar código), Live Server (Que nos muestra cómo se ve nuestra web en tiempo real mientras la codeamos) y muchas otras que amenizan este trabajo.











Navegador: Como tercera herramienta, aunque difícilmente no contemos con ella por defecto, aparecen los navegadores que nos van a permitir visualizar los sitios web que vayamos creando mediante el editor de texto.








En este punto del artículo vamos a hacer de cuenta que ya tienes armado tu mock up para empezar a crear tu propia web. Si todavía no lo tienes, puedes dejarlo acá hasta que ya lo hayas definido. ¿Necesitas ayuda? ¡Chequea estos Tips!














¿Todo listo? ¡Sigamos aprendiendo cómo crear una página web en HTML!





2.2 Buenas prácticas HTML


Al momento de crear nuestro primer archivo HTML, es muy importante seguir las siguientes pautas:





El nombre del archivo no debe tener espacios, acentos, eñes, símbolos y otros caracteres impropios del lenguaje anglosajón.


En caso de que el nombre del archivo tenga más de una palabra, se pueden usar guiones medios o bajos para separarlas. Por ejemplo: “mi-pagina-web.html”


Las palabras deben estar escritas totalmente en minúsculas.


Todos los archivos deben poseer la extensión .html, ya que esta es la única forma que un servidor web pueda interpretar un sitio.


La home de nuestros sitios web debe llamarse necesariamente index.html para cumplir con el estándar mundial.


El navegador que interpreta el código de un HTML no le otorga importancia a si las etiquetas las escribimos una al lado de la otra o una debajo de la otra. Los enter o espacios no afectan la salida en el navegador. Este espacio en blanco se usa solamente para formatear el código de una manera cómoda para el programador. Es una buena práctica utilizar enter y tabulaciones para entender a simple vista cómo se compone el código.





2.3 Primeros pasos y estructura básica


Si deseamos empezar a crear rápidamente una página web en HTML solo debemos instalar un editor de texto como Visual Studio Code y crear una carpeta en la que vamos a componer la totalidad del contenido de nuestro sitio web. Al darle clic derecho a esa carpeta vamos a seleccionar “Abrir con Code”, lo que nos va a permitir manipularla a través del software.











El siguiente paso consiste en ubicar el mouse sobre la carpeta en el panel “EXPLORER”. Esto nos revelará un acceso directo hacia la creación de un documento con el símbolo compuesto de la hoja y el signo más. Vamos a crear un archivo HTML con el nombre index y la extensión .html, tal y como te lo explicamos en este artículo. Al darle doble clic ya podremos empezar a editar. Este software nos va permitir escribir, cortar y seleccionar todo en el html a voluntad.











Un enorme beneficio de este software es que ya incluye de forma nativa el plugin de emmet por lo que no vamos a necesitar instalarlo como sí sucede en otros editores. Con solo escribir el atajo ! y tocar el enter, vamos a generar automáticamente la estructura básica de todo HTML:














Hagamos una pausa aquí y analicemos un poco la estructura básica que emmet ha creado para que nosotros no tengamos que escribirla línea por línea:





En primera ubicación nos vamos a encontramos con la etiqueta <!DOCTYPE html> que declara que nuestro archivo es un html. Esta es muy importante para la interpretación de los navegadores.


En segunda y última ubicación aparece la etiqueta <html></html> que debe poseer en su interior todo el código que vayamos a crear de ahora en adelante para estructurar nuestra página web. En la imagen podemos observar como la etiqueta de apertura tiene el atributo lang=“en”que declara el idioma del sitio. En este caso podemos reemplazar “en” por “es”, siempre dentro de las comillas, para convertirlo en un documento de idioma español.


Ahora bien, dentro de la etiqueta HTML, hay otras dos sub etiquetas llamadas <head></head> y <body></body> que tienen sus particularidades. La etiqueta head es la parte privada del documento y se utiliza como un espacio de comunicación entre el sitio web y el navegador. Esta etiqueta envuelve las etiquetas meta que le dan órdenes al navegador como poner acentos. Asimismo, también envuelve la etiqueta title que es la que permite asignar un título al documento, que posteriormente se verá en la pestaña del navegador y suele incluir otras etiquetas para importar documentos CSS y Javascript. Por otro lado, la etiqueta body va a envolver todo el contenido que tiene el sitio. Esta etiqueta si puede ser visualizada por el usuario.











Ahora es momento de enfocarnos puntualmente en la etiqueta <body></body> para entender cómo crear una página web en HTML.


Esta etiqueta vuelve a sufrir una serie de grandes subpisiones mediante la etiqueta <header></header> que marca el encabezado de la web y donde se ubica la super conocida barra de navegación, la etiqueta <main></main> dónde se van a colocar todas las secciones de nuestro contenido y la etiqueta <footer></footer> que marca el pie de la página y ese lugar donde se suelen ubicar enlaces y datos de contacto de las empresas.








Una vez que ya tenemos estas etiquetas esenciales, ya podemos empezar a jugar y crear la estructura que planteamos en nuestros bocetos.


Para esto, tenemos una gran cantidad de etiquetas que van a servir a diferentes propósitos y que puedes ir probando para estructurar tu html:





Si deseamos generar nuevas subpisiones para que los navegadores entiendan cada sección de nuestro código podemos utilizar la etiqueta <section></section> o <p></p> y <article></article> para subpidir aún más esas subpisiones.Si deseamos agregar titulares, contamos con las etiquetas que van desde la <h1></h1> hasta la <h6></h6>. Hay que tener en cuenta que solo podemos tener un único h1 que funciona como título de TODO el HTML. Los h2 deberían ser usados para los subtítulos principales de cada sección de la web. Los h3 para subseccionar los h2 y así sucesivamente.











Si deseamos agregar grandes bloques de texto podemos utilizar la etiqueta <p></p> y <span></span> que sirve para textos pequeños o insertos en etiquetas p.


La etiqueta <br/> permite hacer saltos de línea, aunque esto lo podremos hacer de una manera más eficiente con CSS. El mismo criterio se utiliza con las etiquetas <b></b> que genera negritas y <i></i> que genera cursivas. Otra etiqueta similar es <u></u> la cual es muy útil cuando nos preguntamos cómo subrayar en html, aunque hoy se encuentra en desuso igual que todas las que mencionamos en este punto. CSS es el rey del diseño web y donde diseña CSS, no lo hacen las etiquetas.


La etiqueta <nav></nav> nos sirve para indicarle a los navegadores que deben interpretar una barra de navegación.


Las etiquetas <ul></ul> y <ol> </ol> nos permiten hacer las típicas listas de viñetas, de forma desordenada en caso de las ul y numeradas en caso de las ol. estas deben ser complementadas con elementos <li></li> en su interior, que es el lugar donde se coloca cada elemento de esas listas.


Asimismo, también contamos con etiquetas como <a></a> que dan respuesta a la pregunta de cómo poner un link en HTML o un botón de “ver más”, etiquetas <img> que nos permiten insertar imágenes y una vasta cantidad de etc que agregan, videos de YouTube, música y mapas de Google entre otros. Sumar un atributo target="_blank" a las etiquetas <a> es la mejor forma de hacer que un link se abra en otra pestaña html.





Les compartimos una pequeña práctica a la que van a poder llegar fácilmente con todo lo que vimos en este artículo ;) 


Recuerden darle doble clic al index de sus carpetas para abrir un archivo html en Google Chrome. Esto también lo pueden hacer en tiempo real con el plugin Live Server.


En este ejemplo, pueden ver desde la pestaña del navegador hasta el último contenido, cómo fuimos aplicando los diferentes principios explicados en el artículo:











Aquí les dejamos su código correspondiente:





 





3. Conclusión





Con esta primera aproximación al mundo del desarrollo web ya tienes un pantallazo muy concreto de lo que es HTML y cómo crear una página web básica en este lenguaje. En próximas ediciones seguiremos ampliando estos conceptos con CSS para comenzar a darle estilos de diseño a esa estructura fundamental.


Si llegaste hasta aquí, te doy las gracias por tu interés y si tienes alguna duda, puedes escribirme a ezequiel.j@coderhouse.com. ¡Soy todo ojos!


Si todavía no recibiste nuestra “invitación subliminal” en nuestro ejemplo de página web y quieres estar siempre actualizado sobre las nuevas tendencias que van surgiendo te recomendamos suscribirte al Coder Blog haciendo scroll down.


Si deseas continuar con tu formación en programación, con los mejores profesionales, la información más actualizada y las mejores posibilidades de ingresar al mundo laboral,  te invitamos a conocer la Carrera de Desarrollo Full Stack de Coderhouse!