1. Resumo HTML
Tags Básicos existem 4 Tag que quando quiserem criar uma página vocês iram
utilizar quase sempre:
1. <HTML> serve para indicar ao Browser que se trata de um documento em
HTML;
2. <HEAD> O documento está dividido em duas partes, esta é
cabeça/cabeçalho..;
3. <BODY> …a segunda parte é o corpo do texto;
4. <TITLE> O elemento principal da/o cabeça/cabeçalho é o titulo do
documento, é um elemento importante pois o título vai aparecer na barra de
título do nosso browser.
É preciso não esquecer que quando utilizarem estes tag’s têm sempre que fechar as
mesmas, ou seja, vão ter sempre de utilizar as seguintes tag’s </HTML>,
</HEAD>; <TITLE>; <BODY>, no fundo só têm de se lembrar que estas tag’s têm
sempre que ser acompanhadas pelo seu par.
Isto quer dizer, que quando queremos criar uma nova página, a partida vamos ter de
utilizar pelo menos o seguinte código:
<HTML>
<HEAD>
<TITLE> Aqui escreve-mos o título </TITLE>
</HEAD>
<BODY>
Aqui no corpo do programa inseri-mos o resto do código para que
possa ser visto o que deseja-mos (Listas, texto, imagens, vídeos, etc)
</BODY>
</HTML>
Quadro 1
Muito importante no final temos de gravar sempre o ficheiro com o nome
seguido de .html ou .htm
Comentários serve para que a mesma fique só visível para quem tem acesso ao
código-fonte, tudo o que escrever-mos entre <! > ficara invisível no browser.
Títulos no texto podemos utilizar até seis níveis de título (<H1>,
<H2>….<H6>) para realçar-mos informação embora o H5 e H6 muitas vezes
deixem de ser perceptíveis. Ex: <H1> Título da página de carros XPto </H1>
Parágrafos para indicar o inicio de um novo parágrafo utilizamos o tag <p>.
Ex: Olá estão bons <P>
Linhas para elaborar-mos uma quebra de linha utilizamos o <BR>.
Ex: Espero bem que sim <BR>
2. Listas o inicio de cada linha é indicado pelo tag <UL> sendo que o final da
mesma é indicado por o tag </UL>, entre os dois é que vamos inserir tantos <LI>
consoante a nossa necessidade de item que queremos utilizar, ou seja, se queremos 2
vamos utilizar 2, se queremos três vamos utilizar três, por ai fora.
Ex:
<H3>Tabela classificativa da Liga Sagres<H3>
<UL>
<LI> Sp. Braga
<LI> S.L. Benfica
<LI> F. C. Porto
<LI> Sporting C. P.gal
</UL>
Quadro 2
Então agora vamos lá fazer uma nova página:
1. Vamos abrir um novo documento no “wordpad” (para aceder ao WordPad
vamos clicar em iniciar todos os programas acessórios WordPad).
2. Agora vamos inserir o código do quadro 1.
3. Guardar o documento nos meus documentos com o seguinte nome “Ex2 Liga
Sagres.html” e fecha-lo.
4. Agora vamos clicar duas vezes no mesmo documento.
O documento deve aparecer assim:
A vermelho o que escreve-mos entre as tag’s: <TITLE> </TITLE>
E em baixo o que escreve-mos entre as tag’s: <BODY> </BODY>
5. Como o que escreve-mos no BODY é apenas uma informação vamos pô-la
como um comentário para que a mesma fique só visível para quem tem acesso
ao código-fonte. (vamos ter que abrir o documento com o botão direito do rato,
abrir com .., e depois escolher o programa “wordpad”).
<BODY>
<! Aqui no corpo do programa inseri-mos o resto do código para
que possa ser visto o que deseja-mos (Listas, texto, imagens, vídeos,
etc) >
</BODY>
Depois da alteração vamos guardar o documento e de seguida voltar a clicar duas
vezes no mesmo.
E página vai passar a ficar desta forma:
3. Ou seja, em branco e o título vais se manter o mesmo (Aqui escreve-mos o título)
6. A seguir no mesmo documento vamos mudar o título do documento para:
“Primeira divisão do futebol português”
Ou seja, vamos fazer a seguinte alteração e gravar:
<HEAD>
<TITLE> Primeira divisão do futebol português </TITLE>
</HEAD>
7. Se ainda tivermos o documento aberto com o browser basta clicar na tecla “F5”
e verificar a alteração.
Passa a ficar assim:
8. Vamos agora inserir alguma informação no corpo do programa:
<BODY>
<H3>Tabela classificativa da Liga Sagres<H3>
<UL>
<LI> Sp. Braga
<LI> S.L. Benfica
<LI> F. C. Porto
<LI> Sporting C. P.gal
</UL>
</BODY>
Vai ficar assim:
4. 9. Alinhamento para mudar o alinhamento padrão vamos adicionar o atributo
ALIGN dentro das tags que marcam os títulos e parágrafos.
Ex:
<H3 ALIGN=CENTER> Tabela classificativa da Liga Sagres <H3>
<P ALIGN=CENTER> 1ª Divisão Portuguesa </P>
10. Alterar caracteres
a. Estilos de caracteres
Negrito: <B> Texto Negrito </B><P>
Itálico: <I> Texto Itálico </I><P>
Com duplo espaço entre as palavras:
<TT> Texto duplo espaço </TT><P>
Outro Exemplo:
<B><I> Texto em negrito e itálico </I></B><P>
<B><TT> Texto com duplo espaço em negrito </TT></B><P>
<I><TT> Texto com duplo espaço em itálico </TT></I><P>
<B><TT><I> Texto com duplo espaço em negrito e itálico </I></TT></B>
Nesta altura a página têm que estar assim:
5. b. Tamanhos de caracteres Aqui vamos utilizar o tag “<FONT>” para
modificar o tamanho do texto
<FONT SIZE=7> Texto com FONT SIZE=7 </FONT><P>
<FONT SIZE=6> Texto com FONT SIZE=6 </FONT><P>
<FONT SIZE=5> Texto com FONT SIZE=5 </FONT><P>
<FONT SIZE=4> Texto com FONT SIZE=4 </FONT><P>
<FONT SIZE=3> Texto com FONT SIZE=3 </FONT><P>
<FONT SIZE=2> Texto com FONT SIZE=2 </FONT><P>
<FONT SIZE=1> Texto com FONT SIZE=1 </FONT>
E a nossa página ficara assim:
6. 11. Alterar cores do texto e do fundo da janela do documento.
Por exemplo se escrever-mos <BODY BGCOLOR=FFFFFF TEXT=000000> ou
<BODY BGCOLOR=WHITE TEXT=BLACK> ou seja, texto a preto e fundo a branco
Vamos então alterar o fundo e o tipo de letras da nossa página, vamos passar o fundo
para verde (GREEN) e o texto para azul (BLUE)
<BODY BGCOLOR=GREEN TEXT=BLUE>
<P ALIGN=CENTER> Uma ligação de hipertexto: </P>
<P ALIGN=CENTER>
<A HREF=http://www.google.pt> Motor de busca Google </A>
</P>
A nossa página vai ficar assim:
12. Hyperlinks podemos fazer ligações para outras páginas Web como por
exemplo para o motor de busca GOOGLE
Ex:
<P ALIGN=CENTER> Uma ligação de hipertexto: </P>
<P ALIGN=CENTER>
<A HREF=http://www.google.pt> Motor de busca Google </A>
</P>
A nossa página vai ficar assim:
7. 13. Agora têm de elaborar uma página com um resumo da vossa vida em que
apliquem o que aprenderam até aqui. (nome do ficheiro: “vida 1º e ultimo
nome.html”)
14. Agora tem de criar uma página igual a está: (nome do ficheiro: “Liga Sagres 27
de Outubro.html”)
15. Cores dos Hyperlinks
LINK determina a cor dos links não visitados
ALINK determina a cor que os links devem piscar quando clicados
VLINK determina a cor dos links já visitados
No BODY, vamos inserir LINK=RED ALINK=BLUE VLINK=GREEN
Ou seja, onde está <BODY LBGCOLOR=yellow TEXTO=Blue> passa a estar:
<BODY LINK=RED ALINK=BLUE VLINK=GREEN
BGCOLOR=YELLOW TEXT=BLUE >
16. Como inserir imagens para inserir uma imagem basta indicar o nome do
arquivo dentro do tag <IMG>
Exemplo:
Imagem da Campeão 2008/2009:<P>
<IMG SRC=porto.gif>
<FONT SIZE=5> F.C. do Porto </FONT>
8. 17. Várias cores da mesma página: <FONT COLOR=white> texto na cor
branca </FONT>
<FONT SIZE=5 COLOR=GREEN> F.C. do Porto </FONT>
18. Uma borda em volta da imagem
<FONT SIZE=5 COLOR=GREEN BORDER=2> F.C. do Porto
</FONT>
19. Tabelas as tabelas são constituídas por linhas, dentro das quais são colocadas
células com conteúdo. Se uma linha tiver varias células vai formar uma tabela
com várias colunas.
Os tags para construir uma tabela são:
<TABLE> e </TABLE> para indicar o início e o fim de uma tabela
<TR> e </TR> para indicar o início e o fim de uma linha
<TH> e </TH> para indicar o inicio e o fim de uma célula – título (fica a negrito)
<TD> e </TD> para indicar o inicio e o fim de uma célula
Exemplo:
<TABLE>
<TABLE BORDER>
<TR>
<TD> Célula 1 </TD><TD> Célula 2</TD>
</TR>
<TR>
<TD> Célula 3 </TD> <TD> Célula 4</TD>
</TR>
</TABLE>
Agora para expandir-mos uma coluna, vamos inserir
Exemplo:
<TABLE BORDER=2>
<TR>
<TD COLSPAN=2> Célula expandida</TD>
</TR>
<TR>
<TD Célula 1 </TD> <TD> Célula 2</TD>
</TR>
<TR>
<TD> Célula 3 </TD> <TD> Célula 4</TD>
</TR>
</TABLE>
Outro exemplo:
9. <TABLE BORDER=3>
<TR>
<TD ROWSPAN=2> Célula expandida</td>
<TD> Célula 1 </TD><TD> Célula 2 </TD>
</TR>
</BODY>
</TABLE>
20. Agora vamos aproveitar o que aprendemos de tabelas para elaborar a tabela
classificativa para ficar assim:
21. Alinhamento:
Experimentem os seguintes comandos ALIGN=LEFT; ALIGN=Right;
ALIGN=CENTER no <TABLE> e no <TR>
E no <TR> experimentem também o VALIGN=TOP; VALIGN=MIDDLE;
VALIGN=BOTTOM.
22. Agora vão elaborar uma página com a classificação do grupo de Portugal para o
apuramento do Mundial da África do Sul. Deve conter: vitorias, derrotas e
empates em casa, vitorias, derrotas e empates Fora, Golos marcados e sofridos
(em casa e fora), pontos e classificação. Boa sorte.
23. Agora vão abrir um novo ficheiro Word e elaborar a vossa página da mesma
maneira, não recorrendo ao código HTML. No final vão guardar como pagina
WEB com o seguinte nome Liga Word.html
