Google
 

Home | Próximo »
Introdução ao HTML
Neste tutorial aprenderemos! Quais os softwares necessários?
Não é difícil programar em HTML, nem precisaremos de softwares especializados, o que eu sugiro a você é que use qualquer editor de texto simples que não interfira na digitação do código para que a busca por erros de código que acontecerem fiquem por sua própria conta. Também recomendo que você tenha alguns navegadores diferentes para que veja como renderizam sua página web.

Indicações:
Se você é usuário do Windows use o bloco de notas. Se você é usuário do Mac use o Text Edit. Se você gosta do linux use o vi.

Para os navegadores:
Será ótimo se você instalar no seu computador: Internet Explorer, Mozila Firefox, Opera e o Netscape, todos atualizados e se possível a última versão.
Primeiros passos.
Para começar nossos estudos às folhas de estilo criaremos primeiro uma página Web básica.

<html>

<head>

<title>Minha página Web</title>

</head>

<body>

Bem vindo ao mundo CSS.

</body>

</html>

Os documentos HTML são arquivos de texto simples com tags (Etiquetas) que informam ao navegador (Browser) como apresentar o documento na tela. Essas tags são chamadas de elementos HTML e são apresentadas entre parênteses angulares < e >. A maioria das tags requer uma tag de fechamento.

<etiqueta>...</etiqueta> observe a barra dentro da segunda tag, ela indica a tag de fechamento.

As tags dizem ao navegador como formatar o documento na tela, por isso a tag de fechamento é necessária para definir a formatação de uma porção de texto.

As tags normalmente são aos pares, mas nem sempre é assim, existem tags que não precisam da tag de fechamento. O par de tags <html> e </html> englobam todo o documento, são elas que informam ao browser onde começa e termina o documento HTML.

A primeira tag <html> é a tag de abertura do documento e a tag de fechamento é a mesma tag com uma barra depois do sinal de menor que (<), </html>.

O documento HTML possui duas seções, o cabeçalho (<head>) e o corpo (<body>). Para indicar o cabeçalho usamos a tag <head>...</head> entre essas tags é que colocamos o título da nossa página e outras informações.

Veja no trecho de código abaixo como colocamos o título da nossa página de exemplo:

<html>

<head>

<title>Minha página Web</title>

</head>

Observe que para colocar o título da página usamos as tags <title>...</title> e essas tags devem estar dentro das tags <head>...</head>. Nunca esqueça de colocar o título de sua página pois ele é muito importante.

Logo após a tag de fechamento </head>, temos as tags <body>...</body>, é entre estas tags que colocaremos o conteúdo do documento HTML. Tudo que colocar-mos entre essas tags será exibido no navegador. Imagens, fotos, filmes e tudo que você imaginar.

Agora que já temos uma página básica precisamos salva-la. Salve–a como "index.html" na sua área de trabalho, pois é um lugar fácil de encontrar o arquivo.

Para abrir sua página em um navegador clique no ícone do navegador de sua preferência. Clique no menu "Arquivo" (File), clique em "Abrir" (Open), localize na área de trabalho o documento que você acabou de salvar. Ou se preferir com o navegador aberto arraste o cone do documento e solte dentro do navegador.

Sua página deve estar parecida com esta.

Aprenderemos a seguir como colocar títulos e sub-títulos em nossa página para dar-mos ênfase a algum ponto do texto.

Esta tag é formada pela letra "h" e por um número que vai de um até "6".

<html>

<head>

<title>Títulos</title>

</head>

<body>

<h1>Cabeçalho com tamanho 1</h1>

<h2>Cabeçalho com tamanho 2</h2>

<h3>Cabeçalho com tamanho 3</h3>

<h4>Cabeçalho com tamanho 4</h4>

<h5>Cabeçalho com tamanho 5</h5>

<h6>Cabeçalho com tamanho 6</h6>

</body>

</html>

Veja como sua página deverá se parecer.

Observe que quanto maior o número menor o tamanho da letra. Um elemento comum e interessante é a tag <hr> que coloca uma linha horizontal no documento HTML. Esta tag é um exemplo de tag que não precisa de tag de fechamento.

<html>

<head>

<title>Linha Horizontal</title>

</head>

<body>

<h1>Cabeçalho com tamanho 1</h1>

<h2>Cabeçalho com tamanho 2</h2>

<h3>Cabeçalho com tamanho 3</h3>

<h4>Cabeçalho com tamanho 4</h4>

<h5>Cabeçalho com tamanho 5</h5>

<h6>Cabeçalho com tamanho 6</h6>

<hr>

</body>

</html>

Veja o exemplo com uma linha horizontal

A maioria das tags HTML pode ser modificada através dos atributos, desta forma para fazer com que a tag <hr> ocupe apenas 50% da tela usamos o atributo width = " 50% ".

<html>

<head>

<title>Linha Horizontal a 50%</title>

</head>

<body>

<h1>Cabeçalho com tamanho 1</h1>

<h2>Cabeçalho com tamanho 2<h2>

<h3>Cabeçalho com tamanho 3<h3>

<hr width="50%">

</body>

</html>


Veja o exemplo com a linha horizontal a 50%.

Gostou do site? Indique a seus amigos!
Home | Próximo »

Envie seu comentário:

Nome:     

E-mail:

Comentários:


banner Megaterremoto

Empregos Manager Online

  • Apoiam o Site