Los 7 conceptos básicos que debes saber de HTML

7 de diciembre de 2015
conceptos basicos html

Actualmente se habla mucho de que se puede construir una página web completa y optimizada sin necesidad de saber HTML. Y es cierto, pero a la hora de diseñar te vas a encontrar con problemas en los que pensarás «si yo supiera algo de código podría solucionar este inconveniente…». Pues aquí te muestro una pequeña guía para aprender lo básico del código HTML.

Índice del artículo

¿Qué es el código HTML?

Se trata de un lenguaje de programación que se utiliza para el desarrollo de páginas web. Las siglas HTML corresponden a HyperText Markup Language («lenguaje de marcas de hipertexto». Este lenguaje permite estructurar el texto de los documentos y se basa en etiquetas que determinan cómo debe mostrarse el texto y los atributos que pueden tomar dichas etiquetas.

Conceptos básicos del Código HTML

1. Las partes de la página web

Toda página web se divide en dos partes principales: la cabecera y el cuerpo (head y  body).

La cabecera es la parte «no visible» de la página web. Esto significa que todo lo que se indique ahí no aparecerá en la página como tal, pero sin embargo es una parte importantísima: ahí se incluyen las etiquetas meta que se usan para describir la página (imprescindibles para el posicionamiento SEO), el título de la página, el idioma, información relacionada con hojas de estilo, etc.

En el body se introducen todas las etiquetas que nos permiten dar formato al documento.

Como esta guía está destinada a pequeñas modificaciones en el cuerpo de la página web, describiré las etiquetas del body y no mencionaré nada más sobre la cabecera. Pero si necesitas ahondar en el tema o en más lenguajes a parte de html, te dejo esta página web, que es excelente para pequeñas consultas que necesites.

2. Los títulos

Las etiquetas que definen los títulos se pueden utilizar para marcar el título y/o los diferentes apartados que forman el documento, o simplemente para resaltar cualquier texto. Existen seis tipos de títulos, que van de la etiqueta número 1 (la más grande) a la 6 (la más pequeña). Esto también es muy importantes para el posicionamiento en buscadores, ya que les estás indicando que lo que está entre estas etiquetas es importante y característico de tu web.

titulos html

3. Los párrafos

Los párrafos se delimitan con las etiquetas <p>…</p>. Un párrafo es un bloque de texto que se muestra separado del resto por un salto de línea. Si dentro del párrafo queremos hacer un salto, pero que se siga considerando un único párrafo (dar un intro en word) escribiríamos la etiqueta <br>.

Sin embargo, si quieres escribir de manera libre y que te detecte los saltos de línea, solo tienes que escribir dentro de la etiqueta <pre>…</pre>. El único inconveniente de esto es que si copias el texto de otro documento y tiene además listas, títulos, negritas… es posible que no te lo detecte todo.

parrafo html

4. Las listas

Existen tres tipos de listas, las ordenadas, las no ordenadas y las listas de definiciones.

Para las listas ordenadas usamos las etiquetas <ol>…</ol> para delimitar la lista, y para las listas no ordenadas, las etiquetas <ul>…</ul>. Para insertar cada elemento de la lista se introducen las etiquetas <li>…</li>.

En las listas de definiciones, insertamos las etiquetas <dl>…</dl> para delimitar la lista, y <dt>…</dt> y <dd>…</dd> para el título y definición respectivamente.

listas html

5. Las tablas

Para realizar una tabla debemos tener en cuenta que se está realizando de izquierda a derecha y de arriba abajo. Es decir, empezamos desarrollando la primera fila, dentro de ella, las determinadas columnas que haya, y a continuación, la siguiente fila.

La tabla debe ir entre la etiqueta <table>, especificando el borde que deseamos. Los comandos que nos delimitan las filas son <tr>…</tr>, y para las columnas <td>…</td>.  Para combinar varias columnas o filas utilizamos los atributos colspan o rowspan respectivamente. Si quieres destacar una fila o columna para que se comporte como título utilizamos <th>…</th>. Te muestro un ejemplo.

tabla html

6. Los enlaces

Los enlaces nos permiten acceder a otras páginas, sitios web, ficheros (de música, vídeos, programas, imágenes, etc.), permiten descargar archivos de la red y acceder a otras partes o secciones dentro de un documento. Se realizan con la etiqueta <a href="http://www.enlace.com">...</a>. Aquí debo mencionar un atributo muy importante: target="_blank", para que el enlace se abra en una pestaña nueva del navegador.

7. Atributos y estilos

Por último, he querido hacer una selección de los atributos y estilos más usados en html. Lo normal es que los estilos se especifiquen en el fichero css, pero como he pretendido que esta guía sirva para realizar pequeñas modificaciones esporádicas, considero que aplicar estilos directamente en una etiqueta de html es una opción recomendable y que nos permite dar solución a problemas que no podemos solventar en nuestro cms, o porque la plantilla no nos da opción.

A continuación te muestro una serie de atributos. Éstos se colocan siempre dentro de una etiqueta, por ejemplo de la siguiente manera: <body bgcolor="blue">...</body>

  • background="nombre-del-fichero": Imagen de fondo
  • bgcolor="color": Color del fondo
  • border="número": Tamaño del borde de una imagen o tabla
  • bordercolor="color": Color del borde
  • width="px o %": Ancho de una imagen, tabla o bloque. Se puede especificar en píxeles o en porcentaje, siendo 100% el tamaño completo de la pantalla
  • height="px o %": Altura de una imagen, tabla o bloque
  • align="top, middle, bottom, left, right": Alineación de una imagen, texto, título, tabla… arriba, en medio, abajo, izquierda o derecha, respectivamente

Te adjunto una lista de los colores que reconoce html por el nombre. Para el resto de colores, deberás introducir el código en concreto, en formato hexadecimal.

colores html

Finalmente, te muestro una pequeña lista de estilos más, que en este caso son etiquetas entre las que irá el texto al cuál quieres aplicar dicho estilo:

  • Negrita: <b>…</b> o <strong>…</strong>
  • Cursiva: <i>…</i>, <em>…</em>, <cite>…</cite> o <dfn>…</dfn>
  • Subrayado: <u>…</u>
  • Tachado: <s>…</s>
  • Subíndice: <sub>…</sub>
  • Superíndice: <sup>…</sup>
  • Letra pequeña: <small>…</small>
  • Letra grande: <big>…</big>

¿Conoces más etiquetas y atributos que son importantes?

Esta es mi pequeña guía de apoyo con el código HTML. Espero que te haya servido de ayuda. Te recomiendo practicar en cualquier editor de texto con una plantilla cualquiera, en la que puedas experimentar… «¿qué pasará si cambio esta etiqueta por esta otra?», recargas la página y ves el resultado. Es la manera más sencilla y útil para aprender y descubrir nuevas etiquetas y atributos.

Con este artículo pretendía explicar lo más básico de html, pero seguro que me he dejado conceptos también básicos que debería haber incluido. Especifícalos y cuéntame tu opinión, e iré mejorando está guía.

Y por supuesto, si te ha parecido interesante y te ha gustado, ¡comparte!

¡Haz clic para puntuar este artículo!
(Votos: 23 Promedio: 4.5)

Únete a mi lista de emails

Newsletter

Déjame tu nombre y tu email para unirte a mi newsletter. Te enviaré un mensajito cuando escriba un nuevo post contándote brevemente de qué va, para que si te parece interesante entres a leerlo.

También te avisaré de novedades o noticias sobre WordPress, diseño web, Divi, etc. que puedan ser de tu interés.

¿Te apuntas?

Artículos relacionados

Cómo instalar una fuente en WordPress SIN PLUGINS

Cómo instalar una fuente en WordPress SIN PLUGINS

En este post te enseño una funcionalidad muy útil para tu página web: instalar una tipografía o fuente personalizada a mano, sin necesidad de activar ningún plugin, y de forma muy muy sencilla. ¿Por qué instalar a mano una tipografía en tu página web?...

leer más
Cómo destacar un elemento del menú de tu página web con CSS

Cómo destacar un elemento del menú de tu página web con CSS

En este post quiero explicarte una manera muy útil y sencilla para poder hacer hincapié y resaltar un elemento del menú principal de tu página web. Por ejemplo, podrás poner una tipografía diferente para este elemento, cambiarlo de color, de tamaño, agregarle un color...

leer más

Comentarios

31 Comentarios

  1. Alvaro Peña

    Muy buen póst Leonor. Me lo guardo para cuando necesite personalizar algo más concreto en mis póst. ¿Sabes cómo podría crear líneas verticales con un grosor de 1px entre columnas en WordPress?
    Gracias.

    Responder
    • Leonor Cañuelo

      ¡Muchas gracias, Álvaro!
      Con código html se pueden realizar líneas horizontales, pero tengo entendido que si especificas un gran tamaño a esa línea, se convierte en vertical. No sé si te servirá, prueba con esto:
      < hr width="1" size="500" >
      Un saludo.

      Responder
  2. Noelia

    Leonor gran articulo me ha servido bastante la guía para aprender lo básico del código HTML. Como dices es muy útil a la hora de modificar ciertos parámetros del diseño. Gracias.

    Responder
    • Leonor Cañuelo

      ¡Muchas gracias a ti, Noelia! Me alegro que te sea útil, espero que poquito a poco lo empieces a practicar 🙂

      Responder
  3. Guadalupe

    Qué bueno el artículo. Te seguiré de cerca, me gusta la temática y cómo lo escribes

    Responder
    • Leonor Cañuelo

      ¡Qué alegría que te guste! Muchísimas gracias, Guadalupe 🙂

      Responder
  4. Elena

    ¡Muy buen post Leonor!, me lo guardo para ponerlo en practica….

    Responder
    • Leonor Cañuelo

      ¡Muchísimas gracias Elena, me alegro que te sea útil! 🙂

      Responder
  5. Patricia

    Un post de esos que hay que guardar, la verdad es que está muy bien explicado y consigues que parezca hasta sencillo… A ver cómo se nos da.
    Un besico

    Responder
    • Leonor Cañuelo

      ¡Es que es sencillo! 😀
      Ya verás, es cuestión de ir probando. Mucha suerte con tu blog, y muchas gracias por tu comentario, Patricia!

      Responder
  6. MirianmaON

    ¡Me ha encantado tu post Leonor! Me viene estupendamente. Gracias.

    Responder
    • Leonor Cañuelo

      ¡Muchísimas gracias! Este verano a darle caña al código html 💪💪

      Responder
  7. Judith Cuatrecasas

    Pero qué útil y completo! Enhorabuena!. Lo guardo y releo más tranquila 😉

    Responder
    • Leonor Cañuelo

      ¡Qué alegría que te guste Judith, muchísimas gracias! 😀

      Responder
  8. Laura Garrido

    Post para guardar! qué genia! muy bueno Leonor.

    Responder
  9. Ranferi De La Paz

    Leonor, quiero guardar este post.

    Responder
  10. José Manuel Peña

    Muy útil Leonor Aunque hoy día todo es más fácil siempre hay que meter mano a algo de código.

    Responder
    • Leonor Cañuelo

      Me alegro que te haya resultado útil, José Manuel. ¡Muchas gracias! 🙂

      Responder
  11. Andres arrieta

    Que buen texto me a sirvido mucho en my ustudio gracias leonor😁😁

    Responder
    • leonorcanuelo

      ¡Muchas gracias, Andrés! Me alegro que te haya sido útil.

      Responder
  12. Jose Emanuel

    Muy buen post leonor, muchas gracias.

    Responder
  13. Iván Quenta

    Está súper genial Gracias me sirvió mucho 😄

    Responder
    • leonorcanuelo

      ¡Muchas gracias, Iván! Me alegro que te haya ayudado 🤓

      Responder
  14. Renni Garibay

    Muchas gracias Leonor me fue util el post

    Responder
  15. Mauricio Melendez

    Hola se que no tiene mucho que ver pero quisiera preguntarle como adentrarme mas en la programación y poder hacer contenido de esto, apenas terminare las técnica el otro año en diseño de sitios pero quisiera desde ahorita adentrarme en esto pero la verdad no se ni por donde empezar ni que hacer, quiero aprovechar lo poco que se pero no se como empezar ni haciendo que:(

    Responder
  16. Ricardo

    Quiero posicionar el titulo con el fixed pero se quita el background no se que pasa.

    Responder
  17. Mann

    Recomiendas practicar en cualquier editor de texto con una plantilla cualquiera, pero, como se hace esto? voy a la plantilla en wordpress primero ? y luego un editor, debería ir al head de la plantilla ?
    Disculpa mi ignorancia 😉

    Responder
    • Leonor Cañuelo

      ¡Hola Mann! Gracias por tu comentario. 🙂

      Con esa recomendación lo que me refería es que puedes descargar una plantilla de html para practicar, no me refería a una plantilla de WordPress. En estas plantillas suelen venir uno o varios archivos html y otros css, y puedes editar a tu gusto modificando códigos y viendo qué va cambiando en la página web. Es la mejor forma para practicar y aprender.

      Con respecto a editar cosas puntuales en una plantilla de WordPress, dependerá de tu plantilla y de qué quieras editar. Te recomiendo por ejemplo este post en donde te explico cómo destacar un elemento del menú con css: https://leonorcanuelo.com/destacar-elemento-menu-css/, y este otro donde te explico varias modificaciones que puedes hacer en tu plantilla de WordPress con css: https://marketerosdehoy.com/diseno-web/editar-plantilla-wordpress-css/.

      Espero que te sean de utilidad. ¡Un saludo!

      Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Pin It on Pinterest

Share This