Desenvolvimento para Internet
Andréa Rodrigues Graduada em ciências da computação; mestrado em sistemas distribuídos; doutorado em educação pela UFRN. Atualmente, trabalha no IFPR, onde atua como coordenadora de inclusão; trabalha no projeto de educação a distância e é professora de cursos técnicos, ministrando disciplinas na área de programação e desenvolvimento web. Sua área de pesquisa é Acessibilidade e Usabilidade da Internet, pesquisando principalmente a interatividade de alunos com necessidades educativas especiais.
Direção Geral Direção Editorial Edição Gerência de Editoração Revisão Projeto Gráfico e Capa Editoração
Jean Franco Sagrillo Jeanine Grivot Anna Carolina Mendes Curto Marcelene Tomeleri Jeferson Turbay Braga Adriana de Oliveira Ana Paula Vialich
Rodrigues, Andréa Desenvolvimento para Internet / Andréa Rodrigues. – Curitiba, PR: Editora LT, 2010. Bibliografia ISBN.: 978-85-63687-01-2 1. Ciência da computação 2. Informação – Sistema de armazenagem e recuperação 3. Informática I. Título CDD: 004
10-00981 Índices para catálogo sistemático: 1. Informática: Ciência da computação 004 Telas padrão Microsoft reproduzida com permissão da Microsoft Corporation.
2010 Todos os direitos reservados pela Editora do Livro Técnico Edifício Comercial Sobral Pinto Avenida Cândido de Abreu 469, 2º andar, conjs. nºs 203-205 Centro Cívico – CEP: 80530-000 Tel.: 41 3027-5952 / Fax: 41 3076-8783 www.editoralt.com.br Curitiba – PR
Em conformidade com o Catálogo Nacional de Cursos Técnicos este livro é indicado, entre outros, para os seguintes cursos: • Técnico em Informática • Técnico em Informática para Internet • Técnico em Manutenção e Suporte em Informática • Técnico em Redes de Computadores.
Apresentação
A Internet já faz parte do nosso cotidiano. Nela, consultamos a programação de cinema, realizamos compras, movimentamos nossa conta bancária, enviamos e-mails, trabalhamos, nos divertimos e estudamos. No entanto, até agora realizávamos estas ações apenas como usuários. Com o estudo deste livro, vamos aprender como desenvolver nossas próprias páginas, tanto para uso pessoal, quanto, principalmente, para nos tornarmos profissionais no desenvolvimento de páginas e sites na Internet. O desenvolvimento que possibilita o uso dos recursos da Internet, em uma primeira instância, pode ser realizado por qualquer pessoa. Os recursos que iremos apresentar são simples. Com um pouco de dedicação, ao final do livro, você poderá ter um belíssimo site, pois aprenderá algumas tecnologias básicas utilizadas no desenvolvimento de páginas da Internet. Para você que é aluno ou um profissional de informática e precisa aprender a desenvolver suas próprias páginas, esse é um primeiro e importante passo. Podemos criar páginas envolvendo diversas tecnologias, algumas consolidadas e outras emergentes, no entanto a base obtida com este livro será fundamental para que futuramente você possa trabalhar com recursos mais sofisticados e complexos. Este livro também é voltado para aqueles que querem conhecer o assunto desenvolvimento de sites para uso pessoal ou desejam iniciar em uma promissora profissão: a de desenvolvimento de sistemas computacionais que utilizem a tecnologia da Internet. O mercado de trabalho é amplo e promissor para profissionais que possuem o conhecimento necessário para a implementação de soluções que operem no ambiente da Internet. Tal fato precisa levar em conta o usuário e as diversas tecnologias de visualização, além da necessidade de adicionar interatividade às páginas web, usando a linguagem JavaScript.
O livro tem duas partes. Na primeira, é apresentada a linguagem HTML e uma introdução ao estilo Cascata, que consistem na base do desenvolvimento para a Internet e são importantes em todas as fases de desenvolvimento dos sites. Já na segunda parte, apresentamos ao leitor a linguagem aplicações web, que de fato, tem se tornado um padrão para novos desenvolvimentos de sistemas corporativos e pessoais. A linguagem de marcação (Hypertext Markup HTML), é fundamental para apresentação das aplicações nos browsers. O uso de CSS (Cascading Style Sheets) torna o projeto e manutenção de páginas mais simples e elegantes. Por sua vez, o uso do JavaScript permite criar páginas dinâmicas e implementar regras junto ao código HTML. O objetivo principal desta obra é abordar os conceitos e comandos necessários para o desenvolvimento de páginas de forma simples e em uma linguagem acessível. O material a ser apresentado neste livro pode ser utilizado também na disciplina de Programação para a Internet I dos cursos de Informática, ou em cursos livres nos quais o objetivo seja ensinar os primeiros passos no desenvolvimento de ações para a Internet, por meio de lições curtas.
SUMÁRIO 9
CAPÍTULO 1 – HTML História da Internet ............................................................................................... 9
Atividades................................................................................................................ 10 Conceitos Básicos.................................................................................................. 11 Atividades................................................................................................................ 12 O Que é HTML......................................................................................................... 12 Atividades................................................................................................................ 14 Escrevendo sua Primeira Página . ........................................................................ 14 Atividades................................................................................................................ 16 Atributos ................................................................................................................. 16 Atividades................................................................................................................ 18 Conhecendo Mais Tags.......................................................................................... 19 Atividades................................................................................................................ 21 Atributos do Corpo da Página................................................................................ 21 Atividades................................................................................................................ 24
25
CAPÍTULO 2 – Listas Listas Não Ordenadas . ......................................................................................... 25 Atividades................................................................................................................ 27
Listas Ordenadas . ................................................................................................. 28 Atividades................................................................................................................ 30 Links........................................................................................................................ 31 Atividades................................................................................................................ 32
33
CAPÍTULO 3 – Formulários Formulários Parte I ................................................................................................ 33
Atividade.................................................................................................................. 35 Formulários Parte II ............................................................................................... 35 Atividades................................................................................................................ 37 Formulários Parte III .............................................................................................. 38 Atividades................................................................................................................ 42 Enviando Formulários............................................................................................. 42 Atividade.................................................................................................................. 43
44
CAPÍTULO 4 – Imagens Trabalhando com Imagens.................................................................................... 44 Atividades................................................................................................................ 48
49
CAPÍTULO 5 – CSS Apresentação.......................................................................................................... 49
Histórico e Origem.................................................................................................. 49 Atividades................................................................................................................ 50 A Sintaxe Básica das CSS ..................................................................................... 51 Atividades................................................................................................................ 53 A Construção da sua Primeira Folha de Estilos . ................................................. 53 Atividades................................................................................................................ 55 Bordas .................................................................................................................... 55 Atividade.................................................................................................................. 59
60
CAPÍTULO 6 – JavaScript Apresentação.......................................................................................................... 60
O Que é JavaScript.................................................................................................. 60 Caixas de Diálogo ou de Mensagem . .................................................................. 62 Comentários, Variáveis e Operadores................................................................... 66 Conversão de Valores . .......................................................................................... 68 Atividades................................................................................................................ 71
72
CAPÍTULO 7 – Estruturas Condicionais e de Repetição Estrutura Condicional............................................................................................. 72 Atividades................................................................................................................ 74
Operadores Relacionais e Lógicos........................................................................ 75 Seleção de Múltipla Escolha ................................................................................ 77 Laços de Repetição................................................................................................ 79 Atividades................................................................................................................ 82
84
CAPÍTULO 8 – Funções Atividades................................................................................................................ 86 Tipos de Funções . ................................................................................................. 87
O Objeto Math. ....................................................................................................... 90 Data e Hora............................................................................................................. 96 Exemplos de Data e Hora ..................................................................................... 98
103
CAPÍTULO 9 – Trabalhando com Strings Strings..................................................................................................................... 103
Atividades................................................................................................................ 106
107
CAPÍTULO 10 – Interagindo com o Usuário Atividades................................................................................................................ 111
O Que são Eventos? .............................................................................................. 112 Atividades................................................................................................................ 117 Referências Bibliográficas
118
1 HTML O HTML é uma Linguagem de Marcação (Hypertext Markup Language), ou seja, uma série de códigos que definem o formato ou o significado do texto. Essa linguagem de marcação é a principal ferramenta para se fazer uma página na Internet. Por meio do conhecimento da linguagem HTML, o profissional de web torna-se, desta forma, capacitado a trabalhar e montar a página web. Neste primeiro capitulo, iremos conhecer esta importante linguagem. A seguir, serão apresentados conceitos essenciais sobre HTML para a criação de sites.
História da Internet “O sucesso é a soma de pequenos esforços - repetidos dia sim, e no outro dia também.” (Robert Collier)
Antes da World Wide Web (WWW), a Internet era apenas usadas nas universidades e pelo exército, para testes, estudos, trocas de informações e arquivos. A Internet não era democrática como hoje, quando pessoas de várias partes do mundo se conhecem por meio dela. Igualmente, jornais podem publicar matérias sobre um determinado fato e esse material é acessado e lido por várias pessoas de diversos lugares do mundo ao mesmo tempo. A World Wide Web é um conjunto de documentos que se tornam acessíveis por meio da Internet. Esses documentos (ou páginas web) contêm uma tecnologia chamada hipertexto, pela qual se podem percorrer partes do documento (e outros documentos) através de pontes chamadas de links. Pode-se descrever a World Wide Web como um sistema de informação em hipertexto, gráfico, distribuído, independente de plataforma, dinâmico, interativo e global, utilizado na Internet. O hipertexto permite que você leia um texto e navegue por ele e por informações visuais de forma não linear, com base nas informações que se deseja obter em seguida. A Organização Europeia para a Investigação Nuclear (CERN) foi a responsável pela invenção da World Wide Web, ou simplesmente a web, como hoje a conhecemos. Em uma primeira fase, o sistema permitia apenas aos cientistas trocar dados.
9 HTML
A Internet é uma rede que conecta computadores do mundo inteiro. Criada em 1969 como um projeto militar, foi usada durante anos para comunicação entre universidades e institutos de pesquisa. Ela teve sua origem na década de 1960, porque o governo americano queria desenvolver um sistema para que os seus computadores militares pudessem trocar informações entre si, de uma base militar para outra, de forma segura. O sistema somente começou a ser explorado comercialmente no início dos anos 1990.
O responsável principal pela invenção foi Tim Berners-Lee. Em 1989, ele propôs um projeto de hipertexto que permitia às pessoas trabalharem em conjunto, combinando o seu conhecimento em uma rede de documentos. Foi esse projeto que ficou conhecido como Web. Ela funcionou primeiramente dentro do CERN, e no Verão de 1991 foi disponibilizada mundialmente.
www.w3c.br/sobre/
Em 1994 Berners-Lee criou o World Wide Web Consortium (W3C) onde atualmente exerce a função de diretor. Mais tarde, e em reconhecimento dos serviços prestados para o desenvolvimento global da Web, foi nomeado cavaleiro pela rainha da Inglaterra. Recentemente, Tim BernersLee foi considerado um dos maiores gênios vivos do mundo, segundo o levantamento Top100 Living Tim Berners-Lee, Diretor do W3C e criador da World Geniuses, da consultoria Creators Synectics. Wide Web.
O W3C é um consórcio de empresas de tecnologia, atualmente com cerca de 500 membros. Desenvolve padrões para a criação e a interpretação dos conteúdos para a Web. Sites desenvolvidos segundo esses padrões, podem ser acessados e visualizados por qualquer pessoa, com o uso de qualquer tecnologia, independentemente do
hardware ou software utilizado – tais como celulares e PDAs; tudo isso de maneira rápida e compatível com os novos padrões e tecnologias que podem surgir com a evolução da Internet. Para alcançar seus objetivos, a W3C possui diversos comitês que estudam as tecnologias existentes para a apresentação de conteúdo na Internet e criam padrões de recomendação para utilizar essas tecnologias. No Brasil, o escritório da W3C iniciou suas operações em 1º de
novembro de 2007.
HTML
10
Vamos Fazer Visite a página do escritório brasileiro do W3C e conheça melhor seus objetivos. www.w3c.br
Atividades 1) Qual a diferença entre a Internet e a Web? 2) Qual a origem da Internet? 3) O que significa hipertexto? 4) O que é o W3C, qual a sua função? 5) Qual a importância de se criarem padrões para a Internet?
Conceitos Básicos “Uma longa viagem começa com um único passo.” (Lao Tsé)
A área da informática tem se desenvolvido muito. As profissões ligadas a essa área são inúmeras e estão aumentando quantitativamente. No início da era da computação, as profissões disponíveis eram basicamente quatro: analista, programador, operador e digitador. Hoje, só na área de desenvolvimento para Internet temos: Webwriter, Web Designer, Web Master, Web Developer, Expert em Segurança de Sites, Arquiteto de Informação, entre outras.
Desenvolvedor Web ou Web Developer O Desenvolvimento web é o termo utilizado para descrever o desenvolvimento de sites, na Internet ou em uma Intranet, a rede interna das empresas. Normalmente está associado à programação e à marcação, mas também pode ser usado para se referir ao projeto visual das páginas. Desde meados da década de 1990 o desenvolvimento web tem sido uma das indústrias de mais rápido crescimento no mundo, pois a Internet trouxe novos hábitos de consumo e criou inovadoras formas de negócios. O mercado de tecnologia e informática de um modo geral está bem aquecido. Para os programadores web não seria diferente: o número de vagas ofertadas supera o de profissionais qualificados para preenchê-las. Este livro fornece a base necessária e os fundamentos para um profissional de programação web.
Página Web Uma página da web é um arquivo onde você pode inserir textos, imagens, tabelas e incorporar planilhas, apresentações, vídeos e muito mais. A palavra site em inglês deriva do latim situs (lugar demarcado, local, posição). Uma página web, também conhecida pelo equivalente inglês webpage é geralmente escrita em formato HTML e com ligações de hipertexto que permitem a navegação de uma página, ou seção, para outra. Uma coleção de páginas web armazenadas em uma única pasta ou em subpastas relacionadas de um servidor web é conhecida como site. Um site web costuma incluir uma página principal chamada index.htm ou index.html. O site é hospedado por computadores conectados permanentemente à Internet.
11 HTML
Para ser um Web Developer, conhecimentos em HTML e CSS são indispensáveis. O mínimo que se espera de um bom desenvolvedor web é o conhecimento dos Web Standards, HTML e CSS. São linguagens que contribuem para a criação de documentos mais consistentes entre si, mais compatíveis e de manutenção extremamente simples. Aliás, o conhecimento dos padrões não é mais um diferencial, mas sim um requisito básico; com os padrões web temos mais acessibilidade, isto é facilidade de uso e também mais visibilidade, principalmente no que diz respeito a motores de busca, como o Google, por exemplo.
Os documentos em HTML são arquivos texto, que podem ser editados em qualquer editor simples e depois visualizados em seu browser, ou em um software, para a criação de páginas web. Editores HTML oferecem vários recursos extras para auxiliar na criação de páginas; além disso, acrescentam outras funcionalidades, e muitos dão a opção de visualização do projeto, tanto em linhas de código HTML quanto no resultado delas no design da página. Este tipo de editor HTML denomina-se habitualmente WYSIWYG (What You See Is What You Get) porque quando se trabalha com ele o que se vê ao criar com o editor é o que se obtém logo que se grava a página. Para que uma página esteja permanentemente disponível pela web, ela precisa ter um endereço fixo, alojado em um servidor. Existem vários provedores de espaço gratuitos e também os provedores de acesso, que geralmente oferecem espaço para os sites de seus assinantes. Definida a hospedagem, basta enviar dados para o provedor os arquivos de seu site e suas páginas já estarão disponíveis para visitas.
Atividades 1) Qual a diferença entre uma home page, uma página e um site? 2) Pesquise o nome de pelo menos três editores HTML.
12
3) Qual o nome do arquivo que costumamos dar para a página principal de um site?
HTML
4) O que significa Web Standarts? 5) Porque nossas páginas devem ser acessíveis?
O que é HTML “Para sonhar um ano novo que mereça este nome, você, meu caro, tem de merecê-lo, tem de fazê-lo novo, eu sei que não é fácil, mas tente, experimente, consciente. É dentro de você que o Ano Novo cochila e espera desde sempre.” (Carlos Drummond de Andrade)
Na indústria de computadores, uma Linguagem de marcação é o código que é usado para explicar a estrutura de informação em nossos documentos. A linguagem de marcação mais popular e usada atualmente que se constitui na força motriz para a World Wide Web é o HTML, sigla que é uma abreviatura de “HyperText Mark-up Language”, ou Linguagem de Marcação de Hipertexto. Hipertexto são aqueles itens marcados em uma página web que, quando clicados, levam a imagens ou informações mais detalhadas sobre o assunto. O hipertexto é um texto (ou uma imagem) grifado e destacado na página por uma cor diferente da cor do texto no qual está inserido. Quando se coloca o cursor sobre o hipertexto, o cursor muda seu formato para um ícone representado por uma pequena mão.
O HTML foi inventado em 1990 por Tim Berners-Lee. O objetivo era tornar mais fácil, para os cientistas de diferentes universidades, terem acesso aos documentos de outras instituições. O projeto se tornou um grande sucesso; ao inventar o HTML, ele lançou as bases para a web como a conhecemos hoje. Originado do casamento dos padrões HyTime (Hypermedia/Time-based Doumnt Structuring Language) e SGML (Standard Generalized Markup Language), o HTML é a linguagem usada para criar páginas na web que estabelece como um determinado elemento deve ser visualizado, não sendo, portanto uma linguagem de programação, e sim, uma linguagem de formatação, de exibição de textos através de “comandos” conhecidos como TAGs. Em suma, HTML é empregado para definir as funções dos diferentes elementos das páginas (como textos, fotos ou animações) que serão visualizadas pelo programa de navegação (Browser). A HTML é uma linguagem, o que possibilita apresentar informações na Internet. O que você vê quando visualiza uma página na Internet é a interpretação do seu browser da HTML. Se você quiser fazer sites, é importante aprender HTML. A boa notícia é que HTML é fácil de aprender e usar. Com este livro, você aprenderá a criar belas páginas e ao concluir seu estudo, você terá aprendido como fazer seu primeiro site. A seguir, vamos ver onde e como criar nossa página e onde podemos colocá-la para que todos a possam ver.
Os Principais Elementos de uma Página HTML Uma página HTML é composta basicamente de títulos, textos, parágrafos, imagens e links responsáveis pela chamada de outras páginas para a tela. Todos esses elementos são posicionados na página por meio de comandos específicos da linguagem. A estrutura de um documento HTML apresenta os seguintes componentes:
13 HTML
TÍTULO DA PÁGINA
CORPO DA PÁGINA.
Exemplo 1: Estrutura básica de uma página
Atividades 1) O que significa HTML e porque ela foi criada? 2) Descreva os componentes básicos de um documento HTML. 3) Do que pode ser composta uma página em HTML? 4) O que significa TAG? 5) Qual a origem do HTML?
Escrevendo sua Primeira Página “Sorte é o que acontece quando a preparação encontra a oportunidade.” (Elmer Letterman)
HTML
14
HTML utiliza marcações específicas e distintas para dizer ao browser como exibir o documento. As marcas utilizadas para produzir o hipertexto são chamadas tags. Uma tag consiste dos sinais < (menor que) e > (maior que) e um texto dentro deles. Um documento HTML é composto de TAGs que farão com que o browser monte a página de acordo com a formatação definida pelos comandos HTML. De um modo geral, as tags aparecem em pares, por exemplo,
Cabeçalho
. No exemplo,
informa o início da formatação do primeiro nível de cabeçalho e
avisa que o cabeçalho acabou.
Principais TAGS Todo documento em HTML deve possuir um título. De um modo geral, o título aparece em lugar separado da página e é utilizado para identificar o documento em outros contextos, como por exemplo, em mecanismos de busca como o Google. É interessante que o título possa sugerir claramente o conteúdo do documento. As principais TAGS, que fazem parte da estrutura básica de um documento HTML são as seguintes: TAG
O QUE FAZ
Marca o início e o fim do documento HTML. Com ela você inicia e finaliza a construção da página web.
Marca o início e do fim do cabeçalho, ou seja, a área onde serão descritos os cabeçalhos e o título da página.
<br />
<br />
Marca o início e o fim do título do cabeçalho. O título da página aparecerá na barra superior do browser.<br />
<br />
<BODY><br />
<br />
Marca o início e o fim do corpo da página.<br />
<br />
Importante: HTML não faz diferença entre maiúsculas e minúsculas (não é case sensitive). Então a notação <title> é equivalente a <TITLE> ou <TiTlE>.<br />
<br />
Criando Documentos HTML Todo documento deve ser identificado como HTML (<html> </html>), ter uma área de cabeçalho (<head></head>) com o nome para o documento (<title> ), um título principal e uma área definida como corpo() do conteúdo do documento. Como exemplo, faça as seguintes ações, para visualizá-lo: 1.
Abra um editor de texto, por exemplo, o bloco de notas;
2.
Digite o exemplo 2, no quadro abaixo.
Minha Primeira Página
Bem-vindo ao meu Site.
15
HTML
Exemplo 2: Página simples em HTML
3.
Salve o arquivo como exemplo2.htm
4.
Abra o navegador e carregue o arquivo exemplo2.htm A página vai aparecer como na figura abaixo:
Figura 1: Tela do exemplo 2
Vamos Fazer: Crie uma nova página, e coloque a seguinte frase: “Não se pode ensinar tudo a alguém, apenas se pode ajudá-lo a encontrar por si mesmo.” Galileu Galilei
Atividades 1) O que significa case sensitive? 2) Crie uma página baseada no exemplo 2 e coloque seu nome. 3) Na mesma página, modifique o titulo para Meu Site. 4) Crie uma nova página onde o título é Currículo; no corpo da página, coloque seu nome completo. 5) O que é identação e qual a sua finalidade?
Atributos HTML
16
“Imaginação é mais importante que inteligência”. (Albert Einstein)
Em nossa primeira página, colocamos apenas um texto, mas podemos melhorá-la e colocar uma cor de fundo ou uma imagem. Como você deve estar lembrado, uma tag é um comando para o navegador. Em algumas tags você pode acrescentar informações adicionais por meio dos atributos.
Mudando a Cor de Fundo da Página Atributos são escritos dentro da tag, seguidos por um sinal de igual e depois entre aspas são declaradas as informações do atributo. O exemplo a seguir, altera a cor da página por meio do atributo bgcolor e o valor, que no caso é o nome ou o número da cor, conforme o exemplo abaixo. ou
Para algumas cores, você pode usar o nome das cores em inglês ( white – branco; black – preto; red – vermelho; blue – azul; green – verde; yellow - amarelo). No exemplo acima nós usamos o código “#00ff00” para fazer a página na cor verde. Este é o código para a cor verde no sistema chamado de números hexadecimais (HEX).
As cores podem ser representadas por nomes ou números. Um código hexadecimal para cores é formado por um sinal # seguido de seis dígitos. Por exemplo: Branco: #ffffff
Preto: #000000 (zeros)
Vermelho: #ff0000
Azul: #0000ff
Verde: #00ff00
Amarelo: #ffff00
Para ver como fica sua página com as modificações, digite o exemplo 3 e em seguida visualize-o no navegador.
Mudando a Cor de Fundo
Bem-Vindos!!!
17 Exemplo 3: Página com fundo verde HTML
Figura 2: Tela do exemplo 3
Podemos também colocar uma imagem como plano de fundo; para isso, selecione uma imagem qualquer da Internet, salve na mesma pasta em que você está gravando suas páginas e, em seguida, altere o código, como no exemplo a seguir.
Mudando a Cor de Fundo
Bem-Vindos!!!
Exemplo 4: Página com imagem de fundo
Figura 3: Tela do exemplo 4
HTML
18
Atividades 1) Procure, na Internet, imagens para você inserir no fundo de sua página, salve pelo menos duas imagens diferentes. 2) Com base no exemplo 3, altere a cor de fundo para azul, usando o nome da cor (lembre-se que esta deve ser em inglês). 3) Repita o exercício anterior e troque a cor por vermelha, mas desta vez utilize o código numérico. 4) Com base no exercício 3, mude o plano de fundo e insira uma imagem, (lembre-se que a imagem deve estar na mesma pasta do arquivo HTML). 5) Repita o exercício 4 e coloque a outra imagem que você gravou. Qual foi a que teve o melhor resultado?
Conhecendo Mais TAGS “Se não existe esforço, não existe progresso.” (Frederick Douglass)
Conheça mais algumas tags, conforme a tabela abaixo. Em seguida, mostraremos exemplos de como usá-las. TAG
O QUE FAZ
Cabeçalhos, normalmente são usados para títulos e subtítulos de uma página. HTML possui seis níveis de cabeçalhos, numerados de 1 a 6, sendo o número 1 o de maior destaque. Cabeçalhos são exibidos em letras maiores e em negrito.
Itálico.
Negrito.
Sublinhado.
Faz uma quebra de linha, sem acrescentar espaço extra entre as linhas.
Serve para definir uma linha horizontal (“hr” vem de horizontal rule - régua horizontal). 19
Testando as Novas Tags O código abaixo exemplifica o uso das tags de cabeçalho, negrito, itálico, sublinhado, inserir uma linha e uma combinação de negrito e itálico.
Letra da Música Felicidade
Felicidade
Fábio Jr
Composição: Umberto Tozzi
Trecho da Música Felicidade!
HTML
Normalmente as tags HTML possuem início e fim .. , porém existem algumas exceções como as marcações:
e
Felicidade!
Brilha no ar
Como uma estrela
Que não está lá
Conto de fadas
Uma gota d’água
Descobrindo
Que é o mar azul
Descobrindo
Que é o mar azul...
Exemplo 5: Página com elementos de formatação
HTML
20
Figura 4: Tela do exemplo 5
Vamos Fazer: Crie uma nova página e insira a letra da sua música favorita com as seguintes formatações: fundo azul, o título da página será o título da música, coloque algumas frases em negrito, itálico e sublinhado para treinar os comandos que você aprendeu.
Atividades 1) Procure na Internet a letra da sua música preferida. 2) Coloque o título da página com o título da música. 3) Repita o título na página e coloque-o como cabeçalho de nível 1, coloque o cantor ou grupo como cabeçalho de nível 2. 4) Após o título e o intérprete, coloque uma linha horizontal 5) Para cada estrofe, coloque uma formatação diferente, da seguinte forma: • Primeira estrofe: negrito; • Segunda estrofe: itálico; • Terceira estrofe: sublinhado; • Quarta estrofe: faça uma combinação de itálico e negrito; • Quinta estrofe: faça uma combinação de itálico e sublinhado.
Atributos do Corpo da Página A Tag BODY foi vista anteriormente para definirmos uma cor de fundo ou aplicar uma imagem ao fundo da nossa página. A Tag delimita o corpo do documento e contém atributos (relativos a texto, fundo e a links), conforme a tabela abaixo: Atributos da Tag BODY ATRIBUTO
O QUE FAZ
BGCOLOR
cor de fundo
TEXT
cor dos textos da página (padrão: preto)
BACKGROUND
indica a imagem a ser aplicada no fundo da página
LINK
cor dos links (padrão: azul)
ALINK
cor dos links, quando acionados (padrão: vermelho)
VLINK
cor dos links, depois de visitados (padrão: azul escuro ou roxo)
HTML
“Para se ser um gênio é necessário apenas 1% de inspiração e 99% de transpiração.” (Isaac Newton)
21
Neste momento, não exemplificaremos os atributos de links; eles serão apresentados posteriormente, quando aprendermos a criar links em nossa página. O exemplo abaixo mostra como usar vários atributos, simultaneamente, em um documento que tem a seguinte definição de atributos gerais:
Provérbio Chinês
Dê um peixe a um homem faminto e você o alimentará por um dia.
Ensine-o a pescar, e você o estará alimentando pelo resto da vida.
Exemplo 6: Alterando os atributos de uma página
HTML
22
Figura 5: Tela do exemplo 6
Além de podermos escolher a fonte para toda a página, também podemos especificar para cada trecho uma fonte, cor e tamanho. A tag é muito versátil, permitindo-nos dar às fontes praticamente qualquer formatação. Os atributos para a tag são:
Atributos da Tag FONT ATRIBUTO
O QUE FAZ
FACE
Tipo de fonte (Arial, Courier, Times New Roman etc)
SIZE
Tamanho da fonte. Os valores variam de 01 a 07.
COLOR
Cor do texto
Fontes
Limitações são fronteiras criadas apenas pela nossa mente
Limitações são fronteiras criadas apenas pela nossa mente
Limitações são fronteiras criadas apenas pela nossa mente
1
Exemplo 7: Alterando a cor de fundo, o tipo e o tamanho da fonte
23 HTML
Figura 6: Tela do exemplo 7
Atividades 1) Crie uma nova página com a frase abaixo e, em seguida, realize as formatações solicitadas.
“É bom sonhar, mas é melhor sonhar e trabalhar. A fé é poderosa, mas a ação com fé é mais poderosa.” (Thomas Robert Gaines)
2) Coloque o título da página como Sonhar e o fundo com sua cor preferida ou com uma imagem. 3) Coloque a cor da letra azul, fonte Arial, tamanho 12. 4) Formate a frase com negrito. 5) O nome do autor deve ficar em itálico. 6) Insira uma linha horizontal, repita a frase e coloque-a com outra formatação.
HTML
24
2 Listas Listas Não Ordenadas “A verdadeira sabedoria consiste em saber como aumentar o bem-estar do mundo.” (Benjamin Franklin)
Vamos aprender como fazer as listas em HTML , estas podem ser: 1.
Listas Numeradas
2.
Listas Não Numeradas
3.
Listas Encadeadas O QUE FAZ
UL
Lista não ordenada
OL
Lista Numerada ou Ordenada
LI
Item de lista
No exemplo a seguir, iremos criar uma lista simples. Listas
Estados da Região Sul
- Paraná
- Santa Catarina
- Rio Grande do Sul
25 Listas
ATRIBUTO
Exemplo 8: Lista não ordenada
Figura 7: Tela do exemplo 8
No próximo exemplo, iremos fazer uma lista encadeada. Listas
Estados e Cidades da Região Sul
Listas
26
- Paraná
- Santa Catarina
- Rio Grande do Sul
Exemplo 9: Lista encadeada
Figura 8: Tela do exemplo 9
Atividades 1) Crie a seguinte lista: Material Escolar (Negrito) • Lápis • Borracha • Caderno 2) Crie a lista, conforme o exemplo abaixo: Principais Cidades (Negrito, itálico e sublinhado) • São Paulo
– Guarulhos
– Campinas
• Minas Gerais
– Ouro Preto
– Mariana
• Rio de Janeiro
– Petrópolis
– Parati
Listas
• Caneta
27
Listas Ordenadas “O insucesso é apenas a ocasião de recomeçar uma tentativa com mais sabedoria.” (Henry Ford)
Como padrão, as Listas ordenadas começam por um número, mas podemos configurálas para começar com letras ou iniciar com valores diferentes de 1 ou A. No exemplo a seguir, temos uma lista ordenada padrão. Listas
Estados da Região Sul
- Paraná
- Santa Catarina
- Rio Grande do Sul
Exemplo 10: Lista ordenada
Listas
28
Figura 9: Tela do Exemplo 10
No próximo exemplo, veremos uma lista ordenada começando com a primeira letra do alfabeto. Listas
Estados e Cidades da Região Sul
- Paraná
- Santa Catarina
- Rio Grande do Sul
Exemplo 11: Lista ordenada usando letras
29 Listas
Figura 10: Tela do exemplo 11
Se alterarmos a linha 5, podemos alterar a configuração para que a lista comece pela segunda letra do alfabeto em minúsculo.
Listas
Estados e Cidades da Região Sul
- Paraná
- Santa Catarina
- Rio Grande do Sul
Exemplo 12: Lista ordenada usando letra minúscula
Listas
30
Figura 11: Tela do exemplo 12
Em uma lista ordenada, os números são inseridos automaticamente. Se você quiser trocar os números por letras, Ex.: A, B, C, ao invés de usar só use . Em que 1 indica para começar pela primeira letra do alfabeto.
Atividades
Crie uma lista com as mais belas praias do Brasil
1) Bombinhas 2) Copacabana 3) Pipa 4) Porto de Galinhas 5) Búzios
Altere a lista para que ela fique numerada, com letras maiúsculas e depois minúsculas.
Links “A preguiça e a ignorância revoltam-se sempre contra o esforço e o talento.” (Gaspar Melchor de Jovellanos)
A palavra inglesa link é usada para designar um “atalho”, “caminho” ou “ligação”. Através dos links é possível navegar entre páginas, a partir de palavras, imagens ou outros objetos. Com HTML, é possível fazermos ligações de uma região de texto (ou imagem) para outro documento. O browser destaca essas regiões e imagens do texto, indicando que são ligações de hipertexto - também chamadas hypertext links ou hiperlinks ou simplesmente links. Em função do destino, os links são classicamente agrupados da seguinte forma: •
Links internos: os que se dirigem a outras partes dentro da mesma página.
•
Links locais: os que se dirigem a outras páginas do mesmo site web.
•
Links remotos: os que se dirigem às páginas de outros sites web.
•
Links com endereços de correio: para criar uma mensagem de correio dirigida a um endereço.
•
Links com arquivos: para que os usuários possam fazer download de arquivos. Agora, vamos aprender como fazer links externos. Para inserir um link em um documento, utilizamos a tag , da seguinte forma:
Links
Esta Página Contém Links
GOOGLE
UOL
Exemplo 13: Página com links
Listas
âncora
31
Figura 12: Tela do exemplo 13
Além de criar o link, podemos inserir um texto explicativo, com o atributo TITLE. UOL
Listas
32
Atividades 1) O que significa o termo link? 2) Quais são os principais tipos de links? 3) Crie uma página com seus cinco links preferidos. 4) Coloque textos explicativos em todos os links. 5) Agora, coloque seus links em uma lista numerada.
3 Formulários “O pessimista queixa-se do vento, o otimista espera que ele mude e o realista ajusta as velas.”
Formulários Parte I Ao navegar pela Internet, é normal precisarmos cadastrar informações ou recolher dados para uma compra. Para isso, existem os formulários que permitem a comunicação entre os usuários e o site. Os formulários servem para recolher dados dos visitantes e enviá-los para você, através de seu servidor. Um formulário é um recurso do HTML que contém elementos que permitem aos visitantes inserirem dados. Os comandos
delimitam o início e o fim de um formulário. O elemento
Exemplo 16: Formulário com radio buttons
Formulários
35
Figura 14: Tela do exemplo 16
Checkboxes Os chekboxes são utilizados quando o usuário pode escolher várias alternativas.
Formulários
36
Formulários Formulários
Escolha os cursos que gostaria de fazer:
Exemplo 17: Usando checkboxe
Figura 15: Tela do exemplo 17
Atividades
2) Monte uma página em que o usuário poderá escolher mais de uma das alternativas abaixo: Viagens Tabajara. Infome os opcionais do seu pacote: a. Translado b. City tour c. Passeio de Jangada d. Jantar Romântico e. Passeio de Buggy
Formulários
1) Monte uma página em que o usuário só poderá escolher uma das alternativas abaixo: Informe seu estado civil: a. Casado b. Solteiro c. Viúvo d. Separado
37
Formulários Parte III “Só existem dois dias do ano em que não podemos fazer nada. O ontem e o amanhã.” (Mahatma Ghandi)
TextArea Permite criar uma área de texto, delimitando o número de linhas e de colunas. Normalmente este item é utilizado para os usuários deixarem seus comentários sobre determinado assunto. Vamos ver como podemos utilizá-lo. Formulários Formulários
Sua opinião é muito importante:
