Webdesign: construindo páginas com HTML
Upcoming SlideShare
Loading in...5
×
 

Webdesign: construindo páginas com HTML

on

  • 5,475 views

 

Statistics

Views

Total Views
5,475
Views on SlideShare
5,454
Embed Views
21

Actions

Likes
1
Downloads
85
Comments
0

3 Embeds 21

http://www.slideshare.net 12
http://aulasjoaorafael.blogspot.com.br 5
http://www.aulasjoaorafael.blogspot.com.br 4

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Webdesign: construindo páginas com HTML Webdesign: construindo páginas com HTML Presentation Transcript

  • WEBDESIGN: CONSTRUINDO PÁGINAS EM HTML Prof. José Pirauá I JORNADA DE ENSINO, PESQUISA E EXTENSÃO DO CAA
  • E WEBDESIGN? O QUE É DESIGN? Prof. José Pirauá • Webdesign: Construindo páginas em HTML
  • 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
  • O que um website tem em comum com uma cebola?
  • Internet Internet direcionada direcionada para tarefas a informação
  • COMO FAZER UM WEBSITE? Prof. José Pirauá • Webdesign: Construindo páginas em HTML
  • 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
  • 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
  • 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
  • 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
  • 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 -->
  • 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
  • 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
  • Prof. José Pirauá • Webdesign: Construindo páginas em HTML INSPETOR DE PROPRIEDADES • Aparece na área inferior da janela • Exibe as propriedades do elemento selecionado
  • Prof. José Pirauá • Webdesign: Construindo páginas em HTML EXERCÍCIO 1 Criemos juntos um arquivo simples em HTML usando as tags aprendidas.
  • 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.
  • 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
  • • Itálico: <em> • Negrito: <strong> FORMATAÇÃO DE TEXTO Prof. José Pirauá • Webdesign: Construindo páginas em HTML
  • 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
  • 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)
  • 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://”
  • 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
  • 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
  • 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.
  • 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/