Guías y Cursos

HTML: Conceptos Básicos (1)

Cada que visitas una página web o utilizas alguna aplicación web, seguro hay un código HTML detrás que junto a una hoja de estilos ayudan a mejorar tu experiencia mientras navegas. Muchos de los usuarios finales no tiene ni idea de lo que esto significa, pero está bien, porque eso es lo que vamos a aprender en esta guía.

Si deseas aprender a desarrollar en el lenguaje de la web, estás en el lugar correcto, ya sea que desees comenzar a trabajar tu propia web, como lo puedes ver en el curso de Joomla: Crear tu propio sitio web (1) o estes buscando mejorar la que ya tienes.

En este curso aprenderás los conceptos básicos del desarrollo en HTML y CSS, iras paso a paso desarrollando hábilidades para mejorar tu facilidad en la sintaxis y al final podrás crear tus propios proyectos web. Si no tienes ningun conocimiento en desarrollo web ¡no importa! este curso está diseñado con la filosofía “Todos deberían aprender a programar”.

Lo que veremos en estra primera entrada:
  1. Conceptos básicos
  2. Herramientas de desarrollo
  3. Las etiquetas y todo lo que hay dentro.
  4. <head> (Encabezado)
  5. <body> (Cuerpo)

Sin más que añadir, te doy la bienvenida, esperando que esta seríe de guías sean de gran ayuda para tu travesía en la programación.

1. Conceptos básicos

HTML (HyperText Markup Language) es un lenguaje de marcas de hipertexto, utilizado para desarrollo web. A estas marcas se les conoce como Etiquetas y son la base para estructurar todo el código que al final dará como resultado la visualización final.

La estructura del código se desarrolla en bloques, marcados por un inicio de etiqueta y un final, el cual se guarda en un archivo .html; normalmente las landinpage suelen tener un index.html que proporciona toda la parte visual de la página.

HTML ha pasado por muchos cambios, actualmente trabajamos con el HTML5, el cual se ha convertido en el rey de los lenguajes web por ser semántico, adaptable, flexible, escalable y multiplataforma

2. Herramientas de desarrollo

Para poder comprender mejor, vamos a tratar de tener los conceptos básicos muy claro y complementarlo con un ejercicios prácticos. HTML puede desarrollarse en muchos editores de texto, en Bloc de Notas si lo deseas, pero existen mejores opciones, en lo personal recomendaría utilizar Sublime Text un editor de código bastante simple y con una extraordinaria interfaz que resalta el códico con diferentes colores.

Su instalación es muy sencilla, además que se encuentra disponible tanto para Windows como Mac OS.

3. Las etiquetas y todo lo que hay dentro

La estructura de las etiquetas son muy simples, se componen del signo menor que (<) y mayor que (>) y dentro el nombre de la etiqueta. Por ejemplo <button> es la etiqueta para definir la forma de un botón; también toda etiqueta debe tener un cierre, para ello agregamos un slash antes del nombre, en este ejemplo sería </button>, las etiquetas pueden contener definiciones de caracteristicas dentro de éstas, pero hablaremos de eso más adelante.

Al contenido dentro del inicio y fin de una etiqueta se le conoce como bloques de códigos, y tienen una estructura diferente dependiendo de la etiqueta. Las principales etiquetas son:

  1. html: inicio y final del documento HTML
  2. head: cabecera del documento HTML
  3. body: cuerpo del documento HTML

Los cuales juntos tendrán una estructura como la siguiente:

<html>
    <head>
    </head>
    <body>
    </body>
</html>

Dentro de la etiqueta <html> se encontrará todo el código web, dentro de <head> tendremos algunas atribuciones del documento, y dentro de <body> estará todo el cuerpo de la página. Coloca este código en Sublime Text y guardalo como un archivo .html, no lo ejecutes aún, no veras nada debido a que aún no haz colocado nada en body.

2. <head> (Cabecera)

Si conoces algo de inglés sabrás de qué va el asunto, cada una de estas etiquetas principales tienen su propias etiquetas para utilizarse dentro de ellas, y que también tomaran las atribuciones que tenga la etiqueta principal. Algunas de las etiquetas que pueden utilizarse en head son:

  • link: vínculo a hojas de estilo CSS
  • style: estilo de la página incrustado
  • title: define el título de la página (va dentro de head, pero es obligatoria)
  • script: script o guión utilizado mayormente para JavaScript

Como ejemplo, utilizaremos la etiqueta más básica, la de title que define el titulo de la página, y es la que mostrará el navegador en la parte superior. Esta etiqueta la colocamos dentro de head:

<html>
<head>
	<title>Mi primera página</title>
</head>
<body>
</body>
</html>

Recuerda añadir este código a tu proyecto para no perderte. Estas etiquetas serán las que definan algunas caracteristicas de diseños principales de nuestro documento, podremos defirnirlas ahí mismo (lo cual no es recomendado) o podemos especificar dónde se encuentra el documento con que le dará las instrucciones. Pero eso lo veremos más a detalle en las próximas entradas.

3. <body> (Cuerpo)

Dentro de body las cosas son un poquito más extensas, a lo largo del curso iremos aprendiendo cada una de estás y cómo utilizarlo, dentro del cuerpo colocaremos todo nuestro contenido, nuestro texto, imagenes, videos, menus, formularios y muchas otras cosas más, algunas etiquetas básicas que podemos mencionar son:

Bloques

  • a: enlace
  • div: capa de la página
  • img: para insertar imágenes
  • p: parráfos

Encabezados

  1. h1: encabezado de primer nivel
  2. h2: encabezado de segundo nivel
  3. h3: encabezado de tercer nivel
  4. h4: encabezado de cuarto nivel
  5. h5: encabezado de quinto nivel
  6. h6: encabezado de sexto nivel

Tablas

  • table: define una tabla
  • tr: fila de una tabla
  • td: celda de datos de una tabla
  • th: celda de cabecera de una tabla

Podemos ver unos ejemplo de estos para poder tenerlo un poco más claro:

<html>
<head>
	<title>Mi primera página</title>
</head>
<body>
<h1>Esto es un titulo de nivel 1</h1>
<h2>Esto es un titulo de nivel 2</h2>
<p>La etiqueta p nos sirve para redactar parrafos</p>
</body>
</html>

Agrega las etiquetas h1, h2 y p a tu código de Sublime Text, guardalo y ahora puedes ejecutarlo con el navegador; deberás poder ver lo siguiente:

Ahora comprendes un poco mejor cómo funciona el lenguaje de marcado; las etiquetas definen la caracteristica que tendrá el contenido. Con la ayuda de más etiquetas, los estilos CSS y uno que otro truco de JQuery, podrás tener una página web profesional en cuestión de tiempo.

En la siguiente entrada veremos más a detalle el contenido de body y los archivos multimedia; si tienes alguna duda o comentario no dudes en escribirla y si necesitas ayuda con gusto responderé.

Al final de cada curso podrás descargar el proyecto, conforme avancemos iremos trabajando sobre este mismo: 1. Curso HTML (1)

<p>Ingeniero en Sistemas de Información enfocado al desarrollo de aplicaciones web, aficionado al diseño y marketing digital. El mundo en tiempos digitales nos prepara muchas sorpresas, y aquí estoy para compartirlas.</p>

LinkedIn

¡No te olvides compartir!

4 thoughts on “HTML: Conceptos Básicos (1)”

  1. I’ve been surfing online more than 3 hours nowadays, yet I by no means found any attention-grabbing article like yours. It is pretty price sufficient for me. In my view, if all webmasters and bloggers made good content as you probably did, the web shall be much more useful than ever before.

  2. I’m curious to discover just what site system you are using? I am experiencing a few slight safety issues with my most recent website about Arvind Pandit and I’d love to find a thing much more secure. Have you got any strategies?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *