A linguagem HTML não é complicada mas é preciso conhecê-la bem para poder entender como funciona perfeitamente e pode realizar algumas manobras com códigos.
Nesta postagem estarei ensinando sobre a estrutura de um documento HTML e como você pode criar seu próprio documento nessa mesma linguagem.
Criando Documentos HTML
Todo documento HTML precisa conter certas tags padronizadas, no mínimo <HEAD>, </HEAD>, <BODY> e </BODY>, pois elas constituem as duas partes básicas de um documento HTML que são: o HEAD (cabeçalho) e o BODY (corpo do documento).
<HTML>
<HEAD>
<TITLE>Curso de WebDesign</TITLE>
</HEAD>
<BODY>
<H1>Este é o primeiro nível de cabeçalho.</H1><p>
Bem-vindo ao mundo do HTML. Este é o primeiro parágrafo.<p>
Este é o segundo paragráfo
</BODY>
</HTML>
A tag <HEAD> contém, entre outras coisas, o <TITLE> (título), e a tag <BODY> armazena todo o conteúdo do documento, normalmente composto de parágrafos, listas, tabelas, etc.
Para interpretar corretamente o conteúdo do documento HTML, os browsers esperam informações em acordo com as especificações HTML.
Abra o bloco de notas, e digite o código acima e salve-o como primeiro.html. Em seguida, abra arquivo primeiro.html no navegador (Internet Explorer, ou outro).
Explicação:
A primeira TAG que encontramos no documento é <HTML>. Ela é o elemento raiz de um documento HTML, pois dentro dela está todo o conteúdo da página. Esta tag diz ao navegador para iniciar um novo documento HTML, onde o conteúdo que deverá ser exibido esta entre as tags <HTML> e <HTML>.
O texto contido ente as TAG <HEAD> e <HEAD> define o cabeçalho do documento. Estas informações são importantes pois indicam ao navegador a forma que a página deve ser apresentada graficamente.
A tag <TITLE> define o título da página. Observe a figura 1.1 o topo do navegador, está informado Curso de WebDesign.
A tag <BODY> informa ao navegador o que deverá ser exibido graficamente. O corpo da página “BODY” é constituido pelo conteúdo que está entre as tags <BODY> e </BODY>.
2.1 ELEMENTOS BÁSICOS
2.1.1 TÍTULOS
Todo documento em HTML deve possuir um título. O título é exibido em local separado da página, e é utilizado para identificar o documento em outros contextos, de modo que o título deve indicar claramente o conteúdo do documento.
As tag utilizadas para títulos são: <TITLE> e <TITLE>.
<html>
<title>Este é o título</title>
<body>
<h2>E este o cabeçalho de nível 2</h2>
Aqui entra o texto do documento ...
</body>
</html>
2.1.2 CABEÇALHO
Os cabeçalhos normalmente são usados para títulos e sub-títulos de uma texto da página. A linguagem HTML possui seis níveis de cabeçalhos, numerados de 1 a 6; quanto menor o nível, maior será o destaque.
Em geral, os cabeçalhos são exibidos em letras maiores e em negrito, e o HTML adiciona uma linha em branco antes e depois dos cabeçalhos. O primeiro cabeçalho de uma página deve ser marcado como <H1>.
COMANDO:
<Hy> Texto do Cabeçalho </Hy>
Onde o y é um número que poderá ser especificado entre 1 a 6, definindo o nível do cabeçalho.
COMANDO:
<H1> Cabeçalho nível 1 </H1>
<H2> Cabeçalho nível 2 </H2>
<H3> Cabeçalho nível 3 </H3>
<H4> Cabeçalho nível 4 </H4>
<H5> Cabeçalho nível 5 </H5>
<H6> Cabeçalho nível 5 </H6>
Os cabeçalhos normalmente são usados para títulos e sub-títulos de uma texto da página. A linguagem HTML possui seis níveis de cabeçalhos, numerados de 1 a 6; quanto menor o nível, maior será o destaque.
Em geral, os cabeçalhos são exibidos em letras maiores e em negrito, e o HTML adiciona uma linha em branco antes e depois dos cabeçalhos. O primeiro cabeçalho de uma página deve ser marcado como <H1>.
COMANDO:
<Hy> Texto do Cabeçalho </Hy>
Onde o y é um número que poderá ser especificado entre 1 a 6, definindo o nível do cabeçalho.
COMANDO:
<H1> Cabeçalho nível 1 </H1>
<H2> Cabeçalho nível 2 </H2>
<H3> Cabeçalho nível 3 </H3>
<H4> Cabeçalho nível 4 </H4>
<H5> Cabeçalho nível 5 </H5>
<H6> Cabeçalho nível 5 </H6>
2.1.3 PARÁGRAFO
A tag <p> é utilizada para definir o ínicio de um parágrafo, criando uma linha em branco entre cada parágrafo. O tag <p> também é responsável pelo alinhamento dos parágrafos.
O alinhamento pode ser:
-> LEFT : Parágrafo alinhado a esquerda.
-> CENTER: Parágrafo alinhado ao centro.
-> RIGHT: Parágrado alinhado a direita.
-> JUSTIFY : Parágrafo justificado.
<html>
<head>
<title>Alinhamento de parágrafos</title>
</head>
<body>
<p>Este parágrafo utiliza o alinhamento padrão dos navegadores de Internet (esquerdo).
<p align="center">Este parágrafo utiliza o alinhamento centralizado
<p align="right">Este parágrado utiliza o alinhamento à direita.
</body>
</html>
2.1.4 QUEBRA DE LINHA
A tag <br> é usada para terminar uma linha sem iniciar um novo parágrafo. Esta tag <br>, ou “line break”, provoca uma mudança de linha sem acrescentar espaço extra entre as linhas.
Veja a diferença entre o uso da tag <p> e da tag <br>:
MODELO I
<html>
<body>
<h1>Utilizando a tag p </h1>
Vamos separar esta linha com a marcação de paragráfo.<p>
Para verificar a diferença.
</body>
</html>
MODELO II
<html>
<body>
<h1>Utilizando a tag br</h1>
Diferença quando separamos duas linhas utilizando<br>
a marcação de quebra de linha<br>
Diferença quando separamos duas linhas utilizando<br>
a marcação de quebra de linha <br>
Verificou a diferença?
</body>
</html>
2.1.5 COMENTÁRIOS
Os comentários servem para dizer ao navegador que o conteúdo é apenas anotações e que não devem ser apresentados graficamente na página.
Os comentários são utilizados para explicar o código fonte para que mais tarde seja possível compreender o que foi feito.
COMANDO:
<!-- Comentário da página -->
2.1.6 LISTA DE ELEMENTOS BÁSICOS
2.1.7 DICAS
-> Quando criamos páginas em HTML devemos ter sempre atenção ao fato delas poderem ser apresentadas de forma diferente em cada navegadores (browsers) ou em conmputadores diferentes. O ASPECTO GRÁFICO PODE DIFERIR ENTRE COMPUTADORES OU ENTRE NAVEGADORES ! Isso ocorre não só pela diferença entre os sistemas, mas também pelo fato de que os usuários possuem monitores diferentes e podem redimensionar a janela do navegador para o tamanho que prefirirem.
-> As diferenças nos tamanhos das janelas dos navegadores fazem com que o número de linhas varie muito. Por esse motivo não seremos capazes de controlar nem o número de linhas nem os locais em que acontecem as mudanças de linhas.
-> Sempre que quiser inserir linhas em branco use <br>.
-> Já observou alguma vez uma página da internet, e se perguntou: “Quais as instruções que foram utilizadas?”. Se estiver utilizando o Internet Explorer e quiser descobrir as instruções, vá até o menu Exibir e escolha a opção Código Fonte, ou clique com o botão direito do mouse e selecione a opção Exibir Código Fonte.
-> Não desanime se o aspecto do código fonte lhe aparecer assustador. Se esse for o caso, pode ter certeza que a página que está visualizando foi feita por um programa específico. Ao longo do curso, será possível verificar que o código HTML bem escrito a mão é muito fácil de ler, mas muitas pessoas complicam o código para confundir.
Caso queira entrar em contato por algum motivo, acesse a página de contato através deste link:Contato.
Envie dúvidas, reclamações, sugestões, elogios e assuntos mais complexos relacionados ao artigo e em 24 horas estarei lhe respondendo prontamente.
0 comentários:
Postar um comentário
Se você quer fazer algum comentário sobre este artigo, fique a vontade em expressar sua opinião; desde que:
1. Tenha a ver com o assunto;
2. Não haja ofensas pessoais;
3. Não contenha links e spams;
4. Só comente de boa vontade.