> For the complete documentation index, see [llms.txt](https://cumbucadev.gitbook.io/github-essentials/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cumbucadev.gitbook.io/github-essentials/dia-9/interagindo-com-o-repositorio-remoto-hello-world/alterando-hello-world-localmente/editando-readme.md).

# Editando README

Chegamos no momento de fazer as alterações no arquivo README.md da cópia local do repositório segundo requisitos da issue criada na seção [Criando uma Issue no GitHub](/github-essentials/dia-8/criando-uma-issue-no-github.md).

### Como visualizar Markdown formatado (como no GitHub)

Se o arquivo que você está editando for um arquivo markdown, é possível visualizar como ele irá ficar formatado:

1. Com o arquivo markdown aberto, clique no ícone de **Pré-Visualização** no canto superior direito.\
   ![](/files/5SqaXnznlhmCVHcSyl8S)
2. O VSCode mostrará uma pré-visualização formatada do Markdown, igual ao que você veria no GitHub.

## Passo a Passo

### 1. Abrindo o Visual Studio Code

O primeiro passo é abrir a aplicação **Visual Studio Code**, que foi instalada anteriormente.

Ao abrir o VSCode, será exibida a aba **Bem-vindo**. Essa aba apresenta atalhos para abrir projetos, acessar documentação e personalizar o editor.&#x20;

<figure><img src="/files/pV2F4g40zdQDoUCxBz0M" alt=""><figcaption></figcaption></figure>

No entanto, não iremos utilizá-la agora, então podemos fechá-la clicando no **X** no canto da aba.

<figure><img src="/files/powOqLb2Gb8EkcNa7dG9" alt=""><figcaption></figcaption></figure>

O editor ficará assim:

<figure><img src="/files/sisnA5XDnJMyToVhGxTK" alt=""><figcaption></figcaption></figure>

### 2. Abrindo a pasta do repositório

Agora, vamos abrir a pasta do repositório no editor. Para isso, clique em **Arquivo** na barra de menu no topo da tela.

<figure><img src="/files/uo4uvgEt0fKz5H9dLnDb" alt=""><figcaption></figcaption></figure>

Selecione **Abrir Pasta...**.

<figure><img src="/files/Ws95xCriARQvjwtSjoYt" alt="" width="375"><figcaption></figcaption></figure>

Encontre a pasta do repositório `hello-world`, selecione-a e clique em **Abrir**.

<figure><img src="/files/3jYj7OGs0FkQvFf3UTZx" alt=""><figcaption></figcaption></figure>

O editor agora exibirá os arquivos do repositório na barra lateral esquerda. Neste caso, apenas o README.md.

<figure><img src="/files/zsdYlMKtq508wWPs74bT" alt=""><figcaption></figcaption></figure>

### 3. Abrindo o arquivo README.md

Na barra lateral esquerda, clique no arquivo **README.md** para abri-lo. O conteúdo do arquivo será mostrado no painel central da tela, onde você poderá editá-lo.

<figure><img src="/files/keMBqzxEZpqzbE7Gd01k" alt=""><figcaption></figcaption></figure>

Antes de começarmos a edição, vamos visualizar como o arquivo fica formatado. Para isso:

1. Clique no ícone de **Pré-Visualização** no canto superior direito.\
   ![](/files/5SqaXnznlhmCVHcSyl8S)
2. O VSCode abrirá uma visualização formatada do Markdown ao lado direito, mostrando como o arquivo será exibido no GitHub.

<figure><img src="/files/TCU7PjtVFbc2miIWTwP6" alt=""><figcaption></figcaption></figure>

Agora, temos três principais áreas visíveis no editor:

* **Barra lateral esquerda**: Lista os arquivos do repositório.
* **Painel central**: Área onde editamos o README.md.
* **Painel da direita**: Pré-visualização do Markdown formatado.

### 4. Editando o arquivo

Podemos adicionar o exemplo sugerido na descrição issue ao final do arquivo.

```markdown
![Boas vindas ao meu repositório!](https://link-para-o-gif-ou-imagem)
```

<figure><img src="/files/cSo4PDpIRS4MG05mpmF6" alt=""><figcaption></figcaption></figure>

### 5. Escolhendo uma imagem ou GIF

Para encontrar uma imagem ou GIF para ilustrar a seção de boas-vindas, pode-se buscar diretamente no [Google Images](https://images.google.com/) usando, por exemplo, os termos **"gif boas-vindas"**.

<figure><img src="/files/agWOhqkUgBMIbUxOIWki" alt=""><figcaption></figcaption></figure>

Após escolher a que mais lhe agrada, clique na própria imagem para abri-lo.

<figure><img src="/files/EruzFWqiXucwaZoVnCit" alt=""><figcaption></figcaption></figure>

Por fim, clique com o botão direito na imagem que se abriu a direita e selecione **Copiar endereço da imagem**.

<figure><img src="/files/8wEKX0Qfr1elXePwmfBF" alt=""><figcaption></figcaption></figure>

Agora, é só substituir o link no README.md pelo URL real do GIF:

```markdown
![Boas vindas ao meu repositório!](https://media3.giphy.com/media/Cmr1OMJ2FN0B2/giphy.gif?cid=790b76112e3e9eaa416c803fbf3b929f75c3716726601d56&rid=giphy.gif)
```

<figure><img src="/files/coWrMzmzqK2U6hq99g0j" alt=""><figcaption></figcaption></figure>

Perceba que automaticamente a pré-visualização já mostrará a sua imagem no texto formatado.

### 6. Alterando o texto alternativo (alt text)

O **texto alternativo (alt text)** é o texto incluído no código para descrever uma imagem em um site. Ele é fundamental para pessoas que utilizam ferramentas para leitura de tela, como é o caso das pessoas com deficiência visual.

Além de sua principal função, o alt text também pode ser útil em casos em que a imagem não carregue corretamente e também é uma ferramenta que ajuda os rastreadores de mecanismos de pesquisa a entenderem melhor o contexto da página.

Por isso, é uma boa prática sempre fornecer uma descrição clara e objetiva.

Podemos descrever nosso GIF da seguinte maneira:

> Gif de um filhote de pinguim fofo com olhos grandes e brilhantes. Está sentado no gelo, sorrindo e acenando. Ele tem um pedaço de casca de ovo rachado ainda preso na cabeça, sugerindo que acabou de nascer. O fundo mostra um ambiente gelado com o céu ao entardecer.

Basta, então, atualizar o valor do alt text no README.md:

```markdown
![Gif de um filhote de pinguim fofo com olhos grandes e brilhantes. Está sentado no gelo, sorrindo e acenando. Ele tem um pedaço de casca de ovo rachado ainda preso na cabeça, sugerindo que acabou de nascer. O fundo mostra um ambiente gelado com o céu ao entardecer.](https://media3.giphy.com/media/Cmr1OMJ2FN0B2/giphy.gif?cid=790b76112e3e9eaa416c803fbf3b929f75c3716726601d56&rid=giphy.gif)
```

<figure><img src="/files/wNqTzA7QtoCU0fC64kIq" alt=""><figcaption></figcaption></figure>

### 7. Salvando o arquivo

Agora que as alterações foram feitas, é necessário salvar o arquivo no VSCode. Antes, perceba que:

* Quando um arquivo tem mudanças não salvas, aparece um **ponto branco/preto** ao lado do nome da aba.\
  ![](/files/7pWBjD2bR9vwP1JvQb2R)<br>
* Quando o arquivo é salvo, o ponto desaparece e um **X** aparece no lugar.\
  ![](/files/924T3xfrhL57Kz4R9aTg)<br>
* Se houver arquivos não salvos, o VSCode também exibe a etiqueta **"1 não salvo"** na barra lateral esquerda.\
  ![](/files/buggFhN4WTXxuUiBfVvs)

Para salvar o arquivo, clique em **Arquivo** no menu superior.

<figure><img src="/files/uo4uvgEt0fKz5H9dLnDb" alt=""><figcaption></figcaption></figure>

E selecione a opção **Salvar**.

<figure><img src="/files/ALg5Vcnsf9ka7Cia9CwF" alt="" width="375"><figcaption></figcaption></figure>

Pronto, agora suas alterações estão salvas no seu computador! Perceba que agora aparece um **X** ao lado do nome do arquivo na aba e que o VSCode não mostra mais a etiqueta **"1 não salvo"**.

<figure><img src="/files/xCzGhEqmAZAZxK2OD4xZ" alt=""><figcaption></figcaption></figure>

***

Embora o arquivo tenha sido salvo no seu computador, ele ainda não foi salvo no controle local de versão do Git. Salvar no VSCode apenas armazena as mudanças localmente no seu computador, enquanto salvar no Git registra as mudanças no sistema de controle de versão, permitindo rastreamento e colaboração.

No próximo passo, veremos como adicionar essas mudanças ao Git para garantir que elas sejam versionadas corretamente.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://cumbucadev.gitbook.io/github-essentials/dia-9/interagindo-com-o-repositorio-remoto-hello-world/alterando-hello-world-localmente/editando-readme.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
