Programação_Web_Modulo I

(1)

(2)

Curso Técnico em Informática

(3)

Robson Braga de Andrade

Presidente da Confederação Nacional da Indústria

Rafael Lucchesi

Diretor do Departamento Nacional do SENAI

Regina Maria de Fátima Torres

Diretora 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 Arruda

Diretor Regional do SENAI/SC

Antônio José Carradore

Diretor de Educação e Tecnologia do SENAI/SC

Marco Antônio Dociatti

(4)

Confederação Nacional da Indústria

Serviço Nacional de Aprendizagem Industrial

Curso Técnico em Informática

Programação Web

Silvio Luis de Sousa

Florianópolis/SC

2011

(5)

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

Autor

Silvio Luis de Sousa

Fotografias

Banco de Imagens SENAI/SC http://www.sxc.hu/

http://office.microsoft.com/en-us/ images/ http://www.morguefile.com/

http://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-001

Fone: (48) 0800 48 12 12 www.sc.senai.br

(6)

Prefácio

Você faz parte da maior instituição de educação profissional do estado. Uma rede de Educação e Tecnologia, formada por 35 unidades conecta-das e estrategicamente instalaconecta-das em toconecta-das as regiões de Santa Catarina. No SENAI, o conhecimento a mais é realidade. A proximidade com as necessidades da indústria, a infraestrutura de primeira linha e as aulas teóricas, e realmente práticas, são a essência de um modelo de Educação por 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 eficiente estrutura laboratorial, com o que existe de mais moderno no mundo da tecnologia, você está construindo o seu futuro profissional em uma instituição que, desde 1954, se preocupa em oferecer um modelo de educação atual e de qualidade.

Estruturado com o objetivo de atualizar constantemente os métodos de ensino-aprendizagem da instituição, o Programa Educação em Movi-mento promove a discussão, a revisão e o aprimoraMovi-mento dos processos

de 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ções colaborativas dos professores mais qualificados e experientes, e contam com 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 parte deste universo. Seja bem-vindo e aproveite por completo a Indústria do Conhecimento.

(7)

(8)

Sumário

Conteúdo Formativo 9

Apresentação 11

12 Unidade de estudo 1

Quer Programar para

Internet?

Seção 1 - Tecnologias de desenvolvimento para web Seção 2 - Ambiente de de-senvolvimento web Seção 3 - Instalação do am-biente de desenvolvimento web

24 Unidade de estudo 2

Desenvolvendo

Aplicações Dinâmicas

para a Internet

Seção 1 - Abordagem inicial Seção 2 - Script HTML Seção 3 - Script CSS Seção 4 - Linguagem de programação PHP

88 Unidade de estudo 3

Exemplo Prático

Seção 1 - Abordagem da aplicação Seção 2 - Desenvolvimento da aplicação

Seção 3 - Publicação do seu 13 13 16

Finalizando 123

Referências 125

25 25 48 59 89 89 121

(9)

(10)

Conteúdo Formativo

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. ▪ Utilizar os padrões de projeto em aplicações web.

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

Atitudes

▪ Organização e zelo na utilização de equipamentos. ▪ Foco no conteúdo trabalhado.

▪ Acesso a sítios relacionados ao tema trabalhado. ▪ Organização e limpeza dos ambientes coletivos.

▪ Dedicação e empenho nas atividades curriculares e extracurriculares. ▪ Capacidade de abstração.

▪ Trabalho em equipe.

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

(11)

(12)

Apresentação

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 as rotinas 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 desenvolvedor web.

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 desenvolver habilidades como, analisar e implementar as tecnologias de desenvolvi-mento web a partir de padrões de projetos pré-definidos 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!

Silvio Luis de Sousa

É graduado em Processamento de Dados e Sistemas de Infor-mação. Pós-graduado em For-mação docente para o Ensino Superior. Sócio proprietário da LM&SL Treinamento, Desenvol-vimento e Consultoria em Infor-mática com atuação em Joinville e região. Atua no SENAI em Join-ville como instrutor de cursos de qualificação e técnicos com experiência profissional em Treinamento e Desenvolvimen-to de projeDesenvolvimen-to de software.

(13)

Unidade de

estudo 1

Seções de estudo

Seção 1 – Tecnologias de desenvolvimento para

web

Seção 2 – Ambiente de desenvolvimento web Seção 3 – Instalação do ambiente de desenvolvi-mento web

(14)

Quer Programar para

a Internet?

Seção 1

Tecnologias 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 famosos CMS (Content Management System) traduzindo, Sistema Gerenciador de Conteúdo e também nas não menos famosas redes sociais, den-tre outros.

Tais tecnologias, conjugadas com metodologias de desenvolvimen-to de software, garantem aos apli-cativos web, flexibilidade, escalabi-lidade e melhor desempenho. Nosso estudo propõe levar ao seu conhecimento tudo que lhe ga-ranta a compreensão e possibili-dade para que domine o desenvol-vimento de aplicações web dentro das regras de boas práticas. É necessário compreender que existem várias tecnologias utilizadas para desenvolver aplicações para web, desde as mais elementares, e não menos importantes, as mais avançadas. Nesse contexto conhe-cerá sobre arquitetura cliente-ser-vidor, linguagens de programação como 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ão porque não estudá-las também? Bom, como esta unidade curricular contempla 150 horas de estudos e o compromisso é que você aprenda a desenvolver aplicações para a Internet, então serão adotadas as tecnologias que julgamos serem as mais viáveis neste processo de aprendizagem, sendo que, uma vez que se desenvolva bem, será capaz de absorver e desenvolver-se satisfatoriamente, em qualquer outra tecnologia.

Você precisa ter a consciência de que está em um processo de apren-dizado, então notará que em toda e qualquer rotina de programação terá que escrever os códigos, isto para que pratique e conheça ao máximo das linguagens que estará trabalhando, assim, quando fizer 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, mas quando tiver mais experiência e se deparar com a necessidade de customizar o código gerado por uma ferramenta, perceberá a im-portância do assunto.

O que acha de começar logo o processo? Então, vamos para a próxima sessão!

Seção 2

Ambiente de

desen-volvimento web

Quando se trata de desenvolver aplicações web, é importante aten-tar para as tecnologias referentes ao ambiente em que as aplicações serão desenvolvidas e executadas. Primeiramente você deve saber que aplicações desenvolvidas em linguagem PHP podem ser utili-zadas tanto na plataforma Linux, como Windows e independente da plataforma, deve conhecer os componentes envolvidos neste ambiente.

E que componentes são esses?

Os componentes envolvidos no ambiente web são:

▪

Sistema operacional Win-dows ou Linux – como você já sabe um sistema operacional trata do software básico instalado em uma máquina para que possa fazer uso de outras aplicações, porém, nesta unidade curricular será priorizado o sistema opera-cional Windows.

(15)

▪

Servidor web Apache – trata-se de um software que recria um ambiente para publicação de aplicações para a internet podendo, inclusive, ser utilizado localmente em seu computador permitindo que desenvolva e execute suas aplicações web sem a necessidade de estar conectado a internet.

Foi desenvolvido pela Apache Software Foundation é um software de código aberto, de muitos recursos, seguro e disponibilizado livremente na internet.

SAIBA MAIS

Para saber mais sobre o servidor web Apache, vi-site o vi-site <http://httpd. apache.org>.

SAIBA MAIS

Acesse <http://php.net>.

▪

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

outros.

Agora que você conhece os com-ponentes do ambiente de desen-volvimento e execução de aplica-ções web, confira na figura a seguir como 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 –É um

servidor de banco de dados e a exemplo do servidor Apache, de código aberto, distribuído gratui-tamente na internet e podendo ser utilizado localmente.

SAIBA MAIS

Para saber mais sobre o servidor MySQL, visite o site <http://mysql.org>.

▪

PHP - linguagem de

progra-mação dinâmica, baseada em

scripts,_{atualmente mais}

utiliza-da para a elaboração de aplica-ções para internet. Também é de código aberto, possui recursos de segurança muito eficazes e supor-te a orientação. Objetos que lhe conferem, atualmente, como a linguagem com inúmeras comu-nidades de grupos de discussões no mundo todo.

(16)

Perceba que a figura 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 dos componentes envolvidos.

Também, a partir da figura, você pode verificar que o ambiente é dividido em 2, por um lado o cliente da aplicação que fará as solicitações ao servidor web e por outro, o servidor, que por sua vez, é o local onde as aplicações são executadas a partir da solicitação do cliente. Então podemos definir que o ambiente web é dividido em lado cliente e lado servidor, esse é um assunto a ser detalhado mais adiante em nosso estudo.

Funcionamento de

uma aplicação web.

1. O usuário cliente, por meio de um 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 que foi requisitado, executa uma determinada tarefa. Caso seja a requisição de um arquivo em HTML ou figura, ele consul-ta o sistema de arquivos, esse arquivo 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 figura como, por exemplo, PHP, esta é desviada ao seu responsável, neste caso, arquivo PHP para que possa interpre-tar as instruções PHP e traduzi-las em respostas HTML, para serem devolvidas ao usuário cliente. Caso seja verificada a necessidade de consulta 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 estrutura desses, você verá neste livro em diversos momentos.

Lado cliente/Lado servidor

Você viu no tópico anterior que no contexto do ambiente web temos o lado 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 uma aplicação é onde são processadas diversas formas de interação ente o usuário e o sistema. Desta forma, quando um internauta visita sua pági-na, o meio pelo qual ele interage com ela é o navegador.

Continuando Melo e Nascimento (2007, p. 43) definem o seguinte sobre lado servidor “[...] pode ser entendido como a estação onde estão sendo executados os aplicativos aos quais os acessos são feitos. Quando você acessa um site web, uma requisição é enviada via protocolo HTTP para um 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ão executados 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 figura a seguir as linguagens, recursos e/ou tecnologias que são executados no lado cliente e no lado servidor.

(17)

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 gerais podemos 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 fornece sua resposta. ”

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

Seção 3

Instalação do ambiente de desenvolvimento web

Anteriormente você estudou que as aplicações PHP podem ser desen-volvidas e executadas tanto nas plataformas Linux ou Windows, caso queira fazer uso do Linux, deve-se instalar um ambiente LAMP, sigla que representa a junção dos nomes dos softwares que necessita instalar no ambiente, 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, sigla que também representa a junção dos nomes dos softwares que necessita instalar no ambiente, W de Windows, A de Apache ou servidor Apache, M de MySQL e P de PHP.

Você pode instalar um ambiente LAMP ou WAMP, primeiramen-te escolhendo o tipo de ambienprimeiramen-te que deseja trabalhar, feita a esco-lha você deve fazer a instalação de 2 maneiras distintas.

4. A partir de pacotes de softwares

pré-configurados, disponibi-lizados, gratuitamente na in-ternet e não necessitando de nenhum tipo de configuração para a instalação do ambiente.

5. A partir da instalação manual do ambiente, iniciando pelo

download dos softwares, servidor web Apache, servidor de Banco

de Dados e da linguagem PHP na versão pretendida. Após o download, instalar os softwa-res para depois partir para os

procedimentos de configura-ção dos servidores, linguagem de programação e do sistema operacional onde este ambien-te será instalado.

(18)

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

Pacotes de software

Sobre a instalação do ambiente a partir de pacotes de softwares comentam Melo e Nascimento (2007, p. 31)

Existem alguns projetos para ma-nutenção e pré-configuração de ambientes LAMP e WAMP. Na grande maioria dos casos, eles podem ser baixados gratuita-mente em seus sites oficiais pela internet. A grande vantagem da instalação de um servidor por este método é em relação ao tempo demandado e a facilida-de em sua execução. É a opção mais recomendada para usuários inexperientes no ambiente, [...].

Ainda fazem uma analogia com o método manual,

“Ao invés de instalar e configurar cada um dos componentes en-volvidos, estes pacotes oferecem ao usuário uma configuração bá-sica pré-montada”.

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

[...] nem sempre o usuário pode-rá alterar uma configuração com facilidade ou a atualização indi-vidual de um componente nem sempre será possível. Neste caso, é necessário que os responsáveis pelo projeto atualizem e disponi-bilizem uma nova versão do seu produto.

Existem vários pacotes de softwa-res bons e gratuitos na internet, confira!

▪

EasyPHP – disponível para

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

Seu site oficial é <http://easy php.org>

▪

Vertrigo – disponível para a plataforma Windows contém os seguintes componentes, servidor web Apache 2, PHP 5, servidor de banco de dados MySQL 5, SQLi-te 3, Smarty 3, phpMyAdmin 3, ZendOptimizer 3 e SQLiteMa-nager 1.

Seu site oficial é <http://ver-trigo.sourceforge.net>

▪

XAMPP – ao contrário dos anteriores, neste pacote você encontra versões disponíveis para as seguintes plataformas: Windo-ws, Linux, Mac OS X e Solaris. Contém os seguintes componen-tes, PHP 5, servidor web Apache 2, MySQL 5, SQLite, phpMyA-dmin.

Seu site oficial é <http://apa-chefriends.org/en/xampp. html>

Instalação manual

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

Esta é certamente a forma mais flexível de instalação do servidor, uma vez que cada componente do ambiente LAMP ou WAMP é instalado e parametrizado de maneira manual e individual pelo pró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, encontrado em http://httpd.apache.org;

▪

linguagem PHP, encontrada em http://php.net;

▪

servidor MySQL, encontrado em http://mysql.org.

Neste tipo de instalação existem algumas particularidades impor-tantes a serem consideradas, elas são relacionadas aos ambientes LAMP e WAMP. O Linux possui várias distribuições como: Conec-tiva, Ubunto, Had Rat, Suse, Sla-ckware dentre outros, o mesmo acontece no ambiente Windows existente 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 cada plataforma existe uma série de procedimentos de instalação e configuração a serem executados até a conclusão do processo.

(19)

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

Ambiente LAMP

▪

<http://www.phpbrasil.com/articles/article.php/id/492>.

▪

<http://www.vivaolinux.com.br/artigo/Ambiente-LAMP-no--Debian/>.

▪

<http://www.vivaolinux.com.br/artigo/Instalando-Apache2--PHP4-e-MySQL/>.

Ambiente WAMP

▪

<http://www.portaldigidesign.com.br/showarticle. php?articleID=25>.

▪

<http://www.imasters.com.br/artigo/1309>.

▪

<http://phpbrasil.com/articles.php/id/847>.

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

▪

Apache – nesta pasta você

encontra outras pastas contendo os arquivos de programas do servidor web Apache, ou seja, esses programas que permitem a execução desse servidor. Aqui também encontra os arquivos ABOUT_APACHE e LICENSE respectivamente, arquivo con-tendo informações gerais sobre o Apache e arquivo contendo informações sobre a licença de uso do Apache.

ATENÇÃO! Evite modificar o conteúdo de quaisquer arqui-vos dessa pasta sem o prévio conhecimento do que está fazendo. Também não exclua nenhum arquivo desta pasta.

▪

Mysql – aqui você encontra outras pastas contendo os arqui-vos de programas do servidor de banco de dados MySQL, ou seja, esses programas que permitem a execução desse servidor. Outra pasta é o arquivo my, contendo algumas configurações padrão do servidor Mysql como, por exemplo, em que pastas os bancos de dados criados devem ser gravados, qual a porta lógica o servidor Mysql estará utilizan-do dentre outras informações importantes.

Figura 3: Estrutura da pasta VertrigoServ do pacote Vertrigo Fonte:

Preparando o nosso

ambiente web

Seu estudo fará uso de pacotes de software justamente pelo fato de você ainda não ter muita experi-ência para instalar um ambiente manual. Utilizaremos o pacote do Vertrigo, por ser um pacote bastante estável, principalmente no Windows 7 Ultimate, que é a plataforma utilizada para o seu estudo.

Você estará trabalhando em um ambiente web de forma local, por-tanto, como procedimento inicial deve fazer o download do Vertrigo, de preferência em seu site oficial. Após o download, deve instalar, preferencialmente, na pasta Ar-quivos de Programas, feito isto localize a pasta VertrigoServ e acesse seu conteúdo, que apresen-ta a seguinte estrutura:

(20)

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

▪

Apache – nesta pasta você

encontra outras pastas contendo os arquivos de programas do servidor web Apache, ou seja, esses programas que permitem a execução desse servidor. Aqui também encontra os arquivos ABOUT_APACHE e LICENSE respectivamente, arquivo con-tendo informações gerais sobre o Apache e arquivo contendo informações sobre a licença de uso do Apache.

▪

Mysql – aqui você encontra outras pastas contendo os arqui-vos de programas do servidor de banco de dados MySQL, ou seja, esses programas que permitem a execução desse servidor. Outra pasta é o arquivo my, contendo algumas configurações padrão do servidor Mysql como, por exemplo, em que pastas os bancos de dados criados devem ser gravados, qual a porta lógica o servidor Mysql estará utilizan-do dentre outras informações importantes.

▪

Php – nesta pasta você tem acesso a outras pastas contendo os arquivos de programas da lin-guagem PHP que permitirão que você desenvolva suas aplicações nesta linguagem. Aqui também encontra vários arquivos de con-figuração do PHP.

ATENÇÃO! Evite modificar o conteúdo de quaisquer arqui-vos desta pasta sem o prévio conhecimento do que está fazendo. Também não exclua nenhum arquivo desta pasta.

▪

Phpmyadmin – trata-se da pasta contendo os arquivos de programas do utilitário que per-mite criar estruturas de banco de dados no servidor MySQL. Esse utilitário você já conhece, fize-mos uso dele na unidade curricu-lar de Banco de dados módulos I e II. Aqui você fará uso desse utilitário também, sempre que precisar fazer alguma tratativa com banco de dados em nossas aplicações PHP.

▪

www – esta pasta é muito

im-portante, o servidor Apache vem pré-configurado para reconhecer a pasta www como aquela em que encontram-se os arquivos de programas web que devem ser executados a partir da solicitação dos clientes via browser. Isto quer dizer que todas as aplicações web que desenvolver devem ser salvas nessa página, pois caso contrário, não serão executadas pelo servi-dor Apache.

ATENÇÃO! Aqui você tem a liberdade de modificar e/ ou excluir as pastas e arqui-vos das aplicações que você criou. Deve ter percebido que existem alguns arquivos que não foram criados por você, nestes, não deve modi-ficar nem tampouco excluir, pois tratam-se de arquivos do Vertrigo.

Para encerrar o processo de reco-nhecimento da estrutura da pasta VertrigoServ, você conhecerá al-guns arquivos encontrados nesta pasta como.

(21)

▪

Uninstall_{(tipo aplicativo)}

– trata-se do arquivo do progra-ma que desinstala o pacote do Vertrigo da sua máquina.

ATENÇÃO! Ao desinstalar este pacote, seus bancos de dados, encontrados em Ver-trigoServ/Mysql/data, como também suas aplicações en-contradas em VertrigoServ/ WWW, serão excluídas, por-tanto, se houverem banco de dados e aplicações faça o backup 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, com 2 cliques do botão esquerdo do mouse ou pressionando a tecla en-ter neste arquivo, estará executan-do o Vertrigo. Sugere-se que crie um ícone deste arquivo na área de trabalho de sua máquina.

ATENÇÃO! Não exclua este arquivo.

▪

Vertrigo (tipo Parâmetros de configuração) - Este é

o arquivo de configuração do Vertrigo com especificações de configuração dos softwares embarcados no Vertrigo, como o servidor Apache, Mysql e como o status destes servidores ao executar o Vertrigo, dentre outras configurações.

ATENÇÃO! Evite modificar o conteúdo deste arquivo sem o prévio conhecimento do que está fazendo. Evite tam-bém excluí-lo.

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

Testando o ambiente web

instalado

Agora que já instalou o Vertrigo e também conheceu sobre sua es-trutura básica, deve fazer o teste para saber se o ambiente web en-contra-se pronto para ser utiliza-do. Como? Siga os procedimentos indicados a seguir.

1. Execute o programa do Vertri-go;

Pode ser executado a partir do arquivo VertrigoServ/Vertrigo, aquele identificado com uma es-trela antes de seu nome ou a par-tir do ícone da área de trabalho, caso o tenha criado, este também identificado por uma estrela. Para executar o programa, não custa lembrar, basta clicar 2 vezes com o botão esquerdo do mouse ou pressionar a tecla enter.

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

(22)

Note que aparece, no lado esquer-do da janela, a relação esquer-dos softwares embarcados no pacote Vertrigo com suas respectivas versões, ao lado direito aparecem 3 sessões que orientam, basicamente, você no seguinte.

Tray icons

São mostradas as imagens de um servidor com sinalizações em ver-de, vermelho, amarelo e azul, isto orienta você sobre qual o status ou estado dos servidores Apache e MySQL, 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.

Documentation

Clique neste link para acessar a ajuda do aplicativo, sugere-se que realmente acesse essa ajuda para que conheça mais detalhes sobre o Vertrigo.

Settings

É a sessão que permite, em Program, você modificar a configuração do programa, 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, configurar as extensões de arquivos, aceitas para o servidor Apache e linguagem PHP. Também permite configurar, em Components, os recursos do PHP, MySQL e Apa-che aceitos no ambiente e por último, permite, em Aliases and dirs, con-figurar os caminhos e diretórios para acesso às pastas de publicação de páginas, dos ícones do servidor Apache, do utilitário do Phpmyadmin e do utilitário do banco de dados Sqlitemanager.

Iniciando o Vertrigo

Para efetivar a execução do Vertrigo e consequentemente a inicialização dos 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 figura 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 ícone com a imagem de um servidor, sinalizando o status, ou estado, dos servi-dores naquele momento, como mostra a figura 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 PHP salvando-o no servidor Apache e para escrever as instruções desse script utilizaremos o editor de texto Notepad++.

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

(23)

Proceda da seguinte maneira:

▪

execute o VertrigoSev e certifique-se que os servidores estão em execuçã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: <?php

phpinfo(); ?>

▪

Salve esse script, com o nome de testeambiente.php, na pasta

Programas/VertrigoServ/WWW /testeambiente/;

DICA

Lembre-se que a pasta www é a pasta que o servidor web Apache reconhece as aplicações web que ele deve executar e entregar ao cliente browser.

▪

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

<http://127.0.0.1/testeam-biente/testeambiente.php>

DICA

Em caso de algum proble-ma, certifique-se de que o servidor web Apache está iniciado, se sim, verifique se cometeu algum erro ortográ-fico no endereço digitado, ou equivocou-se no nome da pasta ou arquivo, se tudo estiver ok e mesmo assim o problema persistir, troque o endereço ip 127.0.0.1 por

localhost.

Se tudo correu bem, receberá como retorno do servidor Apa-che, uma página web, contendo todas as informações da configu-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 figura a seguir.

(24)

3. Finalizando o VertrigoServ

Para finalizar 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 tentativa de executar suas aplicações web não será bem sucedida, para isto deve executar novamente o Ver-trigo.

Assim, você chega ao fim desta seção de estudo e com a certe-za de que contribuímos bastante para o seu conhecimento em am-biente de aplicações web. Agora que já conhece o básico neces-sário para iniciar o estudo do de-senvolvimento de aplicações para web, 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 a internet. Vamos juntos para mais um percurso de aprendizagem?

(25)

Unidade de

estudo 2

Seções de estudo

Seção 1 – Abordagem inicial

Seção 2 – Script HTML Seção 3 – Script CSS

(26)

Desenvolvendo Aplicações

Dinâmicas para a Internet

Seção 1

Abordagem inicial

A partir dos conhecimentos pro-postos para esta unidade, você terá condições de desenvolver scripts web para o desenvolvimento de 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 final das páginas web), CSS (importante na implementação de estilos nas páginas web), PHP (linguagem dinâmica que auxilia o HTML no acesso a arquivos), va-lidação e tratamentos de campos de formulários, acesso a banco de dados, utilização de cookies e ses-sões, dentre outras importantes recursos.

É importante que no decorrer dos seus estudos você pratique todos os comandos, instruções e rotinas apresentadas, pois para que possa aprender para valer nada melhor do que praticar. Lembre-se: desen-volva as atividades propostas para adquirir volume e ritmo de trabalho em programação.

Para a prática dos conhecimentos desta unidade utilize:

▪

Navegador – Mozilla Firefox e Internet Explorer.

▪

Editor de programas – Notepad++.

▪

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

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

Seção 2

Script HTML

Esta seção propõe o conhecimento básico da HTML a partir de sua definição, estrutura básica, comandos e recursos, que permitam junta-mente com as demais tecnologias a ser estudado, o desenvolvimento de aplicaçõ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++, Mozilla Firefox e testes também no Internet Explorer.

HTML (HyperText Markup Language)

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

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

(27)

Estrutura básica de um

script HTML

Mas, antes da estrutura, é impor-tante que você conheça a defini-ção de TAG, já que este elemento é à base de tudo nesta linguagem.

TAG

Chamada por alguns como marca e por outros de rótulo, você a uti-lizará em seu script para formatar sua aplicação e também a partir dela que aplicará os comandos de formatação HTML que serão interpretados pelo browser (nave-gador internet) para a reprodução de páginas web.

Sua sintaxe ou forma de es-crita é simples, começa com o símbolo de “<” e termi-na com “>”, como exemplo, <html>, na prática, como já comentado, representam os comandos de formatação que serão interpretados pelos na-vegadores.

É muito comum você ouvir programadores web referir-se a tags HTML como comandos HTML, na realidade você aplica os comandos HTML a partir de tags, mas isto não é significativo, o que interessa é saber utilizá-las da melhor maneira para alcançar seus objetivos.

Existem 2 tipos de tags, as de abertura <html> e as de fechamento </html>, o script que você escrever entre elas, é o que será interpretado e processado pelo navegador internet.

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 propro-gramador escreve, no sentido de esclarecer e/ou organi-zar o script, estas não são interpretadas e nem tampouco geram nenhum resultado, realmente apenas servem para documentação.

Exemplificando, suponha que você deseja elaborar uma instrução HTML e queira documentar o que esta faz, com o propósito de que, se em algum momento, houver a necessidade de se efetuar a manutenção no 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 <!--, seguida do

comentário, sendo finalizada com o símbolo -->.

Cor em HTML

Não serão poucos os momentos em que você precisará atribuir cores em sua 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 ser utilizadas em 2 formatos:

▪

Básico

É aquele em que você utiliza a cor fazendo referência ao seu nome em inglês, por exemplo, suponha que deseja escrever em sua página a palavra HTML em vermelho, ficaria assim:

A instrução <font color = “red”> aplica ao texto HTML a cor

verme-lha e para finalizar o comando é utilizada a tag </font>, não se preocupe agora com isto, você verá em detalhes logo adiante.

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

(28)

▪

Código RGB (Red Green Blue)

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

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 o mesmo do exemplo anterior, ou seja, HTML.

DICA

Para ter acesso à tabela de cores hexadecimal HTML pode acessar o site <http://www.mxstudio.com.br/Conteudos/Dreamweaver/Co-res.htm>, por exemplo.

Agora sim chegou o momento de conhecer a estrutura script HTML

Estrutura script HTML

<head>

</head>

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

</body>

</html>

Cabeçalho do documento

HTML

Comando - <title>

▪

Definição

Acrescenta um título para a sua página web, mais precisamente, na barra de título do browser.

▪

Sintaxe de uso

<head>

<title>Este texto será apresentado na barra de título do seu bro-wser</title>

</head>

▪

Comentários

Este comando deve ser escrito dentro da tag <head>, na sua es-trutura HTML.

Observe que a sintaxe de escri-ta deste comando inicia com a abertura da tag <title>, seguida do título que deseja mostrar na barra de título do browser e, após o título, o encerramento com a tag </title>.

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 da HTML, que por sua vez, roda no lado cliente dispensando o uso do servidor web neste caso.

Sugiro que crie sua pasta no drive local de sua máquina e nesta, você armazene, em pastas específicas as aplicações com as práticas dos comandos repassados.

(29)

Comandos para formatação do texto

Comando - <center>

▪

Definição

Centraliza, na página, tudo o que estiver escrito em sua área de abran-gência.

▪

Sintaxe de uso

<body>

<center>Este texto será centralizado na página web</center> </body>

▪

Comentários

Veja que este comando deve ser escrito dentro da tag <body>, na sua estrutura HTML.

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

Comando – <font>

▪

Definição

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

▪

nome da fonte = atributo face;

▪

tamanho da fonte = atributo size;

▪

cor da fonte = atributo color;

▪

Sintaxe de uso

<body>

<font face = “verdana” size = “12” color = “#B22222”>Texto formatado</font>

</body>

▪

Comentários

1. Este comando deve ser escrito dentro da tag <body>, na sua

estru-tura HTML.

2. Uma particularidade importante é a de que este comando necessita de alguns 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 destacar que se você omitir o atributo

face (nome da fonte), a fonte

aplicada será aquela padrão da máquina cliente em que a página é executada, normal-mente Times New Roman. O

que também acontece com o tamanho e cor da fonte, neste caso será adotado o tamanho e cor da fonte padronizados da máquina cliente, ou seja, não teria motivo para utilizar este comando.

4. Este comando é finalizado com a utilização da tag de

en-cerramento </font>.

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

c - Comando –<p>

▪

Definição

A letra p na tag <p> é a abrevia-tura para “paragraph” (parágrafo) que é exatamente o que o texto é um texto parágrafo. Deve aplicar somente quando o texto da pági-na tratar-se de um parágrafo, do contrário, não há necessidade de uso deste comando.

▪

Sintaxe de uso

<body>

<p>Exemplo de um texto escrito na pági-na ... </p>

(30)

▪

Comentários

Este comando deve ser escrito dentro da tag <body>, na sua es-trutura HTML.

Perceba também que a sintaxe de escrita deste comando inicia com a abertura da tag <p>, seguida do parágrafo, logo após, o encerra-mento com a tag </p>.

Comando – <br>

▪

Definição

Permite que você determine uma quebra de linha na sua página web, podendo esta ocorrer no meio de um texto, como por exemplo:

▪

Sintaxe de uso <body> Este é um exemplo de<br />quebra de linha em HTML <br />no meio de um texto. </body>

▪

Como resultado Este é um exemplo de quebra de linha em HTML no meio de um texto.

Permite também a quebra de li-nha ao final do texto e também entrelinhas do texto, como por exemplo:

<body>

Este é um exemplo de quebra de linha ao final de um texto. <br />

<br />

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

</body>

▪

Como resultado

Este é um exemplo de quebra de linha ao final de um texto. Esta linha será impressa abaixo da anterior.

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

▪

Comentários

Este comando deve ser escrito dentro da tag <body>, na sua estrutura HTML.

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 <br />. Isto acontece com outros comandos HTML também.

Comando - <b>

▪

Definição

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

▪

Sintaxe de uso

<body>

<b>Estou em negrito</b> </body

▪

Comentários

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

(31)

Uma particularidade é a de que este comando está caindo em de-suso, sendo, aos poucos, substitu-ído pelo comando <strong>.

Comando - <strong>

▪

Definição

Como relatado, é um comando que aparece em substituição ao comando <b>, sendo sua aplica-ção a mesma, ou seja, deve aplicar quando você deseja formatar um texto ou palavra em negrito.

▪

Sintaxe de uso <body> <strong>Também es-tou em negrito </strong> </body>

▪

Comentários

Perceba também que a sintaxe de escrita deste comando inicia com a abertura da tag <strong>, segui-da do texto, logo após, o encerra-mento com a tag </strong>.

Comando - <i>

▪

Definição

A letra i na tag <i> é a abreviatura para “italic” (itálico). Deve aplicar quando você deseja formatar um texto ou palavra em itálico.

▪

Sintaxe de uso

<body>

<i>Estou em itálico</i> </body>

▪

Comentários

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

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

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

▪

Exemplo: <center> <h1> <font face=”verdana” > <strong>Múltiplos comandos HTML </strong> </font> </h1> </center> Comando - <small>

▪

Definição

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

▪

Sintaxe de uso

<body>

<small>Este texto é visualizado em um tamanho bem reduzido </small>

</body>

▪

Comentários

Sintaxe de escrita deste coman-do inicia com a abertura da tag <small>, seguida do texto, logo após, o encerramento com a tag </small>.

Comandos para subtítulos

▪

Definição

Subtítulos em páginas web são os títulos implementados no corpo da página, são considerados subtítulos porque título é aquele implementado na tag <title>Título da página</ title> como mostrado anterior-mente, então, caso necessite tra-balhar com estrutura de subtítulos em suas páginas web, você conta com os seguintes comandos:

▪

Sintaxe de uso <h1>Subtítulo nível 1</h1> <h2>Subtítulos nível 2</h2> <h3>Subtítulos nível 3</h3> <h4>Subtítulos nível 4</h4> <h5>Subtítulos nível 5</h5> <h6>Subtítulos nível 6</h6>

(32)

▪

Sintaxe de uso

<body>

<i>Estou em itálico</i> </body>

▪

Comentários

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

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

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

▪

Exemplo: <center> <h1> <font face=”verdana” > <strong>Múltiplos comandos HTML </strong> </font> </h1> </center> Comando - <small>

▪

Definição

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

▪

Sintaxe de uso

<body>

<small>Este texto é visualizado em um tamanho bem reduzido </small>

</body>

▪

Comentários

Sintaxe de escrita deste coman-do inicia com a abertura da tag <small>, seguida do texto, logo após, o encerramento com a tag </small>.

Comandos para subtítulos

▪

Definição

Subtítulos em páginas web são os títulos implementados no corpo da página, são considerados subtítulos porque título é aquele implementado na tag <title>Título da página</ title> como mostrado anterior-mente, então, caso necessite tra-balhar com estrutura de subtítulos em suas páginas web, você conta com os seguintes comandos:

▪

Sintaxe de uso <h1>Subtítulo nível 1</h1> <h2>Subtítulos nível 2</h2> <h3>Subtítulos nível 3</h3> <h4>Subtítulos nível 4</h4> <h5>Subtítulos nível 5</h5> <h6>Subtítulos nível 6</h6>

▪

Como resultado:

Subtítulo nível 1

Subtítulos nível 2

Subtítulos nível 3

Subtítulos nível 4

Subtítulos nível 5

Subtítulos nível 6 Figura 8: títulos em tag HTML

▪

Comentários

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

Comando para barra horizontal

Comando - <hr>

▪

Definição

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

▪

Sintaxe de uso

<font face=”verdana” color=”#FF0000”>Abaixo uma linha sublinhada

</font> </h1> <hr /> </body>

(33)

▪

Comentários

A sintaxe de escrita deste comando, a exemplo do comando <br />, também possui a indicação de abertura e fechamento do comando na própria tag <hr />.

Comandos para listas de opções

Comando - <ul>

▪

Definição

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

▪

Sintaxe de uso

<li>Um item de lista</li> <li>Outro item de lista</li> </ul>

</body>

▪

Como resultado:

▪

um item de lista;

▪

outro item de lista.

▪

Comentários

O comando <ul> é responsável pelo recuo da lista de itens e que o co-mando <li> é responsável pela impressão do marcador dos itens. A sintaxe de escrita dos comandos inicia com a abertura das tags <ul> e <li> e encerra-se com as tags </li> e </ul> respectivamente.

Comando - <ol>

▪

Definição

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

▪

Sintaxe de uso <body> <ol> <li>Um item de lista</li> <li>Outro item de lista</li> </ol> </body>

▪

Como resultado:

6. primeiro item lista;

7. segundo item da lista.

▪

Comentários

Este comando deve ser escrito dentro da tag <body>, na sua es-trutura HTML.

O comando <ol> é responsável pelo recuo da lista de itens e que o comando <li> é responsável pela impressão da numeração dos itens.

Perceba também que a sintaxe de escrita dos comandos inicia com a abertura das tags <ol> e <li> e encerra-se com as tags </ol> e </li>.

Exemplo prático da

etapa 1

Crie, em drive local, uma pasta chamada, pratica1html, abra o seu editor de programas, será utiliza-do o Notepad++.

Digite o script de uma pequena aplicação apenas para praticar os comandos passados até o mo-mento, não existe pretensão ne-nhuma em desenvolver, um web site mais elaborado.

Você observou que o nome da pasta não está acentuado?

Isto é comum em pastas e arquivos de aplicativos web, uma vez que esses podem ser publicados em algum servidor web que não interprete acentuação de nenhum tipo, 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 scriptda aplicação didática proposta Com o seu editor aberto escreva o script a seguir:

(34)

Você observou que o nome da pasta não está acentuado?

Isto é comum em pastas e arquivos de aplicativos web, uma vez que esses podem ser publicados em algum servidor web que não interprete acentuação de nenhum tipo, 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 scriptda aplicação didática proposta Com o seu editor aberto escreva o script a seguir:

<title>Aplicativo web - prática 1 HTML</title> </head>

<h1>

<font face=”verdana” color=”#5F9EA0”>PRÁTICA HTML - PAR-TE 1</font>

</h1> </center> <hr />

<p>Traduzindo, não ao pé da letra, mas na sua aplicação, o sig-nificado de <strong><i>HTML</strong></i> pode ser entendido como, linguagem de formatação que permite a elaboração de web sites com hiper-textos. Ao contrário do que muitos se re-ferem, <strong><i> HTML </strong></i>não é uma linguagem de programação, mas sim, uma linguagem de formatação que interpretada pelo navegador internet, reproduz uma página web.</p>

<h2><font color=”#5F9EA0”>RESUMINDO HTML</font></h2> <ul>

<li><b><i>HTML</b></i><font color=”red”> Hypertext Ma-rkup Language</font>,ou seja, Linguagem de marcação ou formatação de hipertexto;</li>

<li><b><i>HTML</b></i><font color=”red”> não</font> é linguagem de programação e <font color=”red”>sim</font> de formatação; </li>

<li><b><i>HTML</b></i> é <font color=”red”>interpretada</ font> pelo seu browser (navegador internet);</li>

<li><b><i>HTML</b></i> é responsável pela apresentação da página web em um navegador internet.</li>

</ul>

<h2><font color=”#5F9EA0”>INFORMAÇÕES ADICIONAIS</ font></h2>

<ol>

<li><strong><i>HTML</i></strong> é a base das aplicações web;</li>

(35)

<li>Por ser base das aplicações web, integra-se com outras lin-guagens estáticas como,<font color=”red”>Javascript</font>, e dinâmicas como <font color=”red”>PHP</font>; </li> <li>Por se tratar de uma linguagem de formatação é de fácil apren-dizado e manuseio</li>

<li>Para entender a <strong><i>HTML</i></strong> é neces-sário conhecer sua estrutura e comandos e efetuar a prática dos mesmos.</li> </ol> </font> <hr /> </body> </html>

▪

Salvando e executando seu script

Salve este script, na pasta pagina1html com o nome de index.html, cuida-do, certifique-se de que salvou corretamente este arquivo com o nome solicitado, 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 esse arquivo e eliminar a extensão .txt, após confirmar esse procedimento o arquivo 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 trata de um arquivo HTML sua página será executada, a partir do browser configurado como padrão em sua máquina.

▪

A partir do browser – abra o browser de sua preferência e a partir deste abra o arquivo index.html.

Confira 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 hou-ver algum erro será mais fácil encontrá-lo uma vez que a quantidade de instruções é pequena, por exemplo, comece escrevendo os scripts de <html> até </html>, 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 do texto “Aplicativo web - prática 1 HTML” na barra de título do browser em função dos comandos que escreveu neste trecho.

Mas a vantagem é a seguinte, caso haja algum problema que tenha impedido este resultado a quanti-dade de comandos para visualizar o erro é pequena, assim fica 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 linhas de comando no seu editor, basta acessar o browser e pressionar a te-cla f5, isto fará com que sua apli-cação seja atualizada mostrando as implementações no seu script e este procedimento deve ser repe-tido durante o desenvolvimento. Você deve ter observado que a aplicação e a exceção do coman-do <br> e <small>, contempla todos os comandos apresentados até o momento, mas a medida que novos comandos são apresenta-dos você estará implementando nesta aplicação, portanto, logo estará de volta ao script para acres-centar novos comandos. Vamos em frente? O próximo tópico também é muito importante na criação do seu web site.

Inserindo Imagens

É muito comum você necessitar inserir imagens no seu web site e quando isto ocorrer, basta recor-rer ao comando.

Supondo que deseja carregar uma imagem, cujo arquivo seja do tipo

GIF e encontra-se na mesma

pas-ta do programa onde escreverá o script para carregar a imagem.

(36)

Figura 9: Localização pasta imagem.gif

A sintaxe de uso ficaria 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-se na mesma pasta do programa onde escreverá o código, agora o arquivo encontra-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 ficaria 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: <img src=”imagem.gif ” border=”1” width=”20%” height=”20%” align=”center” title=”Mensagem”>

▪

Border – este atributo permite atribuir, à imagem, uma borda, 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 valor referente à largura da imagem, podendo esse ser em pixels ou em %, 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 valor referente à largura da imagem, podendo esse, também, ser em pixels ou em %, no exemplo, este valor é de 20%, o que equivale a 20% da visualização total da página.

▪

Align– este atributo permite atribuir, à 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 permite atribuir, à imagem, uma mensa-gem informativa. Essa mensamensa-gem é visualizada ao passar o mouse sobre a imagem.

A sintaxe para a inserção de imagens em páginas web são sempre estas apresentadas aqui, seja para inserir ima-gens em textos, tabelas ou outros.