Claudio Damasceno
Conteúdo Alinhamento Âncoras, Links Tabelas Formatação Próximo Capítulo HTML prof.claudiodamasceno@hotmail.com 2
Recapitulando - Estrutura básica <html> <head> <title>título DA PÁGINA</title> </head> <body> CORPO DA PÁGINA (Conteúdo) </body> </html> HTML prof.claudiodamasceno@hotmail.com 3
O que cada um faz? <HTML> </HTML> Marca o início e fim da página HTML. <HEAD> </HEAD> Marca o início e fim do cabeçalho. Descrição do cabeçalho e título da página. <TITLE> </TITLE> Marca o início e fim do título do cabeçalho. O título aparece na barra superior do Browser. <BODY> </BODY> Marca o início e fim do corpo da página. HTML prof.claudiodamasceno@hotmail.com 4
Alinhamento <center></center> Alinha tudo que estiver entre as tags ao centro como se fosse um bloco. <div align= left"> Alinhamento a esquerda <div align= center"> Alinhamento ao centro <div align= right"> Alinhamento a direita <div align= justify"> Alinhamento justificado Em Tabelas <td valign= top > alinha o texto da célula Verticalmente no topo <td valign= middle > alinha o texto da célula Verticalmente no meio <td valign= bottom > alinha o texto da célula Verticalmente abaixo <td valign= baseline > alinha de modo que todas as células compartilham a mesma base. HTML prof.claudiodamasceno@hotmail.com 5
Âncoras Âncoras são objetos muito utilizados em sites, isso por ajudar na navegabilidade, um site com muito conteúdo ou muita informação diversificada, pode ser muito cansativo e estressante para o Navegante(Usuário), muitas vezes eles acabam por abandonar o site, e procurar outra forma de entretenimento, e nós perdemos a chance de ganhar um cliente, devemos evitar situações como essa utilizando esse objeto cuja sintaxe e esta abaixo: <a name= nome da âncora > a = significa área name = significa o nome da âncora HTML prof.claudiodamasceno@hotmail.com 6
Âncoras II Ao criar uma âncora criamos na verdade um ponto de referência na página, e isso não aparece no Navegador, é apenas um ponto que nós programadores podemos trabalhar, depois de criada é necessário estabelecer uma ligação[link] com essa âncora. <a href= #nome da âncora > a = significa área href = significa a referência para o Hyperlink, ou seja, o endereço da página ou nome da âncora que vamos acessar. # = mostra que este é um link interno relativo HTML prof.claudiodamasceno@hotmail.com 7
Links Os links podem indicar dois tipos de caminhos Relativos Usado para fazer referência a um documento Usado para fazer referência a um documento armazenado no mesmo servidor do documento atual. <a href= documentos/doc.html >link</a> Absoluto Quando desejamos referenciar um documento que está em outro servidor. <a href= http://www.terra.com.br >Terra</a> HTML prof.claudiodamasceno@hotmail.com 8
Vamos trabalhar <html> Digite o código abaixo em um editor de Textos como Bloco de Notas <head> <! Minha Segunda Página em HTML > <meta name= keyword content="sites pessoais > <meta name= description content="html fácil, com o Professor Claudio > <title> ::TÍTULO DA PÁGINA:: </title> </head> <body bgcolor=black text=white link=blue alink=red vlink=black > Este Site vai custar R$ 500,00 <a href=http://www.youtube.com.br> Vídeos </a> <a href=http://www.yahoo.com.br> e-mail </a> </body> </html> HTML prof.claudiodamasceno@hotmail.com 9
Salvar o arquivo HTML prof.claudiodamasceno@hotmail.com Quando terminar o código, basta ir ao menu arquivo e escolher a opção salvar como Em Nome do Arquivo digite 2.html Obs.: Ao escrevermos.html o arquivo é transformado em uma página que pode ser lida no navegador. Clique no botão Salvar Por fim, feche o bloco de notas, e abra o seu arquivo. O Navegador exibe o conteúdo na Tela. HTML prof.claudiodamasceno@hotmail.com 10
Resultado Observe o endereço URL Observe o título da página Observe o nosso texto HTML prof.claudiodamasceno@hotmail.com 11
Considerações do Exercício Assim como no Capitulo anterior tanto o texto como os links (youtube e yahoo) ficaram na mesma linha, isso não está errado, mas esteticamente não fica legal. Por tanto, precisamos melhorar a aparência, vamos lá mãos a obra. HTML prof.claudiodamasceno@hotmail.com 12
Vamos trabalhar <html> Abra o arquivo 2.HTML pelo Bloco de Notas e complete o código para que fique como mostrado abaixo <head> <! Minha Segunda Página em HTML > <meta name= keyword content= sites pessoais > <meta name= description content= Html fácil, com o Professor Claudio > <title> ::Home:: </title> </head> <body bgcolor=black text=white link=blue alink=red vlink=black > Este Site vai custar R$ 500,00 <a href=http://www.youtube.com.br> Vídeos </a> <a href=http://www.yahoo.com.br> e-mail </a> <p> Minha Segunda página</p> <p> Aulas de HTML e CSS</p> <hr color=red size=4 /> <a href=http://www.google.com.br> pesquisar </a> <a href=http://www.yahoo.com.br> e-mail </a> </body> </html> HTML prof.claudiodamasceno@hotmail.com 13
Salvar e Atualizar Depois de alterar o código, é preciso salvá-lo novamente, para isso basta ir no menu Arquivo e escolher a opção Salvar ou então pressionar simultaneamente as teclas CTRL e S no teclado. Feito isso volte ao seu navegador(internet, Firefox, etc) e aperte a tecla F5 ou clique no botão Atualizar do seu navegador. Caso nenhum destes funcione vá no menu Exibir e escolha Atualizar HTML prof.claudiodamasceno@hotmail.com 14
Resultado HTML prof.claudiodamasceno@hotmail.com 15
Tabelas À princípio, poderia parecer que as tabelas são raramente úteis e que podem ser utilizadas simplesmente para listar dados como agendas, resultados e outros dados de uma forma organizada. Isso tudo é verdade, mas as tabelas são bem mais úteis do que isso. Hoje, grande parte dos profissionais baseia seu planejamento neste tipo de trabalho. De fato, uma tabela nos permite organizar e distribuir os espaços da melhor forma. HTML prof.claudiodamasceno@hotmail.com 16
Tabelas - TAG Principais marcações para tag <TABLE> <Table> - Toda tabela deve ser inicializada com <TABLE> e encerrada com </TABLE>. Antes e depois de uma tabela sempre ocorre quebra de linha. <TR> - (Table row) Demarca cada linha de uma tabela. <TR></TR> <TD> - (Table date) Demarcam as células de uma tabela. Devem ficar sempre entre as tags de linha <TR> e </TR>. <TH> - (Table head) Definem título em uma tabela. Podem estar em qualquer célula. A diferença entre <TD> e <TH> é que o último aparece em negrito. HTML prof.claudiodamasceno@hotmail.com 17
Exercícios <table> <tr> </tr> <tr> </tr> <tr> </tr> </table> <td> Contato </td> <td> Telefone </td> <td> e-mail </td> <td> Âng litha Santos</td> <td> 5500-2244 </td> <td> lalitha500@bol.com.br </td> <td> Claudio Damasceno</td> <td> 8888-0000 </td> <td> prof.claudiodamasceno@hotmail.com </td> HTML prof.claudiodamasceno@hotmail.com 18
Monte a Página HTML prof.claudiodamasceno@hotmail.com 19
Próximo Capítulo Efeitos de Texto Imagem Lista HTML prof.claudiodamasceno@hotmail.com 20
Agradecimentos www.n4w3b.com.br Claudio Damasceno Analista de Sistemas HTML prof.claudiodamasceno@hotmail.com 21