PRODEST



SUMÁRIO

1. Conceitos e fundamentos Básicos INTERNET e INTRANET 1

1.1. O que é INTERNET e INTRANET 1

1.2. Serviços da INTERNET 2

1.3. Arquitetura da WEB 2

1.3.1. Browsers, Servidores e Outros Elementos da WEB 3

2. Como construir Home Page, Página WEB ou Página HTML 5

2.1. Estrutura de uma página 7

2.2. Comandos Básicos do HTML 9

2.2.1. Quebra de linha, Espaço em Branco, Linhas Horizontais, Parágrafos e divisões 9

2.2.3. Formatação de Texto 11

2.2.4. Listas Diversas 13

2.3. Links e Bookmarks (Âncoras) 16

2.4. Tabelas 18

2.5. Frames 20

2.6. Inserindo Imagens 24

2.7. Mapeando Imagens 26

2.8. Inserindo Som nas Páginas 29

2.9. Formulários 30

3. Caracteres Especiais 34

4. Glossário 35

5. Bibliografia 43

1. Conceitos e fundamentos Básicos INTERNET e INTRANET

1.1. O que é INTERNET e INTRANET

Nos anos 70, o Departamento de Defesa (Dod) do Estados Unidos encomendou a pesquisadores da Universidade da Califórnia em Berkeley e a uma empresa chamada BBN o desenvolvimento de uma rede mundial de computadores para o Dod. Os objetivos originais do projeto de pesquisa eram desenvolver uma rede de computadores que:

1. Funcionasse em vários hardwares de computador.

2. Operasse sobre diferentes meios de comunicação para ligar tanto computadores individuais quanto redes de computadores.

3. Fosse robusta o bastante para reconfigurar-se automaticamente no caso de falhas de rede.

Mais do que a especulação sobre a Guerra Fria, o último ponto se relaciona à possibilidade de grandes partes da rede do Departamento de Defesa Americano desaparecerem em uma guerra nuclear e à necessidade de uma rede resistente. De fato, a Internet de hoje em dia faz exatamente isso: se uma grande parte da rede desaparecesse devido a alguma falha massiva de hardware, o restante da rede simplesmente encontraria uma maneira de contornar a interrupção de serviço e continuaria trabalhando.

Mesmo com o Departamento de Defesa Americano tendo financiado a maior parte do desenvolvimento do que veio ser conhecido como rede TCP/IP, os desenvolvedores da universidade de Berkeley conduziram o processo de forma que obtivessem a permissão de redistribuir o software de rede e as especificações de seus protocolos escritos de acordo com o contrato com o Departamento de Defesa Americano. Quase ao mesmo tempo, Berkeley estava desenvolvendo sua própria versão revisada do software no sistema operacional UNIX, que ele tinha licenciado da AT&T (em que o UNIX foi inventado) como um projeto de pesquisa. Em resumo, a rede TCP/IP foi introduzida no BSD (Berkeley Software Distribution) UNIX, que a seguir se tornou disponível para outras instituições acadêmicas, também para fins de pesquisa.

A larga distribuição do BSD UNIX para outros colegas, universidades e instituições de pesquisa foi o início da Internet.

As universidades começaram a construir redes locais, ligando-as umas às outras e conectando suas redes locais a redes remotas em outros locais ou outras instituições, estendendo a base para a atual explosão da Internet. O Departamento de Defesa Americano construiu sua própria Internet privativa, usando TCP/IP (Transmissiom Control Protocol/Internet Protocol), e muitas outras agências governamentais americanas igualmente montaram redes, algumas das quais finalmente se tornaram partes da Internet.

Internet é um conjunto de redes de computadores interligadas no mundo inteiro e tem em comum serviços e protocolos. Se o termo protocolo não lhe for familiar, você pode imaginá-lo como uma linguagem que um computador usa para falar com qualquer outro computador, mesmo se eles forem de fabricantes e modelos completamente diferentes.

Intranet é um novo termo que apareceu na linguagem dos webmasters. São redes privadas de empresas que utilizam a infra-estrutura e a tecnologia da Internet para comunicarem entre si ou com qualquer outra empresa conectada a internet.

O propósito final da Intranet é encorajar e facilitar a comunicação entre funcionários de forma que eles possam empreender mais rapidamente seu trabalho essencial. O uso apropriado da Intranet pode simplificar muitos processos do trabalho e melhorar os bens e serviços produzidos.

1.2. Serviços da Internet

Dentre os principais recursos da Internet estão:

4. Correio Eletrônico (E-mail) na Internet para enviar mensagens e anexos (inclusive imagens e programas) entre usuários de computadores remotos.

5. Transferência de arquivos entre computadores remotos usando o protocolo de rede de transferência de arquivos (FTP - file transfer protocol).

6. Serviços de login remoto (telnet) para que os usuários se conectem a computadores remotos e os usem como se fossem locais.

7. Índices remotamente pesquisáveis de informações, usados para pesquisar dados indexados usando palavras-chaves. (WAIS - Wide Area Information Servers)

8. USENET News, acesso a maior das BBSs (bulletin board systems) no mundo.

9. Gopher Meio de navegação através de menus.

Além desses serviços principais, muitos outros se desenvolveram durante o tempo de vida da Internet, alguns dos quais usando combinações dos serviços acima.

Exercício prático:

Visitar páginas WWW e servidores FTP

1.3. Arquitetura WEB

Em 1993, Tim-Berners-Lee e outros pesquisadores no European Particle Physics Lab (CERN) em Genebra, Suíça, desenvolveram uma forma de compartilhar dados entre seus colegas usando algo a que chamaram de hipertexto. Os usuários CERN poderiam ver documentos em suas telas de computador usando novo software browser. Códigos especiais embutidos nesses documentos eletrônicos permitiam que os usuários saltassem de um documento para outro na tela apenas selecionando os recursos de hiperlink Internet construídos dentro desses browsers. Da mesma maneira que um usuário podia pular de um documento para outro em um computador, podia pular de um documento em um computador para um documento em outro computador remoto. Além do mais, cada um daqueles serviços principais listados anteriormente foi acrescentado ao software do browser.

O trabalho do CERN é a base da World Wide Web de hoje em dia e seu software browser e servidor Web foram os primeiros de sua espécie. O CERN retornou à sua missão principal de fazer pesquisas sobre física de partículas, mas o seu trabalho relacionado a Web foi levado adiante pelo World Wide Web Consortium, um grupo de organizações comerciais e acadêmicas dedicado ao avanço da Web.

Maiores informações visitem o site .

1.3.1 Browsers, servidores e outros elementos da Web.

O acesso a World Wide Web (WWW) é possível através dos "browsers", ou navegadores, programas que têm por finalidade:

10. Transferir informações (textos, imagens, som, vídeo) entre o servidor e o cliente;

11. Codificar as diretivas e apresentar no monitor;

12. Iniciar a execução de arquivos de som e vídeo, caso existam, e se a instalação dispor dos programas necessários.

Possuem muitos recursos e funções que devem estar devidamente configuradas para permitir uma perfeita navegação. Os mais utilizados são: Internet Explore da Microsoft e Navigator da Netscape.

Gráficos ou não, todos os browsers Web funcionam essencialmente da mesma maneira. Veja o que acontece quando você dá um clique em um hiperlink:

13. Seu browser lê um documento escrito em HTML e o exibe para você, interpretando todos os códigos marcados no documento.

14. Quando você dá um clique em um hiperlink nesse documento, seu browser usa o Hyper Text Transfer Protocol (HTTP) para enviar uma requisição de rede para que um servidor Web acesse o novo documento ou serviço especificado pelo hiperlink.

15. Também usando o protocolo HTTP, o servidor Web responde à requisição com o documento ou outros dados solicitados.

16. Seu software de browser a seguir lê e interpreta essas informações e apresenta-as no formato correto.

Como você pode ver, um simples clique em um hiperlink inicia uma série muito significativa de eventos envolvendo não somente seu browser Web, mas também um servidor Web em algum lugar na Internet.

Browsers Web como o Explorer ou o Navigator comunicam-se através de uma rede com servidores Web, usando HTTP. Os browsers enviam mensagens de rede aos servidores pedindo que esses serviços ou documentos específicos sejam fornecidos pelo servidor. O servidor retorna o documento ou serviço, se estiver disponível, usando também o protocolo HTTP, e o browser o recebe e o interpreta.

Existem muitos protocolos de rede na Internet, cada um deles para uma finalidade específica e limitada. Cada um desses protocolos funciona bem para sua própria finalidade, e você pode usar em seu computador programas individuais que comuniquem com os protocolos para localizar e recuperar informações na Net. O protocolo HTTP for planejado para incorporar esses e outros protocolos de rede dentro de um único protocolo

Com o explosivo crescimento numérico das instalações de servidores WWW e Intranet, a maior parte dos pacotes profissionais de softwares de servidor está acrescentando recursos em um ritmo igualmente rápido. O que vem a seguir é um a lista de alguns deles:

17. Criptografia de informações sensíveis (números de cartões de crédito e outras informações pessoais ou comerciais, por exemplo).

18. Autenticação de usuário acessando o servidor para assegurar confidencialidade.

19. Registro preciso de que acessa o servidor.

20. Registro de recuperações de dados, assim o software e outros dados podem realmente ser vendidos interativamente pela Net.

O protocolo HTTP dos servidores Web e browsers incluem outros serviços TCP/IP:

21. Correio Eletrônico (E-mail) na Internet para enviar mensagens e anexos (inclusive imagens e programas) entre usuários de computadores remotos. (POP3, SMTP, MIME)

22. Transferência de arquivos entre computadores remotos usando o protocolo de rede de transferência de arquivos (FTP - file transfer protocol).

23. Índices remotamente pesquisáveis de informações, usados para pesquisar dados indexados usando palavras-chaves. (WAIS - Wide Area Information Servers)

24. USENET News, acesso a maior das BBSs (bulletin board systems) no mundo.

25. Gopher que é um sistema hierárquico de recuperação de informações baseado em menu.

26. Archie Ferramenta de procura de arquivos.

Como esses serviços são construídos dentro do protocolo HTTP, você pode integrá-los sem exigir que seus usuários aprendam as interfaces nativas do serviço. Os browsers Web fornecem uma interface com o usuário comum do tipo apontar e dar um clique para todos esses serviços.

Você pode aprender muito mais sobre o histórico da Web e do HTML consultando estes sites:

(As perguntas feitas com mais freqüência sobre a Web)

2. Como construir Home Page, Página Web ou Página HTML

Uma página Web é um arquivo ou documento gravado como um arquivo de texto com a extensão .htm ou .html, cujo conteúdo é composto basicamente de textos e códigos especiais chamados tags, que possibilitam a exibição desse arquivo na World Wide Web. Além de texto, esse documento pode conter imagens, som, animações e até mesmo clipes de vídeo. A página pode conter links para outras páginas armazenadas no seu micro ou em qualquer lugar da Web.

A linguagem HTML (HyperTex Markup Language - Linguagem de Formatação de Hipertexto) é o resultado do "casamento" dos padrões HyTime e SGML;

HyTime - Hypermedia/Time-based Document Structuring Language

HyTime (ISO 10744:1992) - padrão para representação estruturada de hipermídia e informação baseada em tempo. Um documento é visto como conjunto de eventos concorrentes dependentes de tempo (áudio, vídeo, etc.), conectados por webs ou hiperlinks. O padrão HyTime é independente de padrões de processamento de texto em gera. Ele fornece a base para construção de sistemas hipertexto padronizados, consistindo de documentos que aplicam os padrões de maneira particular.

SGML - Standard Generalized Markup Language

Padrão ISO 8879 de formatação de textos: não foi desenvolvido para hipertexto, mas torna-se conveniente para transformar documentos em hiper-objetos e para descrever as ligações. SGML não é um padrão aplicado de maneira padronizada: todos os produtos SGML têm seu próprio sistema para traduzir as etiquetas para um particular formatador de texto.

27. DTD - Document Type Definition - define as regras de formatação para uma dada classe de documentos. Um DTD ou uma referência para um DTD deve ser contido em qualquer documento conforme o padrão SGML. Se você quiser ver maiores detalhes sobre as DTDs para as tags de marcação da HTML 4.0 consulte o site:



A SGML é significativamente mais complexa e mais difícil de aprender que a HTML. Para obter mais informações sobre a SGML, consulte o site Web:



No momento, a HTML 4, é a linguagem de programação padrão da Web, contendo 86 tags de marcação. Essa linguagem é bastante simples e tem como finalidade básica formatar o texto exibido e criar ligações entre as páginas da Web, criando assim documentos com o conceito de hipertexto.

Assim como qualquer outra linguagem, o programador deve escrever o código-fonte seguindo as regras de sintaxe da linguagem. Esse código-fonte é posteriormente interpretado pelo browser, que se encarregará de executar os comandos (tags, marcadores,diretivas ou etiquetas) do código para formatar e acessar recursos da Web. As tags normalmente são especificadas em pares, delimitando um texto que sofrerá algum tipo de formatação. São identificadas pelos sinais < > ou . Entre os sinais < > ou são especificados os comandos propriamente ditos. No caso de tags que necessitam envolver um texto, sua finalização deve ser feita usando-se a barra de divisão /, indicando que a tag está finalizando a marcação de um texto. O formato genérico de uma tag é: Texto.

O código-fonte pode ser escrito usando-se o mais simples dos editores de texto. Até o programa Bloco de Notas (Notepad) do Windows pode ser usado para essa tarefa. Contudo, a forma mais prática e produtiva de escrever uma página Web é usar um editor HTML. Esses editores reduzem o tempo de geração da página, pois possuem atalhos que escrevem parte dos documentos para você.

A rigor, é necessário somente um editor de textos para gerar o código-fonte da página. Contudo, para testar a página, você deve possuir um browser. Atenção, uma página pode ser apresentada de forma diferente por diferentes Browsers. Durante o curso usaremos um dos browsers mais populares, o Internet Explorer. O browser funciona independentemente de estar conectado através de um modem com a Internet ou por meio de uma rede local. A melhor forma de desenvolver uma página é trabalhar off-line, ou seja desconectado. Você deve criar e armazenar as páginas em seu disco rígido para testá-las. Depois de prontas, deve colocá-las em um servidor para que fiquem disponíveis para outras pessoas acessarem seu conteúdo.

Na Prodest, temos um ambiente para desenvolvimento e teste das páginas, que são colocadas na produção através da GTSUP.

Você pode aprender muito mais sobre o histórico da Web e do HTML consultando estes sites:

(Um pequeno histórico da World Wide Web)

2.1. Estrutura de uma página

Uma regra importante da HTML é que ela deve ser escrita no conjunto de caracteres ISO-8859-1 Quando você utiliza caracteres especiais diferentes dos incluídos nesse conjunto, os navegadores podem não exibir corretamente os caracteres pretendidos. Foi através do conjunto de caracteres ISO-8859-1, que a HTML pode exibir caracteres ASCII mais complicados, como acentos e tremas, que normalmente demandam processamento de 8 bits. Você pode acessar à especificação completa do conjunto de caracteres visitando o site:



A HTML possui quatro caracteres que são reservados somente para uso da linguagem, são eles:

28. < - menor que

29. > - maior que

30. & - E comercial

31. " - aspas duplas

É por meio desses caracteres que a marcação HTML se distingue do texto ao seu redor. Quando o navegador Web se depara com um desses caracteres, passa a esperar instruções de tags HTML em vez de texto normal. Como eles são reservados para uso somente pela HTML, e não podem ser usados em suas capacidades normais, se você quiser incluir esses caracteres em seu texto normal, precisará usar cinco entidades de caracteres para substituí-los:

|Caracteres reservados |

|Caractere |Entidade do Caractere |Entidade Numérica |

|< - menor que |< |< |

|> - maior que |> |> |

|& - E comercial |& |& |

|" - aspas duplas |" |" |

As tags HTML não sensíveis à caixa, tanto faz escrever: ,, ,...

Os browsers oferecem até 256 cores para serem usadas como cor de fundo, cor de texto, cor da borda tabela, etc. Cada cor é composta de um código RGB(red/green/blue). O código RGB é composto de três números, nos quais os primeiros dígitos representam a intensidade do vermelho (R), o segundo é para a intensidade do verde (G), e o último para a intensidade do azul (B). Cada cor pode ter um valor que varia de 0 a 255. Se forem atribuídos valores mínimos R=000, G=000 e B=000 é obtida a cor preta. Se forem atribuídos valores máximos R=255, G=255 e B=255 é obtida a cor branca.

Em vez de usar um código do tipo 134,000,333 para representar uma cor, os trios de números são convertidos da base decimal para a base hexadecimal, devido ao fato de, internamente os computadores trabalharem melhor com esse formato.

A cor pode ser também referenciada pelo seu nome, mas o mais seguro é usar o padrão RGB para informar a cor, pois o nome de uma cor em browser pode ser uma e em outra browser pode ser outra. Veja o código de algumas cores:

Black #000000

Blue #0000FF

White #FFFFFF

Yellow #FFFF00

Green #00FF00

Dark Green #2F4F2F

Assim como outras linguagens, a HTML possui uma estrutura básica para seus programas. Para que um browser interprete corretamente o programa, ele deve possuir alguns comando básicos que sempre deverão estar presentes. Alguns browsers até dispensam o seu uso, porém é melhor assumir como parte fundamental do programa tais comandos.

Um programa HTML possui três partes básicas, a estrutura principal, o cabeçalho e o corpo do programa:

Título do Documento

O corpo do documento entra aqui:

texto, imagem, links, tabelas, som, ...

Todo programa HTML deve iniciar com o comando e ser encerrado com o comando . Esse par de comandos é essencial. A área de cabeçalho é opcional e é delimitada pelo par de comandos . O par de comandos é usado para especificar alguns poucos comandos da linguagem. Eles são opcionais, ou seja, um programa HTML pode funcionar sem eles. A maioria dos comandos HTML será colocada na área do corpo do programa que é delimitada pelos comandos e .

A seção

contém informações sobre o documento; o elemento , por exemplo, define um título, que é mostrado no alto da janela do browser. Nesta página, por exemplo, está definido assim:

Curso Desenvolvimento Aplicações Web

Todo documento WWW deve ter um título; esse título é referenciado em buscas pela rede, dando uma identidade ao documento.

É sugerido que os títulos dos documentos sejam sugestivos, evitando-se, portanto, títulos como "Introdução". De preferência, os títulos não devem conter acentos ou outros caracteres especiais (eles não serão mostrados corretamente pelos sistemas de janela em algumas plataformas).

Além do título, HEAD contém outras informações que podem ser recuperadas por robôs de pesquisa na Internet; esses campos de informação facilitam a classificação do documento em catálogos de busca, entre outras aplicações.

A seção

Tudo que estiver contido em será mostrado na janela principal do browser, sendo apresentado ao leitor. pode conter cabeçalhos, parágrafos, listas, tabelas, links para outros documentos, e imagens.

tem alguns atributos de apresentação que são aplicados ao documento

2.2. Comandos básicos do HTML

2.2.1. Quebra de linha, espaço, linhas horizontais, parágrafos e divisões

Ao contrário dos editores de texto tradicionais, nos quais você insere uma quebra ou avanço de linha toda vez que pressiona a tecla Enter, em um programa HTML é necessário colocar um comando específico para que o browser entenda que você deseja mudar de linha, inserir espaço ou começar um novo parágrafo.

Quebra de linha

Quando queremos mudar de linha, usamos o elemento . Isso só é necessário quando queremos uma quebra de linha em determinado ponto, pois, os browsers já quebram as linhas automaticamente para apresentar os textos. Com sucessivos , podemos inserir diversas linhas em branco nos documentos.

Exercício prático - Nome do arquivo EP001.HTML:

Curso de Desenvolvimento de Aplicações WEB - Exercício 1

OLHA A POSTURA! A SUA SAÚDE DEPENDE DELA

Linhas horizontais

O comando tem como finalidade inserir uma linha divisória na posição em que foi especificado, se ele for o único comando da linha, ou na linha seguinte, caso esteja no meio de um texto.

ALIGN=(LEFT|CENTER|RIGHT)

Define o alinhamento da linha horizontal. O tipo de alinhamento pode ser LEFT (esquerda), CENTER (centralizado), RIGHT (direito). O alinhamento default é LEFT.

NOSHADE

Desenha a régua sem sombreamento 3-D.

SIZE=número

Define a altura da régua em pixels.

WIDTH=(número|%)

Define a largura da régua em pixels ou como percentual da largura da janela. Para especificar um percentual, o número deve terminar com um sinal de porcentagem (%).

Exercício prático - Nome do arquivo EP002.HTML:

Curso de Desenvolvimento de Aplicações WEB - Exercício 2

OLHA A POSTURA! A SUA SAÚDE DEPENDE DELA

Insere uma linha de largura 7 pixels

Insere uma linha que ocupa 50% do espaço disponível

Insere uma linha de comprimento 30% (do espaço disponível), alinhando à direita, sem efeito tridimensional

Insere uma linha de largura 30 pixels, comprimento de 2 pixels, alinha à esquerda

Parágrafos

Para forçar o início de um novo parágrafo, ou seja, avançar um alinha em branco e iniciar o texto na linha seguinte após o parágrafo anterior.

ALIGN=(LEFT|CENTER|RIGHT|JUSTIFY)

Define o alinhamento do parágrafo. O tipo de alinhamento pode ser LEFT (esquerda), CENTER (centralizado), RIGHT (direito) e JUSTIFY (esquerdo e direito). O alinhamento default é LEFT.

Exercício prático - Nome do arquivo EP003.HTML:

Curso de Desenvolvimento de Aplicações WEB - Exercício 3

OLHA A POSTURA! A SUA SAÚDE DEPENDE DELA

Andar, sentar e deitar errado causa enxaqueca, úlcera e pedra nos rins. Sem falar naquela danada dor nas costas. Para ter saúde você precisa aprender a sentar, ficar em pé e deitar do jeito certo.

Divisões

Indica divisões em documento. Envolve uma área de texto ou divisão que pode receber parâmetros específicos de alinhamento. Dentro de uma divisão, comandos de formatação de elementos têm prioridade sobre a formatação da divisão.

ALIGN=(LEFT|CENTER|RIGHT|JUSTIFY)

Define o alinhamento da divisão. O tipo de alinhamento pode ser LEFT (esquerda), CENTER (centralizado), RIGHT (direito) e JUSTIFY (esquerdo e direito). O alinhamento default é LEFT.

Exercício prático - Nome do arquivo EP004.HTML:

Curso de Desenvolvimento de Aplicações WEB - Exercício 4

OLHA A POSTURA! A SUA SAÚDE DEPENDE DELA

FRAQUEZA IMUNOLÓGICA

Por causa dos órgãos esmagados, faltam nutrientes e oxigênio para o corpo, o que o deixa enfraquecido. A Vítima fica mais propensa a pegar infecções.

2.2.3. Formatação do texto

Assim como no editor de texto, você pode criar uma série de efeitos no texto, alterando a forma ou o tipo da fonte. Todas as tags que alteram o estilo do texto precisam ser especificados em pares, marcando o início e o fim do texto que sofrerá a formatação.

... ou .. - Aplica o estilo negrito.

... - Aplica o estilo itálico.

... - Aplica o estilo sublinhado (nem todos os browser o reconhecem).

... - Faz com que o texto fique sobrescrito.

... - Faz com que o texto fique subscrito.

... - Utiliza a pré-formatação, ou seja, deixa o texto da maneira em que foi digitado.

.. - Coloca o texto centralizado.

.. - Faz com o texto pisque.

.. - Deixa o texto com o mesmo espaçamento.

.. - Aumenta a fonte e coloca o texto em negrito

.. - Reduz e altera a fonte

Exercício prático - Nome do arquivo EP005.HTML:

Curso de Desenvolvimento de Aplicações WEB - Exercício 5

Negrito

Negrito

Itálico

Sublinhado

Sobrescrito

Subscrito

Centralizando

Piscando

Mesmo Espaçamento

Aumenta

Reduz

Aqui você digita como quiser

inclusive o ENTER irá funcionar.

Cabeçalhos

Outra forma muito usada para mudar o tamanho da letra e aplicar um efeito no texto é fazer o uso das tags , onde n é um número que vai de 1 a 6. A tag insere uma linha em branco antes e depois da linha que contém o comando. Quanto maior o número, menor será o tamanho da fonte.

Exercício prático - Nome do arquivo EP006.HTML:

Curso de Desenvolvimento de Aplicações WEB - Exercício 6

Cabeçalho tamanho H1

Cabeçalho tamanho H2

Cabeçalho tamanho H3

Cabeçalho tamanho H4

Cabeçalho tamanho H5

Cabeçalho tamanho H6

Alterando cor, tamanho e tipo de fonte em texto

Um dos recursos de tratamento do texto mais interessantes da linguagem HTML é a possibilidade de alterar o tamanho, a cor e o tipo de fonte utilizado pelo texto. A tag responsável por isso é a tag , que deve ser usada sempre em pares.

Sintaxe:

SIZE

O parâmetro SIZE especifica o tamanho da fonte utilizada. Os valores vão de 1, o menor, até 7, o maior.

FACE

Esse parâmetro permite que seja escolhida uma fonte diferente para o texto. Podem ser especificadas várias fontes, de maneira que, se o sistema não possuir a primeira opção, o browser vai para a próxima opção.

COLOR

Esse parâmetro especifica a cor do texto. Pode ser no formato hexadecimal, RGB ou através de um nome predefinido de cores.

Exercício prático - Nome do arquivo EP007.HTML:

Curso de Desenvolvimento de Aplicações WEB - Exercício 7

Super Interessante

Super Interessante

Super Interessante

2.2.4. Listas diversas

Outra forma de estrutura um documento HTML é utilizando as listas. As listas podem funcionar como um sumário, um menu ou um resumo do conteúdo do documento. Existem dois tipos de listas. As não ordenadas, que contêm uma série de itens sem numeração, e as listas ordenadas, que atribuem um número para cada elemento da lista.

Lista não ordenada

Para criar uma lista não ordenada, você deve usar um conjunto de comandos cuja sintaxe básica é a seguinte:

Computador

Hardware

Software

O representa cada item da lista e deve estar entre o .

TYPE=(DISC|SQUARE|CIRCLE)

Controla a aparência do bullet da lista. Os tipos são:

DISC utiliza um formato circular preenchido para um marcador.

SQUARE utiliza um formato quadrado preenchido para um marcador.

CIRCLE utiliza um formato de contorno circular para um marcador.

Exercício prático - Nome do arquivo EP0008.HTML:

Curso de Desenvolvimento de Aplicações WEB - Exercício 8

Computador

Hardware

Software

Lista ordenada

Para criar uma lista ordenada, numera os elementos na ordem da ocorrência. Você deve usar um conjunto de comandos cuja sintaxe básica é a seguinte:

Computador

Hardware

Software

O representa cada item da lista e deve estar entre o .

TYPE=(1|a|A|i|I)

Controla o esquema de numeração da lista. Os tipos são:

1. enumera utilizando numerais arábicos

a enumera utilizando caracteres minúsculos do alfabeto

A enumera utilizando caracteres maiúsculos do alfabeto

i enumera utilizando numerais romanos minúsculos do alfabeto

I enumera utilizando numerais romanos maiúsculos do alfabeto

START=”valor”

Indica onde a numeração da lista ou as letras devem ter início.

Exercício prático - Nome do arquivo EP009.HTML:

Curso de Desenvolvimento de Aplicações WEB - Exercício 9

Computador

Hardware

Software

2.3. Links e bookmarks (Âncoras)

A Internet usa uma nomeclatura específica para indicar o endereço de um documento. Chamada URL ou Uniform Resource Locator (localizador universal de recursos). Esta nomeclatura deverá conter três componentes:

O protocolo do documento (HTTP, Gopher, WAIS, FPT, telnet)

Endereço do servidor

Documento que será acessado

Exemplo:



HTTP Protocolo utilizado.

prodest..br Nome do servidor.

default.asp Nome do documento que será acessado.

Os Links servem para criar vínculos, que permitem a interligação entre documentos HTML, um ponto específico em uma mesma página, FTP).

Sintaxe:

Texto do link ou

Texto da âncora

HREF

URL (Uniform Resouce Locator) especifica a localização de qualquer tipo de recurso da Internet, incluindo arquivos HTML e não-HTML, Telnet, Correio Eletrônico e recursos Gopher.

NAME

Marca um destino de um vínculo dentro de um documento. Funciona como uma âncora, ocupando uma posição à qual um link pode anexar-se.

TARGET

Especifica o carregamento do vínculo na janela de destino. A janela de destino pode ser um dos seguintes valores:

_blank Carrega o vínculo em uma nova janela em branco.

_parent Carrega o vínculo no documento principal em que se encontra o vínculo.

_self Carrega o vínculo na mesma janela do vínculo.

_top Carrega o vínculo no corpo completo da janela.

Nome de um FRAME

Exercício prático - Nome do arquivo EP010.HTML:

Curso de Desenvolvimento de Aplicações WEB - Exercício 10

Fim da página

Texto aqui é opcional

2.4. Tabelas

As tabelas melhoram muito a aparência de uma página, sendo um recurso para alinhamento de texto e imagens, de forma padronizada. Uma tabela consiste em linhas e colunas. Sendo que a interseção de uma linha com uma coluna é chamada de célula.

Sintaxe da tabela:

sintaxe da linha

BORDER Largura da borda da tabela em pixels, se não for especificado não será exibida a borda da tabela.

CELLSPACING Espaçamento em pixels entre as células.

CELLPADING Espaçamento em pixels entre o conteúdo e a borda da tabela.

WIDTH Largura da tabela em pixels ou em porcentagem relativa à largura da janela.

ALIGN Define o alinhamento da tabela na página (LEFT, CENTER, RIGHT).

BGCOLOR Define a cor de fundo de toda a tabela.

BORDERCOLOR Define a cor da borda das células da tabela.

Sintaxe da linha:

sintaxe da célula

ALIGN Define o alinhamento horizontal da célula(s) da linha (LEFT, CENTER, RIGHT).

VALIGN Define o alinhamento vertical dentro da célula(s) da linha (TOP, MIDDLE, BOTTOM, BASELINE).

BGCOLOR Define a cor de fundo de toda a linha.

BORDERCOLOR Define a cor da borda das células da linha.

Sintaxe da célula:

ALIGN Define o alinhamento horizontal da célula(s) da linha (LEFT, CENTER, RIGHT).

VALIGN Define o alinhamento vertical dentro da célula(s) da linha (TOP, MIDDLE, BOTTOM, BASELINE).

BGCOLOR Define a cor de fundo da célula.

BORDERCOLOR Define a cor da borda da célula.

NOWRAP Define que a linha dentro da célula não deve ser quebrada.

COLSPAN Define o número de colunas que esta célula irá ocupar.

ROWSPAN Define o número de linhas que esta célula irá ocupar.

WIDTH Largura da célula em pixels ou em porcentagem relativa à largura da tabela.

Exercício prático - Nome do arquivo EP011.HTML:

Curso de Desenvolvimento de Aplicações WEB - Exercício 11

ATIVIDADES FÍSICAS

QTDE FITAS

Voleibol

2

Natação

2

Handebol

3

TAI-CHI-CHUAN

1

2.5. Frames

Os frames são divisões da janela do seu browser que permite a utilização de vários documentos no formato HTML. Ao contrário dos outros recursos da linguagem HTML, você terá que fazer um planejamento prévio para usar este recurso. Esse planejamento consiste na criação da estrutura dos frames, na qual você irá especificar a quantidade de frames, a disposição que eles terão na tela, a largura e a altura de cada frame, assim como o conteúdo que será exibido em cada um deles. Assim como o corpo da HTML, os frames tem sua estrutura. Eles irão substituir o .

Sintaxe do frameset:

sintaxe do frame

COLS Usado para criar uma moldura com frames dispostos em coluna. Será especificado uma valor para todas as colunas, sendo que você pode especificar em pixels, percentagem ou tamanho relativo.

ROWS Usado para criar uma moldura com frames dispostos em linhas.

Será especificado uma valor para todas as colunas, sendo que você pode especificar em pixels, percentagem ou tamanho relativo.

FRAMEBORDER Define se as bordas do frames irão (1) ou não (0) aparecer na tela.

FRAMESPACING Define a largura do espaço entre os frames.

Sintaxe do frame:

ALIGN Define o alinhamento vertical dentro do frame (TOP, MIDDLE, BOTTOM, LEFT, RIGHT).

FRAMEBORDER Define se as bordas do frames irão (1) ou não (0) aparecer na tela.

MARGINHEIGHT Define a altura da margem superior e inferior do frame em pixels.

MARGINWIDTH Define a largura das margens esquerda e direita do frame em pixels.

NAME Define um nome para o frame, que poderá ser usado para carregar documentos.

NORESIZE Define que o usuário não poderá redimensionar o frame.

SCROLLING Define se o frame irá ter (yes) ou não (no) a barra de rolagem quando a janela for redimensionada.

SRC Define a URL do documento que será exibido no frame.

Obs.: Alguns versões de browser não têm a capacidade de reconhecer frames, então é importante você adicionar a tag Texto antes de fechar o seu frameset, para avisar sobre a utilização de frames.

Exercício prático - Nome do arquivo EP012.HTML:

Curso de Desenvolvimento de Aplicações WEB - Exercício 12

Esta página utiliza frames, e o seu Browser não consegue visualizá-la

Exercício prático - Nome do arquivo EP013.HTML:

Curso de Desenvolvimento de Aplicações WEB - Exercício 13

Esta página utiliza frames, e o seu Browser não consegue visualizá-la

Exercício prático - Nome do arquivo EP014.HTML:

Curso de Desenvolvimento de Aplicações WEB - Exercício 14

Esta página utiliza frames, e o seu Browser não consegue visualizá-la

Exercício prático - Nome do arquivo EP015.HTML:

Curso de Desenvolvimento de Aplicações WEB - Exercício 15

Esta página utiliza frames, e o seu Browser não consegue visualizá-la

Interligando frames através de links

Até agora criamos frames que exibem conteúdos independentes. Mas se quisermos direcionar o carregamento de um documento HTML em um frame já criado teremos que informar no atributo NAME da tag HREF o nome do frame destino da página HTML. O exercício a seguir irá ensinar passo a passo.

Criando a estrutra dos frames

Exercício prático - Nome do arquivo EP016.HTML:

Curso de Desenvolvimento de Aplicações WEB - Exercício 16

Esta página utiliza frames, e o seu Browser não consegue visualizá-la

Criando a página MENU016.HTML

Exercício prático - Nome do arquivo MENU016.HTML:

Curso de Desenvolvimento de Aplicações WEB - Exercício 16

Índice de Exercícios

Exercício 1

Exercício 2

Exercício 3

Exercício 4

Exercício 5

Criando a página BLANK.HTML

Exercício prático - Nome do arquivo BLANK.HTML:

Curso de Desenvolvimento de Aplicações WEB - Exercício 16

Obs.: as outras páginas se referem aos exercícios anteriores.

2.6. Inserindo Imagens

Inserir uma imagem em uma página HTML é uma tarefa simples e que necessita de alguns requisitos básicos. A imagem a ser exibida deve estar disponível nos formatos GIF ou JPG. O formato GIF é o que mais se popuralizou na internet. Porém o formato JPG tomou seu lugar pelas vantagens que oferece em termos de tamanho de imagem. No formato JPG uma imagem pode ser reduzida em até 10 vezes comparada com seu tamanho original. Se uma imagem näo estiver nos formatos aceitos pelo browsers, você pode utilizar programas de conversäo e tratamento de imagem para realizar a conversäo.

Muitos imagens que você encontra na Internet säo protegidas por direitos autorais. Outras säo de domínio público. Como nem sempre é claro o estado de uma foto, procure sempre observar se o site faz alguma restriçäo sobre o uso de suas imagens.

Antes de sai criando páginas com dezenas de fotos, lembre-se que toda as imagens seräo carregadas junto com sua página. Quanto maior a foto, maior será o tempo para transferi-la do provedor para máquina de quem estiver visualizando a sua página.

Sintaxe:

ALIGN Define o alinhamento das imagens referente à linha de texto onde se encontra. (TOP, MIDDLE, BOTTOM).

ALIGN Define o alinhamento das imagens referente às bordas laterais da janela. (LEFT, RIGHT).

WIDTH Especifica a largura de exibição da imagem. Por ser informado um valor absoluto em pixels ou então uma porcentagem.

HEIGHT Especifica a altura de exibição da imagem. Por ser informado um valor absoluto em pixels ou então uma porcentagem.

BORDER Define a largura da borda da imagem em pixels.

VSPACE Define em pixels o espaço em branco que deverá ser deixado na parte de cima e na parte de baixo da imagem.

HSPACE Define em pixels o espaço em branco que deverá ser deixado nas laterais da imagem.

Exercício prático - Nome do arquivo EP017.HTML:

Curso de Desenvolvimento de Aplicações WEB - Exercício 17

Inserindo imagens

A imagem a seguir está no formato GIF

A imagem a seguir está no formato GIF é o que chamamos GIF animado

A foto a seguir está no formato JPG

2.7. Mapeando Imagens

Existem dois métodos para tornar uma imagem sensível em determinada região, os Mapas Locais de Imagens (Client-Side Image Maps) e o Mapa Remoto de Imagens (Server-Side Images Maps). A escolha entre um ou outro pode ser feita após analisarmos suas características principais.

A diferença básica entre os dois métodos é clara e extremamente importante. O Mapa Remoto é uma combinação de CGI (Commom Gateway Interface), HTML e um “arquivo de mapa” que nada mais é do que um arquivo que informa as regiöes sensíveis da imagem e que reside no servidor WEB. Funciona da seguinte maneira:

Quando você clica sobre uma região sensível de uma imagem, o browser fornece ao servidor de Web as coordenadas (x,y) de onde você clicou. O servidor procura no arquivo de mapa daquela imagem, qual a URL (Uniform Resource Locator) que corresponde a região clicada, e envia essa URL de volta para o browser, que se encarrega de solicitá-la e mostrá-la em sua tela.

Por outro lado, quando você utiliza um mapa local de imagem (Client-Side Image Maps), todas as informações que definem o mapa das regiões sensíveis da imagem estão dentro do próprio código HTML da página que está sendo mostrada na sua tela, e com isso não há necessidade de recorrer ao servidor para identificar as coordenadas de um clique. Economizamos um acesso ao servidor, e isso pode ser interessante…

Então, podemos dizer que o mapa local de imagem produz uma melhor utilização da rede, gerando um tráfego menor, diminuindo a carga de pedidos para o servidor de Web e aumentando a performance do browser, já que o tempo de resposta fica reduzido ao pedido da URL.

A criação de um mapa de imagem do tipo client-side pode ser feita totalmente à mão ou utilizando um programa que faz boa parte do trabalho para nós.

São quatro etapas necessárias para criar um mapa de imagem do tipo client-side:

1. Você precisar criar ou obter a figura que será usada como mapa.

1. Ter os endereços dos documentos que serão associados às áreas da figura nos pontos de ativação (hot spots).

1. Mapear a imagem definindo as áreas e suas coordenadas.

1. Criar o documento HTML que conterá a imagem e o mapa ou então inserir em uma página já existente.

Você pode usar qualquer tipo de imagem manipulada pelo browser para ser usada com imagem mapeada. O formato ideal é o GIF, mas o JPG também pode ser usado.

Sintaxe:

NAME

Define o nome do mapa da imagem, e deve ser iniciado pelo sinal #, como se fosse uma âncora.

SHAPE

Define o tipo de área que se está utilizando, como RECT, CIRCLE, POLYGON. Um quarto tipo DEFAULT pode ser usado para definir um URL, que é ativada quando o usuário clicar em uma área da imagem que não foi mapeada.

COORDS

Dependendo do tipo de área, devem ser informadas diferentes tipos de coordenadas.

As áreas do tipo retângulo RECT possuem dados referentes a uma imagem retangular. Além da URL, você deverá informar quatro coordenadas que são usadas para definir a área retangular correspondente ao canto superior esquerdo e inferior direito.

As áreas do tipo CIRCLE indicam a definição de uma área circular. Além da URL, você deverá informar três coordenadas. As duas primeiras correspondem ao centro do círculo e a terceira, ao tamanho do raio.

As áreas do tipo POLY indicam a definição de uma área irregular ou poligonal. Além da URL, elas exibem pares de coordenadas correspondentes a cada vértice da figura. No caso do triângulo, três pares devem ser informados.

HREF

URL (Uniform Resouce Locator) especifica a localização de qualquer tipo de recurso da Internet, incluindo arquivos HTML e não-HTML, Telnet, Correio Eletrônico e recursos Gopher.

TARGET

Especifica o carregamento do vínculo na janela de destino. A janela de destino pode ser um dos seguintes valores:

_blank Carrega o vínculo em uma nova janela em branco.

_parent Carrega o vínculo no documento principal em que se encontra o vínculo.

_self Carrega o vínculo na mesma janela do vínculo.

_top Carrega o vínculo no corpo completo da janela.

Nome de um FRAME

Exercício prático - Nome do arquivo EP018.HTML:

Curso de Desenvolvimento de Aplicações WEB - Exercício 18

Mapeando imagens

Clique em qualquer figura geométrica abaixo:

2.8. Inserindo som nas páginas

Existem 2 maneiras de colocar músicas em sua home page. A primeira é com o tag que só é reconhecido pelo Internet Explorer. Para utilizar este tag siga o exemplo :

Onde arquivo.mid é o arquivo de música. Caso você queira que a música repita-se, adicione o atributo loop="infinite".

A segunda maneira é com o tag que, por ser reconhecido pelo Internet Explorer e Netscape, é recomendado. Para utiliza-lo, siga o exemplo :

É recomendado usar arquivos midi por serem bem menores que os wavs.

2.9. Formulários

A linguagem HTML também permite que o cliente (navegador) interaja com o servidor, preenchendo campos, clicando em botões e passando informações. Essas informações, devem ser tratadas por programas, denominados scripts, que podem armazená-las para uma posterior utilização. Os scripts podem ainda retornar um outro documento HTML, uma URL, ou algum outro tipo de dado para o cliente.

O elemento FORM, da linguagem HTML, é justamente o responsável por tal interação. Ele provê uma maneira agradável e familiar para coletar dados do usuário através da criação de formulários com janelas de entrada de textos, botões, etc.

É preciso ter em mente que o FORM coleta dados, mas não os processa. São os scripts que entendem os dados, como mencionado.

Sintaxe:

...

ACTION

Especifica a URL do script ao qual serão enviados os dados do formulário.

METHOD

Seleciona um método para acessar a URL de ação. Os métodos usados atualmente são GET e POST. Ambos os métodos transferem dados do browser para o servidor, com a seguinte diferença básica?

POST

Os dados fazem parte do corpo da mensagem enviada para o servidor e transfere grande quantidade de dados.

GET

Os dados entrados fazem parte da URL associado à consulta enviada para o servidor e suporta transferir até 128 caracteres.

2.9.1. Definindo campos em um formulário

A tag especifica uma variedade de campos editáveis dentro de um formulário. Ele pode receber diversos atributos que definem o tipo de mecanismo de entrada (botões, janelas de texto, etc.), o nome da variável associada com o dado da entrada, o alinhamento e o valor inicial a ser mostrado.

Sintaxe:

TYPE=TEXT Aceita dados do tipo caractere.

TYPE=PASSWORD Aceita dados do tipo caractere.

TYPE=CHECKBOX Aceita dados do tipo sim | não.

TYPE=RADIO Mostra várias opções e aceita uma delas.

TYPE=SUBMIT Cria um botão que envia, ao ser pressionado, o contéudo do formulário.

TYPE=RESET Cria um botão que, ao ser pressionado, apaga o conteúdo de todos os campos.

TYPE=HIDDEN Define um campo invisível, cujo conteúdo é enviado junto com os demais.

TYPE=BUTTON Cria um botão.

NAME Nome do campo.

VALUE Conteúdo do campo. Para os campos TEXT ou PASSWORD podemos informar um valor inicial para o campo. Para os campos do tipo CHECKBOX ou RADIO, representa o valor que será enviado se não for especificado outro. Para os campos do tipo SUBMIT, RESET e BUTTON, indica o rótulo que aparece no botão.

CHECKED Para campos do tipo CHECKBOX, indica que o campo deve ficar marcado como padrão.

SIZE É um número que representa a quantidade de caracteres exibidos em campos do tipo TEXT e PASSWORD. Delimita o campo para digitação, e não a quantidade de caracteres que o campo pode ter.

MAXLENGTH É um número que define a quantidade de caracteres permitidos para variáveis do tipo TEXT ou PASSWORD.

Exercício prático - Nome do arquivo EP019.HTML:

Curso de Desenvolvimento de Aplicações WEB - Exercício 19

Definindo campos em um formulário

Nome:

Senha:

Informe seu estado civil:

Solteiro

Casado

Divorciado

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download