Ferramentas para Sistema Web

Apresentação em tema: "Ferramentas para Sistema Web"— Transcrição da apresentação:

1 Ferramentas para Sistema Web
Sistemas de Informação Aula 6 – 03/04/2013

2 Revisão Imagens <img> Imagens como links Atributos requeridos:
src alt Caminhos absolutos Caminhos relativos Imagens como links

3 CSS Sigla para Cascading Style Sheets
Em português foi traduzido para folhas de estilo em cascata Finalidade de retirar da marcação toda e qualquer declaração que vise a apresentação. Formata a informação Guarde: HTML para estruturação e CSS para apresentação

4 CSS Podemos aplicar o CSS de três formas em um documento HTML:
Definindo as propriedades CSS diretamente no elemento HTML através do seu atributo style. Definindo as regras CSS dentro de um elemento com a tag style. Definindo as regras CSS em arquivo à parte do documento HTML.

5 Regras e Propriedades Propriedade CSS é uma característica visual de um elemento HTML. A regra é um conjunto de propriedades definidas para um elemento ou para um grupo de elementos HTML.

6 CSS Inline Abordagem CSS Inline não é recomendada!

7 Tag <style> A tag <style> é usada para definir informações de estilo para um documento HTML. Dentro do elemento <style> você pode especificar como elementos HTML devem ser renderizados no navegador. Atributo type => Especifica o tipo MIME do documento linkado.

8 Exemplo tag <style>

9 Tag <link> A tag <link> define a relação entre um documento e um recurso externo. É o mais utilizado para vincular documentos HTML a folhas de estilo. Atributo rel => Especifica a relação entre o documento HTML e o documento linkado. Atributo type => Especifica o tipo MIME do documento linkado. Atributo href => Especifica o local do documento linkado.

10 Tag <link>

11 Arquivo CSS Arquivo estilo.css

12 Mais Informações http://pt.wikipedia.org/wiki/Pixel

13 Exercícios Dentro da pasta com o seu nome utilizada no capítulo anterior, crie uma subpasta chamada css. Novamente para facilitar, utilize apenas letras minúsculas em todas as pastas e arquivos que criarmos durante esse capítulo. Crie um documento HTML em um arquivo chamado testando-css.html dentro da pasta css. Todos os parágrafos desse documento devem ser exibidos em negrito, com cor azul e com fonte 20px. Defina uma regra CSS para formatar os parágrafos usando a tag <style>. Use os valores abaixo: font-weight:bold; font-size:20px; color:#0000FF;

14 Solução 2

15 Exercícios Para organizar melhor o conteúdo e a formatação da página criada no exercício anterior, crie um arquivo CSS chamado regras-de-formatacao.css na pasta css. Modifique o arquivo testando-css.html para aplicar as regras de formatação criadas no exercício anterior. Use a tag <link>.

16 Solução 3

17 Solução 4

18 Fim