Aula01

Curso Técnico em InformáticaCurso Técnico em Informática

Módulo IVMódulo IV

Desenvolvimento de Aplicações p/ Internet Desenvolvimento de Aplicações p/ Internet II

Profº Carlos R Gressler – Abril 2011Profº Carlos R Gressler – Abril 2011

Desenvolvimento de Aplicações p/ Internet IDesenvolvimento de Aplicações p/ Internet I

Competência:

Publicar e testar documentos para a internet com base em conceitos de hipertextualização, considerando características de provedores de acesso, registro de domínio, visado o adequado funcionamento das aplicações desenvolvidas.

22/04/23 2Abril - 2011


Habilidades:

• Utilizar linguagens de marcação de texto para a criação de documentos para a internet;

• Estruturar páginas de documentos para a internet;

• Utilizar marcação e formatação de parágrafos;

• Utilizar marcação e formatação de tabelas;

• Utilizar marcação de arquivos para download;

• Inserir objetos de formulário em documentos para a internet;

22/04/23 3Abril - 2011


Tecnologias Abordadas:

• HTML (Hypertext Markup Language);

• CSS (Cascading Style Sheets) ;

• JavaScript;

Avaliação:

• Desenvolvimento de uma página WEB utilizando HTML, CSS e JavaScript;

• Trabalho Individual;

• Apresentação da página para a turma;

22/04/23 4Abril - 2011

HTML (Hypertext Markup Language)HTML (Hypertext Markup Language)

1. Elementos Básicos:

22/04/23 5Abril - 2011

1.1 Introdução:

• Internet = INFORMAÇÃO;

• Serviços, facilidades, notícias e atualidades;

• Redes sociais, jogos, e-commerce;

• HTML:

• Sequência de comandos em texto puro, escritos em um editor de textos, e que são interpretados pelo navegador (browser);

• Ao carregar uma página, a mesma é renderizada pela interpretação do código HTML escrito nela, pelo navegador.

• Extensão do arquivo: .htm ou .html



22/04/23 6Abril - 2011

1.1 Introdução:

• Softwares:

• FrontPage;

• Dreamweaver;

• Criam o código HTML automaticamente;

• WYSIWYG (What you see is what you get);

• Incorpora outras tecnologias:

• CSS;

• JavaScript;



22/04/23 7Abril - 2011

1.2 Publicação de Páginas na Internet:

• Requisitos:

• Endereço fixo, domínio. Ex: www.meudomino.net

• Hospedagem em um servidor;

• Software de transferência de arquivos para enviá-los ao servidor:

• FTP (File Transfer Protocol)

• Filezilla (gratuito);

http://www.meudomino.net/



22/04/23 8Abril - 2011

1.3 Visualizando uma Página HTML:

• Requisitos:

• Uso de um navegador (browser):

• Microsoft Internet Explorer;

• Mozilla Firefox;

• Safari;

• Opera;

• Editor de textos (formato ASCII);

• Salvar os arquivos com extensão .htm ou .html;

• Abra o arquivo no navegador de sua preferência;



22/04/23 9Abril - 2011

1.4 Tags HTML:

• São os comandos HTML:

• Definem como texto e imagens serão formatadas e exibidas;

• Pode referenciar outra página WEB (Links);

• São identificadas pelos símbolos “< >”:

• <tag_abertura>

• </tag_fechamento>

• As tags HTML, não são case sensitive;

• <HTML> <Html> <html>;



22/04/23 10Abril - 2011

1.5 Estrutura Básica de um Documento HTML:

• São 3 partes básicas :

• Estrutura principal, o cabeçalho e o corpo de texto;

Estrutura Principal

Cabeçalho

Corpo de Texto



22/04/23 11Abril - 2011


• São as linhas obrigatórias para o funcionamento de uma página WEB;



22/04/23 12Abril - 2011


• <HTML> e </HTML>:

• Usadas para delimitar o início e o fim da página.

• <HEAD> e </HEAD>:

• Delimitam o cabeçalho da página: coleção não-ordenada de informações sobre o documento para fins de classificação e indexação.

• <TITLE> e </TITLE>:

• Usada dentro do cabeçalho da página, define o título, que é mostrado na barra de títulos do navegador.

• <BODY> e </BODY>:

• Define o corpo da página, o conteúdo do documento.



22/04/23 13Abril - 2011

1.5.1 Salvando uma Página:

• Execute o bloco de notas;

• Digite o código abaixo:



22/04/23 14Abril - 2011


• Abra o menu Arquivo e clique em Salvar ou Salvar Como;

• Escolha a opção “Todos os arquivos” no campo Salvar como tipo;

• No campo “Nome do Arquivo” digite o nome desejado com a extensão .htm ou .html. Ex: “minhapagina.html”



22/04/23 15Abril - 2011




22/04/23 16Abril - 2011

1.6 Tags e Atributos:

• Um documento escrito em HTML pode conter:

• Cores para determinadas fontes;

• Aplicar uma imagem de fundo na página;

• Inserir hiperlinks (chamada para outros documentos);

• Toda a formatação, lay-out e efeitos visuais, são compostos por tags HTML e seus atributos;

• Para inserir um comentário no código HTML

<! Comentário>



22/04/23 17Abril - 2011

• Aparece no cabeçalho, definindo o que está contido dentro dele.

• Identifica as meta informações ou os dados sobre o conteúdo de um documento;

• Utilizada por motores de pesquisa, para coletar informações sobre sites na Web;

• A tag inicial é obrigatória, porém o uso da tag final é pcional.

1.6.1 Tags <META>:



22/04/23 18Abril - 2011

• NAME: Indica um nome para a informação;

• HTTP-EQUIV: faz uma correspondência com campos de cabeçalho do protocolo http. Podem ser lidos e desencadear uma ação;

• CONTENT: Especifica meta informação associando com o primeiro nome ou cabeçalho de resposta HTTP;

• A tag inicial é obrigatória, porém o uso da tag final é pcional.

1.6.1.1 Atributos da Tag <META>:



22/04/23 19Abril - 2011


HTTP-EQUIV CONTENT

Refresh Delay [;url]: Tempo em segundos para recarregar um documento.

Content-Type Text/html; CHARSET = character-set é utilizado para especificar um conjunto de caracteres para o documento

Ajustando o conjunto de caracteres no próprio documento.



22/04/23 20Abril - 2011


Recarrega o documento atual a cada 3 segundos.

O navegador é forçado a carregar um novo documento, após uma espera de sete segundos.



22/04/23 21Abril - 2011

1.6.2 Atributos da Tag <BODY>:

• Definir cores para:

• Textos;

• Links;

• Fundo das páginas.

• Definir imagem de fundo para um documento.



22/04/23 22Abril - 2011


• BGCOLOR:

• cor de fundo da página. Se não for indicada, o navegador usará um padrão (cinza ou branco).

• Ex: < BODY BGCOLOR = cor >

• TEXT:

• cor do texto do documento. O valor padrão é preto.

• Ex: < BODY TEXT = cor >

• LINK:

• cor do link do documento. O valor padrão é azul.

•Ex: < BODY LINK = cor >



22/04/23 23Abril - 2011


• VLINK:

• cor do link visitado do documento. O valor padrão é roxo.

• Ex: < BODY VLINK = cor >

• ALINK:

• cor do link ativo, quando o usuário clica com o mouse. O valor padrão é vermelho.

• Ex: < BODY ALINK = cor >

• BACKGROUND:

• indica a cor ou o endereço da imagem que será aplicada no fundo da página.

•Ex: < BODY BACKGROUND = cor ou url >



22/04/23 24Abril - 2011


• BOTTOMMARGIN:

• distância entre a boda da janela e o corpo do documento. São especificados em pixels.

• Ex: < BODY BOTTOMMARGIN = pixels >

• TOPMARGIN:

• margem do topo do documento sobrepondo o valor da margem padrão. Valores em pixels.

• Ex: < BODY TOPMARGIN = pixels >

• LEFTMARGIN:

• Especifica a margem esquerda do documento em pixels.

•Ex: < BODY LEFTMARGIN = pixels >



22/04/23 25Abril - 2011


• RIGHTMARGIN:

• especifica a margem direita do documento em pixels.

• Ex: < BODY RIGHTMARGIN = pixels >



22/04/23 26Abril - 2011

1.6.3 Tag Cabeçalho <H>:

• Utilizada para formatar um bloco de texto como cabeçalho;

• Utiliza-se para formatar um título ou tópico de uma seção;

• Disponibiliza 6 (seis) níveis de cabeçalho;



22/04/23 27Abril - 2011

1.6.3 Tag Cabeçalho <H>:



22/04/23 28Abril - 2011

1.6.3.1 Atributos da Tag <H>:

• ALIGN:

• define uma posição 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.



22/04/23 29Abril - 2011

1.6.4 Tag Centralizar <CENTER>:

• Centraliza bloco de textos, tabelas, etc, dentro da página exibida



22/04/23 30Abril - 2011

1.6.4 Tag Centralizar <CENTER>:



22/04/23 31Abril - 2011

1.6.5 Tag Parágrafo <P>:

• Delimita os parágrafos, insere uma linha em branco entre eles;

• A Tag de fechamento </P> é opcional



22/04/23 32Abril - 2011

1.6.5.1 Atributos da Tag <P>:

• ALIGN:

• Define uma posição 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.



22/04/23 33Abril - 2011

1.6.6 Tag Quebra de Linhas <BR>:

• Força a quebra de linha, sem deixar linha em branco.

• Não precisa de uma tag de fechamento.



22/04/23 34Abril - 2011

1.6.7 Tag Linha Horizontal <HR>:

• Cria uma linha horizontal no documento;

• Função decorativa, utilizada para separar seções de informação;

• Pode ser configurada sua largura e se é sombreada ou não.1.6.7.1 Atributos da Tag <HR>:

• ALIGN: Define o alinhamento para a linha se for menor que a página;

• 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 sólida, sem sombreamento.



22/04/23 35Abril - 2011

1.6.8 Listas:

1.6.8.1 Lista Não-Ordenada:

• São criadas através das tags: <UL> </UL>

• Os itens são marcados com símbolos gráficos;


22/04/23 36Abril - 2011


• Podemos definir vários níveis em uma lista:


22/04/23 37Abril - 2011




22/04/23 38Abril - 2011

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



22/04/23 39Abril - 2011

1.6.8 Listas:

1.6.8.1.1 Atributo da Tag <UL>:

• Cada item da lista pode ter um marcador diferente:



22/04/23 40Abril - 2011

1.6.8 Listas:

1.6.8.2 Listas Ordenadas:

• Os itens são marcados com letras e números;

• Utilizamos as Tags <OL> </OL>:



22/04/23 41Abril - 2011

1.6.8 Listas:


• Não apresenta uma numeração de nível:



22/04/23 42Abril - 2011

1.6.8 Listas:




22/04/23 43Abril - 2011


1.6.8.2.1 Atributos da Tag <OL>:

•TYPE: Define o tipo de numeração:

• TYPE = 1: Os itens são numerados;

• TYPE = a: Os itens são rotulados com letras minúsculas;

• TYPE = A: Os itens são rotulados com letras maiúsculas;

• TYPE = i: Os itens são rotulados no alfabeto romano minúsculo;

• TYPE = I: Os itens são rotulados no alfabeto romano maiúsculo.

• START: Define o início da numeração da lista



22/04/23 44Abril - 2011





22/04/23 45Abril - 2011





22/04/23 46Abril - 2011

1.6.8.3 Listas de Definição:

• Utilizamos as tags <DL> </DL>;

• A tag final é obrigatória;

• O texto é formatado como uma lista de termos na esquerda, suas definições endentadas logo abaixo.

• As Tags <DT> e <DD> definem os termos e suas definições respectivamente, suas tags de finalização são opcionais:



22/04/23 47Abril - 2011




22/04/23 48Abril - 2011


Aula01

Documents

Transcript of Aula01