Embed Size (px)
DESCRIPTION
Html
Citation preview
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:
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>
<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>
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:
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”).
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:
<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> <! 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>
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:
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:
Vai ficar assim:
<HEAD> <TITLE> Primeira divisão do futebol português </TITLE>
</HEAD>
<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>
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:
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: Nesta altura a página têm que estar assim:
<H3 ALIGN=CENTER> Tabela classificativa da Liga Sagres <H3> <P ALIGN=CENTER> 1ª Divisão Portuguesa </P>
<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>
b. Tamanhos de caracteres ���� Aqui vamos utilizar o tag “<FONT>” para modificar o tamanho do texto
E a nossa página ficara assim:
<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>
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> 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: A nossa página vai ficar assim:
<P ALIGN=CENTER> Uma ligação de hipertexto: </P> <P ALIGN=CENTER> <A HREF=http://www.google.pt> Motor de busca Google </A> </P>
<P ALIGN=CENTER> Uma ligação de hipertexto: </P> <P ALIGN=CENTER> <A HREF=http://www.google.pt> Motor de busca Google </A> </P>
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: 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>
<BODY LINK=RED ALINK=BLUE VLINK=GREEN BGCOLOR=YELLOW TEXT=BLUE >
17. Várias cores da mesma página: <FONT COLOR=white> texto na cor branca </FONT>
18. Uma borda em volta da imagem 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: Agora para expandir-mos uma coluna, vamos inserir Exemplo: Outro exemplo:
<FONT SIZE=5 COLOR=GREEN> F.C. do Porto </FONT>
<FONT SIZE=5 COLOR=GREEN BORDER=2> F.C. do Porto </FONT>
<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>
<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>
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
<TABLE BORDER=3> <TR> <TD ROWSPAN=2> Célula expandida</td> <TD> Célula 1 </TD><TD> Célula 2 </TD> </TR> </BODY> </TABLE>
