Xhtml e Css
-
Upload
guest90bfaa -
Category
Technology
-
view
823 -
download
5
description
Transcript of Xhtml e Css
![Page 1: Xhtml e Css](https://reader036.fdocument.pub/reader036/viewer/2022081506/55834bffd8b42a882e8b518c/html5/thumbnails/1.jpg)
1/24
XHTML/CSS
Ana Laura Gomes
![Page 2: Xhtml e Css](https://reader036.fdocument.pub/reader036/viewer/2022081506/55834bffd8b42a882e8b518c/html5/thumbnails/2.jpg)
2/24
Contextualização
WEB 2.0
![Page 3: Xhtml e Css](https://reader036.fdocument.pub/reader036/viewer/2022081506/55834bffd8b42a882e8b518c/html5/thumbnails/3.jpg)
3/24
Contextualização
WEB 2.0 - Web como plataforma
![Page 4: Xhtml e Css](https://reader036.fdocument.pub/reader036/viewer/2022081506/55834bffd8b42a882e8b518c/html5/thumbnails/4.jpg)
4/24
Contextualização
WEB 2.0 - mais colaborativa
![Page 5: Xhtml e Css](https://reader036.fdocument.pub/reader036/viewer/2022081506/55834bffd8b42a882e8b518c/html5/thumbnails/5.jpg)
5/24
Contextualização
WEB 2.0 – experiência mais rica para os usuários
![Page 6: Xhtml e Css](https://reader036.fdocument.pub/reader036/viewer/2022081506/55834bffd8b42a882e8b518c/html5/thumbnails/6.jpg)
6/24
Contextualização
WEB 2.0 – experiência mais rica entre os usuários
![Page 7: Xhtml e Css](https://reader036.fdocument.pub/reader036/viewer/2022081506/55834bffd8b42a882e8b518c/html5/thumbnails/7.jpg)
7/24
Contextualização
WEB 2.0 – foco no usuário
![Page 8: Xhtml e Css](https://reader036.fdocument.pub/reader036/viewer/2022081506/55834bffd8b42a882e8b518c/html5/thumbnails/8.jpg)
8/24
Contextualização
Usuário
![Page 9: Xhtml e Css](https://reader036.fdocument.pub/reader036/viewer/2022081506/55834bffd8b42a882e8b518c/html5/thumbnails/9.jpg)
9/24
Contextualização
Usuário - Acessibilidade
![Page 10: Xhtml e Css](https://reader036.fdocument.pub/reader036/viewer/2022081506/55834bffd8b42a882e8b518c/html5/thumbnails/10.jpg)
10/24
Contextualização
Usuário - Portabilidade
![Page 11: Xhtml e Css](https://reader036.fdocument.pub/reader036/viewer/2022081506/55834bffd8b42a882e8b518c/html5/thumbnails/11.jpg)
11/24
Contextualização
Usuário - Flexibilidade
![Page 12: Xhtml e Css](https://reader036.fdocument.pub/reader036/viewer/2022081506/55834bffd8b42a882e8b518c/html5/thumbnails/12.jpg)
12/24
Contextualização
Usuário
• Usabilidade - norma ISO 9241-11
A capacidade que um sistema interativo oferece a seu usuário, em um determinado contexto de operação, para a realização de tarefas, de maneira eficaz, eficiente e agradável.
![Page 13: Xhtml e Css](https://reader036.fdocument.pub/reader036/viewer/2022081506/55834bffd8b42a882e8b518c/html5/thumbnails/13.jpg)
13/24
Contextualização
E mais...
![Page 14: Xhtml e Css](https://reader036.fdocument.pub/reader036/viewer/2022081506/55834bffd8b42a882e8b518c/html5/thumbnails/14.jpg)
14/24
Contextualização
E mais...
• Web semântica• Preparação para o XML• Mudanças no Dreamweaver 8• Outras plataformas de criação e
gerenciamento de sites (mambo, joomla, drupal, moodle, blogs etc.)
![Page 15: Xhtml e Css](https://reader036.fdocument.pub/reader036/viewer/2022081506/55834bffd8b42a882e8b518c/html5/thumbnails/15.jpg)
15/24
Aplicação
XHTML / CSS
![Page 16: Xhtml e Css](https://reader036.fdocument.pub/reader036/viewer/2022081506/55834bffd8b42a882e8b518c/html5/thumbnails/16.jpg)
16/24
Aplicação
XHTML / CSS
Para que parte destes objetivos seja alcançada, a primeira medida é separar o conteúdo da forma.
Conteúdo (parte editorial) – XHTMLForma (design) – CSS
![Page 17: Xhtml e Css](https://reader036.fdocument.pub/reader036/viewer/2022081506/55834bffd8b42a882e8b518c/html5/thumbnails/17.jpg)
17/24
Aplicação
XHTML / CSS conteúdo e forma definidos em código
• Rapidez no acesso (+- 56% de redução no tamanho final do arquivo)
• Maleabilidade• Facilidade na manutenção• Regras relacionadas à Navegabilidade /
Acessibilidade• Boa experiência para o usuário• Benefícios econômicos e prazerosos
![Page 18: Xhtml e Css](https://reader036.fdocument.pub/reader036/viewer/2022081506/55834bffd8b42a882e8b518c/html5/thumbnails/18.jpg)
18/24
Aplicação
XHTML - teoria
• O que são tags• Estrutura básica da página
– html, head, title, body
• Diferença HTML/XHTML– Regras do XHTML: DTD, boa formatação do
código etc.
• Sites para estudar– www.w3.org/– www.w3schools.com/– www.cgi.br– www.nic.br
![Page 19: Xhtml e Css](https://reader036.fdocument.pub/reader036/viewer/2022081506/55834bffd8b42a882e8b518c/html5/thumbnails/19.jpg)
19/24
Aplicação
XHTML - tags
• parágrafo, quebra de linha, títulos, negrito e itálico
• régua, comentário, imagem, listas (ordenada, não ordenada, definição), links (horizontal, vertical, email, site, download)
• tabelas e formulários• frames, iframes e tags em desuso
![Page 20: Xhtml e Css](https://reader036.fdocument.pub/reader036/viewer/2022081506/55834bffd8b42a882e8b518c/html5/thumbnails/20.jpg)
20/24
Aplicação
CSS – teoria
• O que é• Como funciona• Vantagens
![Page 21: Xhtml e Css](https://reader036.fdocument.pub/reader036/viewer/2022081506/55834bffd8b42a882e8b518c/html5/thumbnails/21.jpg)
21/24
Aplicação
CSS – css zen garden
![Page 22: Xhtml e Css](https://reader036.fdocument.pub/reader036/viewer/2022081506/55834bffd8b42a882e8b518c/html5/thumbnails/22.jpg)
22/24
Aplicação
CSS – declarações
• seletor– tag, class, id
• declarações– comentários, texto (text e font), cor– background, margem, padding, borda, lista, link– dimensionamento e posicionamento
• estilo interno, externo e inline• herança de estilos• aplicações práticas (formatar tabela,
formulário, interface)
![Page 24: Xhtml e Css](https://reader036.fdocument.pub/reader036/viewer/2022081506/55834bffd8b42a882e8b518c/html5/thumbnails/24.jpg)
24/24
Lista de sites
www.microsoft.com/windowsvista/docs.google.comwww.blogger.comwww.pageflakes.comwww.havaianas.com.brdelicious.comwww.wikipedia.orgwww.flickr.comwww.google.com/webhp?hl=en&complete=1www.w3schools.com/xml/default.aspwww.adobe.com/products/dreamweaverwww.mamboserver.comwww.joomlabrasil.orgdrupal.orgmoodle.comwww.w3.org/www.w3schools.com/www.cgi.brwww.nic.brwww.csszengarden.com/tr/portuguese
http://www.tiny.cc/pVkSH