HTML Básico

Um resumo de como funciona o HTML.

Como funciona uma página? O espaço para sua página na Internet fica em um computador, onde estão todos os seus arquivos de HTML, som, imagem, etc. O computador onde fica a sua home page é chamado de Servidor, pois a qualquer hora do dia ou da noite ele vai estar ligado para as pessoas poderem acessar sua home page. Quando a pessoa entra na sua home page, ela está acessando este espaço. As páginas são feitas usando a linguagem HTML (HyperText Markup Language). Trata-se de uma linguagem simples e bem leve, por isso ela é o padrão da Internet. Nas páginas você coloca sons, imagens, cores. Além disso, as páginas da Web podem ser ligadas entre si, formando o que se chama de Link. Com isso, você pode criar uma página sobre um assunto que lhe agrade a partir de uma outra, com sua foto e um link entre elas. Quando uma pessoa clica neste link, ela vai diretamente para aquela página que você definiu. Vamos passar agora às aulas de HTML para você poder começar a construir seu site. Para visualizar as páginas é necessário um navegador. Os mais conhecidos e utilizados são o Internet Explorer e o Netscape. Estes navegadores fazem basicamente a mesma coisa - mostrar as páginas -, mas devido a algumas diferenças de programação, alguns recursos são visíveis em um e no outro não. O mesmo acontece com versões mais antigas. Navegadores versão 3 não conseguem mostrar uma página HTML corretamente. Por isso, durante a construção do seu site, procure testá-lo nos dois navegadores para verificar se a visualização está correta. Introdução ao HTML Todo documento HTML é composto de Tags. Este é o nome dados aos comandos HTML. Você deve começar sua página com a tag , na primeira linha do código, e terminar com na última linha do documento. Perceba que a barra "/" sinaliza o fechamento da tag. Este fechamento é necessário para que ela possa ser interpretada pelo navegador. A estrutura das tags é formada por:

: Este é o inicio da tag;*

: Este é o fechamento da tag para que ela possa funcionar.**

* xxx é apenas uma representação de uma tag, não é uma tag HTML.

** Algumas tags não necessitam do fechamento. Neste caso você será avisado. Entre o início da tag e o seu fechamento ficam os textos, parâmetros, atributos e até outras tags que vão formando a sua página. Se você não fechar corretamente as tags, a página não irá ser mostrada direito ou nem mesmo irá aparecer. Após iniciar o documento com a tag você deve incluir o cabeçalho que é feito com as tags . E também um título usando o par . Geralmente, o título não é mostrado na página, porém os navegadores o utilizam para entitular a janela de visualização. Coloque um título bem claro e explicativo para seus documentos. - A tag O "corpo" do documento deve ser demarcado pelo par ... . Nesta parte do documento serão colocados todos os comandos para apresentação de uma página HTML. Entre as tags e é que você vai colocar todos os códigos para sua página. Um documento simples seria digitado da seguinte maneira:

Aqui você coloca os comandos em HTML.Os espaços em branco são ignorados quando o navegador "lê" o código. Assim o código acima poderia ser escrito da seguinte forma: Aqui você coloca os comandos em HTML. A vantagem é que isto economiza espaço em disco, mas é uma maneira muito confusa e relaxada de programar. Acostume-se a organizar seus programas para poder entendê-los posteriormente. - Atributos do  Através de atributos de , podemos definir cores para os textos, links e para o fundo das páginas, bem como uma imagem de fundo (papel de parede da página):  Onde: - BGCOLOR Cor de fundo (padrão: cinza ou branco) - TEXT Cor dos textos da página (padrão: preto) - LINK Cor dos links (padrão: azul) - ALINK Cor dos links, quando acionados (padrão: vermelho) - VLINK Cor dos links, depois de visitados (padrão: azul escuro ou roxo) - BACKGROUNDImagem de fundo. Saiba como colocar uma imagem de fundo clicando aqui. Em "cor", você pode colocar os valores de cores em inglês como: Preto = blackBranco = whiteAzul = blueAmarelo = yellowVermelho = redVocê também pode usar o valor hexadecimal de cores ou "RRGGBB", que é a forma mais comum de definir cores usadas na Internet.. Com isso você pode colocar em sua página outras cores diferentes, como um azul-claro. Para isso você deve ter o código das cores, e no lugar de escrever o nome da cor em inglês, você coloca o valor da cor Algumas cores disponíveis RRGGBB (hexadecimal): Cor - Código HTMLPRETO - #000000BRANCO - #FFFFFFVERMELHO - #FF0000VERDE - #00FF00AZUL - #0000FFROSA - #FF00FFAMARELO - #FFFF00Agora que você já aprendeu como é o arquivo HTML básico , pode começar a ver tags. Elas ficam após o comando , no meio do seu texto. Após você já pode começar a escrever o que quiser. Há duas formas de formatar o seu texto:- Tags de título - "Headings" Com elas você pode apenas definir o tamanho das letras, mas não o tipo de fontes. Veja agora como ficam as tags "headings" para cabeçalhos que vão do tamanho 1 até 6. 

Este é o primeiro nível

Este é o segundo nível

Este é o terceiro nível

Este é o quarto nível

 

Este é o quinto nível

 

Este é o sexto nível

Este é o primeiro nível Este é o segundo nível Este é o terceiro nível Este é o quarto nível Este é o quinto nível Este é o sexto nível

- Tag  - Você pode também usar as tags de fonte no lugar das tags de "headings". Este tipo de tag é a mais usada, pois você pode definir mais facilmente o tamanho do texto e fonte que você deseja, e personalizar ainda mais a sua página. A tag é , e dentro dela você pode definir vários parâmetros, como cor, tamanho e tipo de letra. Veja agora como usar as tags de fontes: - Atributo FACE - FACE: Uma evolução que permite a escolha da fonte (tipo de letra) para os textos, a tag é feita assim:TextoExemplo:Fonte Times New Roman Fonte Times New RomanFonte Arial Fonte ArialFonte Courier New Fonte Courier New- Atributo COLOR e SIZE - COLOR e SIZE: Atributos cor e tamanho: A palavra terá o tamanho 3 A palavra terá o tamanho 3 A palavra terá a cor vermelha  A palavra terá a cor vermelha.Podemos também combinar as tags acima:Palavra com tamanho 3 e em vermelho  O resultado final será:Palavra com tamanho 3 e em vermelho

Formatando textos

Você pode formatar o texto, colocando-o em negrito, itálico, sublinhado e centralizado. Assim:- Tags , , e Texto - Texto fica em Negrito. Texto - Texto Sublinhado. Texto - Texto em Itálico. 

Texto Texto centralizado.

Os códigos também podem ser escritos uns sobre os outros, acumulando seus efeitos, como por exemplo: Teste 1 e Teste 2O resultado é: 

Teste 1 e Teste 2 Parágrafos

- Tag - Parágrafos:  Em HTML são necessários comandos para definir parágrafos. Não basta você simplesmente pressionar "ENTER" para que a linha vá para baixo, como em editores de texto comuns. Você terá que colocar uma tag para um parágrafo ou para uma linha nova.Para fazer um parágrafo novo, basta colocar a tag . Por exemplo, escreva no editor o seguinte, deste jeito:  Parágrafo 1Parágrafo 2. O resultado será este:Parágrafo 1Parágrafo 2- Tag - Linhas Como você pode ver, o navegador mesmo faz um parágrafo novo cada vez que você coloca esta tag. Caso você queira simplesmente mudar de linha, ao invés de mudar de parágrafo, coloque a tag . Por exemplo, escreva:Parágrafo 1Linha 1Parágrafo 2Linha 2.  O resultado será este:Parágrafo 1Linha 1Parágrafo 2

Linha 2 ------------------------------------------------------------------------------------------------------------- Rogerio da Silva Boreal Distribuidora de Informática www.borealonline.com.br vendas@borealonline.com.br

(18) 3634-4956