HTML es la base de casi todo en Internet. Ha sido la piedra angular sobre la que se construye el contenido web durante décadas. Sin una comprensión sólida de HTML, todo lo que haga con WordPress o cualquier otro diseño y desarrollo de sitios web se verá atrofiado. Afortunadamente para ti, hay toneladas de códigos HTML básicos que todos los usuarios de WordPress, desde principiantes hasta veteranos, usan casi todos los días. Vamos a desplegarlos y darnos prisa.
Suscríbete a nuestro canal de YouTube
¿Qué es HTML?
Aquí está la versión abreviada: HTML significa Lenguaje de marcado de hipertextolo que significa que no es realmente un lenguaje de programación. HTML no le dice a la computadora que ejecute cosas con un script. Más bien, toma el texto que tiene en su sitio y lo marca. Cursiva, negrita, alineación, tamaño, etc. HTML también le brinda la capacidad de adjuntar imágenes y enlaces, y con HTML5, la última versión, los manipula junto con el texto de formas nuevas e interesantes.
El código HTML está contenido en las banderas y es bastante fácil de leer. Una página HTML simple podría verse así:
<html>
<head>
<title>The title of the webpage would go here.</title>
</head>
<body>
<h1>This is the page's title that shows up to people</h1>
<p>Content</p>
<p>More content</p>
<p>Even more content</p>
<h2>Section break</h2>
<p><img src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/04/tagline-featured-image.jpg"></p>
<p><a href="https://elegantthemes.com/divi">A link to our Divi page</a></p>
</body>
</html>
Después de renderizar en el navegador, se vería así:
Como puede ver, HTML no es tan confuso. De hecho, incluso si nunca antes ha visto ningún código HTML, apuesto a que puede averiguar qué significa cada una de estas etiquetas solo por contexto. Aparte de eso, echemos un vistazo a los códigos HTML básicos más populares que utilizará a lo largo de su carrera en línea.
Audaz
Cuando envuelves texto etiquetas, le dices al navegador que ponga el texto en negrita. También puede usar simplemente pero dado que Google y otros motores de búsqueda prefieren la codificación semántica, está más seguro con
You can make <strong>text bold</strong> by using this tag.
Cursiva
medio estrés, y esta es la forma semántica de usar cursiva en HTML. También puedes usar para hacer esto.
You can put <em>text in italics<em> by using this tag.
Subrayar
Lo mismo es verdad y subrayar. En general, este es de muy poca utilidad ya que los enlaces están subrayados y el texto subrayado en el que no se puede hacer clic causa una mala experiencia de usuario.
You can <u>underline</u> by using this tag.
Titulares
Quizás el código HTML básico más utilizado es el de los diferentes encabezados. Por
,,,,, dividir el contenido en secciones.
,,, dividir el contenido en secciones.
, dividir el contenido en secciones.
Asegúrese de usarlos en un orden jerárquico. Google quiere que anide encabezados, así que asegúrese de usar
justo debajo no debajo .
Si bien la mayoría de las páginas solo tendrán una
, Google ya no te castiga por tener más. Solo recuerda que al usar restablece el anidamiento de la página (o al menos esa sección de la página).
<h2>H2 is the most commonly used header tag.</h2>
Todos los encabezados de elementos HTML en esta página son h2.
Imagen
Insertar imágenes es una de las cosas más útiles que hace HTML. Ha arrancado Internet de sus estilos brutales y se ha abierto camino hasta donde está hoy. Todo lo que necesita hacer es tener la URL de la imagen que desea y colocar una (sentido Fuente de imagen etiqueta. Me gusta esto:
<img src="https://elegantthemes.com/picture.png" alt="a picture from elegant themes">
Tenga en cuenta que no necesita cerrar una etiqueta de imagen y no necesita comillas para mostrar la imagen. Mucha gente todavía los usa para hacer que el código sea más legible.
los
Gemelos
Bueno. Gemelos. Están sucediendo muchas cosas con los enlaces. O mejor dicho, hay muchas cosas que se pueden hacer con la vinculación. En su forma más básica, lo combinará con etiqueta. los indica que se trata de un enlace, un
<a href="http://elegantthemes.com/divi">A link to our Divi page, and this is the anchor text.</a>
Simplemente cerrarás el código del enlace. y puede utilizar cualquier texto intermedio. Será el enlace en sí mismo en el que puede hacer clic y llamar. texto de anclaje.
Representa en la página así: Enlace a nuestra página Divi y este es el texto de anclaje.
Además, también puede anidar código HTML. Puede hacer clic en la imagen insertando entre banderas de enlace.
<a href="http://elegantthemes.com"><img src="https://elegantthemes.com/picture.png"""></a>
Aquí puede ver cómo se representa el enlace de la imagen en la que se puede hacer clic:
Más atributos de enlace
También puede adjuntar varios atributos diferentes a sus enlaces para que se comporten de cierta manera (por ejemplo, ocultar la URL para que no sea el remitente o abrir el enlace en una nueva ventana). Algunas de las más útiles para usted serán
- real indica algún tipo de relación entre el enlace y su destino. Como sin referencia para evitar que se rastree el tráfico que se refiere a usted.
- objetivo le dice al navegador dónde abrir el enlace: _vacío se abrirá, por ejemplo, en una pestaña en blanco.
- no seguir va de la mano con real y le dice a los motores de búsqueda que no desea pasar ningún jugo de los enlaces al sitio web de destino. Esto es bueno para vincular contenido controvertido, etc. También evita que los enlaces en sus comentarios sean enviados como spam y hace que su contenido se perciba como imparcial, ya que no proporciona ninguna bonificación por resaltar más allá de la exposición y los clics.
Hay más, pero estos son los que probablemente verás más.
<a href="https://www.elegantthemes.com/blog/divi-resources/get-a-free-mortgage-broker-layout-pack" rel="nofollow" target="_blank">Free Mortgage Broker Layout</a>
texto tachado
Si eres como yo, a veces necesitar quieres bromear usando las palabras tachadas. O tal vez necesite marcar cosas de la lista (o eliminar, como dice el código). O cualquier otra cosa para la que necesite una línea en el texto.
Esto es cuando usas alrededor del texto que desea tachar. Para algunos, este es un código extremadamente común, mientras que otros quizás nunca lo usen. De todos modos, es fácil de recordar.
You can use <del>this code</del> for strikethrough text in HTML.
Letras
Las listas son otra parte importante del contenido web en estos días. No solo le brindan mucho espacio en blanco y rompen paredes de texto, sino que también le permiten organizar sus pensamientos en piezas fácilmente digeribles.
Hay dos tipos de listas que se pueden crear con códigos HTML básicos. listas ordenadas que se numeran 1, 2, 3, etc. listas desordenadas use viñetas o símbolos (según el diseño de su sitio) en lugar de números.
Envuelves cada lista con uno de ellos
- o
<ul> <li>This is part of an unordered list.</li> <li>So is this.</li> </ul> <ol> <li>And this is how you set up an ordered list.</li> <li><a href="https://elegantthemes.com">This is a link in a list.</a></li> <li><strong>And this link text is bold</strong>, but this part isn't.</li> </ol>
Y estos códigos muestran la diferencia:
- Esto es parte de una lista desordenada.
- Este es también el caso.
- Creas una lista ordenada de todos modos.
- Este es el enlace en la lista.
- Y el texto de este enlace está en negritapero esta parte no.
También puede anidar otros códigos en las listas. Puede poner el texto en negrita, insertar enlaces, etc.
Cotizaciones en bloque
En algún momento de tu carrera en WordPress, tendrás que citar el sitio de alguien. Ahí es donde
<blockquote>This text will appear with special styling to indicate that it's a quote./blockquote>
Así es como se verá en el sitio web:
Este texto aparecerá con un estilo especial para indicar que se trata de una cita.
Párrafos
El párrafo HTML es un poco raro. Según el CMS y el asistente utilizados, es posible que automáticamente represente cada salto de línea como un párrafo separado. WordPress hace esto cuando ingresa HTML. Sin embargo, no todo esto funciona. Entonces, si desea mantener los párrafos separados y no tener una pared de texto, envuelva cada uno
. El navegador entonces sabrá mostrar cada bloque de texto como un párrafo separado en lugar de un bloque contiguo. De forma predeterminada, los navegadores ignoran los saltos de línea a menos que se especifique lo contrario.
<p>This is my first paragraph.</p> <p>This is my second paragraph.</p>
Líneas y saltos de línea
Es posible que necesite otras separaciones entre párrafos y secciones. Entonces puedes usar
Etiquetas.
los
la etiqueta es un salto de línea. Puedes usar
en el interior
romper una línea sin pasar a un nuevo párrafo (debido al estilo y orden de los bloques).
es una etiqueta de cierre automático, lo que significa que no puede contener contenido. Esto se indica mediante la barra inclinada al final del código.
Si bien puede usarlo para dividir texto y párrafos insertándolos donde desee, no es una buena práctica y, a medida que avance con HTML, CSS y JavaScript, deberá dirigir el elemento de párrafo para hacer ciertas cosas. Puedes leer más sobre lo más destacado aquí.
Envase
HTML es absolutamente esencial para interactuar con Internet. Todos los usan de la misma manera, ya sea que sea nuevo en el desarrollo y diseño web o un veterano de la época antes de que JavaScript fuera algo. Todavía usamos códigos HTML básicos para ejecutar los conceptos básicos de todos nuestros sitios. No importa cuán elegante sea la página o cuán avanzadas sean sus características, cuando su enlace se rompa o algo esté en negrita y no debería estarlo, seguirá investigando para ver si o las etiquetas van bien.
¿Cuáles son los códigos HTML básicos más utilizados en la actualidad?
Artículo recomendado por enterlinedesign / shutterstock.com
