01-Introdução HTML - DDW II

474 visualizações

Publicada em

Nota de aula de DDW II - Etec Jales

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
474
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
13
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

01-Introdução HTML - DDW II

  1. 1. ______________________________________________________________________ETEC DR JOSÉ LUIZ VIANA COUTINHO - JALESTécnico em Informática para InternetProfª.: Evelyn K. R. Matos | email: evelynkrm@gmail.comFace: facebook.com/evelynbbl
  2. 2.  HTML; Tags; Atributos das Tags; Bons hábitos de digitação; Comandos básicos do html;2
  3. 3.  Uma página HTML é gerada por um simplesarquivo de texto. Esse arquivo de textopode ser editado até pelo Bloco de Notase deve ser salvo com a extensão .html ou.htm. O arquivo deve possuir obrigatoriamentealguns comandos que fazem o navegadorenxergar o texto como uma página HTML.Esses comandos são marcações tambémchamadas de etiquetas (tags, em inglês).3
  4. 4.  As tags, que servem para definir oselementos da página, são iniciadas pelosímbolo "menor que" (<) e finalizadaspelo símbolo "maior que" (>). Em geral,uma tag aparece duas vezes, abrindo efechando um conteúdo, mas a quefecha contém uma barra (/).4
  5. 5.  Se quisermos, por exemplo, inserir doiselementos (um cabeçalho e umparágrafo), fazemos assim:<h1>Isto é um cabeçalho</h1><p>Isto é um parágrafo</p>5
  6. 6.  Há também os elementos que nãopossuem tag de fechamento. Sãochamados de elementos vazios. Nestecaso, a tag de fechamento não existeporque não há conteúdo a ser fechado.6
  7. 7.  Um exemplo de uma tag que cria umelemento vazio é a que introduz umaquebra de linha:<p>Aqui temos um parágrafo<br>que continua na linha seguinte.</p> neste exemplo, que o conteúdo do elemento parágrafo é tudo queestá entre as tags <p> e </p>. Já o elemento quebra de linha <br>não possui conteúdo.7
  8. 8.  Uma tag pode conter um ou mais atributosque são colocados somente na de abertura,obedecendo ao formato: atributo="valor". Ovalor pode ser colocado entre aspas ou não. Exemplo de uma tag, onde align é o atributo:<p align="center">parágrafo centralizado</p> Veja agora um exemplo em que colocamosmais de um atributo na mesma tag:<font face="arial" size="2">texto</font>.8
  9. 9.  Mesmo sabendo que não são umaexigência da linguagem HTML,considere como bons hábitos:1) Utilizar sempre as tags de fechamento;2) Colocar sempre os valores dos atributosentre aspas;3) Utilizar sempre letras minúsculas nas tagse atributos.9
  10. 10. <html><head><title>··· </title></head><body>···</body></html><html> e </html> marcam o início eo final do documento HTML.<head> e </head>, é o cabeçalho dodocumento, traz informações sobre oconteúdo da página e pode serconstituído de vários elementos, dentreos quais, temos o título do documento,entre as tags <title> e </title>.<body> e </body> é o corpo da páginae contém as informações queefetivamente serão exibidas pelonavegador. Nele, são inseridoselementos, tais como, cabeçalhos,parágrafos, listas, links, imagens etabelas. 10
  11. 11.  Deve ser inserido entre as tags <title> e</title>. Dá uma identidade aodocumento e é utilizado em buscas narede. Aparece fora da página, na barra detítulo do navegador. Não podemosconfundir esse título com aqueles títulosque são exibidos dentro da página.11
  12. 12.  O texto de um cabeçalho deve serespecificado com a utilização das tagsa seguir. São seis níveis: de 1 (o maiortamanho) a 6 (o menor tamanho).<h1> e </h1><h2> e </h2><h3> e </h3><h4> e </h4><h5> e </h5><h6> e </h6>12
  13. 13.  A tag <p> é utilizada para definir o iníciode um novo parágrafo, deixando umalinha em branco. A tag de fechamento </p> édispensável, mas, como já disse, éaconselhável a sua utilização. Há situações em que precisamos mudarde linha sem deixar linha em branco.Para fazer isso, devemos aplicar umaquebra de linha através da tag <br/>.13
  14. 14.  Há muitas situações emque precisamos mudarde linha sem deixar linhaem branco. Para fazerisso, devemos aplicaruma quebra de linhaatravés da tag <br/>.14
  15. 15.  As ordenadas (ordered lists) são criadascom as tags <ol> e </ol>. E as não ordenadas (unordered lists)com <ul> e </ul>. Em ambas, utilizamos <li> e </li> paraintroduzir cada item.15
  16. 16. 16
  17. 17.  Podemos inserir um link numa página HTMLatravés das tags <a> e </a>. E, noatributo href, colocamos o seu destino.<a href="destino">conteúdo</a>Destino = Pode ser um nome de um arquivo, umcaminho completo do arquivo, um ponto localizadono interior de um arquivo, uma URL, ou ainda umendereço de e-mail.Conteúdo = Pode ser um texto ou uma imagem e énele que o usuário dá um clique para fazer o acesso.17
  18. 18. 1) Links com outras páginas do site;2) Links com outros sites;3) Links com endereços de email(paraque o visitante possa enviar umamensagem);4) Links com arquivos para downloads.18
  19. 19.  São links que estabelecem conexãoentre as páginas do mesmo site.<a href=“contato.html">contato</a>19
  20. 20.  São links que se dirigem a páginas deoutro site.<a href=http://www.siteabc.com>siteabc</a>20
  21. 21.  Os links a endereços de email sãoaqueles que permitem ao visitanteremeter uma mensagem via correioeletrônico (e-mail).<a href="mailto:abc@gmail.com">abc@gmail.com</a>O visitante da página necessitará ter uma conta de e-mailconfigurada em seu sistema. Se não tiver, esse sistema decontato não funcionará.21
  22. 22.  Este tipo de link permite que vocêcoloque à disposição do visitantearquivos para serem baixados(downloads). O mecanismo é o mesmodos outros links, só que, em vez de dirigir-se a uma página web, dirige-se a umarquivo de outro tipo.<a href="arq.zip">clique aqui para fazer o download</a>22
  23. 23.  Colocando o atributo target na tag <a>,podemos definir em qual janela (ouframe) deverá ser exibido o resultado dolink. Se esse atributo não forespecificado, a exibição será feita naprópria janela onde está o link.23
  24. 24. _blank - A exibição será feita em umanova janela._self - A exibição será feita na própriajanela onde está o link (padrão)._parent - A exibição será feita na janelaque contém o frame onde está o link._top - A exibição será feita na janelaque ocupa posição mais alta nahierarquia, quando há frames.24
  25. 25.  Esses efeitos são obtidos com autilização das seguintes tags e seusrespectivos fechamentos:<b> - texto em negrito (bold) </b><i> - texto em itálico </i><u> - texto sublinhado (underline) </u><tt> - texto monoespaçados </tt><sup> - texto sobrescrito </sup><sub> - texto subscrito </sub>25
  26. 26.  As imagens são armazenadas emarquivos que podemos criar utilizandoeditores gráficos ou podemos já tê-losprontos. Existem vários formatos de arquivos deimagens, ou seja, vários tipos. Osprincipais são: .jpeg (ou .jpg), .gif e .png.26
  27. 27.  Para inserir uma imagem numa páginaHTML utilizamos a tag <img>. Essa tag é uma das que introduzemelementos vazios, ou seja, não possuiconteúdo nem fechamento. Possuiapenas atributos. Abaixo, apresentamos uma lista de seusprincipais atributos:27
  28. 28.  Src› Especifica o arquivo de imagem ou o caminhocompleto (path), src vem de source (fonte). Alt› Especifica um texto que aparecerá dentro deuma área retangular que a imagem deveráocupar, até que ela seja baixada. alt vem dealternative (texto alternativo). Border› Define que a imagem terá bordas, ou seja, serácolocada dentro de um retângulo, e o valoratribuído em pixels estabelece a sua espessura.Se for definida como zero não terá bordas e, senão for definida, terá bordas com 1 pixel(padrão).28
  29. 29.  width e height› Definem a largura e a altura da imagem empixels. Deve-se colocar exatamente as medidasque a imagem possui. hspace e vspace› Definem as margens da imagem, em pixels. Oatributo hspace define as margens à esquerdae à direita (sentido horizontal) e o vspace acimae abaixo (sentido vertical). Úteis para distanciartexto ou outro elemento da extremidade daimagem. Align› Define o alinhamento da imagem dentro dapágina e controla o fluxo do texto ao seu redor.Tal texto é o que é digitado imediatamenteapós a tag <img>.29

×