Tutorial HTML (para principiantes)

Tutorial HTML para principiantes¿Te gustaría aprender algo de HTML??


Parece una gran idea. De ahí la razón por la que hemos creado este tutorial HTML para principiantes..

Actualmente hay al menos 1.700 millones de sitios web en el mundo. Prácticamente todos estos sitios web usan HTML de una forma u otra.

P.S: si no desea aprender HTML y comenzar a construir su sitio web de inmediato, sin necesidad de codificación, eche un vistazo a esta guía: Cómo crear un sitio web GRATIS (sin aprender HTML).

Introducción a HTML


¿Qué es HTML??

¿Qué es HTML?HTML, un acrónimo de HyperText Markup Language, es un lenguaje de computadora para crear sitios web y aplicaciones web. Consiste principalmente en una serie de códigos generalmente escritos en un archivo de texto y guardados como HTML, el código escrito en el lenguaje HTML se traduce en un texto hermoso y bien formateado o una combinación de texto y medios cuando se ve a través de un navegador.

HTML fue desarrollado por primera vez por el físico británico Tim Berners-Lee en 1990, y ha experimentado tantas evoluciones desde entonces que la versión más reciente puede lograr mucho más de lo que se imaginaba cuando se inventó el idioma..

En este tutorial, repasaremos los conceptos básicos del lenguaje HTML y todo lo que necesita saber para comenzar a usar HTML como principiante..

Versiones HTML

Primero, un resumen rápido de todas las versiones HTML desde que se inventó HTML.

  • HTML 1.0: Esta fue la versión básica de HTML y la primera versión del lenguaje.
  • HTML 2.0: Esta versión se introdujo en 1995. Evolucionó gradualmente, permitiendo capacidades adicionales que incluyen la carga de archivos basados ​​en formularios, tablas, mapas de imágenes del lado del cliente e internacionalización..
  • HTML 3.2: En un intento por asegurar el desarrollo de estándares para la World Wide Web, el Consorcio World Wide Web (W3C) fue fundado por Tim Berners-Lee en 1994. En 1997, publicaron HTML 3.2.
  • HTML 4.0: Más tarde, en 1997, el W3C lanzó HTML 4.0, una versión que adoptó muchos tipos de elementos y atributos específicos del navegador..
  • HTML 4.0 fue reeditado más tarde con ediciones menores en 1998.
  • HTML 4.01: En diciembre de 1999, se lanzó HTML 4.01.
  • XHTML: Las especificaciones se introdujeron en 2000 y se recomendó utilizar como estándar conjunto con HTML 4.01. Incorpora XML para garantizar que el código se escriba correctamente y para garantizar la interoperabilidad entre los lenguajes de programación..
  • HTML5: El W3C publicó HTML5 como recomendación en octubre de 2014 y luego lanzó HTML 5.1 en noviembre de 2016.

Elegir tu editor de HTML

Elija editor de HTMLSi está pensando en crear páginas web en HTML, necesita un editor de HTML. Existen varios beneficios al usar un editor HTML.

Un buen editor HTML mantendrá su código limpio y organizado. También detectará cuando abra una nueva etiqueta y la cierre automáticamente para evitar que tenga un código defectuoso y, como resultado, reduzca la cantidad de escritura que tiene que hacer. La mayoría de los editores HTML de hoy en día le permiten obtener una vista previa de su página web para ver cómo se verá en un navegador web utilizando su función WYSIWYG.

Hay muchos editores HTML gratuitos y de pago, a continuación se detallan algunas de las principales opciones entre las que puede elegir:

Bloques de construcción básicos de HTML


Una vez que haya decidido qué editor HTML desea utilizar, el siguiente paso es comprender los componentes básicos de HTML. Al codificar en HTML, es esencial comprender estos bloques de construcción. Incluyen etiquetas, atributos y elementos. Los veremos a continuación:

Introducción a las etiquetas

Una vez que esté en HTML, lo primero que debe comprender son las etiquetas. En esencia, las etiquetas separan el texto normal del código HTML.

En consecuencia, cuando se trata de HTML, las etiquetas marcan la diferencia entre si su documento se muestra como texto ordinario o “texto transformado”, que es básicamente un código de texto que parece mostrar una serie de cosas (hipervínculos, imágenes, medios u otros métodos de formateo) según lo que se le indique que muestre según las etiquetas.

Echemos un vistazo a la palabra “Él es un niño” como ejemplo:

  • En formato de texto ordinario, obtienes: Él es un niño.
  • En formato de texto en negrita, obtienes: Él es un muchacho

Para lograr lo que tenemos en negrita, debe usar el etiqueta.

poner texto en negrita en html

En HTML sin formato tenemos Él es un muchacho que el navegador luego traduce a esto: Él es un muchacho.

“Él es un niño” también podría salir en cursiva.

Esto se logra usando el etiqueta.

hacer texto en cursiva en html

Tenemos: Él es un muchacho que luego sale como Él es un muchacho.

El hipervínculo se logra utilizando el etiqueta.

hacer texto hipervinculado en html

En HTML sin formato tenemos: Él es un niño que muestra como Él es un niño.

Hay algunas cosas que debes entender sobre las etiquetas:

  • Las etiquetas son prácticamente el bloque de construcción de HTML: ¡no puedes hacer HTML sin etiquetas! Si no sabe qué etiqueta usar, asegúrese de consultar nuestra tabla periódica HTML.
  • Casi todas las etiquetas abiertas deben estar cerradas. Tenga en cuenta que hay excepciones. Un ejemplo de una etiqueta que no tiene que cerrarse es una etiqueta vacía, como el salto de línea:
    .
  • Las etiquetas están contenidas en menos de (“<”) and greater than (“>”) Soporte angular. Las etiquetas de cierre contienen una barra inclinada final antes del nombre de la etiqueta que se está cerrando. Ejemplo de una etiqueta abierta: . Ejemplo de etiqueta cerrada .
  • Cada archivo HTML comienza con la etiqueta de apertura y termina con la etiqueta de cierre. La primera línea del archivo HTML debe declarar el tipo de documento para que el navegador sepa qué tipo de HTML utiliza. Es por eso que ves que las páginas HTML comienzan con ““Antes de que comience el código HTML.

Antes de agregar contenido, la mayoría de los archivos HTML se ven básicamente así:

HTML--

La sección que sigue a la la etiqueta generalmente contiene información sobre el documento, como su título, metaetiquetas y dónde ubicar su archivo CSS, contenido que no es visible directamente en la página del navegador. La sección entre “ y“(Que representamos con” CONTENIDO PRINCIPAL “) es donde se encuentra el contenido principal del archivo HTML, que el espectador verá en el navegador. Esto incluye todo, desde el primer párrafo hasta hipervínculos, formateo, multimedia y todo lo demás..

Introducción a los elementos

introducción a los elementos

En HTML, un “elemento” consiste en la etiqueta de apertura y cierre, así como el contenido entre las etiquetas.

En el “Él es un muchacho“(En negrita) ejemplo, tenemos esto en HTML: Él es un muchacho. El texto “Él es un niño” está rodeado por una etiqueta abierta y cerrada. Todo, incluida la etiqueta de apertura, el contenido y la etiqueta de cierre es un elemento.

Cuando se abre una etiqueta, se introduce contenido y se cierra la etiqueta, tenemos un elemento.

Un elemento puede estar en una forma básica o en una forma compleja. ¿Por qué? Porque cualquier cosa entre una etiqueta abierta y una etiqueta de cierre, así como esas etiquetas, es un elemento. Significa que podemos tener elementos dentro de un elemento. En nuestro ejemplo actual, “él es un niño” (Él es un muchacho) es un elemento.

Notará que dijimos anteriormente que los documentos HTML contienen el etiqueta antes de que comience el contenido. El contenido podría incluir cientos de elementos diferentes, pero todos estos elementos son parte del elemento “cuerpo” (ya que el elemento cuerpo está abierto, contiene contenido y luego se cierra).

Introducción a los atributos

Si bien los documentos HTML básicamente usan etiquetas para todo, a veces queremos comunicar información adicional dentro de un elemento. En este caso, usamos un atributo. El atributo se usa para definir las características de un elemento, se usa dentro de la etiqueta de apertura del elemento. Los atributos están formados por un nombre y un valor.

Tenga en cuenta que el valor de un atributo se coloca entre comillas utilizando el formato Tu texto.

ejemplo de un atributo

Ejemplo:

Él es un muchacho

En este ejemplo, estamos instruyendo que “Él es un niño” está alineado en el centro del documento.

Comenzando con HTML


Comenzando con HTMLSuponiendo que desea crear su propio documento HTML básico hoy, ¿cómo comenzar? Desde la creación de títulos de página hasta la creación de formularios, lo guiaremos a través de cómo comenzar con HTML a continuación.

Creando el HTML Elemento

Al crear un documento HTML, una de las primeras cosas que creará es el elemento. Contiene metadatos (o datos sobre el documento HTML). Esto incluye información como el juego de caracteres, el título del documento, los estilos del documento, los scripts, etc..

Algunos de los elementos en el incluir el título, que se crea con el etiqueta.</p><p><strong>Ejemplo</strong>:</p><pre><title>Este es el título de nuestra página.

Este título se mostrará en la pestaña del navegador. También es lo que se indexará como el título de la página cuando los robots de los motores de búsqueda rastreen su sitio web..

Esto también incluye el , que a menudo se usa para especificar información que los motores de búsqueda pueden usar para describir el contenido en sus listados. Esto incluye la descripción, palabras clave, información del autor, etc. El elemento también especifica el juego de caracteres que utiliza el documento HTML.

Crear encabezados en HTML

creando encabezados en html

Los encabezados juegan un papel importante en el éxito de un sitio web. En primer lugar, facilitan a los lectores escanear el contenido de sus páginas. En segundo lugar, y quizás lo más importante, comunican la estructura de sus páginas web a los motores de búsqueda y, por lo tanto, a menudo influyen en la clasificación de su contenido en los resultados de los motores de búsqueda..

Dicho esto, es importante evitar el uso de etiquetas de encabezado para hacer que su texto sea grande o en negrita. Hay otras etiquetas que se pueden usar para eso (que veremos más adelante en esta sección). En cambio, las etiquetas de encabezado deben usarse únicamente para la estructura.

Hay seis etiquetas de encabezado en HTML:

a
, con el

etiqueta que indica el encabezado más importante y el
etiqueta que indica el encabezado menos importante.

Para crear encabezados, simplemente decida qué encabezado está creando, abra el encabezado con la etiqueta de encabezado normal y recuerde siempre cerrar las etiquetas una vez que haya terminado.

Ejemplo de encabezados HTML:

  • Este es su primer encabezado HTML

    (El más largo)

  • Este es su segundo encabezado HTML

  • Este es su tercer encabezado HTML

  • Este es su cuarto encabezado HTML

  • Este es su quinto título HTML
  • Este es su sexto encabezado HTML

Crear párrafos

crear párrafos en HTML

El siguiente paso es comenzar a crear párrafos. Se pueden crear párrafos con el

etiqueta.

Ejemplo:

Este es tu primer párrafo.

Este es tu segundo párrafo, y estarás creando muchos más párrafos.

Tenga en cuenta que escribir en HTML es muy diferente de escribir en texto puro. Por lo tanto, si divide el texto dentro de HTML sin comenzar un nuevo párrafo, realmente no importará cuando el navegador muestre el texto. En su lugar, desea utilizar un salto de línea, que está representado por el
etiqueta.

Ejemplo:

Este es un nuevo párrafo. Y quiero usar varias líneas nuevas. Así que lo estoy rompiendo.

Esto no saldrá como lo siguiente:

Este es un nuevo párrafo.
Y quiero usar varias líneas nuevas.
Así que lo estoy rompiendo.

En cambio, saldrá así:

Este es un nuevo párrafo. Y quiero usar varias líneas nuevas. Así que lo estoy rompiendo.

Entonces, ¿cómo se dividen los textos en nuevas líneas para que se muestre así:

Este es un nuevo párrafo.
Y quiero usar varias líneas nuevas.
Así que lo estoy rompiendo.

Mediante el uso de saltos de línea.

Ejemplo:

Este es un nuevo párrafo.
Y quiero usar varias líneas nuevas.
Así que lo estoy rompiendo.

Dicho esto, es importante tener en cuenta que el salto de línea (
) es una etiqueta vacía, por lo que no tiene que cerrarla.

Formato de texto en HTML

formatear texto en HTML

El siguiente paso es formatear su texto en HTML. Aquí es donde puede indicar si desea que su texto aparezca en negrita, cursiva, subrayado, subíndice, superíndice, etc. Esta es una guía básica, por lo que esta sección no será el principio del formato. En cambio, solo incluiremos algunas etiquetas de formato básicas. El proceso para usar otras formas de formateo es simple: solo busque la etiqueta que desee y continúe:

Usando negrita: Él es un muchacho sale como Él es un muchacho

Usando cursiva: Él es un muchacho sale como Él es un muchacho

Texto subrayado: Él es un muchacho sale como Él es un muchacho. Vale la pena señalar que el la etiqueta fue desaprobada en HTML 4.01 y se redefinió para representar texto estilísticamente diferente en HTML5. Como resultado, se recomienda usar CSS para indicar el texto que debe subrayarse. Dado que este artículo es una guía básica, lo mantenemos simple.

Usando subíndice: Él es un muchacho sale como Él es un muchacho

Usando superíndice: Él es un muchacho sale como Él es un muchacho

Para otras etiquetas que se pueden usar para formatear, puede consultar el glosario al final de este recurso, donde hemos incluido muchas etiquetas HTML relevantes.

Listas ordenadas y no ordenadas

Tarde o temprano tendrá que crear listas. Las listas pueden ser ordenadas (es decir, numeradas) o no ordenadas (es decir, sin numerar).

Aquí hay un ejemplo de una lista ordenada:

  1. Objeto 1
  2. Artículo 2
  3. Artículo 3

Aquí está cómo crearlo:

  1. Objeto 1
  2. Artículo 2
  3. Artículo 3

Aquí hay un ejemplo de una lista desordenada:

  • Objeto 1
  • Artículo 2
  • Artículo 3

Aquí está cómo crearlo:

  • Objeto 1
  • Artículo 2
  • Artículo 3

Si aún no es obvio. Aquí hay un desglose:

los

  • La etiqueta se utiliza para indicar cada elemento de la lista. Al hacer una lista, puede usar el
      etiqueta para indicar una lista ordenada (“o” = ordenada y “l” = lista) o el