Aula 004 - Conhecendo as tags "title", "h1" e "p"
Autor: Uai Cartões Bh | Publicado: 2012-05-02T00:51:00-03:00




Vimos na aula 002 a estrutura básica da linguagem HTML (se você não leu essa aula, confira aqui).



Hoje, iremos ampliar um pouco mais o nosso conteúdo, conhecendo três novas tags do HTML: o &lt;title&gt;, o &lt;h1&gt; e &lt;p&gt;.



Mas antes de iniciarmos o nosso estudo, deixe-me responder uma pergunta bastante comum feitas por quem está aprendendo:





O que é e o que não é o HTML?

O HTML é uma sigla que vem do inglês e significa&nbsp;Hyper Text Markup Language (Linguagem de Marcação de Hipertexto);


O HTML não é uma linguaguem de programação. É uma linguagem de marcação, ou seja, ela não faz cálculos, não executa comandos, etc. Ela apenas marca e estrutura as informações para serem lidas por navegadores.


O HTML utiliza tags de marcação (essas que estamos aprendendo aos poucos) para descrever os navegadores o conteúdo da página web, para que os mesmos possam apresentar o conteúdo na tela do usuário.





Tarefas a Serem Feitas







Antes de continuar a leitura desse texto, por favor, execute as tarefas abaixo:



Abra uma pasta em seu PC com o nome "Aula HTML";
Abra o seu bloco de notas em branco e salve nessa pasta com o nome "index.html";















Digite aquela estrutura básica do HTML nesse arquivo.













Obs.: Não vale a pena copiar e colar, hein? Não tenha preguiça. Utilize essas tarefas para memorizar o conteúdo aqui estudo.






A Tag &lt;title&gt;








Essa tag é responsável por informar ao navegador qual é o titulo da página. Esse titulo aparece na barra superior do navegador (chamada barra de título).&nbsp;



A tag &lt;title&gt; deve ser (sempre) inserida dentro do bloco &lt;head&gt; do HTML, conforme você pode verificar abaixo:

&lt;html&gt;
&nbsp; &nbsp; &nbsp;&lt;head&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;title&gt;Título da Página HTML&lt;/title&gt;&nbsp;
&nbsp;&nbsp; &nbsp;&lt;/head&gt;
&nbsp; &nbsp;&nbsp;&lt;body&gt;&nbsp;
&nbsp; &nbsp;&lt;/body&gt;
&lt;/html&gt;



Repare que a tag &lt;title&gt; é uma tag de abertura e &lt;/title&gt; é uma tag de fechamento. Tudo o que for escrito dentro dessa tag aparecerá na barra de título do navegador.




Titulo da Página ao ser aberta no navegador


Vamos fazer um teste?&nbsp;



Abra seu arquivo index.html e inclua na seção &lt;head&gt; &lt;/head&gt; o seguinte título: Minha Primeira Página na WEB.


Para isso, basta fazer o seguinte:

&lt;html&gt;
&nbsp; &nbsp; &nbsp;&lt;head&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;title&gt;Minha Primeira Pàgina na WEB&lt;/title&gt;
&nbsp; &nbsp;&nbsp;&nbsp;&lt;/head&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&lt;body&gt;
&nbsp; &nbsp; &nbsp;&lt;/body&gt;
&lt;/html&gt;



Salve esse arquivo e abra em seu navegador para ver o resultado.







Se você reparar, a sua página foi aberta corretamente, entretanto, nada aparece na tela. Isso acontece porque não colocamos nenhuma informação dentro da tag &lt;body&gt;, apenas na tag &lt;head&gt;. Lembra da aula anterior? Tudo o que colocamos na tag &lt;head&gt; não aparece no navegador.



Já que estamos falando disso, vamos inserir alguma informação na página? Para isso, vamos conhecer mais duas novas tags: o &lt;h1&gt; e o &lt;p&gt;.



A tag &lt;h1&gt;



Essa tag é responsável por dar os títulos às nossas páginas. Sempre que você quiser criar um título, utilize a tag &lt;h1&gt;. Vamos fazer um teste? Abra novamente o seu arquivo de texto. Na seção &lt;body&gt;, vamos digitar o seguinte.



&lt;h1&gt; Título da Página Inicial&lt;h1&gt;
repare que devemos abrir a tag &lt;h1&gt; e não podemos esquecer de fechá-la com a tag &lt;/h1&gt;.



Veja - abaixo - como deve ficar essa nova estrutura:



&lt;html&gt;

&nbsp; &nbsp; &nbsp;&lt;head&gt;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;title&gt;Minha Primeira Pàgina na WEB&lt;/title&gt;

&nbsp; &nbsp;&nbsp;&nbsp;&lt;/head&gt;

&nbsp;&nbsp;&nbsp; &nbsp;&lt;body&gt;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h1&gt;Título da Página Inicial&lt;/h1&gt;

&nbsp; &nbsp; &nbsp;&lt;/body&gt;

&lt;/html&gt;




Salve novamente o arquivo e abra em seu navegador.





Simples, não? Então lembre-se: sempre que quiser fazer uma título em suas página, utilize a tag &lt;h1&gt; &lt;/h1&gt;.



Níveis de títulos



Caso você queira variar os títulos de suas páginas, você ainda pode utilizar as tags:



&lt;h1&gt;

&lt;h2&gt;

&lt;h3&gt;

&lt;h4&gt;

&lt;h5&gt;

&lt;h6&gt;



Quanto maior o número acima, menor o tamanho do título. Vamos ver? Digite o bloco de texto abaixo no seu arquivo e visualize em seu navegador:



&lt;html&gt;

&nbsp; &nbsp; &nbsp;&lt;head&gt;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;title&gt;Minha Primeira Pàgina na WEB&lt;/title&gt;

&nbsp; &nbsp;&nbsp;&nbsp;&lt;/head&gt;

&nbsp;&nbsp;&nbsp; &nbsp;&lt;body&gt;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h1&gt;Título da Página Inicial&lt;/h1&gt;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;h2&gt;Título 2 da Página Inicial&lt;/h2&gt;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;h3&gt;Título 3 da Página Inicial&lt;/h3&gt;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;h4&gt;Título 4 da Página Inicial&lt;/h4&gt;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;h5&gt;Título 5 da Página Inicial&lt;/h5&gt;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;h6&gt;Título 6 da Página Inicial&lt;/h6&gt;

&nbsp; &nbsp; &nbsp;&lt;/body&gt;

&lt;/html&gt;




Veja o resultado em seu navegador:







Não precisa falar que é necessário abrir e fechar as tags de título, né?



A Tag &lt;p&gt;



E para terminar a aula, vamos conhecer a última tag de hoje: &lt;p&gt;.



Utilizamos a tag &lt;p&gt; para inserirmos parágrafos em nossas páginas. Cada parágrafo do seu texto deverá estar dentro dessa tag.



&lt;html&gt;

&nbsp; &nbsp; &nbsp;&lt;head&gt;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;title&gt;Minha Primeira Pàgina na WEB&lt;/title&gt;

&nbsp; &nbsp;&nbsp;&nbsp;&lt;/head&gt;

&nbsp;&nbsp;&nbsp; &nbsp;&lt;body&gt;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h1&gt;Título da Página Inicial&lt;/h1&gt;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;Meu primeiro parágrafo em HTML.&lt;/p&gt;

&nbsp; &nbsp; &lt;/body&gt;

&lt;/html&gt;


Repare que a tag &lt;p&gt; abre o bloco do parágrafo e a tag &lt;/p&gt; o fecha.



Vamos colocar mais dois parágrafos nesse bloco, salvar no arquivo e visualizar no navegador.



&lt;html&gt;

&nbsp; &nbsp; &nbsp;&lt;head&gt;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&lt;title&gt;Minha Primeira Pàgina na WEB&lt;/title&gt;

&nbsp; &nbsp;&nbsp;&nbsp;&lt;/head&gt;

&nbsp;&nbsp;&nbsp; &nbsp;&lt;body&gt;

&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&lt;h1&gt;Título da Página Inicial&lt;/h1&gt;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;Meu primeiro parágrafo em HTML.&lt;/p&gt;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;Este é o segundo parágrafo da página.&lt;/p&gt;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;E este é o terceiro parágrafo que finaliza a página HTML.&lt;/p&gt;

&nbsp; &nbsp; &nbsp;&lt;/body&gt;

&lt;/html&gt;



Resultado no navegador:







A essa altura, você já deve estar se perguntando: mas essa página web tá parecendo mais um arquivo de texto Word do que um site propriamente dito. E eu respondo: é assim que começamos. Temos - primeiro que conhecer e dominar a estrutura HTML, o design (cores, imagens, menus, posicionamentos, etc), vamos ver depois, pois quem fará isso será o CSS e não o HTML.



Vamos relembrar: a função do HTML não é de design, nem programação. A sua função é apenas a de fornecer conteúdo para a página. O restante será estudado assim que terminarmos &nbsp;HTML.



Estou criando um fórum de discussão sobre essa aula. Caso tenha alguma dúvida, basta acessar o link abaixo e postar a sua pergunta:

http://forum-expedicao-3w.21820.n6.nabble.com/Duvidas-sobre-a-aula-004-de-HTML-Basico-td4.html 



É isso ai, pessoal, estudem as tags de hoje e memorizem-nas para darmos continuidade ao curso.