Você está na página 1de 7

Ficha de Trabalho n1 HTML

Temas abordados: Definio de um documento HTML; Cabealho; Corpo; Titulo da pgina; Pargrafos; uebras de linha; T!tulos"
1. Abra o Bloco de Notas e digite o seguinte cdigo: <html> <head> <title>Ttulo da minha pgina</title> </head> <bod > <p align!"right">#sto $ um pargra%o alinhado & direita.</p> <p align!"center">#sto $ outro pargra%o com uma 'uebra de linha pelo meio.<br> (ste pargra%o encontra)se centrado na hori*ontal.</p> <h1 align!"le%t"> #sto $ um cabe+alho h1 alinhado & es'uerda </h1> <h, align!"le%t"> #sto $ um cabe+alho h, alinhado & es'uerda </h1> <h- align!"le%t"> #sto $ um cabe+alho h- alinhado & es'uerda </h1> <h. align!"le%t"> #sto $ um cabe+alho h. alinhado & es'uerda </h1> <h/ align!"le%t"> #sto $ um cabe+alho h/ alinhado & es'uerda </h1> <h0 align!"le%t"> #sto $ um cabe+alho h0 alinhado & es'uerda </h1> <bod > </htlm> ,. 1ra2e o documento com o nome 3htmle4erc51.htm". -. Abra o %icheiro com o #nternet (4plorer6 bro7ser utili*ado para testar os nossos documentos 8T9:.

Ficha de Trabalho n2 HTML


Temas abordados: #nsero de uma linha hori$ontal; %ormatao de te&to; 'stilos de fonte"
1. Abra o Bloco de Notas e digite o seguinte cdigo: <html> <head> <title>(4erccio ,</title> </head> <bod > <%ont %ace!"arial" color!";%%5555" si*e!"0">Te4to com %ont Arial6 de cor 2ermelha e tamanho 0</%ont><br><br> <%ont %ace!"Times Ne7 <oman" color!"green" si*e!",">Te4to com %ont Times Ne7 <oman6 de cor 2erde e tamanho ,</%ont><br><br> <hr color!;%%5555"align!"le%t" 7idth!"/5=" si*e!"1" noshade><br> <b> (ste te4to est a negrito </b><br><br> <i> (ste te4to est em itlico </i><br><br> <u> (ste te4to est sublinhado </u><br><br> <stri>e><isco a meio da %rase</stri>e><br><br> Te4to normal <sup>Te4to um pouco acima da linha</sup><sub> Te4to um pouco abai4o da linha</sub><br><br> <blin>>Te4to a piscar ?N@o %unciona no #nternet (4plorerA<blin>><br><br> <%ont %ace!"Times Ne7 <oman" color!"blue" si*e!",">B obCecti2o destes e4erccios $ a compreens@o da linguagem 8T9:6 pois essa linguagem $ a base da constru+@o de pginas para a #nternet.</%ont><br><br> <bod > </htlm> ,. 1ra2e o documento com o nome 3htmle4erc5,.htm". -. Abra o %icheiro com o #nternet (4plorer.

Ficha de Trabalho n3 HTML


Temas abordados: Comentrio em HTML; Hiperliga(es em te&to para fora do documento; Hiperliga(es em te&to para dentro do documento; Hiperliga(es para e)mails"
1. Abra o Bloco de Notas e digite o seguinte cdigo: <html> <head> <title>(4erccio -</title> </head> <bod > <D)) Eabe+alho ?isto $ um comenttioA ))> <h. align!"le%t"><%ont %ace!"arial" color!";5555EE" si*e!"-">:in>s Fteis</%ont></h.> <D)) Gormata+@o dos lin>s ?isto $ um comenttioA ))> <%ont %ace!"arial6 hel2$tica6 sans)seri%" si*e!","> <D)) Hai abrir a pgina na prpria Canela ))> <a hre%!"http://777.microso%t.pt/">9icroso%t6 :da.</a> ) Iite da 9icroso%t Jortugal<br> <D)) Eom o target 2ai abrir a pgina numa no2a Canela ))> <a hre%!"http://etic.no.sapo.pt/" target!"Kblan>">Tecnologias de #n%orma+@o e Eomunica+@o</a> ) Iite de apoio<br> <D)) 8iperliga+@o para o e4erccio , 'ue 2ai abrir numa no2a pgina ))> <a hre%!"htmle4erc5,.htm">(4erccio ,</a> ) 8iperliga+@o para o e4erccio anterior<br> <D)) 8iperliga+@o para uma ancora dentro desta pgina ))> <a hre%!";resposta"">Jara 'ue ser2e uma ancoraL </a> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br> <D)) Me%ini+@o da ancora atra2$s do atributo name ))> <a name!"resposta"">B atributo name $ usado para criar o nome de uma ancora. B nome da ancora pode ser 'ual'uer te4to 'ue deseCe usar.</a> <D)) Me%ini+@o de um lin> para uma conta de e)mail ))> <a hre%!"mailto:>arlosil2estreNsapo.pt">()mail do pro%essor</a> <bod > </htlm> ,. 1ra2e o documento com o nome 3htmle4erc5-.htm". -. Abra o %icheiro com o #nternet (4plorer. .. Na sua pasta6 crie uma directoria com o nome 3-b" e %a+a uma cpia do %icheiro 3htmle4ec51.htm" para o seu interior.

/. Abra no2amente o documento 3htmle4erc5-.htm" e %a+a a seguinte altera+@o: Bnde di*: <D)) 8iperliga+@o para o e4erccio , 'ue 2ai abrir numa no2a pgina ))> <a hre%!"htmle4erc5,.htm">(4erccio ,</a> ) 8iperliga+@o para o e4erccio anterior<br> Altere para <D)) 8iperliga+@o para o e4erccio 1 'ue 2ai abrir numa no2a pgina ))> <a hre%!"-b/htmle4erc51.htm" target!"Kblan>">(4erccio 1</a> ) B primeiro e4erccio de 8T9:<br> 0. 1ra2e o no2o documento com o nome 3htmle4erc5-b.htm". O. Abra o %icheiro com o #nternet (4plorer.

Ficha de Trabalho n4 HTML


Temas abordados: #nsero de imagens"
1. H & pasta 3As minhas imagens" e copie o %icheiro 3;;;;;.Cpg"1 para a sua pasta. ,. Abra o Bloco de Notas e digite o seguinte cdigo: <html> <head> <title>(4erccio .</title> </head> <bod > <p>Pma imagem <img src!Q;;;;;.CpgQ alt!Qte4to alinhado com o rodap$ da imagemQ align!QbottomQ 7idth!QR5Q height!QO1Q> entre o te4to</p> <p>Pma imagem <img src!Q;;;;;.CpgQ alt!Qte4to alinhado com o centro da imagemQ align!QmiddleQ 7idth!QR5Q height!QO1Q> entre o te4to</p> <p>Pma imagem <img src!Q;;;;;.CpgQ alt!Qte4to alinhado com o topo da imagemQ align!QtopQ 7idth!QR5Q height!QO1Q> entre o te4to</p> <h->Jor de%eito a imagem encontra)se alinhada por bai4o</h-> <p>Pma imagem <img src!Q;;;;;.CpgQ alt!Qalinhada por bai4oQ 7idth!QR5Q height!QO1Q> entre o te4to</p> <img src!Q;;;;;.CpgQ alt!Qantes do te4toQ 7idth!QR5Q height!QO1Q> Pma imagem antes do te4to</p> <p>Pma imagem depois do te4to <img src!Q;;;;;.CpgQ alt!Qdepois do te4toQ 7idth!QR5Q height!QO1Q></p> <bod > </htlm> -. 1ra2e o documento com o nome 3htmle4erc5..htm". .. Abra o %icheiro com o #nternet (4plorer.

Bnde est 3;;;;;.Cpg" $ o nome de um %icheiro 'ual'uer de imagem6 de pre%erSncia n@o muito grande.

Ficha de Trabalho n5 HTML


Temas abordados: Criao de Tabelas"
1. Eopie o %icheiro 3;;;;;.Cpg", para a sua pasta. ,. Abra o Bloco de Notas e digite o seguinte cdigo: <html> <head> <title>(4erccio /</title> </head> <bod > <D)) tabela com - linhas e . c$lulas em cada linha ))> <table 7idth!Q-R1Q border!Q1Q bordercolor!;Q%%55%%Q> <tr> <D))A Fnica di%eren+a dos th para os td est no %acto de os th serem a negrito))> <td height!Q-OQ align!QcenterQ 2align!QmiddleQ>Hendas/9Ss</td> <th align!Qle%tQ 2align!QbottomQ>Taneiro</th> <th align!Qle%tQ 2align!QbottomQ>Ge2ereiro</th> <th align!Qle%tQ 2align!QbottomQ>9ar+o</th> </tr> <tr> <td height!Q-0Q align!QrightQ 2align!QtopQ>Eomputadores</td> <th align!QcenterQ 2align!QmiddleQ>15</th> <th align!QcenterQ 2align!QmiddleQ>1/</th> <th align!QcenterQ 2align!QmiddleQ>1/</th> </tr> <tr> <td height!Q.0Q align!Qle%tQ 2align!QbottomQ>9onitores</td> <th align!QcenterQ 2align!QmiddleQ>U</th> <th align!QcenterQ 2align!QmiddleQ>1,</th> <th align!QcenterQ 2align!QmiddleQ>1.</th> </tr> </table> <br> <p>Ptili*ando mais atributos</p> <br> <table 7idth!Q-R1Q bgcolor!;Qcc5555Q cellspacing!Q.Q> <tr> <D))A Fnica di%eren+a dos th para os td est no %acto de os th serem a negrito))> <td height!Q-OQ align!QcenterQ 2align!QmiddleQ bgcolor!Q;cc5555Q>Hendas/9Ss</td> <th align!Qle%tQ 2align!QbottomQ>Taneiro</th> <th align!Qle%tQ 2align!QbottomQ>Ge2ereiro</th> <th align!Qle%tQ 2align!QbottomQ>9ar+o</th>
,

Bnde est 3;;;;;.Cpg" $ o nome de um %icheiro 'ual'uer de imagem6 de pre%erSncia n@o muito grande.

</tr> <tr> <th ro7span!Q,Q height!Q-0Q align!QcenterQ 2align!QmiddleQ>Eomputadores</th> <td align!QcenterQ 2align!QmiddleQ bgcolor!;QccccccQ>15</td> <td align!QcenterQ 2align!QmiddleQ bgcolor!;QccccccQ>1/</td> <td align!QcenterQ 2align!QmiddleQ bgcolor!;QccccccQ>1/</td> </tr> <tr> <td align!QcenterQ 2align!QmiddleQ bgcolor!;QccccccQ>U</td> <td align!QcenterQ 2align!QmiddleQ bgcolor!;QccccccQ>1,</td> <td align!QcenterQ 2align!QmiddleQ bgcolor!;QccccccQ>1.</td> </tr> </table> <bod > </htlm> -. 1ra2e o documento com o nome 3htmle4erc5..htm". .. Abra o %icheiro com o #nternet (4plorer.

Você também pode gostar