LIÇÃO 1

LIÇÃO 1

Estrutura

Numa página HTML podem existir textos, imagens, itens multimédia e hipertexto. Para isso o documento HTML apresenta a seguinte estrutura:

<HTML>

<HEAD>

<TITLE>Titulo do documento</TITLE>

</HEAD>

<BODY>

texto, imagem, links, etc...

</BODY>

</HTML>

Como o HTML não é uma linguagem de programação, nunca será avisado de erros cometidos na edição do seu documento. Um simples esquecimento de uma barra pode mudar a sua página.

Secções

<HTML> e </HTML>:
Identifica o documento como sendo HTML.

<HEAD> e </HEAD>:
É o cabeçalho e contém as informações sobre o documento.
<TITLE> e </TITLE>:
Define um título que é mostrado no alto da janela do Browser. Todo documento WWW deve ter um título. Esse título é referenciado em busca pela rede, dando uma identidade ao documento, facilitando assim, a classificação em catálogos de busca.
<BODY> e </BODY>:
Tudo que estiver na seção BODY será mostrado na janela do browser e, consequentemente, apresentado ao leitor. Esta secção pode conter cabeçalhos, parágrafos, listas, tabelas, imagens e links para outros documentos. Dentro da tag <BODY> podemos usar as seguintes opções que não são obrigatórias e caso não existam assumem o valor default:

BGCOLOR -                             Especifica uma cor de fundo para a página;
BACKGROUND -                    Especifica a imagem (.gif ou .jpg) usada no fundo da tela;
BGPROPERTIES = FIXED - Fixa uma imagem no fundo da tela;
TEXT -                                       Define uma cor para o texto;
LINK -                                        Define uma cor para os links;
VLINK -                                     Define uma cor para os links já visitados;
ALINK -                                     Define uma cor para o link na hora que for activado.

Por exemplo:
<BODY BACKGROUND=nome_imagem.extencao BGCOLOR=nome_cor TEXT=nome_cor LINK=nome_cor VLINK=nome_cor ALINK=nome_cor>
Ou então, podemos usar o código equivalente da cor em hexadecimal:
<BODY BACKGROUND=nome_imagem.extencao BGCOLOR=#codigo_cor TEXT=#codigo_cor LINK=#codigo_cor VLINK=#codigo_cor ALINK=#codigo_cor>
Não importa a sequência dos atributos (BGCOLOR, LINK, VLINK...) e sempre se coloca um espaço entre os atributos.

Formatação de Textos

Podemos formatar o texto mudando a fonte do texto, a cor, colocando em itálico, negrito, sublinhado, fonte espaçada, subscrito, etc. Para todas elas é necessário delimitar o início e o fim do texto a ser formatado.

<FONT COLOR=nome_cor> texto </FONT>:
Muda a cor do texto que estiver entre as tags início e fim.

<FONT FACE=nome_letra> texto </FONT>:
Muda o tipo de letra do texto que estiver entre as tags início e fim.

<FONT SIZE=tamanho> texto </FONT> ou <Hn> texto </Hn>:
Muda o tamanho da letra do texto que estiver entre as tags início e fim. O n da tag <Hn> pode variar de 1 (o maior) até 6 (o menor).

<B> texto </B>:
Coloca o texto que estiver entre as tags início e fim em negrito.

<I> texto </I>:
Coloca o texto que estiver entre as tags início e fim em itálico.

<TT> texto </TT>:
Coloca o texto que estiver entre as tags início e fim com fonte mono-espaçada.
<U> texto </U>:
Sublinha o texto que estiver entre as tags início e fim. (Não é aconselhável colocar o texto sublinhado, pois os links já são sublinhados e pode confundir).
<SUP> texto </SUP>:
Coloca o texto que estiver entre as tags início e fim em subscrito.
<SUB> texto </SUB>:
Coloca o texto que estiver entre as tags início e fim em subscrito.
<S> texto </S>:
Taxa o texto que estiver entre as tags início e fim.

Ainda falando da disposição de texto na página, se desejarmos mudar de linha não basta usar o ENTER como num editor de texto, existem tags específicas para isso, além de outros recursos para alojar um texto na página. São eles:

<CENTER> texto </CENTER>:
Centraliza o texto em relação à página.
<BR>:
Quebra de linha, inicia o texto seguinte na linha logo abaixo.
<NOBR> texto </NOBR>:
Faz com que o texto não tenha quebras de linhas e crie uma barra de scroll horizontal para poder ver o texto inteiro.
<WBR>:
Coloca quebra de linhas no comando <NOBR>.a quebra de linha vai ser onde você colocou este comando.
<P>:
Força o fim de um parágrafo, ou seja, pula uma linha antes de iniciar outro parágrafo.

Existe também um comando de pré-formatação (<PRE> texto a ser preformatado </PRE>), é usado para que o browser aceite seus espaços grandes de uma letra para outra e o ENTER, Se você colocar a tag <PRE> a forma que digitar o texto será exactamente como aparecerá no Browser.

Linhas horizontais são formas de deixar sua página com mais facilidade de encontrar coisas e também mais apresentável. Essas linhas são boas saídas para textos grandes em que os assuntos são diversos.

<HR>:
Inclui uma linha horizontal no texto, separando-o em blocos. Nesta tag podemos especificar:

WIDTH - nº % do comprimento ou o nº em pixel - Ex.: <HR WIDTH=50%> ou <HR WIDTH=100>;
SIZE - espessura do traço - Ex.: <HR SIZE=5>.

Exemplo contendo os tags de formatação de texto:

<HTML>
<HEAD>
<TITLE>Exemplo das tags</TITLE>
</HEAD>
<BODY BGCOLOR=White TEXT=Black>


<CENTER>E     X     E     M     P     L     O</CENTER>

</PRE>
<HR WIDTH=80% SIZE=3> <P>
<H1>Tamanho1</H1> <BR>
<H2>Tamanho2</H2> <BR>
<H3>Tamanho3</H3> <BR>
<H4>Tamanho4</H4> <BR>
<H5>Tamanho5</H5> <BR>
<H6>Tamanho6</H6> <BR>
Texto1 - <FONT COLOR=Blue>Cor Azul</FONT> <BR>
Texto2 - <FONT FACE="Times New Roman">Fonte Times New Roman</FONT> <BR>
Texto3 - <B>Negrito</B> <BR>
Texto4 - <I>Itálico</I> <BR>
Texto5 - <TT>Monoespaçado</TT> <BR>
Texto6 - <U>Sublinhado</U> <BR>
Texto7 - <SUP>Sobscrito</SUP> <BR>
Texto8 - <SUB>Subscrito</SUB> <BR>
Texto9 - <S>Taxado</S> <P>

</BODY>
</HTML>

Para ver como ficará a página com estes códigos no Browser crie uma nova página com estes caracteres e grave-a em formato HTML.

Caracteres Especiais

Alguns caracteres especiais são tratados de uma maneira diferente na Web, pelo facto de que nem todos os computadores ligados à Internet estarem configurados para visualizar os acentos. Existe uma codificação que permite a qualquer equipamento interpretar os códigos e exibir na página o caracter desejado.
Os códigos funcionam da seguinte maneira:

Primeiro colocamos o caracter &;
Em seguida a letra que deverá ser acentuada;
Coloque a acentuação desejada;
Acrescente o ";" (ponto e virgula).

Relacionamos abaixo alguns dos caracteres e acentos da HTML:

Acentos e Caracteres Código

Agudo &_acute;

Grave &_grave;

Circunflexo &_circ;

Til &_tilde;

Trema &_uml;

Cedilha &_cedil;

& &

< <

> >

© ©

" "

(espaço em branco)  

Acentos e Caracteres	Código
Agudo	&_acute;
Grave	&_grave;
Circunflexo	&_circ;
Til	&_tilde;
Trema	&_uml;
Cedilha	&_cedil;
&	&
<	<
>	>
©	©
"	"
(espaço em branco)

Secções

Formatação de Textos

Exemplo contendo os tags de formatação de texto:

Caracteres Especiais

Introdução| Lição 1| Lição 2| Lição 3| Lição 4| Lição 5| Lição 6| Lição 7| Lição 8| Lição 9