SlideShare uma empresa Scribd logo
Introdução ao Desenvolvimento Web 
Layouts 
Prof. Mauro Duarte
Layouts 
● A principal tag para criação de layouts e a tag 
<div>. 
● Cria divisões para organizar o seu site. 
● <div id="topo"> </div> 
● <div id="corpo"> </div> 
02/09/14
Construção de Layouts 
02/09/14
Construção de Layouts 
● Primeiro Passo: 
– Marcação 
02/09/14
Construção de Layouts 
● Segundo Passo: 
– Design 
02/09/14
Construção de Layouts HTML5 
02/09/14
Construção de Layouts HTML5 
02/09/14

Mais conteúdo relacionado

Mais procurados

Programação Blogcamp PR 2008
Programação Blogcamp PR 2008Programação Blogcamp PR 2008
Programação Blogcamp PR 2008
Fillipe Neyl
 
O que é SlideShare
O que é SlideShareO que é SlideShare
O que é SlideShare
ceschin
 
Violando convenções da web
Violando convenções da webViolando convenções da web
Violando convenções da web
Adilmar Dantas
 
SemináRi Oblog
SemináRi OblogSemináRi Oblog
SemináRi Oblog
guestc0485b
 
Responsive Design - Introdução
Responsive Design - IntroduçãoResponsive Design - Introdução
Responsive Design - Introdução
Marcos César
 
Unidade 7
Unidade 7Unidade 7
Unidade 7
maglomaria
 
Google docs cristinacoelho
Google docs cristinacoelhoGoogle docs cristinacoelho
Google docs cristinacoelho
cristinamlcoelho
 
Responsive design
Responsive designResponsive design
Responsive design
Guilherme Serrano
 
HTML5 e CSS3 – rápido e eficaz para o presente
HTML5 e CSS3 – rápido e eficaz para o presenteHTML5 e CSS3 – rápido e eficaz para o presente
HTML5 e CSS3 – rápido e eficaz para o presente
pt_programar
 
Joomla daydf construindo um templare 2.0
Joomla daydf   construindo um templare 2.0Joomla daydf   construindo um templare 2.0
Joomla daydf construindo um templare 2.0
Raphael França
 
Ambiente web aula 11
Ambiente web   aula 11Ambiente web   aula 11
Ambiente web aula 11
Fernando Vieira
 
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
 
Web Design > Visão geral do Web Design
Web Design > Visão geral do Web DesignWeb Design > Visão geral do Web Design
Web Design > Visão geral do Web Design
Felipe Fernandes
 
Dicas para seu próximo site
Dicas para seu próximo siteDicas para seu próximo site
Dicas para seu próximo site
Escola do Marketing Digital
 
Unidade 7 slides digital na escola
Unidade 7 slides digital na escolaUnidade 7 slides digital na escola
Unidade 7 slides digital na escola
Luana Maria Ferreira Fernandes
 
Ambiente web aula 12
Ambiente web   aula 12Ambiente web   aula 12
Ambiente web aula 12
Fernando Vieira
 
Planejamento de Projeto
Planejamento de ProjetoPlanejamento de Projeto
Planejamento de Projeto
Robson Silva Espig
 
Atividade1 8bethania
Atividade1 8bethaniaAtividade1 8bethania
Atividade1 8bethania
Maria Bethania Borges Costa
 

Mais procurados (18)

Programação Blogcamp PR 2008
Programação Blogcamp PR 2008Programação Blogcamp PR 2008
Programação Blogcamp PR 2008
 
O que é SlideShare
O que é SlideShareO que é SlideShare
O que é SlideShare
 
Violando convenções da web
Violando convenções da webViolando convenções da web
Violando convenções da web
 
SemináRi Oblog
SemináRi OblogSemináRi Oblog
SemináRi Oblog
 
Responsive Design - Introdução
Responsive Design - IntroduçãoResponsive Design - Introdução
Responsive Design - Introdução
 
Unidade 7
Unidade 7Unidade 7
Unidade 7
 
Google docs cristinacoelho
Google docs cristinacoelhoGoogle docs cristinacoelho
Google docs cristinacoelho
 
Responsive design
Responsive designResponsive design
Responsive design
 
HTML5 e CSS3 – rápido e eficaz para o presente
HTML5 e CSS3 – rápido e eficaz para o presenteHTML5 e CSS3 – rápido e eficaz para o presente
HTML5 e CSS3 – rápido e eficaz para o presente
 
Joomla daydf construindo um templare 2.0
Joomla daydf   construindo um templare 2.0Joomla daydf   construindo um templare 2.0
Joomla daydf construindo um templare 2.0
 
Ambiente web aula 11
Ambiente web   aula 11Ambiente web   aula 11
Ambiente web aula 11
 
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
 
Web Design > Visão geral do Web Design
Web Design > Visão geral do Web DesignWeb Design > Visão geral do Web Design
Web Design > Visão geral do Web Design
 
Dicas para seu próximo site
Dicas para seu próximo siteDicas para seu próximo site
Dicas para seu próximo site
 
Unidade 7 slides digital na escola
Unidade 7 slides digital na escolaUnidade 7 slides digital na escola
Unidade 7 slides digital na escola
 
Ambiente web aula 12
Ambiente web   aula 12Ambiente web   aula 12
Ambiente web aula 12
 
Planejamento de Projeto
Planejamento de ProjetoPlanejamento de Projeto
Planejamento de Projeto
 
Atividade1 8bethania
Atividade1 8bethaniaAtividade1 8bethania
Atividade1 8bethania
 

Destaque

6 link tag aa
6   link tag aa6   link tag aa
6 link tag aa
Mauro Duarte
 
5 - Introdução ao Desenvolvimento Web - Formulários (pt 2)
5 - Introdução ao Desenvolvimento Web - Formulários (pt 2)5 - Introdução ao Desenvolvimento Web - Formulários (pt 2)
5 - Introdução ao Desenvolvimento Web - Formulários (pt 2)
Mauro Duarte
 
0 Introdução ao Desenvolvimento Web - Apresentação
0   Introdução ao Desenvolvimento Web - Apresentação0   Introdução ao Desenvolvimento Web - Apresentação
0 Introdução ao Desenvolvimento Web - Apresentação
Mauro Duarte
 
6 link tag a
6   link tag a6   link tag a
6 link tag a
Mauro Duarte
 
4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)
4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)
4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)
Mauro Duarte
 
7 - Introdução ao desenvolvimento web - mídias
7 - Introdução ao desenvolvimento web - mídias7 - Introdução ao desenvolvimento web - mídias
7 - Introdução ao desenvolvimento web - mídias
Mauro Duarte
 
Requsitos
RequsitosRequsitos
Requsitos
Mauro Duarte
 
0 apresentação de introdução web
0   apresentação de introdução web 0   apresentação de introdução web
0 apresentação de introdução web
Mauro Duarte
 
Web form
Web formWeb form

Destaque (9)

6 link tag aa
6   link tag aa6   link tag aa
6 link tag aa
 
5 - Introdução ao Desenvolvimento Web - Formulários (pt 2)
5 - Introdução ao Desenvolvimento Web - Formulários (pt 2)5 - Introdução ao Desenvolvimento Web - Formulários (pt 2)
5 - Introdução ao Desenvolvimento Web - Formulários (pt 2)
 
0 Introdução ao Desenvolvimento Web - Apresentação
0   Introdução ao Desenvolvimento Web - Apresentação0   Introdução ao Desenvolvimento Web - Apresentação
0 Introdução ao Desenvolvimento Web - Apresentação
 
6 link tag a
6   link tag a6   link tag a
6 link tag a
 
4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)
4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)
4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)
 
7 - Introdução ao desenvolvimento web - mídias
7 - Introdução ao desenvolvimento web - mídias7 - Introdução ao desenvolvimento web - mídias
7 - Introdução ao desenvolvimento web - mídias
 
Requsitos
RequsitosRequsitos
Requsitos
 
0 apresentação de introdução web
0   apresentação de introdução web 0   apresentação de introdução web
0 apresentação de introdução web
 
Web form
Web formWeb form
Web form
 

Mais de Mauro Duarte

CSS - Folhas de Estilo em Cascata
CSS - Folhas de Estilo em Cascata CSS - Folhas de Estilo em Cascata
CSS - Folhas de Estilo em Cascata
Mauro Duarte
 
Os pássaros
Os pássarosOs pássaros
Os pássaros
Mauro Duarte
 
01 Desenvolvimento em Redes de Computadores - Comandos Básicos
01   Desenvolvimento em Redes de Computadores - Comandos Básicos01   Desenvolvimento em Redes de Computadores - Comandos Básicos
01 Desenvolvimento em Redes de Computadores - Comandos Básicos
Mauro Duarte
 
00 apresentação desenvolvimento em redes de computadores
00   apresentação desenvolvimento em redes de computadores00   apresentação desenvolvimento em redes de computadores
00 apresentação desenvolvimento em redes de computadores
Mauro Duarte
 
Porque tanta pressa - Caril Borges
Porque tanta pressa - Caril BorgesPorque tanta pressa - Caril Borges
Porque tanta pressa - Caril Borges
Mauro Duarte
 
Perdoando como José perdoou - Caril Borges
Perdoando como José perdoou - Caril BorgesPerdoando como José perdoou - Caril Borges
Perdoando como José perdoou - Caril Borges
Mauro Duarte
 
Otimistas ou pessimistas - Caril Borges
Otimistas ou pessimistas - Caril BorgesOtimistas ou pessimistas - Caril Borges
Otimistas ou pessimistas - Caril Borges
Mauro Duarte
 
Nos importando com o próximo
Nos importando com o próximoNos importando com o próximo
Nos importando com o próximo
Mauro Duarte
 
Noé não deu desculpas para nao servir a deus
Noé não deu desculpas para nao servir a deusNoé não deu desculpas para nao servir a deus
Noé não deu desculpas para nao servir a deus
Mauro Duarte
 
Construindo muros ou pontes
Construindo muros ou pontesConstruindo muros ou pontes
Construindo muros ou pontes
Mauro Duarte
 
A tragédia que virou triunfo
A tragédia que virou triunfoA tragédia que virou triunfo
A tragédia que virou triunfo
Mauro Duarte
 
Atitudes para os problemas de 2015 - Caril Borges
Atitudes para os problemas de 2015  - Caril BorgesAtitudes para os problemas de 2015  - Caril Borges
Atitudes para os problemas de 2015 - Caril Borges
Mauro Duarte
 
As armadilhas de satanás - Caril Borges
As armadilhas de satanás - Caril BorgesAs armadilhas de satanás - Caril Borges
As armadilhas de satanás - Caril Borges
Mauro Duarte
 
Otimizando a Produção de WebSites com Joomla
Otimizando a Produção de WebSites com JoomlaOtimizando a Produção de WebSites com Joomla
Otimizando a Produção de WebSites com Joomla
Mauro Duarte
 
Ataques de Dicionário com CUPP
Ataques de Dicionário com CUPPAtaques de Dicionário com CUPP
Ataques de Dicionário com CUPP
Mauro Duarte
 
Automação de Testes Selenium IDE
Automação de Testes Selenium IDEAutomação de Testes Selenium IDE
Automação de Testes Selenium IDE
Mauro Duarte
 
História Logo Flisol
História Logo Flisol História Logo Flisol
História Logo Flisol
Mauro Duarte
 
Web Design Hacker
Web Design HackerWeb Design Hacker
Web Design Hacker
Mauro Duarte
 
03 Sistemas Operacionais Linux
03   Sistemas Operacionais Linux03   Sistemas Operacionais Linux
03 Sistemas Operacionais Linux
Mauro Duarte
 
Aula 02 - Sistemas Operacionais - Microsoft
Aula 02 - Sistemas Operacionais - MicrosoftAula 02 - Sistemas Operacionais - Microsoft
Aula 02 - Sistemas Operacionais - Microsoft
Mauro Duarte
 

Mais de Mauro Duarte (20)

CSS - Folhas de Estilo em Cascata
CSS - Folhas de Estilo em Cascata CSS - Folhas de Estilo em Cascata
CSS - Folhas de Estilo em Cascata
 
Os pássaros
Os pássarosOs pássaros
Os pássaros
 
01 Desenvolvimento em Redes de Computadores - Comandos Básicos
01   Desenvolvimento em Redes de Computadores - Comandos Básicos01   Desenvolvimento em Redes de Computadores - Comandos Básicos
01 Desenvolvimento em Redes de Computadores - Comandos Básicos
 
00 apresentação desenvolvimento em redes de computadores
00   apresentação desenvolvimento em redes de computadores00   apresentação desenvolvimento em redes de computadores
00 apresentação desenvolvimento em redes de computadores
 
Porque tanta pressa - Caril Borges
Porque tanta pressa - Caril BorgesPorque tanta pressa - Caril Borges
Porque tanta pressa - Caril Borges
 
Perdoando como José perdoou - Caril Borges
Perdoando como José perdoou - Caril BorgesPerdoando como José perdoou - Caril Borges
Perdoando como José perdoou - Caril Borges
 
Otimistas ou pessimistas - Caril Borges
Otimistas ou pessimistas - Caril BorgesOtimistas ou pessimistas - Caril Borges
Otimistas ou pessimistas - Caril Borges
 
Nos importando com o próximo
Nos importando com o próximoNos importando com o próximo
Nos importando com o próximo
 
Noé não deu desculpas para nao servir a deus
Noé não deu desculpas para nao servir a deusNoé não deu desculpas para nao servir a deus
Noé não deu desculpas para nao servir a deus
 
Construindo muros ou pontes
Construindo muros ou pontesConstruindo muros ou pontes
Construindo muros ou pontes
 
A tragédia que virou triunfo
A tragédia que virou triunfoA tragédia que virou triunfo
A tragédia que virou triunfo
 
Atitudes para os problemas de 2015 - Caril Borges
Atitudes para os problemas de 2015  - Caril BorgesAtitudes para os problemas de 2015  - Caril Borges
Atitudes para os problemas de 2015 - Caril Borges
 
As armadilhas de satanás - Caril Borges
As armadilhas de satanás - Caril BorgesAs armadilhas de satanás - Caril Borges
As armadilhas de satanás - Caril Borges
 
Otimizando a Produção de WebSites com Joomla
Otimizando a Produção de WebSites com JoomlaOtimizando a Produção de WebSites com Joomla
Otimizando a Produção de WebSites com Joomla
 
Ataques de Dicionário com CUPP
Ataques de Dicionário com CUPPAtaques de Dicionário com CUPP
Ataques de Dicionário com CUPP
 
Automação de Testes Selenium IDE
Automação de Testes Selenium IDEAutomação de Testes Selenium IDE
Automação de Testes Selenium IDE
 
História Logo Flisol
História Logo Flisol História Logo Flisol
História Logo Flisol
 
Web Design Hacker
Web Design HackerWeb Design Hacker
Web Design Hacker
 
03 Sistemas Operacionais Linux
03   Sistemas Operacionais Linux03   Sistemas Operacionais Linux
03 Sistemas Operacionais Linux
 
Aula 02 - Sistemas Operacionais - Microsoft
Aula 02 - Sistemas Operacionais - MicrosoftAula 02 - Sistemas Operacionais - Microsoft
Aula 02 - Sistemas Operacionais - Microsoft
 

Último

Subindo uma aplicação WordPress em docker na AWS
Subindo uma aplicação WordPress em docker na AWSSubindo uma aplicação WordPress em docker na AWS
Subindo uma aplicação WordPress em docker na AWS
Ismael Ash
 
ExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negócios
ExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negóciosExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negócios
ExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negócios
ExpoGestão
 
ExpoGestão 2024 - Desvendando um mundo em ebulição
ExpoGestão 2024 - Desvendando um mundo em ebuliçãoExpoGestão 2024 - Desvendando um mundo em ebulição
ExpoGestão 2024 - Desvendando um mundo em ebulição
ExpoGestão
 
Ferramentas que irão te ajudar a entrar no mundo de DevOps/CLoud
Ferramentas que irão te ajudar a entrar no mundo de   DevOps/CLoudFerramentas que irão te ajudar a entrar no mundo de   DevOps/CLoud
Ferramentas que irão te ajudar a entrar no mundo de DevOps/CLoud
Ismael Ash
 
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
Faga1939
 
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docxse38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
ronaldos10
 

Último (6)

Subindo uma aplicação WordPress em docker na AWS
Subindo uma aplicação WordPress em docker na AWSSubindo uma aplicação WordPress em docker na AWS
Subindo uma aplicação WordPress em docker na AWS
 
ExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negócios
ExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negóciosExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negócios
ExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negócios
 
ExpoGestão 2024 - Desvendando um mundo em ebulição
ExpoGestão 2024 - Desvendando um mundo em ebuliçãoExpoGestão 2024 - Desvendando um mundo em ebulição
ExpoGestão 2024 - Desvendando um mundo em ebulição
 
Ferramentas que irão te ajudar a entrar no mundo de DevOps/CLoud
Ferramentas que irão te ajudar a entrar no mundo de   DevOps/CLoudFerramentas que irão te ajudar a entrar no mundo de   DevOps/CLoud
Ferramentas que irão te ajudar a entrar no mundo de DevOps/CLoud
 
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
 
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docxse38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
 

8 layout