Criação de Sites I e II - Manual do Aluno

60 %
40 %
Information about Criação de Sites I e II - Manual do Aluno
Technology

Published on March 9, 2014

Author: DeniseMPinho

Source: slideshare.net

Description

Apostila criada para as matérias de Criação de Sites I e II enquanto professora no curso técnico em informática na Escola Técnica Estadual Monteiro Lobato.
Aborda temas básicos da criação de Websites como: linguagens HTML e CSS, upload de arquivos utilizando o Filezilla, noções básicas de programação de sistemas web com PHP + banco de dados MySQL (sistema de cadastro, login, upload e busca) e aplicação de Javascript em formulários.

CRIAÇÃO DE SITES I E II MANUAL DO ALUNO Elaboração: Professora Denise Moraes Pinho Taquara - RS 2014

2 Índice MÓDULO I – HTML, CSS e design de sites estáticos CAPÍTULO 1: Conceitos básicos 1.1: O que é HTML?.....................................................................................................6 1.2: HTML: Peculiaridades..........................................................................................7 1.3: Tags básicas.............................................................................................................7 1.4: Editor.......................................................................................................................9 1.5: Atributos...............................................................................................................10 1.6: Tag <meta>............................................................................................................11 CAPÍTULO 2: Formatando Texto 2.1: Tags para formatação de texto............................................................................12 2.2: Texto animado......................................................................................................14 2.3: Hyperlinks............................................................................................................15 2.4: Formatação de parágrafos..................................................................................17 2.5: Listas.....................................................................................................................17 CAPÍTULO 3: Recursos visuais 3.1: Inserir imagens.....................................................................................................19 3.2: Linhas horizontais................................................................................................20 3.3: Tabelas...................................................................................................................21 CAPÍTULO 4: Estruturas avançadas 4.1: Formulários..........................................................................................................23 4.2: Divs........................................................................................................................25 4.3: Frames...................................................................................................................26 4.4: iFrames..................................................................................................................26 CAPÍTULO 5: Noções básicas de design 5.1: Áreas de layout.....................................................................................................27 5.2: Paleta de cores......................................................................................................28 CAPÍTULO 6: Como transferir arquivos para sua hospedagem Online 6.1: Fazendo transferência de arquivos com o Filezilla...........................................29 CAPÍTULO 7: CSS básico 7.1: Introdução............................................................................................................33 7.2: Trabalhando com seletores..................................................................................34 7.3: Formas de manipular folhas de estilo CSS........................................................35 7.4: Aplicando CSS em tabelas...................................................................................38 7.5: Aplicando CSS em divs........................................................................................39 7.6: Trabalhando com seletores avançados...............................................................40 7.7: Aplicando CSS em divs para criação de menus................................................43 CAPÍTULO 8: Caderno de exercícios..........................................................................................46

3 MÓDULO II – PHP + Banco de dados Mysql, noções de javascript e sistemas para sites dinâmicos CAPÍTULO 1: Conceitos básicos 1.1: O que é PHP? …..................................................................................................75 1.2: Primeiros passos...................................................................................................75 1.3: XAMPP – funcionamento....................................................................................76 CAPÍTULO 2: Fundamentos de programação 2.1: Formas de delimitar o código PHP.....................................................................78 2.2: Declarando variáveis...........................................................................................78 2.3: Strings...................................................................................................................79 2.4: Imprimindo texto na tela.....................................................................................79 2.5: Concatenação de Strings.....................................................................................81 2.6: Arrays....................................................................................................................82 2.7: Estruturas de controle.........................................................................................85 2.8: Estruturas de repetição.......................................................................................87 CAPÍTULO 3: Enviando dados através de formulários 3.1: Métodos GET e POST.........................................................................................89 3.2: Criando formulários de envio por e-mail com a função mail().......................91 CAPÍTULO 4: Validação de formulários 4.1: Funções para validação server-side com PHP...................................................95 4.2: Validações client-side com javascript.................................................................98 4.3: Como crio uma máscara para campo de formulário?....................................100 CAPÍTULO 5: Sistema de upload...............................................................................................101 CAPÍTULO 6: Integrando PHP com banco de dados 6.1: Conceitos básicos................................................................................................103 6.2: Utilizando PHPMyAdmin.................................................................................103 6.3: Exemplo – Sistema de cadastro........................................................................107 CAPÍTULO 7: Sistema de busca................................................................................................111 CAPÍTULO 8: Cookies 8.1: Criando e manipulando cookies........................................................................113 8.2: Exemplo – Sistema de login...............................................................................114 CAPÍTULO 9: Caderno de exercícios.........................................................................................119

4 Introdução História da Web Durante o cenário da Guerra Fria surge nos EUA, em 1957, a ARPA (Agência de Pesquisa em Projetos Avançados), que era diretamente ligada ao Departamento de Defesa americano, e tinha por objetivo manter a superioridade tecnológica do país e alertar contra o avanço tecnológico do inimigo. Em 1969, com o objetivo de conectar departamentos de pesquisa e bases militares e descentralizar o armazenamento de informações surge uma rede de computadores chamada ARPANET. A ARPANET funcionava através de um sistema conhecido como comutação de pacotes, que é um sistema de transmissão de dados onde as informações são divididas em pequenos pacotes, que contém trechos de dados, o endereço do destinatário e informações que permitam a remontagem da mensagem inicial. (Até hoje a internet ainda funciona com base no sistema de comutação de pacotes. O protocolo TCP/IP funciona com base nesta tecnologia.) Durante as décadas seguintes várias outras redes menores foram surgindo até a desativação da ARPANET em 1990, quando começou a discussão do uso da internet para fins comerciais. Nesta época surgiu o modelo de internet que conhecemos hoje com base na navegação por hiperlinks e páginas HTML. Como funciona a web? O que é um navegador? O que é um servidor? A web funciona basicamente com dois tipos de programas: os clientes e os servidores. O cliente é o programa utilizado pelos usuários para ver as páginas, enquanto os servidores ficam responsáveis por armazenar e permitir o acesso ao conteúdo da rede. Chamamos o programa cliente de navegador (ou browser). O navegador tem a função de localizar o endereço da página especificada pelo usuário (chamada de URL) e, também, é responsável por determinar a interpretação dos comandos de HTML das mesmas. Os pedidos dos navegadores são atendidos por uma combinação de computadores e programas que formam os servidores. Esses computadores e programas armazenam as páginas e podem exercer algum tipo de controle sobre quais usuários podem acessar. São máquinas potentes instaladas em universidades, empresas e órgãos do governo, conectadas permanentemente à Internet. Leituras Complementares http://danillonunes.net/curriculo-dos-padroes-web/a-historia-da-internet-e-da-web-e-a-evolucao-dos-padroesweb http://webdirections.org/history/#0 http://www.tecmundo.com.br/infografico/10054-a-historia-da-internet-a-decada-de-1990-infografico-.htm http://www.tecmundo.com.br/982-o-que-e-cliente-servidor-.htm http://informatica.hsw.uol.com.br/servidores-da-web4.htm

MÓDULO I HTML, CSS e design de sites estáticos

6 CAPITULO 1 – Conceitos básicos 1.1 O que é HTML? HTML é uma linguagem de marcação para estruturação de páginas web criada por Tim Berners Lee nos anos 90. Diferente das linguagens de programação, o HTML não possui estruturas para criação de lógicas ou cálculos. O que podemos fazer é demarcar espaços e inserir elementos, em forma de código, para a criação de uma página web. Portanto, para criar um website simples, não é necessário que se tenha conhecimento em lógicas de programação. O desenvolvedor deve apenas conhecer a sintaxe e o nome dos comandos HTML. “A linguagem HTML (Hypertext Markup Language) é uma linguagem baseada em uma mais antiga e muito mais complexa chamada SGML (Standart Generalized Markup Language), por esse motivo uma das maiores características da linguagem HTML é não ter uma estrutura rígida e exata, a HTML apenas define a estrutura de uma página, definindo o que é título, texto, lista, subtítulo, imagens, etc. […] “Por ser essencialmente uma linguagem para criação e manipulação de textos, um programador HTML necessariamente não tem que ter um grande embasamento teórico de lógicas de programação. Ao HTML cabe apenas a manipulação de textos e objetos, como figuras, sons, fotos, animações e eventualmente pode ser utilizada para a manipulação de dados” (MARCONDES, Christian A. - Programando em HTML 4.0) Leituras complementares http://pt-br.html.net/tutorials/html/lesson2.php

7 1.2 HTML: peculiaridades Chamamos os comandos HTML de tags Cada comando é iniciado e finalizado por uma tag Todas as tags são apresentadas entre sinais de maior “>” e menor “<”, na seguinte sintaxe: < TAG> A área de código iniciada por uma tag, deve ser finalizada pelo mesmo comando antecedido de “/”, na seguinte sintaxe: </TAG> Existem excessões onde não é utilizada tag de finalização. Exemplo: para pular linha <br> e de inserir divisórias <hr>. A linguagem HTML não é case sensitive, o que significa que tanto faz se você escreve uma tag como <html>, <HTML>, <Html>, <hTML> ou <HtMl>. 1.3 Tags básicas <HTML> … </HTML> É a tag que inicia e finaliza um documento HTML. Tem por função indicar ao navegador que o documento lido está na linguagem HTML. <!-- comentário --> Tem por finalidade inserir um comentário do desenvolvedor no meio do código. Tal comentário pode ser visualizado apenas por quem abrir o código-fonte de sua página. <head> … </head> Tag que delimita o espaço de cabeçalho da página. Nele devem constar todas as informações que não estarão presentes no corpo do documento HTML e que devem ser prélidas pelo navegador, como: tags meta, título da página (inserido com a tag <title>), scripts e documentos em outras linguagens a serem carregados, etc.

8 <title> … </title> Tag que tem por finalidade inserir um título na Barra de Títulos do navegador Web. Deve ser utilizada dentro do espaço de cabeçalho do documento HTML. Sua sintáxe básica é: <title> Título </title> <body> … </body> Tem por finalidade demarcar o início e o fim do corpo do documento HTML. No corpo do documento devem ser inseridos os elementos que fazem parte da aparência do website: textos, tabelas, imagens, etc. A tag <body> deve vir logo após a finalização do cabeçalho “</head>” e deve ser finalizada logo antes da tag </html>. <br> A tag <br> tem por finalidade sinalizar uma quebra de linha, pois na linguagem HTML certos caracteres especiais como ENTER e espaço (mais de um), não são processados. Esqueleto básico de uma página HTML: <html> <head> <title> Titulo do documento </title> </head> <body> Informações do documento<br> <!-- comentários --> Aqui você poderá inserir os elementos que quiser<br> </body></html>

9 1.4 Editor Utilizaremos nesta disciplina o editor de código open source Notepad++. Para fazer o download basta acessar : http://notepad-plus-plus.org/: Primeiro exemplo Abra o Notepad++. Crie um novo arquivo e escolha HTML no menu de linguagem. Depois teste o seguinte código e salve na pasta que desejar: <html> <head> <title> Minha primeira página HTML </title> </head> <body> Das Utopias (Mario Quintana)<br><br> Se as coisas são inatingíveis...ora!<br> Não é motivo para não querê-las...<br> Que tristes os caminhos, se não fora <br> A presença distante das estrelas! <br> </body></html>

10 1.5 Atributos No HTML um atributo funciona como uma formatação, ou especificação, da tag. Isso quer dizer que algumas tags possuem atributos pré-determinados através dos quais podemos adicionar uma formatação diferenciada aos elementos que estas tags representam. Nossa formatação ganha as características que desejamos através dos valores que passamos aos atributos. O esquema básico para utilização de atributos nas tags funciona no seguinte esquema: <TAG atributo1 = “valor” atributo2 = “valor” atributo3=”valor”...> Obs: Ao utilizarmos o atributo bgcolor com a tag <body> podemos modificar a cor de fundo da nossa página. O atributo bgcolor pode receber como valor o nome da cor em inglês ou o número da cor na tabela hexadecimal de cores. Também podemos usar com a tag <body> o atributo background para inserir uma imagem de fundo na nossa página, ele recebe como valor o caminho do arquivo de imagem. Exemplos: 1- 2- <html> <html> <head> <head> <title> Minha primeira página HTML </title> <title> Minha primeira página HTML </title> </head> </head> <body bgcolor="grey"> <body background="imagem.jpg"> Das Utopias (Mario Quintana)<br><br> Das Utopias (Mario Quintana)<br><br> Se as coisas são inatingíveis...ora!<br> Se as coisas são inatingíveis...ora!<br> Não é motivo para não querê-las...<br> Não é motivo para não querê-las...<br> Que tristes os caminhos, se não fora <br> Que tristes os caminhos, se não fora <br> A presença distante das estrelas! <br> A presença distante das estrelas! <br> </body> </body> </html> </html>

11 1.6 Tag <meta> A tag <meta> traz metadados (podemos dizer, de forma bem simplificada, que um metadado é um dado inteligível por um computador ) sobre o documento HTML. É geralmente utilizada para descrever a página, especificar palavras chave, autor do documento, linguagem, etc. Estes metadados não aparecerão na sua página, mas serão legíveis pelo navegador e ferramentas de busca por exemplo. O uso da tag meta deve ser feito sempre dentro do cabeçalho <head> </head> do documento HTML. Exemplo <html> <head> <title> Minha primeira página HTML </title> <meta name="description" content="Poema – Mário Quintana"> <!-- descreve o conteúdo da página --> <meta name="keywords" content="Poemas, Mario Quintana, utopias"> <!-- descreve palavras-chave --> <meta name="author" content="Denise Pinho"> <!-- descreve o autor da página --> <meta charset="utf-8"> <!-- descreve em qual codificação de caracteres/idioma a página está. A nossa é utf-8 --> </head> <body bgcolor="grey"> Das Utopias (Mario Quintana)<br><br> Se as coisas são inatingíveis...ora!<br> Não é motivo para não querê-las...<br> Que tristes os caminhos, se não fora <br> A presença distante das estrelas! <br> </body> </html>

12 CAPÍTULO 2 - FORMATANDO TEXTO 2.1 Tags para formatação de texto <h> - Tag de título Os valores desta tag variam de 1 a 6, sendo menor o texto quanto maior o número. Pode-se definir o alinhamento do texto utilizando o atributo Align = “ center/right/left”. Exemplo: <html> <head> <title> Formatação de textos </title> </head> <body> <h1 align = "center"> Texto, tamanho 1, centralizado </h1> <h3 align = "left"> Texto, tamanho 3, alinhado à esquerda </h3> <h6 align = "right"> Texto, tamanho 6, alinhado à direita </h6> </body> </html> <font> Esta tag é utilizada geralmente para alterar atributos das fontes do nosso site. Atributos: size = “n” – Tamanho da fonte. Varia de 1 até 7. color = “#nnnnnn” - Modifica a cor de um trecho de texto. O atributo color pode ser expresso em hexadecimal (#ffffff), ou digitando o nome da cor em inglês (black). face=“nome da fonte” – Modifica o tipo de texto, ou fonte, utilizado.

13 Exemplo: <html> <head> <title> Minha primeira página HTML </title> </head> <body> <h2><font color="#483D8B">Das Utopias (Mario Quintana)</font></h2><br><br> <font size="2" color="#3CB371">Se as coisas são inatingíveis...ora!</font><br> <font size="3" color="#CD5C5C">Não é motivo para não querê-las...</font><br> <font size="2" color="#C71585">Que tristes os caminhos, se não fora </font><br> <font size="3" color="#8B8B00">A presença distante das estrelas! </font><br> </body> </html> Outras tags para estilizar texto <b> - Mostra o texto em negrito. <i> - Mostra o texto em itálico. <u> - Mostra o texto sublinhado. <s> - Frase riscada. <big> - Fonte maior.

14 Exemplo: <html> <head> <title> Minha primeira página HTML </title> </head> <body> <h2><font color="#483D8B">Das Utopias (MarioQuintana)</font></h2> <font size="2" color="#3CB371"><b>Se as coisas são inatingíveis...ora!</b></font><br> <font size="3" color="#CD5C5C"><i>Não é motivo para não querê-las...</i></font><br> <font size="2" color="#C71585"><u>Que tristes os caminhos, se não fora</u></font><br> <font size="3" color="#8B8B00"><sub>A presença distante das estrelas!</sub> </font><br> </body> </html> 2.2 Texto animado A tag <marquee> insere efeito de animação simples em textos. Para formatá-la existem diversos atributos, sendo alguns deles: Behavior – como o texto irá se comportar na tela. Para ele existem três valores: Scroll, slide e alternate. Direction - Tem por finalidade atribuir uma direção à animação do texto. Pode receber um dos dois valores: RIGHT e LEFT. Loop – Define o número de vezes que a animação se repetirá. Pode receber valores numericos e também o valor INFINITE para repetir infinitamente. Align – formata o alinhamento do texto ao redor do marquee em relação a ele. Valores: TOP (acima), BOTTOM (abaixo) e MIDDLE (no centro)

15 2.3 Hyperlinks Para criar um hyperlink utilizamos a tag <a>, mas ela depende de alguns atributos para que funcione: Href: Atributo que recebe como valor o endereço da página a ser carregada Target: Permite que esta nova página abra em uma aba ou frame diferente. Para abrir em nova aba utilizamos o valor “_blank”. Exemplo: <html> <head> <title> Um hyperlink </title> </head> <body> <a href=”http://google.com.br” target=”_blank”> Google </a> </body> </html> Você pode modificar a cor dos links de um documento mexendo nas propriedades link, alink e vlink da tag <body>. Ou você pode mudar a cor de cada link individualmente editando a cor da sua fonte com a propriedade color da tag <font>. Exemplos: <html> <html> <head> <head> <title> Um hyperlink </title> <title> Um hyperlink </title> </head> </head> <body link=”blue” alink=”yellow” vlink=”red”> <body> <a href=”http://google.com.br”> Google </a> <a href=”http://google.com.br”><font color=”red”> Google</font> </a> </body></html> </body></html>

16 Mail to Para criar um link para envio de e-mail utilizamos a tag <a> da seguinte maneira: <html> <head> <title> Link para e-mail</title> </head> <body> <a href=”mailto:seuemail@email.com”> e-mail me </a> </body> </html> Exemplo prático: <html> <head> <title> Minha primeira página HTML </title> </head> <body bgcolor="#000000"> <marquee behavior="alternate" direction="right" loop="infinite" width="430" height="80" scrollamount="5" scrolldelay="300"> <h2><font color="#483D8B">Das Utopias (Mario Quintana)</font></h2></marquee><br><br><br> <font size="2" color="#3CB371"><b>Se as coisas são inatingíveis...ora!</b></font><br> <font size="3" color="#CD5C5C"><i>Não é motivo para não querê-las...</i></font><br> <font size="2" color="#C71585"><u>Que tristes os caminhos, se não fora</u></font><br> <font size="3" color="#8B8B00"><sub>A presença distante das estrelas!</sub> </font><br><br> <font size="1"><a href="http://google.com.br"> Quem é Mario Quintana? </a></font><br> </body></html>

17 2.4 Formatação de parágrafos <center> Esta tag centraliza qualquer elemento de uma página. Tanto texto quanto imagem. <p> Indica o início de um novo parágrafo e seu respectivo alinhamento através do atributo align. Align pode receber os valores: center, right ou left. 2.5 Listas Listas Não-numeradas <ul> Define o início e o fim de uma lista não-numerada. Ul vem de Unordered list. <li> Define os elementos da lista. A tag <li> possibilita a definição do atributo type para modificar os tipos de marcadores. Type pode receber os valores: disc, circle e square. Exemplo: <html> <head> <title> Lista não-numerada</title> </head> <body> <ul> <li type="disc"> primeiro item <li type="circle"> segundo item <li type="square"> terceiro item. </ul></body></html>

18 Listas Numeradas <ol> Define o início e o fim de uma lista numerada. Ol vem de Ordered List. <li> Define os elementos da lista. A tag <li> possibilita a definição do atributo type para modificar os tipos de ordem que os itens receberão. Type pode receber os valores: 1 para algarismos arábicos, I para algarismos romanos maiúsculos, i para algarismos romanos minúsculos, A para ordem alfabética maiúscula e a para ordem alfabética minúscula. Exemplo: <html> <head> <title> Lista numerada</title> </head> <body> <ol> <li type="A"> primeiro item <li type="A"> segundo item <li type="A"> terceiro item. </ol> </body> </html>

19 CAPÍTULO 3 – RECURSOS VISUAIS 3.1 Inserir imagens Para inserir uma imagem utilizamos a tag <img>, mas ela depende de alguns atributos para que funcione. src: Atributo que recebe como valor o endereço da imagem a ser carregada width: Permite redimensionar a largura da imagem. Recebe como valor o tamanho em pixels. height: Permite redimensionar a altura da imagem. Recebe como valor o tamanho em pixels. Exemplo: <html> <head> <title> Inserindo Imagem</title> </head> <body> <img src=”imagem.jpg” width=”400” height=”250”> </body> </html>

20 3.2 Linhas horizontais A tag utilizada para inserir linhas horizontais é <hr>. Podemos formatá-la através de quatro atributos diferentes: Width: Define a largura da linha. Deve receber como valor um número em pixels ou porcentagem. Size: Define a espessura da linha. Deve receber como valor um número em pixels. Align: Representa o alinhamento. Recebe os valores: left ou right ou center. Noshade: Desativa o atributo tridimensional da barra, deixando-a com duas dimensões e cor cinza. Exemplos: <html> <head> <title> Linhas Horizontais</title> </head> <body> <hr size= “8”> <hr size= “2”> <hr width= “3” size= “50”> <hr noshade size= “8”> </body> </html>

21 3.3 Tabelas No HTML as tabelas são formadas por linhas, nas quais são inseridas células. Nestas células pode-se inserir qualquer tipo de conteúdo, de texto até imagens. As tags para criar tabelas são: <table> </table> - Para indicar o início e o fim de uma tabela. <tr> e </tr> - Para indicar o início e o fim de uma linha. <td> e </td> - Para indicar o início e o fim de uma célula. Podemos definir uma espessura para a borda utilizando o atributo border na tag <table> Exemplo: <html> <head> <title> Tabela Simples</title> </head> <body> <table border= “3”> <tr> <td> Primeiro Elemento</td> <td> Segundo Elemento </td> <td> Terceiro Elemento </td> </tr> </table> </body> </html>

22 Atributos para formatação de tabelas Align: Com este atributo definimos o alinhamento horizontal dos elementos dentro da tabela. Recebe os valores: left ou right ou center. Background: Coloca uma imagem de fundo na tabela. Recebe como valor o endereço do arquivo de imagem. Bgcolor: Define a cor de fundo da tabela. Bordercolor: Define a cor da borda da tabela. Cellpadding e cellspacing: Definem, respectivamente, a margem dentro das células e o espaçamento das bordas entre as células da tabela. Colspan: Define o número de colunas pelas quais uma única coluna pode se expandir. Rowspan: Define o número de linhas pelas quais uma única coluna pode se expandir. Valign: Com este atributo definimos o alinhamento vertical dos elementos dentro da tabela. Recebe os valores: top ou middle ou bottom. Width e Height: Servem para definir a largura de uma coluna e a altura de uma linha. Exemplo: <html> <head> <title> Tabela Simples</title> </head> <body> <table border= "3" bordercolor="black" cellspacing="25" cellpadding="15" align="center" width="50%" height="50%"> <tr> <td bgcolor="pink" colspan="3" align="center"> Elementos </td> </tr> <tr> <td bgcolor="red"> Primeiro Elemento</td> <td bgcolor="green"> Segundo Elemento </td> <td bgcolor="blue"> Terceiro Elemento </td> </tr> <tr> <td bgcolor="purple"> Quarto Elemento</td> <td bgcolor="yellow"> Quinto Elemento</td> <td bgcolor="grey"> Sexto Elemento</td> </tr> </table> </body> </html>

23 CAPÍTULO 4 – ESTRUTURAS AVANÇADAS 4.1 Formulários Tags básicas: <form> Tag que inicializa e finaliza o espaço de formulário. <input> Tag que inicializa e finaliza o espaço de cada elemento do formulário. Atributos: Name = “ “ - Define o nome do campo Type = “ “ - Define o tipo de campo de formulário Podem ser criados diferentes tipos de campos de formulário de acordo com o valor passado para o atributo type. Para criar uma caixa de texto, use o valor “text”. Para criar um botão de envio, use o valor “submit”. Para criar um botão de reset, use o valor “reset”. Para criar uma sequência de botões de rádio, use o valor “radio”. Para criar check boxes, use o valor “checkbox”. Para criar um campo de senha, que substitua os caracteres digitados por símbolos, use o valor “password”. Value = “ “ - Define o valor a aparecer neste campo. Maxlenght= “ “ - Define o número máximo de caracteres no campo. Size = “ “ - Define o tamanho do campo de formulário

24 Exemplo <html> <head> <title> Meu primeiro formulário </title> </head> <body> <form action="mailto:denisemp_contato@hotmail.com" method="post"> <input name= "texto1" type= "text" value= "seu nome" size= "20" Maxlenght= "30"></input><br><br> Idade:<br> <input name= "idade" type= "radio" value= "0"> 10 - 20</input><br><br> <input name= "idade" type= "radio" value= "1"> 20+ </input><br><br> <textarea name= "area1" value= "vazio" rows= "5" cols= "30" size= "256" align= "middle" maxlenght= "256"> Sua mensagem </textarea><br><br> <input name= "Envia" Type= "submit" value= "Enviar Dados"></input> </form> </body> </html>

25 4.2 Divs A tag <div> define uma divisão ou seção num documento HTML. Podemos dizer que uma <div> serve como um container para um pedaço de código. Sua principal utilização é no posicionamento de partes do layout na página. Geralmente a formatação da <div> é associada a elementos CSS. Exemplo: <html> <head> <title> Minha primeira div </title> </head> <body> <div name=div1 style="position: absolute; color: #FF0000; margin-left:800px; margin-top: 50px; width: 200px; height: 200px;"> Aqui vão os elementos da sua div.<br> Aqui vão os elementos da sua div.<br> Aqui vão os elementos da sua div.<br> </div> <div name=div2 style=" position: absolute; color: #FF00FF; margin-left: 10px; margin-top: 50px; width:200px; height: 200px"> Aqui vão os elementos da sua div.<br> Aqui vão os elementos da sua div.<br> Aqui vão os elementos da sua div.<br> </div> </body> </html>

26 4.3 Frames Frame cria um tipo de página web, onde o espaço da tela é dividido em mais de uma parte, onde cada uma exibe uma página html diferente. A vantagem do uso de frames é que você pode ter ao mesmo tempo na tela , partes como um menu que estará sempre visíve, e partes como o assunto da página que pode estar dividida em várias outras partes. Para utilizarmos esta técnica, precisamos substituir <body> por <frameset> (deve-se usar os atributos “rows” e “cols” dentro da tag <frameset> para definir, respectivamente, o número de linhas e colunas em que a página será dividida) e inserir um espaço de frame com a tag <frame> para cada divisão. Exemplo <html> <head><title>Frames</title></head> <frameset rows=”*,*”> <frame src=”pagina.html” scrolling=no noresize> <frame src=”pagina.html” scrolling=yes noresize> </frameset> </html> 4.4 iFrames O iFrame cria uma janela que carrega uma página HTML em qualquer lugar da sua página. É um recurso muito mais funcional e prático do que os frames, pois não transforma o documento inteiro em quadros. Exemplo: <html> <head><title>iFrames</title></head> <body bgcolor=#34ff00af> <iframe name=iframe src=pagina.html frameborder=0 width=200 height=250></iframe> </body></html>

27 CAPÍTULO 5 – NOÇÕES BÁSICAS DE DESIGN 5.1 Áreas de layout Antes de começar o desenvolvimento de um site é importante pensar a distribuição do conteúdo pela página. Observando qualquer site da web podemos chegar a conclusão de que existem certas “áreas de layout” com características próprias. Por exemplo: A área de topo geralmente traz alguma informação sobre do que se trata o site, ou um banner, ou um logotipo. A área central geralmente traz o conteúdo do site, etc. Obs: É interessante criar rascunhos de como serão distribuídas as áreas do seu layout. Exemplo:

28 5.2 Paleta de cores Outro passo importante na idelização de um layout é a definição da paleta de cores. É importante que um site tenha um padrão de cores harmônicas que o representem. Existem diversos estudos em psicodinâmica das cores que atribuem significados a estas. Não é incomum, por exemplo, encontrarmos propagandas ou sites relacionados a comida nas cores vermelha, laranja ou amarela, ou sites relacionados a tecnologia nas cores prata ou cinza. Leitura complementar: http://www.iar.unicamp.br/lab/luz/ld/Cor/psicodinamica_das_cores_em_comunicacao.pdf Criando sua paleta de cores Uma forma interessante de se criar uma paleta de cores é pensar primeiro em duas cores neutras (uma escura, próximo ao preto, e outra clara, mais próxima ao branco), depois adicionar mais duas ou três cores de acordo com a temática do seu site. Por exemplo: Além disto, ainda existem muitos sites na internet que fornecem coleções de paletas de cores que podem ser usadas, ferramentas para criação rápida de paletas: http://colorcombos.com http://www.colourlovers.com/palettes/add http://www.colourlovers.com/copaso/ColorPaletteSoftware https://kuler.adobe.com/create/color-wheel http://colorschemedesigner.com/

29 CAPÍTULO 6 – COMO TRANSFERIR ARQUIVOS PARA SUA HOSPEDAGEM ONLINE 6.1 Fazendo transferência de arquivos com o Filezilla Primeiro precisamos saber que alguns servidores permitem transferência de arquivos com este tipo de programa, outros não. Alguns ainda permitem apenas em planos pagos. Das hospedagens que utlizamos, o qlix permite apenas em plano Plus, já o 000webhost disponibiliza suporte a FTP para usuários free. Passo 1: O servidor que disponibilizar o uso de programa de FTP deverá informar em algum lugar as informações necessárias para configuração do programa. No http://000webhost.com você pode encontrar as informações para o seu Filezilla no seguinte link do painel de controle:

30 Será exebida uma página com os seguintes dados: Passo 2: Abra o Filezilla.

31 Passo 3: Clique no primeiro ícone a esquerda para configurar sua conexão com o servidor Passo 4: Na nova janela que abrir, clique em Novo Site para adicionar uma nova entrada, em seguida preecha seus dados segundo o domain, username e senha que tiver na hospedagem. No caso do 000webhost não é aceito conexão do tipo anônima para usuários free, portanto mude o tipo de logon para Normal ou Pedir Senha. A porta não precisa ser preenchida, o Filezilla a identifica automaticamente.

32 Passo 5: Clique em Conectar e aguarde. Se tudo estiver certo as pastas e arquivos de sua hospedagem devem aparecer no lado direito da tela principal do FileZilla. Passo 6: Agora é só clicar nos arquivos de seu computador, na parte esquerda, e esperar que o upload seja feito para a pasta selecionada do servidor, a direita.

33 CAPÍTULO 7 – CSS básico 7.1 Introdução Sabemos que originalmente o HTML, que estudamos até agora, é uma linguagem de marcação que serve para estruturar páginas web. Apesar de possível, não cabe a ele a formatação de estilos das páginas (fontes, cores, espaçamentos). Para isto utilizamos a linguagem CSS. Nas folhas de estilos são determinadas as tags que terão formatação especial e quais serão os tais atributos especiais que cabem a elas. Vantagem: Vários documentos HTML podem utilizar o mesmo CSS Regra CSS Seletor { propriedade: valor;} Seletor: É o alvo ao qual se aplicam as formatações CSS. (pode ser uma tag, id ou classe por exemplo) Propriedade: Determina qual característica do alvo (seletor) será modificada Valor: De que forma esta característica será modificada. Obs: um seletor pode recer formatação de várias propriedades diferentes. Exemplo: seletor{propriedade1 : valor; propriedade2: valor; propriedade3: valor;} Observações importantes : Algumas vezes propriedades CSS recebem como valores palavras compostas. No caso de palavras compostas separadas por espaço, deve-se usar aspadas duplas ou simples.No caso de palavras compostas separadas por hífen, não é necessário o uso de aspas. No CSS pode-se abrir um bloco de comentários com os sinais /* e fechar com os sinais */.

34 7.2 Trabalhando com seletores : Como vimos anteriormente, a sintaxe da regra CSS é seletor { propriedade: valor}. Sabemos que um seletor simples diz respeito aos seletores tipo (por exemplo, uma tag), o seletor id e o seletor classe. Ainda existem outros tipos de seletores simples como as pseudoclasses. Existem as chamadas pseudoclasses estruturais que servem para fazer referência a eventos específicos como, por exemplo, o usuário estar com o ponteiro do mouse sobre determinado elemento. No CSS é possível executar diversas manipulações de seletores. Por exemplo, é possível agrupar seletores que compartilham as mesmas regras CSS, e é possível também criar combinações de seletores compostos por outros seletores. Seletores simples: Seletor Tipo: Um seletor tipo é aquele que representa um determinado elemento da linguagem a qual o CSS está se referindo, por exemplo, uma tag HTML. H1, font, body e p são exemplos de seletores tipo. Exemplo: h1 {color: red} Seletor ID: Um seletor id é aquele que toma como base o valor do atributo id de uma determinada tag do documento HTML. A string para designar um seletor do tipo id é composta pelo sinal # seguido pelo valor do id. Exemplo: a tag <h1 id='exemplo'> deve ser formatada no CSS: #exemplo { color: red} No caso em que se desejar ser mais específico, podemos utilizar o nome do elemento, seguido de # e o valor do id. Exemplo: h1#exemplo {color:red}

35 Seletor Classe: Um seletor classe é aquele que toma como base o valor do atributo class de uma tag do documento HTML. A string para designar um seletor do tipo classe é composta pelo sinal . Seguido do valor da class. Exemplo: a tag<h1 class='exemplo'> deve ser formatada no CSS: .exemplo {color:red} No caso em que se desejar ser mais específico, podemos utilizar o nome do elemento, seguido de . E o valor da class. Exemplo: h1.exemplo{color: red} 7.3 Formas de manipular folhas de estilo CSS Estilo In-line É o estilo mais simples de formatação CSS. Nele o CSS funde-se ao HTML, passando as propriedades CSS através do atributo style do HTML, dentro da própria tag a qual aquele CSS se destina. Por isto mesmo acaba não sendo o estilo CSS mais adequado em termos de custo-benefício, afinal não há como reaproveitar o mesmo CSS para formatar outras estruturas iguais do mesmo documento ou em outros documentos HTML, como no caso dos próximos estilos. Exemplo: <html> <head> <title>Estilos In-line</title> </head> <body style="background-color: #FA8072;"> <p style="text-indent: 28px; color: #483D8B; font-weight: bold; font-size: 40pt">Página com formatação de parágrafo e cor de fundo em CSS. Aplicado no padrão Inline.</p> </body> </html>

36 Estilo incorporado O estilo incorporado é muito utilizado em páginas onde várias estruturas HTML utilizam o mesmo tipo de formatação. Neste caso, O CSS é especificada dentro do espaço de cabeçalho do documento e declarada dentro do espaço definido pela tag <style> Os comandos terão a seguinte sintaxe: TAG {estilo 1; estilo 2; ….; estilo N} Exemplo: <html> <head> <title>Estilos incorporados</title> <style type="text/css"> body {background-color: #CAFF70; font-family: arial; font-size: 12pt; margin-top: 1cm} P { margin-left: 5cm; margin-right: 5cm} H1 {font-family: desdemona; font-size: 40pt; color: #FF7F24; text-align: center} </style> </head> <body> <h1><P> Aprendendo estilos incorporados </P> Legal né? </h1> </body> </html>

37 Estilo Vinculado No estilo vinculado criamos dois tipos de arquivos separados. Um apenas para as formatações CSS e outro com as estruturas HTML. Com isto, estas formatações ficam disponíveis para todo o site, permitindo, inclusive, que mais de uma página HTML compartilhe da mesma formatação CSS. Para utilizar CSS de forma vinculada, é necessário primeiro analisar as características desejadas em seu layout e as propriedades CSS que devem ser empregadas para isto. A seguir, desenvolver as páginas HTML livres de formatação e um arquivo de propriedades CSS. Por fim, para criar um vínculo entre os dois documentos, devese utilizar a tag <link> dentro do espaço de cabeçalho dos documentos HTML. Tag Link A tag link se assemelha muito com a tag A, a diferença está em que ela não funciona apenas como uma ponte de uma página para outra, e sim como se uma fizesse parte da outra incorporando inteiramente as duas páginas. O atributo rel=stylesheet, define o tipo de relação do link, que no caso está sendo definido como um link de uma folha de estilo externa. O atributo href=”estilo1.css” não precisa de muitas explicações, href como já aprendemos é uma referência que está definindo onde estão nossos estilos.O atributo type=”text/css” serve para definir o tipo de folha de estilo que o browser deve esperar. Exemplo: Página .html: Página .css: <html> body {background-color: #8B4513; font-family: arial; <head> <title>Estilo Vinculado</title> <link rel="stylesheet" href="estilo1.css" type="text/css"> </head> <body> <h1>Bem-Vindo! </h1> <p> Esta é minha primeira página utilizando estilo vinculado </p> <h2> Muito legal né? </h2> <h1> Vamos experimentar formatação de link também: <a href="http://google.com">Vamo pro Google! </a></h1> </body></html> font-size: 15pt; margin-top: 2cm} p {margin-left: 12cm; margin-right: 5cm; color: #FAFAD2} h1 {font-family: desdemona; font-size: 50pt; color: #FFA500; text-align: center} h2 {font-family: garamond; font-size: 30pt; color: #FFF68F; text-align: right} a {text-decoration: none; color: #8B0000} a:hover {text-decoration: #FF6347} underline; color:

38 7.4 Aplicando CSS em tabelas Utilizando seletores do tipo id ou classe pode-se facilmente formatar com CSS diversas tabelas diferentes no mesmo documento. Página .html <html> <head> <title>Estilo Vinculado</title> <link rel="stylesheet" href="estilo.css" type="text/css"> </head> <body> <h1>Formatação de Tabelas </h1> <table id="tabela" > <tr> <td> <h2>oi<h2> </td> <tr> </table> <br><br> <table id="tabelinha" > <tr> <td> <h2>oizinho<h2> </td> <tr> </table> <br><br> <table id="tabelinha2" > <tr> <td> <h2>olá<h2> </td> <tr> </table> <br><br> <table id="tabela2" > <tr> <td> <h2>:D HEY!<h2> </td> <tr></table> <br><br> <table id="tabela3" > <tr> <td> <h2>Bom-dia!<h2> </td> <tr> </table> <br><br> <table id="tabela4" ><tr> <td> <h2>Boa-tarde!<h2> </td><tr></table><br><br> <table id="tabela5" ><tr> <td> <h2>Boa-noite!<h2> </td><tr> </table> </body></html> Página .css body {background-color: #FFDAB9; font-family: arial; font-size: 15pt; margin-top: 2cm} h1 {font-family: desdemona; font-size: color:#E9967A; text-align: center} #tabela {border: 1px solid black} #tabelinha{border: 12px dotted blue} #tabelinha2{border: 5px dashed #DCDCDC} #tabela2 {border: 15px groove #98FB98} #tabela3 {border: 20px ridge #D02090} #tabela4 {border: 25px inset #548B54} #tabela5 {border: 25px outset #FF6A6A} 50pt;

39 7.5 Aplicando CSS em divs Além dos atributos mais simples para formatação de divs, que vimos na parte de HTML, como margin-left e margin-top, com o CSS3 podemos fazer algumas modificações na aparência das divs. Há como alterar seu formato quadradão através da propriedade borderradius, que recebe valor em pixels. Para colocar uma certa transparência na div é possível utilizar a propriedade opacity, que recebe valores entre 0 e 1. Para centralizar o texto dentro da div horizontalmente utilizamos a propriedade text-align, que pode receber os valores center, left ou right. Já para centralizar o texto dentro da div verticalmente podemos utilizar a propriedade line-height (que aumenta a entrelinha), pode receber valores em pixels. Para posicionar divs com valores relativos ao tamanho da tela, pode-se fazer o seguinte: (nesta explicação estarei tentando colocar a div no meio da página) 1º definir o tamanho da div ex: width: 400 e height 400 2º depois usar as propriedades top: 50% e left: 50% (assim pegamos metade do valor da tela para desenhar a div. Só que assim a div será desenhada a partir de 50% da tela e nós queremos ela centralizada) 3º definimos margin-top: -200 e margin-left: -200, assim “voltamos”o posicionamento da div para metade do seu tamanho total. Exemplo de formatação de divs com css: <html> <head> <title> minha pagina css </title> <style type="text/css"> body {background-image: linear-gradient(45deg, white, blue, red, black)} #div1 {background-color:white; width:300px; height: 500px; top: 50%; left: 50%; margin-top: -250; marginleft: -150; text-align: center; position:absolute; opacity:0.5;border-radius:40px;"} </style> </head> <body> <div id="div1"> <br><br><br><br> texto - texto - texto <br> texto - texto - texto <br> texto - texto - texto <br> texto - texto - texto <br> texto - texto - texto <br> texto - texto - texto <br> texto - texto - texto <br> texto - texto - texto <br> texto - texto - texto <br> texto - texto - texto <br> texto - texto - texto <br> </div> </body></html>

40 7.6 Trabalhando com seletores avançados Seletor pseudoclasse Um seletor pseudoclasse estrutural é um conceito de seletor criado pelas CSS para possibilitar a seleção de um elemento com base em informações que não constam no HTML. A aplicação de uma pseudoclasse é formada pelo elemento (seja um seletor simples, um seletor id ou um seletor classe) seguido de : e o nome da pseudoclasse. Alguns seletores pseudoclasse: :link Usamos esta pseudoclasse para alterar a estilização de links não visitados. Exemplo: a:link {color: white; text-decoration: none} :visited Usamos esta pseudoclasse para alterar a estilização de links visitados. Exemplo: a:visited {color: white; text-decoration: none} :hover Este seletor modifica o elemento definido que tenha recebido sobre ele um dispositivo apontador como o ponteiro do mouse, por exemplo. Pode ser usado tanto em links quanto em elementos da marcação. Exemplo: a:hover{color: yellow} ou div:hover{background-color: #000000}

41 :active Este seletor modifica o elemento definido que tenha sido ativado pelo usuário, ou seja, enquanto este elemento está sendo pressionado pelo clique do mouse. O seletor :active pode ser usado tanto em links quanto em elementos da marcação. Exemplo: a:active{color: green} :focus Este seletor modifica o elemento definido que tenha sido posto em foco. Um elemento da marcação é posto em foco quando o usuário acessa esse elemento via teclado. Pode ser usado tanto em links quanto em qualquer elemento da marcação. Exemplo: a:focus{outline: 2px solid red} Grupamento de seletores: É válido agrupar seletores que compartilham uma mesma regra CSS. Seletores devem ser agrupados com uso de vírgula como separador. A sintaxe para agrupar seletores é a seguinte: div, p, span{color: red} /* Elementos div, p e span serão na cor vermelha */ Caracteres de combinação: Caracteres ou sinais de combinação são os caracteres destinados a escrever a sintaxe de um seletor composto por outros seletores. Os sinais de combinação de seletores são: espaço em branco, sinal maior que (>), sinal de adição (+) e sinal til (~). A sintaxe de uso dos sinais de combinação de seletores é mostrada a seguir: div > p {…} /* Elemento p filho de div */ Obs: Um elemento A é filho de um elemento B quando A está diretamente contido em B. div p {…} /* elemento p descendente de div */ Obs: Um elemento A é descendente um elemento B quando A estiver contido em B em qualquer nível, ou seja, A pode ser elemento filho de B ou de qualquer um dos filhos de B.

42 div ~ p {…} /* Elementos div e p são irmãos e p vem depois de div */ Obs: Um elemento A é irmão de um elemento B quando ambos estiverem contidos no mesmo elemento pai. div + p {…} /* Elemento p imediatamente após div */ Obs: Um elemento A precede um elemento B quando A é ancestral de B ou elemento-irmão de B, posicionado antes dele na marcação HTML.

43 7.7 Aplicação de CSS em divs para criação de um menu. Página .html <html> <head> <link rel="stylesheet" href="menu.css" type="text/css"> </head> <body> <table id="1"> <tr> <td> <div id='pai'> <p> Menu 1 </p> <div id="mostrada"> <center> <table id="2"> <tr> <td> <a href="#"> Link 1 </a> </td> </tr> <tr> <td> <a href="#"> Link 2 </a> </td> </tr> <tr> <td> <a href="#"> Link 3 </a> </td> </tr> </table> </center> </div> </div> </td> <td> <div id='pai'> <p> Menu 2 </p> <div id="mostrada"> <center> <table id="2"> <tr> <td> <a href="#"> Link 4 </a> </td> </tr> <tr> <td> <a href="#"> Link 5 </a> </td> </tr> <tr> <td> <a href="#"> Link 6 </a> </td> </tr> </table> </center> </div> </div> </td> <td> <div id='pai'> <p> Menu 3 </p> <div id="mostrada"> <center> <table id="2"> <tr> <td> <a href="#"> Link 7 </a> </td> </tr> <tr> <td> <a href="#"> Link 8 </a> </td> </tr> <tr> <td> <a href="#"> Link 9 </a> </td> </tr> </table> </center> </div> </div> </td> </tr></table> </body> </html>

44 Página .css body{ background-color: #000000; } #1{ border-width: 0; } #2{ border-width: 1; width: 100%; } p { text-align : center; } #pai { background-color:#5E6651; width:80px; height:40px; position:relative; } #pai #mostrada { display:none; position:absolute; } #pai:hover { background-color:#F28B5D; } #pai:hover #mostrada { display:inline; } #mostrada { background-color:#F28B5D; position:relative; width:80px; }

45 Exemplo final: <html> <head> <title>Pagina Teste</title> <meta charset="utf-8"> <style type="text/css"> body{background-image: linear-gradient(45deg, black, white, red)} #a{list-style-image: url(confere.png);} #b{list-style-image: url(nconfere.png);} #font1{font-size:20; font-family: Verdana; font-weight: Bold; text-decoration: underline; color: white;} #font2{font-size:10; font-family: Verdana; font-weight: Bold; color: white;} #font3{font-size:10; font-family: Verdana; font-weight: Bold; text-decoration: line-through; color: white;} #par1{text-align: center;} #tab1{width: 300px; background-color: white; margin-left: 40%; border: 5px grey dashed;} #td1{background-color: #8B0000 } </style> </head> <body> <table id="tab1"> <tr> <td id="td1"> <font id="font1"><p id="par1"><br>Lista de Afazeres<p></font><br> </td> </tr> </table> <br> <table id="tab1"><tr><td id="td1"> <br> <ol> <font id="font3"><li id="a"> Ir ao supermercado </li></font> <font id="font3"><li id="a"> Arrumar o quarto </li></font> <font id="font2"><li id="b"> Estudar para a prova </li></font> <font id="font2"><li id="b"> Ir ao curso de inglês </li></font> </font></ol><br> </td></tr></table> </body> </html>

46 CAPÍTULO 8 – Caderno de exercícios HTML: 1) No espaço abaixo desenvolva o esqueleto básico de um documento html 2) Formate um texto qualquer, com html, da seguinte maneira: A primeira linha deve ser amarela e em negrito. A segunda linha deve ser vermelha e em itálico

47 3) Formate um texto qualquer, com html, da seguinte maneira: A primeira linha deve ser verde e em negrito. A segunda linha deve ser azul e em itálico. A terceira linha deve ser vermelha e sublinhada. 4) Formate um texto qualquer, com html, da seguinte maneira: A primeira linha deve ser tipo título 1, e de cor verde A segunda linha deve ser cinza e riscada. A terceira linha deve ser amarela e em itálico 5) Crie um marquee (animado) com um texto com hyperlink:

48 6) Agora crie um marquee(animado) com uma imagem com hyperlink: 7) Crie uma lista não numerada formatada como na imagem abaixo:

8) Crie uma lista de tópicos como na figura abaixo: 49

50 9) Com base no que aprendemos até o momento, desenvolva um mini-layout com base na estrutura dada:

51 10) Desenvolva três tabelas como as da figura abaixo:

52 11) Desenvolva uma tabela como a da figura abaixo:

53 12) Desenvolva uma tabela como a da figura abaixo:

54 13) Desenvolva uma tabela como a da figura abaixo:

55 14) Quais atributos utilizamos para modificar largura e altura de tabelas. 15) Qual atributo utilizamos para inserir imagem de fundo em tabelas? 16) Qual atributo utilizamos para definir o alinhamento vertical dos elementos dentro da tabela? 17) Crie menus: a) Utilizando imagens com links. Exemplo:

56 b) Utilizando botões do tipo input como hyperlinks. Exemplo:

57 18) Utilizando o recurso “mailto” crie um formulário para envio de e-mail como na imagem abaixo:

58 19) Utilizando divs, desenvolva um código para um layout simples com imagem de topo, área central com uma tabela. Exemplo abaixo:

59 20) Crie um layout com base em tabelas inspirado na figura abaixo:

60 21) Fazendo uso de divs, crie um esquema básico de layout posicionando lado a lado um iframe e uma tabela como na imagem abaixo:

61 22) Utilizando divs, desenvolva o código para um layout simples com imagem de topo, área central e área lateral esquerda com iframes. Exemplo abaixo:

62 23) Utilizando divs, desenvolva um código para um layout simples com imagem de topo, área central com uma tabela e área lateral direita com um iframe. Exemplo abaixo:

63 24) Crie um esquema básico de layout em quadros (frames) segundo o esquema da imagem abaixo:

64 25) Utilizando os conhecimentos até agora adquiridos que desejar, crie um esquema básico de layout segundo o esquema:

65 CSS: 1) Descreva a regra CSS: 2) Quais os três tipos mais simples de seletores? 3) Usando CSS aplicado no estilo inline faça uma formatação de texto como a da imagem:

66 4) Usando CSS aplicado no estilo inline faça a formatação para um tabela como a da figura abaixo: 5) Descreva o que é estilo incorporado e o que é estilo vinculado. Quais as principais vantagens de cada um?

67 6) Usando CSS aplicado no estilo incorporado, e fazendo uso de seletores do tipo id, crie a formatação para uma página simples como na imagem abaixo:

68 7) Usando CSS aplicado no estilo incorporado, e fazendo uso de seletores do tipo classe, crie a formatação para uma página como na imagem abaixo:

69 8) Faça uma lista de links e formate-os, usando CSS no estilo incorporado, além de seletor pseudo-classe :hover para criar um efeito de mudança de cor ao passar o mouse em cima.

70 9) Utilizando CSS no estilo incorporado, faça a formatação de divs usando relação de parentesco (descendente / ascendente) entre elas, além do seletor pseudo-classe :hover, para criação de um menu na lógica da imagem abaixo:

71 10) Qual propriedade CSS permite arredondar as bordas de uma div? 11) Qual propriedade CSS podemos usar para criar uma transparência em uma div? 12) Formate, utilizando CSS no estilo vinculado e seletores tipo id ou classe, uma div como a da imagem abaixo: HTML CSS

72 13) Que lógica posso usar para centralizar uma div na tela independente da resolução de monitor do usuário ou do quanto a janela do navegador for redimensionada? 14) Crie uma lista não ordenada e utilize as propriedades CSS para modificar seus tópicos por imagens:

73 15) Usando CSS no estilo vinculado, fazendo uso de seletores do tipo classe, crie uma página com fundo gradiente (através da propriedade background-image: linear-gradient() que aprendemos). Deve haver também a distribuição correta de conteúdo através de divs com posicionamento independente das configurações de tela do usuário. HTML CSS

MÓDULO II PHP + Banco de Dados Mysql, noções de Javascript e sistemas para sites dinâmicos

75 CAPÍTULO 1 – CONCEITOS BÁSICOS 1.1 O que é PHP? É uma linguagem de programação muito empregada na criação de sistemas para websites dinâmicos. Ter conhecimento da linguagem PHP possibilita a construção de websites que recebam e enviem dados do usuário. Além disso a linguagem possui suporte ao uso de banco de dados. Segundo o Manual online do PHP “ […] é uma linguagem de script open source de uso geral, muito utilizada e especialmente guarnecida para o desenvolvimento de aplicações Web embútivel dentro do HTML.” Características da linguagem PHP É uma linguagem server-side. Isso significa que executa operações diretamente no servidor, sendo enviado para o cliente apenas HTML puro. Assim é possível interagir com banco de dados e outros serviços existentes no servidor, com a vantagem de não expor o código fonte. É case sensitive. Isso significa que a utilização de letras maiúsculas e minúsculas faz diferença em nomes de variáveis, constantes, arrays e muitos outros elementos do nosso código. Portanto preste muita atenção ao programar. 1.2 Primeiros passos Como vimos anteriormente, php é uma linguagem server - side. Assim é necessário um servidor web para executar suas operações. Entretanto, seria muito trabalhoso enviar nossos arquivos .php para um servidor online cada vez que quiséssemos testar alguma coisa. Desta forma, a melhor maneira de testar códigos desenvolvidos em php é instalar um servidor no seu computador e rodar os arquivos de forma local. Para isto, utilizaremos o XAMPP que nada mais é que um pacote de programas para desenvolvimento web. Instalando-o já teremos um servidor Apache, suporte a banco de dados MySql, phpMyAdmin para administração de banco de dados, FileZilla FTP Server, entre outros. Acesse: http://www.apachefriends.org/pt_br/xampp-windows.html Escolha o modo de instalação com instalador e siga os passos descritos no passo-a-passo que se encontra na própria página.

76 1.3 XAMPP funcionamento Abra o painel de controle do XAMPP e observe se o status de seu servidor Apache está como Running. Depois abra seu navegador e digite http://localhost. Aqui estará o painel de controle do nosso servidor web local. Sempre que quisermos abrir um documento hospedado em nosso servidor deveremos digitar http://localhost/nomedodocumento.php

77 XAMPP: adicionando uma página ao Localhost A partir de agora, todos os códigos que desenvolvermos em php deverão ser salvos na seguinte pasta: Esta é a pasta raiz de nosso servidor. Assim, tudo que for salvo dentro dela será acessado no navegador web através do endereço http://localhost/nomedoarquivo.php É possível criar subpastas dentro dela, e salvar determinados arquivos dentro destas subpastas. Assim, o acesso a estes arquivos será feito através do endereço: http://localhost/nomedapasta/nomedoarquivo.php

78 CAPÍTULO 2 – FUNDAMENTOS DE PROGRAMAÇÃO 2.1 Formas de delimitar o código PHP <?php ...código... ?> <? código ?> <script language= “php”> código... </script> <% código %> 2.2 Declarando variáveis

79 2.3 Strings Uma string é uma seqüência ordenada de caracteres. Segundo o Manual do PHP “ Não é problema uma string ser bastante longa. PHP não impõe limite de tamanho de uma string. O único limite é o de memória disponível do computador no qual o PHP está sendo executado. ” Além disso, ainda é importante saber que uma string pode ser especificada entre aspas simples ' ' ou aspas duplas “ “. Para declarar uma string: $ nomedastring = “conteúdo da string”; OU $nomedastring = ‘conteúdo da string’; Leituras complementares http://br2.php.net/language.types.string.php 2.4 Imprimindo texto na tela echo – imprime uma ou mais strings na página print – É uma função que imprime uma string na página e retorna true

80 Primeiros exemplos Abra o Notepad++. Crie um novo arquivo e escolha PHP no menu de linguagem. Depois teste o seguinte código : <?php echo “Este é meu primeiro código Php” ?> Não esqueça de salvar na pasta htdocs do nosso servidor local. Para visualizar seu arquivo, abra o navegador web e digite http://localhost/nomedoarquivo.php Faça a mesma coisa com os exemplos a seguir: <?php <?php $t= 20; $y = 0.18; $m= 5; $x = 5.15; echo $t*$m; $z = 4.03; ?> echo $y/$x/$z; ?>

81 2.5 Concatenação de Strings Quando dizemos que

#exemplo presentations

Add a comment

Related presentations

Related pages

Faculdade de Juazeiro do Norte | Manual do Aluno

Visualizar manual do aluno AQUI. ... Sites e Blogs. Semana de Iniciação Científica; ... Criação e Desenvolvimento: ...
Read more

Manual do Aluno 2013 by Ana Cristina Gonzaga - issuu

... Manual do Aluno 2013, ... você pode realizar o download do mesmo através dos sites: ... A partir do Primário II, ...
Read more

Manual do Aluno EaD | PDF Flipbook

Manual do Aluno EaD ... que permite a criação e gestão ... uma ferramenta para criar sites de web dinâmicos. O foco do projeto é disponibilizar aos ...
Read more

MANUAL DO ALUNO - Universidade do Vale do Paraíba

UNIVERSIDADE DO VALE DO PARAÍBA MANUAL DO ALUNO ... até a data da criação da UNIVAP em ... e a Prefeitura do Campus. 2. Estruturas de apoio ao aluno
Read more

Manual do Aluno | PDF Flipbook

2013 MANUAL DO ALUNO EaD ... como uma ferramenta para criar sites de web dinâmicos. O foco do projeto é disponibilizar aos ... do aluno; Quando da ...
Read more

MANUAL DO ALUNO - Portal Uninter - livrozilla.com

MANUAL DO ALUNO ENSINO PRESENCIAL SOLUÇÕES INOVADORAS EM EDUCAÇÃO MANUAL DO ALUNO ... do conhecimento, bem como, sites ... II e V, do parágrafo ...
Read more

Manual do aluno | Colégio Dinâmico Bauru

Manual do aluno “Aqui ... e respeitar as determinações dos agentes participantes do processo educativo da Escola; II ... Criação de Sites ...
Read more

Manual do Aluno - Faculdade Cristã de Curitiba by jesse ...

MANUAL DO ALUNO. 1. APRESENTAÇÃO Prezado(a) aluno(a) A Faculdade Cristã de Curitiba iniciou suas atividades em 1991, com a denominação de Faculdade ...
Read more

Direito: Manual do Aluno - coorddireitofcs.blogspot.com

Manual do Aluno MANUAL DO. ... tecnologia e da criação e difusão da cultura, ... Cada momento da aprendizagem do aluno deve se constituir em ...
Read more