xnechijli01

Freelancer

Curso de HTML

Logotipo del Freelancer Xnechijli01

Freelancer Xnechijli01: Construimos tus sitios web con SEO onpage y SEO ofpage. Contáctanos pulsando esta imágen.

Sobre nosotros

Curso de HTML: Te damos la bienvenido a nuestro curso de HTML 100% gratuito. Este tutorial está diseñado para que puedas darle un fondo muy sólido a la codificación y diseño de páginas web.

Al realizar nuestro tutorial de HTML incluimos varios ejemplos para que pongas en practica lo aprendido.

Sugerencias previas del curso de HTML.

Antes de empezar este tutorial de HTML queremos mencionarte que si estás creando un sitio web por primera vez, y por ende estás empezando a familiarizarte con el diseño de páginas web, debes recordar que la página de inicio de tu sitio web deberás llamarlo "index.html" porque este es el nombre estándar para las páginas web de inicio de los sitios de internet. Por alguna razón muchos principiantes tienen un extraño hábito de nombrar el archivo de su página de inicio "home.html" o "start.html" o "inicio.html" o algo por el estilo. Una palabra de advertencia: ¡No lo hagas! Los navegadores automáticamente entenderán que 'index.html' es tu página de inicio cuando vean tu URL base.

¡Ahora, comencemos! Bienvenidos al curso de HTML

Capítulo 1 del curso de HTML: Lo Básico

Terminología del tutorial.

Comencemos con un breve repaso de la terminología básica de HTML.

¿Qué es HTML? La expresión HTML es un acróstico, o siglas, de Hyper Text Markup Language. Se trata de un lenguaje de programación extremadamente amigable. A diferencia de los lenguajes de programación tradicionales, como C++, Java o JavaScript, no necesitamos declarar variables o crear bucles. En su lugar, simplemente se usan "etiquetas" (tags en inglés) para configurar lo que deseamos que se muestre en el navegador.

Las etiquetas casi siempre vienen en parejas, una de apertura y una de cierre. Normalmente se parecen a esto:

<title> Escribe lo que quieras que se vea aquí </title>

Como acabo de mencionar, casi todas las etiquetas siguen este formato. Es decir, están entre los símbolos "<" y ">". La primera etiqueta que ves arriba es una etiqueta de apertura, mientras que la segunda es la etiqueta de cierre. La única diferencia entre los dos es el símbolo "/" antes del nombre de la etiqueta de cierre.  Básicamente, tu navegador de Internet interpreta cuándo debe empezar una función cuando ve una etiqueta de apertura y procesará la etiqueta a todo lo que encuentre después hasta que localice la etiqueta de cierre.

Ten en cuenta que HTML no detecta espacios en blanco. Por ejemplo, las dos exposiciones siguientes mostrarían la misma salida, independientemente de qué etiquetas se usen. Observa los siguientes dos ejemplos. En ambos el resultado será el mismo en el navegador.

Ejemplo 1 :

<title>

Este es el título de la página

</title>

Ejemplo 2:

<title> Este es el título de la página </title>

En ambos casos el resultado será el mismo. Como puedes ver, los espacios en blanco no importan, así que utiliza este hecho para que tu código de HTML luzca agradable y organizado, con un espaciado fácil de seguir.

Ahora bien, una gran cantidad del código es simplemente memorizar los diferentes nombres de etiquetas y sus efectos en el texto que va entre cada una.

Prepara tu sitio web

El primer paso absoluto que debes realizar al hacer una página web en HTML es decirle al navegador que comience a buscar código HTML. Así que siempre empieza y termina tu trabajo con estas dos etiquetas:

<html>

</html>

Absolutamente todo lo que escribas debe estar entre estas dos etiquetas. Básicamente, le estás diciendo al navegador con la primera etiqueta "Comienza a procesar código HTML" y con la etiqueta de cierre "Detenen el procesamiento de HTML".

Ahora, dentro de las dos etiquetas HTML, hay una región conocida como "encabezado" y una región conocida como "cuerpo" (del inglés "head" y "body" respectivamente). La región del emcabezado contiene todas las cosas que no están en el contenido directo de tu sitio web, es decir, lo que no se muestran en el navegador, Sin embargo contiene las instrucciones básicas de tu página web. Por otro lado, la región "body" es para todo lo que será visible y será la mayor parte del diseño de páginas web.

Así que, después de declarar que estamos procesando HTML, necesitamos declarar nuestro área del encabezado. El código inicial y final de tus páginas web podría será algo como esto...

<html>

<head>

</head>

</html>

Una nota importante. Observa que las etiquetas "head" están incrustadas dentro de las etiquetas "html". Si inicias una etiqueta dentro de otra etiqueta, debes cerrarla antes de que finalice la primera. He aquí un ejemplo del formato mal hecho.

<html>

<head>

</html>

</head>

Aquí la etiqueta "<head>" se declara después de "<html>" pero no se cierra antes de que "html" se cierre. ¡Esto es importante! A lo largo de este curso de HTML seguirás notando esta característica del diseño web.

El título en el diseño de páginas web

Continuemos nuestro tutorial de HTML creando una página que realmente tenga cierto contenido. Algo de lo más importante que queremos utilizar en el área del encabezado es anunciar al mundo el título de nuestro sitio web. Podemos hacer esto muy fácilmente con la etiqueta "title", que es la que usamos en un ejemplo anterior.

<title> Título de mi sitio web </title>

Sólo recuerda que la etiqueta "title" debe colocarse entre las etiquetas "head". Por el momento va a ser la única etiqueta que usarás en esa área. Ahora, tiempo para practicar. Abre tu block de notas en tu computadora y añade las etiquetas que aprendiste. Despúes abrélo en tu navegador. Recuerda que tu archivo deberá tener la extensión ".html".

Esto es lo básico del diseño de páginas web. Te invitamos aque veas el capítulo 2 de este curso de html para que continúes con tu aprendizaje.