Guía HTML básica para Dummies

Última actualización el 05 de octubre de 2020


Hace veinte años, incluso si eres un bloguero aficionado, tenías que saber algo de codificación web para protegerte o para agregar una función simple a tu sitio. Pero ahora hay tantos editores y complementos disponibles que ya no es necesario conocer los conceptos básicos de HTML.

El problema con esto es que si no conoces algunos conceptos básicos, puedes meterte fácilmente en problemas reales en tu blog y tener que contratar a un desarrollador costoso para solucionar lo que puede ser un problema menor. No solo eso, sino que crear cambios en tu blog, como agregar un widget de texto personalizado, requiere un poco de conocimiento.

Código HTML.
“Códigos” HTML.

Y si experimenta que el diseño del contenido no se ve bien, el conocimiento de HTML puede hacer que vuelva a encarrilarse.

Estas son algunas de nuestras versiones de la guía HTML para bloggers y propietarios de negocios en línea que no son expertos en tecnología.

HTML es la columna vertebral de Internet de hoy. Millones de sitios web juntos formaron Internet. Donde HTML es el bloque de construcción de todos estos sitios web.

Antes que empecemos…

1. ¿Qué es HTML?

HTML es la abreviatura de Hyper Text MArkupe Lel lenguaje Es el lenguaje estándar para etiquetar contenidos para navegadores web.

HTML está representado por "Elementos". Los elementos también se conocen como "etiquetas".

2. ¿Por qué se necesita HTML?

Los navegadores web solo pueden representar un sitio web cuando está escrito en su idioma compatible. HTML es el lenguaje de marcado más común y tiene la mayor aceptación para los navegadores web.

Por eso necesitas HTML.

3. ¿HTML distingue entre mayúsculas y minúsculas?

HTML no distingue entre mayúsculas y minúsculas. Pero la mejor práctica es escribir HTML con los casos apropiados.

Pasos para crear su primer archivo HTML

Puede crear un archivo HTML básico usando el Bloc de notas en su computadora. Pero será doloroso para escribir muchas líneas de códigos.

Necesitas un editor de código. Un buen editor de código hará que sea más fácil escribir y organizar códigos grandes.

Yo uso y recomiendo notepad ++ (libre y de código abierto) para escribir lenguajes web. Hay otros editores que puedes usar como Sublime texto, átomo etc.

Aquí está lo que tú necesitas hacer:

  1. Instalar un editor de código
  2. Abrelo
  3. Crear un nuevo archivo
  4. Guárdalo como un archivo .html

¡Estás listo para ir!

Ejemplo de editor de código Atom
Editor de código - Atom

1. ¡Hola mundo!

Copie y pegue el siguiente código en su nuevo archivo HTML y guárdelo. Ahora ejecútalo en tu navegador web.

Código:

Mi primera pagina web Hola Mundo!

Salida:

Felicidades! Has creado tu primer archivo HTML. No tienes que entenderlo en este momento. Lo cubriremos en breve.

Entendiendo la estructura HTML

Cada archivo HTML tiene una estructura desnuda común. Aquí es donde todo comienza. Y cada página grande de códigos llegará a esta estructura después de recortarla.

Así que intentemos entenderlo desde el "¡Hola mundo!" código. Los siguientes elementos son las partes obligatorias para cada archivo HTML.

  • = Es una declaración al navegador de que se trata de un archivo HTML. Debe especificarlo antes del etiqueta.
  • = Este es el elemento raíz de un archivo HTML. Todo lo que escribes va entre y .
  • = Esta es la parte de información meta para un navegador. Los códigos dentro de esta etiqueta no tienen salida visual.
  • = Esta es la parte que representa un navegador web. Lo que ve exactamente en un sitio web es la representación de códigos entre y .

2. Etiquetas HTML

HTML es la colaboración de cientos de etiquetas diferentes. Necesitas aprender cómo funcionan. También debe asegurarse de que los hayan utilizado de la manera correcta.

Las etiquetas HTML suelen tener una etiqueta de apertura y una de cierre. La etiqueta de apertura tiene la palabra clave rodeada por un signo menor que (<) y mayor que (>). La etiqueta de cierre tiene todo lo mismo, pero una barra diagonal adicional (/) después del signo menor que (<).

(2a) Etiquetas para la cabeza

Todas las etiquetas de la cabeza van entre y . Contienen metainformación para navegadores web y motores de búsqueda. Básicamente, no tienen salida visual.

La etiqueta de título define el título de una página web que está visible en la pestaña del navegador. Esta información es utilizada por programas web y buscadores. Puede tener un título más alto por archivo HTML.

Código:

Mi primera pagina web
Etiqueta de título: ejemplos de HTML
La etiqueta del título aparece en la parte superior de su navegador.

La etiqueta de enlace vincula su página HTML con recursos externos. Su uso principal es vincular la página HTML con hojas de estilo CSS. Es una etiqueta de cierre automático y no necesita el final. . Aquí rel significa relación con el archivo y src significa la fuente.

Código:

Meta es otra etiqueta de cierre automático que proporciona información meta de un archivo html. Los motores de búsqueda y otros servicios web utilizan esta información. Las etiquetas meta son una necesidad si desea optimizar su página para los motores de búsqueda.

Código:

<meta name="description" content="This is the short description that search engines show"

La etiqueta de script se utiliza para incluir un script del lado del servidor o para crear un enlace a un archivo de script externo. Puede tener dos atributos en la etiqueta de apertura. Uno es el tipo y otro es la fuente (src).

Código:

La etiqueta Noscript funciona cuando las secuencias de comandos están deshabilitadas en un navegador web. Hace que una página sea compatible con ellos que no permiten secuencias de comandos en sus navegadores web.

Código:

¡Pobre de mí! Los scripts están desactivados.

(2b) etiquetas del cuerpo

Todas las etiquetas corporales van entre y . Tienen salidas visuales. Aquí es donde se realiza la mayor parte del trabajo. Tienes que usar estas etiquetas para estructurar el contenido de tu página principal.

a

Estas son las etiquetas de encabezado. El encabezado más importante está etiquetado con y lo menos importante con . Debería utilizarlos en la jerarquía correcta.

Código:

Este es un encabezado h1 Este es un encabezado h1 Este es un encabezado h1 Este es un encabezado h2 Este es un encabezado h2 Este es un encabezado h2

Salida:

Etiquetas de formato

El texto en un archivo html se puede formatear usando muchas etiquetas de formato. Será necesario cuando desee resaltar una palabra o línea de su contenido.

Código:

Puede resaltar su texto de muchas formas. Puede negrita , subrayado , cursiva , marca , subíndice , superíndice y más.

Salida:

Puede desviar algunos códigos de rending usando la etiqueta de comentario. El código se mostrará en el código fuente pero no se procesará. El uso principal de esta etiqueta es para crear documentación de archivos html para futuras referencias.

Ejemplo:

You can comment out any code by surrounding them in this way -->

(2c) Otras etiquetas HTML importantes

El ancla es una etiqueta invaluable que se utiliza en casi todas partes. No verá ninguna página web en línea sin al menos un enlace de anclaje.

La estructura es la misma. Tiene una parte de apertura y una de cierre . El texto que desea anclar va entre y .

Hay algunos atributos que definen dónde y cómo va el usuario después de hacer clic en él.

  • ahref = "" = Define el enlace de destino. El enlace va entre las comillas dobles.
  • objetivo = "" = Define si la URL se abrirá en una nueva pestaña del navegador o en la misma pestaña. target = ”_ blank” es para la nueva pestaña y target = ”_ self” es para abrir en la misma pestaña.
  • rel = "" = Define la relación de la página actual con la página vinculada. Si no confía en la página vinculada, puede definir rel = ”nofollow”.

Código:

Haga clic aquí para ir a Google. Se abrirá en una nueva pestaña. Haga clic aquí . También lo llevará a Google, pero se abrirá en la pestaña actual.

Salida:

La etiqueta de imagen es otra etiqueta importante sin la cual no puedes imaginar muchos sitios web basados ​​en imágenes.

es una etiqueta de cierre automático. No necesita el cierre tradicional como . Hay algunos atributos que necesita conocer antes de poder usarlo correctamente.

  • src = "" = Esto es para definir el enlace fuente de la imagen. Pon el enlace justo entre las comillas dobles.
  • alt = "" = Es sinónimo de texto alternativo. Cuando su imagen no se está cargando, este texto le dará a los usuarios una idea de la imagen que falta.
  • ancho = "" = Define el ancho de una imagen en píxeles.
  • Altura = "" = Define la altura de una imagen en píxeles.

Ejemplo:

Este es el Googleplex en agosto de 2014. Esta imagen tiene un ancho de 500 píxeles y una altura de 375 píxeles.

Salida:

Sugerencias: ¿Quiere insertar una imagen en la que se pueda hacer clic? Envuelva el código de la imagen con una etiqueta. Ver cómo va.

o

La etiqueta de lista sirve para crear una lista de elementos. significa listas ordenadas (lista numerada) y significa listas desordenadas (viñetas).

Los elementos de la lista dentro del o está etiquetado con . li significa lista. Puedes tener tantos como quieras dentro del padre o etiqueta.

Código:

Esta es una lista ordenada: Artículo 1 Elemento 2 Artículo 3 Esta es una lista desordenada: Artículo 1 Elemento 2 Artículo 3

Salida:

Etiqueta de tabla es para crear una tabla de datos. Hay algunas etiquetas de nivel interno que definen encabezados de tabla, filas y columnas.

es el código principal externo. En esta etiqueta, representa la fila de la mesa, significa columna de tabla y significa encabezado de tabla.

Código:

Nombre Años Profesión Jo 27 Empresario Villancico 26 enfermera Simone 39 Profesor

Salida:

Nota: valores dentro del primero son encabezados. Entonces, usamos que aplica efecto de texto en negrita al texto.

Agrupación de tablas

Puede ampliar la funcionalidad de una tabla utilizando elementos de agrupación de tablas. Habrá ocasiones en las que necesite crear tablas grandes que se dividan en varias páginas.

Al agrupar los datos de la tabla en encabezado, cuerpo y pie de página, puede permitir el desplazamiento independiente. El encabezado y la parte del cuerpo se imprimirán en cada página donde se haya extendido la tabla.

Las etiquetas de agrupación de tablas son:

  • = Para envolver los encabezados de una tabla. Se imprime en cada página dividida de la tabla.
  • = Para envolver los datos principales de una tabla. Puedes tener tantos como necesites. UNA etiqueta significa un grupo separado de datos.
  • = Para envolver la información de pie de página de una tabla. Se imprime en cada página dividida de la tabla.

Tenga en cuenta que no es obligatorio utilizar la agrupación. Puedes usarlo para que las tablas más grandes sean más legibles. Mientras que algunos desarrolladores especiales utilizan marcadamente estas etiquetas como selectores de CSS.

Así es como podemos agrupar nuestra tabla ejemplificada en , y :

Código:

Nombre Años Profesión Juan 27 Empresario Villancico 26 enfermera Simone 39 Profesor Total personas: 3

Salida:

El elemento de formulario se utiliza para crear formularios interactivos para páginas web. Un formulario HTML contiene varios elementos consecutivos. Por ejemplo:, , etc.

El atributo de acción en la forma es muy importante. Apunta a una página del lado del servidor o de un tercero para procesar la información. Para el procesamiento, primero debe definir un método.

Puede utilizar cualquiera de los dos métodos, obtener o publicar. Get envía toda la información en el formato de URL donde Post envía la información en el cuerpo del mensaje.

Hay muchos tipos de entrada para formularios. El tipo de entrada más básico es el texto. Esta escrito como . Los tipos también pueden ser radio, casilla de verificación, correo electrónico, etc. Debe haber una entrada de tipo de envío en la parte inferior para crear un botón de envío.

La etiqueta se utiliza para crear etiquetas y asociarlas con entradas. La regla de asociar etiquetas con las entradas es que tengan el mismo valor en para = ”” atributo de etiqueta y id = ”” atributo de entrada.

Código:

Nombre de pila: Apellido: Breve biografía: Género: Masculino Hembra

Salida:

Nota: he apuntado la acción a un valor nulo porque no estaba conectada a ningún servidor para procesar la información.

3. Atributos HTML

Los atributos son un tipo de modificadores para las etiquetas HTML. Añaden nuevas configuraciones a las etiquetas HTML.

Un atributo se parece a attributename = ”” y se encuentra en la etiqueta HTML de apertura. El valor del atributo va entre comillas dobles.

id = ”” y class = ””

ID y clase son los identificadores de las etiquetas HTML. Los diferentes nombres se designan a diferentes elementos HTML utilizando identificadores. Puede utilizar un identificador de clase para varios elementos. Pero no puede usar un identificador de identificación para múltiples elementos.

Código:

Este es el titulo principal

href = ””

href significa referencia de hipertexto. Señalan a los usuarios a enlaces de referencia. La etiqueta de ancla usa href para enviar a los usuarios a una URL de destino.

Código:

Google

src = ””

src significa fuente. Define la fuente de un medio o recurso que está utilizando en el archivo HTML. La fuente puede ser una URL local o de terceros.

Código:

alt = ""

alt representa la alternativa. Es un texto de respaldo que se usa cuando un elemento HTML no puede cargarse.

Código:

estilo = ””

atributo de estilo se utiliza a menudo en las etiquetas HTML. Hace el trabajo de CSS dentro de la etiqueta HTML. Sus propiedades de estilo van entre las comillas dobles.

Código:

Este es otro titulo

4. Visualización de código: bloque vs en línea

Algunos elementos siempre comienzan en una nueva línea y toman todo el ancho disponible. Estos son elementos de "Bloque".

Ex: , , - , forma, etc.

Algunos elementos ocupan solo el espacio requerido y no comienzan en una nueva línea. Estos son elementos "en línea".

Ej: ,, ,, etc.

Tendrá que diferenciar los elementos de bloque de la línea cuando vaya a utilizar estilos CSS. En esta guía HTML, no es muy necesario.

Código:

Mi primera pagina web Este es un encabezado H2. Tiene pantalla de bloque. Este es otro título H2. Aquí la etiqueta de subrayado tiene visualización en línea.

Salida:

5. Comillas dobles frente a comillas simples en HTML

Esta pregunta es muy obvia. ¿Qué debes usar en HTML? ¿Comillas simples o dobles? La gente parece usar ambos, pero ¿cuál es el correcto?

En HTML, la comilla simple y la comilla doble son iguales. No hacen ninguna diferencia en la salida.

Puedes usar a quien prefieras. Pero mezclar ambos en una página de códigos se considera una mala práctica. Debes ser consistente con cualquiera de ellos.

6. HTML semántico frente a HTML no semántico

HTML semántico es la última versión de HTML, que también se llama HTML5. Es la versión desarrollada de HTML no semántico y XHTML.

¿Por qué HTML5 es mejor? En versiones anteriores, los elementos HTML se identificaban mediante nombres de id / class. Por ejemplo: fue considerado un artículo.

En HTML5, La etiqueta se representa a sí misma como un artículo sin necesidad de ningún ID / identificador de clase.

Por el bien de HTML5, ahora los motores de búsqueda y otras aplicaciones web pueden entender mejor una página web. Sitios web semánticos han demostrado hacer mejor para SEO.

Aquí hay una lista de algunas etiquetas HTML5 populares:

  • = Esto es para envolver el contenido principal que desea mostrar a sus espectadores.
  • = Esto es para marcar la parte del encabezado de un contenido como título o autor meta.
  • = Especifica un contenido definido por el usuario o independiente para sus espectadores.
  • = Puede agrupar cualquier código como encabezado, pie de página o barra lateral. Se puede decir, es la forma semántica de un div.
  • = Aquí es donde el contenido de su pie de página, descargo de responsabilidad o texto de copyright pertenece.
  • = Le permite insertar archivos de audio sin tener ningún problema de plugin.
  • = Me gusta , puede insertar videos usando esta etiqueta sin problemas de complementos.

Una estructura HTML5 simple se vería así:

Mi primera pagina web Menú 8 Menú 1 Este es el título del artículo. Publicado por John Doe El contenido del artículo va aquí Derechos de autor 2 John Doe

7. Validación HTML

La mayoría de los profesionales de la web validan su código después de terminarlo. ¿Por qué es necesario validar un código cuando funciona bien?

Hay dos razones posibles para validar sus códigos:

  1. Le ayudará a hacer que su código sea compatible con varios navegadores y plataformas. Es posible que el código no muestre ningún error en su navegador actual, pero podría aparecer en otro. La validación del código lo arreglará.
  2. Los motores de búsqueda y otros programas web pueden dejar de rastrear su página si tiene errores. Puede confirmar mediante validación que no tiene ningún error importante.

W3C Validator Es el servicio más popular para la validación de código. Tienen varios métodos para validar códigos. Puede cargar un archivo o ingresar directamente el código en su motor de validación.

8. Otros recursos útiles

HTML es un tema de aprendizaje permanente. Las versiones más actualizadas de HTML pueden llegar antes. Así que tienes que estar al día y seguir practicando. La práctica es lo que aces HTML.

Aquí hay algunos recursos útiles para usted: