




























































































Estude fácil! Tem muito documento disponível na Docsity
Ganhe pontos ajudando outros esrudantes ou compre um plano Premium
Prepare-se para as provas
Estude fácil! Tem muito documento disponível na Docsity
Prepare-se para as provas com trabalhos de outros alunos como você, aqui na Docsity
Encontra documentos específicos para os exames da tua universidade
Prepare-se com as videoaulas e exercícios resolvidos criados a partir da grade da sua Universidade
Responda perguntas de provas passadas e avalie sua preparação.
Ganhe pontos para baixar
Ganhe pontos ajudando outros esrudantes ou compre um plano Premium
Web Design Responsivo
Tipologia: Notas de estudo
1 / 130
Esta página não é visível na pré-visualização
Não perca as partes importantes!





























































































Rev.: WDHT-03-2000/04 A4 (ASIT)
..................................................................................................2-
ix
O segundo livro trata exclusivamente da tecnologia HTML. Ele não será usado neste curso. Apresenta e mostra como usar os principais descritores HTML e seus atributos mais importantes, destacando o uso de tabelas, vínculos e imagens com diversos exemplos e ilustrações. O terceiro livro apresenta aspectos avançados do HTML como o tratamento de imagens, o uso de tabelas para organizar o layout de páginas, imagens para espaçamento, janelas com múltiplos documentos ( frames ), imagens mapeadas, áudio, vídeo, plug-ins e applets Java. É muito assunto para conhecer em detalhes. Alguns tópicos (como applets), serão vistos em outros cursos. Apenas o layout com tabelas e frames são abordados neste curso. O quarto e último livro introduz a linguagem CSS, usada para criar sites controlados por folhas de estilo. Com essa tecnologia é possível ter controle quase absoluto sobre a aparência de um site, com vantagens que facilitam a manutenção, tornam o site mais leve e acessível e permite o suporte a tecnologias interativas como o DHTML (Dynamic HTML).
Mídia eletrônica e atualizações
Todos os exemplos, exercícios resolvidos e soluções de alguns exercícios propostos estão ou distribuídos em um disquete que acompanha este livro ou disponíveis na Internet. Para esta edição, atualizações estarão disponíveis em http://www.ibpinet.net/helder/asit/ assim como correções e possíveis exemplos adicionais.
Críticas e sugestões
Os livros contidos nesta edição estão sempre sendo revisados, atualizados e ampliados periodicamente e cada vez que são utilizados em cursos. Cuidados foram tomados para garantir a apresentação dos assuntos de forma clara, didática e precisa, mas eventualmente podem escapar erros, imprecisões e trechos de pouca clareza. Sugestões, críticas e correções são sempre bem vindas e podem ser endereçadas por e-mail a [email protected] ou [email protected]. Sua opinião é muito importante e contribuirá para que futuras edições possam ser cada vez melhores.
Helder L. S. da Rocha São Paulo, 17 de fevereiro de 2000.
1 # Web design
1.1.1. A internet e a world wide web
Para entender como criar e publicar páginas para a Web, precisamos primeiro saber um pouco como funciona a Teia, e a Internet, que está por trás de tudo. Nos parágrafos seguintes relembramos um pouco a sua história. A Internet é uma rede antiga. Tem mais de 30 anos de idade. Uma das pessoas que teve um papel decisivo na sua criação foi Fidel Castro. Os Estados Unidos tinham passado por uma possibilidade real de ataque nuclear depois da instalação de mísseis russos em Cuba e a interligação das bases militares em rede foi uma estratégia militar para proteger a comunicação em caso de ataque nuclear. Ela ligava máquinas diferentes entre si através de linhas redundantes de maneira que, mesmo que uma ou várias bases fossem reduzidas a pó, as outras estações ainda conseguiriam se comunicar entre si. Então, com medo que Fidel e seus charutos nucleares paralisassem o sistema de defesa do país foi criada a rede ARPANET ( Advanced Research Projects Agency Network ). A rede interligou vários computadores em algumas universidades e centros de pesquisa envolvidos com projetos militares. Na época, computador ainda era coisa rara. Computador em rede, mais ainda. Os primeiros usuários (cientistas) usavam a rede para trocar mensagens de correio eletrônico e se conectar remotamente em computadores distantes. O serviço tornou-se tão útil, que as universidades envolvidas começaram a conectar seus departamentos, mesmo os que não tinham a ver com o projeto. Na década de 80, foi a vez da NSFNET, a rede nacional de pesquisa dos Estados Unidos, que conectou os cinco grandes centros regionais de supercomputação e passou também a fazer parte da ARPANET. A NSFNET se tornou espinha dorsal das duas redes, depois chamada de Internet. A NSFNET levou consigo uma legião de pequenas redes que a ela estavam conectadas. E assim a Internet foi crescendo e crescendo, sem nenhuma organização central. Qualquer centro que achasse seus serviços convenientes podia se amarrar ao nó mais próximo simplesmente pagando as despesas de uma linha dedicada de dados. Em pouco tempo, a Internet já interligava os maiores centros de pesquisa do mundo. A expansão foi trazendo novos serviços e outras redes de pesquisa, como a Usenet, a Bitnet, EARN e redes de BBSs. O crescimento já era impressionante, mas a popularidade ainda era limitada. Grande parte do tráfego era acadêmico. Operar um sistema de correio eletrônico em geral significava saber operar um jurássico terminal IBM ou máquina Unix, e ter alguma familiaridade com suas interfaces hostis. Para transferir um arquivo era necessário saber usar um programa especial (FTP), mandar comandos para ele e entender os hieroglifos que ele retornava. O maior problema era a desorganização generalizada da Internet. A Internet era um tremendo caos. Você sabia que poderia transferir um arquivo de qualquer lugar do mundo. O problema era saber se ele existia e onde estava! A Internet começou a crescer de forma explosiva em 1992, com o surgimento da World Wide Web , um projeto do laboratório CERN em Genebra (eles não estudavam aranhas, mas
1-
1 # Web design
partículas subatômicas). A Web conseguiu finalmente organizar um pouco as informações da Internet através do hipertexto. No ano seguinte, chegou o Mosaic para Windows # programa desenvolvido por um grupo de estagiários do NCSA ( National Center for Supercomputing Applications ) da Universidade de Illinois a partir de uma versão anterior para o sistema Unix. O Mosaic, oferecendo pela primeira vez uma interface gráfica multimídia para a Web, trouxe a grande massa de usuários de PC e Macintosh para dentro da rede. Os provedores de acesso e informação comerciais se multiplicaram, oferecendo às pessoas comuns o mesmo acesso que antes só tinham as grandes organizações e o meio acadêmico. Os criadores do Mosaic pouco depois de deixar a universidade criaram uma empresa: a Netscape, que foi provavelmente a empresa que teve a maior influência nos rumos seguidos pela Web na sua evolução até os dias de hoje.
1.1.2. A web como um meio de comunicação
Apesar de ter surgido como um serviço de uma rede de computadores, a Web é hoje muito mais que isto e para explorá-la, nem computador é necessário mais. Tecnologias recentes como o Network Computer (NC) - que é um simples terminal para a Web, browsers que vêm embutidos em telefones celulares, e a rede WebTV mostram que a World Wide Web está destinada a preencher todos os espaços da mídia de difusão, não se limitando àqueles que possuem um computador. A Web, dessa forma, possui um potencial inigualável na história das telecomunicações. É capaz de servir de interface à todos os serviços da Internet e ainda aos tradicionais serviços de voz (telefone), televisão, rádio e mídias impressas. Pode integrar tudo e interagir com tudo. Ainda estamos dando os primeiros passos neste novo terreno, e cada dia nos traz mais certeza de que trata-se de um caminho sem volta. Diferente dos meios tradicionais de comunicação de massa, a World Wide Web é uma mídia democrática. O usuário não precisa possuir uma estação difusora, uma concessão, uma gráfica ou qualquer coisa do tipo para poder publicar sua informação e influenciar sua audiência. Todos podem receber as informações de todos. Qualquer um pode prover informação. O poder da informação está nas mãos de todos os que puderem ter um espaço na Teia, e não mais apenas com as aranhas ou com aqueles que possuem os meios de difusão tradicionais.
1.2. A World Wide Web e a Internet
A World Wide Web é o nome do mais popular dos serviços da Internet. Por esse motivo, é freqüentemente confundida com a própria Internet. Mas Web e Internet não são a mesma coisa, e precisamos conhecer bem a diferença entre as duas antes que possamos começar a desenvolver páginas e aplicações para a Web.
1-
1 # Web design
devolve o endereço IP correspondente ao nome solicitado ( www.ibpinet.net devolverá 200.231.191.10). Se o sistema de nomes falhar, o browser não conseguirá o número IP que precisa e assim não localizará a máquina correspondente (mesmo que ela não esteja fora do ar).
1.2.4. Portas e serviços da Internet
A Internet existe há mais de três décadas. Na maior parte desse período ela era restrita aos meios acadêmicos e militares e oferecia poucos serviços. Os principais serviços utilizados na rede eram a transferência de arquivos entre computadores (usando aplicações que se comunicavam através do protocolo FTP - File Transfer Protocol ), o correio eletrônico e a emulação de terminal , que permitia o acesso a computadores remotos. Esses serviços eram oferecidos em algumas máquinas onde rodavam programas servidores, permanentemente no ar aguardando a conexão de um cliente em uma de suas portas de comunicação. Uma mesma máquina pode oferecer vários serviços, desde que em portas diferentes. Imagine que o endereço IP de uma máquina seja como o endereço de um prédio de escritórios. Localizando o prédio, você procura por um determinado serviço que é prestado por uma empresa. Pode haver várias empresas no prédio. Cada uma tem uma sala identificada por um número. O número da sala é análogo à porta de serviços de uma máquina. Para facilitar a vida dos clientes, várias portas, identificadas por um número, foram padronizadas, ou seja, em computadores diferentes, você geralmente encontra os mesmos serviços localizados em portas com os mesmos números. Para ter acesso a um serviço é preciso ter um cliente apropriado que saiba conversar na língua (protocolo) do servidor (programa que oferece o serviço na porta buscada pelo cliente). Como as portas são padronizadas, um cliente muitas vezes só precisa saber o nome ou endereço IP da máquina que tem determinado serviço, pois o número da porta ele supõe que seja o número padrão. Se você usa o Internet Explorer para ter acesso ao site do IBPINET ou o Outlook Express para ler seu e-mail no IBPINET, é possível que você esteja se conectando à mesma máquina. O Outlook Express se conectará à porta 110 para verificar suas mensagens. Na hora de enviar, utilizará os serviços da porta 25. O Internet Explorer buscará a home page do IBPINET na porta 80, mas se você decidir fazer compras e utilizar o servidor seguro do IBPINET, se o browser utilizará a porta 443.
1.2.5. A Web entre os serviços da Internet
O serviço de emulação de terminal remoto - Telnet , requer que o usuário conheça o sistema remoto, tenha permissão de acesso e saiba utilizá-lo. O acesso é orientado a caracter e pode ser feito em MS-DOS. No início da popularização da Internet, vários serviços eram oferecidos apenas via Telnet , que funcionava como uma espécie de cliente universal. O usuário, ligado à Internet, poderia pesquisar o banco de dados da Nasa, bater papo com usuários
1-
1 # Web design
remotos e pesquisar repositórios de informações pelo mundo afora. A World Wide Web surgiu inicialmente como mais um desses serviços, que poderia ser utilizado através de um cliente Telnet apontando para o endereço info.cern.ch. O serviço ainda existe, por razões históricas. É possível acessá-lo via linha de comando no DOS ou Unix usando:
telnet info.cern.ch É um acesso orientado a caracter e na época concorria com outros serviços de informações mais populares como o WAIS , o Gopher e o Archie , que também tentavam organizar as informações da Internet. O acesso direto ao servidor, usando um cliente conectado à sua porta de comunicação é sempre mais rápido e eficiente que o acesso via Telnet. Os primeiros clientes Web eram orientados a caracter (não exibiam fontes nem imagens) e rodavam apenas em ambientes Unix. Com o surgimento do X-Mosaic , o primeiro browser gráfico rodando em ambiente X-Window (Unix), a Web começou a se tornar popular (pelo menos entre os acadêmicos). O crescimento explosivo da Internet aconteceu quando finalmente o Mosaic passou a ser acessível ao usuário comum não-acadêmico através do Win-Mosaic e posteriormente do Mac-Mosaic. O Mosaic, de- senvolvido por Marc Andreesen quando estagiava no NCSA ( National Center for Supercomputing Applications ) abriu caminho para vários outros clientes Web, hoje chamados de browsers, e que passaram a ser o primeiro (e às vezes único) contato de muitos usuários com a Internet. O próprio Andreesen, ao deixar o NCSA, fundou a Netscape Communications , que dominou a Web por vários anos. Os browsers de hoje não são mais apenas clientes Web. Eles lêem páginas locais, enviam e-mail, permitem que o usuário leia grupos de notícias, e-mail, execute aplicações locais, acesse aplicações remotas e diversos outros serviços da Internet. O browser moderno é um cliente universal para toda a Internet, embora esse acesso ocorra através da World Wide Web.
1.3. A plataforma Web
A World Wide Web é um serviço TCP/IP baseado no protocolo de nível de aplicação HTTP ( HyperText Transfer Protocol ) # Protocolo de Transferência de Hipertexto. A plataforma Web é o meio virtual formado pelos servidores HTTP (servidores Web que mantém sites), clientes HTTP (browsers) e protocolo HTTP (a língua comum entre o cliente e o servidor).
1.3.1. Hipertexto
Hipertexto é uma forma não linear de publicação de informações onde palavras que aparecem no decorrer do texto podem levar a outras seções de um documento, outros documentos ou até outros sistemas de informação, fugindo da estrutura linear original de um texto simples. O hipertexto baseia-se em ligações entre dois pontos chamados de âncoras. As ligações entre as âncoras são chamadas de vínculos ( links ). Vínculos de hipertexto são
1-
1 # Web design
C:\Windows C:\Documentos C:\Documentos *\Web* C:\Documentos \Web\Imagens C:\Documentos \Web\Videos Suponha que um servidor HTTP foi instalado nessa máquina. Na instalação, ele é configurado para administrar um sistema de diretórios a partir de um certo diretório. Suponha que esse diretório é C:\Documentos\Web. Para o servidor, isto é seu diretório raiz. No sistema de diretórios virtual, o diretório raiz de um servidor é chamado de / (barra). O sistema de arquivos virtual (a parte que um browser poderá ter acesso) é:
/ (C:\Documentos *\Web* ) /Imagens (C:\Documentos \Web\Imagens ) /Videos (C:\Documentos \Web\Videos ) Um browser jamais terá acesso ao diretório Windows, por exemplo. A principal função de um servidor Web é, portanto, administrar um sistema de arquivos e diretórios virtual e atender à requisições dos clientes HTTP (os browsers), que, na maior parte das vezes, enviam comandos HTTP pedindo que o servidor devolva um ou mais arquivos localizados nesses diretórios. Os pedidos são feitos através de uma sintaxe especial chamada de URI.
1.3.4. URIs (URLs 1 )
Todas as comunicações na plataforma Web utilizam uma sintaxe de endereçamento chamada URI - Uniform Resource Identifier - para localizar os recursos que são transferidos. O serviço HTTP depende da URI que é usada para localizar qualquer coisa na Internet. Contém duas informações essenciais: 1) COMO transferir o objeto (o protocolo); 2) ONDE encontrá- lo (o endereço da máquina e o caminho virtual). URIs tipicamente são constituídas de três partes:
mecanismo (protocolo) usado para ter acesso aos recursos (geralmente HTTP) nome da máquina (precedido de // ) onde o serviço remoto é oferecido (e a porta, se o serviço não estiver em uma porta padrão) ou outro nome através do qual o serviço possa ser localizado (sem // ). nome do recurso (arquivo, programa) na forma de um caminho (no sistema de arquivos virtual do servidor) onde se possa encontrá-lo dentro da máquina. Sintaxe típica: protocolo://maquina:porta/caminho/recurso
(^1) URIs também são frequentemente chamadas de URLs (Uniform Resource Locators). A URL é um tipo particular de URI mas, para a nossa discussão, essa distinção é irrelevante. A documentação HTML (especificação) sempre refere-se à essa sintaxe como URI.
1-
1 # Web design
As URIs mais comuns são os endereços da Web, que utilizam o mecanismo HTTP para realizar a transferência de dados:
http://www.maquina.com.br/caminho/para/minha/página/texto.html
Veja algumas outras URLs: ftp://usuario:[email protected]/pub/arquivo.doc
Acesso a servidor FTP que exige usuário e senha para fazer download de arquivo.doc nntp://news.com.br/comp.lang.java Acesso a servidor de newsgroups para ler o grupo comp.lang.java news:comp.lang.java Acesso ao grupo comp.lang.java através de servidor default (definido localmente) http://www.ibpinet.net/ Acesso à página default disponível no diretório raiz do servidor Web de www.ibpinet.net http://www.algumlugar.com:8081/textos/ Acesso à página default disponível no diretório textos do servidor Web que roda na porta 8081 da máquina www.algumlugar.net http://www.busca.com/progbusca.exe?opcoes=abc&pesquisa=dracula Passagem de parâmetros de pesquisa para programa de busca progbusca.exe que terá sua execução iniciada pelo servidor HTTP que roda na porta 80 (default) de www.busca.com. http://www.ibpinet.net/helder/dante/pt/inferno/notas_4.html#cesar Acesso à uma seção da página HTML notas_4.html identificada como Zcesar[, localizada no subdiretório virtual /helder/dante/pt/inferno/ do servidor Web de www.ibpinet.net. mailto:[email protected] Acesso à janela de envio de e-mail do cliente de correio eletrônico local.
1.3.5. Browser
O browser é um programa que serve de interface universal a todos os serviços que podem ser oferecidos via Web. É para a plataforma Web o que o sistema operacional (Windows, Linux, Mac) é para o computador. A principal função de um browser é ler e exibir o conteúdo de uma página Web. A maior parte dos browsers também é capaz de exibir vários outros tipos de informação como diversos formatos de imagens, vídeos, executar sons e rodar programas. Um browser geralmente é usado como cliente HTTP # aplicação de rede que envia requisições a um servidor HTTP e recebe os dados (uma página HTML, uma imagem, um programa) para exibição, execução ou download. Browsers também podem ser usados off-line como aplicação local do sistema operacional para navegar em sistemas de hipertexto
1-