La guía definitiva de HTML para principiantes

Última actualización en 15 Mayo 2018

Hace veinte años, incluso si solo eres un blogger 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 incluso conocer los conceptos básicos de HTML ya no es necesario para hacer un sitio or correr un blog.

El problema con esto es que si no conoce algunos conceptos básicos, puede meterse fácilmente en problemas reales en su blog y tiene 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.

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.

Preguntas y respuestas para principiantes

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- ¿Es HTML sensible a 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 Texto sublime, á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!


Ir Arriba

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:

<! DOCTYPE html> <html> <head> <title> Mi primera página web </title> </head> <body> <p> Hello World! </p> </body> </html>

Salida:

Felicidades Has creado tu primer archivo HTML. No tienes que entenderlo en este punto. 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 tratemos de entenderlo desde el código "¡Hola mundo!" Los siguientes elementos son las partes obligatorias para cada archivo HTML.

  • <! DOCTYPE html> = Es una declaración para el navegador que este es un archivo HTML. Debe especificarlo antes de la etiqueta <html>.
  • <Html> </ html> = Este es el elemento raíz de un archivo HTML. Todo lo que escribes va entre <html> y </html>.
  • <Head> </ head> = Esta es la parte de información meta para un navegador. Los códigos dentro de esta etiqueta no tienen salida visual.
  • <Body> </ body> = Esta es la parte que representa un navegador web. Lo que ves exactamente en un sitio web es la representación de códigos entre <body> y </body>.


Ir Arriba

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 usualmente tienen 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 inclinada adicional (/) después del signo menor que (<).

(2a) Etiquetas para la cabeza

Todas las etiquetas de cabecera van entre <head> y </head>. Contienen información meta para el navegador web y los motores de búsqueda. Básicamente no tienen salida visual.

<Title> </ title>

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:

<title> Mi primera página web </title>
La etiqueta del título aparece en la parte superior de su navegador.

<link>

La etiqueta de enlace enlaza tu página HTML con recursos externos. Su uso principal es vincular páginas HTML con hojas de estilo CSS. Es una etiqueta de cierre automático y no necesita el final </link>. Aquí rel se refiere a la relación con el archivo y src significa la fuente.

Código:

<link rel = "hoja de estilo" type = "text / css" src = "style.css">

<Meta>

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 = "Esta es la breve descripción que muestran los motores de búsqueda"

<script> </script>

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:

<script type = "text / javascript" src = "scripts.js"> </script>

<noscript> </noscript>

La etiqueta Noscript funciona cuando los scripts están deshabilitados en un navegador web. Hace que una página sea compatible para ellos que no permiten scripts en sus navegadores web.

Código:

<noscript> <p> ¡Ay! Los scripts están deshabilitados. </p> </noscript>

(2b) etiquetas del cuerpo

Todas las etiquetas de cuerpo van entre <body> y </body>. 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.

<h1> </h1> a <h6> </h6>

Estas son las etiquetas de encabezado. El encabezado más importante está etiquetado con <h1> y el menos importante con <h6>. Deberías usarlos en la jerarquía correcta.

Código:

<h1> Este es un encabezado h1 </h1> <h2> Este es un encabezado h2 </h2> <h3> Este es un encabezado h3 </h3> <h4> <h4> <h4> <h5> > Este es un encabezado h5 </h5> <h6> Este es un encabezado h6 </h6>

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:

<p> Puedes resaltar tu texto de muchas maneras. </p> <p> Puedes <strong> negrita </strong>, <u> subrayado </u>, <em> en cursiva </em>, <marcar > marca </mark>, <sub> subíndice </sub>, <sup> superscript </sup> ¡y más! </p>

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:

<! - <p> Puedes comentar cualquier código al rodearlos de esta manera </p> ->

(2c) Otras etiquetas HTML importantes

<a> </a>

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 igual. Tiene una apertura <a> y una parte de cierre </a>. El texto que desea anclar va entre <a> y </a>.

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.
  • target = "" = 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 enlazada. Si no confía en la página vinculada, puede definir rel = "nofollow".

Código:

<p> <a target="_blank" href="https://www.google.com/"> Haz clic aquí </a> para ir a Google. Se abrirá en una nueva pestaña. </p> <p> <a target="_self" href="https://www.google.com/"> Haga clic aquí </a>. También lo llevará a Google, pero se abrirá en la pestaña actual. </p>

Salida:

<img />

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

<img /> es una etiqueta de cierre automático. No necesita el cierre tradicional como </img>. Hay algunos atributos que necesita saber 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:

<p> Este es el Googleplex en agosto 2014. </p> <p> Esta imagen tiene un ancho de píxeles 500 y una altura de píxeles 375. </p> <img src = "https: //upload.wikimedia. org / wikipedia / commons / 0 / 0e / Googleplex-Patio-Aug-2014.JPG "alt =" Sede de Google en agosto 2014 "width =" 500 "height =" 375 "/>

Salida:

Consejos: ¿Quieres insertar una imagen pulsable? Envuelva el código de la imagen con una etiqueta <a>. Ver cómo va.

<ol> </ol> o <ul> </ul>

La etiqueta de lista es para crear una lista de elementos. <ol> significa listas ordenadas (lista numerada) y <ul> representa listas desordenadas (viñetas).

La lista de elementos dentro de <ol> o <ul> está etiquetada con <li> </li>. li significa lista. Puede tener tantos <li> como desee dentro de la etiqueta <ol> o <ul> principal.

Código:

<p> Esta es una lista ordenada: </p> <ol> <li> Item 1 </li> <li> Item 2 </li> <li> Item 3 </li> </ol> <p> Esta es una lista desordenada: </p> <ul> <li> Item 1 </li> <li> Item 2 </li> <li> Item 3 </li> </ul>

Salida:

<Table> </ table>

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

<table> </table> es el código padre externo. En esta etiqueta, <tr> significa fila de tabla, <td> significa columna de tabla y <th> significa encabezado de tabla.

Código:

<table> <tr> <th> Nombre </th> <th> Age </th> <th> Profession </th> </tr> <tr> <td> Jo <td> 27 </td> < td> Businessman </td> </tr> <tr> <td> Carol </td> <td> 26 </td> <td> Nurse </td> </tr> <tr> <td> Simone < / td> <td> 39 </td> <td> Professor </td> </tr> </table>

Salida:

Nota: Los valores dentro de la primera <tr> son encabezados. Por lo tanto, usamos <th> que aplica un 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:

  • <thead> </thead> = Para envolver los encabezados de una tabla. Se imprime en cada página dividida de la tabla.
  • <tbody> </tbody> = Para envolver los datos principales de una tabla. Puedes tener tantos <tbody> como necesites. Una etiqueta <tbody> significa un grupo separado de datos.
  • <tfoot> </tfoot> = 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.

Aquí es cómo podemos agrupar nuestra tabla ejemplificada en <thead>, <tbody> y <tfoot>:

Código:

<table> <thead> <tr> <th> Name </th> <th> Age </th> <th> Profession </th> </tr> </thead> <tbody> <tr> <td> John </td> <td> 27 </td> <td> Businessman </td> </tr> <tr> <td> Carol </td> <td> 26 </td> <td> Nurse </ td> </tr> <tr> <td> Simone </td> <td> 39 </td> <td> Professor </td> </tr> </tbody> <tfoot> <tr> <td> Total de personas: </td> <td> 3 </td> </tr> </tfoot> </table>

Salida:

<Form> </ form>

El elemento de formulario se utiliza para crear formularios interactivos para páginas web. Un formulario HTML contiene varios elementos consecutivos. Por ejemplo: <label>, <input>, <textarea> 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 muy básico es el texto. Se escribe como <input type = ”text”>. 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 <label> se utiliza para crear etiquetas y asociarlas con entradas. La regla de asociar etiquetas con las entradas es que tienen el mismo valor en el atributo for = ”” de la etiqueta y el atributo id = ”” de la entrada.

Código:

<form action = "#"> <label para = "firstname"> First Name: </label> <input type = "text" id = "firstname"> <br> <label for = "lastname"> Apellido: </label> <input type = "text" id = "lastname"> <br> <label for = "bio"> Breve biografía: </label> <textarea id = "bio" rows = "10" cols = " 30 "placeholder =" Ingrese su biografía aquí ... "> </textarea> <br> <label> Género: </label> <br> <label for =" male "> Male </label> <input type = "radio" name = "gender" id = "male"> <br> <label for = "female"> Female </label> <input type = "radio" name = "gender" id = "female"> <br > <input type = "submit" value = "Submit"> <form>

Salida:

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


Ir Arriba

3- Atributos HTML

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

Un atributo tiene el mismo nombre atributename = ”” y se encuentra en la etiqueta HTML de apertura. El valor del atributo va entre las comillas dobles.

id = "" y clase = ""

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:

<h1 class = "heading"> Este es el título principal </h1>

href = ””

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

Código:

<a href="https://www.google.com/"> Google </a>

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:

<img src = "https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" />

alt = "”

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

Código:

<img src = "https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" alt = "Google's Headquarter" />

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:

<h2 style = "color: red"> Este es otro título </h2>


Ir Arriba

4- Visualización de Código: Bloque vs Inline

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

Ej .: <div>, <p>, <h1> - <h6>, formulario, etc.

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

Ej .: <a>, <span>, <br>, <strong>, <img> 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:

<! DOCTYPE html> <html> <head> <title> Mi primera página web </title> </head> <body> <h2> Este es un encabezado de H2. Tiene pantalla Bloqueada. </h2> <h2> Esto es <u> otro </u> encabezado H2. Aquí la etiqueta de subrayado tiene una visualización en línea. </h2> </body> </html>

Salida:


Ir Arriba

5- Cita doble vs comilla simple 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, comillas simples y comillas dobles 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.


Ir Arriba

6- HTML semántico vs 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é es mejor HTML5? En versiones anteriores, los elementos HTML se identificaban por id / nombres de clase. Por ejemplo: <div id = "article"> </div> se consideró un artículo.

En HTML5, la etiqueta <article> </article> se representa a sí misma como un artículo sin necesidad de ningún identificador de ID / 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:

  • <main> </main> = Esto es para envolver el contenido principal que desea mostrar a sus espectadores.
  • <header> </header> = Esto es para marcar la parte del encabezado de un contenido como título o autor meta.
  • <article> </article> = Especifica un contenido definido por el usuario o independiente para sus espectadores.
  • <sección> </ sección> = 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.
  • <footer> </footer> = Aquí es donde el contenido de su pie de página, descargo de responsabilidad o texto de copyright pertenece.
  • <audio> </audio> = Le permite insertar archivos de audio sin tener ningún problema de plugin.
  • <video> </video> = Me gusta <audio>, puedes insertar videos usando esta etiqueta sin problemas de complementos.

Una estructura HTML5 simple se vería así:

<! DOCTYPE html> <html> <head> <meta charset = "utf-8" /> <title> Mi primera página web </title> </head> <body> <header> <nav> <ul> < li> Menu 1 </li> <li> Menu 2 </li> </ul> </nav> </header> <main> <article> <header> <h2> Este es el título del artículo </ h2> <p> Publicado por John Doe </p> </header> <p> El contenido del artículo va aquí </p> </article> </main> <footer> <p> Copyright 2017 John Doe </ p> </footer> </body> </html>


Ir Arriba

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 en ella. Puede confirmar a través de la 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.


Ir Arriba

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: