Your SlideShare is downloading. ×
0
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Montando sites com XHTML e CSS utilizando os padrões web

13,710

Published on

Apresentação do minicurso realizado na UFC-Quixadá de 20 a 24 de julho de 2009.

Apresentação do minicurso realizado na UFC-Quixadá de 20 a 24 de julho de 2009.

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

No Downloads
Views
Total Views
13,710
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
547
Comments
0
Likes
10
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1.
  • 2. Programa<br />1º Dia: Um pouco de história<br />2º Dia: Mão na massa - Site do WTISC<br />3º Dia: Montando a página Programação (Tabelas)<br />4º Dia: Montando a página Inscrições (Formulário)<br />5º Dia: Um pouco de JavaScript e FTP<br />
  • 3. 1º Dia:<br />Um pouco de história<br />
  • 4. Como tudo começou<br /> A Web foi criado em 1989, por Tim Berners-Lee, para ser um padrão de publicação e distribuição de textos científicos e acadêmicos.<br />Localizador Uniforme de Recursos (URL)<br />Linguagem de Marcação de Hipertexto (HTML)<br />Protocolo de Transferência de Hipertexto (HTTP)<br />Navegador Web (Browser)<br />
  • 5. A Bagunça<br />A Web cresce comercialmente,<br />e veema necessidade de publicação de conteúdo diagramado,<br />como em revistas e jornais<br />(algo para o qual o HTML não possuiarecursos).<br />Há então a adaptação da linguagem<br />de forma equivocada,<br />com uma preocupação unicamente visual, esquecendo da qualidade do código.<br />
  • 6. A Guerra dos Browsers<br /> Aproximadamente entre 1995 e 1999 houve a chamada “Guerra dos Browsers”, onde a Netscape (e seu Browsers de mesmo nome) e a Microsoft (com o seu Internet Explorer) disputavam o mercado de navegadores.<br /> Além de não darem suporte aos padrões do recém criadoWorld Wide Web Consortium (W3C),aindacriavam seus próprios padrões, aumentando a bagunça.<br />
  • 7. Editores WYSIWYG<br /> &amp;quot;O que você vê é o que você tem&amp;quot;, ou em inglês &amp;quot;What You See Is What You Get&amp;quot; (WYSIWYG) sãoprogramas que lhe permitem ter a visualização final de um documento, enquanto o mesmo ainda é editado.<br />Editores HTML WYSIWYG comoGo Live, Front Page e Dreamweaversurgiram por volta de 1996, e são conhecidos por gerar um código sujo e muito maior que o necessário.<br />
  • 8. Cursos e Profissionais desatualizados<br />
  • 9. Com tudo isso...<br /> Cada arquivos de um site acaba sendo um incompreensível emaranhado de Tags<br />com tabelas, formatações, scripts...<br /> Tudo muito maior que o necessário.<br /> Dessa forma, para que seja feita alguma alteração no site, é necessário alterar todos os arquivos...<br />um a um!<br />
  • 10.
  • 11. Os Padrões Web<br /> Padrões Web ou Web Standards são um conjunto de normas, diretrizes, recomendações, notas, artigos, tutoriais e afins de caráter técnico, 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.<br />XHTML – HTML – CSS – DOM – XML – SVG – SOAP – ...<br />
  • 12. O que é W3C?<br /> 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.<br />Desenvolve Recomendações abertas,<br />até agora mais de 80 padrões...<br />www.w3.org<br />
  • 13. Web Standards Project<br />O Web Standards Project (WaSP) é um grupo formado em 1998 com o objetivo de promover os Padrões Web, assegurando desse modo um acesso simples e com menos custos para todos.<br /> Vem encorajando e persuadindo os fabricantes de Browsers a fornecerem suporte aos padrões, como o XHTML, CSS, ECMAScript (a versão standard do JavaScript) e o DOM.<br />www.webstandards.org<br />
  • 14. Mudança de Conceito...<br /> Web dividida em três camadas:<br /> ● Conteúdo (XHTML)<br /> ● Apresentação (CSS)<br /> ● Comportamento (Javascript)<br /> Devem ser desenvolvidas<br /> de forma independente, porém<br /> uma complementa a outra.<br />
  • 15. Mudança de Conceito...<br />
  • 16. Sem Padrões x Com Padrões<br />✗ Extensão da<br /> Mídia Impressa<br />✗ Layout baseado<br /> em Tabelas<br />✗ Conteúdo,<br /> Apresentação e<br /> Comportamento<br /> “aninhados”<br />✗ Código<br /> Incompreensível<br />✔ Acessível de<br /> qualquer<br /> dispositivo<br />✔ Layout baseado<br /> em CSS<br />✔ Separação entre<br /> Conteúdo,<br /> Apresentação e<br /> Comportamento<br />✔ Código Acessível<br />
  • 17. Vantagens da adoção dos Padrões<br />Carregamento mais rápido<br />Menores custos com hospedagem<br />Melhor Consistência Visual<br />Redesign mais barato e eficiênte<br />Melhores resultados nos Mecanismos de Buscas<br />Maior acessibilidade e interoperabilidade<br />
  • 18. Tableless x Web Standards<br />Tableless é um termo que ficou muito popular no Brasil, e que acaba por confundir muita gente.<br />Tableless significa (resumidamente) um site desenvolvido sem o antiquado uso das tabelas para organizar o layout, e sim usando CSS.<br /> Criar um site Tableless não significa que esteja seguindo os Padrões Web, que vão muito além de um código válido, e tem preocupações maiores como a Semântica e a Acessibilidade.<br />
  • 19. HTML<br />HTML é a abreviação para HyperText Markup Language, que pode ser traduzido como Linguagem de Marcação para Hipertexto.<br /> Compõe a estrutura de uma página Web através de etiquetas (tags) e atributos.<br />
  • 20. HTML<br />O HTML sofreu várias mudanças em suas diferentes versões, com o objetivo de estender a linguagem para que pudesse acompanhar a evolução da Web e das tecnologias nela inseridas.<br /> Versões do HTML:<br />HTML 2.0 (Novembro de 1995)<br />HTML 3.2 (Janeiro de 1997)<br />HTML 4.0 (Dezembro de 1997)<br />HTML 4.01 (Dezembro de 1999)<br />ISO/IEC 15445:2000 &amp;quot;ISO HTML&amp;quot; (Maio de 2000)<br />HTML 5 (Janeiro de 2008)<br />
  • 21. XML: eXtensible Markup Language<br /> Criada para suprir a falta de flexibilidade do HTML.<br /> Separação do conteúdo da formatação.<br /> Simplicidade e Legibilidade, para humanos e computadores.<br /> Criação de arquivos para validação de estrutura.<br /> Interligação de bancos de dados distintos.<br /> Concentração na estrutura da informação.<br />
  • 22. XHTML<br /> O (X)HTML, ou eXtensible Hypertext Markup Language, é uma reformulação da linguagem de marcação HTML baseada em XML.<br />Pode ser interpretado por qualquer dispositivo, independentemente da plataforma utilizada, pois as marcações possuem sentido semântico para as máquinas.<br />
  • 23. Um Código Semântico<br /> Semântica refere-se ao estudo do significado.<br /> Quando utilizamos cada marcação para o que ela realmente foi criada, estamos construindo um “Código Semântico”.<br /> Parar de pensar em “isso vem aqui, isso vai ali...” e pensar na “Estrutura da Informação”<br /> Criar uma “Marcação com Significado”.<br />
  • 24. Marcação Semântica<br />Usar &amp;lt;table&amp;gt;&amp;lt;/table&amp;gt; apenas para dados tabulares<br />Usar &amp;lt;h1&amp;gt;&amp;lt;/h1&amp;gt; até &amp;lt;h6&amp;gt;&amp;lt;/h6&amp;gt; para títulos<br />Usar &amp;lt;ol&amp;gt;&amp;lt;/ol&amp;gt; para Listas Ordenadas e &amp;lt;ul&amp;gt;&amp;lt;/ul&amp;gt; para<br />Listas Não Ordenadas, seguidos do elemento &amp;lt;li&amp;gt;&amp;lt;/li&amp;gt;<br />Usar &amp;lt;em&amp;gt;&amp;lt;/em&amp;gt; para Enfase,<br />e &amp;lt;strong&amp;gt;&amp;lt;/strong&amp;gt; para Enfase Forte<br />
  • 25. Versões do XHTML<br /> XHTML é uma linguagem que começou como uma reformulação do HTML 4.01<br /> usando XML 1.0:<br />XHTML 1.0 (Janeiro de 2000)<br />XHTML 1.1: (Maio de 2001)<br />XHTML 2.0: Ainda é um projeto de trabalho do W3C. <br />XHTML 5.0: é uma atualização para o XHTML 1.x, está sendo definido juntamente com o HTML5 no mesmo projeto.<br />
  • 26. DTD: DocumentTypeDefinition<br /> Um padrão que define as partes de um documento, e descrevem como eles podem ou não ser usados, o que pode ser colocado em seus interiores, e se são ou não elementos obrigatórios do documento.<br /> Descreve com precisão a sintaxe e a gramática da linguagem de marcação XHTML.<br />
  • 27. XHTML 1.0 - DOCTYPE:<br />Strict<br />&amp;lt;!DOCTYPE html PUBLIC &amp;quot;-//W3C//DTD XHTML 1.0 Strict//EN&amp;quot;<br /> &amp;quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&amp;quot;&amp;gt;<br />Transitional<br />&amp;lt;!DOCTYPE html PUBLIC &amp;quot;-//W3C//DTD XHTML 1.0 Transitional//EN&amp;quot;<br /> &amp;quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&amp;quot;&amp;gt;<br />Frameset<br />&amp;lt;!DOCTYPE html PUBLIC &amp;quot;-//W3C//DTD XHTML 1.0 Frameset//EN&amp;quot;<br /> &amp;quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd&amp;quot;&amp;gt;<br />
  • 28. XHTML – Elementos obrigatórios:<br />&amp;lt;!DOCTYPE html PUBLIC &amp;quot;-//W3C//DTD XHTML 1.0 Strict//EN&amp;quot;<br /> &amp;quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&amp;quot;&amp;gt;<br />&amp;lt;htmlxmlns=&amp;quot;http://www.w3.org/1999/xhtml&amp;quot;&amp;gt;<br /> &amp;lt;head&amp;gt;<br /> &amp;lt;title&amp;gt;XHTML Base&amp;lt;/title&amp;gt;<br /> &amp;lt;/head&amp;gt;<br /> &amp;lt;body&amp;gt;<br /> &amp;lt;p&amp;gt;Conteúdo&amp;lt;/p&amp;gt; <br /> &amp;lt;/body&amp;gt;<br />&amp;lt;/html&amp;gt;<br />
  • 29. Diferenças entre XHTML e HTML<br />Documentos devem ser bem-formados<br />Todas as tags devem ser escritas com letras minúsculas<br />Tags devem estar convenientemente aninhadas<br />Uso de tags de fechamento é obrigatório<br />Elementos vazios devem ser fechados<br />Diferença na sintaxe dos atributos<br />
  • 30. Diferenças entre XHTML e HTML<br />Documentos devem ser bem-formados<br />A estrutura básica do documento deve ser conforme mostrado a seguir:<br />&amp;lt;html&amp;gt;<br /> &amp;lt;head&amp;gt;<br /> ...<br /> &amp;lt;/head&amp;gt;<br /> &amp;lt;body&amp;gt;<br /> ...<br /> &amp;lt;/body&amp;gt;<br /> &amp;lt;/html&amp;gt;<br />
  • 31. Diferenças entre XHTML e HTML<br />Todas as tags devem ser escritas com letras minúsculas<br />Errado:<br /> &amp;lt;DIV&amp;gt;&amp;lt;P&amp;gt;Aqui um texto!&amp;lt;/P&amp;gt;&amp;lt;/DIV&amp;gt;<br />Correto:<br /> &amp;lt;div&amp;gt;&amp;lt;p&amp;gt;Aqui um texto!&amp;lt;/p&amp;gt;&amp;lt;/div&amp;gt;<br />
  • 32. Diferenças entre XHTML e HTML<br />Tags devem estar convenientemente aninhadas<br />Errado:<br /> &amp;lt;div&amp;gt;&amp;lt;p&amp;gt;Aqui um &amp;lt;em&amp;gt;texto!&amp;lt;/p&amp;gt;&amp;lt;/em&amp;gt;&amp;lt;/div&amp;gt;<br />Correto:<br /> &amp;lt;div&amp;gt;&amp;lt;p&amp;gt;Aqui um &amp;lt;em&amp;gt;texto! &amp;lt;/em&amp;gt;&amp;lt;/p&amp;gt;&amp;lt;/div&amp;gt;<br />
  • 33. Diferenças entre XHTML e HTML<br />Uso de tags de fechamento é obrigatório<br /> Errado:<br /> &amp;lt;p&amp;gt;Um parágrafo.<br />Correto:<br /> &amp;lt;p&amp;gt;Um parágrafo.&amp;lt;/p&amp;gt;<br />
  • 34. Diferenças entre XHTML e HTML<br />Elementos vazios devem ser fechados<br /> Errado:<br /> &amp;lt;br&amp;gt;<br /> &amp;lt;imgsrc=“imagem.gif” alt=“uma imagem”&amp;gt;<br />Correto:<br /> &amp;lt;br /&amp;gt;<br /> &amp;lt;imgsrc=“imagem.gif” alt=“uma imagem” /&amp;gt;<br />
  • 35. Diferenças entre XHTML e HTML<br />Diferença na sintaxe dos atributos<br />Errado:<br /> &amp;lt;td ROWSPAN=3&amp;gt;<br /> &amp;lt;input checked&amp;gt;<br />Correto:<br /> &amp;lt;tdrowspan=“3”&amp;gt;<br /> &amp;lt;input checked=“checked”&amp;gt;<br />
  • 36. XHTML: Recomendações<br />Aplicamos “Itálico” em um texto para dar ênfase...<br />Ao invés da marcação &amp;lt;i&amp;gt;&amp;lt;/i&amp;gt;,<br />use &amp;lt;em&amp;gt;&amp;lt;/em&amp;gt;, ou então &amp;lt;cite&amp;gt;&amp;lt;/cite&amp;gt;<br />se for uma citação (de um livro, por exemplo)<br />Para uma ênfase forte,<br />ao invés de &amp;lt;b&amp;gt;&amp;lt;/b&amp;gt;,<br />use a marcação&amp;lt;strong&amp;gt;&amp;lt;/strong&amp;gt;<br />
  • 37. XHTML: Recomendações<br />Um menu nada mais é<br />do que uma lista de opções...<br />Então, use as marcações de<br />Lista não-ordenada<br />
  • 38. CSS: Cascading Style Sheets<br />Cascading Style Sheets (ou simplesmente CSS) é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML.<br /> Seu principal benefício é prover aseparação entre o formato e o conteúdo de um documento.<br /> Pode-se definir apresentações especificas para diferentes dispositivos (Tvs, Celulares e PDAs, Impressoras, etc) apenas criando<br /> folhas de estilo alternativas.<br />
  • 39. CSS: Cascading Style Sheets<br />CSS 1.0 … CSS level 1<br />Em setembro de 1994 surgiu a primeira proposta<br />Emdezembro de 1996 lançadacomoRecomendaçãooficial do W3C<br />CSS 2.0 … CSS level 2<br />Publicadaemmaio de 1998<br />Ultimarevisão: 12 de maio de 2008<br />CSS 2.1 … CSS level 2 revision 1<br />Candidata a Recomendaçãooficial do W3C em 23 de abril de 2009<br />CSS 3.0 … CSS level 3<br />Propostaem 2001<br />
  • 40. Associar CSSs a documentos HTML<br />Inline<br />Através do atributostyle diretamente dentro de uma marcação<br />Interno<br /> Através da tag style entre as marcações &amp;lt;head&amp;gt;&amp;lt;/head&amp;gt; do documento HTML<br />Externo<br /> Criar um link (ligação) para uma página que contém os estilos.<br />&amp;lt;link href=&amp;quot;estilo.css&amp;quot; rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot; /&amp;gt;<br />
  • 41. CSS: Cascading Style Sheets<br />
  • 42. CSS: Seletor classe<br />Uma classe define a variação de um estilo.<br />É referenciado através de uma ocorrência específica de um elemento utilizando o atributo class.<br />Serve para definirváriosestilosdiferentespara o mesmoelemento.<br />Defenidopelo .<br />Exemplo:<br /> - no CSS: h4.diferente {color:red;}<br /> - no XHTML: &amp;lt;h4 class=“diferente”&amp;gt;Titulo&amp;lt;/h4&amp;gt;<br />
  • 43. CSS: Seletor id<br />Semelhante ao Seletor classe.<br />A diferençaé que utiliza o atributo id, que serve para identificar exclusivamente um determinado elemento no documento.<br />Defenido pelo #<br />Exemplo:<br /> - no CSS: #header {width:900px;}<br /> - no XHTML: &amp;lt;div id=“header”&amp;gt;…&amp;lt;/div&amp;gt;<br />
  • 44. CSS: Comentários<br /> Assim como em qualquer linguagem de programação, em CSS é possível adicionar comentários para melhor documentar o código.<br />Exemplo:<br /> /* Comentário */<br />
  • 45. display: Define como um elemento é exibido.<br /> Ex: display: none;<br />float: Faz o elemento flutuar à esquerda ou à direita do restante do conteúdo.<br /> Ex: float: left;<br />CSS: Propriedades<br />
  • 46. margin-top, margin-right, margin-bottom e margin-left: Define a margem superior, direita, inferior e esquerda de um elemento.<br /> Ex: margin-top: 10px;<br />padding-top, padding-right, padding-bottom e padding-left: Define a área superior, direita, inferior e esquerda de espaçamento de um elemento.<br /> Ex: padding-right: 5px;<br />CSS: Propriedades<br />
  • 47. font-family: Relação de nomes específicos de famílias de fontes ou de seus nomes genéricos.<br /> Ex: font-family: Arial, Helvetica, sans-serif;<br />font-size: Define o tamanho de uma fonte.<br /> Ex: font-size: 11px;<br />font-weight: Define o peso de uma fonte.<br /> Ex: font-weight: bold;<br />color: Define a cor do texto.<br />Ex: color: red;<br />CSS: Propriedades<br />
  • 48. text-align: Alinha o texto em um elemento.<br /> Ex: text-align: center;<br />text-decoration: Acrescenta decoração de texto.<br /> Ex: text-decoration: underline;<br />CSS: Propriedades<br />
  • 49. background-color: Define a cor de fundo de um elemento.<br /> Ex: background-color: blue;<br />background-image: Define uma imagem como plano de fundo.<br /> Ex: background-image: url(images/bg.jpg);<br />background-repeat: Define como uma imagem de fundo será repetida.<br /> Ex: background-repeat: no-repeat;<br />CSS: Propriedades<br />
  • 50. border-width: Define a largura da borda de um elemento.<br /> Ex: border-width: 3px;<br />border-style: Define o estilo da borda.<br /> Ex: border-style: dotted;<br />border-color: Define a cor da borda.<br /> Ex: border-color: #000000;<br />CSS: Propriedades<br />
  • 51. CSS e o Designer<br />CSS é a linguagem do designer.<br />Designer de web precisa saber CSS.<br />Design não é nada sem controle.<br />O CSS, dá o controle.<br />Diego Eis - tableless.com.br<br />
  • 52. O Poder do CSS<br /> O CSS Zen Gardentem como alvo entusiasmar, inspirar e encorajar a separação do Conteúdo (HTML) da Apresentação (CSS)<br /> Mostrar as enormes possibilidades de se obter belos Layouts através do CSS<br /> Como exemplo, podemos Acessar os links e visualizar diversos Layouts diferentes. O código HTML permanece o mesmo, a única coisa que muda é o arquivo CSS externo.<br />www.csszengarden.com<br />
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58. Validadores<br />Validador de HTML, XHTML, XML e<br />http://validator.w3.org<br />Validador de Folhas de Estilo CSS<br />http://jigsaw.w3.org/css-validator<br />
  • 59. Fixe bem...<br />“XHTML para estruturar<br /> e<br />CSS para apresentar (formatação).”<br />
  • 60. Agradecimentos<br /> Grande parte dos slides utilizados aqui foram retirados da apresentação “Web Standards” de Eduardo Santos que prontamente me foram cedidos para ajudar na disseminação dos Padrões Web.<br /> Todos os créditos a ele.<br />
  • 61. Referências<br />Silva, Maurício Samy – Construindo sites com CSS e (X)HTML. -- São Paulo: Novatec, 2008.<br />www.w3.org<br />www.w3schools.com<br />www.maujor.com<br />www.tableless.com.br<br />www.cssnolanche.com.br<br />
  • 62. Dúvidas?<br />
  • 63. 2º Dia:<br />Mão na massa – Site do WTISC<br />
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74. Mão na massa - Site do WTISC<br />Passos:<br />XHTML Padrão<br />CSS Padrão<br />Página Programação<br />Trabalhando com tabelas<br />Página Inscrições<br />Trabalhando com formulários<br />
  • 75. Mão na massa - Site do WTISC<br />Vamos aos trabalhos... Inicie o Editor.<br />OBS: O site foi todo montado durante o minicurso.<br />Link para o material final:<br />www.igorpimentel.com/minicursos/xhtmlcss.zip<br />
  • 76. Obrigado!;)<br />

×