RSS
Revisão para prova de HTML
Olá pessoal! Na última aula com a nossa querida professora Camila, percebi não só uma inquietação, mas também um desespero de alguns colegas, só por causa de uma provinha simples de HTML! “Não há o que temer amigos! O fatecinformatica.com vai te ajudar!” :P
Brincadeiras a parte, esse tutorial deve ajudá-los a compreender um pouco mais de HTML, ou piorar.. vai de cada um!
Primeiramente gostaria de lembrar que, apesar de eu ser um colunista sobre programação, o HTML NÂO é uma linguagem de programação! O acrônimo HTML (Hyper Text Markup Language) significa, resumindo-se, Linguagem de Formatação, pois é apenas isso que ele faz, apresenta as informações de forma estruturada.
Para isso, vou dar algumas dicas que, pessoamente, facilitam a vida da pessoa que está iniciando no html:
- Pensar nas tags HTML como uma família, com Tags-Mãe e Tags-Filha.
- Sempre que abrir uma tag, fecha-a logo em seguida, desta forma você não precisará revisar o tempo inteiro seu código e irá diminuir a chance de errar.
- Use apenas caracteres minúsculos para o HTML, eles são mais legíveis e ocupam menos espaço.
- escreva no máximo 2 tags diferentes na mesma linha.
O resto séra possível aprender observando os códigos que serão apresentados a seguir.
Vamos repetir o execício que foi dado em sala na última aula:
| Titulo da pagina | |
| Links | Iframe |
Pronto, já temos uma tarefa, agora é nos organizarmos para realizá-la em passos:
- Montar a estrutura de uma página html simples
- Montar a estrutura do exercício pedido
- Criar outra tabela para os Links.
- Criar o iframe.
- Por ÚLTIMO, vamos mudar as cores e os alinhamentos da página, sempre com um código LIMPO de se observar.
Passo 1: Montrar a estrutura de uma página html simples
Abra o bloco de notas, e escreva o código abaixo e o salve como revisao.html:
<html> <head> <title>Revisão de HTML</title> </head> <body> </body> </html>
Repare que todas as tags foram devidamente abertas e fechadas, e por enquanto temos apenas uma tag por linha.
Passo 2: Montar a estrutura do exercício pedido
Para realizar este passo, temos que montar uma tabela com 2 lnhas e 2 colunas, sendo que na primeira linha, vamos mesclar as duas colunas:
<html> <head> <title>Revisão de HTML</title> </head> <body> <table width="90%" border="1"> <tr> <td colspan="2">Título da página</td> </tr> <tr> <td width="30%">Links</td> <td>Iframe</td> </tr> </table> </body> </html>
Perceba que os atributos em negrito são respectivamente responsáveis pela largura da tabela, linha da tabela, união das colunas da primeira linha, e largura da primeira coluna da segunda linha. Complicado? É só ler com calma que você verá que não é! Lembre-se: sempre que abrir uma tag, feche-a logo em seguida, depois se preucupe em colocar o conteúdo.
Passo3: Criar outra tabela para os Links
Este é o passo que mais vai “bagunçar” o nosso código. Mas olhe o código a seguir com calma, e verá que a forma que você digita o HTML pode ser a maior responsável pela facilidade ou dificuldade de leitura do código!
Vamos trocar a palavra “Links” pela tabela com os links:
<html>
<head>
<title>Revisão de HTML</title>
</head>
<body>
<table width="90%" border="1">
<tr>
<td colspan=2>Título da página</td>
</tr>
<tr>
<td width="30%">
<table width="100%">
<tr>
<td><a href="http://www.uol.com.br" target="iframe">Link1</a></td>
</tr>
<tr>
<td><a href="http://www.terra.com.br" target="iframe">Link2</a></td>
</tr>
<tr>
<td><a href="http://www.globo.com.br" target="iframe">Link3</a></td>
</tr>
<tr>
<td><a href="http://www.claro.com.br" target="iframe">Link4</a></td>
</tr>
<tr>
<td><a href="http://www.fiat.com.br" target="iframe">Link5</a></td>
</tr>
</table>
</td>
<td>Iframe</td>
</tr>
</table>
</body>
</html>
Repare o formato que o código está pegando, com a tag-filha sempre abaixo e à direita da tag-mãe. Isso torna o nosso código muito mais legível.
Repare também que já adicionamos o atributo target=”iframe” para que possamos abrir nossos links no iframe que iremos construir a seguir.
Passo4: Criar o IFrame
Este deve ser o passo mais simples e rápido de se realizar, pois é só substituirmos a palavra “Iframe” pela tag <iframe>:
<html>
<head>
<title>Revisão de HTML</title>
</head>
<body>
<table width="90%" border="1">
<tr>
<td colspan=2>Título da página</td>
</tr>
<tr>
<td width="30%">
<table width="100%">
<tr>
<td><a href="http://www.uol.com.br" target="iframe">Link1</a></td>
</tr>
<tr>
<td><a href="http://www.terra.com.br" target="iframe">Link2</a></td>
</tr>
<tr>
<td><a href="http://www.globo.com.br" target="iframe">Link3</a></td>
</tr>
<tr>
<td><a href="http://www.claro.com.br" target="iframe">Link4</a></td>
</tr>
<tr>
<td><a href="http://www.fiat.com.br" target="iframe">Link5</a></td>
</tr>
</table>
</td>
<td>
<iframe src="http://www.uol.com.br" name="iframe" width="100%" height="100%">
</iframe>
</td>
</tr>
</table>
</body>
</html>
Pronto! Nossa página esta pronta! Agora só faltam detalhes como cor e alinhamento, e isso é mais fácil mudar com uma estrutura completamente pronta. Só oque precisamos fazer agora é adicionar alguns atributos a algumas tags específicas.
Passo5: Colorir e alinhar a página
Observe:
<html>
<head>
<title>Revisão de HTML</title>
</head>
<body bgcolor="#002200" topmargin="0" leftmargin="0">
<center>
<table width="90%" border="1">
<tr>
<td align="center" colspan=2>
<font face="Verdana" color="#FFFFFF" size="8">Título da página</font>
</td>
</tr>
<tr>
<td width="30%">
<table width="100%">
<tr>
<td><a href="http://www.uol.com.br" target="iframe">Link1</a></td>
</tr>
<tr>
<td><a href="http://www.terra.com.br" target="iframe">Link2</a></td>
</tr>
<tr>
<td><a href="http://www.globo.com.br" target="iframe">Link3</a></td>
</tr>
<tr>
<td><a href="http://www.claro.com.br" target="iframe">Link4</a></td>
</tr>
<tr>
<td><a href="http://www.fiat.com.br" target="iframe">Link5</a></td>
</tr>
</table>
</td>
<td>
<iframe src="http://www.uol.com.br" name="iframe" width="100%" height="100%">
</iframe>
</td>
</tr>
</table>
</center>
</body>
</html>
As tags em negrito foram usadas para “enfeitar” a página, colorindo-a e alinhando-a.
Espero ter colaborado e adicionado alguma coisa ao conhecimento dos colegas! Qualquer dúvidas sobre esse tutorial é só falar!
Um abraço, até a próxima e boa prova! :)
Comentários
8 Comentários em Revisão para prova de HTML
-
Luiz Paulo
19/03/2009
0:38
-
Priscilene
18/03/2009
14:01
-
Natália Marcondes
18/03/2009
9:23
-
Eder
18/03/2009
8:34
-
Ivan Luis
18/03/2009
8:31
-
Bruna
18/03/2009
8:09
-
Heitor Bernardino
18/03/2009
0:32
Opa,muito boa a revisão :D
parabéns :]
Po Tadeu valeu mesmo cara !!!
você conseguiu traduzir tudo em simples e objetivos passo-a-passo
agora só não vai bem na prova quem não quiser ….
até mais !!!!
Excelente explicação de HTML!!!
Muito boa a explicação!!!
Humm..muito bom..ta ajudando bastante moço! Obrigada.. ^^
O Que é isso companheiro? Podemos consultar o site durante a prova? Se puder, é E na veia de todo mundo. Brigadão…
Pô valeu mesmo Tadeu, muito bom …
Nossa, foi uma otima ideia ter dado essa revisão para prova de HTML.
Esta bem completa e vai ajudar muito!!
;D
Olá Tadeu!
Parabéns e muito obrigado pela postagem. É muito bom saber que em nossa turma
existem pessoas como vc, sempre dispostas a ajudar quem tem mais dificuldade. Essas dicas ajudaram muito e esclareceram muitas dúvidas.
Valeu mesmo.
19/03/2009
17:00