Uploaded on

Html

Html

More in: Education , Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,137
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
31
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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