SlideShare uma empresa Scribd logo
LEDS
Laboratório de Extensão em
Desenvolvimento de Sistemas
Ivana Amorim Julião
ivana_juliao@yahoo.com.br
Definição de HTML
● HTML é uma linguagem de marcação, como seu próprio
nome diz (HTML é HyperText Markup Language).
● Foi inventada na época em que os cientistas e militares
estavam começando a trocar informações sobre os
cálculos computacionais.
Definição de HTML
● A linguagem de marcação é um conjunto de regras e
códigos para definir como um conteúdo da web vai ser
definido, como uma página será formatada e exibida.
● Em outras palavras: HTML é importante para tudo, em
termos de criação de sites.
Apresentação HTML e CSS
Sintaxe básica
Principais TAGS
Listas
Listas
Editores e IDEs
● Editores:
● Gedit (www.gnome.org)
● Sublime (http://www.sublimetext.com/)
● Note-pad++(http://notepad-plus-plus.org)
● IDEs (Integrated Development Environment):
● Eclipse (https://eclipse.org/)
● NetBeans (https://netbeans.org/)
● WebStorm (https://www.jetbrains.com/webstorm/)
Definição de CSS
● CSS (Cascade Sheet Style), que nada mais é que uma
série de regras que definem um estilo.
● Ou seja, definimos uma folha de estilos, uma folha com
um conjunto de regras.
Sintaxe e inclusão de CSS
● Atributo Style
● Tag Style
Sintaxe e inclusão de CSS
● Arquivo CSS
● estilos.css
Primeiros passos com CSS
Seletores CSS
● Seletores de Id
● Seletores hierrárquicos
Seletores CSS
● Seletores de atributos de CSS 3
Espaçamento e margens
Novos componentes de HTML 5
Novos componentes de HTML 5
● Elementos de formulários
Novos componentes de HTML 5
● Validações
● Validações de CSS
Interação com serviços web
● Exemplos: YouTube e google maps
Demonstração
● Página completa
Laboratório de Extensão em
Desenvolvimento de Sistemas
http://pt.slideshare.net/ledsifes

Mais conteúdo relacionado

Mais procurados

Html
HtmlHtml
Introdução a programação para a Internet
Introdução a programação para a InternetIntrodução a programação para a Internet
Introdução a programação para a Internet
Leonardo Soares
 
HTML Principios Básicos
HTML Principios BásicosHTML Principios Básicos
HTML Principios Básicos
Mayza de Oliveira
 
Curso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicosCurso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicos
Tiago Antônio da Silva
 
html, css e java script - renato araujo
html, css e java script - renato araujohtml, css e java script - renato araujo
html, css e java script - renato araujo
orenatoaraujo
 
Aula javascript
Aula  javascriptAula  javascript
Aula javascript
Gabriel Moura
 
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estruturaAula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
André Constantino da Silva
 
Introdução ao HTML e CSS
Introdução ao HTML e CSSIntrodução ao HTML e CSS
Introdução ao HTML e CSS
Sérgio Souza Costa
 
Introdução ao desenvolvimento Web
Introdução ao desenvolvimento WebIntrodução ao desenvolvimento Web
Introdução ao desenvolvimento Web
Sérgio Souza Costa
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
Rodrigo Rodrigues
 
Introdução a JavaScript
Introdução a JavaScriptIntrodução a JavaScript
Introdução a JavaScript
Bruno Catão
 
HTML - Aula 01 - Estrutura básica e tags básicas no html
HTML - Aula 01 - Estrutura básica e tags básicas no htmlHTML - Aula 01 - Estrutura básica e tags básicas no html
HTML - Aula 01 - Estrutura básica e tags básicas no html
Tiago Luiz Ribeiro da Silva
 
Aula 02 - Introdução ao PHP
Aula 02 - Introdução ao PHPAula 02 - Introdução ao PHP
Aula 02 - Introdução ao PHP
Daniel Brandão
 
Aula 1. apresentação + frameworks
Aula 1. apresentação + frameworksAula 1. apresentação + frameworks
Aula 1. apresentação + frameworks
andreluizlc
 
HTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdfHTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdf
Cesar Braz
 
Introdução a HTML5
Introdução a HTML5Introdução a HTML5
Introdução a HTML5
Salvador Torres
 
Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScript
Carlos Eduardo Kadu
 
Curso HTML, CSS e JavaScript
Curso HTML, CSS e JavaScriptCurso HTML, CSS e JavaScript
Curso HTML, CSS e JavaScript
Pablo Sanches
 
Introdução ao CSS
Introdução ao CSSIntrodução ao CSS
Introdução ao CSS
Leonardo Soares
 
Aula03 - JavaScript
Aula03 - JavaScriptAula03 - JavaScript
Aula03 - JavaScript
Jorge Ávila Miranda
 

Mais procurados (20)

Html
HtmlHtml
Html
 
Introdução a programação para a Internet
Introdução a programação para a InternetIntrodução a programação para a Internet
Introdução a programação para a Internet
 
HTML Principios Básicos
HTML Principios BásicosHTML Principios Básicos
HTML Principios Básicos
 
Curso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicosCurso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicos
 
html, css e java script - renato araujo
html, css e java script - renato araujohtml, css e java script - renato araujo
html, css e java script - renato araujo
 
Aula javascript
Aula  javascriptAula  javascript
Aula javascript
 
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estruturaAula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
 
Introdução ao HTML e CSS
Introdução ao HTML e CSSIntrodução ao HTML e CSS
Introdução ao HTML e CSS
 
Introdução ao desenvolvimento Web
Introdução ao desenvolvimento WebIntrodução ao desenvolvimento Web
Introdução ao desenvolvimento Web
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
 
Introdução a JavaScript
Introdução a JavaScriptIntrodução a JavaScript
Introdução a JavaScript
 
HTML - Aula 01 - Estrutura básica e tags básicas no html
HTML - Aula 01 - Estrutura básica e tags básicas no htmlHTML - Aula 01 - Estrutura básica e tags básicas no html
HTML - Aula 01 - Estrutura básica e tags básicas no html
 
Aula 02 - Introdução ao PHP
Aula 02 - Introdução ao PHPAula 02 - Introdução ao PHP
Aula 02 - Introdução ao PHP
 
Aula 1. apresentação + frameworks
Aula 1. apresentação + frameworksAula 1. apresentação + frameworks
Aula 1. apresentação + frameworks
 
HTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdfHTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdf
 
Introdução a HTML5
Introdução a HTML5Introdução a HTML5
Introdução a HTML5
 
Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScript
 
Curso HTML, CSS e JavaScript
Curso HTML, CSS e JavaScriptCurso HTML, CSS e JavaScript
Curso HTML, CSS e JavaScript
 
Introdução ao CSS
Introdução ao CSSIntrodução ao CSS
Introdução ao CSS
 
Aula03 - JavaScript
Aula03 - JavaScriptAula03 - JavaScript
Aula03 - JavaScript
 

Destaque

Como Fazer tabelas em HTML
Como Fazer tabelas em HTMLComo Fazer tabelas em HTML
Como Fazer tabelas em HTML
Tales Augusto
 
A verdadeira semântica do HTML
A verdadeira semântica do HTMLA verdadeira semântica do HTML
A verdadeira semântica do HTML
Diego Eis
 
HTML 5, CSS 3 e o futuro da Web
HTML 5, CSS 3 e o futuro da WebHTML 5, CSS 3 e o futuro da Web
HTML 5, CSS 3 e o futuro da Web
Diego Pessoa
 
HTML e CSS
HTML e CSSHTML e CSS
HTML e CSS
Mónica Ferreira
 
Css cascading style sheet
Css cascading style sheetCss cascading style sheet
Css cascading style sheet
Morvana Bonin
 
Parceiro Programador
Parceiro ProgramadorParceiro Programador
Parceiro Programador
Carlos Henrique Muller
 
ebook Solidário Fluência de HTML & CSS
ebook Solidário Fluência de HTML & CSSebook Solidário Fluência de HTML & CSS
ebook Solidário Fluência de HTML & CSS
David Arty
 
CSS NA PRÁTICA
CSS NA PRÁTICACSS NA PRÁTICA
CSS NA PRÁTICA
Renato Melo
 
Curso html
Curso htmlCurso html
Curso html
richard_romancini
 
Construindo layout de sites com CSS
Construindo layout de sites com CSSConstruindo layout de sites com CSS
Construindo layout de sites com CSS
Talita Pagani
 
HTML, CSS & Style Guides
HTML, CSS & Style GuidesHTML, CSS & Style Guides
HTML, CSS & Style Guides
Bruno Trecenti
 
HTML/CSS Patterns
HTML/CSS PatternsHTML/CSS Patterns
HTML/CSS Patterns
Leonardo Quixada
 
HTML/HTML5
HTML/HTML5HTML/HTML5
HTML/HTML5
People Strategists
 
Aula Hipertexto
Aula HipertextoAula Hipertexto
Aula Hipertexto
lutimielniczuk
 
Web semântica: em busca da web inteligente
Web semântica: em busca da web inteligenteWeb semântica: em busca da web inteligente
Web semântica: em busca da web inteligente
Naira Michelle Alves Pereira
 
Re architecting web based publishing and subscriptions application
Re architecting web based publishing and subscriptions applicationRe architecting web based publishing and subscriptions application
Re architecting web based publishing and subscriptions application
Diaspark
 
Acessibilidade
AcessibilidadeAcessibilidade
Acessibilidade
Know Solutions
 
Pdf Campus Party 2010
Pdf   Campus Party 2010Pdf   Campus Party 2010
Pdf Campus Party 2010
Campus Party Brasil
 
Apresentação sobre web semântica
Apresentação sobre web semânticaApresentação sobre web semântica
Apresentação sobre web semântica
samuelfructuoso
 
Po planificación y organizacion walter mancheno
Po planificación y organizacion walter manchenoPo planificación y organizacion walter mancheno
Po planificación y organizacion walter mancheno
waltermancheno66
 

Destaque (20)

Como Fazer tabelas em HTML
Como Fazer tabelas em HTMLComo Fazer tabelas em HTML
Como Fazer tabelas em HTML
 
A verdadeira semântica do HTML
A verdadeira semântica do HTMLA verdadeira semântica do HTML
A verdadeira semântica do HTML
 
HTML 5, CSS 3 e o futuro da Web
HTML 5, CSS 3 e o futuro da WebHTML 5, CSS 3 e o futuro da Web
HTML 5, CSS 3 e o futuro da Web
 
HTML e CSS
HTML e CSSHTML e CSS
HTML e CSS
 
Css cascading style sheet
Css cascading style sheetCss cascading style sheet
Css cascading style sheet
 
Parceiro Programador
Parceiro ProgramadorParceiro Programador
Parceiro Programador
 
ebook Solidário Fluência de HTML & CSS
ebook Solidário Fluência de HTML & CSSebook Solidário Fluência de HTML & CSS
ebook Solidário Fluência de HTML & CSS
 
CSS NA PRÁTICA
CSS NA PRÁTICACSS NA PRÁTICA
CSS NA PRÁTICA
 
Curso html
Curso htmlCurso html
Curso html
 
Construindo layout de sites com CSS
Construindo layout de sites com CSSConstruindo layout de sites com CSS
Construindo layout de sites com CSS
 
HTML, CSS & Style Guides
HTML, CSS & Style GuidesHTML, CSS & Style Guides
HTML, CSS & Style Guides
 
HTML/CSS Patterns
HTML/CSS PatternsHTML/CSS Patterns
HTML/CSS Patterns
 
HTML/HTML5
HTML/HTML5HTML/HTML5
HTML/HTML5
 
Aula Hipertexto
Aula HipertextoAula Hipertexto
Aula Hipertexto
 
Web semântica: em busca da web inteligente
Web semântica: em busca da web inteligenteWeb semântica: em busca da web inteligente
Web semântica: em busca da web inteligente
 
Re architecting web based publishing and subscriptions application
Re architecting web based publishing and subscriptions applicationRe architecting web based publishing and subscriptions application
Re architecting web based publishing and subscriptions application
 
Acessibilidade
AcessibilidadeAcessibilidade
Acessibilidade
 
Pdf Campus Party 2010
Pdf   Campus Party 2010Pdf   Campus Party 2010
Pdf Campus Party 2010
 
Apresentação sobre web semântica
Apresentação sobre web semânticaApresentação sobre web semântica
Apresentação sobre web semântica
 
Po planificación y organizacion walter mancheno
Po planificación y organizacion walter manchenoPo planificación y organizacion walter mancheno
Po planificación y organizacion walter mancheno
 

Semelhante a Apresentação HTML e CSS

Visao geralti netshoes04
Visao geralti netshoes04Visao geralti netshoes04
Visao geralti netshoes04
Alexandre Uehara
 
Visao geralti netshoes04
Visao geralti netshoes04Visao geralti netshoes04
Visao geralti netshoes04
Ale Uehara
 
Html E Websemantica Trabalho
Html E Websemantica TrabalhoHtml E Websemantica Trabalho
Html E Websemantica Trabalho
Adagenor Ribeiro
 
HTML HardCore Parte 1 - Conceitos
HTML HardCore Parte 1 - ConceitosHTML HardCore Parte 1 - Conceitos
HTML HardCore Parte 1 - Conceitos
George Mendonça
 
Slides Linguagem de Programação HTML e CSS
Slides Linguagem de Programação HTML e CSSSlides Linguagem de Programação HTML e CSS
Slides Linguagem de Programação HTML e CSS
fernandamota929941
 
Html apresentação
Html apresentaçãoHtml apresentação
Html apresentação
Douglas Pereira
 
HTML Básico - Programador web
HTML Básico - Programador webHTML Básico - Programador web
HTML Básico - Programador web
Wanderlei Silva do Carmo
 
ebook-material-didatico-sistemas-para-internet.pdf
ebook-material-didatico-sistemas-para-internet.pdfebook-material-didatico-sistemas-para-internet.pdf
ebook-material-didatico-sistemas-para-internet.pdf
RMartinxxx
 
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
 
Visao geralti netshoes01
Visao geralti netshoes01Visao geralti netshoes01
Visao geralti netshoes01
Alexandre Uehara
 
Visao geralti netshoes01
Visao geralti netshoes01Visao geralti netshoes01
Visao geralti netshoes01
Ale Uehara
 
Introdução à Web
Introdução à WebIntrodução à Web
Introdução à Web
Daniel Brandão
 
0. Introdução ao HTML pptx.pdf
0. Introdução ao HTML pptx.pdf0. Introdução ao HTML pptx.pdf
0. Introdução ao HTML pptx.pdf
RubenManhia
 
Web development - Como criar a web
Web development  - Como criar a webWeb development  - Como criar a web
Web development - Como criar a web
Herson Leite
 
a01_aw_2122_revisoesHTML.pptx
a01_aw_2122_revisoesHTML.pptxa01_aw_2122_revisoesHTML.pptx
a01_aw_2122_revisoesHTML.pptx
DavidOliveira177963
 
Aula 02
Aula 02Aula 02
Aula 02 e 03 estrutura básica parte 01 e 02
Aula 02 e 03 estrutura básica parte 01 e 02Aula 02 e 03 estrutura básica parte 01 e 02
Aula 02 e 03 estrutura básica parte 01 e 02
Jolvani Morgan
 
Benefícios dos WebStandards
Benefícios dos WebStandardsBenefícios dos WebStandards
Benefícios dos WebStandards
Náiron Jcg
 
AULA 01 - Conceitos de HTML.pptx
AULA 01 - Conceitos de HTML.pptxAULA 01 - Conceitos de HTML.pptx
AULA 01 - Conceitos de HTML.pptx
JEANCLEVERSONPRATAS
 
Disciplina de Laboratório WEB
Disciplina de Laboratório WEBDisciplina de Laboratório WEB
Disciplina de Laboratório WEB
Franciosney Souza
 

Semelhante a Apresentação HTML e CSS (20)

Visao geralti netshoes04
Visao geralti netshoes04Visao geralti netshoes04
Visao geralti netshoes04
 
Visao geralti netshoes04
Visao geralti netshoes04Visao geralti netshoes04
Visao geralti netshoes04
 
Html E Websemantica Trabalho
Html E Websemantica TrabalhoHtml E Websemantica Trabalho
Html E Websemantica Trabalho
 
HTML HardCore Parte 1 - Conceitos
HTML HardCore Parte 1 - ConceitosHTML HardCore Parte 1 - Conceitos
HTML HardCore Parte 1 - Conceitos
 
Slides Linguagem de Programação HTML e CSS
Slides Linguagem de Programação HTML e CSSSlides Linguagem de Programação HTML e CSS
Slides Linguagem de Programação HTML e CSS
 
Html apresentação
Html apresentaçãoHtml apresentação
Html apresentação
 
HTML Básico - Programador web
HTML Básico - Programador webHTML Básico - Programador web
HTML Básico - Programador web
 
ebook-material-didatico-sistemas-para-internet.pdf
ebook-material-didatico-sistemas-para-internet.pdfebook-material-didatico-sistemas-para-internet.pdf
ebook-material-didatico-sistemas-para-internet.pdf
 
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
 
Visao geralti netshoes01
Visao geralti netshoes01Visao geralti netshoes01
Visao geralti netshoes01
 
Visao geralti netshoes01
Visao geralti netshoes01Visao geralti netshoes01
Visao geralti netshoes01
 
Introdução à Web
Introdução à WebIntrodução à Web
Introdução à Web
 
0. Introdução ao HTML pptx.pdf
0. Introdução ao HTML pptx.pdf0. Introdução ao HTML pptx.pdf
0. Introdução ao HTML pptx.pdf
 
Web development - Como criar a web
Web development  - Como criar a webWeb development  - Como criar a web
Web development - Como criar a web
 
a01_aw_2122_revisoesHTML.pptx
a01_aw_2122_revisoesHTML.pptxa01_aw_2122_revisoesHTML.pptx
a01_aw_2122_revisoesHTML.pptx
 
Aula 02
Aula 02Aula 02
Aula 02
 
Aula 02 e 03 estrutura básica parte 01 e 02
Aula 02 e 03 estrutura básica parte 01 e 02Aula 02 e 03 estrutura básica parte 01 e 02
Aula 02 e 03 estrutura básica parte 01 e 02
 
Benefícios dos WebStandards
Benefícios dos WebStandardsBenefícios dos WebStandards
Benefícios dos WebStandards
 
AULA 01 - Conceitos de HTML.pptx
AULA 01 - Conceitos de HTML.pptxAULA 01 - Conceitos de HTML.pptx
AULA 01 - Conceitos de HTML.pptx
 
Disciplina de Laboratório WEB
Disciplina de Laboratório WEBDisciplina de Laboratório WEB
Disciplina de Laboratório WEB
 

Mais de ledsifes

Sincap um exemplo prático de colaboração entre Academia e Sociedade
Sincap um exemplo prático de colaboração entre Academia e SociedadeSincap um exemplo prático de colaboração entre Academia e Sociedade
Sincap um exemplo prático de colaboração entre Academia e Sociedade
ledsifes
 
Spring roo - Criando aplicações Java Web em poucos minutos
Spring roo - Criando aplicações Java Web em poucos minutosSpring roo - Criando aplicações Java Web em poucos minutos
Spring roo - Criando aplicações Java Web em poucos minutos
ledsifes
 
Leds zeppellin infraestrutura de apoio ao desenvolvimento
Leds zeppellin   infraestrutura de apoio ao desenvolvimentoLeds zeppellin   infraestrutura de apoio ao desenvolvimento
Leds zeppellin infraestrutura de apoio ao desenvolvimento
ledsifes
 
Introdução à SQL Injection
Introdução à SQL InjectionIntrodução à SQL Injection
Introdução à SQL Injection
ledsifes
 
Palestra de PHP
Palestra de PHPPalestra de PHP
Palestra de PHP
ledsifes
 
Introdução ao Android
Introdução ao AndroidIntrodução ao Android
Introdução ao Android
ledsifes
 
Introdução a Python e Django
Introdução a Python e DjangoIntrodução a Python e Django
Introdução a Python e Django
ledsifes
 
Introdução à Servlets e JSP
Introdução à Servlets e JSPIntrodução à Servlets e JSP
Introdução à Servlets e JSP
ledsifes
 

Mais de ledsifes (8)

Sincap um exemplo prático de colaboração entre Academia e Sociedade
Sincap um exemplo prático de colaboração entre Academia e SociedadeSincap um exemplo prático de colaboração entre Academia e Sociedade
Sincap um exemplo prático de colaboração entre Academia e Sociedade
 
Spring roo - Criando aplicações Java Web em poucos minutos
Spring roo - Criando aplicações Java Web em poucos minutosSpring roo - Criando aplicações Java Web em poucos minutos
Spring roo - Criando aplicações Java Web em poucos minutos
 
Leds zeppellin infraestrutura de apoio ao desenvolvimento
Leds zeppellin   infraestrutura de apoio ao desenvolvimentoLeds zeppellin   infraestrutura de apoio ao desenvolvimento
Leds zeppellin infraestrutura de apoio ao desenvolvimento
 
Introdução à SQL Injection
Introdução à SQL InjectionIntrodução à SQL Injection
Introdução à SQL Injection
 
Palestra de PHP
Palestra de PHPPalestra de PHP
Palestra de PHP
 
Introdução ao Android
Introdução ao AndroidIntrodução ao Android
Introdução ao Android
 
Introdução a Python e Django
Introdução a Python e DjangoIntrodução a Python e Django
Introdução a Python e Django
 
Introdução à Servlets e JSP
Introdução à Servlets e JSPIntrodução à Servlets e JSP
Introdução à Servlets e JSP
 

Apresentação HTML e CSS