Introduction à la linguistiqueDescription complète
linguistica textos narrativos
Descrição completa
Acupunture TextFull description
Programação para WEB Fernando Schütz
Cuiabá-MT 2013
Presidência da República Federativa do Brasil Ministério da Educação Secretaria de Educação Prossional e Tecnológica Diretoria de Integração das Redes de Educação Prossional e Tecnológica
Henrique Oliveira da Silva Coordenação de Produção de Material Didático Impresso
Coordenação de Curso
Pedro Roberto Piloni
Maria Teresa Garcia Badoch
Designer Educacional
Alceu Vidotti Designer Master
Marta Magnusson Solyszko Diagramação
Tatiane Hirata Revisão de Língua Portuguesa
Patricia Rahuan Revisora Final
Marta Magnusson Solyszko
Projeto Gráco
Rede e-Tec Brasil / UFMT Dados Internacionais de Catalogação na Publicação
S886
Schütz, Fernando Programação para web / Fernando Schütz. – Curitiba: Ed. UTFPR, 2013. 159 p. : il. Inclui bibliografia e-ISBN: 978-85-7014-115-2 1. Sites da Web – Desenvolvimento. 2. HTML (Linguagem de mar-cação de documento). 4. Recursos de rede de computador I. Título. Título. CDD (22. ed.) 005.133 Bibliotecário: Adriano Lopes CRB 9/1429
Apresentação Rede e-Tec Brasil Prezado(a) estudante, Bem-vindo(a) à Rede e-Tec Brasil! Você faz parte de uma rede nacional de ensino que, por sua vez, constitui uma das ações do Pronatec - Programa Nacional de Acesso ao Ensino Técnico e Emprego. O Pronatec, instituído pela Lei nº 12.513/2011, tem como objetivo principal expandir, interiorizar e democratizar a oferta de cursos de Educação Prossional e Tecnológica (EPT) para a população brasileira propiciando caminho de acesso mais rápido ao emprego. É neste âmbito que as ações da Rede e-Tec Brasil promovem a parceria entre a Secretaria de Educação Prossional e Tecnológica (Setec) e as instâncias promotoras de ensino técnico, como os institutos federais, as secretarias de educação dos estados, as universidades, as escolas e colégios tecnológicos e o Sistema S. A educação a distância no nosso país, de dimensões continentais e grande diversidade regional e cultural, longe de distanciar, aproxima as pessoas ao garantir acesso à educação de qualidade e ao promover o fortalecimento da formação de jovens moradores de regiões distantes, geogracamente ou economicamente, dos grandes centros. A Rede e-Tec Brasil leva diversos cursos técnicos a todas as regiões do país, incentivando os estudantes a concluir o ensino médio e a realizar uma formação e atualização contínuas. Os cursos são ofertados pelas instituições de educação edu cação prossional e o atendimento ao estudanestudante é realizado tanto nas sedes das instituições quanto em suas unidades remotas, os polos. Os parceiros da Rede e-Tec Brasil acreditam em uma educação prossional qualicada – inintegradora do ensino médio e da educação técnica – capaz de promover o cidadão com cacapacidades para produzir, mas também com autonomia diante das diferentes dimensões da realidade: cultural, social, familiar fa miliar,, esportiva, política e ética. Nós acreditamos em você! Desejamos sucesso na sua formação prossional! Ministério da Educação Setembro de 2013 Nosso contato etecbrasil@mec.gov.br
5
Rede e-Tec Brasil
Indicação de ícones Os ícones são elementos grácos utilizados para ampliar as formas de linguagem e facilitar a organização e a leitura hipertextual. Atenção: indica pontos de maior relevância no texto.
Saiba mais: oferece novas informações que enriquecem o
assunto ou “curiosidades” e notícias recentes relacionadas ao tema estudado. Glossário: indica a denição de um termo, palavra ou expressão
utilizada no texto. Mídias integradas: remete o tema para outras fontes: livros, lmes, músicas, sites, programas de TV. Atividades de aprendizagem: apresenta atividades em
diferentes níveis de aprendizagem para que o estudante possa realizá-las e conferir o seu domínio do tema estudado. Reita: momento de uma pausa na leitura para reetir/escrever
sobre pontos importantes e/ou questionamentos.
7
Rede e-Tec Brasil
Contents Apresentação Rede e-Tec Brasil
5
Indicação de ícones
7
Apresentação da Disciplina
11
Sumário
13
Aula 1. Fundamentos da Internet e da Linguagem HTML
15
1.1 A internet
15
1.2 Exemplos de serviços presentes na internet
17
1.3 Aplicativos utilizados para acesso a 18
serviços na WEB
1.4 Desenvolvimento de páginas para WEB
19
Aula 2. Linguagem HTML
27
2.1 Elementos de frases
27
2.2 Texto pré-formatado
28
2.3 Listas
29
2.4 Tabelas
31
2.5 Links: âncoras e ligações
33
2.6 Inserção de imagens
34
2.7 Formulários
35
Aula 3. Formatação de Elementos HTML Utilizando CSS 45 3.1 Fundamentos da linguagem
46
3.2 Valores
48
3.3 Elementos de formatação
52
3.4 Imagens e conguração de fundo
62
Palavra do Professor-autor
Prezado(a) estudante, Esta disciplina faz parte do Programa e-Tec Brasil, inserida no Curso de Técnico em Informática oferecido pela Universidade Tecnológica Federal do Paraná (UTFPR), Rede e-Tec Brasil. É um prazer tê-lo(a) conosco nesta jornada que apresentará novos caminhos para a programação que até pouco tempo estava restrita a redes internas de empresas ou mesmo a um único computador. Nesta disciplina você poderá aprender conceitos básicos de uma linguagem de programação para a WEB e desenvolver páginas utilizando HTML, PHP e CSS para formatação. Aprender a desenvolver programas e utilizar uma linguagem de programação estão diretamente relacionados a fazer atividades práticas, portanto faça e refaça os exercícios até que tudo esteja bem compreendido. Desejo ótimo aproveitamento.
9
Rede e-Tec Brasil
Apresentação da Disciplina
A internet hoje, principalmente em sua parte gráca (a WEB), tem uma abrangência mundial e, portanto, oferece um vasto mercado de trabalho para quem conhece a arte do desenvolvimento de programas para WEB. Os conteúdos serão apresentados da seguinte forma: Aula 1: Fundamentos da Internet e da linguagem HTML Aula 2: Linguagem HTML Aula 3: CSS Aula 4: Programação WEB lado cliente – Javascript Aula 5: Programação WEB lado servidor – PHP Aula 6: Estudo experimental com PHP
Você poderá tirar suas próprias conclusões sobre a evolução da internet , pois apresentaremos um resumo histórico da grande rede focando os desaos e as personagens por trás desta grande revolução do século 20. Teremos um amplo conteúdo sobre a Linguagem de Marcação para Hipertextos – o HTML. Com ele você poderá construir páginas modernas, incluindo recursos interessantes para a organização do texto, imagens e objetos multimídia. O conteúdo trata ainda, da formatação de elementos HTML através de Folhas de Estilo em Cascata – o CSS. Você verá que a aplicação das regras do CSS deixará sua página mais bonita, melhorando também a acessibilidade e usabilidade, tão importantes nos dias atuais principalmente para páginas de Educação a Distância e Comércio Eletrônico (na venda de produtos e serviços). As últimas aulas do caderno tratam da programação feita no lado servidor. Lá apresentaremos a linguagem PHP, muito difundida entre os programadores do mundo inteiro. É nesta parte que o poder de processamento da
11
Rede e-Tec Brasil
internet será por você avaliado, pois haverá o trabalho com banco de dados na criação de uma área administrativa para cadastro de clientes, bem como serão abordados tópicos para manipulação de dados. O principal objetivo deste estudo é que, ao nal do curso, você possa: • identicar as principais diferenças entre a programação dentro e fora da WEB; • formatar sites de forma inteligente; • construir formas de interação com o usuário de navegadores; • manipular dados utilizando a linguagem PHP; Assim, espero que, ao nal desta disciplina, você esteja habilitado(a) a entender a estrutura básica das linguagens HTML, CSS e PHP e desenvolver páginas simples para WEB. Desejo a você sucesso no curso! Fernando Schütz
Rede e-Tec Brasil
12
Sumário
Aula 1. Fundamentos da Internet e da Linguagem HTML
15
1.1 A internet
15
1.2 Exemplos de serviços presentes na internet
17
1.3 Aplicativos utilizados para acesso a serviços na WEB
18
1.4 Desenvolvimento de páginas para WEB
19
Aula 2. Linguagem HTML
27
2.1 Elementos de frases
27
2.2 Texto pré-formatado
28
2.3 Listas
29
2.4 Tabelas
31
2.5 Links: âncoras e ligações
33
2.6 Inserção de imagens
34
2.7 Formulários
35
Aula 3. Formatação de Elementos HTML Utilizando CSS
45
3.1 Fundamentos da linguagem
46
3.2 Valores
48
3.3 Elementos de formatação
52
3.4 Imagens e conguração de fundo
62
Aula 4. Programação WEB “lado cliente”
69
4.1 Fundamentos da linguagem
70
4.2 Tipos de dados
75
4.3 Pseudo-objetos
76
4.4 Operadores
81
4.5 Comandos
82
4.6 Javascript com formulários
86
13
Rede e-Tec Brasil
Aula 5. Programação para WEB “lado servidor”
91
5.1 Fundamentos da linguagem
91
5.2 Características do PHP
92
5.3 Programação
93
5.4 Tipos de dados
95
5.5 Operadores
97
5.6 Comandos
99
5.7 Funções
104
Aula 6. Programação para WEB “lado servidor” – estudo experimental 113
Rede e-Tec Brasil
6.1 Funções especícas para controle de banco de dados e sessões
114
6.2 Criação do banco de dados
116
6.3 Código de conexão com o banco de dados
118
6.4 Páginas da WEBApp
120
Palavras nais
135
Guia de Soluções
137
Referências
157
Obras Consultadas
158
Currículo do Professor-autor
159
14
Aula 1. Fundamentos da Internet e da Linguagem HTML Objetivos: • expressar o conceito de internet; • identicar a evolução da rede de computadores na internet; • apresentar os principais serviços e formas de acesso à rede; e • utilizar a linguagem de marcação HTML para o processo de criação de páginas para WEB.
Caro(a) estudante, Você está iniciando a primeira de um bloco de 06 aulas que compõem esta disciplina . Nela você terá acesso ao conceito de internet, exemplos de serviços presentes na mesma, os aplicativos utilizados para acesso a serviços na WEB, bem como o desenvolvimento de páginas para WEB. A compreensão do conteúdo a seguir e as atividades de aprendizagem podem contribuir para a sua formação como técnico em informática. Vamos iniciar apresentando o conceito de internet.
1.1 A internet A difusão do conhecimento se tornou regra na vida moderna. Desde grandes instituições, através de portais, até um estudante de ensino médio, atra vés de uma rede social ou um blog pode disponibilizar qualquer informação para o mundo inteiro. A praticidade na distribuição destes elementos se dá pela internet . No dia 24 de outubro de 1995, o Federal Networking Council norte-americano aprovou por unanimidade uma resolução denindo o termo “Internet”, que se refere ao sistema de informação global que:
Aula 1 - Fundamentos da Internet e da Linguagem HTML
15
Federal Networking Council:
O Federal Networking Council (FNC) foi privilegiado pelo Comitê Nacional de Ciência e Tecnologia, Informação e Comunicação (CCIC) para atuar como um fórum para a colaboração em rede entre as agências federais para atender suas pesquisas, educação, missão e objetivos operacionais.
Rede e-Tec Brasil
I - É logicamente ligado por um endereço único global baseado no Internet Protocol (IP) ou suas subsequentes extensões; II - É capaz de suportar comunicações usando o Transmission Control Protocol/Internet Protocol (TCP/IP) ou suas subsequentes extensões e/ou outros protocolos compatíveis ao IP; e III - Provê, usa ou torna acessível, tanto publicamente como privadamente, serviços de mais alto nível produzidos na infraestrutura descrita. Disponível em Acesso em: em 07 jul.2011. Esta denição foi desenvolvida em consulta com membros da Internet e comunidades de direitos da propriedade intelectual. A gura 1 apresenta uma Linha do Tempo desta evolução de tecnologias, número de acessos e conselhos reguladores.
Figura 1 - Linha do tempo da Internet Fonte: Leiner (2011)
A internet, como rede mundial de computadores interconectados, é um privilégio da vida moderna. É tida como o maior repositório de informações acessíveis a qualquer pessoa em qualquer parte do mundo. E o que torna a internet tão diferente das outras invenções humanas é o insignicante período de tempo que ela precisou para ser usada por milhões de pessoas. A eletricidade (1873), por exemplo, atingiu 50 milhões de usuários depois de 46 anos de existência e o telefone (1876) levou 35 anos para atingir esta mesma marca. A gura 2 apresenta um “pedaço” da rede que demonstra seu funcionamento.
Rede e-Tec Brasil
16
Programação para WEB
Backbone: O backbone (es-
pinha dorsal) designa o esquema de ligações centrais de um sistema mais amplo, tipicamente de elevado desempenho, em sistemas de redes de computadores.
Para conhecer mais acesse http://www.w3.org/ History/1989/proposal.html
Figura 2 - Uma porção típica da Internet Fonte: Coulourios (2007.p.3),
Observe a seguir os principais serviços presentes na internet.
1.2 Exemplos de serviços presentes na internet Através de páginas espalhadas pela WEB, milhares de pessoas possuem acesso instantâneo a uma vasta gama de informações on-line em hipermídia. Comparado às enciclopédias e bibliotecas tradicionais, a World Wide Web (ou somente WWW) permitiu uma extrema descentralização da informação e dos dados, incluindo a criação ou popularização de tecnologias como páginas pessoais, WEBlogs e redes sociais, onde qualquer pessoa com acesso a um navegador pode disponibilizar conteúdo. A WEB vem se mostrando uma plataforma comum no qual outros serviços da internet estão sendo disponibilizados. A disponibilização de documentos e a popularização da Web se devem, principalmente ao conceito de hipertexto. Considerado como elemento textual, exibido em uma páginan Web com referências (ligações ou hiperlinks) para outros textos que o leitor pode acessar imediatamente, normalmente por um clique do mouse ou sequência de teclas. Além de texto, o hipertexto pode conter tabelas, imagens e outros dispositivos de apresentação, sendo assim chamado de hipermídia. O e-mail (electronic mail ou correio eletrônico) é o envio eletrônico de correspondências. Atualmente o e-mail suporta o envio de textos e arquivos, sendo que servidores de e-mail podem enviar e-mails para múltiplos endereços eletrônicos.
Aula 1 - Fundamentos da Internet e da Linguagem HTML
17
Rede e-Tec Brasil
Para conhecer essas redes sociais acesse os sites: www.twitter. com e www.facebook.com
O correio eletrônico pode ser implementado através de programas especícos ou ainda por navegadores, os chamados WEBmails que, diferente de um aplicativo de acesso ao e-mail instalado num computador (só pode ser acessado localmente pelo utilizador ou através de acesso remoto), o conteúdo pode ser acessado facilmente em qualquer lugar através de um sistema de autenticação. A comunicação direta em páginas, como acontece nas redes sociais, está cada vez mais popular entre usuários da Web. O twitter, onde pequenos textos (geralmente contendo hiperlinks para outras páginas) são postados em massa, é um dos fenômenos atuais, assim como o Facebook - a rede social que mais cresceu no Brasil. Para que se possa acessar os serviços na WEB, é necessário que os programas aplicativos instalados em seu computador estejam preparados para esta conexão com o mundo, ou que se use aplicativos desenvolvidos estritamente para este m. A próxima seção aborda um breve histórico dos principais aplicativos, bem como uma comparação do estado da arte dos mais utilizados.
1.3 Aplicativos utilizados para acesso a serviços na WEB
Lançado em Novembro de 1993 pelo Centro Nacional de Aplicações de Supercomputação (NCSA - National Center for Supercomputing Applications), o aplicativo
adicionava facilidades através de uma melhor interface, que incluia ícones favoritos (bookmarks) e imagens. Seu sucesso foi tão grande que, em um ano, já atingiu a marca de milhões de usuários.
Rede e-Tec Brasil
Para que um usuário tenha acesso à grande rede mundial de computadores, programas aplicativos foram criados durante a evolução da rede e da criação de novos serviços. Um navegador é um aplicativo que permite o acesso a recursos WEB através da Iinternet. Um grande marco para a popularização da internet e, principalmente da WEB foi o navegador NCSA Mosaic, que você poderá observar na gura 3 que mostra um screenshot do MOSAIC 3
18
Figura 3 - Screenshot do NCSA Mosaic Fonte: autor
Programação para WEB
Atualmente quatro navegadores são os mais utilizados dentro da grande rede, e têm uma grande aceitação por usuários da WEB. A gura 4 apresenta tais navegadores.
Figura 4 - Em sentido horário, iniciando do primeiro quadro a esquerda, screenshots dos navegadores Google Chrome, Opera, Mozzila Firefox e In ternet Explorer Fonte: autor
No tópico a seguir vamos abordar as diversas possibilidades para construção de páginas para WEB.
1.4 Desenvolvimento de páginas para WEB Como desenvolver páginas para a WEB? A programação imperativa e funcional não é utilizada diretamente nas páginas para a construção de conteúdo estático e inclusão de objetos externos geogracamente espalhados. As páginas são construídas com linguagem de marcação, ou seja, marcas (tags) são inseridas na página para que possam ser interpretadas por programas de usuário, geralmente, os navegadores! Imagine uma linguagem de marcação como uma rodovia com placas, cada uma indicando o que deve ser feito a seguir (feito com o conteúdo da página).
Aula 1 - Fundamentos da Internet e da Linguagem HTML
19
Rede e-Tec Brasil
Desenvolvido originalmente por Tim Berners-Lee, a partir de 1990, a HTML é uma linguagem de marcação de hipertexto (Hypertext Markup Language) e é utilizada para a construção de páginas para WEB, e pode ser definido como um tipo especial de documento de texto que é usado por navegadores WEB para apresentação de textos e gráficos. Os documentos HTML são normalmente referidos como páginas WEB, que são retornadas (através de pedidos HTTP) de servidores espalhados por todo o mundo. A primeira versão de HTML foi oficialmente publicada em 1993, porém seu desenvolvimento foi iniciado em meados de 1989, por Tim Berners-Lee. < disponível em:
Para publicar informações para distribuição global há a necessidade de uma linguagem conhecida universalmente, uma forma de publicação que siga uma “linguagem mãe” que todos os computadores potenciais exibidores compreendam. A linguagem de publicação utilizada na World Wide WEB é HTML. A linguagem HTML dá ao autor a possibilidade de: • Publicar documentos on-line on-line com com cabeçalhos, textos, tabelas, listas, fotos, entre outros;
• Exibir informações on-line on-line através através de ligações de hipertextos, no clique de um botão;
• Desenvolver formulários para conduzir transações com serviços remotos para uso na busca de informações, fazer reservas, pedir produtos, entre outros;
• Incluir planilhas, clipes de vídeo, clipes de som e outras aplicações diretamente nos documentos
A versão HTML 4.01 introduz na linguagem mecanismos como folhas de estilo, scripts, frames, incorporação de objetos, suporte melhorado para escrever textos da direita para a esquerda (nas culturas diferentes), tabelas mais ricas, e melhorias nos formulários, oferecendo ainda uma melhor acessibilidade para pessoas com deciência.
1.4.1 Estrutura de documentos HTML Um documento HTML é, na essência, um documento de texto, e a construção de suas regras para interpretação em navegadores é baseada em marcações, que informam ao aplicativo o que deve ser feito com determinado conteúdo. Não existe compilação de código: ele é interpretado pelos navenavegadores, que modicam a formatação do texto (negrito, itálico, fontes, etc.) e inserem objetos especícos (imagens, sons, objetos Flash, tabelas) durante a interpretação para a leitura do usuário. Para marcar as ações de modicação no texto que devem ser realizadas pelos interpretadores (navegadores WEB), HTML faz o uso de tags ou marcações. As tags têm a seguinte sintaxe: textotexto cação>
Rede e-Tec Brasil
20
Programação WEB
• Marcação: é o comando ou marca que representa qual modicação deve ser feita. • Atributo: elemento modicador da marca. • Pode-se observar que as marcações precisam ser nalizadas. Isso é feito através da “/” Uma marca também pode ser vazia, ou seja, pode não haver a necessidade de texto a ser modicado. Geralmente tais marcas fazem a inserção de um objeto ou mesmo uma quebra de linha. A sintaxe para marcações “vazias” “vazias” é:
Um documento HTML 4.01 é composto de três partes: a) uma linha contendo informações sobre a versão do HTML b) uma seção de cabeçalho declarativa (delimitada pelo elemento HEAD) c) um corpo, contendo o conteúdo atual do documento. O corpo pode ser
implementado pelo elemento BODY ou o elemento FRAMESET FRAMESET.. A gura 5 exibe um primeiro exemplo de código HTML e um exemplo quan quan-do aberto seu arquivo no navegador WEB.
Figura 5 - Exemplo de código e sua renderização em um navegador WEB Fonte: autor
1.4.2 Divisão de uma página WEB Assim que o navegador abre um arquivo vindo do servidor WEB, a interpretação de cada tag interna é iniciada. A regra inicial é que o navegador saiba qual será a linguagem utilizada para interpretar as marcações; posteriormente congurações e nalmente o conteúdo em si. A apresentação e descridescri-
Aula 1 - Fundamentos da Internet e da Linguagem HTML
21
Rede e-Tec Brasil
ção dos elementos iniciais utilizados em documentos escritos na linguagem HTML podem ser vistos no quadro 1. 1. 2. 3. 4. Título da minha página 5. <META name=”Author” content=”Fernando Schutz”> 6. <META name=”Keywords” lang=”pt-br” content=”Professor, UTFPR”> 7. 8.
Quadro 1 - Elementos de conguração de uma página HTML
Fonte: autor
• O elemento HTML indica que o conteúdo deste arquivo segue a lingualinguagem. Depois da declaração inicial, todo o documento deverá ser escrito com tal linguagem. • O elemento HEAD contém informações sobre o documento at ual (títulos, palavras-chave para mecanismos de busca, etc.). Normalmente tudo que está dentro do elemento HEAD não é mostrado ao usuário nal. • O elemento TITLE está dentro do elemento HEAD e identica o conteúdo do documento. É indicado que o desenvolvedor utilize título s que descrevam realmente sua página, não economizando em palavras. Outros elementos podem ser inseridos para efetuar a configuração da página. Acesse http://www.w3.org/wiki/ HTML/Training/What_is_ HTML%3F para informações
da página que regulamentam a linguagem.
• O elemento META permite ao desenvolvedor incluir “meta dados”, que são informações sobre o documento ao invés de seu real conteúdo. O elemento META deve ter um nome e um valor de conteúdo como atributos.
1.4.3 Descrevendo o conteúdo de uma página O elemento BODY de um documento delimita o conteúdo do documento. O conteúdo pode ser apresentado ao cliente de variadas formas. Por exemexemplo, em navegadores visuais, o corpo (BODY) é uma tela onde o conteúdo é apresentado como textos, guras, cores, grácos, ent re outros. Para clientes de áudio, o mesmo conteúdo pode ser “falado”. Um exemplo de apresentação e uso do código de um elemento BODY é apresentado no quadro 2.
A study of population dynamics ... document body...
Quadro 2 - Exemplo da tag
Fonte: autor
Pode-se notar que o exemplo faz a utilização de estilos para formatar o corpo da página (fundo branco, cor da letra preta, ligações em vermelho, ligações já visitadas em marron e ligações ativas em “rosa-choque”). O uso dos atributos que deniam tais formatações foi preterido (deprecated ), e, a partir de novas versões de páginas, não são mais utilizados. Para ns de comparação, o código é demonstrado no quadro 3. 1. 2. 3. 4.
... document body...
Quadro 3 - Tags de formatação antigas (antes do CSS) e não mais recomendadas para utilização Fonte: autor
Um tipo de conteúdo que pode ser incluído em página HTML são textos, e podem ser distribuídos e apresentados de várias maneiras. Esta seção trata dos elementos que delimitam a apresentação de textos e seu conteúdo. Conheça agora o que é uma distribuição em linha e em bloco.
1.4.4 Distribuição em linha e em bloco Determinados elementos que aparecem no corpo de páginas são denominados “em linha” (in-line) e outros são apresentados como “em bloco” (block-level ). Geralmente, os elementos em bloco contêm elementos em linha e outros elementos em bloco. Elementos em bloco, hierarquicamente, contêm mais conteúdo enquanto elementos em linha contêm dados e notações curtas. A formatação também difere em termos de que elementos em bloco geralmente iniciam com novas linhas e elementos em linha não. O agrupamento destes elementos pode se dar em dois elementos:
Aula 1 - Fundamentos da Internet e da Linguagem HTML
23
Rede e-Tec Brasil
• DIV: dene que o conteúdo é exibido em bloco • SPAN: dene que o conteúdo é exibido em linha Originalmente os elementos DIV e SPAN possuem esta divisão, porém, como qualquer elemento HTML, seu comportamento dentro de uma página pode ser controlado por comandos do CSS. CSS: Cascade Style Sheets
ou simplesmente “estilos”, é uma linguagem de folha de estilo utilizada para descrever a semântica da apresentação (o visual e formatação) de um documento escrito em uma linguagem de marcação.
Em conjunto com atributos ID e CLASS, os elementos DIV e SPAN oferecem aos desenvolvedores um poderoso mecanismo para adicionar estrutura aos documentos. Atualmente os designers de páginas não utilizam mais tabelas para as divisões de conteúdo e sim elementos DIV com estilos. O quadro 4 demonstra uma utilização em dois clientes: Fabiana e Fernando. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17.
In formações sobre o cliente:
Nome:
Fabiana
Tel:
3240-8135
Email:
fabi@utfpr.edu.br
In formações sobre o cliente:
Nome:
Fernando
Tel:
3240-8119
Email:
fernando@utfpr.edu.br
Quadro 4 - Exemplo de uso da tags
e Fonte: autor
Nos exemplos de formatação com estilos tais elementos serão utilizados e a formatação poderá ser denida.
1.4.5 Títulos Elementos de títulos (cabeçalhos) brevemente descrevem o tópico de uma seção que introduzem. Informações de cabeçalho podem ser utilizadas por agentes de usuários, por exemplo, para construir tabelas de conteúdos em um documento automaticamente. Existem seis níveis de cabeçalhos em HTML onde H1 é o mais importante e H6 o menos. Navegadores visuais usualmente apresentam os cabeçalhos mais importantes em fontes maiores do que os menos importantes. O quadro 5 apresenta a utilização de cabeçalhos de nível.
Rede e-Tec Brasil
24
Programação WEB
1.
2.
Forest elephants
3.
In this section, we discuss the lesser known forest elephants. 4. ...this section continues... 5.
6.
Habitat
7.
Forest elephants do not live in trees but among them. 8. ...this subsection continues... 9.
10.
Quadro 5 - Elementos de título (headers) em funcionamento Fonte: autor
A estruturação de texto corresponde a uma grande parte do desenvolvimento de uma página WEB, pois nele se encontra grande parte do conteúdo. Enfatizar, colorir e formatar de acordo com citações são exemplos claros da necessidade de estruturação. Esta seção trata dos elementos HTML que fornecem tal possibilidade ao desenvolvedor.
Resumo A primeira aula apresentou os conceitos básicos da internet através de sua evolução histórica, que pontuou os principais marcos do desenvolvimento da “Rede Mundial de Computadores” e suas formas de interligação. Os principais protocolos foram apresentados para situá-lo(a) quanto a sua importância e utilização, bem como a forma como os recursos são encontrados na rede, através de endereçamento e alguns aplicativos que acessam os serviços disponíveis na internet. A internet passou por várias mudanças nas décadas em que esteve presente na computação mundial. Foi concebida na era do time-sharing, mas sobreviveu à era dos computadores pessoais, comunicações do tipo cliente-servidor e do tipo peer-to-peer , ou seja, o computador da rede. Projetada antes das redes locais, tem acomodado novas tecnologias (p.ex. ATM e quadro de comutação de serviços). Mas o mais importante: iniciou através dos esforços de um pequeno grupo de pesquisadores dedicados e hoje é um sucesso comercial com bilhões de dólares de investimento anual.
Atividades de aprendizagem 1. Cite e comente cinco das principais características da internet. 2. O acesso à internet, principalmente à WEB, é feito através de navegadores (browsers ). Enumere os principais navegadores atuais e suas diferenças tan-
to na usabilidade como nos recursos disponíveis a usuários e também para desenvolvedores.
Aula 1 - Fundamentos da Internet e da Linguagem HTML
25
Rede e-Tec Brasil
3. Desenvolva uma página HTML que tenha (utilize títulos para dividir os ele-
mentos do texto e apresentá-los) dois elementos em bloco de representação para conteúdo (
), apresentando dados pessoais
Saiba Mais DARPA: DARPA é a sigla para Defense Advanced Research Projects Agency , originalmente ARPA - Advanced Research Projects Agency . A agência mudou de nome algumas vezes, porém atualmente é conhecida como DARPA. Barry M. Leiner foi director do Research Institute for Advanced Computer Science. Vinton G. Cerf é vice-presidente e evangelista chefe da Internet da Google. David D. Clark é cientista pesquisador senior no MIT Laboratory for Computer Science. Robert E. Kahn é presidente da Corporation for National Research Initiatives. Leonard Kleinrock é professor titular de Ciência da Computação na Universidade da Califórnia e Fundador da Nomadix. Daniel C. Lynch é fundador da CyberCash Inc. Jon Postel serviu como diretor da divisão de redes de computadores da Universidade do Sul da Califórnia (Instituto de Ciências da Informação). Lawrence G. Roberts é presidente da Caspian Networks. Stephen Wolff está na Cisco Systems, Inc. Prezado(a) estudante, Nesta aula você teve o primeiro contato com a internet, a base de nossa disciplina, pois se trata da programação de páginas para publicação de conteúdo e interação com o usuário na Web, o maior serviço executado sobre a internet. Até aqui a linguagem HTML foi abordada de forma generalista e supercial, apenas para que você saiba como começar a desenvolver páginas para Web, porém na próxima aula, terá acesso completo a esta linguagem de marcação de hipertexto. .
Rede e-Tec Brasil
26
Programação WEB
Aula 2. Linguagem HTML
Objetivos: • interpretar as principais linguagens de marcação; • reconhecer a utilização da linguagem de marcação de hipertextos; • identicar a distribuição dos elementos e conteúdos dentro de um documento a ser publicado na WEB; e • empregar a formatação correta de conteúdos para disponibilização na internet.
Caro(a) estudante, Na aula anterior mostramos como funciona a internet e como começar a desenvolver páginas para a internet. Esta aula traz conceitos mais avançados sobre a linguagem e principalmente como dividir uma página utilizando todas as ferramentas disponíveis para a marcação de textos. Vamos iniciar tratando dos elementos de frases. Continue atento/a e disciplinado/a em seus estudos.
2.1 Elementos de frases Existem elementos que podem ser colocados dentro de frases com o intuito de modicá-las, de acordo com a ideia de apresentação das mesmas no contexto do site. Estes são chamados de elementos de frases ou “ phrase elements”. A tabela 1 apresenta os elementos e a descrição de aplicação de cada um.
Aula 2 - Linguagem HTML
27
Rede e-Tec Brasil
Tabela 1 - Elementos de Frase do HTML Elemento
Descrição
Indica ênfase
EM
Indica ênfase forte
STRONG
Contém uma citação ou uma referência a outras fontes
CITE CODE
Designa um fragmento de um código de computador
SAMP
Designa exemplos de saída de programas, scripts, etc.
ABBR
Indica uma forma abreviada Indica um acrônimo
ACRONYM
Figura 6 - Exemplos de Phrase Elements
Fonte: autor
Você sabe o que é um texto pré-formatado? Leia o texto abaixo e observe as guras para mais compreensão.
2.2 Texto pré-formatado Um texto pré-formatado é aquele que mostra exatamente como está descrito entre as tag’s do elemento. Navegadores, quando manuseando textos pré-formatados, devem: • Deixar espaços em branco intactos • Mostrar o texto com um tipo de letra (fonte) não proporcional (fxed-pitch) • Desabilitar quebra automática de linhas • Não desabilitar processamento bidirecional O elemento HTML utilizado para exibir texto pré-formatado é
e é muito útil quando um desenvolvedor deseja fazer uma página que demonstra códigos, por exemplo. A gura 7 mostra o exemplo de utilização do elemento e a página resultante do código apresentado.
Rede e-Tec Brasil
28
Programação para WEB
Figura 7 - Exemplo da tag
Fonte: autor
Para organizar a listagem de elementos em um site pode-se utilizar listas, tanto ordenadas (com numeração) quanto não ordenadas (sem numeração). Este último caso utiliza símbolos para organizar, e todo o processo está no próximo tópico.
2.3 Listas A linguagem HTML oferece aos desenvolvedores vários mecanismos para especicar listas de informações. Todas as listas precisam conter um ou mais elementos de lista, incluindo: • Informações ordenadas • Informações não-ordenadas • Denições Para criar uma lista ordenada, o elemento deve ser utilizado, conforme exemplo na gura 8.
Figura 8 - Exemplo de lista ordenada Fonte: autor
Aula 2 - Linguagem HTML
29
Rede e-Tec Brasil
Para a criação de uma lista não-ordenada, utiliza-se o elemento
. A gura 9 apresenta um exemplo do uso desta tag para criar uma lista, e também apresenta um “aninhamento” com outra lista, criando-se assim “sublistas”, ou seja, uma lista dentro da outra.
Figura 9 - Exemplo de lista não-ordenada e aninhada Fonte: autor
Nota-se que, para ambos os tipos de lista, o elemento usado para indicar cada um dos itens da lista é o
.
Não apenas para elementos ordenados e não-ordenados, a ling uagem HTML oferece mecanismos para tratar de denições, formando assim uma lista de denições. Os elementos utilizados são: • DL: inicia uma lista de denições • DT: termo da lista • DD: denição do termo da lista Uma lista de denições completa pode ser observada no exemplo da gura 10.
Figura 10 - Exemplo de lista de denições Fonte: autor
Rede e-Tec Brasil
30
Programação para WEB
Modicações no tipo de elementos que são utilizados para identicar itens em listas não-ordenadas (círculos, quadrados e discos) e também em listas ordenadas (alfabético, romano e numérico) podem ser feitas utilizando estilos. Tais modicações serão abordadas no capítulo sobre CSS Outra forma interessante de organizar os elementos em um site é atr avés da utilização de tabelas.
2.4 Tabelas O modelo de tabelas da linguagem HTML permite aos desenvolvedores organizar dados (textos, textos pré-formatados, imagens, ligações, formulários, campos de formulário e até mesmo outras tabelas) em linhas e colunas de células.
CSS: Cascade Style Sheets
ou simplesmente “estilos”, é uma linguagem de folha de estilo utilizada para descrever a semântica da apresentação (o visual e formatação) de um documento escrito em uma linguagem de marcação
A gura 11 apresenta um exemplo de uma tabela contendo três colunas e duas linhas.
Figura 11 - Tabela com células mescladas
Fonte: autor
A estrutura da tabela apresentada na gura 11, que possui quatro linhas e quatro colunas, foi desenvolvida através dos seguintes comandos: • ...
: elemento que delimita a tabela. Este elemento possui alguns atributos que conguram a tabela, como segue:
Aula 2 - Linguagem HTML
31
Rede e-Tec Brasil
– border: este atributo informa a largura da borda da tabela. – summary: atributo que permite ao desenvolvedor informar um texto
que representa o sumário para a tabela, ou seja, seu signicado. Alguns agentes de HTML podem utilizar tal sumário para informações adicionais aos usuários – width: largura da tabela. – cellpadding: espaço (em pixels) entre o conteúdo da célula e a borda – cellspacing: espaço entre as células
• ...: elemento que desenha um título na tabela. Através do exemplo pode-se notar que o título é escrito no topo, antes do início da tabela • ...: elemento que delimita uma linha na tabela • ...: elemento que indica uma célula • ...: tem o mesmo efeito do elemento , porém indica uma célula de título, exibindo o conteúdo centralizado e enfatizado (por padrão) O desenvolvedor sempre deverá seguir a ordem da estrutura acima para se denir uma tabela: células ( ou ) dentro de linhas (). Uma questão interessante que pode ser notada no exemplo da gura 11 é que três células de título estão mescladas, ou seja, duas ocupam duas linhas e uma ocupa duas colunas. Este comportamento é denido através de atributos: •
colspan = “x”: indica que esta célula ocupará o mesmo espaço que “x”
colunas. •
rowspan = “y”: informa à célula que a mesma deverá ocupar o espaço
de “y” linhas. O desenvolvedor pode, ainda, denir alguns agrupamentos tanto para linhas como para colunas, melhorando assim a apresentação e a manipulação perante alguns programas. As seções seguintes apresentam tais tópicos.
Rede e-Tec Brasil
32
Programação para WEB
A parte interessante da WEB é que um conteúdo pode estar ligado a outro de uma forma super fácil: através de âncoras e ligações (links). Um texto, uma imagem ou mesmo um lme pode fazer este papel de ligação, e a próxima seção indica como!
2.5 Links: âncoras e ligações A linguagem HTML foi criada principalmente para atender ao propósito de difundir a WEB que introduziu um novo conceito: documentos interativos e com hipertextos. Esta seção introduz o conceito de link (hiperlink, link WEB, ligação), que é o construtor básico de documentos hipertexto. Um link (ligação) é uma conexão de um recurso WEB para outro. Um link tem dois pontos, chamados de âncoras, e uma direção. Inicia na âncora “fonte” e aponta (termina) na âncora “destino”, a qual pode ser qualquer recurso WEB (imagens, clipes de vídeos, pedaços de som, programas, outro HTML, etc.).
O termo hipertexto foi criado por Theodore Nelson, na década de sessenta, e pode ser definido como um dos paradigmas básicos em que a teia mundial se baseia. Ele é uma espécie de texto multidimensional em que numa página trechos de texto se intercalam com referências a outras páginas.
para conhecer mais sobre hipertexto acesse: http://www. ime.usp.br/~is/abc/abc/ node9.html
Quadro 7 - Utilização do atributo target em uma âncora com link
Fonte: autor
No exemplo, o atributo target fará com que o arquivo inicial.html abra em um nova janela, ou “em branco”. As possibilidades para o atributo target são:
Aula 2 - Linguagem HTML
33
Rede e-Tec Brasil
• _blank: nova janela • _self: própria janela (atual) • _parent: janela “pai”, ou seja, aquela de onde a página atual foi chamada •
nome_do_frame: quando trabalhando com frames, o usuário poderá
identicar em qual frame o recurso deverá ser aberto. O desenvolvedor pode, ainda, fazer uma referência completa a outra página, identicando qual seção deverá ser acessada. O exemplo do quadro 8 indica tal correspondência. 1.
Quadro 8 - Ligação com outra página e seção utilizando # Fonte: autor
O exemplo indica que, ao clicar em “Denição de Xícara” o usuário será redirecionado ao site www.dicionario.com na seção “ xícara” diretamente, sendo que a página será apresentada em uma nova janela. O atributo title presente no exemplo indica um hint (dica) que aparecerá na tela quando o usuário passar o mouse sobre o link . Não apenas textos podem ser utilizados como referências visuais para ligações. Elementos como guras, divisões e outros objetos visuais podem ser utilizados para servir de referência a hyperlinks. Quão chata seria a internet se tivéssemos apenas textos para expor os conteúdos. É por isso que as imagens são tão importantes para a elaboração de qualquer conteúdo na WEB.
2.6 Inserção de imagens As características multimídia da linguagem HTML permitem aos desenvolvedores a inclusão de imagens, vídeos, applets (programas que são automaticamente baixados e executados na máquina do usuário) e outros documentos HTML nas páginas.
Rede e-Tec Brasil
34
Programação para WEB
Para inserir imagens, o desenvolvedor pode utilizar a tag
