HTML para Iniciantes – Aula 2 – Noções básicas
Olá pessoal,
Agora, que deixamos o blá blá para trás colocaremos realmente a mão na massa… Basicamente, entre as ferramentas disponíveis e que podemos utilizar para o desenvolvimento do nosso código, precisaremos apenas de um editor de textos simples, salve o seu documento com a extensão [nome do arquivo].html. É realmente interessante que vocês ainda não utilizem ferramentas de desenvolvimento robustas já que elas facilitam o trabalho, o que pode ocultar detalhes e o nosso momento é de aprendizagem. Portanto, usem apenas um editor de textos comum, como o Notepad++ e um navegador (Firefox, Internet Explorer, Opera, Safari etc). Dê preferência a navegadores mais atuais.
Nosso objetivo atual é conhecer como funciona e qual a estrutura básica de um documento HTML, além do funcionamento de algumas tags. As tags são palavras entre os sinais “<” e “>” que definem o comportamento de parte do seu conteúdo (por ex.: define qual parte do texto é um título ou parágrafo ou imagem etc), ao invés de você apenas jogar o conteúdo em sua página.
É importante ter em mente que exatamente o que for escrito por nós será mostrado pelo browser, por isso devemos ter cuidado na escrita do nosso código, deixar uma tag por “fechar”, por exemplo, pode influenciar todo conteúdo seguinte da página. Vejamos, portanto, o exemplo que será nosso primeiro código. O que será mostrado a seguir é estrutura básica de uma página:
<html>
<head>
<title>Nosso primeiro documento HTML</title>
</head>
<body>
<!--Note a diferença entre as tags que identificam títulos: h1, h2 e h3-->
<!--Isso é um comentário ;]-->
<h1>Título 1</h1>
<h2>Título 2 - Subtítulo</h2>
<h3>Título 3 - Subtítulo</h2>
<p>Aqui há um parágrafo. Qual tag é responsável por isso?</p>
</body>
</html>
Clique AQUI para vizualizar como será exibida nossa primeira página.
Agora, entenderemos como, exatamente, cada tag faz para que o nosso browser exibisse cada conteúdo da forma que exibiu. Em primeiro lugar, todo documento html deve começar e terminar, como vimos acima, entre as tags “<html> e </html>”, respectivamente. Esta tag indica o browser queali se inicia (<html>) e também acaba (</html>). Note a presença do caractere “/”, ele estará presente nas tags de fechamento. Lembre-se disso. A seguir temos as tags principais <head> e <body>. É na tag <head> que ficam informações sobre o documento, é a parte pensante do documento, apesar de o browser não as exibir. Dentro da tag <head> podem aparecer tags como: <title>, <meta>, <style>, <script>, <link> e <base> que conheceremos adiante. O que realmente aparecerá para nós na janela principal do browser (todo conteúdo) ficará entre as tags <body> e </body> e será o corpo do documento.
Agora, explicito como cada tag que aparece no nosso documento se comporta:
<h1>, <h2> e <h3> e mais <h4>, <h5> e <h6> e suas respectivas tags de fechamento: definem conteúdo como título e sub-títulos;
<p> e </p>: dá a um certo bloco de texto a propriedade de parágrafo.
<title> e </title> na tag <head>: Entitula sua página. O texto aqui definido será exibido na barra de título do se navegador.
No próximo post trarei uma relação com exemplos de outras tags para que a gente possa se familiarizar mais com os elementos de um documento HTML e desenvolver melhorias nas nossas páginas…
Abraço…
Deixe seu comentário