Curso HTML – Aula 03

Por Guilherme Farias em 15 de maio de 2010

Nessa nossa terceira aula, finalmente vamos por a mão na massa! Ou melhor, no teclado. ;)

Já que vamos criar nossa primeira pagina HTML, vamos usar o Bloco de Notas do Windows (você pode utilizar outros editores de HTML, como o DreamWeaver, mas recomendo que utilize o Bloco de Notas)

Abra o Bloco de Notas e escreva
<HTML>
<head>
</head>
<body>
</body>
</HTML>

Repare que todo o código HTML está dentro de uma tag <HTML>. Isso significa dizer para o navegador que tudo o que está dentro dessa tag deve ser interpretado como código de hipertexto.
Dentro desde marcador principal, temos o cabeçalho “<head>” e o corpo “<body>”. Por enquanto não temos nada dentro da página, mas ele já é uma página de HTML, Portanto, podemos salvar e visualizar pelo navegador.
Salve esse arquivo como primeirapagina.html em algum lugar de fácil acesso (recomendo salvar na Área de trabalho). Não precisa fechar o editor de texto, apenas abra o arquivo que você salvou. Deixando as 2 janelas abertas fica mais fácil de trabalhar, pois quando você fizer alguma alteração no arquivo, você só precisará atualizar a pagina no navegador (F5).

A sua pagina aberta deve está em branco:

Calma, não vai aparecer nada mesmo, agora é que vamos colocar algo nele.

Tags Básicas <p>,<h1>,<h2>…

Os primeiros tipos de marcadores para o corpo são as tags básicas. Elas recebem esse nome por serem o que existe de mais simples dentro do HTML.

A tag <p> designa um parágrafo. Portanto, os parágrafos devem ser escritos dentro desses marcadores. Veja um exemplo:

<p>Este é um parágrafo</p>
Este não é um parágrafo

Apesar de os navegadores modernos serem capazes de interpretar textos fora dos parágrafos, é sempre mais aconselhável fazer da forma correta, para ganhar todos os benefícios da estrutura hierárquica do HTML (veremos esses benefícios mais adiante).

As tags <h>, chamadas assim pela origem do nome em inglês (header – cabeçalho), pode ser numeradas e permitem incluir títulos; h1 é para o principal, h2 para titulos do segundo nível, h3 para terceiro nível, e assim por diante. O numero Maximo depende de cada navegador, mas via de regra, não recomendo passar do h5 (aliás, haja texto para precisar de mais de cindo níveis de titulo, não? ;D) veja um exemplo:

<h1>Titulo principal</h1>
<h2>Subtítulo>/h2>

O próprio navegador encarrega-se de formatar e ajustar o estilo para que o resultado final fique bom.
Para ver como isso acontece, voltaremos para o nosso arquivo de exemplo. Altere para ficar com este conteúdo:

<HTML>
<head>
</head>
<body>
<h1>Meu primeiro HTML</h1>
<p>parágrafo abaixo do primeiro titulo</p>
<h2>Subtítulo</h2>
<p>Texto do subtítulo que deve aparecer no navegador de forma bem organizada, porque aqui no código fica tudo bagunçado.</p>
<h2>Outro subtítulo</h2>
<p>Parágrafo do outro subtítulo para ver como fica escrever algum texto no HTML</p>
<p>Mais outro parágrafo para ter uma idéia de como fica os parágrafos organizado dentro do HTML</p>
</body>
</HTML>

Depois de salvar, vá ao navegador e atualize a pagina, apertando F5. Você devede ter obtido algo assim:

Observe como o navegador organizou automaticamente o primeiro titulo <H1> como uma fonte maior que os demais títulos, e como os parágrafos ficaram organizados.

Tags de estilo: <b>,<i>,<u>, <s>…

Agora que já sabemos colocar texto no HTML, aprenderemos a acrescentar alguns efeitos.
Os principais efeitos são negrito (bold, <b>), itálico (italic, <i>), sublinhar (underline, <u>) e (riscado, <s> ou <strike>).
Se você já pegou o esquema de marcação do HTML, deve saber que basta colocar algum texto dentro da tag para que ele receba o estilo. Por exemplo:

<p>Esse parágrafo vai conter um texto simples, apenas vamos mostrar os exemplos de estilo, <b>esse é o Negrito</b>, <i>esse é o itálico</i>, <u>sublinhado</u>, e para finalizar, <s>esse está riscado</s>, mas também podemos usar a tag “strike” para ter o mesmo resultado da tag “S” como por exemplo, <strike>Riscado em strike</strike>.</p>

Vamos acrescentar esses estilos no nosso arquivo de exemplo (primeirapagina.html).

Adicione como asseguir:

<HTML>
<head>
</head>
<body>
<h1>Meu primeiro HTML</h1>
<p>parágrafo abaixo do primeiro titulo</p>
<p>Esse parágrafo vai conter um texto simples, apenas vamos mostrar os exemplos de estilo, <b>esse é o Negrito</b>, <i>esse é o itálico</i>, <u>sublinhado</u>, e para finalizar, <s>esse está riscado</s>, mas também podemos usar a tag “strike” para ter o mesmo resultado da tag “S” como por exemplo, <strike>Riscado em strike</strike>.</p>
<h2>Subtítulo</h2>
<p>Texto do subtítulo que deve aparecer no navegador de forma bem organizada, porque aqui no código fica tudo bagunçado.</p>
<h2>Outro subtítulo</h2>
<p>Parágrafo do outro subtítulo para ver como fica escrever algum texto no HTML</p>
<p>Mais outro parágrafo para ter uma idéia de como fica os parágrafos organizado dentro do HTML</p>
</body>
</HTML>

Salve o arquivo e atualize o navegador, o resultado será esse:

Agora estamos terminando nossa terceira aula, na próxima vamos aprender as a criar listas, links, quebra de linhas, linha horinzontal,…

Veja as outras Aulas:

* Curso HTML – Aula 01
* Curso HTML – Aula 02
* Curso HTML – Aula 04
* Curso HTML – Aula 05
* Curso HTML – Aula 06
* Curso HTML – Aula 07
* Curso HTML – Aula 08
* Curso HTML – Aula 09

1 comentário

Deixe uma resposta

O seu endereço de e-mail não será publicado.