Claudio Damasceno. Avançar

Tamanho: px

Começar a partir da página:

Download "Claudio Damasceno. Avançar"

Ângelo Molinari das Neves
8 Há anos
Visualizações:

1 Claudio Damasceno

2 Conteúdo Alinhamento Âncoras, Links Tabelas Formatação Próximo Capítulo HTML 2

3 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

4 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

5 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

6 Â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

7 Â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

8 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= >Terra</a> HTML prof.claudiodamasceno@hotmail.com 8

9 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= Vídeos </a> <a href= </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.

10 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

11 Resultado Observe o endereço URL Observe o título da página Observe o nosso texto HTML prof.claudiodamasceno@hotmail.com 11

12 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

13 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= Vídeos </a> <a href= </a> <p> Minha Segunda página</p> <p> Aulas de HTML e CSS</p> <hr color=red size=4 /> <a href= pesquisar </a> <a href= </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

14 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

15 Resultado HTML 15

16 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

17 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

18 Exercícios <table> <tr> </tr> <tr> </tr> <tr> </tr> </table> <td> Contato </td> <td> Telefone </td> <td> </td> <td> Âng litha Santos</td> <td> </td> <td> </td> <td> Claudio Damasceno</td> <td> </td> <td> </td> HTML 18

19 Monte a Página HTML prof.claudiodamasceno@hotmail.com 19

20 Próximo Capítulo Efeitos de Texto Imagem Lista HTML 20

21 Agradecimentos Claudio Damasceno Analista de Sistemas HTML 21

Documentos relacionados

Passa a passo para construir uma página pessoal - Parte 1

Passa a passo para construir uma página pessoal - Parte 1 Quais ferramentas são necessárias? - Editor de texto básico (sem formatações): use o Bloco de Notas (não use o MS Word e WordPad) - Navegador (browser):