Como ver o código HTML de um site

página de modelo

Os sites baseados em quadros geralmente exibem o layout do conjunto de quadros em vez do conteúdo.

Crédito da imagem: vetkit / iStock / Getty Images

O código HTML subjacente usado para construir um site não está oculto, mas facilmente acessível para qualquer pessoa com as ferramentas adequadas. Por exemplo, navegadores da Web como Firefox, Chrome, Safari, Opera e Internet Explorer têm várias maneiras de visualizar o código HTML, CSS ou JavaScript de um site diretamente. Além disso, algumas ferramentas de desenvolvedor da Web dedicadas podem carregar e abrir uma página da Web da Internet como um arquivo armazenado em um disco local.

Ver fonte no navegador

As etapas necessárias para ver o código HTML de um site são essencialmente as mesmas para Firefox, Chrome, Safari, Opera e Internet Explorer. Clique com o botão direito do mouse em uma seção de uma página da Web que contenha apenas texto e selecione a opção "Exibir código-fonte" ou "Exibir código-fonte da página". Dependendo da configuração do navegador, o código HTML é aberto em uma nova guia do navegador ou em uma janela separada do aplicativo.

Vídeo do dia

Salvar o código-fonte no disco

Se precisar examinar ou editar o código de um site posteriormente, você pode salvar a página em seu disco rígido. Ao clicar com o botão direito do mouse em uma página da Web no Firefox ou Safari, você tem a opção de "Salvar página como". O Chrome e o Opera têm a opção "Salvar como". Para salvar uma página da Web usando o Internet Explorer, clique em "Ferramentas", "Arquivo" e em "Salvar como". Além da página da web em si, o navegador salva todas as imagens, arquivos CSS e JavaScript que a página usa e que estão armazenados localmente em sua Web servidor.

Firefox, Chrome, Opera e Internet Explorer fornecem, cada um, um modo de desenvolvedor que permite visualizar simultaneamente uma página da Web renderizada e seu código HTML, CSS e JavaScript. Se você clicar em um elemento na Web, seu código aparecerá no painel de exibição do desenvolvedor. O painel do desenvolvedor pode ser acessado por meio das opções ou da ferramenta de configuração. Embora o Safari não tenha uma ferramenta de desenvolvedor nativa, você pode instalar uma como uma extensão.

Aplicativos para desenvolvedores da web

Ferramentas de design de sites como Dreamweaver, Kompozer e Microsoft Expressions permitem que você abra uma página da Web online usando seu URL. Você visualiza o código HTML em uma visualização somente do código-fonte ou em uma divisão, visualização e visualização da fonte. Além disso, você pode editar o código e visualizar as alterações em tempo real. O código real armazenado no servidor do site nunca é alterado.

Problemas que você pode encontrar

Intencionalmente ou não, alguns sites não desistem de seu código HTML facilmente. Por exemplo, alguns sites usam código JavaScript, que bloqueia cliques com o botão direito. Você ainda pode visualizar o código-fonte baixando a página para o seu disco ou desabilitando o JavaScript no seu navegador. Outros sites usam frames HTML ou iframes, que o impedem de acessar diretamente sua fonte. Firefox, Chrome, Safari e Opera detectam sites baseados em frames e oferecem automaticamente a opção de visualizar o código-fonte de um frame. Se uma página da Web usa um arquivo JavaScript ou CSS armazenado em outro domínio, você pode visualizar o código desse arquivo diretamente por copiar seu URL do código HTML que você pode acessar e, em seguida, colá-lo na barra de endereço de uma nova guia do navegador.