programação_web_modulo i

8/16/2019 Programação_Web_Modulo I

1/128


2/128

Curso Técnico em Informáca

Programação Web


3/128

Robson Braga de AndradePresidente da Confederação Nacional da Indústria

Rafael LucchesiDiretor do Departamento Nacional do SENAI

Regina Maria de Fáma TorresDiretora de Operações do Departamento Nacional do SENAI

Alcantaro Corrêa

Presidente da Federação da Indústria do Estado de Santa Catarina

Sérgio Roberto ArrudaDiretor Regional do SENAI/SC

Antônio José CarradoreDiretor de Educação e Tecnologia do SENAI/SC

Marco Antônio DociaDiretor de Desenvolvimento Organizacional do SENAI/SC


4/128

Confederação Nacional da Indústria

Serviço Nacional de Aprendizagem Industrial

Curso Técnico em Informáca

Programação Web

Silvio Luis de Sousa

Florianópolis/SC2011


5/128

É proibida a reprodução total ou parcial deste material por qualquer meio ou sistema sem o prévio consenmentodo editor.

Autor


Fotografas

Banco de Imagens SENAI/SC

hp://www.sxc.hu/hp://oce.microso.com/en-us/ images/hp://www.morguefle.com/hp://www.bancodemidia.cni.org.br/

Ficha catalográfica elaborada por Luciana Effting CRB14/937 - Biblioteca do SENAI/SC Florianópolis

S725p

Sousa, Silvio Luis de

Programação web / Silvio Luis de Sousa. – Florianópolis : SENAI/SC/DR,

2011.

127 p. : il. color ; 30 cm.

Inclui bibliografias.

1. Programação (Computadores). 2. Sites da web - Desenvolvimento. 3.

Folhas de estilo. 4. HTML (Linguagem de programação de computador). 5.

PHP (Linguagem de programação de computador). I. SENAI. Departamento

Regional de Santa Catarina. II. Título.

CDU 004.43

SENAI/SC — Serviço Nacional de Aprendizagem Industrial

Rodovia Admar Gonzaga, 2.765 – Itacorubi – Florianópolis/SC

CEP: 88034-001Fone: (48) 0800 48 12 12www.sc.senai.br


6/128

Prefácio

Você faz parte da maior instituição de educação prossional do estado.Uma rede de Educação e Tecnologia, formada por 35 unidades conecta-das e estrategicamente instaladas em todas as regiões de Santa Catarina.

No SENAI, o conhecimento a mais é realidade. A proximidade com asnecessidades da indústria, a infraestrutura de primeira linha e as aulasteóricas, e realmente práticas, são a essência de um modelo de Educaçãopor Competências que possibilita ao aluno adquirir conhecimentos, de-senvolver habilidade e garantir seu espaço no mercado de trabalho.

Com acesso livre a uma eciente estrutura laboratorial, com o que existe

de mais moderno no mundo da tecnologia, você está construindo o seufuturo prossional em uma instituição que, desde 1954, se preocupa emoferecer um modelo de educação atual e de qualidade.

Estruturado com o objetivo de atualizar constantemente os métodos deensino-aprendizagem da instituição, o Programa Educação em Movi-mento promove a discussão, a revisão e o aprimoramento dos processosde educação do SENAI. Buscando manter o alinhamento com as neces-sidades do mercado, ampliar as possibilidades do processo educacional,oferecer recursos didáticos de excelência e consolidar o modelo de Edu-cação por Competências, em todos os seus cursos.

É nesse contexto que este livro foi produzido e chega às suas mãos. Todos os materiais didáticos do SENAI Santa Catarina são produçõescolaborativas dos professores mais qualicados e experientes, e contamcom ambiente virtual, mini-aulas e apresentações, muitas com anima-ções, tornando a aula mais interativa e atraente.

Mais de 1,6 milhões de alunos já escolheram o SENAI. Você faz partedeste universo. Seja bem-vindo e aproveite por completo a Indústriado Conhecimento.


7/128


8/128

Sumário

Conteúdo Formavo 9

Apresentação 11

12 Unidade de estudo 1

Quer Programar paraInternet?

Seção 1 - Tecnologias dedesenvolvimento para web

Seção 2 - Ambiente de de-senvolvimento web

Seção 3 - Instalação do am-biente de desenvolvimentoweb


DesenvolvendoAplicações Dinâmicaspara a Internet

Seção 1 - Abordagem inicial

Seção 2 - Script HTML

Seção 3 - Script CSS

Seção 4 - Linguagem deprogramação PHP


Exemplo Práco

Seção 1 - Abordagem daaplicação

Seção 2 - Desenvolvimentoda aplicação

Seção 3 - Publicação do seuweb site

13

13

16

Finalizando 123

Referências 125

25

25

48

59

89

89

121


9/128

8 CURSOS TÉCNICOS SENAI


10/128

Conteúdo Formativo

9PROGRAMAÇÃO WEB

Carga horária da dedicação

Carga horária: 150 horas

Competências

Desenvolver aplicações para web.

Conhecimentos

▪ Aplicações cliente-servidor.

▪ Tecnologias de desenvolvimento para web.

▪ Requisições remotas.

▪ Controle de sessões.

▪ Arquitetura de sistemas web.

Habilidades

▪ Analisar e implementar as tecnologias de desenvolvimento para web.

▪ Ulizar os padrões de projeto em aplicações web.

▪ Ulizar normas de Segurança da informação na web.

Atudes

▪ Organização e zelo na ulização de equipamentos.

▪ Foco no conteúdo trabalhado.

▪ Acesso a síos relacionados ao tema trabalhado.

▪ Organização e limpeza dos ambientes colevos.

▪ Dedicação e empenho nas avidades curriculares e extracurriculares.

▪ Capacidade de abstração.

▪ Trabalho em equipe.

▪ Apresentação de novas soluções para situações problemas.

▪ Cumprimento de prazos.

▪ Análise críca de suas produções.


11/128


12/128

Apresentação

PROGRAMAÇÃO WEB

O que acha de compreender os fundamentos de programação para web a partir do conhecimento do ambiente e seus elementos, das tecnolo-gias de software básicas, de técnicas de programação para aperfeiçoar asrotinas de programas e como publicar seu web site ?

Fica aqui um convite para que compartilhe destes e outros conhecimen-tos na garantia de que possa iniciar sua caminhada como desenvolvedorweb.

O mercado de desenvolvimento para aplicações web é crescente, mas sósobrevive aquele que trabalha com qualidade e sabe que em programa-ção, conquistar qualidade é conhecer os fundamentos das linguagens,praticar muito e estar atualizado buscando novos recursos para dinami-zar suas aplicações. Desta forma está preparando-se para desenvolverhabilidades como, analisar

e implementar as tecnologias de desenvolvi-mento web a partir de padrões de projetos pré-denidos buscando imple-mentar ao máximo normas de segurança da informação.

Sua trajetória de aprendizagem será ainda mais prazerosa se os seus mo-mentos de estudos forem regados de motivação, disciplina e autonomia.

Bons estudos!


É graduado em Processamentode Dados e Sistemas de Infor-mação. Pós-graduado em For-mação docente para o EnsinoSuperior. Sócio proprietário daLM&SL Treinamento, Desenvol-vimento e Consultoria em Infor-máca com atuação em Joinvillee região. Atua no SENAI em Join-ville como instrutor de cursosde qualicação e técnicos com

experiência prossional emTreinamento e Desenvolvimen-to de projeto de soware.

11


13/128

Unidade deestudo 1

Seções de estudo

Seção 1 – Tecnologias de desenvolvimento paraweb

Seção 2 – Ambiente de desenvolvimentowebSeção 3 – Instalação do ambiente de desenvolvi-mentoweb


14/128

13PROGRAMAÇÃO WEB

Quer Programar paraa Internet?

SEÇÃO 1Tecnologias de desen-volvimento para web

Cada vez mais a Internet conquis-ta espaços, um deles é o da pro-gramação. Graças às tecnologias

desenvolvidas para a web , é notó-ria sua evolução nesse segmento,como é observado em sites de co-mércio eletrônico, nos famososCMS ( Content Management System )traduzindo, Sistema Gerenciadorde Conteúdo e também nas nãomenos famosas redes sociais, den-tre outros.

Tais tecnologias, conjugadas commetodologias de desenvolvimen-

to de software , garantem aos apli-cativos web , exibilidade, escalabi-lidade e melhor desempenho.

Nosso estudo propõe levar ao seuconhecimento tudo que lhe ga-ranta a compreensão e possibili-dade para que domine o desenvol-

vimento de aplicações web dentrodas regras de boas práticas.

É necessário compreender queexistem várias tecnologias utilizadas

para desenvolver aplicações paraweb , desde as mais elementares, enão menos importantes, as maisavançadas. Nesse contexto conhe-cerá sobre arquitetura cliente-ser-

vidor, linguagens de programaçãocomo HTML, CSS, Javascript,PHP, interação entre aplicação web e banco de dados MySQL.

É importante também compreen-der que além das tecnologias des-tacadas como objeto de estudo,

existem várias outras, mas entãoporque não estudá-las também?Bom, como esta unidade curricularcontempla 150 horas de estudos eo compromisso é que você aprendaa desenvolver aplicações para aInternet, então serão adotadas astecnologias que julgamos seremas mais viáveis neste processo deaprendizagem, sendo que, uma

vez que se desenvolva bem, será

capaz de absorver e desenvolver-se satisfatoriamente, em qualqueroutra tecnologia.

Você precisa ter a consciência deque está em um processo de apren-dizado, então notará que em todae qualquer rotina de programaçãoterá que escrever os códigos, istopara que pratique e conheça aomáximo das linguagens que estarátrabalhando, assim, quando zer

uso de ferramentas de produti- vidade, saberá customizá-la uma vez que domina o código que égerado pelas mesmas. Inicialmen-te pode parecer desagradável, masquando tiver mais experiência ese deparar com a necessidade decustomizar o código gerado poruma ferramenta, perceberá a im-portância do assunto.

O que acha de começar logo o

processo? Então, vamos para apróxima sessão!

SEÇÃO 2Ambiente de desen-

volvimentoweb

Quando se trata de desenvolveraplicações web , é importante aten-tar para as tecnologias referentesao ambiente em que as aplicaçõesserão desenvolvidas e executadas.

Primeiramente você deve saberque aplicações desenvolvidas emlinguagem PHP podem ser utili-

zadas tanto na plataforma Linux,como Windows e independenteda plataforma, deve conhecer oscomponentes envolvidos nesteambiente.

E que componentes são esses?

Os componentes envolvidos noambiente web são:

▪ Sistema operacional Win-dows ou Linux – como vocêjá sabe um sistema operacionaltrata do software básico instaladoem uma máquina para que possafazer uso de outras aplicações,porém, nesta unidade curricularserá priorizado o sistema opera-cional Windows.


15/128


▪ Servidor web Apache – trata-se de um software que recriaum ambiente para publicaçãode aplicações para a internetpodendo, inclusive, ser utilizado

localmente em seu computadorpermitindo que desenvolva eexecute suas aplicações web sem anecessidade de estar conectado ainternet.

Foi desenvolvido pela ApacheSoware Foundaon é um

soware de código aberto,de muitos recursos, seguro edisponibilizado livremente na

internet.

SAIBA MAISPara saber mais sobre oservidor web Apache, vi-site o site .

SAIBA MAISAcesse .

▪ Navegador web – software que permite o acesso as páginasda Internet encontradas no servi-dor web, existem vários navegado-res a nossa disposição como.Internet Explorer. Mozilla Fire-fox. Ópera. Google Chrome, eoutros.

Agora que você conhece os com-ponentes do ambiente de desen-

volvimento e execução de aplica-ções web, conra na gura a seguircomo funciona este ambiente, se-gundo Melo e Nascimento (2007,p. 30).

Figura 1: Estrutura básica de um ambiente web

Fonte: Adaptado de Melo e Nascimento (2007, p. 30)

▪ Servidor MySQL –É umservidor de banco de dados e aexemplo do servidor Apache, decódigo aberto, distribuído gratui-tamente na internet e podendo

ser utilizado localmente.

SAIBA MAISPara saber mais sobre oservidor MySQL, visite osite .

▪ PHP - linguagem de progra-

mação dinâmica, baseada emscripts, atualmente mais utiliza-da para a elaboração de aplica-ções para internet. Também é decódigo aberto, possui recursos desegurança muito ecazes e supor-te a orientação. Objetos que lheconferem, atualmente, como alinguagem com inúmeras comu-nidades de grupos de discussõesno mundo todo.


16/128

15PROGRAMAÇÃO WEB

Perceba que a gura anterior per-mite visualizar todos os compo-nentes do ambiente de desenvol-

vimento e execução de aplicações,como funcionam, na prática, as

aplicações web e qual o papel doscomponentes envolvidos.

Também, a partir da gura, vocêpode vericar que o ambienteé dividido em 2, por um lado ocliente da aplicação que fará assolicitações ao servidor web e poroutro, o servidor, que por sua vez,é o local onde as aplicações sãoexecutadas a partir da solicitaçãodo cliente. Então podemos denir

que o ambiente web é dividido emlado cliente e lado servidor, esse éum assunto a ser detalhado maisadiante em nosso estudo.

Funcionamento de

uma aplicação web.

1. O usuário cliente, por meio deum navegador, faz a solicitação

ao servidor web .2. O servidor web , por sua vez, re-

cebe essa solicitação ou requi-sição e de acordo com o quefoi requisitado, executa umadeterminada tarefa. Caso sejaa requisição de um arquivo emHTML ou gura, ele consul-ta o sistema de arquivos, essearquivo estando disponível, éretornado ao usuário cliente.

Se a requisição for de um ar-quivo com extensão especial,

que não HTML ou gura como, por exemplo, PHP, esta é desviadaao seu responsável, neste caso, arquivo PHP para que possa interpre-tar as instruções PHP e traduzi-las em respostas HTML, para seremdevolvidas ao usuário cliente. Caso seja vericada a necessidade deconsulta ao banco de dados, essa também é executada e retornada ao

usuário cliente.

3. O usuário cliente visualiza a página web solicitada.

Agora que você já conhece os componentes e funcionamento das apli-cações web em seu ambiente, é importante estudar a divisão desse am-biente, lado cliente e lado servidor, uma vez que o conceito e estruturadesses, você verá neste livro em diversos momentos.

Lado cliente/Lado servidor

Você viu no tópico anterior que no contexto do ambiente web temos olado cliente e lado servidor, mas o que caracterizam e/ou compreen-dem?

De acordo com Melo e Nascimento (2007, p. 44) o lado cliente de umaaplicação é onde são processadas diversas formas de interação ente ousuário e o sistema. Desta forma, quando um internauta visita sua pági-na, o meio pelo qual ele interage com ela é o navegador.

Connuando Melo e Nascimento (2007, p. 43) denem o seguinte sobrelado servidor “[...] pode ser entendido como a estação onde estão sendo

executados os aplicavos aos quais os acessos são feitos. Quando vocêacessa um site web, uma requisição é enviada via protocolo HTTP paraum servidor que então lhe envia a resposta.”

No ambiente web as linguagens de programação como: HTML, CSS, Javascript, PHP, servidor de banco de dados e web, assim como cookies e sessões são elementos que trabalham conjuntamente para que as apli-cações web cumpram suas funções. Porém, alguns desses elementos sãoexecutados no lado cliente e outros no lado servidor, cada qual cum-prindo sua função, mas integrados em fazer com que as solicitações do

cliente sejam feitas ao servidor e este fornece sua resposta.Observe na gura a seguir as linguagens, recursos e/ou tecnologias quesão executados no lado cliente e no lado servidor.


17/128


Figura 2: Composição lado cliente e servidor

Fonte: Melo e Nascimento (2007, p. 43)

Melo e Nascimento (2007, p. 43) ainda reforçam que “Em linhas geraispodemos dizer que o navegador do cliente faz o trabalho de “ponte” en-tre ambos os lados, em que este envia a requisição e o servidor fornecesua resposta. ”

Agora que conhece bem sobre o ambiente de desenvolvimento e execu-ção de aplicações web você é convidado a acompanhar os conhecimentosda próxima sessão que serão muito importantes para que possa preparar,na prática, o ambiente web. Preparado para mais este desao?

SEÇÃO 3Instalação do ambiente de desenvolvimento web

Anteriormente você estudou que as aplicações PHP podem ser desenvolvidas e executadas tanto nas plataformas Linux ou Windows, casoqueira fazer uso do Linux, deve-se instalar um ambiente LAMP, siglaque representa a junção dos nomes dos softwares que necessita instalar noambiente, L de Linux, A de Apache ou servidor Apache, M de MySQL

e P de PHP.Caso queira fazer uso do Windows instale um ambiente WAMP, siglaque também representa a junção dos nomes dos softwares que necessitainstalar no ambiente, W de Windows, A de Apache ou servidor Apache,M de MySQL e P de PHP.

Você pode instalar um ambienteLAMP ou WAMP, primeiramen-te escolhendo o tipo de ambienteque deseja trabalhar, feita a esco-lha você deve fazer a instalação de2 maneiras distintas.

4. A partir de pacotes de softwares pré-congurados, disponibi-

lizados, gratuitamente na in-ternet e não necessitando denenhum tipo de conguraçãopara a instalação do ambiente.

5. A partir da instalação manualdo ambiente, iniciando pelodownload dos softwares, servidorweb Apache, servidor de Bancode Dados e da linguagem PHPna versão pretendida. Apóso download, instalar os softwares para depois partir para osprocedimentos de congura-ção dos servidores, linguagemde programação e do sistemaoperacional onde este ambien-te será instalado.


18/128

17PROGRAMAÇÃO WEB

As duas formas são interessantesmais trazem consigo característi-cas e aplicabilidades próprias veja.

Pacotes de soware

Sobre a instalação do ambientea parr de pacotes de sowarescomentam Melo e Nascimento(2007, p. 31)Existem alguns projetos para ma-nutenção e pré-conguração deambientes LAMP e WAMP. Nagrande maioria dos casos, elespodem ser baixados gratuita-mente em seus sites ociais pela

internet. A grande vantagem dainstalação de um servidor poreste método é em relação aotempo demandado e a facilida-de em sua execução. É a opçãomais recomendada para usuáriosinexperientes no ambiente, [...].

Ainda fazem uma analogia com ométodo manual,

“Ao invés de instalar e congurarcada um dos componentes en-volvidos, estes pacotes oferecemao usuário uma conguração bá-sica pré-montada”.

E sobre as desvantagens des-se método Melo e Nascimento(2007, p. 31) armam

[...] nem sempre o usuário pode-rá alterar uma conguração comfacilidade ou a atualização indi-vidual de um componente nemsempre será possível. Neste caso,é necessário que os responsáveispelo projeto atualizem e disponi-bilizem uma nova versão do seuproduto.

Existem vários pacotes de softwares bons e gratuitos na internet,conra!

▪ EasyPHP – disponível para

a plataforma Windows contématualmente o PHP 5, servidor web Apache 2, servidor de banco dedados MySQL 5, contém tam-bém o aplicativo phpMyAdmin 3e Xdebug 2.

Seu site ocial é

▪ Vertrigo – disponível para aplataforma Windows contém osseguintes componentes, servidorweb Apache 2, PHP 5, servidor debanco de dados MySQL 5, SQLi-te 3, Smarty 3, phpMyAdmin 3,ZendOptimizer 3 e SQLiteMa-nager 1.

Seu site ocial é

▪ XAMPP – ao contrário dosanteriores, neste pacote vocêencontra versões disponíveis paraas seguintes plataformas: Windo-

ws, Linux, Mac OS X e Solaris.

Contém os seguintes componen-tes, PHP 5, servidor web Apache2, MySQL 5, SQLite, phpMyA-dmin.

Seu site ocial é

Instalação manual

Sobre este método de instalaçãoMelo e Nascimento (2007, p. 34)comentam

Esta é certamente a forma maisexível de instalação do servidor,uma vez que cada componentedo ambiente LAMP ou WAMPé instalado e parametrizado demaneira manual e individual pelopróprio usuário.

No caso da instalação manual você terá que efetuar o download

dos softwares relativos aos compo-nentes do ambiente web , confor-me você estudou na seção ante-rior, ou seja:

▪ servidor Apache, encontradoem http://httpd.apache.org;

▪ linguagem PHP, encontradaem http://php.net;

▪ servidor MySQL, encontradoem http://mysql.org.

Neste tipo de instalação existemalgumas particularidades impor-tantes a serem consideradas, elassão relacionadas aos ambientesLAMP e WAMP. O Linux possui

várias distribuições como: Conec-tiva, Ubunto, Had Rat, Suse, Sla-ckware dentre outros, o mesmoacontece no ambiente Windowsexistente nas versões XP e Win-

dows 7 dentre outros também.

Mas o que isso tem a ver com a ins-talação manual?

Tem tudo a ver, pois para cadaplataforma existe uma série deprocedimentos de instalação econguração a serem executadosaté a conclusão do processo.


19/128


Sendo assim, se você optar pela instalação manual conra a seguir algunslinks úteis que orientam tais instalações.

Ambiente LAMP

▪ .

▪ .

▪ .

Ambiente WAMP

▪ . ▪ .

▪ .

Figura 3: Estrutura da pasta VertrigoServ do pacote Vertrigo

Fonte:

Preparando o nossoambienteweb

Seu estudo fará uso de pacotes desoftware justamente pelo fato de

você ainda não ter muita experi-ência para instalar um ambientemanual. Utilizaremos o pacotedo Vertrigo, por ser um pacotebastante estável, principalmenteno Windows 7 Ultimate, que é aplataforma utilizada para o seuestudo.

Você estará trabalhando em umambiente web de forma local, por-tanto, como procedimento inicial

deve fazer o download do Vertrigo,de preferência em seu site ocial.

Após o download , deve instalar,preferencialmente, na pasta Ar-quivos de Programas, feito istolocalize a pasta VertrigoServ eacesse seu conteúdo, que apresen-ta a seguinte estrutura:


20/128

19PROGRAMAÇÃO WEB

Vale conhecer o conteúdo de al-gumas das pastas encontradasnesta estrutura.

▪ Apache – nesta pasta você

encontra outras pastas contendoos arquivos de programas doservidor web Apache, ou seja,esses programas que permitema execução desse servidor. Aquitambém encontra os arquivos

ABOUT_APACHE e LICENSErespectivamente, arquivo con-tendo informações gerais sobreo Apache e arquivo contendoinformações sobre a licença deuso do Apache.

ATENÇÃO! Evite modicar oconteúdo de quaisquer arqui-vos dessa pasta sem o prévioconhecimento do que estáfazendo. Também não excluanenhum arquivo desta pasta.

▪ Mysql – aqui você encontraoutras pastas contendo os arqui-

vos de programas do servidor debanco de dados MySQL, ou seja,esses programas que permitem aexecução desse servidor. Outrapasta é o arquivo my, contendoalgumas congurações padrãodo servidor Mysql como, porexemplo, em que pastas os

bancos de dados criados devemser gravados, qual a porta lógicao servidor Mysql estará utilizan-do dentre outras informaçõesimportantes.


▪ Php – nesta pasta você temacesso a outras pastas contendoos arquivos de programas da lin-guagem PHP que permitirão que

você desenvolva suas aplicaçõesnesta linguagem. Aqui tambémencontra vários arquivos de con-

guração do PHP.

ATENÇÃO! Evite modicar oconteúdo de quaisquer arqui-vos desta pasta sem o prévioconhecimento do que estáfazendo. Também não excluanenhum arquivo desta pasta.

▪ Phpmyadmin – trata-se dapasta contendo os arquivos deprogramas do utilitário que per-mite criar estruturas de banco dedados no servidor MySQL. Esseutilitário você já conhece, ze-mos uso dele na unidade curricu-lar de Banco de dados módulosI e II. Aqui você fará uso desseutilitário também, sempre que

precisar fazer alguma tratativacom banco de dados em nossasaplicações PHP.


▪ www – esta pasta é muito im-portante, o servidor Apache vempré-congurado para reconhecera pasta www como aquela emque encontram-se os arquivosde programas web que devem serexecutados a partir da solicitação

dos clientes via browser . Isto querdizer que todas as aplicações webque desenvolver devem ser salvasnessa página, pois caso contrário,não serão executadas pelo servi-dor Apache.

ATENÇÃO! Aqui você tem aliberdade de modicar e/ou excluir as pastas e arqui-

vos das aplicações que vocêcriou. Deve ter percebidoque existem alguns arquivosque não foram criados porvocê, nestes, não deve modi-car nem tampouco excluir,pois tratam-se de arquivos doVertrigo.

Para encerrar o processo de reco-

nhecimento da estrutura da pasta VertrigoServ, você conhecerá al-guns arquivos encontrados nestapasta como.


21/128


▪ Uninstall (tipo aplicativo) – trata-se do arquivo do progra-ma que desinstala o pacote do

Vertrigo da sua máquina.

ATENÇÃO! Ao desinstalareste pacote, seus bancos dedados, encontrados em Ver-trigoServ/Mysql/data, comotambém suas aplicações en-contradas em VertrigoServ/WWW, serão excluídas, por-tanto, se houverem bancode dados e aplicações faça obackup destes, antes de de-sinstalar este pacote de sua

máquina.

▪ Vertrigo (tipo aplicativo) – éo arquivo do programa execu-tável do Vertrigo, ou seja, com2 cliques do botão esquerdo domouse ou pressionando a tecla enter neste arquivo, estará executan-do o Vertrigo. Sugere-se que crieum ícone deste arquivo na área

de trabalho de sua máquina.

ATENÇÃO! Não exclua estearquivo.

▪ Vertrigo (tipo Parâmetrosde conguração ) - Este éo arquivo de conguração do

Vertrigo com especicaçõesde conguração dos softwaresembarcados no Vertrigo, como oservidor Apache, Mysql e comoo status destes servidores aoexecutar o Vertrigo, dentre outrascongurações.

ATENÇÃO! Evite modicar oconteúdo deste arquivo semo prévio conhecimento doque está fazendo. Evite tam-bém excluí-lo.

O assunto está muito interessante,certo? Continue atento.

Testando o ambiente webinstalado

Agora que já instalou o Vertrigoe também conheceu sobre sua es-

trutura básica, deve fazer o testepara saber se o ambiente web en-contra-se pronto para ser utiliza-do. Como? Siga os procedimentosindicados a seguir.

1. Execute o programa do Vertri-go;

Pode ser executado a partir doarquivo VertrigoServ/Vertrigo,aquele identicado com uma es-trela antes de seu nome ou a par-tir do ícone da área de trabalho,caso o tenha criado, este tambémidenticado por uma estrela. Paraexecutar o programa, não custalembrar, basta clicar 2 vezes como botão esquerdo do mouse oupressionar a tecla enter.

Após a execução do Vertrigo, apa-recerá uma janela Windows comomostra a gura a seguir.

Figura 4: Janela inicial do pacote Vertrigo


22/128

21PROGRAMAÇÃO WEB

Note que aparece, no lado esquer-do da janela, a relação dos softwaresembarcados no pacote Vertrigocom suas respectivas versões, aolado direito aparecem 3 sessões

que orientam, basicamente, vocêno seguinte.

Tray icons

São mostradas as imagens de umservidor com sinalizações em ver-de, vermelho, amarelo e azul, istoorienta você sobre qual o status ouestado dos servidores Apache eMySQL, no momento em que o

Vertrigo é executado.

Servidores MySQL e Apa-che em execução.

Servidores MySQL e Apa-che parados.

Somente o servidor MyS-QL em execução.

Somente o servidor Apa-che em execução.

Documentaon

Clique neste link para acessar aajuda do aplicativo, sugere-se querealmente acesse essa ajuda paraque conheça mais detalhes sobreo Vertrigo.

Sengs

É a sessão que permite, em Program , você modicar a conguração doprograma, como: status , estado inicial dos servidores, aparência da apre-sentação dos menus de acordo com a versão do Windows utilizada, den-

tre outros. Além disso, permite, em Extensions , congurar as extensõesde arquivos, aceitas para o servidor Apache e linguagem PHP. Tambémpermite congurar, em Components, os recursos do PHP, MySQL e Apa-che aceitos no ambiente e por último, permite, em Aliases and dirs, con- fgurar os caminhos e diretórios para acesso às pastas de publicação depáginas, dos ícones do servidor Apache, do utilitário do Phpmyadmin edo utilitário do banco de dados Sqlitemanager.

Iniciando o Vertrigo

Para efetivar a execução do Vertrigo e consequentemente a inicializaçãodos servidores web Apache e de banco de dados MySQL, deve clicar com

o botão esquerdo do mouse , no botão “Hide this window and start Server” ,localizado na base da janela do vertrigo, como mostra a gura anterior.

Após o procedimento anterior, o Vertrigo entra em execução e vocêpode visualizar, na barra de tarefas, do desktop do Windows, um íconecom a imagem de um servidor, sinalizando o status , ou estado, dos servi-dores naquele momento, como mostra a gura a seguir.

Figura 5: Ícone indicativo do Vertrigo em execução

Aparentemente o seu ambiente está pronto para poder iniciar seus tra-balhos, mas só terá certeza disto testando-o, então, o que acha de partir-mos agora para o teste do ambiente?

Apenas como informação, você escreverá um pequeno script em PHPsalvando-o no servidor Apache e para escrever as instruções desse scriptutilizaremos o editor de texto Notepad++.

Para executar as aplicações web desenvolvidas, utilizaremos o browser Mo-zilla Firefox.

2. Teste o ambiente web


23/128


Proceda da seguinte maneira:

▪ execute o VertrigoSev e certique-se que os servidores estão emexecução;

▪ acesse a pasta Arquivos de Programas/VertrigoServ/www;

▪ na pasta www, crie uma pasta com o nome de testeambiente; ▪ abra o seu editor de programas;

▪ escreva o seguinte script :

▪ Salve esse script , com o nome de testeambiente.php , na pastaProgramas/VertrigoServ/WWW /testeambiente/;

DICALembre-se que a pasta www é a pasta que o servidor web Apachereconhece as aplicações web que ele deve executar e entregar aocliente browser .

▪ agora, abra o browser e solicite ao servidor Apache, a página web ,criada por você, a partir do seguinte endereço:

DICAEm caso de algum proble-ma, cerque-se de que oservidor web Apache estáiniciado, se sim, verique secometeu algum erro ortográ-co no endereço digitado,ou equivocou-se no nomeda pasta ou arquivo, se tudoesver ok e mesmo assim o

problema persisr, troqueo endereço ip 127.0.0.1 porlocalhost .

Se tudo correu bem, receberácomo retorno do servidor Apa-che, uma página web, contendotodas as informações da congu-ração do seu ambiente web instala-do, inclusive com as informações

dos componentes desse ambiente,servidor web Apache, PHP, servi-dor MySQL, como na gura aseguir.

Figura 6: Página web contendo a conguração do seu ambiente web


24/128

23PROGRAMAÇÃO WEB

3. Finalizando o VertrigoServ

Para nalizar o VertrigoServ faça o seguinte.

▪ Clique, com o botão esquerdo do mouse , no ícone do VertrigoServ,localizado na barra de tarefa do seu desktop Windows.

▪ Após a execução do procedimento anterior, você verá um menu,escolha o comando shutdown and exit, este comando desconecta o servi-dor e sai do VertrigoServ.

Figura 7: Apresentação do menu principal do Vertrigo

A partir dessa ação você não con-ta mais com o ambiente web inicia-lizado, ou seja, qualquer tentativade executar suas aplicações web não será bem sucedida, para isto

deve executar novamente o Ver-trigo.

Assim, você chega ao m destaseção de estudo e com a certe-za de que contribuímos bastantepara o seu conhecimento em am-biente de aplicações web . Agoraque já conhece o básico neces-sário para iniciar o estudo do de-senvolvimento de aplicações paraweb , a partir da próxima unidade

você conhecerá as tecnologias re-ferentes a linguagens de progra-mação, que permitirão que vocêdesenvolva web sites dinâmicos,softwares aplicativos e outros para ainternet. Vamos juntos para maisum percurso de aprendizagem?


25/128

Unidade deestudo 2

Seções de estudo

Seção 1 – Abordagem inicialSeção 2 – Script HTMLSeção 3 – Script CSSSeção 4 – Linguagem de programação PHP


26/128

25PROGRAMAÇÃO WEB

Desenvolvendo AplicaçõesDinâmicas para a Internet

SEÇÃO 1Abordagem inicial

A partir dos conhecimentos pro-postos para esta unidade, vocêterá condições de desenvolverscripts web para o desenvolvimentode páginas dinâmicas para a Inter-net, bem como softwares aplicati-

vos nos padrões web.

A unidade propõe levar a vocêos conhecimentos sobre as tec-nologias de programação como:HTML (importante na apresen-tação nal das páginas web ), CSS(importante na implementaçãode estilos nas páginas web ), PHP(linguagem dinâmica que auxilia oHTML no acesso a arquivos), va-lidação e tratamentos de campos

de formulários, acesso a banco dedados, utilização de cookies e ses-sões, dentre outras importantesrecursos.

É importante que no decorrer dosseus estudos você pratique todosos comandos, instruções e rotinasapresentadas, pois para que possaaprender para valer nada melhor doque praticar. Lembre-se: desen-

volva as atividades propostas para

adquirir volume e ritmo de trabalhoem programação.

Para a prática dos conhecimentosdesta unidade utilize:

▪ Navegador – Mozilla Firefox e Internet Explorer.

▪ Editor de programas – Notepad++.

▪ Pacote VertrigoServ – Servidor web Apache, Servidor de Banco dedados Mysql, linguagem de programação PHP e utilitário PHPMyAd-min.

Agora que já tem conhecimento sobre a temática desta unidade, é horade conhecer tudo sobre HTML. Siga, então, para a próxima seção.

SEÇÃO 2Script HTML

Esta seção propõe o conhecimento básico da HTML a partir de suadenição, estrutura básica, comandos e recursos, que permitam junta-

mente com as demais tecnologias a ser estudado, o desenvolvimento deaplicações web dinâmicas.

Relembrando que para a prática você precisará de um editor de progra-mas e um navegador internet, respectivamente, o Notepad++, MozillaFirefox e testes também no Internet Explorer.

HTML (HyperText Markup Language)

Traduzindo, não ao pé da letra, mas na sua aplicação, o signicado deHTML pode ser entendido como, linguagem de formatação que permitea elaboração de web sites com hiper-textos.

Ao contrário do que muitos se referem HTML não é uma linguagem deprogramação, mas sim, uma linguagem de formatação, que interpretadapelo navegador internet, reproduz uma página web . Isto quer dizer queenquanto estiver escrevendo seus scripts em HTML você estará forma-tando uma página web que será visualizada por meio de um navegador dainternet. Conra a seguir a estrutura básica de um script HTML.


27/128


Estrutura básica de umscript HTML

Mas, antes da estrutura, é impor-tante que você conheça a deni-

ção deTAG,

já que este elementoé à base de tudo nesta linguagem.

TAG

Chamada por alguns como marcae por outros de rótulo, você a uti-lizará em seu script para formatarsua aplicação e também a partirdela que aplicará os comandosde formatação HTML que serãointerpretados pelo browser (nave-gador internet) para a reprodução

de páginas web.

Sua sintaxe ou forma de es-crita é simples, começa como símbolo de “”, como exemplo,, na práca, como jácomentado, representam oscomandos de formatação queserão interpretados pelos na-vegadores.

É muito comum você ouvirprogramadores web referir-sea tags HTML como comandosHTML, na realidade você aplicaos comandos HTML a partir detags , mas isto não é signicativo,o que interessa é saber utilizá-lasda melhor maneira para alcançarseus objetivos.

Existem 2 pos de tags, asde abertura e as defechamento , o script que você escrever entre elas,é o que será interpretado eprocessado pelo navegadorinternet.

Linha de comentário HTML

Outro recurso importante é o de linha de comentário.

Uma linha de comentário serve para documentar as instruções do pro-grama que o programador escreve, no sentido de esclarecer e/ou organi-

zar o script , estas não são interpretadas e nem tampouco geram nenhumresultado, realmente apenas servem para documentação.

Exemplicando, suponha que você deseja elaborar uma instruçãoHTML e queira documentar o que esta faz, com o propósito de que, seem algum momento, houver a necessidade de se efetuar a manutençãono script do programa, saber do que se trata a instrução:

Note que no exemplo você encontra primeiramente a linha de comen-tário que explica a função da instrução, logo abaixo. Sintaxe de escrita

A linha de comentário em HTML inicia com o símbolo .

Cor em HTML

Não serão poucos os momentos em que você precisará atribuir cores emsua página HTML, seja para atribuir cor ao texto, ao fundo da página,tabelas e assim por diante.

Sendo assim, é importante saber que as cores que você utiliza podem serutilizadas em 2 formatos:

▪ BásicoÉ aquele em que você utiliza a cor fazendo referência ao seu nome eminglês, por exemplo, suponha que deseja escrever em sua página a palavraHTML em vermelho, caria assim:

HTML

A instrução aplica ao texto HTML a cor verme-lha e para nalizar o comando é utilizada a tag , não se preocupeagora com isto, você verá em detalhes logo adiante.

Repare na palavra red no comando, trata-se da palavra, em inglês, para acor vermelha, isto signica que está aplicando a cor de fonte vermelhano texto. Como resultado dessa instrução em sua página web você teriaHTML (manter em vermelho).


28/128

27PROGRAMAÇÃO WEB

▪ Código RGB (Red Green Blue )É o formato em que você utiliza um código hexadecimal do padrãoRGB ( Red Green Blue ) para a formatação HTML, por exemplo, vamosaplicar a cor vermelha novamente só que em código hexadecimal, agora,caria assim:

HTML

Perceba que a cor agora é atribuída a partir de um código hexadecimal,neste caso, para a cor vermelha e que como resultado você obteria omesmo do exemplo anterior, ou seja, HTML.

DICAPara ter acesso à tabela de cores hexadecimal HTML pode acessaro site , por exemplo.

Agora sim chegou o momento de conhecer a estrutura script HTML

Estrutura script HTML

Aqui deve informar tudo o que quiser que apareçaem sua página web.

Cabeçalho do documentoHTML

Comando -

▪ Denição

Acrescenta um título para a suapágina web , mais precisamente, nabarra de título do browser.

▪ Sintaxe de uso

Este texto seráapresentado na barrade tulo do seu bro-wser

▪ ComentáriosEste comando deve ser escritodentro da tag , na sua es-trutura HTML.

Observe que a sintaxe de escri-ta deste comando inicia com aabertura da tag , seguidado título que deseja mostrar nabarra de título do browser e, apóso título, o encerramento com a tag .

Corpo do documento HTML

Para a execução dos comandosé interessante que seja feita lo-calmente e não no servidor web ,isto porque trata-se do estudo daHTML, que por sua vez, roda nolado cliente dispensando o uso doservidor web neste caso.

Sugiro que crie sua pasta no drivelocal de sua máquina e nesta, vocêarmazene, em pastas especícasas aplicações com as práticas dos

comandos repassados.


29/128


Comandos para formatação do texto

Comando -

▪ DeniçãoCentraliza, na página, tudo o que estiver escrito em sua área de abran-gência.

▪ Sintaxe de uso

Este texto será centralizado na página web

▪ Comentários Veja que este comando deve ser escrito dentro da tag , na suaestrutura HTML.

Veja que a sintaxe de escrita deste comando inicia com a abertura da tag , seguida do que você deseja que seja centralizado no corpo dapágina web e logo após, o encerramento com a tag .

Comando –

▪ Denição

Permite a formatação do texto de sua página, possibilitando identicar:

▪ nome da fonte = atributo face;

▪ tamanho da fonte = atributo size;

▪ cor da fonte = atributo color;

▪ Sintaxe de uso

Textoformatado

▪ Comentários

1. Este comando deve ser escrito dentro da tag , na sua estru-tura HTML.

2. Uma particularidade importante é a de que este comando necessita dealguns atributos, como face (nome da fonte), size (tamanho da fonte)e color (cor da fonte), para a formatação correta. Note que isto é uma

característica de alguns coman-dos HTML.

3. Importante também destacarque se você omitir o atributo

face (nome da fonte), a fonteaplicada será aquela padrãoda máquina cliente em que apágina é executada, normal-mente Times New Roman . Oque também acontece com otamanho e cor da fonte, nestecaso será adotado o tamanho ecor da fonte padronizados damáquina cliente, ou seja, nãoteria motivo para utilizar este

comando.4. Este comando é nalizado

com a utilização da tag de en-cerramento .

5. Observe a utilização do códigohexadecimal #B22222 para acor da fonte, neste caso utili-zamos a cor de nome Firebrick.

c - Comando –

▪ Denição

A letra p na tag

é a abrevia-tura para “ paragraph ” (parágrafo)que é exatamente o que o texto éum texto parágrafo. Deve aplicarsomente quando o texto da pági-na tratar-se de um parágrafo, docontrário, não há necessidade deuso deste comando.

▪ Sintaxe de uso

Exemplo de umtexto escrito na pági-na ...


30/128

29PROGRAMAÇÃO WEB


Perceba também que a sintaxe de

escrita deste comando inicia coma abertura da tag

, seguida doparágrafo, logo após, o encerra-mento com a tag

.

Comando –

▪ Denição

Permite que você determine umaquebra de linha na sua página web ,

podendo esta ocorrer no meio deum texto, como por exemplo:

▪ Sintaxe de uso

Este é um exemplode
quebra delinha em HTML
no meio deum texto.

▪ Como resultadoEste é um exemplo de

quebra de linha em HTML

no meio de um texto.

Permite também a quebra de li-nha ao nal do texto e tambémentrelinhas do texto, como porexemplo:

Este é um exemplo de quebra de linha ao nal de um texto.

Esta linha será impressa abaixo da anterior após uma linhaem branco.

▪ Como resultadoEste é um exemplo de quebra de linha ao nal de um texto.

Esta linha será impressa abaixo da anterior.

Observe que entre as duas linhas foi implementado também um co-mando
que faz com que uma linha em branco seja impressaentre elas.

▪ ComentáriosEste comando deve ser escrito dentro da tag , na sua estruturaHTML.

A sintaxe de escrita deste comando é um pouco diferenciado dos co-mandos anteriores, a indicação de abertura e fechamento do comando é

feito na própria tag
. Isto acontece com outros comandos HTMLtambém.

Comando -

▪ Denição

A letra b na tag é a abreviatura para “bold ” (negrito). Deve aplicarquando você deseja formatar um texto ou palavra em negrito.

▪

Sintaxe de uso

Estou em negrito


31/128


Uma particularidade é a de queeste comando está caindo em de-suso, sendo, aos poucos, substitu-

ído pelo comando .

Comando -

▪ Denição

Como relatado, é um comandoque aparece em substituição aocomando , sendo sua aplica-ção a mesma, ou seja, deve aplicarquando você deseja formatar umtexto ou palavra em negrito.

▪ Sintaxe de uso

Também es-tou em negrito

▪

ComentáriosEste comando deve ser escritodentro da tag , na sua es-trutura HTML.

Perceba também que a sintaxe deescrita deste comando inicia coma abertura da tag , segui-da do texto, logo após, o encerra-mento com a tag .

Comando -

▪ Denição

A letra i na tag é a abreviaturapara “italic ” (itálico). Deve aplicarquando você deseja formatar umtexto ou palavra em itálico.

▪ Sintaxe de uso

Estou em itálico


A sintaxe de escrita deste comando inicia com a abertura da tag ,seguida do texto, logo após, o encerramento com a tag .

Podemos prosseguir? Ainda há muita informação interessante sobreHTML.

Alguns comandos HTML podem ser ulizados em conjunto, isto é cha-mado de múlplos comandos, é possível fazer uso de vários coman-dos em uma instrução HTML.

▪ Exemplo:

Múlplos comandos HTML

Comando -

▪ Denição

Permite a exibição de um texto ou palavra em tamanho reduzido.

▪ Sintaxe de uso

Este texto é visualizado em um tamanho bem reduzido


32/128

31PROGRAMAÇÃO WEB


Sintaxe de escrita deste coman-

do inicia com a abertura da tag , seguida do texto, logoapós, o encerramento com a tag .

Comandos para subtulos

▪ Denição

Subtítulos em páginas web são ostítulos implementados no corpo da

página, são considerados subtítulosporque título é aquele implementadona tag Título da página como mostrado anterior-mente, então, caso necessite tra-balhar com estrutura de subtítulosem suas páginas web , você contacom os seguintes comandos:

▪ Sintaxe de uso

Subtulo nível 1

Subtulos nível 2

Subtulos nível 3

Subtulos nível 4

Subtulos nível 5

Subtulos nível 6

▪ Como resultado:

Subtítulo nível 1Subtítulos nível 2Subtítulos nível 3

Subtítulos nível 4



Figura 8: tulos em tag HTML


O nível máximo que pode utilizar para esse comando é o comopode observar no exemplo, veja também que, à medida que utiliza umcomando com um nível maior o tamanho da fonte diminui, também épossível observar que a fonte obtida é aquela reconhecida pela máquinacomo padrão. Caso queira formatar a fonte destes títulos, utilize o co-

mando .

Comando para barra horizontal

Comando -

▪ Denição

Permite a exibição de uma linha horizontal no local onde o comando éescrito.

▪ Sintaxe de uso

Abaixo umalinha sublinhada


33/128



A sintaxe de escrita deste comando, a exemplo do comando
,também possui a indicação de abertura e fechamento do comando na

própria tag .

Comandos para listas de opções

Comando -

▪ Denição

Permite a criação de uma lista de itens de informação com um marcador.

▪ Sintaxe de uso

Um item de listaOutro item de lista

▪ Como resultado:

▪ um item de lista;

▪ outro item de lista.


O comando é responsável pelo recuo da lista de itens e que o co-mando é responsável pela impressão do marcador dos itens.

A sintaxe de escrita dos comandos inicia com a abertura das tags e e encerra-se com as tags e respectivamente.

Comando -

▪ Denição

Permite a criação de uma lista de itens de informação com uma nume-ração.

▪ Sintaxe de uso

Um item delistaOutro itemde lista

▪ Como resultado:

6. primeiro item lista;

7. segundo item da lista.


O comando é responsávelpelo recuo da lista de itens e queo comando é responsávelpela impressão da numeração dos

itens.Perceba também que a sintaxe deescrita dos comandos inicia coma abertura das tags e e encerra-se com as tags e.

Exemplo práco daetapa 1

Crie, em drive local, uma pastachamada, pratica1html, abra o seueditor de programas, será utiliza-do o Notepad++.

Digite o script de uma pequenaaplicação apenas para praticar oscomandos passados até o mo-mento, não existe pretensão ne-nhuma em desenvolver, um website mais elaborado.


34/128

33PROGRAMAÇÃO WEB

Você observou que o nome da pasta não está acentuado?Isto é comum em pastas e arquivos de aplicavos web, uma vez queesses podem ser publicados em algum servidor web que não interpreteacentuação de nenhum po, daí o fato de adotar esse critério, desde já,mesmo que ainda não esteja publicando as aplicações em servidor web,tanto para pastas como para arquivos de aplicações web.

▪ O script da aplicação didática propostaCom o seu editor aberto escreva o script a seguir:

Aplicavo web - prática 1 HTML

PRÁTICA HTML - PAR-TE 1

Traduzindo, não ao pé da letra, mas na sua aplicação, o sig-nicado de HTML pode ser entendidocomo, linguagem de formatação que permite a elaboração de

web sites com hiper-textos. Ao contrário do que muitos se re-ferem, HTML não é uma linguagemde programação, mas sim, uma linguagem de formatação queinterpretada pelo navegador internet, reproduz uma páginaweb.

RESUMINDO HTML

HTML Hypertext Ma-rkup Language,ou seja, Linguagem de marcação ouformatação de hipertexto;HTML não élinguagem de programação e sim

de formatação; HTML é interpretada pelo seu browser (navegador internet);HTML é responsável pela apresentaçãoda página web em um navegador internet.

INFORMAÇÕES ADICIONAIS

HTML é a base das aplicaçõesweb;


35/128


Por ser base das aplicações web, integra-se com outras lin-guagens estácas como,Javascript,e dinâmicas como PHP; Por se tratar de uma linguagem de formatação é de fácil apren-dizado e manuseioPara entender a HTML é neces-sário conhecer sua estrutura e comandos e efetuar a prácados mesmos.

▪ Salvando e executando seu script Salve este script , na pasta pagina1html com o nome de index.html, cuida-do, certique-se de que salvou corretamente este arquivo com o nomesolicitado, pois qualquer erro no nome deste arquivo o browser (navega-dor internet) não interpretará seu script e nem tampouco reproduzirásua página web. Por exemplo, se seu arquivo for salvo como index.txt.html, esse não é reconhecido pelo browser , então basta você acessar essearquivo e eliminar a extensão .txt, após conrmar esse procedimento oarquivo deve permanecer como index.html, agora sim.

Mas e agora? Como executar minha aplicação?

Isto pode ser feito de 2 formas.

▪ Diretamente do arquivo – acesse o arquivo index.html e execute,com um duplo clique com o botão esquerdo do mouse , como se tratade um arquivo HTML sua página será executada, a partir do browser congurado como padrão em sua máquina.

▪ A partir do browser – abra o browser de sua preferência e a partirdeste abra o arquivo index.html.Conra algumas dicas para facilitar seu trabalho.

Evite copiar e colar as instruções do script durante a escrita deste.

Escreva o script em pequenos trechos, salve-o e execute-o, assim se houver algum erro será mais fácil encontrá-lo uma vez que a quantidadede instruções é pequena, por exemplo, comece escrevendo os scripts de até , salve o arquivo, execute-o e veja o resultado par-cial de sua página, não se assuste neste caso o resultado será apenas dotexto “Aplicativo web - prática 1 HTML” na barra de título do browser emfunção dos comandos que escreveu neste trecho.

Mas a vantagem é a seguinte, casohaja algum problema que tenhaimpedido este resultado a quanti-dade de comandos para visualizaro erro é pequena, assim ca fácil

detectar o erro.Continue escrevendo seu script mantendo o editor aberto, é lógi-co, e o browser ativo, assim, à me-dida que implementa outras linhasde comando no seu editor, bastaacessar o browser e pressionar a te-cla f5, isto fará com que sua apli-cação seja atualizada mostrandoas implementações no seu script eeste procedimento deve ser repe-

tido durante o desenvolvimento. Você deve ter observado que aaplicação e a exceção do coman-do
e , contemplatodos os comandos apresentadosaté o momento, mas a medida quenovos comandos são apresenta-dos você estará implementandonesta aplicação, portanto, logoestará de volta ao script para acres-centar novos comandos. Vamos

em frente? O próximo tópicotambém é muito importante nacriação do seu web site.

Inserindo Imagens

É muito comum você necessitarinserir imagens no seu web site equando isto ocorrer, basta recor-rer ao comando.

Supondo que deseja carregar umaimagem, cujo arquivo seja do tipoGIF e encontra-se na mesma pas-ta do programa onde escreverá oscript para carregar a imagem.


36/128

35PROGRAMAÇÃO WEB

Figura 9: Localização pasta imagem.gif

A sintaxe de uso caria assim:

Perceba que basta, em src, atribuir o nome do arquivo que deseja carre-gar, não esquecendo a extensão do arquivo, que neste caso é GIF.

Agora suponha que o arquivo com a imagem desejada não encontra-sena mesma pasta do programa onde escreverá o código, agora o arquivoencontra-se, por exemplo, na pasta imagens, como representado a se-guir:

Figura 10: Localização pasta imagem.gif na pasta imagens

A sintaxe de uso caria assim:

Perceba que não houve muita alteração para a situação anterior, conti-nua atribuindo à src a imagem que deseja carregar, só que agora infor-mando que esta encontra-se na pasta imagens, “imagens/ imagem.gif ”.

Se desejar, pode aplicar alguns atributos à imagem, por exemplo:

▪ Border – este atributopermite atribuir, à imagem, umaborda, o valor da borda é atri-buído em pixels , no exemplo, 1 pixel de espessura de borda para a

imagem. ▪ Width – este atributo permi-

te atribuir, à imagem, um valorreferente à largura da imagem,podendo esse ser em pixels ouem %, no exemplo, este valor éde 20%, o que equivale a 20% da

visualização total da página.

▪ Height – este atributo per-mite atribuir, à imagem, um valorreferente à largura da imagem,podendo esse, também, ser em pixels ou em %, no exemplo, este valor é de 20%, o que equivalea 20% da visualização total dapágina.

▪ Align – este atributo permiteatribuir, à imagem, um valor refe-rente ao alinhamento da imagem,podendo esse ser:

▪ left (alinhamento a esquerda);

▪ right (alinhamento a direita);▪ center (alinhamento ao centro).

▪ Title – este atributo permiteatribuir, à imagem, uma mensa-gem informativa. Essa mensagemé visualizada ao passar o mouse sobre a imagem.

A sintaxe para a inserção de

imagens em páginas web sãosempre estas apresentadasaqui, seja para inserir ima-gens em textos, tabelas ououtros.


37/128


Comandos para links

Denição links em páginas web ,como já deve saber, são aquelestextos ou imagens, que aparecem

geralmente sublinhados e quenormalmente estão interligados aoutros textos (hipertextos), pági-nas no mesmo documento, outraspáginas do mesmo web site e atémesmo a outras páginas da inter-net de outros provedores.

▪ Categorias de links

a. Links relativos

São aqueles que utilizam emseu web site para acessar ou-tras páginas, podendo essasestar no mesmo diretório ouem diretório diferente de ondeencontra-se a página deste link.

b. Link no mesmo documento

Suponha que queira interligarparte de um texto a outro emuma página, por exemplo, sequiser em sua página index.html, do seu aplicativo didá-tico, ir para o topo da pági-na, onde encontra-se o título“PRÁTICA HTML-PARTE1” deve fazer o seguinte:

No script do arquivo index.html localize a linha de instru-ção do título da página “PRÁ-

TICA HTML-PARTE 1” e an-tes deste insira o comando , a instru-ção no script caria assim:

PRÁTICA HTML - PARTE 1

Cria-se uma ancora com um nomeque deseja acessar de qualquerparte do documento, no caso, onome escolhido foi “PRÁTI-CA”, por ser a primeira palavra

do título, também por saber quenão haverá em nenhum outro tre-cho da página esta palavra e porúltimo esta encontra-se no topoda página, local que desejamosnos dirigir a partir do clique dolink.

Mas o processo não terminou poraí, precisamos agora implementar,em algum trecho da página, o link que ao ser clicado nos levará para

o topo da mesma.Localizado o trecho da página,deve escrever a instrução para acriação do link como mostrado aseguir:

Ir para o topo

A instrução representa o coman-do principal utilizado nos links emgeral, veja o comando , co-nhecido como âncora, ele é o res-ponsável pela ligação hipertexto,após este comando aparece a re-ferência para onde o link deve serdesviado, no caso, para um trechoda página onde houver a palavra“PRÁTICA”. Observe o uso docaractere “#” antes da palavra aser procurada, isto signica que olink é interno, ou seja, na mesmapágina.

Veja também que ao lado do co-mando foi escrito o texto do link “Ir para o topo”, este, quando apágina for executada é o texto queaparecerá para o usuário na corazul padrão e sublinhado, ou seja,é o link a ser clicado na página web.

Agora sim, o link no mesmo do-

cumento está pronto para ser uti-lizado na página.

c. Link para outros documentos

d. É muito comum que em apli-cações web você necessite criarum link para acessar outra pá-

gina de seu web site , isto é o queaprenderá agora e é bem sim-ples.

Suponha que queira criar umlink para outra página em seuaplicativo didático, a instruçãocaria assim:

Textodo link

A sintaxe é muito simples, iniciacom a âncora seguida da refe-rência para onde o link deve sedirigir, no caso para uma páginaHTML, e a seguir o texto do link,que aparecerá para o usuário nosentido de orientá-lo para onde olink o levará.

e. Links absolutos São aqueles links que utilizados

na página do seu web site queacessam outros web sites de ou-tros provedores da internet.

A sintaxe de uso desses tipos delinks é muito simples, a exemplodo que você estudou anterior-mente. Suponha que queira criarum link em sua aplicação didática

para acessar o site da GOOGLE.

< a href=”hp://www.google.com.br”> Acessar o GOOGLE

Tabela em HTML

Uma tabela é um recurso muitoutilizado em editores de textos,planilhas eletrônicas, bem como,páginas web para demonstrar, de

forma organizada e clara, infor-mações importantes sobre um de-terminado assunto.


38/128

37PROGRAMAÇÃO WEB

Tabela 1: Exemplo de tabela HTML

Linguagens para aplicação web

Nome Denição Aplicação

HTML (Hiper text ma-rkup language)

Linguagem de formatação que permite aelaboração de web sites com hipertextos.

Responsável pela reprodução de umapágina web.

CSS (Cascading stylesheets)

Linguagem de eslo ulizada para denirapresentação das páginas HTML.

Responsável por separar a formatação eo conteúdo de uma página web, caben-do a esta a formatação.

Javascript

Linguagem de programação que permitea implementação de estruturas lógicas,funções,efeitos e animações em páginasweb.

Responsável por oferecer suporte aHTML, principalmente em estruturaslógicas de programação no lado cliente.

PHP (Personal hyper -

text Processor)

Linguagem de programação que permite aimplementação de estruturas lógicas, fun-ções, acesso a arquivos e banco de dados empáginas web.

Responsável por oferecer suporte aHTML, principalmente em estruturaslógicas de programação, acesso a arqui-vos e banco de dados, no lado servidor.

Estrutura de uma tabela HTML

Se você implementar e executaro script anterior obterá o seguinteresultado:

Figura 11: Exemplo da estrutura da

tabela HTML implementada

Uma tabela 2 x 2, ou seja, uma ta-bela com 2 linhas e 2 colunas.

A seguir conra como conguratabela

Você pode congurar a tabelapara, por exemplo, receber umacor de fundo, para isso basta fazero seguinte:

TABELAS HTML

Coluna1, escreve oconteúdo da coluna, no caso, Coluna1, e após encerra a colu-na com .--> Coluna2, escreve oconteúdo dacoluna, no caso, Coluna2, e após encerra a coluna com .-->

>

Coluna1, escreve oconteúdo da coluna, no caso, Coluna1, e após encerra a colu-na com .--> Coluna2, escreve oconteúdoda coluna, no caso, Coluna2, e após encerra a coluna com .-->

>


39/128


Figura 12: Exemplo de tabela HTML

com cor de fundo

Observe que foi implementadana tag o atributo “sty-le”, estilo = cor de fundo, paraa implementação da cor de fundona tabela.

Inserindo bordas na tabela Também pode congurar bordacom a espessura desejada, paraisso, basta fazer o seguinte:

Veja que foi implementada na tag o atributo “border ”, bor-da, com a espessura de 1 pixel.

Caso omita este atributo, ouatribua 0 como valor paraeste atributo, sua tabela casem borda.


sem borda

Espaçamento entre colunas

Caso queira determinar um espa-çamento entre as colunas (células)da tabela deve fazer o seguinte:


com espaçamento entre colunas

Foi implementada na tag o atributo “cellspacing”, espaço en-tre células, com o espaçamento de5 pixels.

Mais alguns recursos

MAIS RECURSOS TABELAS

COLUNAS MESCLADAS

Coluna1Coluna2

Coluna1Coluna2


40/128

39PROGRAMAÇÃO WEB

Se você implementar e executaro script anterior obterá o seguinteresultado:


com colunas mescladas e cores de

fonte

CentralizandoPara centralizar uma tabela bastainserir a tag antes datag , mas não esqueça denalizá-la também, veja no scriptanterior.

Formatando fonte

Se desejar atribuir um nome, ta-

manho ou cor da fonte para asua tabela, basta também inserir atag , com seus respectivosatributos, antes da tag ,lembrando que esse atuará paratoda a tabela ou para aquelas colu-nas que não houver conguraçõesde fonte, por exemplo:

Observe no script anterior, queconguramos a fonte verdana para os textos da tabela, porém,

este só terá efeito para as colu-nas 1 e 2 da linha 3, porque estasnão foram conguradas com ou-tra fonte, o mesmo não acontecepara a coluna da linha 1 e colunas1 e 2 da linha 2, pois estas foramconguradas para outras fontes,respectivamente Calibri e Arial.

DICA

Você pode formatar fontetambém de outras maneiras,caso queira aprofundar este

estudo, baixe na internet tu-toriais básicos sobre HTML.

Mesclando células

Em algumas situações é interes-sante intitular a tabela de formaque esteja integrada à mesma,conforme você pôde ver na guraanterior da nossa tabela modelo,para que isso seja possível proce-da da seguinte forma.

Primeiramente você deve anteverquantas colunas, por linha, queutilizará em sua tabela, pois semesta informação não conseguirámesclar células.

Sabendo a quantidade total decolunas por linha, da sua tabela

deve iniciar o script de sua tabelanormalmente e criar a coluna quedeseja mesclar, conra na guraa seguir. Reparem no script o atri-buto “colspan” responsável pormesclar as células na tabela, a elefoi atribuído o valor 2, que signi-ca o número de células (colunas)que deve mesclar, que por sua vez,é o número de células (colunas)por linha que é utilizado na tabelaem questão.

É importante atentar para oatributo “align ” também na co-luna mesclada, isto é para alinharo conteúdo da célula, neste caso,ao centro. O alinhamento podeser feito para qualquer outra colu-na, seja ela mesclada ou não.


contendo links com imagens

Links com imagens em ta-bela

Para inserir um link com imagemem uma célula (coluna), de umatabela basta utilizar os comandos

de link e inserção de imagens,conjuntamente, dentro da colunaque desejar. Em nosso exemplotivemos que inserir uma 3ª colunanas 2 linhas da tabela e respectiva-mente nestas.

Para a coluna com a imagem linkdo lápis:

Para a coluna com a imagem link do X:

No exemplo as imagens encon-tram-se na mesma pasta do pro-grama onde foi escrito o script dolink imagem.

DICACaso queira rerar aquelaborda de link da imagem,basta fazer o seguinte:

Insira o atributo border natag e atribua o valor 0.


41/128


Formulário em HTML

É mais um dos recursos impor-tantes no universo da construção deaplicações web , seja permitindo o envio de dados por e-mail ou auxiliandono cadastramento de usuários em sites ou mesmo auxiliando no arma-

zenamento de informações em banco de dados, assim como em outrasatividades.

Figura 17: Exemplo de formulário

Componentes básicos

Importante que antes de partir para a construção do formulário conheça

alguns dos seus componentes básicos:

Label ou rótulo Nome:

Identica no formulário o que o usuário deve informar em um respecti- vo campo do formulário.

▪ Sintaxe de uso Nome:

Text

Este componente permite uma entrada de dados na forma de texto emuma única linha. Para implementar esse componente no formulário deveutilizar o comando:

- signica entrada.

Neste comando são utilizados os seguintes atributos:

▪ type (tipo) – identica que otipo do componente. Deve ser dotipo text (texto);

▪ name – identica o nome docomponente text no formulário;

▪ maxlength – número má-ximo de caracteres que pode serdigitado em seu interior;

▪ size – número que representaa largura do componente dadaem pixels.

DICA

Para determinar a largura docomponente text, veriqueo tamanho máximo de ca-racteres registrado em max -length, acrescente para size15 ou 20 pixels.Exemplo se em maxlengthvocê registrou 50, atribuapara size 65 ou 70, destaforma você está garanndoque caso o usuário preenchatodas as posições estas serãovisualizadas pelo usuário do

formulário.

▪ Sintaxe de uso

Select

Este componente permite que ainformação entrada para o for-mulário seja feita por meio daseleção de opções registrada emuma lista. Para implementar essecomponente no formulário deveutilizar o comando


42/128

41PROGRAMAÇÃO WEB

- seleção

Neste comando estamos utilizando o seguinte atributo

▪ name – identica o nome do componente select no formulário.

▪ Dentro do comando devem ser implementadas as opções

do select a partir do comando :---Escolha o sexo---

Feminino

Masculino

▪ No comando foi utilizado o atributo “ value”, esteatributo serve para determinar o valor da opção selecionada, ou seja,se escolher o sexo como Feminino, o valor de entrada no formulário éfeminino e assim por diante.

▪ Sintaxe de uso

---Escolha o sexo--- Feminino Masculino

Radio Buttom (Botão de rádio) Não

Este componente permite a entrada de dados no formulário clicandono botão de rádio, vias de regra existe mais de um botão de rádio comoopção, mas somente um dentre vários é que pode ser escolhido, ou seja,nesse tipo de componente somente uma, das várias opções, é que podeser escolhida.

Para implementar esse componente no formulário deve utilizar o co-mando

- signica entrada.


▪ type (tipo) – identica que o tipo do componente. Deve ser dotipo rádio;

▪ name – identica o nome do componente no formulário;

▪ value – determina o valor das opções dos botões de rádio, porexemplo, se o usuário escolher o botão de rádio Sim, o valor destecampo passa a ser aquele atribuído por este atributo para este compo-nente, no caso foi atribuído Sim, do contrário o valor do campo passaa ser aquele atribuído para o atributo value do componente Não, ouseja, o valor atribuído neste caso foi Não. Conra a seguir.

Aqui cabe uma observaçãoimportante, o nome dos bo-tões e rádio deve ser o mesmopara aquela entrada de dadosdo formulário desejado. Porexemplo, se deseja fazer umaentrada de dados no formu-lário para informar se temlhos ou não, vai ulizar 2 bo-tões de rádio, como no nossoexemplo, isto signica que napropriedade name destes, osvalores com os nomes devemser os mesmos, isto porque,assim no momento em que oformulário for ulizado ape-nas um dos botões poderá

ser escolhido, caso contrário,se atribuir nomes diferentesaos componentes todos osbotões de rádio poderão serescolhidos, o que foge as ca-racteríscas do componente.

▪ Sintaxe de uso

SimNão

Reparem que aqui estamosimplementando no formu-lário 2 componentes do porádio e os dois com o mesmo

nome.


43/128


CheckBox (Caixa de seleção) Caminhada

Este componente permite a entrada de dados no formulário, a partir doclique do mouse na caixa de seleção, a exemplo do botão de rádio, devemexistir várias caixas de seleção como opção para o usuário, mas ao con-trário do botão de rádio, mais de uma opção pode ser escolhida.

Para implementar esse componente no formulário deve utilizar o co-mando

- signica entrada.


▪ type – tipo, identica que o tipo do componente deve ser do tipocheckbox;

▪ name – identica o nome do componente no formulário;

▪ value – determina o valor das opções das caixas de seleção, porexemplo, se o usuário escolher a caixa de seleção Caminhada, o valordeste campo passa a ser aquele atribuído por este atributo para estecomponente, no caso foi atribuído Caminhada, e assim por diante.

Apesar de serem várias caixas de seleção juntas para que o usuário façasua entrada de dados no formulário, trata-se de componentes diferen-tes um do outro, cada checkbox tem o seu próprio nome e valor.

▪ Sintaxe de uso

FumaCaminhadaLeitura

TextArea

Este componente permite uma entrada de dados na forma de texto em várias linhas. Para implementar esse componente no formulário deveutilizar o comando

- signica área de texto.


▪ name – identica o nome docomponente no formulário;

▪ cols – identica a quantida-de de colunas que deseja que ocomponente contenha;

▪ rows – identica a quanti-dade de linhas que deseja que ocomponente contenha;Esse componente não aceita oatributo value , caso queira inserir,em tempo de programação, um

valor nesse componente deve fa-zer o seguinte:

Digiteaqui seu texto

O texto é escrito entre o coman-do que inicia e termina o compo-nente textarea , isto permite inserir,previamente, um texto no com-ponente.

BotãoSubmit(enviar)

Este componente é responsávelpor enviar os dados do formulárioao destino que lhe for orientado.

Para implementar esse compo-nente no formulário utilize o co-mando

- signica entrada.

Nesse comando são utilizados osseguintes atributos:

▪ type – tipo, identica que otipo do componente deve ser do

tipo submit (enviar);▪ name – identica o nome docomponente no formulário;


44/128

43PROGRAMAÇÃO WEB

▪ value – determina o valor dobotão, ou seja, o que é arma-zenado quando este é clicado etambém, ao contrário dos demaisque utilizam este atributo, exibe

no botão o valor atribuído a esseatributo, exemplo, a imagem dobotão acima aparece com o textoEnviar, é porque é esta palavraque encontra-se no atributo value desse botão.

▪ Sintaxe de uso

Botão Reset (limpar )

Este componente é responsávelem limpar os conteúdos dos cam-pos do formulário, apagar mesmo.

Para implementar esse compo-nente no formulário deve utilizaro comando

- signica entrada.

Nesse comando são utilizados osseguintes atributos:

▪ type – tipo, identica que otipo do componente deve ser dotipo reset (reiniciar);

▪ name – identica o nome docomponente no formulário;

▪ value – determina o valor dobotão, ou seja, o que é armaze-nado quando esse é clicado aimagem do botão acima aparececom o texto Enviar, é porque éesta palavra que encontra-se noatributo value desse botão.

▪ Sintaxe de uso

DICAOs recursos aqui apresentados são aqueles considerados como bási-cos necessários para a construção de suas aplicações web. Caso quei-ra aprofundar-se em outros recursos HTML, baixe tutoriais HTML

para conhecer mais como, por exemplo, em: .

Está preparado para prosseguir sua viagem de conhecimento? Muitoscaminhos ainda estão por vir.

Exemplo práco da etapa 2

Para praticar os recursos apresentados, resgate a primeira implementa-ção de sua aplicação, esclarecendo que a estrutura de pasta consideradana aplicação é a seguinte:

Figura 18: Estrutura de pastas aplicavo praca1html

Para esta implementação, insira na pasta imagens um arquivo chamadoalias_path.gif nas especicações de 16 pixels de largura por 11 pixels dealtura, que refere-se a uma imagem de uma seta que será implementadaantes dos links conforme script a seguir.

Inicialmente abra o arquivo index.html localizado na pasta pratica1htmle implemente os scripts conforme orientações.

Como primeira ação, prepare o título da página para a utilização de umlink interno, para isso faça o seguinte no script :

PRÁTICA HTML - PARTE 1


45/128


As demais ações para o link interno encontrará no script a seguir.

Agora, localize no script a tag e a tag , entre estas tags é quedeverá inserir os scripts escritos a seguir:

COMENTÁRIOS

a linguagem HTML fornece alguns recursos como inserção deimagens e links, bem como, a aplicação de tabelas e formulários,possibilitando assim a construção de páginas para a internet comorganização, clareza e navegabilidade.
Vale lembrar que nem todos os comandos, bem como, recursosestão contemplados neste estudo, a preocupação maior é com o

fundamento da linguagem, para que possa desenvolver as avida-des, futuramente propostas.

LINKS ÚTEIS

Tutorial HTML

Resumo cores HTML

Cadastre-se

Ir para o topo

A página index.html está pronta,mas você implementou 2 links Resumo cores HTML e Cadastre--se, estes devem acessar, respecti-

vamente, páginas que ainda não

existem, portanto, se clicar emum destes links uma mensagemdizendo que as páginas não foramencontradas será enviada.

Sendo assim, agora execute a pá-gina index.html para ver se estátudo OK, caso tenha algum pro-blema, corrija, se estiver tudo cor-reto teste os links externo (Tuto-rial HTML) e interno (Ir para otopo), a execução dos links Resu-

mo cores HTML e Cadastre-seainda não são possíveis, temosque avançar um pouco mais.

Continuando, vamos agora imple-mentar os scripts necessários parao acesso dos links Resumo coresHTML e Cadastre-se, primeira-mente prepare o script da páginaque mostrará o Resumo coresHTML, para isso atente para oseguinte:

1. inicie um novo documento noseu editor de programas;

2. este script deve ser salvo napasta pratica1html, juntamen-te com o arquivo index.html,com o nome de tabcores.html.

A seguir o script desta página:


46/128

45PROGRAMAÇÃO WEB

Aplicavo web - práca 1 HTML - RESUMO CORES HTML

TABELA RESUMO DE CORES HTML

As cores em HTML, como já estudou, podem ser atribuídas em várias situações emum página web, seja como fundo da página, tabela ou formulário, como tambémnos textos.Estas podem ser informadas de 2 maneiras a saber.

ATRIBUIR AS CORES Cor Pelo nome

Pelo código hexadecimal Branca White #FFFFFF Preta

Black #000000


47/128


Azul Blue #0000FF Amarelo Yellow #FFFF00 Verde Verde #2E8B57

Vermelha Red #FF0000 Cinza Gray #696969

Dica

Dê preferência para a atribuição das cores em código hexadecimal, você dispõe demuito mais opções, para isso consulte a tabelas de cores em hp://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm.

Principal Cadastre-se

Se você já implementou o scriptanterior, o salvou, agora executea página index.html para ver seestá tudo OK, se constatar algumerro, faça a correção e quandonão houver mais erros, teste olink Resumo cores HTML, veri-

que se este o desvia para a página Tabela Resumo de Cores HTML,se sim, está funcionando.

Ainda não encerrou a aplicação,já implementou o script da páginaResumo cores HTML, agora fal-ta implementar o script necessáriopara o acesso do link Cadastre-se,atente para o seguinte:

1. inicie um novo documento noseu editor de programas;

2. este script deve ser salvo na pas-ta pratica1html, juntamentecom o arquivo index.html,com o nome de cadastro.html.

A seguir o script desta página:


48/128

47PROGRAMAÇÃO WEB

Aplicavo web - práca 1 HTML - CADASTRE-SE

FORMULÁRIO EM HTML

Nome :

Endereço :

Sexo : ---Escolha o sexo--- Feminino

Masculino

Filhos : Sim Não

Hábitos : Fuma Caminhada Leitura

Observação :


49/128


Após implementar o script anterior, salve-o, agora execute a página index.

html para ver se está tudo OK, se constatar algum erro, faça a correção equando não houver mais erros, teste o link Cadastre-se, verique se esteo desvia para a página Formulário em HTML, se sim, está funcionando.

Agora sim, a aplicação proposta está encerrada. Nesta seção você conhe-ceu os fundamentos da linguagem HTML e por consequência deu umgrande passo para a construção de aplicações web e web sites dinâmicos.

A HTML por si só não permite a construção de aplicações dinâmicas,para isto, é necessário a aplicação de outras linguagens, então prossigapara a próxima seção e conheça também sobre CSS, este assunto é muitoimportante para o seu desenvolvimento.

SEÇÃO 3Script CSS

É importante frisar que neste momento resgatar os conhecimentos so-bre os fundamentos da HTML para que possa compreender e trabalharos conhecimentos sobre CSS.

Agora é hora de conhecer CSS, sua denição, relação com a HTML,estrutura básica de uso, elementos básicos de uso e aplicação prática.

CSS (Cascading Style Sheet )

A exemplo da HTML, não se trata de uma linguagem de programação,pode-se tratar como linguagem, mas também não é linguagem de forma-tação, esta é o HTML, mas então, é linguagem do que? Linguagem quepermite a aplicação de estilos em páginas web, isto mesmo, linguagem deestilos.

CSS X HTML

Como você já sabe a HTML éuma linguagem de formatação, apartir do seu uso consegue estru-

turar e marcar textos, cabeçalhos,parágrafos, links , botões, imagens,formulários e outros, já a CSS per-mite a padronização visual desteselementos na página como cores,estilos de linhas, bordas, posicio-namento de textos, layout, assimpor diante.

Você poderá vericar no decor-rer desta seção, que existe umarelação muito forte entre as duas

linguagens, verá que quando apli-car estilos CSS, estes trabalham,totalmente na padronização visu-al das páginas HTML a partir deseus elementos como, o corpo dapágina, links , parágrafos, tabelas,formulários e outros. Com isto aresponsabilidade do padrão visu-al da página é retirada da HTMLe passada para a CSS restando aHTML a responsabilidade sobre a

estrutura e conteúdo das páginasweb.

Com esta parceria entre a CSSe HTML suas aplicações cammais organizadas, leves e fá-ceis de aplicar manutenção,pois os script s encontram-seorganizados em arquivos di-ferentes e em tamanho redu-zidos.

Principal Resumo cores html


50/128

49PROGRAMAÇÃO WEB

Estrutura básica CSS

A melhor maneira de se compreender a relação CSS X HTML é prati-cando não acha? É o que fará a partir de agora, só precisa preparar oambiente para isto, então, antes de prosseguir faça o seguinte:

Crie, em drive local, uma pasta chamada, pratica1css, agora crie uma pas-ta, chamada css dentro da pasta pratica1css e em seguida abra o seueditor de programas, o Notepad++e aguarde novas orientações.

Sintaxe e componentes CSS

A estrutura básica de uma estrutura CSS segue a seguinte sintaxe:

elemento { atributo1 : valor; atributo2 : valor; atributo3 : valor; }

Conhecendo os componentes envolvidos.

▪ Elemento - dene o elemento ao qual o estilo será aplicado, poden-do este ser uma marca ( tag ) HTML, sem os sinais de maior e menor,este é também conhecido como seletor.

▪ Atributo - são as características ou propriedades que deseja denirao elemento como, por exemplo, font-size (tamanho da fonte), cuidado,deve ser um atributo válido CSS.

▪ Valor do atributo - são os valores válidos atribuídos aos atributosdo elemento CSS. Cuidado esses valores devem ser válidos para oatributo utilizado.Faça o seguinte, abra um novo documento no seu editor de programase escreva o script a seguir:

body{ /*Eslo para o corpo de uma página HTML*/ margin : 0px ; /*Tamanho de todas as 4 margens da página */ font-family : Verdana, Arial, Helveca, sans-serif ;

/*Tipo de fonte*/font-size : 12px ; /*Tamanho da fonte atribuído em pixels*/

background-color :

programação_web_modulo i

Documents