Esc. Sec. José Belchior Viegas                                             2009/2010


                                 Re...
Esc. Sec. José Belchior Viegas                                             2009/2010

   Listas o inicio de cada linha é i...
Esc. Sec. José Belchior Viegas                                             2009/2010




   Ou seja, em branco e o título ...
Esc. Sec. José Belchior Viegas                                    2009/2010




   9. Alinhamento para mudar o alinhamento...
Esc. Sec. José Belchior Viegas                                      2009/2010




           b. Tamanhos de caracteres Aqu...
Esc. Sec. José Belchior Viegas                                              2009/2010



   11. Alterar cores do texto e d...
Esc. Sec. José Belchior Viegas                                             2009/2010




   13. Agora têm de elaborar uma ...
Esc. Sec. José Belchior Viegas                                            2009/2010

   17. Várias cores da mesma página: ...
Esc. Sec. José Belchior Viegas                                            2009/2010




           <TABLE BORDER=3>
      ...
Upcoming SlideShare
Loading in...5
×

Pequeno resumo de comandos HTML

4,308

Published on

Pequeno resumo de comandos HTML, com alguns resumos práticos.

Published in: Education, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
4,308
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
76
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Pequeno resumo de comandos HTML"

  1. 1. Esc. Sec. José Belchior Viegas 2009/2010 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> Prof. Cláudio Pedras 08-01-2010 Página 1 de 9
  2. 2. Esc. Sec. José Belchior Viegas 2009/2010 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: Prof. Cláudio Pedras 08-01-2010 Página 2 de 9
  3. 3. Esc. Sec. José Belchior Viegas 2009/2010 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: Prof. Cláudio Pedras 08-01-2010 Página 3 de 9
  4. 4. Esc. Sec. José Belchior Viegas 2009/2010 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: Prof. Cláudio Pedras 08-01-2010 Página 4 de 9
  5. 5. Esc. Sec. José Belchior Viegas 2009/2010 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: Prof. Cláudio Pedras 08-01-2010 Página 5 de 9
  6. 6. Esc. Sec. José Belchior Viegas 2009/2010 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: Prof. Cláudio Pedras 08-01-2010 Página 6 de 9
  7. 7. Esc. Sec. José Belchior Viegas 2009/2010 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> Prof. Cláudio Pedras 08-01-2010 Página 7 de 9
  8. 8. Esc. Sec. José Belchior Viegas 2009/2010 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: Prof. Cláudio Pedras 08-01-2010 Página 8 de 9
  9. 9. Esc. Sec. José Belchior Viegas 2009/2010 <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 Prof. Cláudio Pedras 08-01-2010 Página 9 de 9

×