HTML (Básico)
Introdução
Antes de mais nada, é preciso que se esclareça alguns pontos sobre HTML. A HTML, não é uma linguagem de programação, é bem mais simples do que isso.
A HTML é a linguagem da web, é simples o suficiente para ser aprendida em qualquer curso, qualquer livro e também neste tutorial. Seu nome real é HyperText Markup Language (Linguagem de Marcação de Hipertexto) e nada mais é, do que um simples conjunto de códigos. Toda página da web existente hoje no mundo foi elaborada com o emprego da HTML, puramente ou através de um editor (Microsoft FrontPage,...).
Em nosso aprendizado, não utilizaremos os editores de HTML, pois não é necessário o uso destes programas, aprenderemos a HTML pura, o melhor e primeiro passo para se trabalhar na web. Utilizaremos apenas um editor de textos simples, como o BLOCO DE NOTAS do Windows.
As páginas de HTML possuem extensões de arquivos .HTM ou .HTML, mas são apenas arquivos de texto ASCII comum, você pode até utilizar o Microsoft Word para criar os documentos, mas não será possível utilizar os diversos tipos de formatações, cores ou fontes, pois o formato ASCII não permite tais alterações.
Primeiros passos - TAGS
A tag(etiqueta) é a unidade básica de codificação no sistema da HTML. Tudo na HTML depende das tags. A HTML é uma linguagem de marcação. Isso significa que usamos as tags para marcar ou assinalar certas palavras ou frases de um documento de texto. Elas atraem a atenção para certas palavras no nosso documento.
As tags são colocadas entre colchetes angulares < e >. Você poderá escrever as tags em letras maiúsculas ou minúsculas sem alterar na sua função.
Existem tags vazias e tags containers. Uma tag vazia atua apenas uma vez na marcação de uma palavra ou frase do documento, não é necessário haver um fechamento desta tag. Exemplo: <BR> é a tag que força o texto a passar para a outra linha, basta colocá-la no final de uma palavra ou frase, que será iniciada outra linha. É uma tag única, não é preciso usar um </BR> para fechamento. Uma tag container necessita de uma no início da marcação do texto e outra no final da área marcada, para o fechamento. Exemplo: <B> esta é a tag de negrito, o texto a seguir desta tag será escrito em negrito, deve ser usado a tag </B> para se delimitar a área marcada, caso contrário, todo o texto escrito a seguir, será mostrado em negrito.
Definição das TAGS
<HTML> e </HTML> Define o conteúdo de um documento em um servidor da web. Deve ser a primeira e a última tag de um documento.
<HEAD> e </HEAD> Define a seção de cabeçalho de um documento de HTML.
<TITLE> e </TITLE> É a tag que define o título de seu documento na barra de títulos de seu navegador(browser).
<H1> e </H1> Define o texto como um cabeçalho, possui 6 tipos: <H1>, <H2>, ..., <H6>. Todas exibem o texto marcado em negrito e em tamanhos diferentes. <H1> exibe em tamanho grande, <H2> exibe em tamanho menor e assim por diante.
<BODY> e </BODY> É o corpo de seu documento, tudo o que aparece na página. Possui atributos que controlam as cores, da página, o fundo(background) da página, a cor dos links,...
Atributos:
- BACKGROUND: especifica uma imagem gráfica a ser usada no plano de fundo do documento. Pode ser qualquer imagem (.bmp, .jpg, .gif,...). Ex:<BODY BACKGROUND="URL">, onde URL é um gráfico.
- BGCOLOR: especifica a cor a ser usada no plano de fundo do documento. Ex: <BODY BGCOLOR="(cor)"> (ao final deste tutorial será indicado uma lista com os códigos das cores mais usadas.).
- TEXT: especifica a cor do texto do documento. Ex: <BODY TEXT="(cor)">.
- LINK: especifica a cor dos hiperlinks do documento. Ex: <BODY LINK="(cor)">.
- VLINK: especifica a cor dos hiperlinks já visitados. Ex: <BODY VLINK="(cor)">.
- ALINK: especifica a cor dos hiperlinks quando clicados. Ex: <BODY ALINK="(cor)">.
<P> Insere um parágrafo no texto.
<BR> Interrompe o texto para a linha seguinte.
<CENTER> e </CENTER> Centraliza o texto.
<LEFT> e </LEFT> Alinha o texto a esquerda.
<B> e </B> Marca o texto como negrito.
<I> e </I> Marca o texto como itálico.
<U> e </U> Marca o texto como sublinhado.
<HR> Traça uma linha horizontal na tela.
Atributos:
- WIDTH: define a extensão da linha, real ou como uma porcentagem da largura da janela. Ex: <HR WIDTH=30> ou <HR WIDTH=70%>.
- SIZE: define a altura ou espessura da linha em pixels. Ex. <HR SIZE=30>.
- NOSHADE: exibe a linha densa em cor preta, sem sombra. Ex. <HR NOSHADE>.
- ALIGN: Alinha a reta a direita, esquerda ou no meio. Ex. <HR ALIGN=LEFT>, (CENTER e RIGHT, são as outras opções.).
<DL> e </DL> Formata o texto como uma lista de definições, semelhantes as listas de glossários, nas quais um termo ou uma frase é acompanhado(a) por um parágrafo recuado com a definição do item. Ex:
<DL>
<DT> ATÔMICO
<DD> Relativo ou pertencente ao átomo.
</DL>.
<OL> e </OL> Formata o texto como uma lista ordenada. Numera sequencialmente cada item (LI) da lista. Ex:
<OL>
<LI> Primeiro item da lista
<LI> Segundo item da lista
</OL>
Atributos:
- TYPE: Define o tipo de marcador para os itens da lista. Ex: <OL TYPE=valor>, onde valor representa as opções de marcadores: A = letras maiúsculas; a = letras minúsculas; I = numerais romanos maiúsculos; i = numerais romanos minúsculos; 1 = números (padrão)
<UL> e </UL> Formata o texto como uma lista não ordenada. Assinala cada item (LI) da lista com um marcador definido pelo seu navegador. Ex:
<UL>
<LI> Introdução
<LI> Capítulo Um
<UL>
<LI> Seção 1.1
<LI> Seção 1.2
</UL>
<LI> Capítulo Dois
</UL>
<FONT> e </FONT> Formata o texto com o tamanho indicado em seu atributo SIZE e a cor da fonte pelo seu atributo COLOR. Ex:
<FONT SIZE=1 COLOR="#0000ff">
<IMG> Exibe imagens em linha no corpo do documento.
Atributos:
- SRC: (source) define a origem do arquivo de imagem associado.
- ALT: Define uma descrição da imagem a ser exibida, se não estiver disponível o suporte para gráficos em linha.
Ex: <IMG SRC="globo.gif" ALT="ilustração do globo">
<PRE> e </PRE> Define o texto como pré-formatado e é exibido com as configurações atuais de texto. (em geral uma fonte proporcional padrão) Conserva todas as quebras naturais de linhas e parágrafos existentes no texto. Pode conter elementos ativos de estilo de HTML.
<S> e </S> Formata o texto como tachado (cortado por uma linah horizontal contínua).
<STRONG> e </STRONG> Formata o texto como fortemente enfatizado.
<TT> e </TT> Formata o texto no estilo máquina de escrever (fonte monoespaçada).
Lista de cores principais
Branco: #FFFFFF
Chocolate: #5C3317
Vermelho: #FF0000
Marrom: #A62A2A
Verde: #00FF00
Bronze: #8C7853
Azul: #0000FF
Coral: #FF7F00
Magenta: #FF00FF
Ouro: #CD7F32
Ciano: #00FFFF
Pink: #BC8F8F
Amarelo: #FFFF00
Quartzo: #D9D9F3
Agua: #70DB93
Salmão: #6F4242
Preto: #000000
Ferro: #E6E8FA
Aqui estão apenas algumas cores. Tente outras usando # seguido de 6 caracteres de "1 a 0" e "A a F" (hexadecimal)
Dica: Para estudar como foram criadas as diversas páginas na web, você poderá observar o código HTML de qualquer página. De um clique com o botão direito do mouse sobre uma área vazia da página e escolha a opção "exibir código fonte", surgirá então um arquivo do BLOCO DE NOTAS do seu Windows. Observe-o, lá está todo o código fonte da página.
Este tutorial foi desenvolvido por Tadeu Kelly Alencar, caso existam dúvidas, entre em contato.
