Aula 01

Curso Tcnico em Informtica
Mdulo IV
Desenvolvimento de Aplicaes p/ Internet

Prof Carlos R Gressler Abril 2011
Desenvolvimento de Aplicaes p/ Internet I

Competncia:
Publicar e testar documentos para a internet com base em conceitos de
hipertextualizao, considerando caractersticas de provedores de
acesso, registro de domnio, visado o adequado funcionamento das
aplicaes desenvolvidas.
16/11/15
Abril - 2011

Habilidades:
Utilizar linguagens de marcao de texto para a criao de documentos
para a internet;
Estruturar pginas de documentos para a internet;
Utilizar marcao e formatao de pargrafos;
Utilizar marcao e formatao de tabelas;
Utilizar marcao de arquivos para download;
Inserir objetos de formulrio em documentos para a internet;
16/11/15
Abril - 2011

Tecnologias Abordadas:
HTML (Hypertext Markup Language);
CSS (Cascading Style Sheets) ;
JavaScript;
Avaliao:
Desenvolvimento de uma pgina WEB utilizando HTML, CSS e
JavaScript;
Trabalho Individual;
Apresentao da pgina para a turma;
16/11/15
Abril - 2011
HTML (Hypertext Markup Language)

1. Elementos Bsicos:
1.1 Introduo:
Internet = INFORMAO;
Servios, facilidades, notcias e atualidades;
Redes sociais, jogos, e-commerce;
HTML:
Sequncia de comandos em texto puro, escritos em um editor de
textos, e que so interpretados pelo navegador (browser);
Ao carregar uma pgina, a mesma renderizada pela interpretao
do cdigo HTML escrito nela, pelo navegador.
Extenso do arquivo: .htm ou .html
16/11/15
Abril - 2011

1.1 Introduo:
Softwares:
FrontPage;
Dreamweaver;
Criam o cdigo HTML automaticamente;
WYSIWYG (What you see is what you get);
Incorpora outras tecnologias:
CSS;
JavaScript;
16/11/15
Abril - 2011

1.2 Publicao de Pginas na Internet:
Requisitos:
Endereo fixo, domnio. Ex: www.meudomino.net
Hospedagem em um servidor;
Software de transferncia de arquivos para envi-los ao servidor:
FTP (File Transfer Protocol)
Filezilla (gratuito);
16/11/15
Abril - 2011

1.3 Visualizando uma Pgina HTML:
Requisitos:
Uso de um navegador (browser):
Microsoft Internet Explorer;
Mozilla Firefox;
Safari;
Opera;
Editor de textos (formato ASCII);
Salvar os arquivos com extenso .htm ou .html;
Abra o arquivo no navegador de sua preferncia;
16/11/15
Abril - 2011

1.4 Tags HTML:
So os comandos HTML:
Definem como texto e imagens sero formatadas e exibidas;
Pode referenciar outra pgina WEB (Links);
So identificadas pelos smbolos < >:
<tag_abertura>
</tag_fechamento>
As tags HTML, no so case sensitive;
<HTML> <Html> <html>;
16/11/15
Abril - 2011

1.5 Estrutura Bsica de um Documento HTML:
So 3 partes bsicas :
Estrutura principal, o cabealho e o corpo de texto;
Estrutura Principal
Cabealho
Corpo de Texto
16/11/15
Abril - 2011
10

So as linhas obrigatrias para o funcionamento de uma pgina WEB;
16/11/15
Abril - 2011
11

<HTML> e </HTML>:
Usadas para delimitar o incio e o fim da pgina.
<HEAD> e </HEAD>:
Delimitam o cabealho da pgina: coleo no-ordenada de
informaes sobre o documento para fins de classificao e
indexao.
<TITLE> e </TITLE>:
Usada dentro do cabealho da pgina, define o ttulo, que
mostrado na barra de ttulos do navegador.
<BODY> e </BODY>:
Define o corpo da pgina, o contedo do documento.
16/11/15
Abril - 2011
12

1.5.1 Salvando uma Pgina:
Execute o bloco de notas;
Digite o cdigo abaixo:
16/11/15
Abril - 2011
13

Abra o menu Arquivo e clique em Salvar ou Salvar Como;
Escolha a opo Todos os arquivos no campo Salvar como tipo;
No campo Nome do Arquivo digite o nome desejado com a
extenso .htm ou .html. Ex: minhapagina.html
16/11/15
Abril - 2011
14

16/11/15
Abril - 2011
15

1.6 Tags e Atributos:
Um documento escrito em HTML pode conter:
Cores para determinadas fontes;
Aplicar uma imagem de fundo na pgina;
Inserir hiperlinks (chamada para outros documentos);
Toda a formatao, lay-out e efeitos visuais, so compostos por tags
HTML e seus atributos;
Para inserir um comentrio no cdigo HTML
<! Comentrio>
16/11/15
Abril - 2011
16

1.6.1 Tags <META>:
Aparece no cabealho, definindo o que est contido dentro dele.
Identifica as meta informaes ou os dados sobre o contedo de um
documento;
Utilizada por motores de pesquisa, para coletar informaes sobre sites
na Web;
A tag inicial obrigatria, porm o uso da tag final pcional.
16/11/15
Abril - 2011
17

1.6.1.1 Atributos da Tag <META>:
NAME: Indica um nome para a informao;
HTTP-EQUIV: faz uma correspondncia com campos de cabealho do
protocolo http. Podem ser lidos e desencadear uma ao;
CONTENT: Especifica meta informao associando com o primeiro
nome ou cabealho de resposta HTTP;
A tag inicial obrigatria, porm o uso da tag final pcional.
16/11/15
Abril - 2011
18

HTTP-EQUIV CONTENT
Refresh
ContentType
Delay [;url]: Tempo em segundos para

recarregar um documento.
Text/html; CHARSET = character-set
utilizado para especificar um conjunto de
caracteres para o documento
Ajustando o conjunto de caracteres no prprio documento.
16/11/15
Abril - 2011
19

Recarrega o documento atual a cada 3 segundos.
O navegador forado a carregar um novo documento, aps uma espera

de sete segundos.
16/11/15
Abril - 2011
20

1.6.2 Atributos da Tag <BODY>:
Definir cores para:
Textos;
Links;
Fundo das pginas.
Definir imagem de fundo para um documento.
16/11/15
Abril - 2011
21

BGCOLOR:
cor de fundo da pgina. Se no for indicada, o navegador usar um
padro (cinza ou branco).
Ex: < BODY BGCOLOR = cor >
TEXT:
cor do texto do documento. O valor padro preto.
Ex: < BODY TEXT = cor >
LINK:
cor do link do documento. O valor padro azul.
Ex: < BODY LINK = cor >
16/11/15
Abril - 2011
22

VLINK:
cor do link visitado do documento. O valor padro roxo.
Ex: < BODY VLINK = cor >
ALINK:
cor do link ativo, quando o usurio clica com o mouse. O valor
padro vermelho.
Ex: < BODY ALINK = cor >
BACKGROUND:
indica a cor ou o endereo da imagem que ser aplicada no fundo
da pgina.
Ex: < BODY BACKGROUND = cor ou url >
16/11/15
Abril - 2011
23

BOTTOMMARGIN:
distncia entre a boda da janela e o corpo do documento. So
especificados em pixels.
Ex: < BODY BOTTOMMARGIN = pixels >
TOPMARGIN:
margem do topo do documento sobrepondo o valor da margem
padro. Valores em pixels.
Ex: < BODY TOPMARGIN = pixels >
LEFTMARGIN:
Especifica a margem esquerda do documento em pixels.
Ex: < BODY LEFTMARGIN = pixels >
16/11/15
Abril - 2011
24

RIGHTMARGIN:
especifica a margem direita do documento em pixels.
Ex: < BODY RIGHTMARGIN = pixels >
16/11/15
Abril - 2011
25

1.6.3 Tag Cabealho <H>:
Utilizada para formatar um bloco de texto como cabealho;
Utiliza-se para formatar um ttulo ou tpico de uma seo;
Disponibiliza 6 (seis) nveis de cabealho;
16/11/15
Abril - 2011
26

1.6.3 Tag Cabealho <H>:
16/11/15
Abril - 2011
27

1.6.3.1 Atributos da Tag <H>:
ALIGN:
define uma posio de alinhamento, os valores podem ser:
LEFT (esquerda);
CENTER (centralizado);
RIGHT (direita).
STYLE:
alteram as propriedades do texto, como cor, fonte, tamanho,
sublinhado e estilo.
16/11/15
Abril - 2011
28

1.6.4 Tag Centralizar <CENTER>:
Centraliza bloco de textos, tabelas, etc, dentro da pgina exibida
16/11/15
Abril - 2011
29

1.6.4 Tag Centralizar <CENTER>:
16/11/15
Abril - 2011
30

1.6.5 Tag Pargrafo <P>:
Delimita os pargrafos, insere uma linha em branco entre eles;
A Tag de fechamento </P> opcional
16/11/15
Abril - 2011
31

1.6.5.1 Atributos da Tag <P>:
ALIGN:
Define uma posio de alinhamento:
LEFT (esquerda)
CENTER (centralizado)
RIGHT (direita)
JUSTIFY (justificado)
STYLE:
Os valores desse atributo alteram: cor, fonte, tamanho, sublinhado e
estilo do texto marcado.
16/11/15
Abril - 2011
32

1.6.6 Tag Quebra de Linhas <BR>:
Fora a quebra de linha, sem deixar linha em branco.
No precisa de uma tag de fechamento.
16/11/15
Abril - 2011
33

1.6.7 Tag Linha Horizontal <HR>:
Cria uma linha horizontal no documento;
Funo decorativa, utilizada para separar sees de informao;
Pode ser configurada sua largura e se sombreada ou no.
1.6.7.1 Atributos da Tag <HR>:
ALIGN: Define o alinhamento para a linha se for menor que a pgina;
LEFT, CENTER ou RIGHT.
SIZE: Determina a espessura da linha em pixels.
WIDTH: Determina a largura da linha em pixels ou porcentagem.
NOSHADE: Define uma linha slida, sem sombreamento.
16/11/15
Abril - 2011
34

1.6.8 Listas:
1.6.8.1 Lista No-Ordenada:
So criadas atravs das tags: <UL> </UL>
Os itens so marcados com smbolos grficos;
16/11/15
Abril - 2011
35

Podemos definir vrios nveis em uma lista:
16/11/15
Abril - 2011
36

16/11/15
Abril - 2011
37

1.6.8 Listas:
1.6.8.1.1 Atributo da Tag <UL>:
Podemos definir o tipo de marcador utilizando o atributo TYPE:
square
circle
disc
16/11/15
Abril - 2011
38

1.6.8 Listas:
1.6.8.1.1 Atributo da Tag <UL>:
Cada item da lista pode ter um marcador diferente:
16/11/15
Abril - 2011
39

1.6.8 Listas:
1.6.8.2 Listas Ordenadas:
Os itens so marcados com letras e nmeros;
Utilizamos as Tags <OL> </OL>:
16/11/15
Abril - 2011
40

1.6.8 Listas:
No apresenta uma numerao de nvel:
16/11/15
Abril - 2011
41

1.6.8 Listas:
16/11/15
Abril - 2011
42

1.6.8.2.1 Atributos da Tag <OL>:
TYPE: Define o tipo de numerao:
TYPE = 1: Os itens so numerados;
TYPE = a: Os itens so rotulados com letras minsculas;
TYPE = A: Os itens so rotulados com letras maisculas;
TYPE = i: Os itens so rotulados no alfabeto romano minsculo;
TYPE = I: Os itens so rotulados no alfabeto romano maisculo.
START: Define o incio da numerao da lista
16/11/15
Abril - 2011
43

16/11/15
Abril - 2011
44

16/11/15
Abril - 2011
45

1.6.8.3 Listas de Definio:
Utilizamos as tags <DL> </DL>;
A tag final obrigatria;
O texto formatado como uma lista de termos na esquerda, suas
definies endentadas logo abaixo.
As Tags <DT> e <DD> definem os termos e suas definies
respectivamente, suas tags de finalizao so opcionais:
16/11/15
Abril - 2011
46

16/11/15
Abril - 2011
47

16/11/15
Abril - 2011
48

Aula 01

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Aula 01

Uploaded by

Copyright:

Available Formats

Curso Tcnico em Informtica

Desenvolvimento de Aplicaes p/ Internet

Desenvolvimento de Aplicaes p/ Internet I

Desenvolvimento de Aplicaes p/ Internet I

Desenvolvimento de Aplicaes p/ Internet I

HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language)

Delay [;url]: Tempo em segundos para

Ajustando o conjunto de caracteres no prprio documento.

HTML (Hypertext Markup Language)

Recarrega o documento atual a cada 3 segundos.

O navegador forado a carregar um novo documento, aps uma espera

HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language)

HTML (Hypertext Markup Language)

You might also like