Se você é novato na indústria da web ou um veterano experiente, ver a fonte HTML de diferentes páginas da Web é algo que você provavelmente fará muitas vezes ao longo de sua carreira.
Para quem é novato em web design, visualizar o código-fonte de um site é uma das maneiras mais fáceis de ver como certas coisas são feitas para que você possa aprender com esse trabalho e começar a usar certos códigos ou técnicas em seu próprio trabalho. Como qualquer web designer que trabalha hoje, especialmente aqueles que o fazem desde os primórdios da indústria, é seguro dizer que aprenderam HTML simplesmente visualizando a fonte das páginas da web que viram e ficaram intrigadas por. Além de ler livros de web design ou participar de conferências profissionais, a visualização do código-fonte de um site é uma ótima maneira de os iniciantes aprenderem HTML.
Mais do que apenas HTML
Uma coisa a lembrar é que os arquivos de origem podem ser muito complicados (e quanto mais complexo o site que você está visualizando, mais complexo o código do site provavelmente será). Além da estrutura HTML que compõe a página que você está visualizando, também haverá CSS (folhas de estilo em cascata) que ditam a aparência visual desse site. Além disso, muitos sites hoje incluirão arquivos de script incluídos junto com o HTML.
É provável que existam vários arquivos de script incluídos, de fato, cada um alimentando diferentes aspectos do site. Francamente, o código-fonte de um site pode parecer complicado, especialmente se você é novo em fazer isso. Não fique frustrado se você não conseguir descobrir o que está acontecendo com o site imediatamente. Visualizar a fonte HTML é apenas o primeiro passo neste processo. Com um pouco de experiência, você começará a entender melhor como todas essas peças se encaixam para criar o site que você vê no seu navegador. À medida que se familiarizar com o código, você poderá aprender mais com ele e não parecerá tão assustador para você.
Então, como você vê o código-fonte de um site? Veja as instruções passo a passo para fazer isso usando o navegador Google Chrome.
Instruções passo a passo
-
Abra o Navegador da web do Google Chrome (se você não tiver o Google Chrome instalado, este é um download gratuito).
-
Navegue até o página da web que você gostaria de examinar.
-
Clique com o botão direito a página e olhe para o menu que aparece. Nesse menu, clique em Ver fonte da página.
-
O código-fonte dessa página aparecerá agora como uma nova guia no navegador.
-
Alternativamente, você também pode usar os atalhos de teclado CTRL + U em um PC para abrir uma janela com o código-fonte de um site exibido. Em um Mac, esse atalho é Comando + Opção + U.
Ferramentas de desenvolvimento
Além do simples Ver fonte da página Com a capacidade oferecida pelo Google Chrome, você também pode aproveitar suas excelentes Ferramentas do desenvolvedor para se aprofundar ainda mais em um site. Essas ferramentas permitirão que você não apenas veja o HTML, mas também o CSS que se aplica para visualizar elementos nesse documento HTML.
Para usar as ferramentas de desenvolvedor do Chrome:
-
Abrir Google Chrome.
-
Navegar para a página da web que você gostaria de examinar.
-
Clique no ícone com três linhas no canto superior direito da janela do navegador.
-
No menu, passe o mouse sobre Mais ferramentas e depois clique Ferramentas de desenvolvimento no menu que aparece.
-
Isso abrirá uma janela que mostra o código-fonte HTML à esquerda do painel e o CSS relacionado à direita.
-
Alternativamente, se você clicar com o botão direito um elemento em uma página da web e selecione Inspecionar No menu exibido, as ferramentas do desenvolvedor do Chrome serão exibidas e o elemento exato que você selecionou será destacado no HTML com o CSS correspondente mostrado à direita. Isso é muito útil se você quiser saber mais sobre como uma peça específica de um site foi criada.
Está vendo código fonte legal?
Ao longo dos anos, muitos web designers novos questionaram se é aceitável visualizar o código-fonte de um site e usá-lo para sua educação e, finalmente, para o trabalho que eles realizam. Embora não seja aceitável copiar o código de um site por atacado e transferi-lo como seu em um site, usar esse código como um trampolim para aprender é, na verdade, quantos avanços são feitos nessa indústria.
Como mencionamos no início deste artigo, seria difícil encontrar um profissional da Web que não tenha aprendido alguma coisa ao visualizar a fonte de um site! Sim, visualizar o código-fonte de um site é legal. Usar esse código como um recurso para construir algo semelhante também é bom. Colocar o código como está e passá-lo como seu trabalho é onde você começa a encontrar problemas.
No final, os profissionais da Web aprendem uns com os outros e geralmente aprimoram o trabalho que veem e são inspirados, portanto, não hesite em visualizar o código-fonte de um site e usá-lo como uma ferramenta de aprendizado.
