LINGUAGENS DE PROGRAMAÇÃO I - Unisul - Livro completo 2010

Universidade do Sul de Santa Catarina

Linguagens de Programao IDisciplina na modalidade a distncia

Palhoa UnisulVirtual 2010

CrditosUniversidade do Sul de Santa Catarina Campus UnisulVirtual Educao Superior a Distncia Reitor Unisul Ailton Nazareno Soares Vice-Reitor Sebastio Salsio Heerdt Chefe de Gabinete da Reitoria Willian Mximo Pr-Reitora Acadmica Miriam de Ftima Bora Rosa Pr-Reitor de Administrao Fabian Martins de Castro Pr-Reitor de Ensino Mauri Luiz Heerdt Campus Universitrio de Tubaro Diretora Milene Pacheco Kindermann Campus Universitrio da Grande Florianpolis Diretor Hrcules Nunes de Arajo Campus Universitrio UnisulVirtual Diretora Jucimara Roesler Equipe UnisulVirtual Diretora AdjuntaPatrcia Alberton Secretaria Executiva e Cerimonial Jackson Schuelter Wiggers (Coord.) Bruno Lucion Roso Marcelo Fraiberg Machado Tenille Catarina Assessoria de Assuntos Internacionais Murilo Matos Mendona Assessoria DAD - Disciplinas a Distncia Enzo de Oliveira Moreira (Coord.) Carlos Alberto Areias Franciele Arruda Rampelotti Luiz Fernando Meneghel Assessoria de Inovao e Qualidade da EaD Dnia Falco de Bittencourt (Coord.) Rafael Bavaresco Bongiolo Assessoria de Relao com Poder Pblico e Foras Armadas Adenir Siqueira Viana Assessoria de Tecnologia Osmar de Oliveira Braz Jnior (Coord.) Felipe Jacson de Freitas Jeerson Amorin Oliveira Jos Olmpio Schmidt Marcelo Neri da Silva Phelipe Luiz Winter da Silva Priscila da Silva Rodrigo Battistotti Pimpo Gesto Documental Lamuni Souza (Coord.) Clair Maria Cardoso Janaina Stuart da Costa Josiane Leal Marlia Locks Fernandes Ricardo Mello Platt Secretaria de Ensino a Distncia Karine Augusta Zanoni Giane dos Passos(Secretria de Ensino) (Secretria Acadmica)

Avenida dos Lagos, 41 Cidade Universitria Pedra Branca | Palhoa SC | 88137-900 | Fone/fax: (48) 3279-1242 e 3279-1271 | E-mail: [email protected] | Site: www.unisul.br/unisulvirtual Bruno Augusto Zunino Claudia Noemi Nascimento Dbora Cristina Silveira Ednia Araujo Alberto Francine Cardoso da Silva Karla F. Wisniewski Desengrini Maria Eugnia Ferreira Celeghin Maria Lina Moratelli Prado Mayara de Oliveira Bastos Patrcia de Souza Amorim Poliana Morgana Simo Priscila Machado Relacionamento com o Mercado Eliza Bianchini Dallanhol Locks Walter Flix Cardoso Jnior

Gerncia de Produo

Coordenao dos CursosAuxiliares das coordenaes Fabiana Lange Patricio Maria de Ftima Martins Tnia Regina Goularte Waltemann Coordenadores Graduao Adriana Santos Ramm Adriano Srgio da Cunha Alosio Jos Rodrigues Ana Luisa Mlbert Ana Paula R. Pacheco Bernardino Jos da Silva Carmen Maria C. Pandini Catia Melissa S. Rodrigues Charles Cesconetto Diva Marlia Flemming Eduardo Aquino Hbler Eliza B. D. Locks Fabiano Ceretta Horcio Dutra Mello Itamar Pedro Bevilaqua Jairo Afonso Henkes Janana Baeta Neves Jardel Mendes Vieira Joel Irineu Lohn Jorge Alexandre N. Cardoso Jos Carlos N. Oliveira Jos Gabriel da Silva Jos Humberto D. Toledo Joseane Borges de Miranda Luciana Manfroi Marciel Evangelista Catneo Maria Cristina Veit Maria da Graa Poyer Mauro Faccioni Filho Moacir Fogaa Myriam Riguetto Nlio Herzmann Onei Tadeu Dutra Raulino Jac Brning Rogrio Santos da Costa Rosa Beatriz M. Pinheiro Tatiana Lee Marques Thiago Coelho Soares Valnei Campos Denardin Roberto Iunskovski Rose Clr Beche Rodrigo Nunes Lunardelli Coordenadores Ps-Graduao Aloisio Rodrigues Anelise Leal Vieira Cubas Bernardino Jos da Silva Carmen Maria Cipriani Pandini Daniela Ernani Monteiro Will Giovani de Paula Karla Leonora Nunes Luiz Otvio Botelho Lento Thiago Coelho Soares Vera Regina N. Schuhmacher Gerncia Administrao Acadmica Mrcia Luz de Oliveira (Gerente) Fernanda Farias Financeiro Acadmico Marlene Schauer Rafael Back Vilmar Isaurino Vidal

Arthur Emmanuel F. Silveira (Gerente) Francini Ferreira Dias Design Visual Pedro Paulo Alves Teixeira (Coord.) Adriana Ferreira dos Santos Alex Sandro Xavier Alice Demaria Silva Anne Cristyne Pereira Diogo Rafael da Silva Edison Rodrigo Valim Frederico Trilha Higor Ghisi Luciano Jordana Paula Schulka Nelson Rosa Patrcia Fragnani de Morais Multimdia Srgio Giron (Coord.) Cristiano Neri Gonalves Ribeiro Dandara Lemos Reynaldo Fernando Gustav Soares Lima Srgio Freitas Flores Portal Rafael Pessi (Coord.) Luiz Felipe Buchmann Figueiredo Comunicao Marcelo Barcelos Andreia Drewes Carla Fabiana Feltrin Raimundo Produo Industrial Francisco Asp (Coord.) Ana Paula Pereira Marcelo Bittencourt

Alessandro Alves da Silva Andra Luci Mandira Cristina Mara Shauert Djeime Sammer Bortolotti Douglas Silveira Fabiano Silva Michels Felipe Wronski Henrique Janaina Conceio Jean Martins Luana Borges da Silva Luana Tarsila Hellmann Maria Jos Rossetti Miguel Rodrigues da Silveira Junior Monique Tayse da Silva Patricia A. Pereira de Carvalho Patricia Nunes Martins Paulo Lisboa Cordeiro Rafaela Fusieger Rosngela Mara Siegel Silvana Henrique Silva Vanilda Liordina Heerdt

Gerncia de Desenho e Desenvolvimento de Materiais DidticosMrcia Loch (Gerente) Acessibilidade Vanessa de Andrade Manoel (Coord.) Bruna de Souza Rachadel Letcia Regiane Da Silva Tobal Desenho Educacional Carmen Maria Cipriani Pandini

(Coord. Ps)

Carolina Hoeller da S. Boeing Silvana Souza da Cruz (Coord. Grad.) Ana Cludia Ta Cristina Klipp de Oliveira Eloisa Machado Seemann Flvia Lumi Matuzawa Gabriella Arajo Souza Esteves Giovanny Noceti Viana Jaqueline Cardozo Polla Lis Air Fogolari Lygia Pereira Luiz Henrique Milani Queriquelli Marina Cabeda Egger Moellwald Marina Melhado Gomes da Silva Melina de la Barrera Ayres Michele Antunes Correa Ngila Cristina Hinckel Roberta de Ftima Martins Sabrina Paula Soares Scaranto Viviane Bastos(Coord. Ext/DAD)

Gerncia Administrativa e FinanceiraRenato Andr Luz (Gerente) Naiara Jeremias da Rocha Valmir Vencio Incio

Gerncia de Ensino, Pesquisa e ExtensoMoacir Heerdt (Gerente) Aracelli Araldi Hackbarth Elaborao de Projeto e Reconhecimento de Curso Diane Dal Mago Vanderlei Brasil Extenso Maria Cristina Veit (Coord.) Pesquisa Daniela Will (Coord. PUIP, PUIC, PIBIC) Mauro Faccioni (Coord. Nuvem) Ps-Graduao Clarissa Carneiro Mussi (Coord.) Biblioteca Soraya Arruda (Coord.) Paula Sanhudo da Silva Renan Felipe Cascaes Rodrigo Martins da Silva Capacitao e Assessoria ao Docente Angelita Maral Flores (Coord.) Adriana Silveira Alexandre Wagner da Rocha Cludia Behr Valente Elaine Cristiane Surian Juliana Cardoso Esmeraldino Patrcia da Silva Meneghel Simone Perroni da Silva Zigunovas Monitoria e Suporte Rafael da Cunha Lara (Coord.) Anderson da Silveira Anglica Cristina Gollo

Gerncia Servio de Ateno Integral ao AcadmicoJames Marcel Silva Ribeiro (Gerente) Atendimento Maria Isabel Aragon (Coord.) Andiara Clara Ferreira Andr Luiz Portes Bruno Ataide Martins Holdrin Milet Brandao Jennier Camargo Maurcio dos Santos Augusto Maycon de Sousa Candido Sabrina Mari Kawano Gonalves Vanessa Trindade Orivaldo Carli da Silva Junior Estgio Jonatas Collao de Souza (Coord.) Juliana Cardoso da Silva Micheli Maria Lino de Medeiros Priscilla Geovana Pagani Prouni Tatiane Crestani Trentin (Coord.) Gisele Terezinha Cardoso Ferreira Scheila Cristina Martins Taize Muller

Gerncia de Logstica(Gerente)

Jeferson Cassiano A. da Costa Andrei Rodrigues Logstica de Encontros Presenciais Graciele Marins Lindenmayr (Coord.) Ana Paula de Andrade Cristilaine Santana Medeiros Daiana Cristina Bortolotti Edesio Medeiros Martins Filho Fabiana Pereira Fernando Oliveira Santos Fernando Steimbach Marcelo Jair Ramos Logstica de Materiais Carlos Eduardo D. da Silva (Coord.) Abrao do Nascimento Germano Fylippy Margino dos Santos Guilherme Lentz Pablo Farela da Silveira Rubens Amorim

Gerncia de Marketing

Fabiano Ceretta (Gerente) Alex Fabiano Wehrle Sheyla Fabiana Batista Guerrer Victor Henrique M. Ferreira (frica)

Patrcia Gerent Petry

Linguagens de Programao ILivro didtico Reviso e atualizao Clavison Martinelli Zapelini Design instrucional Leandro Kingeski Pacheco Melina de la Barrera Ayres 3 edio revista e atualizadaPalhoa UnisulVirtual 2010

Copyright UnisulVirtual 2010 Nenhuma parte desta publicao pode ser reproduzida por qualquer meio sem a prvia autorizao desta instituio.

Edio Livro DidticoProfessor Conteudista Patricia Gerent Petry Reviso e Atualizao Clavison Martinelli Zapelini (3 ed. rev. e atual.) Design Instrucional Leandro Kingeski Pacheco Melina de la Barrera Ayres (3 ed. rev. e atual.) Assistente Acadmico Sabrina Paula Soares Scaranto (3 ed. rev. e atual.) Lygia Pereira (3 ed. rev. e atual.) Projeto Grfico e Capa Equipe UnisulVirtual Diagramao Rafael Pessi Anne Cristyne Pereira (3 ed. rev. e atual.) Reviso Amaline Boulus Issa Mussi (3 ed. rev. e atual.)

005.133 P59 Petry, Patrcia Gerent Linguagens de programao I : livro didtico / Patrcia Gerent Petry ; reviso e atualizao Clavison Martinelli Zapelini ; design instrucional Leandro Kingeski Pacheco, Melina De La Barrera Ayres ; [assistente acadmico Sabrina Paula Soares Scaranto, Lygia Pereira]. 3. ed. rev. e atual. Palhoa : UnisulVirtual, 2010. 310 p. : il. ; 28 cm. Inclui bibliografia. 1. Linguagem de programao (Computadores). 2. HTML (Linguagem de programao 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. Ttulo.

Ficha catalogrfica elaborada pela Biblioteca Universitria da Unisul

SumrioApresentao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Palavras da professora . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Plano de estudo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11 UNIDADE 1 Conceitos bsicos pertinentes linguagem de programao HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .17 UNIDADE 2 Introduo HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .37 UNIDADE 3 Listas e Vnculos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .69 UNIDADE 4 Mais formatao em HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .99 UNIDADE 5 Uso de Imagens, Painis de Fundo e Arquivos de Msica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .123 UNIDADE 6 Tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .153 UNIDADE 7 Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .185 UNIDADE 8 Desenvolvendo pginas eficientes . . . . . . . . . . . . . . . . . . . . . . . . . .215 UNIDADE 9 Folhas de Estilo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .239 UNIDADE 10 Criao de Formulrios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .269 Para concluir o estudo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .301 Referncias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .303 Sobre a professora conteudista . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .305 Respostas e comentrios das atividades de autoavaliao . . . . . . . . . . . . . . . . .307 Biblioteca Virtual . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .309

ApresentaoEste livro didtico corresponde disciplina Linguagens de Programao I. O material foi elaborado visando a uma aprendizagem autnoma e aborda contedos especialmente selecionados e relacionados sua rea de formao. Ao adotar uma linguagem didtica e dialgica, objetivamos facilitar seu estudo a distncia, proporcionando condies favorveis s mltiplas interaes e a um aprendizado contextualizado e eficaz. Lembre que sua caminhada nesta disciplina ser acompanhada e monitorada constantemente pelo Sistema Tutorial da UnisulVirtual. Neste sentido a expresso a distncia caracteriza, somente, a modalidade de ensino pela qual optou para sua formao, pois, na relao de aprendizagem, professores e instituio estaro sempre conectados com voc. Ento, sempre que sentir necessidade entre em contato. Voc tem disposio diversas ferramentas e canais de acesso, tais como: telefone, e-mail e o Espao Unisul Virtual de Aprendizagem, que o canal mais recomendado, pois tudo o que for enviado e recebido fica registrado para seu maior controle e comodidade. Nossa equipe tcnica e pedaggica ter o maior prazer em lhe atender, pois sua aprendizagem o nosso principal objetivo. Bom estudo e sucesso! Equipe UnisulVirtual

Palavras da professoraCaro(a) Aluno(a)! Voc j deve ter passado boa parte de seu tempo explorando a web, e provvel que j esteja familiarizado(a) com a maior parte do contedo deste livro. Com ele, vamos aprender a escrever pginas para a web. Talvez voc at j tenha realizado isto em alguma oportunidade. Muitos dos contedos provavelmente sero cansativos para voc. Mas no deixe de ler e participar, contribuindo assim para o bom andamento da Disciplina. Aqui voc encontrar tudo que precisa para criar uma pgina esttica na web. Digo esttica, porque, aqui, ainda no aprenderemos a tornar as pginas dinmicas, como existem em muitos sites j visitados por voc (por exemplo, realizar um cadastro em um banco de dados, via web). Iremos aprender como criar uma pgina HTML, disponibiliz-la na web, criar vnculos, incluir imagens, etc. Este livro trata de detalhes tcnicos bsicos para a criao de um site na web. Voc aprender por que deve produzir um efeito em particular em uma pgina, quando deve us-lo e como. Neste livro, voc tambm encontrar dicas, sugestes e muitos exemplos de como estruturar sua apresentao, e no simplesmente o texto em cada pgina. Ou seja, o livro dar dicas para uma boa apresentao de um site na web. Trabalhar com desenvolvimento para a web gratificante, pois sabemos que uma das caractersticas mais interessantes da internet a oportunidade que todas as pessoas tm de disseminar informaes. Portanto disponibilizar informaes na web ser o nosso foco. Espero que voc se anime e se divirta bastante, enquanto estuda. Vamos l? Bons estudos! Professora Patrcia Gerent Petry

Plano de estudoO plano de estudos visa a orient-lo(a) no desenvolvimento da disciplina. Possui elementos que o(a) ajudaro a conhecer o contexto da disciplina e a organizar o seu tempo de estudos. O processo de ensino e aprendizagem na UnisulVirtual leva em conta instrumentos que se articulam e se complementam, portanto a construo de competncias se d sobre a articulao de metodologias e por meio das diversas formas de ao/mediao. So elementos desse processo:

o livro didtico; o Espao UnisulVirtual de Aprendizagem (EVA); as atividades de avaliao (complementares, a distncia e presenciais); o Sistema Tutorial.

EmentaApresentao das principais linguagens de programao e ferramentas para desenvolvimento de sites. Estudo de HTML. Desenvolvimento de sites estticos. Tabelas, frames, formulrios, imagens, som, vdeo e links. Estilos de fontes e definio de contedos. Implementao de sites e seus respectivos testes, avaliao e manuteno.

Carga HorriaA carga horria total da disciplina de 120 horas-aula, 8 crditos, incluindo o processo de avaliao.

ObjetivosGerais Esta Disciplina tem por objetivo fornecer um estudo sobre a linguagem bsica utilizada para a criao de pginas na internet: HTML (HyperText Markup Language). Sero abordados os conceitos bsicos e avanados da linguagem. Especficos

Apresentar o funcionamento da web. Descrever os principais conceitos referentes HTML. Conhecer alguns editores de HTML. Definir o que so tags HTML. Identificar as tags e a estrutura geral de uma pgina HTML. Aprender a criar listas. Aprender a criar vnculos em HTML. Proporcionar formataes em pargrafos e textos HTML. Trabalhar com imagens em pginas da web. Utilizar tabelas. Construir frames. Proporcionar a criao de folhas de estilos. Elaborar um layout adequado para as suas pginas em HTML. Criar formulrios. Verificar elementos e atributos HTML obsoletos.

Linguagens de Programao I

Contedo programtico/objetivosOs objetivos de cada unidade definem o conjunto de conhecimentos que voc dever deter para o desenvolvimento de habilidades e competncias necessrias sua formao. Neste sentido, veja, a seguir, as unidades que compem o livro didtico desta Disciplina, bem como os seus respectivos objetivos. Unidades de estudo: 10 Unidade 1 Conceitos bsicos pertinentes linguagem de programao HTML Esta unidade pretende descrever o que a internet, revendo seus conceitos. Como funciona a web, definindo o que HTML e como editar documentos HTML. Unidade 2 Introduo HTML Nesta unidade, voc iniciar a criao de pginas web. Aprender a estruturar o cdigo HTML e a utilizar os tags. Unidade 3 Listas e Vnculos Nesta unidade, voc criar diversos tipos de listas possveis. Saber como inserir um comentrio em seu cdigo HTML e como incluir vnculos entre o texto e as pginas da web. Unidade 4 Mais formatao em HTML Nesta unidade, voc distinguir os diferentes estilos de caracter. Saber como formatar e utilizar as tags e .

Unidade 5 Uso de Imagens, Painis de Fundo e Arquivos de udio Nesta unidade, voc utilizar a tag e seus atributos. Far referncia de hipertexto com imagem. Criar painis de fundo com imagens. Alm disso, sero abordadas sugestes para um melhor uso das imagens e tcnicas para manipulao de arquivos de udio. Unidade 6 Tabelas Nesta unidade, voc criar as tabelas e seus elementos bsicos: alinhamento da tabela e das clulas, dimenses e cor. Unidade 7 Frames Nesta unidade, voc construir frames com o elemento FRAMESET, aprender suas aplicaes e cuidados no uso. Far links com frames. Realizar a composio dos frames e distinguir os atributos de frameset e frame. Unidade 8 Desenvolvendo pginas eficientes Na unidade 8, voc desenvolver pginas eficientes. Saber como utilizar as extenses de HTML, como realizar o projeto e layout da pgina e como usar os vnculos. Nesta unidade, tambm encontrar sugestes de bons hbitos e conhecer atributos HTML em desuso. Unidade 9 Folhas de Estilo Nesta unidade, voc saber o que so as folhas de estilos e a sintaxe SCC. Aprender os tipos de definio de estilos e a ordem da cascata.

Unidade 10 Criao de Formulrios Nesta unidade, voc criar formulrios. Usar campos de entrada de texto; selees - listas de opes; botes de rdio, caixas de validao e botes de envio. Voc ver, tambm, um exemplo completo de formulrio.

Agenda de atividades/ Cronograma

Verifique com ateno o EVA, organize-se para acessar periodicamente o espao da Disciplina. O sucesso nos seus estudos depende da priorizao do tempo para a leitura; da realizao de anlises e snteses do contedo; e da interao com os seus colegas e professor. No perca os prazos das atividades. Registre no espao 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.

Atividades obrigatrias

Demais atividades (registro pessoal)

UNIDADE 1

Conceitos bsicos pertinentes linguagem de programao HTMLObjetivos de aprendizagem

Rever conceitos importantes sobre Internet. Conhecer HTML. Conhecer alguns editores de HTML existentes.

Sees de estudoSeo 1 O que a Internet Seo 2 Como funciona a web Seo 3 Afinal o que HTML? Seo 4 Edio de documentos HTML

Para incio de estudoCaro(a) aluno(a), antes de voc iniciar seus estudos sobre linguagem de programao I, vamos relembrar alguns conceitos j estudados. Uma das caractersticas mais interessantes da Internet a oportunidade que todos os usurios tm de disseminar informaes. Tanto um vencedor do prmio Nobel quanto um estudante do primeiro ano de faculdade contam com os mesmos canais de distribuio para expressar suas ideias. Com o surgimento da World Wide Web, esse meio s foi enriquecido. O contedo da rede ficou mais atraente com a possibilidade de incorporar imagens e sons. Um novo sistema de localizao de arquivos criou um ambiente em que cada informao tem um endereo nico e pode ser encontrada por qualquer usurio da rede. A evoluo da internet constante. Atualmente, a evoluo mais marcante a preconizada WEB 2.0, que melhorou muito o carregamento de pginas dinmicas com a substituio do simples HTML pelo XHTML e a utilizao de AJAX. Esses conceitos sero abordados de forma mais aprofundada na unidade 7. Na prtica, no existe nenhuma diferena entre as pginas de uma grande empresa na web e as pginas que voc ir produzir. Ambas podem ser acessadas com a mesma facilidade. A diferena uma s: a criatividade. Este livro tem o objetivo de fornecer as ferramentas bsicas para exercitar a criatividade na web. Ser preciso, ento, aprender um pouco de HTML (HyperText Markup Language), a linguagem utilizada para criar as pginas. Voc tambm vai encontrar uma poro de dicas, truques e exemplos.

A World Wide Web (Teia de Alcance Mundial) o nome dado rede de servidores da Internet que mantm documentos hipermdia interligados entre si por hiperlinks os quais formam uma grande teia de informaes espalhadas pelo mundo. A WWW foi a grande responsvel pela popularizao da Internet, oferecendo um mtodo mais intuitivo de pesquisar e consultar informaes na grande rede.

Seo 1 - O que a InternetMuito provavelmente, voc j estudou a internet. Antes de iniciar os estudos, escreva aqui: O que voc entende por internet?

Existem muitos termos que tentam definir a Internet. Superestrada da informao, preferem os polticos. Rede de redes, insistem os cientistas. O certo que cada um desses grupos prefere ver a rede segundo seus prprios interesses. Para os polticos, uma nova fronteira de construo e investimentos coletivos um desafio. J os cientistas, rigorosos em suas definies, enxergam a virtude da Internet em conectar computadores de qualquer tipo em todo o globo. As vises distintas da rede no param por a. H quem veja na Internet uma perigosa fonte de pornografia. As indstrias sonham com o dia em que podero vender diretamente aos consumidores, sem nenhum intermedirio. Empresas de comunicao esperam o meio que rena rdio, TV e televiso em um mesmo sistema de produo. Pais de estudantes no exterior matam as saudades pelo monitor, e paqueras virtuais acontecem a toda hora, em cada canto da rede. A Internet tudo isso ao mesmo tempo e, com certeza, muito mais. A rede o que cada pessoa quiser que ela seja. Em toda a histria da Internet, foram os usurios que inventaram novos recursos e novas aplicaes. um terreno frtil para boas ideias, e, ao mesmo tempo, perigoso, quando utilizado para fins ilcitos.Unidade 1

Isso tudo porque a Internet uma inveno muito simples. Nada mais do que uma forma fcil e barata de fazer com que computadores distantes possam se comunicar. A partir da, a revoluo est nas mos das pessoas. Cada usurio recebe uma identificao nica, conhecida como endereo. Com esse endereo, ele pode se comunicar, enviando mensagens para outras pessoas. o que se chama de correio eletrnico. Graas aos esforos de instituies 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) - possvel conseguir programas de graa e consultar bancos de dados pblicos. Hoje, com o sucesso da Internet, toda empresa se v na obrigao de colocar a cara na rede. Os servios se multiplicam. Os bancos oferecem todas as suas operaes pelo computador. Notcias so distribudas imediatamente. Pizzarias aceitam pedidos. Livrarias e lojas de discos vendem seus produtos. No entanto boa parte do material da rede produzida por indivduos que desejam expressar ao mundo suas preferncias. Um usurio rene tudo que tinha sobre Jornada nas Estrelas e coloca na Internet. Outro, com objetivos mais prticos, escreve um currculo e espera que seus talentos sejam descobertos. Qualquer pessoa que um dia sentiu vontade de compartilhar suas faanhas, agora pode fazer isso. O tal terreno frtil da Internet tem um nome. Chama-se World Wide Web ou apenas web.

Seo 2 - Como funciona a webA web funciona basicamente com dois tipos de programas: os clientes e os servidores. O cliente o programa utilizado pelos usurios para ver as pginas, enquanto os servidores ficam responsveis por armazenar o contedo da rede e permitir o acesso a ele. Neste livro, chamamos o programa cliente de navegador (browser, em ingls). O que o navegador faz

O navegador usado para exibir pginas da web e outras informaes disponveis na world wide web e navegar por elas.

requisitar um arquivo para um servidor. Se a informao pedida estiver realmente armazenada naquele servidor, o pedido ser enviado de volta e mostrado na tela do navegador.Voc tem ideia de como a informao na web organizada?

A informao na web organizada na forma de pginas, que podem conter texto, imagens, sons e, mais recentemente, pequenos programas. Alm disso, as pginas da web podem ser ligadas umas com as outras, formando o que se chama de um conjunto de hipertextos. Assim, possvel, por exemplo, que um trabalho de faculdade faa referncia direta a um texto que serviu de base para o estudo. O leitor interessado na fonte de pesquisa pode saltar imediatamente para o texto original. Desta forma, qualquer documento pode levar a um outro texto que tambm esteja disponvel na rede. A possibilidade de criar uma malha de informao em torno do planeta deu origem ao nome World Wide Web, que significa teia de alcance mundial. A web um sistema de informao em hipertexto. Os sistemas de ajuda on-line utilizam hipertextos para apresentar informaes. A figura 1.1 a seguir mostra um diagrama simples de como funciona esse tipo de sistema.

Um exemplo de pginas que utilizam hipertextos pode ser visualizados em: . Acesso em 1mar.2010.

Ajuda Tpico um Tpico dois Tpico trs Ajuda no Tpico dois SubTpico um SubTpico dois SubTpico trs Ajuda no SubTpico dois Ajuda detalhada Mais detalhes Milhes de detalhes

Figura 1.1 Sistema de ajuda on-line.

Unidade 1

Voc Sabia?Hipertexto um sistema para a visualizao de informao cujos documentos contm referncias internas para outros documentos (chamadas de hiperlinks ou, simplesmente, links), e para a fcil publicao, atualizao e pesquisa de informao. 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 informaes visuais no lineares, com base nas informaes que deseja obter em seguida. O Link ou Hiperlink um dos principais elementos de um hipertexto, pois permite a conexo de uma pgina com informaes a outra previamente definida, geralmente contendo um assunto correlato. Nas pginas WWW, os hiperlinks aparecem como palavras em destaque, normalmente sublinhadas e de cor diferente do restante do texto, e so acionados clicando-se sobre eles com o mouse.

A web grfica e fcil de ser navegadaAntes da web, o uso da internet envolvia conexes simples de textos. Voc tinha de navegar pelos vrios servios da internet, utilizando interfaces de linha de comandos e ferramentas rudimentares. Embora houvesse muitas informaes realmente interessantes na internet, ela no tinha um aspecto agradvel. A web fornece recursos de imagem, som e vdeo que podem ser incorporados ao texto, e os softwares mais recentes oferecem novos recursos para multimdia e aplicativos incorporados. E o mais importante que a interface de todos esses recursos de fcil navegao basta saltar de vnculo em vnculo, de pgina em pgina, passando por sites e servidores.

Se a web incorpora muito mais do que texto, por que chamada de sistema de hipertexto? No deveria ser um sistema de hipermdia? Muitos autores discutem o assunto. Muitos argumentam que a web comeou com um sistema de textos e que a maior parte de seu contedo ainda , basicamente, composta de textos, com partes extras de mdias.

A web distribudaSabemos que as informaes ocupam muito espao, especialmente quando voc inclui imagens, sons, vdeos. Para armazenar todas as informaes que a web fornece, voc precisa de um espao enorme em disco, e seria quase impossvel gerenci-las. A web consegue fornecer um volume to grande de informaes, porque elas esto distribudas, globalmente, por milhares de sites, cada qual contribuindo com o espao necessrio s informaes que divulga.

A web dinmicaComo as informaes da web esto contidas no site que as divulgou, as pessoas que as publicaram, originalmente, podem atualiz-las de forma instantnea, a qualquer momento. Para obter informaes atualizadas, basta usar o seu navegador para navegar pelas informaes e verificar o que h de novo.

Site da web um local na web que divulga algum tipo de informao. Quando voc exibe uma pgina da web, o seu navegador se conecta a esse site da web para obter essas informaes.

A web independente de plataformaO termo independente de plataforma significa que voc pode acessar as informaes disponveis na web a partir de qualquer computador, sistema operacional e monitor de vdeo. Voc tem acesso web atravs de um aplicativo denominado navegador (browser), como o Netscape Navigator, Internet Explorer, Mozilla Firefox ou Google Chrome. Voc pode encontrar muitos desses navegadores para a maioria dos sistemas computacionais existentes. E, depois que tiver um navegador e uma conexo com a internet, voc ter alcanado seu objetivo: voc estar na web.

Unidade 1

A ideia de que a web independente de plataforma no sustentada por todos. Com a introduo de novos recursos, tecnologias e tipos de mdia, 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 pblico potencial para seus sites.

A web interativaInteratividade a capacidade de responder ao servidor web. A web interativa por natureza. O ato de selecionar um vnculo e acessar outra pgina da web para ir a outro local na web uma forma de interatividade. Alm disso, ela permite que voc se comunique com o autor das pginas que est lendo e com outros leitores dessas pginas.

Os navegadores da webConforme voc estudou anteriormente, os usurios circulam por essa teia com um programa chamado navegador, que o programa que voc utiliza para exibir pginas pela world wide web. Esse programa envia pedidos de pginas pela rede e as apresenta na tela do usurio. Existem vrios navegadores da web, praticamente para todas as plataformas que voc possa imaginar, desde sistemas baseados em GUI (Mac, Windows), a sistemas de textos para conexes UNIX. Os navegadores mais conhecidos so o Netscape Navigator, o Microsoft Internet Explorer, Mozilla Firefox ou Google Chrome. A opo de desenvolver programas para um navegador especfico conveniente, quando voc sabe que o seu site da web vai ser visto por um pblico limitado. Esse tipo de desenvolvimento uma prtica comum em intranets implementadas em corporaes. Neste livro, os exemplos realizados foram utilizados com o navegador Internet Explorer 5.0.

GUI = Interface Grfica com o Usurio

Os servidores webPara que uma pgina esteja permanentemente disponvel na web, ela precisa ter um endereo fixo, alojada em um servidor.Este endereo chamado URL (Uniform Resource Locator, numa traduo literal, localizador uniforme de recursos).

Os pedidos dos navegadores so atendidos por uma combinao de computadores e programas que formam os servidores. Esses computadores e programas armazenam as pginas e podem exercer algum tipo de controle sobre quais usurios podem acess-las. Os servidores so mquinas potentes instaladas em universidades, empresas e rgos do governo, conectados permanentemente Internet. Tambm possvel montar um servidor de web em casa, com um computador pessoal. Apesar de poderem ser instalados em, praticamente, todos os tipos de computadores, os servidores devem estar conectados 24 horas por dia na rede, para que os usurios possam requisitar as pginas a qualquer momento. A melhor soluo para montar um conjunto de pginas procurar uma empresa que aluga espao em um servidor web. Existem vrios provedores de espao (hostings) gratuitos. Os provedores de acesso internet geralmente oferecem espao para os sites de seus assinantes. Sites com fins lucrativos so geralmente hospedados em provedores de espao pagos. Definida a hospedagem, basta enviar para o provedor os arquivos de seu site (via FTP ou por uma pgina de envio no prprio provedor de espao), e suas pginas j estaro disponveis para visitas.

O que uma URLA web permitiu que cada documento na rede tenha um endereo nico, que indica o nome do arquivo, diretrio, nome do servidor e o mtodo pelo qual ele deve ser requisitado. Esse endereo foi chamado de URL. Toda URL apresenta uma estrutura bsica. Acompanhe tal estrutura em funo do exemplo seguinte:

Unidade 1

Considere a seguinte URL: Onde, http:// o mtodo pelo qual ocorrer a transao entre cliente e servidor. HTTP (HyperText Transfer Protocol, ou protocolo de transferncia de arquivos de hipertexto) o mtodo utilizado para transportar pginas de web pela rede. Outros mtodos comuns so: ftp:// (para transferir arquivos), news:// (grupos de discusso) e mailto:// (para enviar correio eletrnico). 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 diretrio onde est o arquivo. s vezes, uma URL indica apenas o diretrio (ou o servidor). Neste caso, o servidor se encarrega de procurar e enviar o arquivo adequado. aluno.html o nome do arquivo. A extenso .html indica que se trata de uma pgina web. Uma URL pode indicar outras extenses. Quando o navegador recebe um arquivo com a extenso .txt, o arquivo tratado como um texto comum. Em outros casos, como nas extenses .zip (arquivo comprimido) e .exe (um programa), o navegador abre uma janela, perguntando ao usurio o que fazer com o arquivo.

Esse endereo nico de um documento pode ser utilizado pelo usurio para localizar um arquivo com o navegador. Nesse caso, o usurio deve preencher com o endereo uma janela do navegador conhecida como Endereo. A URL ser enviada at o servidor, que tentar localizar o arquivo e envi-lo para o usurio. Caso o arquivo no esteja disponvel no servidor, o usurio receber uma mensagem de erro. As URLs tambm so colocadas dentro de pginas de WWW para fazer referncia a outras informaes disponveis na Internet. Neste caso, determinados itens (trechos de texto ou imagens) da pgina, conhecidos como links, como j visto, podem ser utilizados pelos usurios para saltar de um lugar a outro na rede. Os links podem estabelecer ligao com qualquer tipo de arquivo. Essa ligao entre os documentos o que se chama de hipertexto.26

Seo 3 - Afinal o que HTML?Para voc publicar informaes acessveis a todos, voc precisa de uma linguagem entendida mundialmente, algo parecido com uma linguagem padro que todos os computadores possam entender. Como j dito, a linguagem utilizada para a World Wide Web a HTML (HyperText Markup Language ou linguagem de formatao de hipertexto). O HTML uma linguagem de marcao de texto ou dado relativamente simples e que pode ser combinado com outras linguagens de programao como: JSP, PHP, ASP, etc; podendo dar efeito dinmico aos sites. O HTML permite:

publicar documentos on-line com texto, tabelas, fotografias e muito mais; receber informaes atravs de ligaes (links) de hipertexto por meio de um clique; desenhar formulrios para transaes comerciais atravs de servios remotos, como para encontrar informao, fazer reservas, encomendar produtos, etc.; e, ainda, incluir som, vdeo e muitas aplicaes nos documentos.

Breve histrico do HTMLO HTML foi originalmente desenvolvido por Tim BernersLee, quando estava no CERN, e tornou-se conhecido atravs do Mosaic, um browser desenvolvido em NCSA. Durante os primrdios dos anos 90, expandiu-se com a enorme exploso do crescimento da WWW. Quando o HTML surgiu, a sua principal utilizao era para descrever a informao, sendo predominantemente usado no meio cientfico para partilhar documentos de forma universal e facilmente legvel. Pargrafos, listas, cabealhos, ttulos (os elementos principais do HTML) eram ideais para este tipo de documentao.27

Unidade 1

Posteriormente, o HTML foi expandido em vrios caminhos. De 1990 a 1995, a linguagem HTML sofreu uma srie de extenses por parte de diversos grupos e organizaes: HTML 2.0 da IETF, HTML+, HTML 3.0. Em 1996, os esforos 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 no a original. Para acomodar os mais variados pedidos, as tags de apresentao (cor, fonte e alinhamento) foram usadas e abusadas, quando o principal propsito da linguagem era estruturar a informao. Muitos, em alguma fase, aproveitaram-se das aparentes facilidades desta verso do HTML e de browsers demasiado permissivos a erros. Muitas pessoas concordavam que os documentos HTML deveriam trabalhar bem, atravs de diferentes browsers e sistemas operacionais. Em 1997, surge o HTML 4.0, que uma extenso do HTML 3.2, que permite a utilizao 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 nmero de erros e incongruncias encontrados na recomendao anterior. Neste momento, em 1999, existe um consenso para a necessidade de se voltar um pouco atrs, preparando ao mesmo tempo o futuro. Um exemplo a separao do contedo com a apresentao do documento, usando XHTML para o contedo e deixando a apresentao do documento a cargo de Cascading Style Sheets (CSS). Esta linguagem (XHTML) foi desenvolvida e aprovada com a recomendao 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).

Voc Sabia? World Wide Web Consortium (W3C)O World Wide Web Consortium um consrcio de empresas de tecnologia (atualmente cerca de 500 membros) fundado por Tim Berners Lee, em 1994, para levar a web ao seu potencial mximo, atravs do desenvolvimento de protocolos comuns e fruns abertos que promovam sua evoluo e assegurem a sua interoperabilidade. O W3C desenvolve tecnologias denominadas padres da web para a criao e a interpretao dos seus contedos. Sites desenvolvidos segundo esses padres podem ser acessados e visualizados por qualquer pessoa ou tecnologia, independente de hardware ou software utilizados, como celular, PDA, eletrodomsticos etc., independentemente da plataforma, de maneira rpida e compatvel com os novos padres e tecnologias que possam surgir com a evoluo da internet. Para alcanar seus objetivos, a W3C possui diversos comits que estudam as tecnologias existentes para a apresentao de contedo na Internet e criam padres de recomendao para utilizar estas tecnologias. Com a padronizao, os programas conseguem acessar facilmente os cdigos e entender onde deve ser aplicado cada conhecimento expresso no documento. Apesar do W3C no ser muito conhecido no Brasil, padres seus como HTML, eXtensible Hypertext Markup Language (XHTML) e Cascading Style Sheets (CSS) so muito populares. Contudo, em muitos casos, so usados de forma errnea devido falta de conhecimento de suas especificaes. um dever de todo desenvolvedor web respeitar e seguir os padres do W3C, pois, de outro modo, poder estar impondo barreiras tecnolgicas a diversas pessoas e, com isso, desestimulando e, at mesmo, impedindo o acesso a suas pginas. O site oficial da W3C http://www.w3c.org. Todas as atividades em desenvolvimento esto em ingls, mas voc encontrar uma grande parte das especificaes traduzida para outras lnguas.

Unidade 1

Em suma, hoje em dia temos um HTML mais flexvel, porttil e com um formato prtico 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.

Seo 4 - Edio de documentos HTMLAgora que voc conheceu um pouco da histria do HTML e de suas novidades, vamos aprender como editar um documento HTML, alm de efetuar uma breve introduo linguagem HTML. Os documentos em HTML so 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 produo de documentos, existem editores HTML especficos:

Editores de texto fonte - facilitam a insero das etiquetas (tags, como chamaremos), orientando o uso de atributos e marcaes. Ex.: W3e, HotDog, Crimson Editor.

Figura 1.2 - Tela do Crimson Editor

Editores WYSIWYG - oferecem ambiente de edio com um resultado final das marcaes (pois o resultado final depende do browser usado para visitar a pgina). Ex.: FrontPage, Namo Editor, Dreamweaver.

WYSIWYG o acrnimo da expresso em ingls What You See Is What You Get, que pode ser traduzido para O que voc v o que voc recebe. Trata-se de um mtodo de edio, no qual o usurio v o objeto no momento da edio na tela do computador, j com a aparncia do produto final. Um exemplo clssico de editor WYSIWYG o Microsoft Word, no qual o documento mostrado na tela da mesma forma que ser impresso. O criador do primeiro editor WYSIWYG, o Bravo, foi Charles Simonyi. Na linguagem de programao para internet, um dos editores o Macromedia Dreamweaver, no qual qualquer pessoa, com o mnimo de conhecimento em HTML, pode fazer muito rapidamente uma pgina ou at um site inteiro para internet.

Figura 1.3 - Tela do Namo Editor

Alm dos editores especficos para HTML, editores bastante utilizados, como o Word, entre outros, permitem a exportao de seus documentos prprios para o formato HTML. O documento HTML produzido normalmente ter extenso .html ou .htm. Existem muitos editores de HTML gratuitos, como:

Html beauty: http://www.htmlbeauty.com/Unidade 1

PageBreeze: http://www.pagebreeze.com/ Web writer: http://www.webwriter.dk/english/index.htm

Introduo linguagem HTMLA linguagem HTML fruto do casamento dos padres HyTime e SGML. Estes padres so especificados a seguir.

HyTime - Hypermedia/Time-based Document Structuring Language HyTime (ISO 10744:1992) o padro para representao estruturada de hipermdia e informao baseada em tempo. Um documento visto como um conjunto de eventos concorrentes dependentes de tempo (udio, vdeo etc.), conectados por webs ou hiperlinks. O padro HyTime independente dos padres de processamento de texto em geral. Ele fornece a base para a construo de sistemas hipertexto padronizados, consistindo-se de documentos que aplicam os padres de maneira particular. SGML - Standard Generalized Markup Language SGML o padro ISO 8879 de formatao de textos. No foi desenvolvido para hipertexto, mas torna-se conveniente para transformar documentos em hiperobjetos e para descrever as ligaes. O SGML no aplicado de maneira padronizada. Todos os produtos SGML tm seu prprio sistema para traduzir as etiquetas para um particular formatador de texto. DTD - Document Type Definition - define as regras de formatao para uma determinada classe de documentos. Um DTD ou uma referncia para um DTD deve estar contido em qualquer documento conforme o padro SGML.

Neste sentido, o HTML definido segundo um DTD de SGML.

Todo documento HTML apresenta elementos entre < e >; esses elementos so as etiquetas (doravante chamadas de tags) de HTML, que so os comandos de formatao da linguagem, as quais podem ser escritas em maiscula ou minscula. A maioria das tags tem sua correspondente de fechamento:

...Isso necessrio, porque as tags servem para definir a formatao de uma poro de texto e, assim, marcamos onde comea e termina o texto com a formatao especificada por ela. Alguns elementos so chamados vazios, pois no marcam uma regio de texto, apenas inserem algo no documento:

Todos os elementos podem ter atributos:

...Os valores dos atributos devem estar entre aspas.Texto

Unidade 1

SnteseCaro(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 espao (hostings) e URL. Voc tambm aprendeu conceitos introdutrios de HTML, que um recurso muito simples e acessvel para a produo de documentos. No podemos deixar de frisar a importncia das tags em HTML. Por isso, segue abaixo uma tabela resumindo a morfologia das tags:TipoTag Texto Atributo

Sintaxe texto texto

Exemplo
texto texto

Nas prximas unidades, voc estudar outros elementos do HTML, que lhe possibilitaro, com alguma imaginao, fazer um bom website. At l!

Atividades de autoavaliao1. Faa uma pesquisa sobre alguns editores gratuitos de HTML na internet. Pontue vantagens e desvantagens. Na ferramenta FRUM do EVA, vamos discutir sobre os editores HTML encontrados.

Saiba maisPara voc aprimorar ainda mais seus conhecimentos acerca dos temas aprendidos nesta unidade, consulte a seguinte referncia: PRATES, Rubens. HTML: guia de consulta rpida. So Paulo: Editora Novatec, 1997. E os seguintes sites: (Introduo ao HTML) (Web Design)

Unidade 1

UNIDADE 2

Introduo HTMLObjetivos de aprendizagem

Conhecer o que HTML e a importncia de utiliz-la. Conhecer o que so as tags HTML e como utiliz-las. Identificar as tags para a estrutura geral de uma pgina. Identificar as tags para ttulos, cabealhos e pargrafos.

Sees de estudoSeo 1 Criao de pginas da web simples Seo 2 Estruture sua HTML Seo 3 Separadores Seo 4 Alinhamento de texto

Para incio de estudoDepois de apresentarmos os conceitos iniciais, voc deve estar se perguntando: quando que vamos comear a criar uma pgina web? Afinal, este um dos objetivos desta disciplina. Ento, nesta unidade, voc comea a conhecer a estrutura da HTML a linguagem em que so criadas as pginas da web.

Seo 1 - Criao de pginas da web simplesApesar da aparente sofisticao, as pginas web no passam de documentos de texto simples. Voc pode produzi-las com qualquer editor de texto, como o bloco de notas do Windows. A diferena que as pginas web contm algumas marcas especiais para determinar o papel de cada elemento dentro do texto. Alguns elementos so marcados como ttulos, outros como pargrafos. As marcaes so usadas, tambm, para indicar os links que levam a outros documentos na rede. Essas marcas so chamadas de tags e esto especificadas dentro da linguagem utilizada para criar as pginas web, HTML. As tags de HTML apenas informam ao navegador o que so os elementos que esto na pgina. Eles dizem, por exemplo, que um determinado trecho o ttulo principal do documento e outro um item de lista. A formatao do trecho deixada para o navegador. Cada navegador mostra a pgina de uma forma um pouco diferente, o que dificulta o trabalho de programao visual na web. Para complicar ainda mais, cada usurio pode modificar a configurao padro de seu navegador, para que o seu programa mostre o texto na fonte (tipo de caractere) que quiser. Em compensao, muito simples criar uma pgina bsica para colocar na internet, com HTML. Nesta unidade, voc estudar um exemplo enxuto, que, aos poucos, ficar mais sofisticado.

Seo 2 - Estruture sua HTMLNos exemplos a seguir, voc ir verificar vrios trechos de texto marcados por cdigos colocados entre os caracteres < e >. Esses cdigos, chamados de tags, so responsveis pela marcao do texto em funo de seu papel dentro do documento. O ttulo principal de um documento, por exemplo, pode ser marcado com as tags e (coloca o texto em negrito), enquanto os pargrafos so separados pela tag . Existem dois tipos de tags. Algumas so formadas aos pares, indicando o incio e o fim do trecho afetado, como o par e . Outras podem ser colocadas individualmente, como o , que simplesmente insere um espao para dividir pargrafos. Mais adiante, mostraremos que as tags tambm podem receber atributos.

Tags bsicasA estrutura bsica de um documento HTML apresenta as seguintes tags: Ttulo do Documento texto, imagem, links, ...

Unidade 2

Observe que existem quatro pares de tags, que devem ser sempre colocados na pgina. O par de tags e deve englobar todo o contedo da pgina (estar presente no incio 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 cabealho e o corpo do texto, cada um indicado por um par de tags diferentes. Tudo que estiver entre o par e ir compor o cabealho, no aparecendo na pgina. O elemento principal do cabealho o ttulo do documento, que deve ser colocado entre o par e . Os navegadores mostram o ttulo na barra de ttulo do programa e na rea em que aparecem as pginas j visitadas. Por fim, existe o par e , que serve para indicar o corpo do texto, ou seja, a parte mostrada na janela do navegador. As tags HTML no so sensveis caixa. Traduzindo: tanto faz escrever , , , , ... Veja, em detalhe, cada uma destas tags estruturais.

A primeira tag de estrutura de toda a pgina em HTML a , a qual indica que o contedo do arquivo encontra-se codificado na linguagem HTML. Para que o computador reconhea que voc est escrevendo um documento em HTML, todo o seu contedo dever ser delimitado pelas tags HTML de abertura e fechamento, como no exemplo: .... a sua pgina ... 40

A tag e delimita o cabealho do documento. Geralmente h poucas tags na parte da pgina. Voc nunca deve incluir no cabealho parte alguma do texto de sua pgina. Alm do ttulo da pgina (< TITLE> ...

de uso correto da tag :

), no cabealho so inseridas tambm tags utilizadas para indexao do documento HTML e para relacionamento com documentos externos (javascript, CSS, etc...). Eis um exemplo tpico

ESTE MEU TTULO

Campo O elemento , por exemplo, define um ttulo, que mostrado no alto da janela do navegador. Todo documento web deve ter um ttulo; este ttulo referenciado em buscas pela rede, dando uma identidade ao documento. Para ver na prtica a importncia do ttulo, se voc adicionar uma pgina com ttulo aos seus Favoritos (Bookmarks), o ttulo da pgina se torna a ncora de atalho para ela. Por isso sugerido que os ttulos dos documentos sejam sugestivos, evitando-se ttulos genricos como Introduo. O ttulo tambm bastante significativo para a listagem de uma pgina nos resultados de pesquisas nos catlogos da internet. As tags so sempre includas no cabealho da pgina, entre as tags e , e descrevem o contedo da mesma como no exemplo anterior. Voc pode ter apenas um ttulo na pgina, e o ttulo pode conter somente texto simples, ou seja, no pode haver outras tags no ttulo. Escolha um ttulo curto, mas que descreva o contedo da pgina.

Unidade 2

Campo Alm do ttulo, contm outras informaes de importncia para os robs de pesquisa, indicadas nos campos . Os campos tm dois atributos principais:

NAME ,

indicando um nome para a informao;

que faz uma correspondncia com campos de cabealho do protocolo HTTP; a informao deste campo pode ser lida pelos navegadores e provocar algumas aes.

HTTP-EQUIV,

Os atributos so partes extras das tags da HTML que contm opes ou outras informaes sobre a tag em si.

A Sintaxe refere-se s regras para a construo de um comando ou instruo.

Acompanhe a sintaxe seguinte, como modelo de uso dos atributos (NAME e HTTP-EQUIV): Ttulo do Documento

Um documento, por exemplo, pode ter as seguintes informaes:

Ttulo da Janela

Alguns valores dos atributos META NAME so inseridos automaticamente por alguns editores, por exemplo: Author. Os campos Description e KeyWords ajudam a classificao da pgina em algumas ferramentas de busca. Essas informaes no tm qualquer efeito na apresentao da pgina, mas servem como uma explicao ou documentao sobre as informaes contidas nela. H poucos valores para META HTTP-EQUIV em uso. O mais comum content-type, que indica o conjunto de caracteres usados na pgina. Essa informao ajuda o navegador a exibir corretamente os caracteres especiais que estiverem presentes no texto. Um exemplo de uso comum do atributo HTTP-EQUIV promover a mudana automtica de pginas, atribuindo-lhe o valor Refresh. Veja este exemplo:

Unidade 2

Onde diz:

automaticamente;

pagina.html : a pgina a ser carregada segundos : o nmero de segundos passados at que a

pgina indicada seja carregada.

Como comentado no exemplo, o efeito interessante, mas para que serve? Se no pensarmos em uma finalidade til para esse efeito, camos na tentao de us-lo toa. A aplicao mais utilizada a atualizao automtica de um documento que, por exemplo, tenha uma foto produzida por uma cmara de vdeo. Voc pode forar, com o Refresh (atualizador), a atualizao dessa pgina, mostrando para o usurio sempre uma imagem mais atual de algum evento focalizado pela cmara. Outra utilizao em chats, ou em pginas que desviem a navegao atravs de documentos desenvolvidos para navegadores avanados.Uso de META tags! O uso de META tags no obrigatrio. At poucos anos atrs, elas eram consideradas essenciais para uma pgina ter bom posicionamento nos resultados das pesquisas em catlogos da web. Com o tempo, no entanto, os responsveis pelos catlogos viram que os autores de pginas abusavam das tags META, colocando palavras-chave em demasia para enganar os critrios de catalogao. Atualmente, nenhum dos catlogos mais conceituados considera as palavras-chave contidas em META tags.

Ainda no exemplo anterior, se voc observar atentamente, alm das tags TITLE e META, a ltima tag utilizada no cabealho foi LINK. Esta tag tem a funo de fazer um relacionamento com algum documento externo.

O atributo REL a identificao do tipo de formato do documento. O valor stylesheet indica que se trata de folhas de estilo. Poderiam ser outro valores, como por exemplo script, que indicaria arquivo de funes java script. HREF o caminho fsico do arquivo. Neste caso, existe um arquivo chamado folhaestilo.css no prprio diretrio do HTML.

o corpo do documento. Tudo que estiver contido em ser mostrado na janela principal do seu navegador. pode conter cabealhos, pargrafos, listas, tabelas, links para outros documentos, imagens, formulrios, animaes, vdeos, sons e scripts embutidos. Estas duas tags, , delimitam todo o contedo do site. a que aparecero os textos, as imagens, o fundo de tela, entre outras coisas. Dentro da tag voc conseguir especificar os seguintes atributos:

BACKGROUND (configura a imagem que voc deseja como fundo de tela) - indica a URL da imagem a ser replicada no fundo da pgina, como uma marca d`gua. Para efeitos de design, possvel fixar a imagem de fundo, de modo que ela no se mova junto com o texto, ao se rolar a pgina. Exemplo: Neste exemplo, o arquivo de imagem deve estar no mesmo diretrio do arquivo HTML.

BGCOLOR (cor de fundo) - a cor de fundo da tela. Quando no indicada, o navegador ir mostrar uma cor padro, geralmente o cinza ou branco; alguns editores podero estabelecer o branco para o fundo da pgina. Exemplo:

Unidade 2

O atributo cor pode ser utilizado em todas as tags, tanto pode ser o nome de uma cor (RED, BLUE, BLACK, etc...) ou a codificao da cor em representao hexadecimal (#FF00FF, #C42A1F, etc...).

TEXT (cor do texto padro) - a cor padro de todo o texto da pgina. Cor dos textos da pgina (padro: preto). Exemplo:

LINK (cor dos links) - determina a cor de todos os links da pgina. Cor dos links (padro: azul). Exemplo:

VLINK (cor dos links visitados) - determina a cor de todos os links j visitados na pgina. Cor dos links, depois de visitados (padro: azul escuro ou roxo). Exemplo: ALINK (cor dos links ativos) - determina a cor dos links ativos. Cor dos links, quando acionados (padro: vermelho). Exemplo:

Acompanhe a sintaxe seguinte, como modelo de uso dos atributos especficos do : contedo

O exemplo seguinte determina que a cor de fundo do site seja amarela, o texto seja preto, os links ainda no visitados sejam46

azuis, os links j visitados sejam roxos, e os links ativos sejam verdes: contedo

Os valores das cores podem ser dados tambm em hexadecimal, equivalentes a cores no padro RGB (Red, Green, Blue). Existem tabelas de cores com esses valores, mas grande parte dos editores j oferece uma interface bem amigvel, atravs da qual escolhemos as cores desejadas.

Voc Sabia?O sistema hexadecimal um sistema de numerao vinculado informtica, j que os computadores interpretam as linguagens de programao em bytes, que so compostos de oito dgitos. medida que os computadores e os programas aumentam a sua capacidade de processamento, eles funcionam com mltiplos de oito, como 16 ou 32. Por este motivo, o sistema hexadecimal, de 16 dgitos, um standard na informtica. Como o nosso sistema de numerao s dispe de dez dgitos, devemos incluir seis letras para completar o sistema. Estas letras e o seu valor em decimal so: A = 10, B = 11, C = 12, D = 13, E = 14 e F = 15. A utilizao do sistema hexadecimal nos computadores deve-se a que um dgito hexadecimal representa quatro dgitos binrios (4 bits), portanto dois dgitos hexadecimais representam oito dgitos binrios (8 bits = 1 byte) que, como sabido, a unidade bsica de armazenamento de informao.Fonte: http://pt.wikipedia.org/wiki/Hexadecimal.

Unidade 2

Navegadores que seguem a definio de HTML 3.2 em diante, tambm aceitam 16 nomes de cores, tirados da paleta VGA do Windows - por exemplo, podemos escrever BGCOLOR=BLUE. Porm os navegadores mais antigos no apresentam as cores indicadas.

Criando uma pgina HTMLA melhor maneira de voc aprender a escrever pginas de web fazendo. Vamos ao primeiro exemplo: Abra o bloco de notas e digite o cdigo a seguir. Por ora, no necessrio que voc entenda todas as tags que ele apresenta e o que significam. Voc aprender tudo sobre elas mais adiante. Este s um exemplo simples para voc comear. Primeiro exemplo Ttulo principal Este o texto do primeiro exemplo. Este o segundo pargrafo. Ttulo secundrio
Acabei de abrir uma linha. Vamos agora adicionar uma lista. Uma lista

Item 1

Item 2

Item 3

Aps criar seu arquivo HTML, grave-o em alguma pasta com seus trabalhos. Lembre-se de gravar estes arquivos, escolhendo a opo Salvar Como. Existem duas regras que voc dever seguir ao escolher um nome para o arquivo:

o nome do arquivo dever ter uma extenso .html (ou .htm). Por exemplo, meuarquivo.html ou principal.htm. A maioria dos softwares exigir que os seus arquivos tenham esta extenso. Por isso, crie desde j o hbito de utiliz-la; use nomes simples e curtos. No inclua espaos ou caracteres especiais (marcadores, letras acentuadas, etc.). Use apenas letras e nmeros.

Aqui vai uma dica, se voc for utilizar o bloco de notas do Windows para editar o exemplo: no momento de gravar o arquivo, coloque o nome e extenso entre aspas duplas, por exemplo: meuarquivo.html. Este processo evitar que o arquivo seja gravado com a extenso txt (meuarquivo.html.txt), confuso ocasionada conforme a configurao do sistema operacional.

Visualizando o exemplo no navegadorAgora que voc tem um arquivo em HTML, inicialize o seu navegador da web. Voc no precisa estar conectado com a rede, uma vez que no vai abrir pginas armazenadas em outros sites. No seu navegador, procure um comando no menu ou boto para abrir um arquivo. Esse comando permitir que voc navegue pelo seu disco local, solicitando ao navegador que leia um arquivo em HTML do seu disco; analise-o e apresente-o, como se fosse uma pgina j existente na web. Ao usar o seu navegador, voc pode criar e testar os seus arquivos HTML no seu computador. Uma outra forma de abrir o arquivo dar dois cliques sobre ele. Abrir o navegador que estiver configurado como navegador padro. Se o que for apresentado na tela no se parecer com o que est ilustrado na figura 2.1, a seguir, ento volte ao bloco de notas, abra o seu arquivo criado e compare-o com o exemplo apresentado acima. Verifique se todas as tags tm tags de49

Unidade 2

fechamento e se todas as tags esto descritas corretamente. Assim, basta corrigir o arquivo e grav-lo novamente com o mesmo nome. Para isso, voc no precisa sair do navegador.

Figura 2.1 Visualizando o primeiro exemplo no navegador

Em seguida, retorne ao navegador. Deve haver um item, no menu ou boto, denominado Atualizar (recarregar). O navegador ler a nova verso do seu arquivo e, ento, voc poder editar e visualizar o documento sucessivamente, at que tudo esteja correto. Mas no se esquea de verificar tambm a extenso de seu arquivo, caso o seu navegador apresente o texto HTML real. A extenso importante. Vamos exercitar? Que tal, agora, voc usar o mesmo exemplo anteriormente criado e atribuir tag alguns atributos, como por exemplo, a cor de fundo e a cor do texto? Vamos tentar?

Para escrever documentos HTML no necessrio mais do que um editor de texto simples e conhecimentos dos cdigos que compem a linguagem. Os cdigos, conhecidos como tags, servem para indicar a funo de cada elemento da pgina na rede.

Quando uma pgina em HTML analisada por um navegador, toda a formatao feita manualmente espaos, tabulaes, quebras de pargrafos, etc. ignorada. O nico elemento capaz de formatar uma pgina em HTML so as tags de HTML. Se voc passar horas editando cuidadosamente um arquivo de texto simples para ter pargrafos e colunas de nmeros bem formatados, mas se esquecer de incluir as tags, quando for ler a pgina em um navegador HTML, todo o texto fluir em um nico pargrafo. E todo o seu trabalho ter sido em vo. A vantagem de todos os espaos em branco serem ignorados est no fato de voc poder incluir as suas tags onde desejar.

H uma nica exceo a essa regra: uma tag denominada . Voc aprender sobre ela mais adiante.

CabealhoOs cabealhos so usados para dividir sees do texto. A HTML define 6 nveis de cabealho. As tags de cabealho tm o seguinte formato:

texto do cabealho de nvel 1

Os nmeros indicam os nveis de cabealho (de H1 a H6). Quando apresentados na tela, eles aparecem em letras maiores, em negrito, centralizados, sublinhados ou em letras maisculas, de alguma forma que os destaque do restante do texto. O Unidade 2

deixa a letra maior que o e assim por diante. Veja o seguinte exemplo:

Este um cabealho de nvel 1 Este um cabealho de nvel 2 Este um cabealho de nvel 3 Este um cabealho de nvel 4 Este um cabealho de nvel 5 Este um cabealho de nvel 6

Lembre-se de que todas as tags acima devem estar dentro da BODY. Esses cabealhos so mostrados da seguinte forma:

Figura 2.2 Visualizando exemplo de cabealho.

Aninhamento colocar documentos dentro de outro documento. Em HTML, aninhar colocar tags uma dentro das outras.

Aninhamento de cabealhosOs cabealhos no podem ser aninhados, isto , a formatao pode produzir algum resultado prximo ao desejado, como no exemplo a seguir. Vamos testar?

Este um cabealho de nvel 1 dentro de um cabealho de nvel 2

Figura 2.3 Visualizando exemplo de no aninhamento de tag.

Porm o mais comum que os navegadores entendam a formatao anterior como:

Este um cabealho de nvel 1 dentro de um cabealho de nvel 2

Ou seja, os navegadores interpretam a formatao anterior como se estivesse faltando uma etiqueta de fechamento de antes de e faltando uma abertura de depois do fechamento de , e oferecem o seguinte resultado:

Figura 2.4 Visualizando exemplo de aninhamento de tag.

Unidade 2

Os editores WYSIWYG naturalmente no permitem o aninhamento de cabealhos.

Alinhamento dos cabealhosOs cabealhos tm atributos de alinhamento:Cabealho centralizado Cabealho alinhado direita Cabealho alinhado esquerda (default)

Verifique o resultado no seu navegador.

Seo 3 - SeparadoresComo voc viu no primeiro exemplo, as quebras de linha do texto fonte no so significativas na apresentao de documentos em HTML. Para organizar os textos, voc precisa, ento, de separadores tais como os apresentados aqui.

Quebra de linhaQuando queremos mudar de linha, usamos o elemento
. Isso s necessrio, quando queremos uma quebra de linha em determinado ponto, pois os navegadores j quebram as linhas automaticamente, para apresentar os textos. Quando um navegador da web encontra uma tag
, ele reinicia o texto na margem esquerda da linha seguinte a essa tag. Voc pode usar a tag
dentro de outros elementos, como por exemplo, pargrafos ou itens de uma lista. Essa tag no possui espao extra acima ou abaixo da nova linha, nem altera a fonte ou o estilo atual. Ela apenas reinicia o texto na linha seguinte. Com sucessivos
, podemos inserir diversas linhas em branco nos documentos. Este elemento tem um atributo especial (CLEAR), que utilizado com imagens que tm texto ao redor, conforme ser apresentado na unidade 5.54

PargrafosOs pargrafos so digitados normalmente. A tag serve para indicar o incio de um novo pargrafo. As tags e delimitam um pargrafo no texto. possvel, neste caso, no fechar a tag , ou seja, omitir o , sem prejudicar o resultado final. Ao contrrio da quebra de linha, com o uso do deixada uma linha em branco antes do prximo pargrafo. Quebra de linha no deixa uma linha em branco. O atributo que deve ser utilizado com a tag o ALIGN, podendo ter os seguintes valores que delimitam o alinhamento do pargrafo:

LEFT - se voc quiser que o texto fique alinhado esquerda. Exemplo:

RIGHT - se voc quiser que o texto fique alinhado direita. Exemplo:

CENTER - se voc quiser que o texto fique alinhado ao centro. Exemplo:

Neste ltimo caso, a tag ganhou uma opo (ALIGN=CENTER). Por isso preciso utilizar uma tag de fechamento () para indicar que apenas aquele pargrafo receber um alinhamento diferente. Observe o exemplo 1, que aborda como inserir uma linha em branco entre pargrafos:

Pargrafo 1;Pargrafo 2.

Unidade 2

Verifique se o resultado no seu navegador ficou prximo deste:

Figura 2.5 Exemplo de uso de pargrafo.

Acompanhe o exemplo 2, que combina a insero de linha entre pargrafos e quebras de linha:Pargrafo 1;
linha 1 do pargrafo 1,
linha 2 do pargrafo 1.Pargrafo 2;
linha 1 do pargrafo 2,
linha 2 do pargrafo 2.

O resultado da marcao acima no navegador :

Figura 2.6 Exemplo de pargrafo e quebra de linha.

Veja o exemplo 3 sobre o alinhamento de pargrafos, alm de insero de linhas entre pargrafos e quebra de linha:

Assim como os trens, as boas ideias s vezes chegam com atraso.
(Giovani Guareschi) Como diz o provrbio chins: melhor passar por ignorante uma vez do que permanecer ignorante para sempre. Este o alinhamento padro (default), e por isso no vou colocar nenhuma frase especial.

Verifique o seguinte resultado no navegador:

Figura 2.7 Exemplo de alinhamento de pargrafo.

Linha horizontalA tag utilizada para colocar linhas horizontais em uma pgina. Essa linha tem diversos atributos, oferecendo resultados diversos. As linhas (ou fios) so excelentes para separar visualmente sees da pgina da web antes dos cabealhos ou para separar o texto de uma lista de itens. Voc pode determinar a altura, a largura e o alinhamento da linha.

Unidade 2

Observe o exemplo 1:

Onde: Size: configura a espessura da linha, no exemplo insere uma linha de largura de 8 pixels. Width: configura a largura da linha (pode ser em porcentagem ou em pixels). No exemplo, insere uma linha que ocupa 75% do espao horizontal disponvel. Align: determina o posicionamento da linha. Noshade: indica sem efeito tridimensional.

Figura 2.8 Visualizando uma linha horizontal centralizada no navegador.

Considere o exemplo 2:

Com estes comandos, voc insere uma linha de comprimento 30% (do espao horizontal disponvel), alinhada direita, sem efeito tridimensional. Verifique o resultado no seu navegador.

Figura 2.9 Exemplo de linha horizontal.

Tambm veja o exemplo 3:

A utilizao de aspas duplas nos valores dos atributos opcional, porm considerada uma boa prtica. Neste caso, voc insere uma linha de altura 70 (pixels), comprimento 7 (pixels), alinhada esquerda (o Netscape, aparentemente, no aceita esta formatao de ). Verifique o resultado no seu navegador. Ter o aspecto abaixo? Se afirmativo, ento est correto.

Figura 2.10 Exemplo de linha horizontal.

Unidade 2

Seo 4 - Alinhamento de textoNesta seo, voc aprender como alinhar um bloco de texto em sua pgina da web. Voc estudar diversas tags para esta finalidade (centralizar um texto, formatar um bloco de texto). Ao fim, saber qual a melhor alternativa para tornar sua pgina da web melhor.

Alinhamento de bloco de textoAs tags e marcam uma diviso lgica de um documento, formatao bastante usada atualmente, e configuram o alinhamento de um bloco todo de texto. O alinhamento pode ser esquerda (left), direita (right) e ao centro (center).A tag utilizada para delimitar um bloco de tags HTML de qualquer tipo e atinge todas as tags e o texto contido entre as de abertura e fechamento.

Existem vantagens da utilizao da tag em vez do atributo ALIGN:

Essa tag precisa ser usada apenas uma vez, ao contrrio do atributo ALIGN, que tem de ser includo em diversas tags. A tag pode ser usada para alinhar qualquer elemento (cabealho, pargrafos, citaes, etc.). O atributo ALIGN encontra-se disponvel apenas em um nmero limitado de tags.

Veja o seguinte exemplo:

Exemplo de texto esquerda Testando esquerda

Verifique o seguinte resultado no navegador:

Figura 2.11 Exemplo de alinhamento de bloco de texto esquerda.

Centralizao de textoAs tags e centralizam os elementos textos, imagens, tabelas - que estiverem dentro de sua marcao. A tag funciona de maneira idntica , centralizando todo o contedo HTML contido entre as tags de abertura e de fechamento. Acompanhe o seguinte exemplo:

Exemplo de texto centralizado Testando.

Verifique o resultado no seu navegador:Unidade 2

Figura 2.12 - Exemplo de alinhamento de bloco de texto centralizado.

MargemOutro controle sobre o alinhamento dos elementos da pgina pode ser conseguido atravs de mudana, de configurao, de margem. O texto sempre comea a uma determinada distncia da janela do navegador (um pouco diferente em cada navegador). s vezes, ser necessrio aumentar essa margem e fazer com que o texto comece mais para dentro da pgina. O par de tags e serve para aumentar a margem. O efeito dessa tag pode ser acumulado para conseguir margens maiores. Veja os exemplos:

Texto com mais margem Texto com mais margem ainda

O resultado no seu navegador parece-se com este da figura abaixo?

Figura 2.13 Exemplo de configurao de margem.

A tag utilizada, principalmente, na criao de citaes. Geralmente, as citaes so destacadas em relao ao restante do texto atravs do recuo.Se voc no deseja aumentar a margem do texto, no utilize a tag . Por padro, os cdigos HTML no tm margem definida.

Texto pr-formatadoExiste ainda outra forma de modificar o alinhamento. a utilizao do par de tags e . Usando essas tags, todos os espaos e entradas de pargrafo (o resultado da tecla ENTER) so respeitados. Em um texto normal, qualquer espao a mais entre duas palavras ignorado pelo navegador. Com a pr-formatao, pode-se controlar o espaamento com a barra de espao e colocar o texto em, praticamente, qualquer lugar da pgina. Apesar da vantagem desta forma de alinhamento arbitrrio, a tag muda o tipo de caractere para uma fonte monoespaada. Uma vez que mantm o texto original, no se deve forar espaos com essa marcao dentro de outra marcao que j apresente tabulaes e espaos especficos.

Uma fonte monoespaada aquela na qual todos os caracteres ocupam o mesmo espao horizontal, ao contrrio da fonte proporcional, na qual o i ocupa menos espao do que o a, por exemplo.

Unidade 2

Acompanhe este exemplo:

Este texto est pr-formatado. A fonte monoespaada e as entradas de pargrafo, assim como os espaos adicionais, so respeitadas. Neste caso, a margem esquerda foi aumentada em cinco caracteres. O texto normal recebe fonte proporcional e ignora a presena de espaos a mais no meio do texto. Entradas de pargrafos adicionais tambm so ignoradas.

Vamos ver o resultado no navegador?

Figura 2.14 Exemplo de fonte monoespaada.

SnteseComo voc aprendeu, a HTML uma linguagem de marcao de texto usada para descrever documentos de hipertexto na WWW, que descreve uma pgina e o seu contedo, no a sua aparncia. Nesta unidade, voc tambm aprendeu a estrutura bsica de um documento HTML, como criar e visualizar arquivos em HTML simples. Aprendeu ainda a usar as tags de HTML apresentadas na tabela abaixo.TAG... ... ... ... ... ... ... ... ... ...
... ... ...

USOToda a pgina em HTML O cabealho, o prlogo da pgina em HTML Todo o restante do contedo da pgina em HTML O ttulo da pgina Ttulo de nvel 1 Ttulo de nvel 2 Ttulo de nvel 3 Ttulo de nvel 4 Ttulo de nvel 5 Ttulo de nvel 6 Nova linha Pargrafo Alinhar o texto ao centro Pr-formatao Margem Linha Horizontal Alinhamento de bloco de texto

Unidade 2

Atividades de autoavaliaoCaro(a) aluno(a), leia cada enunciado com ateno e responda as questes que seguem. 1. Em muitas pginas da web, as tags de estrutura de pgina (, , ) no so usadas. Devo inclu-las, mesmo que as pginas funcionem bem sem elas? Por qu?

2. Agora que voc sabe o que HTML, conhece algumas tags, possui os conhecimentos suficientes para criar pginas simples em HTML e at navegou por arquivos em HTML (atravs dos exemplos), crie uma pgina inicial em HTML com o nome de index.html, utilizando tags e atributos estudados nesta unidade.

Saiba maisAprofunde os contedos estudados nesta unidade ao consultar as seguintes referncias: MARCONDES, Christian Alfim. HTML 4.0 fundamental: a base da programao para web. So Paulo: Editora rica, 2005. Tambm consulte o seguinte site para aprofundar seus estudos: (Instituto de Cincias Matemticas e de Computao)

Unidade 2

UNIDADE 3

Listas e VnculosObjetivos de aprendizagem

Conhecer e criar as tags para listas. Realizar comentrios atravs do cdigo HTML. Fazer os vnculos realizados em HTML.

Sees de estudoSeo 1 Listas Seo 2 Comentrios Seo 3 Tudo sobre vnculos

Para incio de estudoAlm dos cabealhos e pargrafos, provvel que o elemento HTML mais comum que voc usar seja a lista. Depois de estudar esta unidade, voc saber criar uma lista em HTML e, mais que isso, saber criar cinco tipos de listas, um tipo para cada ocasio. A HTML define estes cinco tipos de listas:

Listas numeradas ou ordenadas; Listas com marcadores ou no ordenadas; Listas de definio ou de glossrio; Listas de menu e Listas de diretrio.

Voc tambm aprender a realizar um comentrio e como estabelecer os vnculos em HTML. Vamos comear!

Seo 1 - ListasNesta seo, voc estuda agora os cinco tipos de listas em HTML. Todas as tags de lista possuem em comum estes elementos:

a lista inteira delimitada pelas tags de abertura e fechamento referentes ao tipo da lista; cada item da lista tem sua prpria tag.

Listas Numeradas ou OrdenadasAs listas numeradas so delimitadas pelas tags ... e cada item comea com a tag , onde:

OL = Ordered List (lista ordenada) LI = List Item (item de lista)

A tag unilateral, voc no precisa especificar a tag de fechamento. A existncia da prxima ou da tag de fechamento indica o final desse item na lista. Quando o navegador interpreta uma lista ordenada, ele numera (e em geral recua) cada um dos elementos de forma sequencial. Voc no precisa numer-los. Acompanhe este exemplo: item de uma lista numerada item de uma lista numerada, que pode ser to grande quanto se queira, sem que seja necessrio se preocupar com a formatao das margens de texto item de lista numerada Listas ordenadas so aquelas em que cada item tem um nmero.

Visualize o resultado em seu navegador:

Figura 3.1 Exemplo no navegador de uma lista ordenada.

Unidade 3

Utilize listas numeradas somente quando quiser indicar que os elementos esto ordenados, ou seja, nos casos em que os itens devero ser apresentados nessa ordem especfica.

As listas numeradas tm vrios atributos que voc pode utilizar para personalizar sua apresentao no navegador. Esses atributos permitem controlar vrias caractersticas das listas, incluindo o esquema de numerao a ser usado, e a partir de que nmero se vai iniciar a contagem (se voc no quiser iniciar em 1). Voc pode personalizar listas ordenadas de duas maneiras:

como elas so numeradas; e

em que nmero a lista comea.

A HTML fornece o atributo TYPE, que pode assumir cinco valores para definir o tipo de numerao a ser usado na lista:

1 - especifica que os algarismos arbicos padres devem ser usados para numerar a lista (isto : 1, 2, 3, 4, etc.); a - especifica que as letras minsculas devem ser usadas para numerar a lista (isto : a, b, c, d, etc.); A - especifica que as letras maisculas devem ser usadas para numerar a lista (isto : A, B, C, D, etc.); i - especifica que os algarismos romanos minsculos devem ser usados para numerar a lista (isto : i, ii, iii, iv, etc.); I - especifica que os algarismos romanos maisculos devem ser usados para numerar a lista (isto : I, II, III, IV, etc.).

Os tipos de numerao podem ser especificados na tag , como no exemplo a seguir, que utiliza o padro TYPE=a.

item de uma lista numerada item de uma lista numerada, que pode ser to grande quanto se queira, sem que seja necessrio preocupar-se com a formatao das margens de texto item de lista numerada

Visualize o seguinte resultado no navegador:

Figura 3.2 Exemplo de lista ordenada personalizada.

Os navegadores da web geralmente ignoram os atributos que no entendem. Por exemplo, se um navegador no suportar o atributo TYPE da tag OL, ele simplesmente vai ignor-lo quando o encontrar. O atributo TYPE tambm pode ser aplicado na tag , mudando efetivamente o tipo de numerao no meio da lista. Quando o atributo TYPE usado na tag , ele afeta o item em questo e todas as entradas que venham a seguir na lista.

Usando o atributo START, voc pode especificar o nmero ou letra que inicia sua lista. O ponto inicial padro 1, claro. Usando START, voc pode mudar esse nmero. Por exemplo, iniciaria a lista no nmero 4, enquanto iniciaria a numerao com c e percorreria o alfabeto a partir da.Unidade 3

Veja o exemplo a seguir: item de uma lista numerada item de uma lista numerada, que pode ser to grande quanto se queira, sem que seja necessrio se preocupar com a formatao das margens de texto item de lista numerada

O navegador apresenta o seguinte resultado:

Figura 3.3 Exemplo no navegador de uma lista ordenada personalizada.

Assim como no atributo TYPE, voc pode mudar o valor do nmero de uma entrada em qualquer ponto da lista. Isto feito usando-se o atributo VALUE na tag . A atribuio de um VALUE em uma tag reinicia a numerao na lista a partir da entrada afetada, como no exemplo a seguir: item 1 item 2 item 3 item 55 item 56

Veja o resultado em seu navegador:

Figura 3.4 Exemplo no navegador de uma lista ordenada personalizada.

Listas com Marcadores No ordenados ou No numeradosListas no ordenadas so aquelas em que os elementos podem ser apresentados em qualquer ordem. Estas listas se assemelham s listas ordenadas na HTML. A diferena que cada lista indicada atravs das tags

, em vez de . Os elementos da lista so separados por , como nas listas ordenadas. Confira o exemplo:

item 1

item 2

item 3

item 4

item 5

E visualize-o no navegador:

Figura 3.5 Exemplo no navegador de uma lista com marcadores.

Unidade 3

Listas no ordenadas so aquelas em que os itens so marcadores ou outros smbolos.

Assim como as listas ordenadas, as listas no ordenadas podem ser personalizadas. De acordo com a especificao HTML, o atributo TYPE pode receber trs valores possveis, quando apresentados no Netscape Navigator:

disc - configura um disco ou marcador (este o padro), na maioria das vezes representa um crculo preenchido; square - configura um quadrado; circle - este marcador gera um crculo no preenchido em navegadores compatveis.

Confira o exemplo:

Este exemplo assim visualizado:

Figura 3.6 Exemplo no navegador de uma lista personalizada com marcadores.

Cada item de uma lista com marcadores no ordenados tambm pode ter seu atributo especfico, atravs do TYPE na tag :

um item

mais um item

ltimo item

Veja o resultado no seu navegador:

Figura 3.7 Exemplo no navegador de uma lista personalizada com marcadores.

As listas com marcadores em HTML so equivalentes s listas com marcadores do Microsoft Word. A diferena entre o resultado da marcao HTML e do Word est na mudana dos marcadores, distino que veremos mais adiante.

Unidade 3

Listas de Glossrio ou Listas de DefinioAs listas de definio so tambm chamadas listas de glossrio. Elas so um pouco diferentes das outras listas. Cada item de uma lista de glossrio tem estes dois componentes:

um termo; a definio do termo.

Uma lista de glossrio permite incluir uma descrio de cada item listado. O descritor e os descritores e fazem esta funo. Cada componente da lista de glossrio possui sua prpria tag:

: para o termo (Definition Term) : para a respectiva definio (Definition Definition)

Essas tags so unilaterais e, em geral, apresentadas aos pares, embora a maioria dos navegadores possa tratar com definies ou termos especficos. A lista de glossrio inteira indicada pelas tags ... (Definition List). Eis um exemplo de uma lista de glossrio: termo a ser definido definio termo a ser definido definio

Considere a seguinte visualizao:

Figura 3.8 Exemplo no navegador de uma lista de glossrio.

Este tipo de lista muito utilizado para diversos efeitos de organizao de pginas, pois permite a tabulao do texto. Um exemplo de ocorrncia desta lista so os ndices de navegao presentes em muitas pginas de tutoriais na web.

Listas de Menu e Listas de DiretriosListas de menu so listas de itens ou pargrafos curtos sem marcadores, nmeros ou qualquer outro smbolo. Essas listas se assemelham s listas simples de pargrafos. A diferena que alguns navegadores podem recu-las ou format-las de maneira diferente dos pargrafos normais. As listas de menu so delimitadas pelas tags e , e cada item da lista indicado pela tag . As listas de diretrios so destinadas a itens ainda mais curtos do que os da lista de menu e devem ser formatadas pelos navegadores horizontalmente, em colunas. As listas de diretrio so delimitadas pelas tags e e a tag identifica cada item da lista. Veja o exemplo abaixo: ma laranja goiaba

Unidade 3

Veja o resultado no seu navegador, que como se fosse mostrada uma lista. Conforme descrito anteriormente, o que diferencia o recuo que alguns navegadores podem adotar.

Figura 3.9 Exemplo no navegador de uma lista de menu e lista de diretrio.

Embora as listas de menu e de diretrio existam na especificao HTML 2.0, no so muito utilizadas em pginas na web. Na HTML 4.0 elas so consideradas diferentes das listas no ordenadas e das listas de glossrio, por serem representadas de modo diferente, na aparncia, em relao s listas no ordenadas ou de glossrio, mas os navegadores ainda no as implementam de modo diferente. Considerando que a maioria dos navegadores formata menus e diretrios da mesma forma que as listas de glossrio ou listas no ordenadas, e no da forma como esto descritas na especificao, provvel que a melhor opo seja utilizar os outros 3 formatos de lista. (LEMAY; LAURA, 1998). A maioria dos navegadores aceita o uso da tag fora de uma estrutura de lista, isolada na pgina, e a formatar como um pargrafo simples ou como um item com marcador, mas sem recuo. Contudo, segundo a verdadeira definio HTML, o uso de uma tag invlido desta forma. Por isso, as pginas em HTML adequadas no devem us-la assim. E como estamos procurando criar pginas em HTML corretas, voc no dever fazer uso desse mtodo. Assim, inclua sempre os seus itens nas listas a que pertencem.

Aninhamento de ListasO que acontece quando voc insere uma lista em outra? J parou para pensar? J tentou criar? As listas podem ser aninhadas, sim. Apenas inclua a estrutura inteira de uma lista na outra lista, como se fosse um de seus elementos. Digite o exemplo seguinte no bloco de notas e verifique seu resultado no navegador. termo a ser definido definio item de uma lista numerada item de uma lista numerada

item de uma lista

item de uma lista numerada termo a ser definido definio

O recuo de listas aninhadas no prprio cdigo HTML ajuda a mostrar, no layout final, o seguinte relacionamento entre as listas:

Figura 3.10 Exemplo no navegador de listas aninhadas.

Unidade 3

Considere o seguinte exemplo:

Exemplo

3

Vamos verificar o resultado em seu navegador? Que tal publicar na ferramenta EXPOSIO do EVA?Boa parte dos editores HTML (WYSIWYG ou no) insere marcaes que no existem em HTML. Exemplos tpicos so , , e

. Porm, como essas tags no so reconhecidas pelos navegadores, elas no causam efeito colateral algum nos documentos.

Um exemplo deste caso:

Documentos bsicos

Documentos avanados

formulrios

CGI

contadores

relgios

Detalhes sobre imagens

Veja o resultado no navegador:

Documents

LINGUAGENS DE PROGRAMAÇÃO I - Unisul - Livro completo 2010