Git es un sistema de control de versiones que ayuda a equipos e individuos a rastrear y registrar los cambios realizados en un archivo o en un proyecto completo.

Cuando trabajas con Git, a menudo confirmas tus cambios y luego los envías a un repositorio remoto.

Supongamos que has realizado muchas confirmaciones y luego te das cuenta de que tu versión actual de cambios es errónea. O descubres una situación que requiere que reviertas a una confirmación anterior, como un error extraño.

Cambiar manualmente cada línea de código en tu archivo a su estado original o a un estado de confirmación específico y hacer una nueva confirmación puede llevar a un historial de confirmaciones desordenado. Revertir el archivo es una forma mucho más limpia de manejarlo.

Hay muchos enfoques posibles, pero en este artículo aprenderás el mejor enfoque, el método git checkout.

Si tienes prisa, aquí está el comando:

$ git checkout SHA-HASH -- archivo/ruta-del-archivo

Pero supongamos que no tienes prisa. Primero aprendamos cómo localizar todas las confirmaciones previas y sus códigos hash SHA. Luego veremos cómo revertir un archivo a una confirmación anterior.

Cómo encontrar el SHA/ID de confirmación

Hay muchas formas de obtener el SHA y los detalles de cada confirmación. El mejor método es usar el siguiente comando en tu terminal:

$ git log

Este comando mostrará una lista de todas las confirmaciones que has realizado en tu proyecto para todos los archivos y sus códigos hash:

Pero un comando más simple de usar es el siguiente, donde añades la opción oneline:

$ git log -- oneline

Nota: La opción oneline muestra la salida como una confirmación por línea.

198d425 (HEAD -> main) initial
c368a1c new removal
bcbef35 updated readme 2
da9cc5f (origin/main) updated Readme
a5150af first commit

Usando solo este comando devolvería todas las confirmaciones realizadas en ese proyecto. Si deseas revertir un archivo en particular a una confirmación anterior, primero debes ver todas las confirmaciones realizadas a ese archivo.

Para hacer esto, agrega el nombre del archivo al comando:

$ git log -- oneline README.md

En una situación donde el archivo se encuentra en otra carpeta, puedes navegar mediante tu terminal a esa carpeta o usar la ruta del archivo en el comando como se ve a continuación:

$ git log -- oneline src/App.js

Esto devolverá solo las confirmaciones para el archivo especificado y el código hash SHA de la confirmación seguido por el mensaje de confirmación. Utilizarás el hash SHA para revertir tu archivo:

198d425 (HEAD -> main) initial
c368a1c new removal
bcbef35 updated readme 2
da9cc5f (origin/main) updated Readme
a5150af first commit

Cómo revertir un archivo a una confirmación previa

Ahora que sabes cómo obtener el código SHA, puedes usar el comando git checkout para revertir tu archivo a cualquier confirmación que deseas, pasando también el nombre del archivo o la ruta del archivo:

$ git checkout da9cc5f -- README.md

Ó

$ git checkout 55a1dff -- src/App.js

Solo asegúrate de querer revertir ese archivo antes de hacerlo, porque vas a descartar tus cambios locales y actuales del archivo. Git reemplazará el archivo con la versión confirmada especificada. Usa esto solo si estás seguro y no quieres esos cambios locales no guardados.

Resumiendo

En este artículo, has aprendido cómo revertir un archivo a una confirmación previa con el comando git checkout.

Es importante saber que cuando reviertes, necesitarás confirmar los cambios nuevamente (los cambios revertidos). Puedes hacer esto con el comando confirmar estándar:

$ Git commit -m 'mensaje de confirmación'

Luego puedes enviar esa confirmación al repositorio remoto que desees.

Puedes aprender más sobre Git y GitHub en este curso completo de 5+ horas, video o estos artículos.

¡Diviértete programando!

El texto es esencial en las páginas web, ya que les dice a tus usuarios de qué trata tu página.

Cuando agregas texto a tu página web, este dictará la dirección y la sensación de tu página web en función de tu idioma.

Por ejemplo, por defecto, el inglés se mueve de izquierda a derecha (LTR), mientras que el árabe se mueve de derecha a izquierda (RTL).

Pero la mayoría de las veces, no querrás que todo tu texto permanezca en una sola posición de tu pantalla o contenedor. Necesitarás algunos textos en el centro, algunos a la izquierda y otros a la derecha. Incluso podrías querer que el texto llene el ancho de tu página o contenedor.

Esto es similar a lo que haces cuando editas textos en Microsoft Word o Google Docs, utilizando los botones de alineación izquierda, derecha, centro y justificado.

También puedes hacer lo mismo en tus páginas web usando código.

Cómo se alineaba el texto al centro antes de HTML5

Antes de la introducción de HTML5, los desarrolladores realizaban estilos específicos con etiquetas HTML. Por ejemplo, podías usar la etiqueta center para alinear tu texto al centro, pero en HTML4, esta etiqueta quedó obsoleta. Aunque esto aún puede funcionar con algunos navegadores actuales, podría dejar de hacerlo en cualquier momento.

Así es cómo se ve:

<center>
  <h1> Welcome to freeCodeCamp </h1>

  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, inventore. Culpa, rerum neque. Necessitatibus quod velit vitae unde sed? Expedita consequuntur ea quis reiciendis nobis distinctio quod deserunt doloremque in.

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, inventore. Culpa, rerum neque. Necessitatibus quod velit vitae unde sed? Expedita consequuntur ea quis reiciendis nobis distinctio quod deserunt doloremque in.</p>

  <h3>How we work</h3>

  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, inventore. Culpa, rerum neque. Necessitatibus quod velit vitae unde sed? Expedita consequuntur ea quis reiciendis nobis distinctio quod deserunt doloremque in.</p>
</center>

Esto mostrará todo nuestro texto centrado en la página o el contenedor al que se aplica:

Pero ahora que tenemos HTML5, ya no usamos este método. Recuerda que es esencial manejar todos los estilos mediante CSS. Solo debes usar HTML para agregar el marcado de tu página web.

Cómo alinear texto en HTML5

Con CSS, tienes muchas opciones que puedes usar para alinear tu texto. La propiedad CSS principal que funciona bien con la alineación de texto es la propiedad text-align. Puedes usar esta propiedad para especificar la alineación horizontal del texto en un elemento.

Supongamos que tienes algo de texto en tu página web, por ejemplo:

<h1> Welcome to freeCodeCamp </h1>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, inventore. Culpa, rerum neque. Necessitatibus quod velit vitae unde sed? Expedita consequuntur ea quis reiciendis nobis distinctio quod deserunt doloremque in.

  Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, inventore. Culpa, rerum neque. Necessitatibus quod velit vitae unde sed? Expedita consequuntur ea quis reiciendis nobis distinctio quod deserunt doloremque in.</p>

<h3>How we work</h3>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, inventore. Culpa, rerum neque. Necessitatibus quod velit vitae unde sed? Expedita consequuntur ea quis reiciendis nobis distinctio quod deserunt doloremque in.</p>

Puedes usar la propiedad text-align para mover el texto a la izquierda, derecha, centro o incluso justificar tu contenido, de forma que llene el elemento o la página web horizontalmente.

// Syntax

text-align: start;
text-align: end;
text-align: left;
text-align: right;
text-align: center;
text-align: justify;

Si deseas alinear todo el texto de tu página web, puedes aplicar esta propiedad a cualquier etiqueta que contenga el texto, como las etiquetas div, heading, paragraph o body.

Antes de ver un ejemplo, exploremos las opciones/valores disponibles para esta propiedad.

• start: Esta se basa en la dirección. Cuando la dirección es de izquierda a derecha, start significaría izquierda. Si la dirección es de derecha a izquierda, entonces start significaría derecha.
• end: Esta también se basa en la dirección. Cuando la dirección es de izquierda a derecha, entonces end significaría derecha. Si la dirección es de derecha a izquierda, entonces end significaría izquierda.
• left: Usarás esta para alinear los textos al borde izquierdo de la página o contenedor.
• right: Usarás esta para alinear los textos al borde derecho de la página o contenedor.
• center: Usarás esta para alinear los textos al centro exacto de la página o contenedor.
• justify: Usarás esta para ajustar el contenido del texto a los bordes izquierdo y derecho de tu página o contenedor.

La sintaxis general sería:

selector {
  text-align: valor;
}

Cómo alinear texto a la izquierda

Podrías necesitar cambiar la alineación de tu texto a la izquierda si originalmente estaba en el lado derecho. Harás esto apuntando al selector y usando la propiedad text-align junto a left como su valor.

// HTML
<p> Bienvenido a freeCodeCamp </p>

// CSS
p {
  text-align: left;
}

Por ejemplo, si tienes tu contenido desde la derecha de tu pantalla usando la dirección RTL:

<html dir="rtl">
  <body>
    <h1> Welcome to freeCodeCamp </h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, inventore. Culpa, rerum neque. Necessitatibus quod velit vitae unde sed? Expedita consequuntur ea quis reiciendis nobis distinctio quod deserunt doloremque in.
      
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, inventore. Culpa, rerum neque. Necessitatibus quod velit vitae unde sed? Expedita consequuntur ea quis reiciendis nobis distinctio quod deserunt doloremque in.</p>
      
      <h3>How we work</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, inventore. Culpa, rerum neque. Necessitatibus quod velit vitae unde sed? Expedita consequuntur ea quis reiciendis nobis distinctio quod deserunt doloremque in.</p>
  </body>
</html>

Esto mostrará:

Puedes dar estilo a la etiqueta body para alinear el texto de la página a la izquierda con left:

body {
  text-align: left;
}

Cómo alinear texto a la derecha

Por defecto, tu página web o el contenido en el contenedor y otros elementos comienzan desde la izquierda. Podrías querer alinear este contenido a la derecha, lo cual es posible usando la propiedad text-align con un valor right.

// HTML
<p> Bienvenido a freeCodeCamp </p>

// CSS
p {
  text-align: right;
}

Cómo alinear texto al centro

En lugar de usar la etiqueta center para mover nuestro contenido de texto al centro, ahora puedes usar la propiedad text-align junto al valor center .

// HTML
<p> Bienvenido a freeCodeCamp </p>

// CSS
p {
  text-align: center;
}

Cómo justificar texto

Si sabes cómo usar cualquier herramienta basada en texto como Microsoft Word o Google Docs, o herramientas como Photoshop, Figma y muchas más que manejan contenido, sabrás cómo funciona el icono de texto justificado.

Lo usarás para ayudar a que tu texto llegue hasta los bordes de una página/contenedor en lugar de tener algunos espacios desiguales innecesarios al final.

Esto no siempre es obvio, pero cuando miras profundamente los bordes, notarás la diferencia, lo cual tiene más sentido cuando tienes mucho texto y párrafos más largos.

Lo haces usando la propiedad text-align junto con justify como su valor:

// HTML
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, inventore. Culpa, rerum neque. Necessitatibus quod velit vitae unde sed? Expedita consequuntur ea quis reiciendis nobis distinctio quod deserunt doloremque in.</p>

// CSS
p {
  text-align: center;
}

Resumen

En este artículo, has aprendido a alinear el texto de tu página web HTML usando la propiedad text-align de CSS.

¡Embárcate en un viaje de aprendizaje! Explora 200+ artículos de expertos sobre desarrollo web. Visita mi blog para obtener más contenido cautivador de mi parte.

Cuando agregas texto a tu archivo HTML con una etiqueta HTML, no siempre querrás que el texto permanezca con el tamaño predeterminado. También vas a querer ajustar cómo se muestra el texto en el navegador.

En este artículo, aprenderás cómo cambiar el tamaño del texto mediante una etiqueta HTML.

Antes de empezar, debes saber que solo hay una forma de hacer esto: a través de la propiedad font-size de CSS. Podemos usar la propiedad font-size a través del estilo inline, interno o externo.

En el pasado, podíamos ajustar el tamaño del texto dentro de nuestra etiqueta HTML sin usar CSS. Pero eso fue antes de HTML5. Entonces agregábamos texto usando la etiqueta, que dispone de un atributo de tamaño como se ve a continuación:

<font size="5">
    Hola Mundo 
</font>

Este atributo size puede tomar valores de 1 a 7, en el que el tamaño del texto aumenta de 1 a 7. Pero como decíamos, esto quedó en desuso hace mucho tiempo, y la mayoría de personas ni siquiera saben que existía.

En caso de que tengas prisa por ver cómo puedes cambiar el tamaño de tu texto, aquí está:

// Usando CSS inline
<h1 style="font-size: valor;">¡Hola Mundo!</h1>

// Usando CSS interno/externo
selector {
    font-size: valor;
}

Pero supongamos que no tienes prisa. Vamos a sumergirnos brevemente en el asunto.

Cómo cambiar el tamaño del texto con CSS inline

El CSS inline te permite aplicar estilos a elementos HTML específicos. Esto significa que estamos poniendo CSS directamente en una etiqueta HTML. Usaremos el atributo style, que ahora contiene todos nuestros estilos.

<h1 style="...">¡Hola Mundo!</h1>

De esta forma usamos la propiedad font-size  junto con nuestro valor para cambiar el tamaño del texto usando CSS inline. Este valor puede usar cualquiera de tus unidades CSS preferidas como em, px, rem, etc.

<h1 style="font-size:4em; "> ¡Hola Mundo! </h1>
<p style="font-size:14px; "> Cualquier texto cuyo tamaño de fuente queremos cambiar </p>

Una sintaxis perfecta sería:

<ETIQUETA-DE-TEXTO style="font-size:valor;"> ... </ETIQUETA-DE-TEXTO>

Cómo cambiar el tamaño del texto con CSS interno o externo

El enfoque que debes usar para cambiar el tamaño del texto en el estilo CSS interno y externo es similar, ya que usarás un selector. La sintaxis general para esto es:

selector {
    font-size: valor;
}

El selector puede ser nuestra etiqueta HTML o tal vez una clase o un ID. Por ejemplo:

// HTML
<p> Cualquier texto cuyo tamaño de fuente queremos cambiar </p>

// CSS
p {
    font-size: 14px;
}

O podríamos usar una clase:

// HTML
<p class="mi-parrafo" > Cualquier texto cuyo tamaño de fuente queremos cambiar </p>

// CSS
.mi-parrafo {
    font-size: 14px;
}

Resumen

En este artículo, aprendiste cómo cambiar el tamaño de fuente/texto de un elemento HTML usando CSS. También viste cómo lo hacían los desarrolladores antes de la introducción de HTML5.

Además, ten en cuenta que siempre es mejor dar estilo a tus elementos HTML usando estilos internos o externos, ya que ofrecen mucha más flexibilidad en comparación con los estilos inline.

Por ejemplo, puedes hacer uso de una sola clase CSS para todas tus etiquetas p en lugar de tener que agregar estilos inline a todos los elementos de tu etiqueta p.

Usar estilos inline no se considera una buena práctica porque resulta demasiado repetitivo y no podrás reutilizar los estilos en otro lugar. Para aprender más, puedes leer mi artículo sobre estilos inline en HTML.

Espero que este tutorial te brinde el conocimiento para cambiar el tamaño de tu texto HTML y logres hacerlo más atractivo.

¡Diviértete programando!