docroteiro-2-desenv-web - André Moraes [email protected]
download 
Denúncia Transcrição
roteiro-2-desenv-web - André Moraes [email protected]
Desenvolvimento de Sites com PHP e Mysql Docente – André Luiz Silva de Moraes Roteiro 2: Introdução a Linguagem HTML Neste roteiro é explorada a linguagem HTML. A linguagem HTML (Hypertext Markup Language) é amplamente utilizada na construção de páginas de internet e é responsável por padronizar toda a estrutura dos elementos que irão compor a página. Serão realizadas práticas envolvendo comandos fundamenteis e também comandos mais importantes utilizados atualmente na construção de páginas. Introdução A internet foi difundida inicialmente através do amplo uso da linguagem HTML. O grande nome que marcou época até os dias atuais é Tim Berners-Lee, que criou o HTML original sem muita padronização mas que permitiu evoluir para o que temos hoje. Outro nome importante no histórico que podemos citar também é a IETF (Internet Engineering Task Force), uma comunidade que participou e ajudou a cuidar da padronização e documentação da Internet e do seu funcionamento. A IETF manteve as publicações das modificações que deram a evolução da linguagem HTML ao longo dos anos desde a sua versão 1.0 até 5.0. Quando uma página é acessada, é rápido a sua exibição mas no processo geral o que acontece de fato é o seguinte: Quando é digitada uma URL como HTTP://www.endereco.com.br, o seu Browser localiza e conecta-se ao servidor www.endereco.com.br e envia-lhe o comando GET /endereço/índex.html. O servidor então lê o arquivo index.html da pasta raiz do endereço solicitado, transmite seu conteúdo para o cliente e encerra a conexão. Estes são os passos básicos de qualquer interação de um browser com um HTTP: conexão, solicitação, resposta e desconexão. A figura 6 ilustra este processo: Figura 6: Processo de Solicitação de uma página Web De forma geral a figura ilustra o processo de requisição de uma página no seguinte formato: O usuário digita o endereço que procura na Internet: Exemplo: HTTP://www.empresa.com.br/arquivo.html 1. O DNS é consultado e fornece o endereço IP 200.198.255.1 (endereço fictício) 2. O browser faz a conexão e envia a solicitação em HTTP 3. O servidor envia o conteúdo para o cliente 4. O browser apresenta o resultado na tela As linguagens de programação utilizadas na programação para a internet possuem dois grupos distintos: • Client Side: onde todo o código e execução de programas é descarregado para o computador de destino e executado localmente, utilizando processamento do computador que requisitou a página. • Server Side: onde o código de execução é localizado no servidor web e é responsável pelo processamento das requisições de computadores e retorno das informações que foram requisitadas. Um exemplo de requisição Server Side seria uma listagem de produtos em uma página onde são vendidos produtos online. Para utilizar o HTML na elaboração de uma página é necessário o conhecimento das TAGS e do que elas podem fazer, na tabela 2 serão demonstradas algumas das principais TAGS e o seu significado. Instituto Federal de Santa Catarina- Campus Garopaba Pág | 7 Desenvolvimento de Sites com PHP e Mysql Docente – André Luiz Silva de Moraes TAG <HTML> </HTML> <head> </head> <title> </title> <body> </body> DEFINIÇÃO UTILIZAÇÃO Define a estrutura geral de uma página HTML, todas as demais TAGS utilizadas em uma página serão inseridas internamente a estas duas. Define o cabeçalho de uma página, normalmente utilizada para inserir o título, informações complementares para motores de busca e a definição das linguagens de script que podem ser utilizadas na página. Insere um título no documento. Este título será visualizado no topo da barra do navegador que estiver sendo utilizado. Faz parte da estrutura geral do HTML: <html> <head> </head> <body> </body> </html> Define o corpo principal da página, todo o conteúdo interno que será exibido ao usuário será definido entre estas duas TAGS. <BR> <BR> Define uma quebra de linha quando necessário. Texto qualquer <BR> <h1><h2><h3><h4><h5 ><h6> Consistem em tags de cabeçalho, ou para a definição de títulos em uma página. Destaca um texto com um tamanho específico. O h1 é o maior, em seguida vem h2, h3, h4 até h6. <h1>Este é um texto formatado como título de nível 1. </h1> <pre></pre> Define uma formatação pré-definida, o navegador irá reproduzir exatamente o que for definido no código. Ex: se pressionarmos três vezes o espaço isto será reproduzido no navegador. <pre>Texto a ser formatado </pre> <hr> Insere uma linha horizontal diretamente onde for inserida na página. Pode ser utilizada para marcar regiões de destaque de uma página. <hr /> <a href = “endereço”></a> Cria um link direcionado para algum local. Normalmente envolve algum texto ou conteúdo que o desenvolvedor necessite que vire algum link para algum local ou endereço. Exemplo de um link para o Instituto Federal: <a href="http://www.ifsc.edu.br">Cl ique para ir para site</a> Tabela 2: Conjuntos de TAGS básicas do HTML Com as TAGS HTML demonstradas na tabela 2 é possível desenvolver uma página, porém os recursos existentes na mesma são pobres e não criam muitos elementos comuns a todas as páginas de internet existentes como imagens, tabelas, planos de fundo, etc. Algumas destas TAGS são quase impossíveis de lembrar de cabeça, entretanto devemos conhecer as mais importantes. Da tabela 2 já demonstrada, existe ainda um outro grupo importante que deve ser observado, demonstrado na tabela 3: Instituto Federal de Santa Catarina- Campus Garopaba Pág | 8 Desenvolvimento de Sites com PHP e Mysql Docente – André Luiz Silva de Moraes TAG <img> ATRIBUTO DEFINIÇÃO Exemplo de uso width Quanto utilizada permite o controle da largura de elementos, muito utilizada para controlar larguras de imagens e de páginas. Seu padrão de medida utilizada é em pixels. Quanto utilizada permite o controle da altura de elementos, muito utilizada para controlar alturas de imagens e de páginas. Seu padrão de medida é em pixels. <img src = “imagens/senac.jpg” width = “200px” heigth = “100” /> #insere uma imagem com tamanho de 200 x 100 pixels. height src <ol> Conhecido como “source”, e define o caminho de origem da imagem que está sendo inserida na página. <ol> Elemento de lista ordenada, destinado a servir de container para itens de listas ordenadas. Trabalha em conjunto com os seus subitens <li> </ol> Elemento de lista não ordenada, destinado a servir de <ul> <ul> container para itens de listas não ordenadas. Trabalha em conjunto com os subitens <li>. </ul> <p> <table> <li>elemento 1</li> <li>elemento 2</li> <li>elemento 3</li> <li>elemento 1</li> <li>elemento 2</li> <li>elemento 3</li> Destinado a realizar a criação de parágrafos, marca <p> este é um parágrafo.</p> todo o texto inserido entre as TAGS inicial e final como <p> este é outro parágrafo.</p> um parágrafo de texto, inserindo um espaçamento entre todos os parágrafos automaticamente. Destinado a realizar a criação de tabelas. Utilizado <table> em conjunto com as tags <tr> para a criação de linhas <tr> e <td> para a criação de colunas. Possui <td>coluna 1</td> configurações adicionais que podem ser exploradas <td>coluna 2</td> </tr> posteriormente. <tr> <td>coluna 1</td> <td>coluna 2</td> </tr> Tabela 3: Conjunto de TAGS adicionais Detalhando o elemento Link <A> Além das TAGS já demonstradas, algumas costumam ser muito mais utilizadas do que outras, este costuma ser o caso das tags de Link (<a>), que são importantes para fazer a ligação de uma página a outra permitindo o usuário realizar a navegação. É possível definir links de hipertexto com uso do elemento <A> no seguinte formato: <a> texto de link </a>. O conteúdo do elemento <a> torna-se clicável na página web. Normalmente este elemento é utilizado em conjunto com o atributo “href”, que diz ao browser qual será o destino do link criado. Instituto Federal de Santa Catarina- Campus Garopaba Pág | 9 Desenvolvimento de Sites com PHP e Mysql Docente – André Luiz Silva de Moraes TAG ATRIBUTO DEFINIÇÃO href EXEMPLO DE USO Define para qual destino será apontado o link. O mesmo pode ser um endereço externo de uma <a página ou o endereço local para uma página de href="http://www.yahoo.com.br">Clique para ir para o yahoo</a> sua estrutura de sites, ou mesmo para um arquivo em disco. Define em qual local será carregado o link clicado, as configurações mais comuns a estes são: _blank – Para direcionar o link para uma nova janela <a> target _top – Para direcionar o carregamento do <a href="http://www.yahoo.com.br" link para um frame (quando utilizados) target="_blank">Clique para ir para o _self – Para direcionar o carregamento do link para substituir os frames existentes(quando utilizados) yahoo</a> _parent – Para direcionar o carregamento do link para o frame-pai (quando utilizados) Em resumo, podemos criar páginas navegáveis com o uso de links, isto torna a página capaz de direcionar o usuário para diferentes regiões internas de um site permitindo-o explorar todo o conteúdo publicado. Tarefas 1. Abra um editor HTML (Geany ou NotePad ++) e utilizando as tags descritas nas tabelas do roteiro, tente reproduzir a página ilustrada na imagem a seguir. A figura 7. Salve a página com o nome index.html. Figura 7: Página inicial Chef Online DICA: Foram utilizadas tags de título (<h1>), linhas horizontais (<hr>), links e linhas em branco. Não esqueça da estrutra básica. Instituto Federal de Santa Catarina- Campus Garopaba Pág | 10 Desenvolvimento de Sites com PHP e Mysql Docente – André Luiz Silva de Moraes 2. Na mesma página, utilize a TAG <IMG> para adicionar 3 imagens ao final da página. Baixe as imagens da internet e tente incluí-las ao final da página. A figura 8 ilustra um exemplo de configuração que pode ser utilizada. Figura 8: Página inicial Chef Online modificada 3. Utilizando as TAG's <UL> e <LI> , transforme os itens da página em uma lista de itens. A figura 9 ilustra um exemplo de como pode ser feita esta tarefa. Figura 9: Configuração de lista para os itens da página inicial 4. Com o uso das TAG's <TABLE>, <TR> e <TD>, crie uma nova página de nome fale-conosco.html. No conteúdo da tabela inclua os nomes dos principais contatos da empresa, setor, seus telefones e o e-mail de cada um. A Figura 10 ilustra um exemplo desta configuração. Figura 10: Exemplo de criação de tabela com contatos 5. Ainda com o uso de tabelas, crie uma nova página de nome ingredientes.html. Da mesma forma que a página anterior, esta foi criada também com o uso de tabelas, porém agora as linhas não ficam visíveis. Um exemplo de página é demonstrado na Figura11. Instituto Federal de Santa Catarina- Campus Garopaba Pág | 11 Desenvolvimento de Sites com PHP e Mysql Docente – André Luiz Silva de Moraes Figura 11: Página de Ingredientes DICA: Nesta tabela foram inseridas figuras entre as suas células, porém não foram inseridas uma após a outra. 6. Para finalizar temos que criar um sistema de navegação. Com uso das tags de Link <A>, faça a ligação entre as páginas editando os itens da lista de itens descrita na Figura 9 e fazendo com que seja possível navegar para cada página clicando no item da lista. Para as páginas que ainda não existem, crie a referida página apenas com um título da mesma e uma linha horizontal abaixo do título. 1. As páginas que devemos criar são: dicas.html, receitas.html, fale-conosco.html e ingredientes.html. 2. A figura 12 ilustra a criação das demais páginas. Figura 12: Exemplo de página de receitas Referências W3schools, disponível em http://www.w3schools.com Xampp para Linux, disponível em http://www.apachefriends.org/pt_br/xampp-linux.html Instituto Federal de Santa Catarina- Campus Garopaba Pág | 12
Documentos relacionados
Baixar o livro Pílula HTML
o restante do site.
Para criar essa página inicial, acesse o editor de texto de sua
preferência e crie um arquivo novo chamado “index.html”. A
palavra index vem do inglês e significa índice, ou seja...
