Embed Size (px)
DESCRIPTION
Nota de aula de DDW II - Etec Jales
Citation preview
______________________________________________________________________
ETEC DR JOSÉ LUIZ VIANA COUTINHO - JALES
Técnico em Informática para Internet
Profª.: Evelyn K. R. Matos | email: [email protected]
Face: 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 simples arquivo de texto. Esse arquivo de texto pode ser editado até pelo Bloco de Notas e deve ser salvo com a extensão .html ou .htm.
O arquivo deve possuir obrigatoriamente alguns comandos que fazem o navegador enxergar o texto como uma página HTML. Esses comandos são marcações também chamadas de etiquetas (tags, em inglês).
3
As tags, que servem para definir os
elementos da página, são iniciadas pelo
símbolo "menor que" (<) e finalizadas
pelo símbolo "maior que" (>). Em geral,
uma tag aparece duas vezes, abrindo e
fechando um conteúdo, mas a que
fecha contém uma barra (/).
4
Se quisermos, por exemplo, inserir dois
elementos (um cabeçalho e um
parágrafo), fazemos assim:
<h1>Isto é um cabeçalho</h1>
<p>Isto é um parágrafo</p>
5
Há também os elementos que não
possuem tag de fechamento. São
chamados de elementos vazios. Neste
caso, a tag de fechamento não existe
porque não há conteúdo a ser fechado.
6
Um exemplo de uma tag que cria um elemento vazio é a que introduz uma quebra 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 que
está 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 atributos que são colocados somente na de abertura, obedecendo ao formato: atributo="valor". O valor 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 colocamos mais de um atributo na mesma tag:
<font face="arial" size="2">texto</font>.
8
Mesmo sabendo que não são uma
exigência da linguagem HTML,
considere como bons hábitos:
1) Utilizar sempre as tags de fechamento;
2) Colocar sempre os valores dos atributos
entre aspas;
3) Utilizar sempre letras minúsculas nas tags
e atributos.
9
<html>
<head>
<title>··· </title>
</head>
<body>
···
</body>
</html>
<html> e </html> marcam o início e o final do documento HTML.
<head> e </head>, é o cabeçalho do
documento, traz informações sobre o
conteúdo da página e pode ser
constituído de vários elementos, dentre
os quais, temos o título do documento,
entre as tags <title> e </title>.
<body> e </body> é o corpo da página
e contém as informações que
efetivamente serão exibidas pelo
navegador. Nele, são inseridos
elementos, tais como, cabeçalhos,
parágrafos, listas, links, imagens e
tabelas. 10
Deve ser inserido entre as tags <title> e
</title>. Dá uma identidade ao
documento e é utilizado em buscas na
rede.
Aparece fora da página, na barra de
título do navegador. Não podemos
confundir esse título com aqueles títulos
que são exibidos dentro da página.
11
O texto de um cabeçalho deve ser especificado com a utilização das tags a seguir. São seis níveis: de 1 (o maior tamanho) 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ício de um novo parágrafo, deixando uma linha 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 mudar de linha sem deixar linha em branco. Para fazer isso, devemos aplicar uma quebra de linha através da tag <br/>.
13
Há muitas situações em que precisamos mudar de linha sem deixar linha em branco. Para fazer isso, devemos aplicar uma quebra de linha através da tag <br/>.
14
As ordenadas (ordered lists) são criadas
com as tags <ol> e </ol>.
E as não ordenadas (unordered lists)
com <ul> e </ul>.
Em ambas, utilizamos <li> e </li> para
introduzir cada item.
15
16
Podemos inserir um link numa página HTML através das tags <a> e </a>. E, no atributo href, colocamos o seu destino.
<a href="destino">conteúdo</a>
Destino = Pode ser um nome de um arquivo, um
caminho completo do arquivo, um ponto localizado no interior de um arquivo, uma URL, ou ainda um endereç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(para
que o visitante possa enviar uma
mensagem);
4) Links com arquivos para downloads.
18
São links que estabelecem conexão
entre as páginas do mesmo site.
<a href=“contato.html">contato</a>
19
São links que se dirigem a páginas de
outro site.
<a href=http://www.siteabc.com>siteabc</a>
20
Os links a endereços de email são
aqueles que permitem ao visitante
remeter uma mensagem via correio
eletrônico (e-mail).
<a href="mailto:[email protected]">[email protected]</a>
O visitante da página necessitará ter uma conta de e-mail
configurada em seu sistema. Se não tiver, esse sistema de
contato não funcionará.
21
Este tipo de link permite que você
coloque à disposição do visitante
arquivos para serem baixados
(downloads). O mecanismo é o mesmo
dos outros links, só que, em vez de dirigir-
se a uma página web, dirige-se a um
arquivo 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 (ou
frame) deverá ser exibido o resultado do
link. Se esse atributo não for
especificado, a exibição será feita na
própria janela onde está o link.
23
_blank - A exibição será feita em uma
nova janela.
_self - A exibição será feita na própria
janela onde está o link (padrão).
_parent - A exibição será feita na janela
que contém o frame onde está o link.
_top - A exibição será feita na janela
que ocupa posição mais alta na
hierarquia, quando há frames.
24
Esses efeitos são obtidos com a
utilização das seguintes tags e seus
respectivos 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 em
arquivos que podemos criar utilizando
editores gráficos ou podemos já tê-los
prontos.
Existem vários formatos de arquivos de
imagens, ou seja, vários tipos. Os
principais são: .jpeg (ou .jpg), .gif e .png.
26
Para inserir uma imagem numa página
HTML utilizamos a tag <img>.
Essa tag é uma das que introduzem
elementos vazios, ou seja, não possui
conteúdo nem fechamento. Possui
apenas atributos.
Abaixo, apresentamos uma lista de seus
principais atributos:
27
Src › Especifica o arquivo de imagem ou o caminho
completo (path), src vem de source (fonte).
Alt › Especifica um texto que aparecerá dentro de
uma área retangular que a imagem deverá ocupar, até que ela seja baixada. alt vem de alternative (texto alternativo).
Border › Define que a imagem terá bordas, ou seja, será
colocada dentro de um retângulo, e o valor atribuído em pixels estabelece a sua espessura. Se for definida como zero não terá bordas e, se não for definida, terá bordas com 1 pixel (padrão).
28
width e height › Definem a largura e a altura da imagem em
pixels. Deve-se colocar exatamente as medidas que a imagem possui.
hspace e vspace › Definem as margens da imagem, em pixels. O
atributo hspace define as margens à esquerda e à direita (sentido horizontal) e o vspace acima e abaixo (sentido vertical). Úteis para distanciar texto ou outro elemento da extremidade da imagem.
Align › Define o alinhamento da imagem dentro da
página e controla o fluxo do texto ao seu redor. Tal texto é o que é digitado imediatamente após a tag <img>.
29
