Workshop HTML e CSS Básico para designers

652 visualizações

Publicada em

Treinamento realizado na Caroá Design (Empresa Júnior, UFRN). 2014.

Publicada em: Design
0 comentários
3 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
652
No SlideShare
0
A partir de incorporações
0
Número de incorporações
6
Ações
Compartilhamentos
0
Downloads
3
Comentários
0
Gostaram
3
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Workshop HTML e CSS Básico para designers

  1. 1. HTML & CSS Noções básicas André Grilo (Design/UFRN) André HHTTMMLL && CCSSSS:: NNooççõõeess bbáássiiccaass GGrriilloo ((DDeessiiggnn//UUFFRRNN))
  2. 2. O web design é um fragmento do design. Não existe web designer. Existe o designer que faz web. (A. Wollner) André HTML & CSS: Noções básicas Grilo (Design/UFRN)
  3. 3. André HTML & CSS: Noções básicas Grilo (Design/UFRN) Webdesigner Designer que faz web O profissional do webdesign atua em diferentes produtos de mídia digital. Websites (Folha On-line) Redes sociais (Facebook) Intranets (SIGAA) Lojas on-line (BomNegócio) Mailing (Gmail)
  4. 4. André HTML & CSS: Noções básicas Grilo (Design/UFRN) Webdesigner O webdesigner lida diretamente com desenvolvedores de código (programadores), e por isso precisa entender como as páginas para web são construídas.
  5. 5. Linguagem de Marcação para Hipertextos André HTML & CSS: Noções básicas Grilo (Design/UFRN) Definição: HTML HyperText Markup Language (HTML) É um tipo de código desenvolvido para escrever páginas para web. Não é um código de programação. É um código de marcação.
  6. 6. O que é um hipertexto É um espaço no qual podem ser vinculados diversos tipos de mídia virtual, como textos, imagens, vídeos etc. Em um hipertexto, o usuário “navega” de maneira não-linear, diferentemente de um texto do mundo real. André HTML & CSS: Noções básicas Grilo (Design/UFRN)
  7. 7. O hipertexto na web HyperText Transfer Protocol (HTTP) Protocolo de tranferência de hipertextos File Transfer Protocol (FTP) Protocolo de tranferência de arquivos André HTML & CSS: Noções básicas Grilo (Design/UFRN)
  8. 8. André HTML & CSS: Noções básicas Grilo (Design/UFRN) Arquivo HTML As extensões de um documento escrito em HTML são “.html” ou “.htm”. O HTML pode ser escrito em qualquer editor de texto, como o Bloco de Notas. O código de um documento HTML é composto por tags (etiquetas).
  9. 9. André HTML & CSS: Noções básicas Grilo (Design/UFRN) Tags As tags são os elementos que constituem o código de um documento HTML, e obedecem à seguinte estrutura: <tag>Conteúdo</tag>
  10. 10. André HTML & CSS: Noções básicas Grilo (Design/UFRN) Tags As tags possuem propriedades, que podem ser descritas na etiqueta de abertura: <tag propriedade=”valor”>Conteúdo</tag>
  11. 11. André HTML & CSS: Noções básicas Grilo (Design/UFRN) Tag: Hiperlink Estrutura de um link em uma página: <a href=”http://www.caroadesign.com.br”>Visite a página da Caroá</a> “a” (anchor) é o nome da tag para criar hiperlinks. “href” (hyper-refference) é a propriedade desta tag, no caso, informa o endereço da página. Existem outras propriedades para essa tag, como “target” etc.
  12. 12. André HTML & CSS: Noções básicas Grilo (Design/UFRN) Tag: Imagens Estrutura de uma imagem no HTML <img src=”foto.jpg” width=”200” height=”120” /> Interpretando o código, podemos verificar que a imagem anexada ao documento HTML é do arquivo “foto.jpg”. “src” tem a função de puxar um arquivo, e “witdh” e “height” são, respectivamente, a largura e a altura (em pixels) “img” é uma tag-solitária. :(
  13. 13. Principais tags no HTML Principais tags de um documento HTML: André HTML & CSS: Noções básicas Grilo (Design/UFRN) <html> <head> <body> Tag de abertura e encerramento do documento. Tag que informa as atribuições do documento. Tag onde o conteúdo da página é escrito.
  14. 14. Principais tags no HTML Hierarquia de tags de um documento HTML (relações de continência): <html> <head> <title>Título da Página no Browser</title> </head> <body> Conteúdo da página </body> </html> Obs.: este código está “indentado”. André HTML & CSS: Noções básicas Grilo (Design/UFRN)
  15. 15. Principais tags no HTML Estrutura de tags Atividade de um documento HTML: <html> Escrever um documento básico em HTML. A página deverá conter uma imagem que, ao ser clicada, carregue um site escolhido por você. <head> <title>Título da Página no Browser</title> </head> <body> Conteúdo da página </body> Salvar como “exercicio1.html” </html> Tempo máximo: 10 minutos Obs.: este código está “indentado”. André HTML & CSS: Noções básicas Grilo (Design/UFRN)
  16. 16. Merenda. (: 15’ André HTML & CSS: Noções básicas Grilo (Design/UFRN)
  17. 17. André HTML & CSS: Noções básicas Grilo (Design/UFRN) Definição: CSS Cascading Style Sheet (CSS) Folhas de estilo em cascata Servem para personalizar os elementos padrão do HTML
  18. 18. André HTML & CSS: Noções básicas Grilo (Design/UFRN) Exercício Escreva o seguinte código em body: exercício2.html <body> <h1>Caroá Design</h1> <h2>Nossos Serviços</h2> <p> <a href=”#”>Gráfico</a><br /> <a href=”#”>Produtos</a><br /> </p> </body>
  19. 19. exercicio2.html André HTML & CSS: Noções básicas Grilo (Design/UFRN) Exercício Encerre um hiperlink com a tag de negrito (b) e o outro com itálico (i): <body> <h1>Caroá Design</h1> <h2>Nossos Serviços</h2> <p> <b><a href=”#”>Gráfico</a></b><br /> <i><a href=”#”>Produtos</a></i><br /> </p> </body>
  20. 20. exercício2.html A utilidade das CSS Como pudemos comprovar, estilizar os elementos da página, um a um, é uma tarefa cansativa. Através das CSS é possível criar padrões para uniformizar os elementos desejados. André HTML & CSS: Noções básicas Grilo (Design/UFRN) Exercício Encerre um hiperlink com a tag de negrito (b) e a outra com itálico (i): <body> <h1>Caroá Design</h1> <h2>Nossos Serviços</h2> <p> <b><a href=”#”>Gráfico</a></b><br /> <i><a href=”#”>Produtos</a></i><br /> </p> </body>
  21. 21. Estrutura das CSS elemento { atributo: valor } Em que: Elemento corresponde a uma TAG, ID, ou CLASSE ID: denominação única para um determinado elemento. Classe: denominação genérica para estilizar vários elementos. André HTML & CSS: Noções básicas Grilo (Design/UFRN)
  22. 22. André HTML & CSS: Noções básicas Grilo (Design/UFRN) Exemplo body { background-color: blue } O elemento estilizado foi a tag body, cuja cor de fundo foi alterada. Importante: as cores, nas CSS podem ser declaradas por nome, por RGB ou por Hexadecimal, sendo este último o mais utilizado entre os desenvolvedores.
  23. 23. Inserindo as CSS no HTML Há três formas de se estilizar um documento: André HTML & CSS: Noções básicas Grilo (Design/UFRN) CSS Incorporada tag-mãe: head CSS Isolada (inline) CSS Externa
  24. 24. exercicio2.html André HTML & CSS: Noções básicas Grilo (Design/UFRN) CSS Inline Alterando a cor do Título 1: <body> <h1 style=”color: Magenta”>Caroá Design</h1> <h2>Nossos Serviços</h2> <p> <b><a href=”#”>Gráfico</a></b><br /> <i><a href=”#”>Produtos</a></i><br /> </p> </body>
  25. 25. exercicio2.html <body> <h1 style=”color: Magenta”>Caroá Design</h1> <h2>Nossos Serviços</h2> <p> <b><a href=”#”>Gráfico</a></b><br /> <i><a href=”#”>Produtos</a></i><br /> </p> </body> André HTML & CSS: Noções básicas Grilo (Design/UFRN) CSS Inline Alterando a cor do Título 1: atributo valor
  26. 26. exercicio2.html CSS Incorporada Escreva na tag head: <head> <style type=”text/css” rel=”stylesheet”> body { background-color: blue; font-family: Arial; } André HTML & CSS: Noções básicas Grilo (Design/UFRN) </style> </head>
  27. 27. André HTML & CSS: Noções básicas Grilo (Design/UFRN) CSS Externa Trata-se de um documento externo ao arquivo HTML. A extensão para arquivos CSS é “.css”
  28. 28. CSS Externa: como anexar exercício2.html <head> <link rel=”stylesheet” type=”text/css” href=”estilos.css”> </head> André HTML & CSS: Noções básicas Grilo (Design/UFRN) Escreva na tag head: Recomendável quando há muitas estilizações em um documento e muitas páginas em um site: qualquer alteração no arquivo .css modificará todas as páginas em que o mesmo está anexado.
  29. 29. Exercício final Especificando CSS de uma Interface Ferramentas necessárias: Adobe Dreamweaver, Adobe Fireworks André HTML & CSS: Noções básicas Grilo (Design/UFRN)
  30. 30. + infos Tutoriais HTML e CSS http://www.maujor.com Tabela de Cores (RGB e Hexadecimal) http://erikasarti.net/html/tabela-cores/ André HHTTMMLL && CCSSSS:: NNooççõõeess bbáássiiccaass GGrriilloo ((DDeessiiggnn//UUFFRRNN)) e-mail: andregrilo@outlook.com skype: grilo.andre

×