80771551 linguagens-de-programacao-i-unisul-livro-completo-2010

2,853 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,853
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
67
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

80771551 linguagens-de-programacao-i-unisul-livro-completo-2010

  1. 1. Universidade do Sul de Santa CatarinaLinguagens de Programação I Disciplina na modalidade a distância Palhoça UnisulVirtual 2010
  2. 2. CréditosUniversidade do Sul de Santa Catarina – Campus UnisulVirtual – Educação Superior a DistânciaAvenida dos Lagos, 41 – Cidade Universitária Pedra Branca | Palhoça – SC | 88137-900 | Fone/fax: (48) 3279-1242 e 3279-1271 | E-mail: cursovirtual@unisul.br | Site: www.unisul.br/unisulvirtualReitor Unisul Jefferson Amorin Oliveira Gestão Documental Bruno Augusto Zunino Relacionamento com o MercadoAilton Nazareno Soares José Olímpio Schmidt Lamuniê Souza (Coord.) Claudia Noemi Nascimento Eliza Bianchini Dallanhol Locks Marcelo Neri da Silva Clair Maria Cardoso Débora Cristina Silveira Walter Félix Cardoso Júnior Phelipe Luiz Winter da Silva Janaina Stuart da Costa Ednéia Araujo Alberto Vice-Reitor Priscila da Silva Josiane Leal Francine Cardoso da SilvaSebastião Salésio Heerdt Rodrigo Battistotti Pimpão Marília Locks Fernandes Karla F. Wisniewski Desengrini Gerência de Produção Ricardo Mello Platt Maria Eugênia Ferreira Celeghin Arthur Emmanuel F. Silveira (Gerente)   Maria Lina Moratelli Prado Francini Ferreira DiasChefe de Gabinete da Coordenação dos Cursos Mayara de Oliveira Bastos Secretaria de Ensino a Distância Patrícia de Souza AmorimReitoria Auxiliares das coordenações Karine Augusta Zanoni Design Visual Poliana Morgana SimãoWillian Máximo Fabiana Lange Patricio (Secretária de Ensino) Priscila Machado Pedro Paulo Alves Teixeira (Coord.) Maria de Fátima Martins Giane dos Passos Adriana Ferreira dos Santos Tânia Regina Goularte Waltemann (Secretária Acadêmica) Alex Sandro XavierPró-Reitora Acadêmica Alessandro Alves da Silva Gerência de Desenho Alice Demaria SilvaMiriam de Fátima Bora Rosa Andréa Luci Mandira Anne Cristyne Pereira Coordenadores Graduação e Desenvolvimento de Diogo Rafael da Silva Cristina Mara Shauffert Adriana Santos Rammê Djeime Sammer Bortolotti Materiais Didáticos Edison Rodrigo Valim Adriano Sérgio da Cunha Márcia Loch (Gerente)Pró-Reitor de Administração Aloísio José Rodrigues Douglas Silveira Frederico TrilhaFabian Martins de Castro Fabiano Silva Michels Higor Ghisi Luciano Ana Luisa Mülbert Jordana Paula Schulka Ana Paula R. Pacheco Felipe Wronski Henrique Acessibilidade Janaina Conceição Vanessa de Andrade Manoel (Coord.) Nelson Rosa Bernardino José da Silva Patrícia Fragnani de MoraisPró-Reitor de Ensino Carmen Maria C. Pandini Jean Martins Bruna de Souza RachadelMauri Luiz Heerdt Catia Melissa S. Rodrigues Luana Borges da Silva Letícia Regiane Da Silva Tobal Charles Cesconetto Luana Tarsila Hellmann Multimídia Diva Marília Flemming Maria José Rossetti Sérgio Giron (Coord.)Campus Universitário de Miguel Rodrigues da Silveira Junior Desenho Educacional Eduardo Aquino Hübler Carmen Maria Cipriani Pandini Cristiano Neri Gonçalves RibeiroTubarão Eliza B. D. Locks Monique Tayse da Silva Dandara Lemos Reynaldo Patricia A. Pereira de Carvalho (Coord. Pós)Diretora Fabiano Ceretta Carolina Hoeller da S. Boeing Fernando Gustav Soares Lima Patricia Nunes MartinsMilene Pacheco Kindermann Horácio Dutra Mello Paulo Lisboa Cordeiro (Coord. Ext/DAD) Sérgio Freitas Flores Itamar Pedro Bevilaqua Silvana Souza da Cruz (Coord. Grad.) Jairo Afonso Henkes Rafaela Fusieger Rosângela Mara Siegel Ana Cláudia Taú PortalCampus Universitário da Janaína Baeta Neves Silvana Henrique Silva Cristina Klipp de Oliveira Rafael Pessi (Coord.)Grande Florianópolis Jardel Mendes Vieira Eloisa Machado Seemann Joel Irineu Lohn Vanilda Liordina Heerdt Luiz Felipe Buchmann FigueiredoDiretor Flávia Lumi MatuzawaHércules Nunes de Araújo Jorge Alexandre N. Cardoso Gabriella Araújo Souza Esteves José Carlos N. Oliveira Gerência Administrativa e Giovanny Noceti Viana Comunicação José Gabriel da Silva Jaqueline Cardozo Polla Marcelo Barcelos José Humberto D. Toledo FinanceiraCampus Universitário Renato André Luz (Gerente) Lis Airê Fogolari Andreia Drewes Joseane Borges de Miranda Lygia Pereira Carla Fabiana Feltrin RaimundoUnisulVirtual Luciana Manfroi Naiara Jeremias da RochaDiretora Valmir Venício Inácio Luiz Henrique Milani Queriquelli Marciel Evangelista Catâneo Marina Cabeda Egger MoellwaldJucimara Roesler Maria Cristina Veit Marina Melhado Gomes da Silva Produção Industrial Maria da Graça Poyer Francisco Asp (Coord.) Gerência de Ensino, Pesquisa Melina de la Barrera Ayres Ana Paula Pereira Mauro Faccioni Filho e Extensão Michele Antunes CorreaEquipe UnisulVirtual Moacir Fogaça Nágila Cristina Hinckel Marcelo Bittencourt Moacir Heerdt (Gerente) Myriam Riguetto Aracelli Araldi Hackbarth Roberta de Fátima Martins Nélio Herzmann Sabrina Paula Soares ScarantoDiretora Adjunta Onei Tadeu Dutra Elaboração de Projeto e Gerência Serviço de Atenção Viviane Bastos Integral ao AcadêmicoPatrícia Alberton Raulino Jacó Brüning Reconhecimento de Curso Rogério Santos da Costa Diane Dal Mago James Marcel Silva Ribeiro (Gerente) Rosa Beatriz M. Pinheiro Vanderlei Brasil Gerência de LogísticaSecretaria Executiva e Cerimonial Tatiana Lee Marques Jeferson Cassiano A. da CostaJackson Schuelter Wiggers (Coord.) Extensão Atendimento Thiago Coelho Soares (Gerente) Maria Isabel Aragon (Coord.)Bruno Lucion Roso Valnei Campos Denardin Maria Cristina Veit (Coord.) Andrei Rodrigues Andiara Clara FerreiraMarcelo Fraiberg Machado Roberto Iunskovski PesquisaTenille Catarina André Luiz Portes Rose Clér Beche Daniela Will (Coord. PUIP, PUIC, PIBIC) Bruno Ataide Martins Rodrigo Nunes Lunardelli Mauro Faccioni (Coord. Nuvem) Logística de Encontros Presenciais Graciele Marinês Lindenmayr (Coord.) Holdrin Milet BrandaoAssessoria de Assuntos Pós-Graduação Ana Paula de Andrade Jenniffer CamargoInternacionais Coordenadores Pós-Graduação Maurício dos Santos AugustoMurilo Matos Mendonça Clarissa Carneiro Mussi (Coord.) Cristilaine Santana Medeiros Aloisio Rodrigues Daiana Cristina Bortolotti Maycon de Sousa Candido Anelise Leal Vieira Cubas Edesio Medeiros Martins Filho Sabrina Mari Kawano GonçalvesAssessoria DAD - Disciplinas a Bernardino José da Silva Biblioteca Fabiana Pereira Vanessa TrindadeDistância Carmen Maria Cipriani Pandini Soraya Arruda (Coord.) Fernando Oliveira Santos Orivaldo Carli da Silva JuniorEnzo de Oliveira Moreira (Coord.) Daniela Ernani Monteiro Will Paula Sanhudo da Silva Fernando SteimbachCarlos Alberto Areias Giovani de Paula Renan Felipe Cascaes Marcelo Jair Ramos Rodrigo Martins da Silva EstágioFranciele Arruda Rampelotti Karla Leonora Nunes Jonatas Collaço de Souza (Coord.)Luiz Fernando Meneghel Luiz Otávio Botelho Lento Juliana Cardoso da Silva Thiago Coelho Soares Logística de Materiais Capacitação e Assessoria ao Carlos Eduardo D. da Silva (Coord.) Micheli Maria Lino de Medeiros Vera Regina N. Schuhmacher Docente Priscilla Geovana PaganiAssessoria de Inovação e Abraão do Nascimento GermanoQualidade da EaD Angelita Marçal Flores (Coord.) Fylippy Margino dos SantosDênia Falcão de Bittencourt (Coord.) Gerência Administração Adriana Silveira Guilherme Lentz Alexandre Wagner da Rocha ProuniRafael Bavaresco Bongiolo Acadêmica Pablo Farela da Silveira Tatiane Crestani Trentin (Coord.) Márcia Luz de Oliveira (Gerente) Cláudia Behr Valente Rubens Amorim Elaine Cristiane Surian Gisele Terezinha Cardoso Ferreira Fernanda Farias Scheila Cristina MartinsAssessoria de Relação com Poder Juliana Cardoso EsmeraldinoPúblico e Forças Armadas Patrícia da Silva Meneghel Taize MullerAdenir Siqueira Viana Financeiro Acadêmico Gerência de Marketing Simone Perroni da Silva Zigunovas Fabiano Ceretta (Gerente) Marlene Schauffer Alex Fabiano Wehrle Rafael Back Monitoria e SuporteAssessoria de Tecnologia Rafael da Cunha Lara (Coord.) Sheyla Fabiana Batista GuerrerOsmar de Oliveira Braz Júnior (Coord.) Vilmar Isaurino Vidal Victor Henrique M. Ferreira (África) Anderson da SilveiraFelipe Jacson de Freitas Angélica Cristina Gollo
  3. 3. Patrícia Gerent PetryLinguagens de Programação I Livro didático Revisão e atualização Clavison Martinelli Zapelini Design instrucional Leandro Kingeski Pacheco Melina de la Barrera Ayres 3ª edição revista e atualizada Palhoça UnisulVirtual 2010
  4. 4. Copyright © UnisulVirtual 2010Nenhuma parte desta publicação pode ser reproduzida por qualquer meio sem a prévia autorização desta instituição. Edição – Livro Didático Professor Conteudista Patricia Gerent Petry Revisão e Atualização Clavison Martinelli Zapelini (3ª ed. rev. e atual.) Design Instrucional Leandro Kingeski Pacheco Melina de la Barrera Ayres (3ª ed. rev. e atual.) Assistente Acadêmico Sabrina Paula Soares Scaranto (3ª ed. rev. e atual.) Lygia Pereira (3ª ed. rev. e atual.) Projeto Gráfico e Capa Equipe UnisulVirtual Diagramação Rafael Pessi Anne Cristyne Pereira (3ª ed. rev. e atual.) Revisão Amaline Boulus Issa Mussi (3ª ed. rev. e atual.) 005.133 P59 Petry, Patrícia Gerent Linguagens de programação I : livro didático / Patrícia Gerent Petry ; revisão e atualização Clavison Martinelli Zapelini ; design instrucional Leandro Kingeski Pacheco, Melina De La Barrera Ayres ; [assistente acadêmico Sabrina Paula Soares Scaranto, Lygia Pereira]. – 3. ed. rev. e atual. – Palhoça : UnisulVirtual, 2010. 310 p. : il. ; 28 cm. Inclui bibliografia. 1. Linguagem de programação (Computadores). 2. HTML (Linguagem de programação de computador). I. Zapelini, Clavison Martinelli. II. Pacheco, Leandro Kingeski. III. Ayres, Melina De La Barrera. IV. Scaranto, Sabrina Paula Soares. IV. Pereira, Lygia. V. Título. Ficha catalográfica elaborada pela Biblioteca Universitária da Unisul
  5. 5. SumárioApresentação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7Palavras da professora . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9Plano de estudo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11UNIDADE 1 – Conceitos básicos pertinentes à linguagem de programação HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17UNIDADE 2 – Introdução à HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37UNIDADE 3 – Listas e Vínculos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69UNIDADE 4 – Mais formatação em HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99UNIDADE 5 – Uso de Imagens, Painéis de Fundo e Arquivos de Música . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123UNIDADE 6 – Tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153UNIDADE 7 – Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185UNIDADE 8 – Desenvolvendo páginas eficientes . . . . . . . . . . . . . . . . . . . . . . . . . . 215UNIDADE 9 – Folhas de Estilo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239UNIDADE 10 – Criação de Formulários . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269Para concluir o estudo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301Referências . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303Sobre a professora conteudista . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305Respostas e comentários das atividades de autoavaliação . . . . . . . . . . . . . . . . . 307Biblioteca Virtual . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309
  6. 6. ApresentaçãoEste livro didático corresponde à disciplina Linguagens deProgramação I.O material foi elaborado visando a uma aprendizagem autônomae aborda conteúdos especialmente selecionados e relacionadosà sua área de formação. Ao adotar uma linguagem didáticae dialógica, objetivamos facilitar seu estudo a distância,proporcionando condições favoráveis às múltiplas interações e aum aprendizado contextualizado e eficaz.Lembre que sua caminhada nesta disciplina será acompanhadae monitorada constantemente pelo Sistema Tutorial daUnisulVirtual. Neste sentido a expressão “a distância”caracteriza, somente, a modalidade de ensino pela qual optoupara sua formação, pois, na relação de aprendizagem, professorese instituição estarão sempre conectados com você.Então, sempre que sentir necessidade entre em contato. Você temà disposição diversas ferramentas e canais de acesso, tais como:telefone, e-mail e o Espaço Unisul Virtual de Aprendizagem,que é o canal mais recomendado, pois tudo o que for enviado erecebido fica registrado para seu maior controle e comodidade.Nossa equipe técnica e pedagógica terá o maior prazer em lheatender, pois sua aprendizagem é o nosso principal objetivo.Bom estudo e sucesso!Equipe UnisulVirtual
  7. 7. Palavras da professoraCaro(a) Aluno(a)!Você já deve ter passado boa parte de seu tempo explorandoa web, e é provável que já esteja familiarizado(a) com a maiorparte do conteúdo deste livro. Com ele, vamos aprendera escrever páginas para a web. Talvez você até já tenharealizado isto em alguma oportunidade. Muitos dos conteúdosprovavelmente serão cansativos para você. Mas não deixe deler e participar, contribuindo assim para o bom andamento daDisciplina.Aqui você encontrará tudo que precisa para criar uma páginaestática na web. Digo estática, porque, aqui, ainda nãoaprenderemos a tornar as páginas dinâmicas, como existemem muitos sites já visitados por você (por exemplo, realizar umcadastro em um banco de dados, via web). Iremos aprendercomo criar uma página HTML, disponibilizá-la na web, criarvínculos, incluir imagens, etc.Este livro trata de detalhes técnicos básicos para a criação deum site na web. Você aprenderá por que deve produzir umefeito em particular em uma página, quando deve usá-lo ecomo. Neste livro, você também encontrará dicas, sugestões emuitos exemplos de como estruturar sua apresentação, e nãosimplesmente o texto em cada página. Ou seja, o livro darádicas para uma boa apresentação de um site na web.Trabalhar com desenvolvimento para a web é gratificante,pois sabemos que uma das características mais interessantesda internet é a oportunidade que todas as pessoas têm dedisseminar informações. Portanto disponibilizar informaçõesna web será o nosso foco. Espero que você se anime e se divirtabastante, enquanto estuda. Vamos lá?Bons estudos!Professora Patrícia Gerent Petry
  8. 8. Plano de estudoO plano de estudos visa a orientá-lo(a) nodesenvolvimento da disciplina. Possui elementos que o(a)ajudarão a conhecer o contexto da disciplina e a organizaro seu tempo de estudos.O processo de ensino e aprendizagem na UnisulVirtualleva em conta instrumentos que se articulam e secomplementam, portanto a construção de competênciasse dá sobre a articulação de metodologias e por meio dasdiversas formas de ação/mediação.São elementos desse processo: „„ o livro didático; „„ o Espaço UnisulVirtual de Aprendizagem (EVA); „„ as atividades de avaliação (complementares, a distância e presenciais); „„ o Sistema Tutorial.EmentaApresentação das principais linguagens de programaçãoe ferramentas para desenvolvimento de sites. Estudo deHTML. Desenvolvimento de sites estáticos. Tabelas,frames, formulários, imagens, som, vídeo e links. Estilos defontes e definição de conteúdos. Implementação de sites eseus respectivos testes, avaliação e manutenção.
  9. 9. Universidade do Sul de Santa Catarina Carga Horária A carga horária total da disciplina é de 120 horas-aula, 8 créditos, incluindo o processo de avaliação. Objetivos Gerais Esta Disciplina tem por objetivo fornecer um estudo sobre a linguagem básica utilizada para a criação de páginas na internet: HTML (HyperText Markup Language). Serão abordados os conceitos básicos e avançados da linguagem. Específicos „„ Apresentar o funcionamento da web. „„ Descrever os principais conceitos referentes à HTML. „„ Conhecer alguns editores de HTML. „„ Definir o que são tags HTML. „„ Identificar as tags e a estrutura geral de uma página HTML. „„ Aprender a criar listas. „„ Aprender a criar vínculos em HTML. „„ Proporcionar formatações em parágrafos e textos HTML. „„ Trabalhar com imagens em páginas da web. „„ Utilizar tabelas. „„ Construir frames. „„ Proporcionar a criação de folhas de estilos. „„ Elaborar um layout adequado para as suas páginas em HTML. „„ Criar formulários. „„ Verificar elementos e atributos HTML obsoletos.12
  10. 10. Linguagens de Programação IConteúdo programático/objetivosOs objetivos de cada unidade definem o conjunto deconhecimentos que você deverá deter para o desenvolvimento dehabilidades e competências necessárias à sua formação. Nestesentido, veja, a seguir, as unidades que compõem o livro didáticodesta Disciplina, bem como os seus respectivos objetivos.Unidades de estudo: 10Unidade 1 – Conceitos básicos pertinentes à linguagem de programaçãoHTMLEsta unidade pretende descrever o que é a internet, revendo seusconceitos. Como funciona a web, definindo o que é HTML ecomo editar documentos HTML.Unidade 2 – Introdução à HTMLNesta unidade, você iniciará a criação de páginas web. Aprenderáa estruturar o código HTML e a utilizar os tags.Unidade 3 – Listas e VínculosNesta unidade, você criará diversos tipos de listas possíveis.Saberá como inserir um comentário em seu código HTML ecomo incluir vínculos entre o texto e as páginas da web.Unidade 4 – Mais formatação em HTMLNesta unidade, você distinguirá os diferentes estilos de caracter.Saberá como formatar e utilizar as tags <blink> e <marquee>. 13
  11. 11. Universidade do Sul de Santa Catarina Unidade 5 – Uso de Imagens, Painéis de Fundo e Arquivos de Áudio Nesta unidade, você utilizará a tag <img> e seus atributos. Fará referência de hipertexto com imagem. Criará painéis de fundo com imagens. Além disso, serão abordadas sugestões para um melhor uso das imagens e técnicas para manipulação de arquivos de áudio. Unidade 6 – Tabelas Nesta unidade, você criará as tabelas e seus elementos básicos: alinhamento da tabela e das células, dimensões e cor. Unidade 7 – Frames Nesta unidade, você construirá frames com o elemento FRAMESET, aprenderá suas aplicações e cuidados no uso. Fará links com frames. Realizará a composição dos frames e distinguirá os atributos de frameset e frame. Unidade 8 – Desenvolvendo páginas eficientes Na unidade 8, você desenvolverá páginas eficientes. Saberá como utilizar as extensões de HTML, como realizar o projeto e layout da página e como usar os vínculos. Nesta unidade, também encontrará sugestões de bons hábitos e conhecerá atributos HTML em desuso. Unidade 9 – Folhas de Estilo Nesta unidade, você saberá o que são as folhas de estilos e a sintaxe SCC. Aprenderá os tipos de definição de estilos e a ordem da cascata.14
  12. 12. Linguagens de Programação IUnidade 10 – Criação de FormuláriosNesta unidade, você criará formulários. Usará campos de entradade texto; seleções - listas de opções; botões de rádio, caixas devalidação e botões de envio. Você verá, também, um exemplocompleto de formulário.Agenda de atividades/ Cronograma „„ Verifique com atenção o EVA, organize-se para acessar periodicamente o espaço da Disciplina. O sucesso nos seus estudos depende da priorização do tempo para a leitura; da realização de análises e sínteses do conteúdo; e da interação com os seus colegas e professor. „„ Não perca os prazos das atividades. Registre no espaço a seguir as datas, com base no cronograma da disciplina disponibilizado no EVA. „„ Use o quadro para agendar e programar as atividades relativas ao desenvolvimento da Disciplina. 15
  13. 13. Universidade do Sul de Santa Catarina Atividades obrigatórias Demais atividades (registro pessoal)16
  14. 14. 1unidade 1Conceitos básicos pertinentes àlinguagem de programação HTML Objetivos de aprendizagem n Rever conceitos importantes sobre Internet. n Conhecer HTML. n Conhecer alguns editores de HTML existentes. Seções de estudo Seção 1 O que é a Internet Seção 2 Como funciona a web Seção 3 Afinal o que é HTML? Seção 4 Edição de documentos HTML
  15. 15. Universidade do Sul de Santa Catarina Para início de estudo Caro(a) aluno(a), antes de você iniciar seus estudos sobre linguagem de programação I, vamos relembrar alguns conceitos já estudados. Uma das características mais interessantes da Internet é a oportunidade que todos os usuários têm de disseminar informações. Tanto um vencedor do prêmio Nobel quanto um estudante do primeiro ano de faculdade contam com os mesmos canais de distribuição para expressar suas ideias. Com o surgimento da World Wide Web, esse meio só foi enriquecido. O conteúdo da rede ficou mais atraente com a possibilidade deA World Wide Web (Teia de AlcanceMundial) é o nome dado à rede incorporar imagens e sons. Um novo sistema de localização dede servidores da Internet que arquivos criou um ambiente em que cada informação tem ummantém documentos hipermídia endereço único e pode ser encontrada por qualquer usuário dainterligados entre si por hiperlinks rede.os quais formam uma grande teiade informações espalhadas pelo A evolução da internet é constante. Atualmente, a evoluçãomundo. A WWW foi a grande mais marcante é a preconizada WEB 2.0, que melhorou muitoresponsável pela popularização daInternet, oferecendo um método o carregamento de páginas dinâmicas com a substituição domais intuitivo de pesquisar e simples HTML pelo XHTML e a utilização de AJAX. Essesconsultar informações na grande conceitos serão abordados de forma mais aprofundada na unidaderede. 7. Na prática, não existe nenhuma diferença entre as páginas de uma grande empresa na web e as páginas que você irá produzir. Ambas podem ser acessadas com a mesma facilidade. A diferença é uma só: a criatividade. Este livro tem o objetivo de fornecer as ferramentas básicas para exercitar a criatividade na web. Será preciso, então, aprender um pouco de HTML (HyperText Markup Language), a linguagem utilizada para criar as páginas. Você também vai encontrar uma porção de dicas, truques e exemplos. Seção 1 - O que é a Internet Muito provavelmente, você já estudou a internet. Antes de iniciar os estudos, escreva aqui: O que você entende por internet?18
  16. 16. Linguagens de Programação IExistem muitos termos que tentam definir a Internet.Superestrada da informação, preferem os políticos. Rede deredes, insistem os cientistas. O certo é que cada um dessesgrupos prefere ver a rede segundo seus próprios interesses. Paraos políticos, uma nova fronteira de construção e investimentoscoletivos é um desafio. Já os cientistas, rigorosos em suasdefinições, enxergam a virtude da Internet em conectarcomputadores de qualquer tipo em todo o globo.As visões distintas da rede não param por aí. Há quem vejana Internet uma perigosa fonte de pornografia. As indústriassonham com o dia em que poderão vender diretamente aosconsumidores, sem nenhum intermediário. Empresas decomunicação esperam o meio que reúna rádio, TV e televisão emum mesmo sistema de produção. Pais de estudantes no exteriormatam as saudades pelo monitor, e paqueras virtuais acontecem atoda hora, em cada canto da rede.A Internet é tudo isso ao mesmo tempo e, com certeza, muitomais. A rede é o que cada pessoa quiser que ela seja. Em todaa história da Internet, foram os usuários que inventaram novosrecursos e novas aplicações. É um terreno fértil para boas ideias,e, ao mesmo tempo, perigoso, quando utilizado para fins ilícitos. Unidade 1 19
  17. 17. Universidade do Sul de Santa Catarina Isso tudo porque a Internet é uma invenção muito simples. Nada mais é do que uma forma fácil e barata de fazer com que computadores distantes possam se comunicar. A partir daí, a revolução está nas mãos das pessoas. Cada usuário recebe uma identificação única, conhecida como endereço. Com esse endereço, ele pode se comunicar, enviando mensagens para outras pessoas. É o que se chama de correio eletrônico. Graças aos esforços de instituições como Universidades e empresas ligadas à pesquisa, dispostas a investir dinheiro e pessoal para criar e manter os pontos principais da rede - os servidores (computadores de alto desempenho) - é possível conseguir programas de graça e consultar bancos de dados públicos. Hoje, com o sucesso da Internet, toda empresa se vê na obrigação de colocar a cara na rede. Os serviços se multiplicam. Os bancos oferecem todas as suas operações pelo computador. Notícias são distribuídas imediatamente. Pizzarias aceitam pedidos. Livrarias e lojas de discos vendem seus produtos. No entanto boa parte do material da rede é produzida por indivíduos que desejam expressar ao mundo suas preferências. Um usuário reúne tudo que tinha sobre Jornada nas Estrelas e coloca na Internet. Outro, com objetivos mais práticos, escreve um currículo e espera que seus talentos sejam descobertos. Qualquer pessoa que um dia sentiu vontade de compartilhar suas façanhas, agora pode fazer isso. O tal terreno fértil da Internet tem um nome. Chama-se World Wide Web ou apenas web. Seção 2 - Como funciona a web A web funciona basicamente com dois tipos de programas: os clientes e os servidores. O cliente é o programa utilizadoO navegador é usado para pelos usuários para ver as páginas, enquanto os servidores ficamexibir páginas da web e outras responsáveis por armazenar o conteúdo da rede e permitirinformações disponíveis na world o acesso a ele. Neste livro, chamamos o programa clientewide web e navegar por elas. de navegador (browser, em inglês). O que o navegador faz é20
  18. 18. Linguagens de Programação Irequisitar um arquivo para um servidor. Se a informação pedidaestiver realmente armazenada naquele servidor, o pedido seráenviado de volta e mostrado na tela do navegador. Você tem ideia de como a informação na web é organizada?A informação na web é organizada na forma de páginas,que podem conter texto, imagens, sons e, mais recentemente,pequenos programas. Além disso, as páginas da web podem serligadas umas com as outras, formando o que se chama de umconjunto de hipertextos. Assim, é possível, por exemplo, que umtrabalho de faculdade faça referência direta a um texto que serviu Um exemplo de páginasde base para o estudo. O leitor interessado na fonte de pesquisa que utilizam hipertextospode saltar imediatamente para o texto original. Desta forma, pode ser visualizados em:qualquer documento pode levar a um outro texto que também <http://pt.wikipedia.org/esteja disponível na rede. A possibilidade de criar uma “malha” wiki/Internet>. Acesso em 1ºmar.2010.de informação em torno do planeta deu origem ao nome WorldWide Web, que significa “teia de alcance mundial”.A web é um sistema de informação em hipertexto. Os sistemas deajuda on-line utilizam hipertextos para apresentar informações.A figura 1.1 a seguir mostra um diagrama simples de comofunciona esse tipo de sistema. Ajuda Tópico um Ajuda no Tópico dois Tópico dois SubTópico um Ajuda no SubTópico dois Tópico três SubTópico dois Ajuda detalhada SubTópico três Mais detalhes Milhões de detalhesFigura 1.1 – Sistema de ajuda on-line. Unidade 1 21
  19. 19. Universidade do Sul de Santa Catarina Você Sabia? Hipertexto é um sistema para a visualização de informação cujos documentos contêm referências internas para outros documentos (chamadas de hiperlinks ou, simplesmente, links), e para a fácil publicação, atualização e pesquisa de informação. O sistema de hipertexto mais conhecido atualmente é a World Wide Web. O hipertexto permite que você leia um texto e navegue por ele e por informações visuais não lineares, com base nas informações que deseja obter em seguida. O Link ou Hiperlink é um dos principais elementos de um hipertexto, pois permite a conexão de uma página com informações a outra previamente definida, geralmente contendo um assunto correlato. Nas páginas WWW, os hiperlinks aparecem como palavras em destaque, normalmente sublinhadas e de cor diferente do restante do texto, e são acionados clicando-se sobre eles com o mouse. A web é gráfica e fácil de ser navegada Antes da web, o uso da internet envolvia conexões simples de textos. Você tinha de navegar pelos vários serviços da internet, utilizando interfaces de linha de comandos e ferramentas rudimentares. Embora houvesse muitas informações realmente interessantes na internet, ela não tinha um aspecto agradável. A web fornece recursos de imagem, som e vídeo que podem ser incorporados ao texto, e os softwares mais recentes oferecem novos recursos para multimídia e aplicativos incorporados. E o mais importante é que a interface de todos esses recursos é de fácil navegação – basta saltar de vínculo em vínculo, de página em página, passando por sites e servidores. Se a web incorpora muito mais do que texto, por que é chamada de sistema de hipertexto? Não deveria ser um sistema de hipermídia? Muitos autores discutem o assunto. Muitos argumentam que a web começou com um sistema de textos e que a maior parte de seu conteúdo ainda é, basicamente, composta de textos, com partes extras de mídias.22
  20. 20. Linguagens de Programação IA web é distribuídaSabemos que as informações ocupam muito espaço, especialmentequando você inclui imagens, sons, vídeos. Para armazenar todas asinformações que a web fornece, você precisa de um espaço enormeem disco, e seria quase impossível gerenciá-las.A web consegue fornecer um volume tão grande de informações,porque elas estão distribuídas, globalmente, por milhares de sites,cada qual contribuindo com o espaço necessário às informações Site da web é um local naque divulga. web que divulga algum tipo de informação. Quando você exibe uma página da web, o seuA web é dinâmica navegador se conecta aComo as informações da web estão contidas no site que as esse site da web para obter essas informações.divulgou, as pessoas que as publicaram, originalmente, podematualizá-las de forma instantânea, a qualquer momento. Paraobter informações atualizadas, basta usar o seu navegador paranavegar pelas informações e verificar o que há de novo.A web é independente de plataformaO termo independente de plataforma significa que você podeacessar as informações disponíveis na web a partir de qualquercomputador, sistema operacional e monitor de vídeo.Você tem acesso à web através de um aplicativo denominadonavegador (browser), como o Netscape Navigator, InternetExplorer, Mozilla Firefox ou Google Chrome. Você pode encontrarmuitos desses navegadores para a maioria dos sistemascomputacionais existentes. E, depois que tiver um navegador euma conexão com a internet, você terá alcançado seu objetivo:você estará na web. Unidade 1 23
  21. 21. Universidade do Sul de Santa Catarina A ideia de que a web é independente de plataforma não é sustentada por todos. Com a introdução de novos recursos, tecnologias e tipos de mídia, a web está perdendo parte de sua capacidade de ser verdadeiramente independente de plataforma. À medida que os autores da web optam por usar esses recursos mais recentes, eles voluntariamente limitam o público potencial para seus sites. A web é interativa Interatividade é a capacidade de “responder” ao servidor web. A web é interativa por natureza. O ato de selecionar um vínculo e acessar outra página da web para ir a outro local na web é uma forma de interatividade. Além disso, ela permite que você se comunique com o autor das páginas que está lendo e com outros leitores dessas páginas. Os navegadores da web Conforme você estudou anteriormente, os usuários circulam por essa teia com um programa chamado navegador, que é o programa que você utiliza para exibir páginas pela world wide web. Esse programa envia pedidos de páginas pela rede e as apresenta na tela do usuário. Existem vários navegadores da web, praticamente para todas as plataformas que você possa imaginar, desde sistemas baseados em GUI (Mac, Windows), a sistemas de textos para conexões UNIX. Os navegadores mais conhecidosGUI = Interface Gráfica com o Usuário são o Netscape Navigator, o Microsoft Internet Explorer, Mozilla Firefox ou Google Chrome. A opção de desenvolver programas para um navegador específico é conveniente, quando você sabe que o seu site da web vai ser visto por um público limitado. Esse tipo de desenvolvimento é uma prática comum em intranets implementadas em corporações. Neste livro, os exemplos realizados foram utilizados com o navegador Internet Explorer 5.0.24
  22. 22. Linguagens de Programação IOs servidores webPara que uma página esteja permanentemente disponível naweb, ela precisa ter um endereço fixo, alojada em um servidor.Este endereço é chamado URL (Uniform Resource Locator, numatradução literal, localizador uniforme de recursos).Os pedidos dos navegadores são atendidos por uma combinaçãode computadores e programas que formam os servidores. Essescomputadores e programas armazenam as páginas e podemexercer algum tipo de controle sobre quais usuários podemacessá-las. Os servidores são máquinas potentes instaladasem universidades, empresas e órgãos do governo, conectadospermanentemente à Internet. Também é possível montar umservidor de web em casa, com um computador pessoal.Apesar de poderem ser instalados em, praticamente, todos ostipos de computadores, os servidores devem estar conectados 24horas por dia na rede, para que os usuários possam requisitar aspáginas a qualquer momento. A melhor solução para montar umconjunto de páginas é procurar uma empresa que aluga espaçoem um servidor web.Existem vários provedores de espaço (hostings) gratuitos. Osprovedores de acesso à internet geralmente oferecem espaço paraos sites de seus assinantes. Sites com fins lucrativos são geralmentehospedados em provedores de espaço pagos.Definida a hospedagem, basta enviar para o provedor os arquivosde seu site (via FTP ou por uma página de envio no próprioprovedor de espaço), e suas páginas já estarão disponíveis paravisitas.O que é uma URLA web permitiu que cada documento na rede tenha um endereçoúnico, que indica o nome do arquivo, diretório, nome do servidore o método pelo qual ele deve ser requisitado. Esse endereço foichamado de URL. Toda URL apresenta uma estrutura básica.Acompanhe tal estrutura em função do exemplo seguinte: Unidade 1 25
  23. 23. Universidade do Sul de Santa Catarina Considere a seguinte URL: <http://www.unisul.br/aluno/aluno.html> Onde, http:// é o método pelo qual ocorrerá a transação entre cliente e servidor. HTTP (HyperText Transfer Protocol, ou protocolo de transferência de arquivos de hipertexto) é o método utilizado para transportar páginas de web pela rede. Outros métodos comuns são: ftp:// (para transferir arquivos), news:// (grupos de discussão) e mailto:// (para enviar correio eletrônico). www.unisul.br é o nome do servidor onde está armazenado o arquivo. Nem sempre o nome de um servidor de web inicia por www. Existem alguns com nomes como cs. dal. ca. /aluno/ é o diretório onde está o arquivo. Às vezes, uma URL indica apenas o diretório (ou o servidor). Neste caso, o servidor se encarrega de procurar e enviar o arquivo adequado. aluno.html é o nome do arquivo. A extensão .html indica que se trata de uma página web. Uma URL pode indicar outras extensões. Quando o navegador recebe um arquivo com a extensão .txt, o arquivo é tratado como um texto comum. Em outros casos, como nas extensões .zip (arquivo comprimido) e .exe (um programa), o navegador abre uma janela, perguntando ao usuário o que fazer com o arquivo. Esse endereço único de um documento pode ser utilizado pelo usuário para localizar um arquivo com o navegador. Nesse caso, o usuário deve preencher com o endereço uma janela do navegador conhecida como Endereço. A URL será enviada até o servidor, que tentará localizar o arquivo e enviá-lo para o usuário. Caso o arquivo não esteja disponível no servidor, o usuário receberá uma mensagem de erro. As URLs também são colocadas dentro de páginas de WWW para fazer referência a outras informações disponíveis na Internet. Neste caso, determinados itens (trechos de texto ou imagens) da página, conhecidos como links, como já visto, podem ser utilizados pelos usuários para saltar de um lugar a outro na rede. Os links podem estabelecer ligação com qualquer tipo de arquivo. Essa ligação entre os documentos é o que se chama de hipertexto.26
  24. 24. Linguagens de Programação ISeção 3 - Afinal o que é HTML? Para você publicar informações acessíveis a todos, você precisade uma linguagem entendida mundialmente, algo parecidocom uma linguagem padrão que todos os computadores possamentender. Como já dito, a linguagem utilizada para a WorldWide Web é a HTML (HyperText Markup Language – oulinguagem de formatação de hipertexto). O HTML é uma linguagem de marcação de texto ou dadorelativamente simples e que pode ser combinado com outraslinguagens de programação como: JSP, PHP, ASP, etc;podendo dar efeito dinâmico aos sites.O HTML permite: „„ publicar documentos on-line com texto, tabelas, fotografias e muito mais; „„ receber informações através de ligações (links) de hipertexto por meio de um clique; „„ desenhar formulários para transações comerciais através de serviços remotos, como para encontrar informação, fazer reservas, encomendar produtos, etc.; „„ e, ainda, incluir som, vídeo e muitas aplicações nos documentos.Breve histórico do HTMLO HTML foi originalmente desenvolvido por Tim Berners-Lee, quando estava no CERN, e tornou-se conhecido atravésdo Mosaic, um browser desenvolvido em NCSA. Durante osprimórdios dos anos 90, expandiu-se com a enorme explosãodo crescimento da WWW. Quando o HTML surgiu, a suaprincipal utilização era para descrever a informação, sendopredominantemente usado no meio científico para partilhardocumentos de forma universal e facilmente legível. Parágrafos,listas, cabeçalhos, títulos (os elementos principais do HTML)eram ideais para este tipo de documentação. Unidade 1 27
  25. 25. Universidade do Sul de Santa Catarina Posteriormente, o HTML foi expandido em vários caminhos. De 1990 a 1995, a linguagem HTML sofreu uma série de extensões por parte de diversos grupos e organizações: HTML 2.0 da IETF, HTML+, HTML 3.0. Em 1996, os esforços do grupo de trabalho do World Wide Web Consortium levaram ao aparecimento do standard HTML 3.2. Entretanto, o problema foi que a web ficou literalmente cheia de sites feitos com essas “criatividades” em HTML, que o puxaram para uma finalidade que não a original. Para acomodar os mais variados pedidos, as tags de apresentação (cor, fonte e alinhamento) foram usadas e abusadas, quando o principal propósito da linguagem era estruturar a informação. Muitos, em alguma fase, aproveitaram-se das aparentes facilidades desta versão do HTML e de browsers demasiado permissivos a erros. Muitas pessoas concordavam que os documentos HTML deveriam trabalhar bem, através de diferentes browsers e sistemas operacionais. Em 1997, surge o HTML 4.0, que é uma extensão do HTML 3.2, que permite a utilização de folhas de estilo (style sheets), mecanismos de scripts, frames, objetos incorporados e alguns mecanismos de acessibilidade para deficientes. Em 1999, o HTML 4.01 fixa certo número de erros e incongruências encontrados na recomendação anterior. Neste momento, em 1999, existe um consenso para a necessidade de se voltar um pouco atrás, preparando ao mesmo tempo o futuro. Um exemplo é a separação do conteúdo com a apresentação do documento, usando XHTML para o conteúdo e deixando a apresentação do documento a cargo de Cascading Style Sheets (CSS). Esta linguagem (XHTML) foi desenvolvida e aprovada com a recomendação do World Wide Web Consortium (W3C) em 2000, e é a sucessora do HTML 4.0. O XHTML nada mais é que o HTML escrito em XML (eXtensible Markup Language).28
  26. 26. Linguagens de Programação IVocê Sabia?World Wide Web Consortium (W3C)O World Wide Web Consortium é um consórcio de empresas detecnologia (atualmente cerca de 500 membros) fundado porTim Berners Lee, em 1994, para levar a web ao seu potencialmáximo, através do desenvolvimento de protocolos comunse fóruns abertos que promovam sua evolução e assegurema sua interoperabilidade. O W3C desenvolve tecnologiasdenominadas padrões da web para a criação e a interpretaçãodos seus conteúdos. Sites desenvolvidos segundo essespadrões podem ser acessados e visualizados por qualquerpessoa ou tecnologia, independente de hardware ousoftware utilizados, como celular, PDA, eletrodomésticos etc.,independentemente da plataforma, de maneira rápida ecompatível com os novos padrões e tecnologias que possamsurgir com a evolução da internet.Para alcançar seus objetivos, a W3C possui diversos comitêsque estudam as tecnologias existentes para a apresentação deconteúdo na Internet e criam padrões de recomendação parautilizar estas tecnologias. Com a padronização, os programasconseguem acessar facilmente os códigos e entenderonde deve ser aplicado cada conhecimento expresso nodocumento.Apesar do W3C não ser muito conhecido no Brasil, padrõesseus como HTML, eXtensible Hypertext Markup Language(XHTML) e Cascading Style Sheets (CSS) são muito populares.Contudo, em muitos casos, são usados de forma errôneadevido à falta de conhecimento de suas especificações.É um dever de todo desenvolvedor web respeitar e seguiros padrões do W3C, pois, de outro modo, poderá estarimpondo barreiras tecnológicas a diversas pessoas e, comisso, desestimulando e, até mesmo, impedindo o acesso a suaspáginas.O site oficial da W3C é http://www.w3c.org. Todas asatividades em desenvolvimento estão em inglês, mas vocêencontrará uma grande parte das especificações traduzidapara outras línguas. Unidade 1 29
  27. 27. Universidade do Sul de Santa Catarina Em suma, hoje em dia temos um HTML mais flexível, portátil e com um formato prático para dar forma aos documentos de Internet, que pode ser combinado com outras linguagens como Javascript, Flash e Java, tornando o documento muito mais interativo. Seção 4 - Edição de documentos HTML Agora que você conheceu um pouco da história do HTML e de suas novidades, vamos aprender como editar um documento HTML, além de efetuar uma breve introdução à linguagem HTML. Os documentos em HTML são como arquivos ASCII comuns, que podem ser editados em vi (no linux), emacs (no linux), textedit, bloco de notas, ou qualquer editor simples. Para facilitar a produção de documentos, existem editores HTML específicos: „„ Editores de texto fonte - facilitam a inserção das etiquetas (tags, como chamaremos), orientando o uso de atributos e marcações. Ex.: W3e, HotDog, Crimson Editor. Figura 1.2 - Tela do Crimson Editor30
  28. 28. Linguagens de Programação I „„ Editores WYSIWYG - oferecem ambiente de edição com “um” resultado final das marcações (pois o resultado final depende do browser usado para visitar a página). Ex.: FrontPage, Namo Editor, Dreamweaver.WYSIWYG é o acrônimo da expressão em inglês “What You SeeIs What You Get”, que pode ser traduzido para “O que você vê éo que você recebe”. Trata-se de um método de edição, no qual ousuário vê o objeto no momento da edição na tela do computador,já com a aparência do produto final.Um exemplo clássico de editor WYSIWYG é o Microsoft Word,no qual o documento é mostrado na tela da mesma forma queserá impresso. O criador do primeiro editor WYSIWYG, oBravo, foi Charles Simonyi.Na linguagem de programação para internet, um dos editoresé o Macromedia Dreamweaver, no qual qualquer pessoa, como mínimo de conhecimento em HTML, pode fazer muitorapidamente uma página ou até um site inteiro para internet. Figura 1.3 - Tela do Namo EditorAlém dos editores específicos para HTML, editores bastanteutilizados, como o Word, entre outros, permitem a exportação deseus documentos próprios para o formato HTML.O documento HTML produzido normalmente terá extensão.html ou .htm.Existem muitos editores de HTML gratuitos, como: „„ Html beauty: http://www.htmlbeauty.com/ Unidade 1 31
  29. 29. Universidade do Sul de Santa Catarina „„ PageBreeze: http://www.pagebreeze.com/ „„ Web writer: http://www.webwriter.dk/english/index.htm Introdução à linguagem HTML A linguagem HTML é fruto do “casamento” dos padrões HyTime e SGML. Estes padrões são especificados a seguir. „„ HyTime - Hypermedia/Time-based Document Structuring Language HyTime (ISO 10744:1992) – é o padrão para representação estruturada de hipermídia e informação baseada em tempo. Um documento é visto como um conjunto de eventos concorrentes dependentes de tempo (áudio, vídeo etc.), conectados por webs ou hiperlinks. O padrão HyTime é independente dos padrões de processamento de texto em geral. Ele fornece a base para a construção de sistemas hipertexto padronizados, consistindo-se de documentos que aplicam os padrões de maneira particular. „„ SGML - Standard Generalized Markup Language SGML é o 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. O SGML nã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. „„ DTD - Document Type Definition - define as regras de formatação para uma determinada classe de documentos. Um DTD ou uma referência para um DTD deve estar contido em qualquer documento conforme o padrão SGML. Neste sentido, o HTML é definido segundo um DTD de SGML.32
  30. 30. Linguagens de Programação ITodo documento HTML apresenta elementos entre < e >; esseselementos são as etiquetas (doravante chamadas de tags) deHTML, que são os comandos de formatação da linguagem, asquais podem ser escritas em maiúscula ou minúscula. A maioriadas tags tem sua correspondente de fechamento: <tag>...</tag>Isso é necessário, porque as tags servem para definir a formataçãode uma porção de texto e, assim, marcamos onde começa etermina o texto com a formatação especificada por ela.Alguns elementos são chamados “vazios”, pois não marcam umaregião de texto, apenas inserem algo no documento: <tag>Todos os elementos podem ter atributos: <tag atributo1=valor1 atributo2=valor2>...</tag>Os valores dos atributos devem estar entre aspas. <A HREF=”URL”>Texto</A> Unidade 1 33
  31. 31. Universidade do Sul de Santa Catarina Síntese Caro(a) aluno(a), você finalizou a unidade 1. Revisando alguns conceitos importantes: Internet, World Wide Web, clientes, servidores, hipertextos, Link ou Hiperlink, navegador, servidores, provedores de espaço (hostings) e URL. Você também aprendeu conceitos introdutórios de HTML, que é um recurso muito simples e acessível para a produção de documentos. Não podemos deixar de frisar a importância das tags em HTML. Por isso, segue abaixo uma tabela resumindo a morfologia das tags: Tipo Sintaxe Exemplo Tag <tag> <BR> Texto <tag>texto</tag> <B>texto</B> Atributo <tag NOME_ATRIBUTO=valor>texto</tag> <A HREF=”url”>texto</A> Nas próximas unidades, você estudará outros elementos do HTML, que lhe possibilitarão, com alguma imaginação, fazer um bom website. Até lá!34
  32. 32. Linguagens de Programação I Atividades de autoavaliação1. Faça uma pesquisa sobre alguns editores gratuitos de HTML na internet. Pontue vantagens e desvantagens. Na ferramenta FÓRUM do EVA, vamos discutir sobre os editores HTML encontrados. Saiba maisPara você aprimorar ainda mais seus conhecimentos acerca dostemas aprendidos nesta unidade, consulte a seguinte referência:PRATES, Rubens. HTML: guia de consulta rápida. São Paulo:Editora Novatec, 1997.E os seguintes sites:<http://www.abcdohtml.hpg.ig.com.br/> (Introdução ao HTML)<http://minerva.ufpel.edu.br/~bira/html/web.html> (Web Design) Unidade 1 35
  33. 33. 2unidade 2Introdução à HTML Objetivos de aprendizagem „„ Conhecer o que é HTML e a importância de utilizá-la. „„ Conhecer o que são as tags HTML e como utilizá-las. „„ Identificar as tags para a estrutura geral de uma página. „„ Identificar as tags para títulos, cabeçalhos e parágrafos. Seções de estudo Seção 1 Criação de páginas da web simples Seção 2 Estruture sua HTML Seção 3 Separadores Seção 4 Alinhamento de texto
  34. 34. Universidade do Sul de Santa Catarina Para início de estudo Depois de apresentarmos os conceitos iniciais, você deve estar se perguntando: quando é que vamos começar a criar uma página web? Afinal, este é um dos objetivos desta disciplina. Então, nesta unidade, você começa a conhecer a estrutura da HTML – a linguagem em que são criadas as páginas da web. Seção 1 - Criação de páginas da web simples Apesar da aparente sofisticação, as páginas web não passam de documentos de texto simples. Você pode produzi-las com qualquer editor de texto, como o bloco de notas do Windows. A diferença é que as páginas web contêm algumas marcas especiais para determinar o papel de cada elemento dentro do texto. Alguns elementos são marcados como títulos, outros como parágrafos. As marcações são usadas, também, para indicar os links que levam a outros documentos na rede. Essas marcas são chamadas de tags e estão especificadas dentro da linguagem utilizada para criar as páginas web, HTML. As tags de HTML apenas informam ao navegador o que são os elementos que estão na página. Eles dizem, por exemplo, que um determinado trecho é o título principal do documento e outro é um item de lista. A formatação do trecho é deixada para o navegador. Cada navegador mostra a página de uma forma um pouco diferente, o que dificulta o trabalho de programação visual na web. Para complicar ainda mais, cada usuário pode modificar a configuração padrão de seu navegador, para que o seu programa mostre o texto na fonte (tipo de caractere) que quiser. Em compensação, é muito simples criar uma página básica para colocar na internet, com HTML. Nesta unidade, você estudará um exemplo enxuto, que, aos poucos, ficará mais sofisticado.38
  35. 35. Linguagens de Programação ISeção 2 - Estruture sua HTMLNos exemplos a seguir, você irá verificar vários trechos de textomarcados por códigos colocados entre os caracteres < e >. Essescódigos, chamados de tags, são responsáveis pela marcação dotexto em função de seu papel dentro do documento. O títuloprincipal de um documento, por exemplo, pode ser marcadocom as tags <b> e </b> (coloca o texto em negrito), enquanto osparágrafos são separados pela tag <P>. Existem dois tipos detags. Algumas são formadas aos pares, indicando o início e ofim do trecho afetado, como o par <b> e </b>. Outras podem sercolocadas individualmente, como o <P>, que simplesmente insereum espaço para dividir parágrafos. Mais adiante, mostraremosque as tags também podem receber atributos.Tags básicasA estrutura básica de um documento HTML apresenta asseguintes tags: <HTML> <HEAD> <TITLE>Título do Documento</TITLE> </HEAD> <BODY> texto, imagem, links, ... </BODY> </HTML> Unidade 2 39
  36. 36. Universidade do Sul de Santa Catarina Observe que existem quatro pares de tags, que devem ser sempre colocados na página. O par de tags <HTML> e </HTML> deve englobar todo o conteúdo da página (estar presente no início e no fim do texto) para indicar ao navegador que se trata de um documento HTML. O documento, por sua vez, está dividido em duas partes: o cabeçalho e o corpo do texto, cada um indicado por um par de tags diferentes. Tudo que estiver entre o par <HEAD> e </HEAD> irá compor o cabeçalho, não aparecendo na página. O elemento principal do cabeçalho é o título do documento, que deve ser colocado entre o par <TITLE> e </TITLE>. Os navegadores mostram o título na barra de título do programa e na área em que aparecem as páginas já visitadas. Por fim, existe o par <BODY> e </BODY>, que serve para indicar o corpo do texto, ou seja, a parte mostrada na janela do navegador. As tags HTML não são sensíveis à caixa. Traduzindo: tanto faz escrever <HTML>, <Html>, <html>, <HtMl>, ... Veja, em detalhe, cada uma destas tags estruturais. <HTML> A primeira tag de estrutura de toda a página em HTML é a <html>, a qual indica que o conteúdo do arquivo encontra-se codificado na linguagem HTML. Para que o computador reconheça que você está escrevendo um documento em HTML, todo o seu conteúdo deverá ser delimitado pelas tags HTML de abertura e fechamento, como no exemplo: <HTML> .... a sua página ... </HTML>40
  37. 37. Linguagens de Programação I<HEAD>A tag <HEAD> e </HEAD> delimita o cabeçalho dodocumento. Geralmente há poucas tags na parte <HEAD>da página. Você nunca deve incluir no cabeçalho parte algumado texto de sua página. Além do título da página (< TITLE> ...</TITLE>), no cabeçalho são inseridas também tags utilizadaspara indexação do documento HTML e para relacionamento comdocumentos externos (javascript, CSS, etc...). Eis um exemplo típicode uso correto da tag <HEAD>: <HTML> <HEAD> <TITLE> ESTE É MEU TÍTULO </TITLE> </HEAD> </HTML>Campo <TITLE>O elemento <TITLE>, por exemplo, define um título, que émostrado no alto da janela do navegador. Todo documentoweb deve ter um título; este título é referenciado em buscas pelarede, dando uma identidade ao documento. Para ver na prática aimportância do título, se você adicionar uma página com títuloaos seus Favoritos (Bookmarks), o título da página se torna aâncora de atalho para ela. Por isso é sugerido que os títulos dosdocumentos sejam sugestivos, evitando-se títulos genéricos como“Introdução”. O título também é bastante significativo para alistagem de uma página nos resultados de pesquisas nos catálogosda internet.As tags <TITLE> são sempre incluídas no cabeçalho da página,entre as tags <HEAD> e </HEAD>, e descrevem o conteúdoda mesma como no exemplo anterior. Você pode ter apenas umtítulo na página, e o título pode conter somente texto simples,ou seja, não pode haver outras tags no título. Escolha um títulocurto, mas que descreva o conteúdo da página. Unidade 2 41
  38. 38. Universidade do Sul de Santa Catarina Campo <META> Além do título, <HEAD> contém outras informações de importância para os “robôs” de pesquisa, indicadas nos campos <META>. Os campos <META> têm dois atributos principais: „„ NAME , indicando um nome para a informação; „„ HTTP-EQUIV, que faz uma correspondência com campos de cabeçalho do protocolo HTTP; a informação deste campo pode ser lida pelos navegadores e provocar algumas ações. Os atributos são partes extras das tags da HTML que contêm opções ou outras informações sobre a tag em si. Acompanhe a sintaxe seguinte, como modelo de uso dosA Sintaxe refere-se às regras para atributos <META> (NAME e HTTP-EQUIV):a construção de um comando ouinstrução. <HEAD> <TITLE>Título do Documento</TITLE> <META NAME=”nome” CONTENT=”valor”> <META HTTP-EQUIV=”nome” CONTENT=”valor”> </HEAD>42
  39. 39. Linguagens de Programação IUm documento, por exemplo, pode ter as seguintes informações: <HEAD> <META HTTP-EQUIV=”content-type” CONTENT=”text/html; charset=iso-8859-1”> <TITLE>Título da Janela</TITLE> <META NAME= “Author” CONTENT=“Patrícia”> <META NAME=”Description” CONTENT=”Livro de Linguagem de Programação I”> <META NAME=”KeyWords” CONTENT=”HTML, WWW, Web, Internet”> <LINK REL=”stylesheet” HREF=”folhasestilos.css”> </HEAD>Alguns valores dos atributos META NAME são inseridosautomaticamente por alguns editores, por exemplo: Author. Oscampos Description e KeyWords ajudam a classificação da páginaem algumas ferramentas de busca. Essas informações não têmqualquer efeito na apresentação da página, mas servem como umaexplicação ou documentação sobre as informações contidas nela.Há poucos valores para META HTTP-EQUIV em uso. Omais comum é content-type, que indica o conjunto de caracteresusados na página. Essa informação ajuda o navegador a exibircorretamente os caracteres especiais que estiverem presentes notexto. Um exemplo de uso comum do atributo HTTP-EQUIVé promover a mudança automática de páginas, atribuindo-lhe ovalor Refresh. Veja este exemplo: <HEAD> <TITLE> ... </TITLE> <META HTTP-EQUIV=”Refresh” CONTENT=”segundos; URL= pagina.html”> </HEAD> Unidade 2 43
  40. 40. Universidade do Sul de Santa Catarina Onde diz: „„ pagina.html : é a página a ser carregada automaticamente; „„ segundos : é o número de segundos passados até que a página indicada seja carregada. Como comentado no exemplo, o efeito é interessante, mas para que serve? Se não pensarmos em uma finalidade útil para esse efeito, caímos na tentação de usá-lo “à toa”. A aplicação mais utilizada é a atualização automática de um documento que, por exemplo, tenha uma foto produzida por uma câmara de vídeo. Você pode forçar, com o Refresh (atualizador), a atualização dessa página, mostrando para o usuário sempre uma imagem mais atual de algum evento focalizado pela câmara. Outra utilização é em chats, ou em páginas que desviem a navegação através de documentos desenvolvidos para navegadores avançados. Uso de META tags! O uso de META tags não é obrigatório. Até poucos anos atrás, elas eram consideradas essenciais para uma página ter bom posicionamento nos resultados das pesquisas em catálogos da web. Com o tempo, no entanto, os responsáveis pelos catálogos viram que os autores de páginas abusavam das tags META, colocando palavras-chave em demasia para enganar os critérios de catalogação. Atualmente, nenhum dos catálogos mais conceituados considera as palavras-chave contidas em META tags. Ainda no exemplo anterior, se você observar atentamente, além das tags TITLE e META, a última tag utilizada no cabeçalho foi LINK. Esta tag tem a função de fazer um relacionamento com algum documento externo. <LINK REL= “stylesheet” HREF=“folhaestilo.css”>44
  41. 41. Linguagens de Programação IO atributo REL é a identificação do tipo de formato dodocumento. O valor “stylesheet” indica que se trata de folhas deestilo. Poderiam ser outro valores, como por exemplo “script”,que indicaria arquivo de funções java script.HREF é o caminho físico do arquivo. Neste caso, existe umarquivo chamado folhaestilo.css no próprio diretório do HTML.<BODY>É o corpo do documento. Tudo que estiver contido em <BODY>será mostrado na janela principal do seu navegador. <BODY>pode conter cabeçalhos, parágrafos, listas, tabelas, links paraoutros documentos, imagens, formulários, animações, vídeos,sons e scripts embutidos.Estas duas tags, <BODY> </BODY>, delimitam todo o conteúdodo site. É aí que aparecerão os textos, as imagens, o fundo de tela,entre outras coisas.Dentro da tag <BODY> você conseguirá especificar osseguintes atributos: „„ BACKGROUND (configura a imagem que você deseja como fundo de tela) - indica a URL da imagem a ser replicada no fundo da página, como uma marca d`água. Para efeitos de design, é possível fixar a imagem de fundo, de modo que ela não se mova junto com o texto, ao se rolar a página. Exemplo: <body background=”imagem.gif”> Neste exemplo, o arquivo de imagem deve estar no mesmo diretório do arquivo HTML. „„ BGCOLOR (cor de fundo) - a cor de fundo da tela. Quando não é indicada, o navegador irá mostrar uma cor padrão, geralmente o cinza ou branco; alguns editores poderão estabelecer o branco para o fundo da página. Exemplo: <body bgcolor=”cor”> Unidade 2 45
  42. 42. Universidade do Sul de Santa Catarina O atributo “cor” pode ser utilizado em todas as tags, tanto pode ser o nome de uma cor (RED, BLUE, BLACK, etc...) ou a codificação da cor em representação hexadecimal (#FF00FF, #C42A1F, etc...). „„ TEXT (cor do texto padrão) - a cor padrão de todo o texto da página. Cor dos textos da página (padrão: preto). Exemplo: <body text=”cor”> „„ LINK (cor dos links) - determina a cor de todos os links da página. Cor dos links (padrão: azul). Exemplo: <body link=”cor”> „„ VLINK (cor dos links visitados) - determina a cor de todos os links já visitados na página. Cor dos links, depois de visitados (padrão: azul escuro ou roxo). Exemplo: <body vlink=”cor”> „„ ALINK (cor dos links ativos) - determina a cor dos links ativos. Cor dos links, quando acionados (padrão: vermelho). Exemplo: <body alink=”cor”> Acompanhe a sintaxe seguinte, como modelo de uso dos atributos específicos do <BODY>: <BODY BACKGROUND=”imagem.gif” BGCOLOR=”cor” TEXT=”cor” LINK=”cor” ALINK=”cor” VLINK=”cor”> conteúdo </BODY> O exemplo seguinte determina que a cor de fundo do site seja amarela, o texto seja preto, os links ainda não visitados sejam46
  43. 43. Linguagens de Programação Iazuis, os links já visitados sejam roxos, e os links ativos sejamverdes: <BODY BGCOLOR=”yellow” TEXT=”black” LINK=”blue” VLINK=”purple” ALINK=”green”> conteúdo </BODY>Os valores das cores podem ser dados também em hexadecimal,equivalentes a cores no padrão RGB (Red, Green, Blue). Existemtabelas de cores com esses valores, mas grande parte doseditores já oferece uma interface bem amigável, através da qualescolhemos as cores desejadas. Você Sabia? O sistema hexadecimal é um sistema de numeração vinculado à informática, já que os computadores interpretam as linguagens de programação em bytes, que são compostos de oito dígitos. À medida que os computadores e os programas aumentam a sua capacidade de processamento, eles funcionam com múltiplos de oito, como 16 ou 32. Por este motivo, o sistema hexadecimal, de 16 dígitos, é um standard na informática. Como o nosso sistema de numeração só dispõe de dez dígitos, devemos incluir seis letras para completar o sistema. Estas letras e o seu valor em decimal são: A = 10, B = 11, C = 12, D = 13, E = 14 e F = 15. A utilização do sistema hexadecimal nos computadores deve-se a que um dígito hexadecimal representa quatro dígitos binários (4 bits), portanto dois dígitos hexadecimais representam oito dígitos binários (8 bits = 1 byte) que, como é sabido, é a unidade básica de armazenamento de informação. Fonte: http://pt.wikipedia.org/wiki/Hexadecimal. Unidade 2 47

×