Inspecionando e remixando sua primeira página web

Última atualização: 63% de usuários consideraram isto útil

Certifique-se de ter o X-Ray Goggles instalado

Quando desejar inspecionar uma página, clique no atalho do X-Ray Goggles na barra de favoritos.

Inspecionando os elementos

Quando ativar o X-Ray Goggles, vai perceber que ao passear o mouse pela página, áreas ficam em destaque em uma caixa colorida.

Estas caixas representam os elementos da página. Clique em um e entrará no editor de código, onde poderá remixar o elemento.

Remixando

Dependendo do tipo de elemento que selecionar, tem varias formas de remixá-lo

Altere o texto

Selecione um bloco de texto e modifique-o no editor de código. A modificação são visualizadas no painel principal acima.

Altere uma imagem

Todas as imagens usam a tag HTML <img>. Você verá que cada tag <img> aponta para um endereço URL da imagem.

Troque a imagem original por qualquer outra que quiser. Basta abrir uma nova aba do navegador, encontrar uma imagem, clicar com o botão direito nela e selecionar copiar endereço da imagem.

Cole o endereço da imagem no editor de código e veja as modificações.

Altere o destino dos links para onde quiser.

Todos os links iniciam com <a href=" e contem o endereço de destino do link. Altere o endereço que está entre as aspas para mudar o destino do link.

Você também pode querer mudar o que é chamado de "texto âncora". Este é o texto rotulado que dá ao visitante uma pista sobre a página de destino e geralmente é exibido com um sublinhado e uma fonte azul.

Confirme e publique!

Se cometer um erro, clique no botão Cancelar no editor de código.

Se estiver satisfeito com as alterações, clique em Atualizar e veja como a página remixada ficou.

Quando estiver pronto para publicar, clique no botão Publicar.

Se estiver conectado em teach.mozilla.org, seu Goggles remix será adicionado à sua página de projetos no teach.mozilla.org e receberá um URL para compartilhar com os amigos.

Este artigo foi útil?

Aguarde...

Essas pessoas ajudaram a escrever este artigo:

Illustration of hands

Torne-se um voluntário

Desenvolva e compartilhe sua especialidade com outras pessoas. Responda perguntas e aprimore nossa base de conhecimento.

Saiba mais