Desenvolvimento Web Parte II

2,265 views

Published on

2ª parte do Minicurso de Desenvolvimento Web realizado no I WTISC - UFC-Quixadá.

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

No Downloads
Views
Total views
2,265
On SlideShare
0
From Embeds
0
Number of Embeds
30
Actions
Shares
0
Downloads
124
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Desenvolvimento Web Parte II

  1. 1. Montando páginas Web com (X)HTML e CSS Igor Pimentel www.igorpimentel.com [email_address]
  2. 2. Programa <ul><li>Um pouco de história </li></ul><ul><ul><li>O Início da Web </li></ul></ul><ul><ul><li>O que é Web? </li></ul></ul><ul><ul><li>Como funciona a Web? </li></ul></ul><ul><ul><li>W3C e os Padrões Web </li></ul></ul><ul><li>(X)HTML </li></ul><ul><li>CSS </li></ul><ul><li>Estudo de Caso: Palitex </li></ul>
  3. 3. Um pouco de história <ul><li>O Início da Web </li></ul><ul><li>Criada por Tim Berners-Lee em 1989. Baseado no projeto ENQUIRE (1980), enquanto ele trabalhava na CERN . Seu intento original do sistema foi tornar mais fácil o compartilhamento de documentos de pesquisas entre os colegas. </li></ul>
  4. 4. Um pouco de história <ul><li>A Web </li></ul><ul><li>Também conhecida como World-Wide Web (WWW) é a parte multimídia da Internet, portanto possibilita a exibição de páginas de hipertexto , ou seja, texto em formato digital , documentos que podem conter todo o tipo de informação: textos, fotos, animações, trechos de vídeo e sons e programas e que permite conexões entre documentos (os links). </li></ul>
  5. 5. Um pouco de história <ul><li>Como funciona a Web? (1/4) </li></ul><ul><li>A web consiste em um sistema cliente-servidor. </li></ul><ul><li>A comunicação entre os clientes e servidores se dá através do protocolo HTTP : </li></ul><ul><li>1. Usuário digita uma URL navegador (browser) ou clica em um link; </li></ul><ul><li>2. Navegador envia a requisição até o servidor de web; </li></ul><ul><li>3. Servidor de web envia o conteúdo requisitado para o navegador; </li></ul><ul><li>4. O Navegador apresenta a informação para o usuário. </li></ul>
  6. 6. Um pouco de história <ul><li>Como funciona a Web? (2/4) </li></ul><ul><li>HTTP (acrônimo para Hypertext Transfer Protocol , que significa Protocolo de Transferência de Hipertexto ). </li></ul><ul><li>É um protocolo de aplicação responsável pelo tratamento de pedidos/respostas entre cliente e servidor na Web. </li></ul><ul><li>URL (de Uniform Resource Locator), em português Localizador de Recursos Universal, é o endereço de um recurso (um arquivo, uma impressora etc.), disponível em uma rede. Uma URL tem a seguinte estrutura: </li></ul><ul><li>protocolo://máquina/caminho/recurso </li></ul>
  7. 7. Um pouco de história <ul><li>Como funciona a Web? (3/4) </li></ul><ul><li>Navegador (Browser) </li></ul>
  8. 8. Um pouco de história <ul><li>Como funciona a Web? (4/4) </li></ul>
  9. 9. Um pouco de história <ul><li>W3C e os Padrões Web (1/2) </li></ul><ul><li>W3C (World Wide Web Consortium) é um consórcio de empresas de tecnologia. Fundado por Tim Berners-Lee em 1994 para levar a Web ao seu potencial máximo. </li></ul>
  10. 10. Um pouco de história <ul><li>W3C e os Padrões Web (2/2) </li></ul><ul><li>Padrões Web ou Web Standards é um conjunto de recomendações, produzidos pelo W3C e destinados a orientar fabricantes, desenvolvedores e projetistas para o uso de práticas que possibilitem a criação de uma Web acessível a todos, independentemente dos dispositivos usados ou de suas necessidades especiais. </li></ul>
  11. 11. (X)HTML <ul><li>O que é HTML? </li></ul><ul><li>HTML é a abreviação para HyperText Markup Language, que pode ser traduzido como Linguagem de Marcação para Hipertexto . </li></ul><ul><li>Compõe a estrutura de uma página Web através de etiquetas (tags) e atributos. </li></ul>
  12. 12. (X)HTML <ul><li>TAGs HTML </li></ul><ul><li>Atributos HTML </li></ul>
  13. 13. (X)HTML <ul><li>O que é (X)HTML? </li></ul><ul><li>O ( X)HTML , ou eXtensible Hypertext Markup Language , é uma reformulação da linguagem de marcação HTML baseada em XML. </li></ul><ul><li>Deverá ser o sucessor do HTML. Assim, muitos consideram que XHTML é a atual ou mais nova versão do HTML. </li></ul>
  14. 14. (X)HTML <ul><li>Algumas TAGs </li></ul><ul><li>... </li></ul>
  15. 15. CSS <ul><li>O que é CSS? </li></ul><ul><li>Cascading Style Sheets, em português Folhas de Estilo em Cascata, são documentos que descrevem de que forma o HTML deve ser apresentado . </li></ul><ul><li>Contêm um conjunto de regras que descrevem o aspecto visual dos elementos (as tags) HTML. </li></ul>
  16. 16. CSS <ul><li>Sintaxe </li></ul>
  17. 17. CSS <ul><li>Associar CSSs a documentos HTML </li></ul>
  18. 18. CSS <ul><li>Associar CSSs a documentos HTML </li></ul>
  19. 19. CSS <ul><li>Associar CSSs a documentos HTML </li></ul>
  20. 20. CSS <ul><li>Trabalhando com classes </li></ul><ul><li>Uma classe define a variação de um estilo, o qual é referenciado através de uma ocorrência específica de um elemento utilizando o atributo class . </li></ul>
  21. 21. CSS <ul><li>Trabalhando com classes </li></ul>
  22. 22. CSS <ul><li>Definindo um estilo para um elemento específico </li></ul><ul><li>Pode-se atribuir um ID aos elementos e então associar estilos à este ID. </li></ul><ul><li>Para declarar o estilo para um ID é usado o símbolo &quot;#&quot;. </li></ul>
  23. 23. CSS <ul><li>Definindo um estilo para um elemento específico </li></ul>
  24. 24. CSS <ul><li>Adicionando comentários </li></ul><ul><li>Assim como em qualquer linguagem de programação, em CSS é possível adicionar comentários para melhor documentar o código. </li></ul>
  25. 25. CSS <ul><li>Adicionando comentários </li></ul>
  26. 26. CSS <ul><li>Algumas propriedades (1/7) </li></ul><ul><li>display: Define como um elemento é exibido. </li></ul><ul><li>Ex: display: none; </li></ul><ul><li>float: Faz o elemento flutuar à esquerda ou à direita do restante do conteúdo. </li></ul><ul><li>Ex: float: left; </li></ul>
  27. 27. CSS <ul><li>Algumas propriedades (2/7) </li></ul><ul><li>margin-top, margin-right, margin-bottom e margin-left: Define a margem superior, direita, inferior e esquerda de um elemento. </li></ul><ul><li>Ex: margin-top: 10px; </li></ul><ul><li>padding-top, padding-right, padding-bottom e padding-left: Define a área superior, direita, inferior e esquerda de espaçamento de um elemento. </li></ul><ul><li>Ex: padding-right : 5px; </li></ul>
  28. 28. CSS <ul><li>Algumas propriedades (4/7) </li></ul><ul><li>font-family: Relação de nomes específicos de famílias de fontes ou de seus nomes genéricos. </li></ul><ul><li>Ex: font-family: Arial, Helvetica, sans-serif; </li></ul><ul><li>font-size: Define o tamanho de uma fonte. </li></ul><ul><li>Ex: font-size: 11px; </li></ul><ul><li>font-weight: Define o peso de uma fonte. </li></ul><ul><li>Ex: font-weight: bold; </li></ul><ul><li>color: Define a cor do texto. </li></ul><ul><li>Ex: color: red; </li></ul>
  29. 29. CSS <ul><li>Algumas propriedades (5/7) </li></ul><ul><li>text-align: Alinha o texto em um elemento. </li></ul><ul><li>Ex: text-align: center; </li></ul><ul><li>text-decoration: Acrescenta decoração de texto. </li></ul><ul><li>Ex: text-decoration: underline; </li></ul>
  30. 30. CSS <ul><li>Algumas propriedades (6/7) </li></ul><ul><li>background-color: Define a cor de fundo de um elemento. </li></ul><ul><li>Ex: background-color: blue; </li></ul><ul><li>background-image: Define uma imagem como plano de fundo. </li></ul><ul><li>Ex: background-image: url(images/bg.jpg); </li></ul><ul><li>background-repeat: Define como uma imagem de fundo será repetida. </li></ul><ul><li>Ex: background-repeat: no-repeat; </li></ul>
  31. 31. CSS <ul><li>Algumas propriedades (7/7) </li></ul><ul><li>border-width: Define a largura da borda de um elemento. </li></ul><ul><li>Ex: border-width: 3px; </li></ul><ul><li>border-style: Define o estilo da borda. </li></ul><ul><li>Ex: border-style: dotted; </li></ul><ul><li>border-color: Define a cor da borda. </li></ul><ul><li>Ex: border-color: #000000; </li></ul>
  32. 32. Fixe bem... <ul><li>“ (X)HTML para estruturar </li></ul><ul><li>e </li></ul><ul><li>CSS para apresentar (formatação).” </li></ul>
  33. 34. Referências <ul><li>Silva, Maurício Samy – Construindo sites com CSS e (X)HTML. -- São Paulo: Novatec, 2008. </li></ul><ul><li>Site da web: http://pt.wikipedia.org/wiki/ </li></ul><ul><li>Site da web: http://www.w3schools.com/ </li></ul><ul><li>Site da web: http://www.maujor.com/ </li></ul><ul><li>Site da web: http://www.tecnoclasta.com/ </li></ul>
  34. 35. Estudo de Caso: Palitex

×