El HTML es la base de casi todo en Internet. Es la piedra angular sobre la que se construye el contenido de Internet, y lo ha sido durante décadas. Sin una sólida comprensión de HTML, todo lo que hagas con WordPress o cualquier otro diseño y desarrollo web se atrofiará. Por suerte para ti, hay una gran cantidad de códigos HTML básicos que todos los usuarios de WordPress, desde principiantes hasta veteranos, usan casi a diario. Vamos a desglosarlos y ponerte al día.
Suscríbase a Nuestro Canal de Youtube
¿Qué es HTML?
Aquí está la versión rápida: HTML significa lenguaje de marcado de hipertexto, lo que significa que no es un lenguaje de programación. HTML no le ordena a su computadora que ejecute cosas a través de scripts. Más bien, toma el texto que tienes en tu página y lo marca. Cursiva, negrita, alineación, tamaño, etc. HTML también le da la capacidad de incluir imágenes y enlaces, y con HTML5, la versión más reciente los manipula y el texto de nuevas formas emocionantes.
El código HTML está contenido dentro de las banderas y es bastante fácil de leer. Una página HTML simple podría verse algo como esto:
Cuando se renderiza en un navegador, se vería así:
Como puedes ver, HTML no es tan confuso. De hecho, incluso si nunca has visto ningún código HTML antes, apuesto a que puedes averiguar qué significa cada una de esas etiquetas solo por contexto. Con eso fuera del camino, veamos los códigos HTML básicos más comunes que usarás a lo largo de tu carrera en la web.
Negrita
Cuando envuelve su texto en las etiquetas <strong>, le está diciendo al navegador que ponga en negrita el texto. También puedes usar simplemente < b>, pero con Google y otros motores de búsqueda que prefieren la codificación semántica, estás más seguro con < strong>
You can make <strong>text bold</strong> by using this tag.
Cursiva
< Em> significa énfasis, y es la forma semántica de usar cursiva en HTML. También puede usar <i> para hacerlo.
You can put <em>text in italics<em> by using this tag.
Subrayado
Lo mismo ocurre con < u> y subrayado. En general, este tiene muy poco uso porque los enlaces están subrayados y el texto subrayado en el que no puedes hacer clic da una mala experiencia de usuario.
You can <u>underline</u> by using this tag.
Encabezados
Asegúrese de usarlos en orden jerárquico. Google quiere que anides encabezados, así que asegúrate de usar <h2> solo por debajo de <h1>, no por debajo de <h3>.
Aunque la mayoría de las páginas solo tendrán una <h1>, Google ya no te penaliza por tener más. Solo tenga en cuenta que el uso de < h1> restablece su anidamiento para 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 los elementos HTML de esta página son h2.
Imagen
Insertar imágenes es una de las cosas más útiles que hace HTML. Liberó a Internet de sus estilos brutalistas y lo puso en el camino hacia donde está hoy. Todo lo que necesita hacer es tener la URL de la imagen que desea y colocar una sola <img src> (de etiqueta de origen de imagen). Así:
<img src="https://elegantthemes.com/picture.png" alt="a picture from elegant themes">
Tenga en cuenta que no es necesario cerrar la etiqueta de imagen y que las comillas no son necesarias para que se muestre la imagen. Muchas personas todavía los usan para hacer que el código sea más legible.
El atributo < alt> es el texto que se muestra con fines de accesibilidad, y también está indexado por los motores de búsqueda. Para las personas con lectores de pantalla y otros dispositivos, el texto alternativo es absolutamente necesario para usar Internet. Siempre es una buena práctica tener texto alternativo para sus imágenes.
Enlaces
Bien. Vínculos. Hay mucho que hacer con los enlaces. O, más bien, hay mucho que puedes hacer con los enlaces. En su forma más básica, lo juntarás con una etiqueta <a href>. El < a> indica que es un enlace, y el < href> es literalmente la referencia de hipertexto (la URL) a la que está enlazando.
<a href="http://elegantthemes.com/divi">A link to our Divi page, and this is the anchor text.</a>
Cerrará el código de enlace simplemente con un < / a>, y puede usar cualquier texto que desee entre allí. Ese será el enlace en sí que se puede hacer clic y se llama texto de anclaje.
Se muestra en la página de esta manera: Un enlace a nuestra página Divi, y este es el texto de anclaje.
Además, también puede anidar código HTML. Puede hacer que se pueda hacer clic en una imagen insertando una etiqueta < img src> entre los indicadores de enlace.
<a href="http://elegantthemes.com"><img src="https://elegantthemes.com/picture.png"""></a>
Puede ver cómo se renderiza un enlace de imagen en el que se puede hacer clic aquí:
Más Atributos de enlace
También puede incluir bastantes atributos diferentes a los enlaces para que se comporten de ciertas maneras (como ocultar su URL para que no sea un referente o para abrir el enlace en una nueva ventana). Algunos de los más útiles para usted serán
- rel indica algún tipo de relación para el enlace y su destino. Como noreferrer para evitar que el tráfico de referencia se rastree hasta usted.
- target indica al navegador dónde abrir el enlace: _blank lo abrirá en una pestaña en blanco, por ejemplo.
- nofollow va junto con rel y le dice a los motores de búsqueda que no desea pasar ningún jugo de enlace al sitio objetivo. Esto es bueno cuando se enlaza a contenido controvertido, etc. También evita que las personas envíen spam a los enlaces en tus comentarios, y hace que tu contenido pueda verse como imparcial, ya que no estás proporcionando ninguna ventaja por ser presentado, aparte de la exposición y los clics.
Hay más, pero esos son los que probablemente verá más a menudo.
Texto tachado
Si eres como yo, a veces necesitas hacer una broma usando palabras tachadas. O tal vez necesites marcar cosas de una lista (o eliminarlas, como dice el código en sí). O cualquier otra cosa para la que necesites tener una línea de texto.
Eso es cuando usas < del> alrededor del texto que quieres atravesar. Para algunas personas, este es un código increíblemente común, mientras que otros pueden nunca usarlo. De todos modos, es fácil de recordar.
You can use <del>this code</del> for strikethrough text in HTML.
Listas
Las listas son otra parte importante del contenido web en estos días. No solo te dan toneladas de espacio en blanco y rompen paredes de texto, sino que también te permiten organizar tus pensamientos en piezas digeribles.
Hay dos tipos de listas que puedes hacer con códigos HTML básicos. Listas ordenadas numeradas 1, 2, 3, etc. Las listas desordenadas usan viñetas o símbolos (según el diseño de tu sitio) en lugar de números.
envolver cada lista con <ul> o <ol> para desordenada o listas ordenadas respectivamente. Y cada artículo de la lista debe estar envuelto en <li>.
Y esos códigos se muestran así para mostrar la diferencia:
- Esto es parte de una lista desordenada.
- Esto también.
- Y así es como se establece una lista ordenada.
- Este es un enlace en una lista.
- Y este texto de enlace está en negrita, pero esta parte no lo está.
También puedes anidar otros códigos en las listas. Para que pueda poner texto en negrita, insertar enlaces, etc.
Citas en bloque
En algún momento de su carrera en WordPress, necesitará citar el sitio web de otra persona. Ahí es donde entra < blockquote>. Simplemente rodee cualquier texto que copie / pegue (y atribuya) con etiquetas de apertura y cierre <blockquote>, y estará listo.
<blockquote>This text will appear with special styling to indicate that it's a quote./blockquote>
Así es como se verá en una página:
Este texto aparecerá con un estilo especial para indicar que es una cita.
Párrafos
El HTML de párrafo es un poco raro. Dependiendo del CMS y el constructor que estés usando, puede representar automáticamente cada salto de línea como un párrafo separado. WordPress hace esto cuando escribes HTML. Sin embargo, no todo lo hace. Por lo tanto, si necesita mantener sus párrafos separados y no tener una pared de texto, envuelva cada uno en <p>. El navegador sabrá entonces que debe mostrar cada bloque de texto como un párrafo separado en lugar de un bloque continuo. De forma predeterminada, los navegadores ignoran los saltos de línea a menos que se indique 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 desee otras separaciones entre los párrafos y las secciones. Es entonces cuando puede usar las etiquetas <hr> y <br/>.
< hr> inserta una línea separadora dondequiera que esté. Muchas personas usan esto para separar widgets en una barra lateral o secciones principales de una página web.
La etiqueta <br/> es un salto de línea. Puede usar < br / > en medio de un < p> para romper una línea sin entrar en un párrafo nuevo (para el estilo de bloque y la organización). < br / > es una etiqueta de cierre automático, lo que significa que no puede haber contenido dentro de ella. Esto se indica con la barra 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 para entrar, y a medida que avance con HTML, CSS y JavaScript, necesitará apuntar al elemento de párrafo para hacer ciertas cosas. Puedes leer más sobre la distinción aquí.
Envolver
HTML es absolutamente necesario para interactuar con Internet. Todo el mundo los usa de la misma manera, ya sea que esté comenzando en el desarrollo y diseño web o sea un veterano de los días anteriores a que JavaScript fuera una cosa. Todavía estamos utilizando los códigos HTML básicos para ejecutar las bases de todos nuestros sitios. No importa lo elegante que sea el sitio o lo avanzadas que sean sus funciones, cuando se rompe un enlace o las cosas son audaces que no deberían serlo, aún estarás indagando para ver si las etiquetas <a href> o <strong> están funcionando bien.
¿Cuáles son sus códigos HTML básicos más utilizados en estos días?
Imagen destacada del artículo por enterlinedesign/. com