Curso: Introducción al HTML #1

Curso: Introducción al HTML #1

julio 21, 2018 0 Por admin

En este pequeño curso aprenderás sobre el lenguaje HTML. Ten en cuenta que el objetivo de este curso es aprender solamente sobre HTML, que sería el lenguaje base para diseño web. Si quieres hacer páginas profesionales necesitarás aprender sobre más lenguajes de programación: como CSS, JavaScript, etc. Recuerda que para ver las imágenes del artículo en pantalla completa, haz clic sobre estas.

 

1. Introducción:

Si no entiendes este lenguaje al principio ¡No te preocupes!, prácticamente nadie lo ha podido entender la primera vez que lo estudió. Además, si tienes alguna duda, dímelo por los comentarios.

¿Qué es HTML? HTML, es el lenguaje que se utiliza mayormente para construcción páginas Web. La sigla HTML es la abreviatura para Hyper Text Markup Language (lenguaje de marcas de hipertexto). HTML5 es la versión más reciente de este lenguaje y la que actualmente se utiliza.

En primer lugar, para saber usar HTML, debemos entenderlo como otra lengua o idioma. Básicamente, HTML es un lenguaje de programación que envía ordenes en forma de etiquetas (hablaremos de estas más adelante) al navegador -Google Chrome, Firefox, etc-, y en respuesta el navegador decodifica esas órdenes en un formato legible/visible y las envía a la pantalla.img 101 - Curso: Introducción al HTML #1

 

2. Editor de Texto:

Si por alguna razón no quieres o no puedes instalar un editor de texto, puedes usar el Bloc de notas (instalado en todas las computadoras con sistema windows) o incluso Word, aunque lo recomendable es que te instales un editor para que escribir el código sea más fácil.

Antes de pasar al siguiente paso, necesitaras un editor de texto para poder así editar mejor tu código HTML. Aquí te dejo una lista de algunos de los editores más usados junto con sus links de descarga en páginas oficiales (si quieres puedes ver algún video en YouTube para configurar mejor eleditor):

  • Visual Studio Code: es el que actualmente estoy usando, muy liviano y fácil de usar.
  • Notepad++: si eres un principiante, te recomiendo este editor.
  • Atom: hasta hace poco estuve usando este editor, aunque se volvió algo pesado. Igualmente es muy bueno.
  • SublimeText: un excelente editor de texto, también recomiendo que uses este.

Una vez que tengas tu editor instalado y en preferencia bien configurado pasaremos al siguiente tema.

 

3. Etiquetas:

El conjunto de etiquetas forman un código. Este código es interpretado por el navegador.

¿Qué son las etiquetas? El lenguaje HTML se rige por las etiquetas. Una etiqueta en HTML siempre se abre con «<>» y se cierra con «</>». Dentro de las etiquetas escribiremos el contenido de acuerdo al tipo de etiqueta que utilicemos. Por ejemplo, una etiqueta puede representar un texto, un título, una imagen, un link, un botón, etc.

3.1 Etiquetas que usaremos:

Aquí dejo las primeras etiquetas que veremos al principio de este curso:

  • <html></html> y !DOCTYPE: indican al navegador que lenguaje voy a utilizar (HTML).
  • <head></head>: dentro del contenido de la etiqueta «<html>», pondremos esta etiqueta, la cual es la «cabeza» de nuestro sitio. Dentro de la misma pondremos información importante, como el título de nuestra página.
  • <title></title>: dentro del contenido de esta etiqueta, escribiremos el título de nuestra página. «<title>» se encuentra dentro de «<head>». Lo que escribamos aquí aparecerá en las pestañas del navegador.
  • <body></body>: dentro de la etiqueta «<body>» colocaremos todo el contenido o cuerpo de nuestra página. La colocaremos después de «</head>».
  • <h1></h1>: utilizaremos este encabezado cuando se hable de algo muy importante y que queramos resaltar, cómo el título de nuestra página, ya que Google te puede penalizar en las búsquedas si utilizas demasiado esta etiqueta.
  • Encabezados secundarios: utilizaremos las etiquetas «<h2>», «<h3>», «<h4>», «<h5>» y «<h6>» cuando queramos usar subtítulos.
  • <p></p>: cuando queramos escribir textos o párrafos en mi página, utilizaré esta etiqueta.

Lo que escribamos dentro de la etiqueta «<head>», no se vera en nuestra página. Solamente se visualizará lo que se encuentre dentro de la etiqueta «<body>», que es el cuerpo de nuestro documento/página.

 

4. Empezando a programar:

Ya que sabes que son las etiquetas, podemos empezar a programar. Ve a tu escritorio y crea una nueva carpeta presionando clic derecho>Nuevo>Carpeta y ponle  el nombre de «cursoHTML». Luego, abre tu editor de texto y crea un nuevo archivo (puedes usar el atajo ctrl+n para crear uno). En este copia y pega el código de más arriba. Guárdalo (puedes usar ctrl+s) en la carpeta que creaste y ponle el nombre de «index.html».
img 104 - Curso: Introducción al HTML #1

Crea una carpeta en tu escritorio y llámala «cursoHTML»

img 106 - Curso: Introducción al HTML #1

Crea y guarda el nuevo archivo en la carpeta que creaste

Una vez hecho esto, ve a la carpeta «cursoHTML», ábrela y haz clic derecho(sobre el archivo «index.html»)>abrir con> y selecciona un navegador que estés usando. El resultado sera el siguiente:
img 107 - Curso: Introducción al HTML #1

En la carpeta «cursoHTML», abre el archivo que guardaste en un navegador (como por ejemplo Chrome).

Cómo ves, el contenido que escribiste dentro de las etiquetas <h1>, <h2>, etc, se coloca en la página.

 

 

Si te gusto y sirvió el artículo te agradeceríamos si compartieras el artículo en las redes sociales, eso nos ayuda muchísimo a seguir haciendo mas contenido como este.

Video tutoriales estarán disponibles muy pronto

Suscríbete para estar al tanto de las últimas novedades

Puntúa este artículo

Leave a Reply

avatar
  Subscríbite  
Notificar de