SlideShare uma empresa Scribd logo
Web Design
Quando sonhos se tornam
realidade...
Web Design
Após as etapas de briefing, wireframe e
layout, chegou a hora de transformar tudo
em elementos interativos e interpretados via
browser.

Para isso, usamos as linguagens de
marcação (HTML), de estilização (CSS) e
para recursos avançados de lógica
(Javascript, CGI e outras).
Web Design
Estrutura básica de arquivo HTML:
<!DOCTYPE html>
<html>
  <head>...</head>

  <body>...</body>
</html>
Web Design
DOCTYPE

É a definição de como o browser
(navegador) irá interpretar o documento
HTML. A definição de varia de acordo com a
versão do HTML.

Veja a seguir alguns exemplos...
Web Design
Exemplos:

Versão 4.0 - HTML Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
//EN" "http://www.w3.org/TR/html4/strict.
dtd">
Web Design
Exemplos:

Versão 4.0 - HTML Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
//EN" "http://www.w3.org/TR/html4/strict.
dtd">

Versão 5.0 - HTML5
<!DOCTYPE html>
Web Design
Exemplos:

Versão 4.0 - HTML Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
//EN" "http://www.w3.org/TR/html4/strict.
dtd">

Versão 5.0 - HTML5
<!DOCTYPE html>
                           É o que iremos utilizar ;)
Web Design
As tags: <html>, <head> e <body> são
conhecidas como tags estruturais.
Web Design
Onde,

<html> - define que o arquivo é um
documento HTML;

<head> - é responsável por descrições,
definições e pré-carregamentos (é invisível
ao usuário);
Web Design
e,

<body> - é a parte visível a usuário. Leva
consigo o conteúdo e todas as demais
estruturas do website, além dos recursos
interativos.
Web Design
Mas... Chega e papinho e
           vamos ao que interessa!
Web Design
Mas... Chega e papinho e
           vamos ao que interessa!
Web Design
Let's code it!
Web Design
Missão #1
Website pessoal
Web Design: Website pessoal
Web Design: Website pessoal
"O" Wireframe
Web Design: Website pessoal
Deixando mais simples...
Web Design: Website pessoal
Uma pequena PAUSA
para algumas coisas importantes!
Web Design: Website pessoal
Mais nunca se esqueça!

●   Indentação no código;

●   Nomes dos arquivos e pastas:
    sempre minúsculos, sem espaços
    e/ou acentos;
Web Design: Website pessoal
E algumas tags...

Titulos: <h1> ... <h6>
Links: <a>
Parágrafos: <p>
Imagens: <img />
Quebra de linha: <br />
Listas: <ul>,<li>(não ordenada),
        <ol>(ordenada)
Web Design: Website pessoal
Mais algumas tags...

Negritos: <strong>
Itálicos: <i>
Linha horizontal: <hr />
Web Design: Website pessoal
E mais algumas tags...

Definição de blocos: <div>
Definição de conteúdo: <span>

Comentários: <!-- comentário -->
Web Design: Website pessoal
Atributos Essenciais

Identificador único e exclusivo: id
Classe ou classes do elemento: class

Atributos de estilo

Definição de estilo do elemento: style
Web Design: Website pessoal
Colocando em prática...

Mais conteúdo relacionado

Mais procurados

Slides minicurso Web Design
Slides minicurso Web DesignSlides minicurso Web Design
Slides minicurso Web Design
Ana Mendes
 
Design para a web - da interface ao branding
Design para a web - da interface ao brandingDesign para a web - da interface ao branding
Design para a web - da interface ao branding
João Alves
 
A 3ª Área do Design: Web Design
A 3ª Área do Design: Web DesignA 3ª Área do Design: Web Design
A 3ª Área do Design: Web Design
Gustavo Zimmermann
 
03 windows
03   windows03   windows
03 windows
Roney Sousa
 
Construcao de Sites
Construcao de SitesConstrucao de Sites
Construcao de Sites
Leandro Ciuffo
 
O Papel do desenvolvedor Front End
O Papel do desenvolvedor Front EndO Papel do desenvolvedor Front End
O Papel do desenvolvedor Front End
Rael Max
 
Criação Web com Bootstrap e Material Design
Criação Web com Bootstrap e Material DesignCriação Web com Bootstrap e Material Design
Criação Web com Bootstrap e Material Design
Daniel Brandão
 
Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3
Heraldo Gonçalves Lima Junior
 
DOM, CSSOM e RenderThree - Introdução ao Browser Render Path
DOM, CSSOM e RenderThree - Introdução ao Browser Render PathDOM, CSSOM e RenderThree - Introdução ao Browser Render Path
DOM, CSSOM e RenderThree - Introdução ao Browser Render Path
Diego Eis
 
Como criar seu próprio Framework
Como criar seu próprio FrameworkComo criar seu próprio Framework
Como criar seu próprio Framework
Hiarison Gigante
 
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Cristofer Sousa
 
Construindo seu framework CSS
Construindo seu framework CSSConstruindo seu framework CSS
Construindo seu framework CSS
Diego Eis
 
Guia do Front-end das Galáxias
Guia do Front-end das GaláxiasGuia do Front-end das Galáxias
Guia do Front-end das Galáxias
Davidson Fellipe
 
Introdução à Criação De Páginas Web Aula1
Introdução à Criação De Páginas Web Aula1Introdução à Criação De Páginas Web Aula1
Introdução à Criação De Páginas Web Aula1
marioreis
 
Tudo o que você precisa saber sobre layouts para web
Tudo o que você precisa saber sobre layouts para webTudo o que você precisa saber sobre layouts para web
Tudo o que você precisa saber sobre layouts para web
Ítalo Waxman
 
Web Design Responsivo
Web Design ResponsivoWeb Design Responsivo
Web Design Responsivo
Rodrigo Simoni
 
Projeto de WEB Site
Projeto de WEB SiteProjeto de WEB Site
Projeto de WEB Site
Ailton Adriano
 
Elo perdido entre design e programação
Elo perdido entre design e programaçãoElo perdido entre design e programação
Elo perdido entre design e programação
Anyssa Ferreira
 
Design Responsivo
Design ResponsivoDesign Responsivo
Design Responsivo
Rennan Martini
 
Quero ser um ninja em xHTML, HTML5 e CSS3
Quero ser um ninja em xHTML, HTML5 e CSS3Quero ser um ninja em xHTML, HTML5 e CSS3
Quero ser um ninja em xHTML, HTML5 e CSS3
Bunee.io - Hiring with Intelligence
 

Mais procurados (20)

Slides minicurso Web Design
Slides minicurso Web DesignSlides minicurso Web Design
Slides minicurso Web Design
 
Design para a web - da interface ao branding
Design para a web - da interface ao brandingDesign para a web - da interface ao branding
Design para a web - da interface ao branding
 
A 3ª Área do Design: Web Design
A 3ª Área do Design: Web DesignA 3ª Área do Design: Web Design
A 3ª Área do Design: Web Design
 
03 windows
03   windows03   windows
03 windows
 
Construcao de Sites
Construcao de SitesConstrucao de Sites
Construcao de Sites
 
O Papel do desenvolvedor Front End
O Papel do desenvolvedor Front EndO Papel do desenvolvedor Front End
O Papel do desenvolvedor Front End
 
Criação Web com Bootstrap e Material Design
Criação Web com Bootstrap e Material DesignCriação Web com Bootstrap e Material Design
Criação Web com Bootstrap e Material Design
 
Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3
 
DOM, CSSOM e RenderThree - Introdução ao Browser Render Path
DOM, CSSOM e RenderThree - Introdução ao Browser Render PathDOM, CSSOM e RenderThree - Introdução ao Browser Render Path
DOM, CSSOM e RenderThree - Introdução ao Browser Render Path
 
Como criar seu próprio Framework
Como criar seu próprio FrameworkComo criar seu próprio Framework
Como criar seu próprio Framework
 
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
 
Construindo seu framework CSS
Construindo seu framework CSSConstruindo seu framework CSS
Construindo seu framework CSS
 
Guia do Front-end das Galáxias
Guia do Front-end das GaláxiasGuia do Front-end das Galáxias
Guia do Front-end das Galáxias
 
Introdução à Criação De Páginas Web Aula1
Introdução à Criação De Páginas Web Aula1Introdução à Criação De Páginas Web Aula1
Introdução à Criação De Páginas Web Aula1
 
Tudo o que você precisa saber sobre layouts para web
Tudo o que você precisa saber sobre layouts para webTudo o que você precisa saber sobre layouts para web
Tudo o que você precisa saber sobre layouts para web
 
Web Design Responsivo
Web Design ResponsivoWeb Design Responsivo
Web Design Responsivo
 
Projeto de WEB Site
Projeto de WEB SiteProjeto de WEB Site
Projeto de WEB Site
 
Elo perdido entre design e programação
Elo perdido entre design e programaçãoElo perdido entre design e programação
Elo perdido entre design e programação
 
Design Responsivo
Design ResponsivoDesign Responsivo
Design Responsivo
 
Quero ser um ninja em xHTML, HTML5 e CSS3
Quero ser um ninja em xHTML, HTML5 e CSS3Quero ser um ninja em xHTML, HTML5 e CSS3
Quero ser um ninja em xHTML, HTML5 e CSS3
 

Destaque

Arquitetura da Informação - Wireframes
Arquitetura da Informação - WireframesArquitetura da Informação - Wireframes
Arquitetura da Informação - Wireframes
aiadufmg
 
Wireframe workshop externo_001_b
Wireframe workshop externo_001_bWireframe workshop externo_001_b
Wireframe workshop externo_001_b
maurohs
 
Arquitetura de Informação sem wireframe
Arquitetura de Informação sem wireframeArquitetura de Informação sem wireframe
Arquitetura de Informação sem wireframe
Karla Cruz
 
Curso prático de HTML - Aula 1
Curso prático de HTML - Aula 1Curso prático de HTML - Aula 1
Curso prático de HTML - Aula 1
dionyso
 
Lista de Seletores e Propriedades
Lista de Seletores e PropriedadesLista de Seletores e Propriedades
Lista de Seletores e Propriedades
Antonio Silva
 
Curso HTML e CSS
Curso HTML e CSSCurso HTML e CSS
Curso HTML e CSS Part1
Curso HTML e CSS Part1Curso HTML e CSS Part1
Curso HTML e CSS Part1
Herbet Ferreira Rodrigues
 
Top 20 Design Myths
Top 20 Design MythsTop 20 Design Myths
Top 20 Design Myths
Kevin Barber
 
Gestão de negócios
Gestão de negóciosGestão de negócios
Web design and_html
Web design and_htmlWeb design and_html
Web design and_html
Sayed Ahmed
 
Curso de html - Introdução ao HTML
Curso de html -  Introdução ao HTMLCurso de html -  Introdução ao HTML
Curso de html - Introdução ao HTML
Tales Augusto
 
Arquitetura da Informação e Webdesign
Arquitetura da Informação e WebdesignArquitetura da Informação e Webdesign
Arquitetura da Informação e Webdesign
Danilo Rosisca Pereira
 
HTML Principios Básicos
HTML Principios BásicosHTML Principios Básicos
HTML Principios Básicos
Mayza de Oliveira
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Vitaly Friedman
 

Destaque (14)

Arquitetura da Informação - Wireframes
Arquitetura da Informação - WireframesArquitetura da Informação - Wireframes
Arquitetura da Informação - Wireframes
 
Wireframe workshop externo_001_b
Wireframe workshop externo_001_bWireframe workshop externo_001_b
Wireframe workshop externo_001_b
 
Arquitetura de Informação sem wireframe
Arquitetura de Informação sem wireframeArquitetura de Informação sem wireframe
Arquitetura de Informação sem wireframe
 
Curso prático de HTML - Aula 1
Curso prático de HTML - Aula 1Curso prático de HTML - Aula 1
Curso prático de HTML - Aula 1
 
Lista de Seletores e Propriedades
Lista de Seletores e PropriedadesLista de Seletores e Propriedades
Lista de Seletores e Propriedades
 
Curso HTML e CSS
Curso HTML e CSSCurso HTML e CSS
Curso HTML e CSS
 
Curso HTML e CSS Part1
Curso HTML e CSS Part1Curso HTML e CSS Part1
Curso HTML e CSS Part1
 
Top 20 Design Myths
Top 20 Design MythsTop 20 Design Myths
Top 20 Design Myths
 
Gestão de negócios
Gestão de negóciosGestão de negócios
Gestão de negócios
 
Web design and_html
Web design and_htmlWeb design and_html
Web design and_html
 
Curso de html - Introdução ao HTML
Curso de html -  Introdução ao HTMLCurso de html -  Introdução ao HTML
Curso de html - Introdução ao HTML
 
Arquitetura da Informação e Webdesign
Arquitetura da Informação e WebdesignArquitetura da Informação e Webdesign
Arquitetura da Informação e Webdesign
 
HTML Principios Básicos
HTML Principios BásicosHTML Principios Básicos
HTML Principios Básicos
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
 

Semelhante a Web Design > HTML (aula 1)

Curso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTMLCurso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTML
Rodrigo Bueno Santa Maria, BS, MBA
 
Html completo
Html completoHtml completo
Html completo
EMSNEWS
 
Programação web e o front-end
Programação web e o front-endProgramação web e o front-end
Programação web e o front-end
Anderson Luís Furlan
 
Revisão HTML, CSS e BOOTSTRAP - Professor Franciosney
Revisão HTML, CSS e BOOTSTRAP - Professor FranciosneyRevisão HTML, CSS e BOOTSTRAP - Professor Franciosney
Revisão HTML, CSS e BOOTSTRAP - Professor Franciosney
franciosney
 
Web design e Programação front-end
Web design e Programação front-endWeb design e Programação front-end
Web design e Programação front-end
Anderson Luís Furlan
 
Introdução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento WebIntrodução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento Web
Anderson Luís Furlan
 
Web components
Web componentsWeb components
Web components
Mario Mendonça
 
Web components
Web componentsWeb components
Web components
Jackson Veroneze
 
Road Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - JaúRoad Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - Jaú
Clécio Bachini
 
Introdução ao CSS - Desenvolvimento web
Introdução ao CSS - Desenvolvimento webIntrodução ao CSS - Desenvolvimento web
Introdução ao CSS - Desenvolvimento web
Carlos Eduardo Kadu
 
HTML5- Road Show TI - Senac Jaboticabal
HTML5- Road Show TI -  Senac Jaboticabal HTML5- Road Show TI -  Senac Jaboticabal
HTML5- Road Show TI - Senac Jaboticabal
Clécio Bachini
 
Curso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JSCurso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JS
Luis Gustavo Almeida
 
02 html - fontes e estilos
02 html  - fontes e estilos02 html  - fontes e estilos
02 html - fontes e estilos
Centro Paula Souza
 
Apoio1020 apostila html
Apoio1020 apostila htmlApoio1020 apostila html
Apoio1020 apostila html
Reinaldo Vieira dos Santos
 
Front-end: O que é necessário saber ?
Front-end: O que é necessário saber ?Front-end: O que é necessário saber ?
Front-end: O que é necessário saber ?
Rafael Pazini
 
Responsive web design_CPRecife2 - Felipe de Albuquerque
Responsive web design_CPRecife2 -  Felipe de AlbuquerqueResponsive web design_CPRecife2 -  Felipe de Albuquerque
Responsive web design_CPRecife2 - Felipe de Albuquerque
Felipe de Albuquerque
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Luiz Antonio
 
Desenvolvimento Web com Firefox - Clauber Stipkovic Halic
Desenvolvimento Web com Firefox - Clauber Stipkovic HalicDesenvolvimento Web com Firefox - Clauber Stipkovic Halic
Desenvolvimento Web com Firefox - Clauber Stipkovic Halic
Tchelinux
 
Navegadores por de baixo dos panos - Ana Luiza Bastos
Navegadores por de baixo dos panos - Ana Luiza BastosNavegadores por de baixo dos panos - Ana Luiza Bastos
Navegadores por de baixo dos panos - Ana Luiza Bastos
iMasters
 
Manual curso php
Manual curso phpManual curso php
Manual curso php
alexinaa
 

Semelhante a Web Design > HTML (aula 1) (20)

Curso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTMLCurso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTML
 
Html completo
Html completoHtml completo
Html completo
 
Programação web e o front-end
Programação web e o front-endProgramação web e o front-end
Programação web e o front-end
 
Revisão HTML, CSS e BOOTSTRAP - Professor Franciosney
Revisão HTML, CSS e BOOTSTRAP - Professor FranciosneyRevisão HTML, CSS e BOOTSTRAP - Professor Franciosney
Revisão HTML, CSS e BOOTSTRAP - Professor Franciosney
 
Web design e Programação front-end
Web design e Programação front-endWeb design e Programação front-end
Web design e Programação front-end
 
Introdução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento WebIntrodução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento Web
 
Web components
Web componentsWeb components
Web components
 
Web components
Web componentsWeb components
Web components
 
Road Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - JaúRoad Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - Jaú
 
Introdução ao CSS - Desenvolvimento web
Introdução ao CSS - Desenvolvimento webIntrodução ao CSS - Desenvolvimento web
Introdução ao CSS - Desenvolvimento web
 
HTML5- Road Show TI - Senac Jaboticabal
HTML5- Road Show TI -  Senac Jaboticabal HTML5- Road Show TI -  Senac Jaboticabal
HTML5- Road Show TI - Senac Jaboticabal
 
Curso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JSCurso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JS
 
02 html - fontes e estilos
02 html  - fontes e estilos02 html  - fontes e estilos
02 html - fontes e estilos
 
Apoio1020 apostila html
Apoio1020 apostila htmlApoio1020 apostila html
Apoio1020 apostila html
 
Front-end: O que é necessário saber ?
Front-end: O que é necessário saber ?Front-end: O que é necessário saber ?
Front-end: O que é necessário saber ?
 
Responsive web design_CPRecife2 - Felipe de Albuquerque
Responsive web design_CPRecife2 -  Felipe de AlbuquerqueResponsive web design_CPRecife2 -  Felipe de Albuquerque
Responsive web design_CPRecife2 - Felipe de Albuquerque
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
 
Desenvolvimento Web com Firefox - Clauber Stipkovic Halic
Desenvolvimento Web com Firefox - Clauber Stipkovic HalicDesenvolvimento Web com Firefox - Clauber Stipkovic Halic
Desenvolvimento Web com Firefox - Clauber Stipkovic Halic
 
Navegadores por de baixo dos panos - Ana Luiza Bastos
Navegadores por de baixo dos panos - Ana Luiza BastosNavegadores por de baixo dos panos - Ana Luiza Bastos
Navegadores por de baixo dos panos - Ana Luiza Bastos
 
Manual curso php
Manual curso phpManual curso php
Manual curso php
 

Mais de Felipe Fernandes

Code Club Brasil #2015
Code Club Brasil #2015Code Club Brasil #2015
Code Club Brasil #2015
Felipe Fernandes
 
Code Club Brasil na Campus Party Brasil 8 #cpbr8
Code Club Brasil na Campus Party Brasil 8 #cpbr8 Code Club Brasil na Campus Party Brasil 8 #cpbr8
Code Club Brasil na Campus Party Brasil 8 #cpbr8
Felipe Fernandes
 
Code Club Apresentação 2014
Code Club Apresentação 2014Code Club Apresentação 2014
Code Club Apresentação 2014
Felipe Fernandes
 
Code Club - Aprender a programar pode ser divertido?
Code Club - Aprender a programar pode ser divertido?Code Club - Aprender a programar pode ser divertido?
Code Club - Aprender a programar pode ser divertido?
Felipe Fernandes
 
CodeClub
CodeClubCodeClub
Web Design > Movimentos artisticos
Web Design > Movimentos artisticosWeb Design > Movimentos artisticos
Web Design > Movimentos artisticos
Felipe Fernandes
 
Web Design > Tipografia
Web Design > TipografiaWeb Design > Tipografia
Web Design > Tipografia
Felipe Fernandes
 
Web Design > Cores
Web Design > CoresWeb Design > Cores
Web Design > Cores
Felipe Fernandes
 
Web Design > Formatos de arquivos para web
Web Design > Formatos de arquivos para webWeb Design > Formatos de arquivos para web
Web Design > Formatos de arquivos para web
Felipe Fernandes
 
Web Design > Usabilidade
Web Design > UsabilidadeWeb Design > Usabilidade
Web Design > Usabilidade
Felipe Fernandes
 
Web Design > Gestalt e suas leis
Web Design > Gestalt e suas leisWeb Design > Gestalt e suas leis
Web Design > Gestalt e suas leis
Felipe Fernandes
 
Web Design > Princípios do Design e intro à Gestalt
Web Design > Princípios do Design e intro à GestaltWeb Design > Princípios do Design e intro à Gestalt
Web Design > Princípios do Design e intro à Gestalt
Felipe Fernandes
 

Mais de Felipe Fernandes (12)

Code Club Brasil #2015
Code Club Brasil #2015Code Club Brasil #2015
Code Club Brasil #2015
 
Code Club Brasil na Campus Party Brasil 8 #cpbr8
Code Club Brasil na Campus Party Brasil 8 #cpbr8 Code Club Brasil na Campus Party Brasil 8 #cpbr8
Code Club Brasil na Campus Party Brasil 8 #cpbr8
 
Code Club Apresentação 2014
Code Club Apresentação 2014Code Club Apresentação 2014
Code Club Apresentação 2014
 
Code Club - Aprender a programar pode ser divertido?
Code Club - Aprender a programar pode ser divertido?Code Club - Aprender a programar pode ser divertido?
Code Club - Aprender a programar pode ser divertido?
 
CodeClub
CodeClubCodeClub
CodeClub
 
Web Design > Movimentos artisticos
Web Design > Movimentos artisticosWeb Design > Movimentos artisticos
Web Design > Movimentos artisticos
 
Web Design > Tipografia
Web Design > TipografiaWeb Design > Tipografia
Web Design > Tipografia
 
Web Design > Cores
Web Design > CoresWeb Design > Cores
Web Design > Cores
 
Web Design > Formatos de arquivos para web
Web Design > Formatos de arquivos para webWeb Design > Formatos de arquivos para web
Web Design > Formatos de arquivos para web
 
Web Design > Usabilidade
Web Design > UsabilidadeWeb Design > Usabilidade
Web Design > Usabilidade
 
Web Design > Gestalt e suas leis
Web Design > Gestalt e suas leisWeb Design > Gestalt e suas leis
Web Design > Gestalt e suas leis
 
Web Design > Princípios do Design e intro à Gestalt
Web Design > Princípios do Design e intro à GestaltWeb Design > Princípios do Design e intro à Gestalt
Web Design > Princípios do Design e intro à Gestalt
 

Web Design > HTML (aula 1)

  • 1. Web Design Quando sonhos se tornam realidade...
  • 2. Web Design Após as etapas de briefing, wireframe e layout, chegou a hora de transformar tudo em elementos interativos e interpretados via browser. Para isso, usamos as linguagens de marcação (HTML), de estilização (CSS) e para recursos avançados de lógica (Javascript, CGI e outras).
  • 3. Web Design Estrutura básica de arquivo HTML: <!DOCTYPE html> <html> <head>...</head> <body>...</body> </html>
  • 4. Web Design DOCTYPE É a definição de como o browser (navegador) irá interpretar o documento HTML. A definição de varia de acordo com a versão do HTML. Veja a seguir alguns exemplos...
  • 5. Web Design Exemplos: Versão 4.0 - HTML Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN" "http://www.w3.org/TR/html4/strict. dtd">
  • 6. Web Design Exemplos: Versão 4.0 - HTML Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN" "http://www.w3.org/TR/html4/strict. dtd"> Versão 5.0 - HTML5 <!DOCTYPE html>
  • 7. Web Design Exemplos: Versão 4.0 - HTML Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN" "http://www.w3.org/TR/html4/strict. dtd"> Versão 5.0 - HTML5 <!DOCTYPE html> É o que iremos utilizar ;)
  • 8. Web Design As tags: <html>, <head> e <body> são conhecidas como tags estruturais.
  • 9. Web Design Onde, <html> - define que o arquivo é um documento HTML; <head> - é responsável por descrições, definições e pré-carregamentos (é invisível ao usuário);
  • 10. Web Design e, <body> - é a parte visível a usuário. Leva consigo o conteúdo e todas as demais estruturas do website, além dos recursos interativos.
  • 11. Web Design Mas... Chega e papinho e vamos ao que interessa!
  • 12. Web Design Mas... Chega e papinho e vamos ao que interessa!
  • 16. Web Design: Website pessoal "O" Wireframe
  • 17. Web Design: Website pessoal Deixando mais simples...
  • 18. Web Design: Website pessoal Uma pequena PAUSA para algumas coisas importantes!
  • 19. Web Design: Website pessoal Mais nunca se esqueça! ● Indentação no código; ● Nomes dos arquivos e pastas: sempre minúsculos, sem espaços e/ou acentos;
  • 20. Web Design: Website pessoal E algumas tags... Titulos: <h1> ... <h6> Links: <a> Parágrafos: <p> Imagens: <img /> Quebra de linha: <br /> Listas: <ul>,<li>(não ordenada), <ol>(ordenada)
  • 21. Web Design: Website pessoal Mais algumas tags... Negritos: <strong> Itálicos: <i> Linha horizontal: <hr />
  • 22. Web Design: Website pessoal E mais algumas tags... Definição de blocos: <div> Definição de conteúdo: <span> Comentários: <!-- comentário -->
  • 23. Web Design: Website pessoal Atributos Essenciais Identificador único e exclusivo: id Classe ou classes do elemento: class Atributos de estilo Definição de estilo do elemento: style
  • 24. Web Design: Website pessoal Colocando em prática...