UBI 1213 TI Lab3

UNIVERSIDADE DA BEIRA INTERIOR
Faculdade de Engenharia | Departamento de Informática
Tecnologias de Internet
Folha Prática 3 : HTML> Formulários, Formatação
1. Active a aplicação Notepad++ (ou outra equivalente do Linux) e escreva o seguinte código
fonte HTML.
1 <html><body>
2 <form>
3 Nome:
4 <input type="text" name="nome">
5 <br>
6 Apelido
7 <input type="text" name="apelido">
8 </form>
9 </body></html>
2. Faça agora um formulário mais elaborado com o envio dos dados preenchidos para o seu
endereço de correio eletrónico. Escreva o seguinte código fonte HTML.
1 <html><body>
2 <form action="mailto:aluno@ubi.pt" method="post" enctype="text/plain">
3 Nome:
4 <input type="text" name="nome"><br>
5 Masculino
6 <input type="radio" checked name="sexo" value="M"><br>
7 Feminino
8 <input type="radio" checked name="sexo" value="F"><br>
9 <select name="curso">
10 <option value="ei">Engenharia Informática
11 <option value="tsi">Tecnologias de Sistemas de Informação
12 </select><br>
13 <input type="reset" value="Limpar">
14 <input type="submit" value="Enviar">
15 </form>
16 </body></html>
3. Exercício: Desenvolva o seguinte formulário em HTML.
NOTA: A caixa de seleção da "Massa" deverá ter como opções: Fina, Normal, Extra.
2011/2012, 2012/2013
Nuno Garcia | ngarcia@di.ubi.pt, Nuno Pombo | ngpombo@ubi.pt
Filipe Quinaz | D1041@ubi.pt
4. Exercício: Desenvolva um formulário em HTML para subscrição de uma rádio online,

contendo a seguinte informação:
• Nome;
• Apelido;
• Data de nascimento;
• Morada;
• Código Postal;
• Localidade;
• País (deverá utilizar caixa de seleção);
• Estilo(s) de música preferido(s) (deverá usar checkbox);
• Texto livre para informação adicional;
• Código de utilizador pretendido;
• Palavra-chave;
• Botão de confirmação;
• Agrupe os elementos Código de utilizador e Palavra-chave e atribua o título "Dados
de Acesso";
• Agrupe os restantes elementos e atribua o título de "Informação Pessoal". Utilize
uma tabela dispor estes elementos no formulário;
• Pode adicionar outros campos de informação que considere relevantes para o
formulário.
5. Exercício: Faça as modificações necessárias nos formulário do ponto 3. de forma a criar três
agrupamentos de elementos:
• Nome e telefone;
• Menu e Massa;
• Ingredientes adicionais e Observações.
Para cada um dos agrupamentos definidos atribua um título a seu gosto.
6. Mapas de Imagens. Crie um novo ficheiro com o seguinte código fonte HTML. Substitua
"nome_ficheiroX.html" por nomes de ficheiros que tenha criado durante a resolução desta
folha prática, de maneira a abrir diferentes ficheiros consoante a zona da imagem em que
clique.
1 <html>
2 <body>
3 <img src="imagemap.jpg" width="375" height="102" usemap="#meumapa">
4 <map name="meumapa">
5 <area shape="circle" coords="58,50,40" href="nome_ficheiro1.html">
6 <area shape="rect" coords="136,11,227,89" href="nome_ficheiro2.html">
7 <area shape="poly" coords="309,13,358,89,257,89" href="nome_ficheiro2.html">
8 </map>
9 </body>
10 </html>
2011/2012, 2012/2013
7. Formatação. Verifique a formatação de secções através da marca div. Escreva o seguinte

código fonte HTML.
1 <html>
2 <body>
3 <p> A marca div determina a cor (vermelho) do texto seguinte</p>
4 <div style="color:#FF0000;">
5 <h4>Este é um titulo dentro da secção div</h4>
6 <p>Este é um paragrafo dentro da secção</p>
7 </div>
8 <p>Este texto já aparece com a cor por omissão: preto</p>
9 </body>
10 </html>
Compare a formatação div com a formatação span de acordo com o seguinte código HTML.
1 <html>
2 <body>
3 <p> Este texto está normal
4 <span style="color:#0000FF;">
5 este está no mesmo parágrafo mas esta a azul</span>
6 este está no mesmo parágrafo e está normal outra vez</p>
7 <p>
8 <span style="color:#00F00;">Este é outro parágrafo</span>
9 </p>
10 </body>
11 </html>
Bom trabalho!
2011/2012, 2012/2013

UBI 1213 TI Lab3

Загружено:

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

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

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

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

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

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

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

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

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

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

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

UBI 1213 TI Lab3

Загружено:

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

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

UNIVERSIDADE DA BEIRA INTERIOR

Faculdade de Engenharia | Departamento de Informática

Folha Prática 3 : HTML> Formulários, Formatação

3. Exercício: Desenvolva o seguinte formulário em HTML.

4. Exercício: Desenvolva um formulário em HTML para subscrição de uma rádio online,

7. Formatação. Verifique a formatação de secções através da marca div. Escreva o seguinte

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