• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
01-Introdução HTML - DDW II
 

01-Introdução HTML - DDW II

on

  • 320 views

Nota de aula de DDW II - Etec Jales

Nota de aula de DDW II - Etec Jales

Statistics

Views

Total Views
320
Views on SlideShare
320
Embed Views
0

Actions

Likes
0
Downloads
8
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    01-Introdução HTML - DDW II 01-Introdução HTML - DDW II Presentation Transcript

    • ______________________________________________________________________ETEC DR JOSÉ LUIZ VIANA COUTINHO - JALESTécnico em Informática para InternetProfª.: Evelyn K. R. Matos | email: evelynkrm@gmail.comFace: facebook.com/evelynbbl
    •  HTML; Tags; Atributos das Tags; Bons hábitos de digitação; Comandos básicos do html;2
    •  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
    •  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
    •  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
    •  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
    •  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
    •  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
    •  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
    • <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
    •  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
    •  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
    •  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
    •  Há muitas situações emque precisamos mudarde linha sem deixar linhaem branco. Para fazerisso, devemos aplicaruma quebra de linhaatravés da tag <br/>.14
    •  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
    •  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
    • 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
    •  São links que estabelecem conexãoentre as páginas do mesmo site.<a href=“contato.html">contato</a>19
    •  São links que se dirigem a páginas deoutro site.<a href=http://www.siteabc.com>siteabc</a>20
    •  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
    •  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
    •  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
    • _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
    •  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
    •  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
    •  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
    •  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
    •  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