01-Introdução HTML - DDW II

______________________________________________________________________
ETEC DR JOSÉ LUIZ VIANA COUTINHO - JALES
Técnico em Informática para Internet
Profª.: Evelyn K. R. Matos | email: evelynkrm@gmail.com
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

 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:abc@gmail.com">abc@gmail.com</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

01-Introdução HTML - DDW II

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (7)

Ähnlich wie 01-Introdução HTML - DDW II

Ähnlich wie 01-Introdução HTML - DDW II (20)

01-Introdução HTML - DDW II