Successfully reported this slideshow.

Webdesign: construindo páginas com HTML

5,187 views

Published on

Published in: Design
  • Be the first to comment

Webdesign: construindo páginas com HTML

  1. 1. WEBDESIGN: CONSTRUINDO PÁGINAS EM HTML Prof. José Pirauá I JORNADA DE ENSINO, PESQUISA E EXTENSÃO DO CAA
  2. 2. E WEBDESIGN? O QUE É DESIGN? Prof. José Pirauá • Webdesign: Construindo páginas em HTML
  3. 3. Prof. José Pirauá • Webdesign: Construindo páginas em HTML TECNOLOGIAS • Para interface - HTML, CSS, Flash • Para programação - PHP, ASP, ActionScript • Banco de dados - MySQL, Oracle, Coldfusion
  4. 4. O que um website tem em comum com uma cebola?
  5. 5. Internet Internet direcionada direcionada para tarefas a informação
  6. 6. COMO FAZER UM WEBSITE? Prof. José Pirauá • Webdesign: Construindo páginas em HTML
  7. 7. Prof. José Pirauá • Webdesign: Construindo páginas em HTML METODOLOGIA 1. Analise o problema - Briefing, entrevistas etc 2. Gere alternativas - Brainstorm, Método 635 etc 3. Avalie e selecione as alternativas - Teste de usabilidade, Vox populi etc 4. Implemente - HTML, PHP, MySQL etc
  8. 8. Prof. José Pirauá • Webdesign: Construindo páginas em HTML HTML • Hypertext Markup Language • É uma linguagem escrita com tags • Serve para organizar o conteúdo • Não é programação
  9. 9. Prof. José Pirauá • Webdesign: Construindo páginas em HTML TAGS • São códigos que definem o HTML • Sempre vem entre “<” e “>” • Entre a tag que abre e a que fecha fica o conteúdo
  10. 10. Prof. José Pirauá • Webdesign: Construindo páginas em HTML TAGS ESSENCIAIS • <html> - define o tipo do arquivo • <head> - seção para conteúdo técnico • <title> - título que aparece na barra • <body> - corpo do arquivo
  11. 11. Prof. José Pirauá • Webdesign: Construindo páginas em HTML TAGS BÁSICAS • Títulos: <h1>, <h2>, <h3> • Parágrafos: <p> • Quebra de linha: <br/> • Comentários: <!-- conteúdo aqui -->
  12. 12. Prof. José Pirauá • Webdesign: Construindo páginas em HTML DREAMWEAVER • Programa para editar arquivo de código (como o HTML) para a Internet • Os itens mais importantes: - Barra de Inserção - Inspetor de propriedades
  13. 13. Prof. José Pirauá • Webdesign: Construindo páginas em HTML BARRA DE INSERÇÃO • Aparece abaixo da Barra do Menu • Apresenta os principais elementos para construir uma página em HTML
  14. 14. Prof. José Pirauá • Webdesign: Construindo páginas em HTML INSPETOR DE PROPRIEDADES • Aparece na área inferior da janela • Exibe as propriedades do elemento selecionado
  15. 15. Prof. José Pirauá • Webdesign: Construindo páginas em HTML EXERCÍCIO 1 Criemos juntos um arquivo simples em HTML usando as tags aprendidas.
  16. 16. Prof. José Pirauá • Webdesign: Construindo páginas em HTML EXERCÍCIO 2 Crie um arquivo HTML com o seguinte poema. Visualize-o no browser e depois faça do último verso um comentário em HTML.
  17. 17. Prof. José Pirauá • Webdesign: Construindo páginas em HTML Autopsicografia O poeta é um fingidor. Finge tão completamente Que chega a fingir que é dor A dor que deveras sente. E os que lêem o que escreve, Na dor lida sentem bem, Não as duas que ele teve, Mas só a que eles não têm. Fernando Pessoa
  18. 18. • Itálico: <em> • Negrito: <strong> FORMATAÇÃO DE TEXTO Prof. José Pirauá • Webdesign: Construindo páginas em HTML
  19. 19. Prof. José Pirauá • Webdesign: Construindo páginas em HTML EXERCÍCIO 3 1. Volte ao poema e use negrito na palavra “dor” 2. Use itálico no nome do autor
  20. 20. Prof. José Pirauá • Webdesign: Construindo páginas em HTML ATRIBUTOS • São códigos inseridos dentro das tags • Exemplos: - href (para links) - width (para imagens)
  21. 21. Prof. José Pirauá • Webdesign: Construindo páginas em HTML LINKS • Exemplos: <a href=“http://www.google.com”>google</a> <a name=“topo”>Autopsicografia</a> <a href=“#topo”>Voltar ao topo</a> • Não esqueça o “http://”
  22. 22. Prof. José Pirauá • Webdesign: Construindo páginas em HTML EXERCÍCIO 4 1. Insira abaixo do poema quinze parágrafos de HTML sem texto 2. No final insira um link para voltar ao topo do arquivo
  23. 23. Prof. José Pirauá • Webdesign: Construindo páginas em HTML EXERCÍCIO 5 1. Crie um novo arquivo HTML 2. Salve-o na mesma pasta do anterior 3. Crie um link do novo arquivo para o poema e vice-versa 4. Crie um link do arquivo novo para o site da UFPE
  24. 24. Prof. José Pirauá • Webdesign: Construindo páginas em HTML LIVROS • GARRET, Jesse James. The Elements os Use Experience: User Center Design for The Web. New Riders, 2003. • MEMÓRIA, Felipe. Design para a Internet. São Paulo: Campus, 2005. • PREECE, J; ROGERS, Y; SHARP, H. Design de interação. Porto Alegre: Bookman, 2005.
  25. 25. Prof. José Pirauá • Webdesign: Construindo páginas em HTML REFERÊNCIAS ONLINE • http://www.maujor.com.br/ • http://www.w3schools.com/html • http://pt-br.html.net/

×