Aula 03 - Desenvolvimento Web com PHP

1,370 views
1,279 views

Published on

Aula 03 - Desenvolvimento Web com PHP

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,370
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
69
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Aula 03 - Desenvolvimento Web com PHP

  1. 1. Aula 03 HTML/CSS Gilson Paulino07/02/2012 gilsonbp@gmail.com / 82 9973-9868
  2. 2. Uma vida sem desafios não vale a pena ser vivida.(Sócrates)
  3. 3.  O que é HTML? Sintaxe básica do HTML • Tags mais usadas • Tabelas • Listas • Divs • Span O que é CSS? Sintaxe básica do CSS • Classes • Alinhamentos • Efeitos em links e textos • Estilos de fontes e tabelas • <Span> • <Div>
  4. 4. HTML (abreviação para a expressão inglesaHyperText Markup Language, que significaLinguagem de Marcação de Hipertexto) éuma linguagem de marcação utilizada paraproduzir páginas na Web. DocumentosHTML podem ser interpretados pornavegadores.Fonte: Wikipédia
  5. 5. É uma linguagem de programação utilizada para criar páginas WWW – World Wide Web; Osdocumentos HTML podem ser criados usando qualquer editor de texto;É uma linguagem estática e limitada na criatividade;É uma linguagem simples e rápida de implementar;
  6. 6.  Tags: • Tags são rótulos usados para informar ao navegador como deve ser apresentado o website. • Todas as tags têm o mesmo formato: começam com um sinal de menor "<" e acabam com um sinal de maior ">".  Ex: <b>Este texto deve ser em negrito.</b> Uma Tag é formada por comandos, atributos e valores. Os atributos modificam os resultados padrões dos comandos e os valores caracterizam essa mudança. • Exemplo: <hr color="red"/>
  7. 7.  Exemplo de página HTML: No bloco de notas No navegado
  8. 8.  Listas de tags: • Neste link tem uma lista extensa de tags HTML:  http://www.criarsite.net.br/tags-html.html Destaco apenas as que iremos usar bastante junto ao CSS: • <table>; • <form>; • <div>; • <span>; • <li>; • <ul>.
  9. 9.  Usada para criar tabelas:
  10. 10.  Usado para criar formulários:
  11. 11.  Usado para criar formatações em blocos específicos do código fonte:
  12. 12.  Usando para efetuar formatações específicas em blocos de códigos:
  13. 13.  Usadospara fazer listas simples e listas ordenadas:
  14. 14. Cascading Style Sheets (ou simplesmenteCSS) é uma linguagem de estilo utilizadapara definir a apresentação de documentosescritos em uma linguagem de marcação,como HTML ou XML. Seu principal benefícioé prover a separação entre o formato e oconteúdo de um documento.Fonte: Wikipédia
  15. 15. Uma regra CSS é uma declaração que segueuma sintaxe própria e que define como seráaplicado estilo a um ou mais elementos HTML.Um conjunto de regras CSS formam uma Folhade Estilos. Uma regra CSS, na sua forma maiselementar, compõe-se de três partes: umseletor, uma propriedade e um valor e tem asintaxe conforme mostrado abaixo:seletor { propriedade: valor; }
  16. 16. Seletor: genericamente, é oelemento HTML identificado por sua tag, oupor uma classe, ou por uma ID, ou etc., epara o qual a regra será válida (porexemplo: <p>, <h1>, <form>,.minhaclasse,etc...);
  17. 17. Propriedade: é o atributo doelemento HTML ao qual será aplicada aregra (por exemplo:font, color, background, etc...).Valor: é a característica específica a serassumida pela propriedade (por exemplo:letra tipo arial, cor azul, fundo verde, etc...)
  18. 18. Mas você não está restrito somente aos elementos HTML (tags)para aplicar regras de estilo.Você pode "inventar" um nome e com ele criar uma classe aqual definirá as regras CSS. E o mais interessante das classes,é que elas podem ser aplicadas a qualquer elemento HTML. Emais ainda, você pode aplicar estilos diferentes para o mesmotipo de elemento do HTML, usando classes diferentes para cadaum deles.A sintaxe para o seletor classe é mostrada a seguir.Elemento HTML mais um nome qualquer que você "inventa"precedido de . (ponto):elemento.minhaclasse { propriedade: valor; }
  19. 19. O seletor ID difere do seletor classe, por ser ÚNICO. Umseletor ID de determinado nome só pode ser aplicado aUM e somente UM elemento HTML dentro dodocumento.Você pode "inventar" um nome e com ele criar um ID aoqual definirá as regras CSS. Um determinado ID sópode ser aplicado a UM elemento HTML.A sintaxe para o seletor ID é mostrada a seguir. Umnome qualquer que você "inventa" precedido do sinal # :#meuID { propriedade: valor;}
  20. 20.  Existemvárias formas de integrar o CSS a um fonte HTML, usaremos duas delas: • Incorporada; • Externa.
  21. 21.  Incorporada: • Folha de estilo incorporada é uma folha de estilo anexada a um só documento HTML. As regras de estilo são válidas tão somente para aquele documento específico. A folha de estilo é especificada dentro da seção headdo documento e declarada como conteúdo da tag <style>: <head> <style type="text/css"> p { text-indent: 10px; } </style> </head>
  22. 22.  Externa: • Folha de estilo externa é um arquivo que pode ser gerado em qualquer editor de texto, e salvo com extensão.css, contendo regras de estilo e que pode ser lincado a um ou vários documentos HTML. Esta é sem dúvida a maneira mais eficaz para se formatar todo um site, bem como mudar sua aparência parcial ou globalmente, pois a simples edição de um só arquivo fará o efeito. • O arquivo é linkado ao documento HTML com uso da tag <link> colocada dentro da seção head do documento. Os arquivos que contém as regras de estilo ou seja a folha de estilos devem ter a extensão .css : <head> <link rel="stylesheet" href="meu_estilo.css" type="text/css"> </head>
  23. 23.  Formatando texto:
  24. 24.  Div:
  25. 25.  http://maujor.com
  26. 26.  Criando um projeto PHP no Netbeans:Após abrir o Netbeans,clique no menu Arquivoe em “Novo Projeto”.
  27. 27.  Najanela “Novo Projeto” selecione a opção “Aplicativo PHP” e clique em Próximo>:
  28. 28.  Dê um nome ao projeto:Devemos atentar parapasta onde serão gravadosos códigos-fonte, versão doPHP e codificação.
  29. 29.  Configurando o servidor de teste:Em “Executar como”selecione “Site da WebLocal”.Em “URL do projeto” digiteapenas “http://cursodephp”.
  30. 30.  Não usaremos nenhum framework:
  31. 31. Hospedagem virtual, do inglês Virtualhosting, é um método que osservidores, tais como servidoresweb, utilizam para hospedar mais de umnome de domínio em um mesmocomputador, algumas vezes no mesmoendereço IP.
  32. 32.  No Windows precisamos alterar o arquivo “C:WindowsSystem32driversetchosts” Adicione um alias para o nosso projeto.
  33. 33.  Configurando o Apache: • Abra o arquivo “D:xamppapacheconfextrahttpd-vhosts.conf”.Copie o blocomodelo e altereconforme omodelo asnecessidades doprojeto.
  34. 34. É necessário reiniciar o Apache:
  35. 35.  Acesse o projeto no navegador usando o alias “http://cursodephp”: A página está em branco, nosso projeto ainda está vazio.
  36. 36.  Criauma página Currículo; Usar tabelas e formatações com CSS; Hospedar a página Currículo no site de hospedagens gratuitas: • http://www.hdfree.com.br

×