Esta série tutorial irá guiá-lo através da criação e personalização deste website usando HTML, a linguagem de marcação padrão usada para exibir documentos num browser web. Não é necessária experiência prévia de codificação, mas recomendamos que comece no início da série se desejar recriar o sítio web de demonstração.
No final desta série, deverá ter um website pronto a ser implantado na nuvem e uma familiaridade básica com HTML. Saber como escrever HTML proporcionará uma base sólida para a aprendizagem de competências adicionais de desenvolvimento web de front-end, tais como CSS e JavaScript.
Este tutorial irá introduzi-lo a um documento HTML básico e ensinar-lhe-á como visualizar o código fonte de um documento HTML num browser.
HTML é utilizado para marcar um documento com instruções que dizem a um navegador como exibir e interpretar o conteúdo do documento. Por exemplo, o HTML pode dizer ao navegador que conteúdo de texto deve ser interpretado como um título e que conteúdo de texto deve ser interpretado como parágrafos. O HTML é também utilizado para adicionar imagens e atribuir ligações a texto e imagens. Estas instruções são comunicadas através de etiquetas HTML, que são escritas desta forma: <tagname>. Muitas, embora não todas as tags, utilizam uma tag de abertura e uma tag de fecho para envolver o conteúdo que são utilizadas para modificar.
Para ter uma noção de como estas etiquetas são utilizadas, vamos inspeccionar um fragmento de código HTML. O código HTML abaixo mostra como as etiquetas HTML são utilizadas para estruturar texto e adicionar links e imagens. Não se preocupe se não compreender imediatamente as etiquetas – estudá-las-emos no próximo tutorial.
<h1>Sammy's Sample HTML</h1><p>This code is an example of how HTML is written.</p><p>It uses HTML tags to structure the text.</p><p>It uses HTML to add a <a href="digitalocean.com/community">link</a>.</p><p>And it also uses HTML to add an image:</p><img src="https://html.sammy-codes.com/images/small-profile.jpeg"/>Este código HTML é apresentado no navegador da seguinte forma:
Deverá agora ter uma compreensão de como o código de exemplo HTML é renderizado num navegador. A seguir, aprenderemos como visualizar o código fonte de qualquer página web utilizando uma ferramenta de browser.
Visualizar o código fonte de uma página Web
Inicialmente, cada página Web que encontrar utiliza HTML para estruturar e exibir páginas HTML. Pode inspeccionar o código fonte de qualquer página web utilizando um navegador web como Firefox ou Chrome. No Firefox, navegue para o item de menu “Ferramentas” no menu superior e clique em “Web Developer/Page Source” dessa forma:
No Firefox, também se pode usar o atalho de teclado Command-U para ver o código fonte de uma página web.
No Cromo, o processo é muito semelhante. Navegue até ao item superior do menu “Ver” e clique em “Developer/View Source”. Também pode usar o atalho de teclado Option-Command-U.
Try inspeccionando o código fonte do sítio web de demonstração que iremos construir nesta série tutorial. Deverá receber uma página com muito mais tags HTML do que o nosso exemplo acima. Não se assuste se parecer avassalador. No final desta série tutorial, deverá ter uma melhor compreensão de como interpretar o código fonte HTML e como usar o HTML para construir e personalizar os seus próprios sítios web.
Nota: Como mencionado acima, pode inspeccionar o código-fonte de qualquer página web utilizando ferramentas do navegador web Firefox ou Chrome. Tente inspeccionar o código de alguns dos seus sites favoritos para ter uma noção do código subjacente que estrutura os documentos da web. Embora o código fonte destes sites contenha provavelmente mais línguas do que HTML, aprender HTML primeiro ajudá-lo-á a preparar-se para aprender línguas e estruturas adicionais para criar websites mais tarde, se assim o desejar.