Fichas de Trabalho HTML

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 > #sto $ um pargra%o alinhado & direita. #sto $ outro pargra%o com uma 'uebra de linha pelo meio. (ste pargra%o encontra)se centrado na hori*ontal. <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:.

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> <%ont %ace!"Times Ne7 <oman" color!"green" si*e!",">Te4to com %ont Times Ne7 <oman6 de cor 2erde e tamanho ,</%ont> <hr color!;%%5555"align!"le%t" 7idth!"/5=" si*e!"1" noshade> (ste te4to est a negrito (ste te4to est em itlico (ste te4to est sublinhado <stri>e><isco a meio da %rase</stri>e> Te4to normal Te4to um pouco acima da linha Te4to um pouco abai4o da linha <blin>>Te4to a piscar ?N@o %unciona no #nternet (4plorerA<blin>> <%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> <bod > </htlm> ,. 1ra2e o documento com o nome 3htmle4erc5,.htm". -. Abra o %icheiro com o #nternet (4plorer.

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 <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 <D)) 8iperliga+@o para o e4erccio , 'ue 2ai abrir numa no2a pgina ))> <a hre%!"htmle4erc5,.htm">(4erccio ,</a> ) 8iperliga+@o para o e4erccio anterior <D)) 8iperliga+@o para uma ancora dentro desta pgina ))> <a hre%!";resposta"">Jara 'ue ser2e uma ancoraL </a> <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 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: 0. 1ra2e o no2o documento com o nome 3htmle4erc5-b.htm". O. Abra o %icheiro com o #nternet (4plorer.

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 > Pma imagem <img src!Q;;;;;.CpgQ alt!Qte4to alinhado com o rodap$ da imagemQ align!QbottomQ 7idth!QR5Q height!QO1Q> entre o te4to Pma imagem <img src!Q;;;;;.CpgQ alt!Qte4to alinhado com o centro da imagemQ align!QmiddleQ 7idth!QR5Q height!QO1Q> entre o te4to Pma imagem <img src!Q;;;;;.CpgQ alt!Qte4to alinhado com o topo da imagemQ align!QtopQ 7idth!QR5Q height!QO1Q> entre o te4to <h->Jor de%eito a imagem encontra)se alinhada por bai4o</h-> Pma imagem <img src!Q;;;;;.CpgQ alt!Qalinhada por bai4oQ 7idth!QR5Q height!QO1Q> entre o te4to <img src!Q;;;;;.CpgQ alt!Qantes do te4toQ 7idth!QR5Q height!QO1Q> Pma imagem antes do te4to Pma imagem depois do te4to <img src!Q;;;;;.CpgQ alt!Qdepois do te4toQ 7idth!QR5Q height!QO1Q> <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.

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> Ptili*ando mais atributos <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.

Fichas de Trabalho HTML

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Fichas de Trabalho HTML

Загружено:

Авторское право:

Доступные форматы

Ficha de Trabalho n1 HTML

Ficha de Trabalho n2 HTML

Ficha de Trabalho n3 HTML

Ficha de Trabalho n4 HTML

Ficha de Trabalho n5 HTML

Вам также может понравиться