Introdução a desenvolvimento web

Introdução a
Desenvolvimento Web
Iago Effting iago.effting@gmail.com

O que é?
Linguagem de Marcação

O que é?
Para que serve?

O que é?
Para que serve?
Desenvolver página Web

O que é?
Para que serve?
Recomendações

O que é?
Para que serve?
W3Schools
http://goo.gl/9Z751Y
Recomendações

O que é?
Folha de Estilo Cascata

O que é?
Para que serve?

O que é?
Para que serve?
Deixar as coisas “Legais”

O que é?
Para que serve?
Recomendações
Deixar as coisas “Legais”

O que é?
Para que serve?
Maujor
http://goo.gl/9Z751Y
W3Schools
http://goo.gl/lxH1lg
Recomendações
Deixar as coisas “Marotas”

HTML + CSS
Criando uma página HTML
<!DOCTYPE html>
<html>
</html>
SaídaIndex.html

HTML + CSS
Adicionando um Titulo
<!DOCTYPE html>
<html>
<head>
<title>Site 01</title>
</head>
</html>
SaídaIndex.html

HTML + CSS
Criando Corpo <body>*
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
SaídaIndex.html

*O que é <body>?
É o corpo do documento onde
todo o conteúdo HTML deve ficar:
• Textos;
• Hipertextos;
• Imagens;
• Formulário;

HTML + CSS
Escrevendo no Corpo
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Cabeçalho</h1>
<p>Istó é um
parágrafo</p>
</body>
SaídaIndex.html

HTML + CSS
Alterando cor da tag <h1>
…
<body>
<h1 style=“color:
#F00F00”>
Cabeçalho
</h1>
<p>Istó é um
parágrafo</p>
</body>
…
SaídaIndex.html

*O que é style?
O atributo style é usado para
definir informações de estilo para
um elemento. Alguns deles são:
• color: ;
• background-color: ;
• font-size: ;

*O que é style?
O atributo style é usado para
definir informações de estilo para
um elemento. Alguns deles são:
• color: ;
• background-color: ;
• font-size: ;
Observação: Attr style Funciona apenas no próprio elemento atribuído

HTML + CSS
Separando CSS do HTML
…
<head>
<style>
</style>
</head>
…
SaídaIndex.html

HTML + CSS
Separando CSS do HTML
…
<style>
h1{color: #F00F00”; }
</style>
…
<h1>Cabeçalho</h1>
<p>Istó é um
parágrafo</p>
…
SaídaIndex.html

*Padrão de definição
O padrões para manipular
elementos CSS dentro das tags
<style></style> é o seguinte:
elemento {propriedade: valor; }
p{ color: #F00; font-size: 12px}

*Padrão de definição
O padrões para manipular
elementos CSS dentro das tags
<style></style> é o seguinte:
elemento {propriedade: valor; }
p{ color: #F00; font-size: 12px}
Obs.: Pode ser colocado mais de uma propriedade, separando por ponto e virgula (;)

HTML + CSS
Atribuindo Identificador
…
<h1 id=“titulo”>
Cabeçalho
</h1>
<p>Istó é um
parágrafo</p>
…
SaídaIndex.html

*O que é id?
O atributo id especifica um id único
para um elemento HTML:
<p id=“paragrafo”></p>
<a id=“link”></a>

*O que é id?
O atributo id especifica um id único
para um elemento HTML:
<p id=“paragrafo”></p>
<a id=“link”></a>
Obs.: O valor deve ser exclusivo dentro do documento HTML

HTML + CSS
<style>
h1#titulo{color:
#F00F00”; }
</style>
…
Cabeçalho
</h1>
<h1>Outro
Cabeçalho</h1>
SaídaIndex.html

HTML + CSS
<style>
h1#titulo{color:
#F00F00”; }
</style>
…
Cabeçalho
</h1>
<h1>Outro
Cabeçalho</h1>
Saída
Obs.: Apenas um elemento h1 está com id Titulo
Index.html

*O que é o símbolo #
Usado para selecionar um
elemento com um id especifico,
como por exemplo:
elemento#nome_id {prop: valor; }
h1#titulo{color: #F00; font-size:
12px}
Obs.: Um id deve referenciar apenas um elemento, caso precise de um conjunto, use

HTML + CSS
Criar grupo de elementos
…
<p class=“claro”>texto
1</p>
<p class=“escuro”>texto
2</p>
<p class=“claro”>texto
3</p>
4</p>
…
SaídaIndex.html

*O que é o atributo class?
O atributo class especifica um
grupo de um elemento HTML, não
existe limite de um conjunto de
classes:
<a class=“menu”> Link 1</a>
<a class=“menu”> Link 2</a>
...
<a class=“menu”> Link N</a>
Obs.: O valor deve ser exclusivo dentro do documento HTML

HTML + CSS
Criar grupo de elementos
…
<style>
p.claro{background:
#F6F6F6;}
p.escuro{background:
#333;}
</style>
…
<p class=“claro”>texto 1</p>
SaídaIndex.html

*O que é o símbolo .
Usado para selecionar um
elemento com uma classe
especifica, como por exemplo:
/* Fica em negrito quem estiver
com a classe negrito e ser um p
*/
p.negrito{ font-weight: bold}

HTML + CSS
Resetar Espaços Padrões
…
<style>
*{ margin: 0; padding: 0}
p.claro{background:
#F6F6F6;}
p.escuro{background:
#333;}
</style>
…
SaídaIndex.html

HTML + CSS
Criar um arquivo CSS
…
<head>
…
<link rel=“stylesheet”
type=“text/css”
href=“estilo.css”>
…
</head>
…
SaídaIndex.html estilo.css

HTML + CSS
Inserir Dados no estilo.css
*{ margin: 0; padding: 0; }
p.Claro { background:
#F6F6F6; }
p.escuro{ background:
#333; }

*Arquivos .css
São arquivos de estilo. Ele não
deve ter a tag style, pois ele já o
interpreta. Você deve apenas
inserir os elementos e suas
propriedades:
p { color: #000; font-size: 12px;}
h1#titulo{ text-decorator:
underline;}

HTML + CSS
Acentuação
…
<head>
…
<meta charset=“utf-8”>
…
</head>
…

Navegadores
Cada navegador tem sua configuração,
por isso teste seu código em cada um
(ou pelo menos nos mais utilizados)

Bônus HTML!
Lista de Tags
http://goo.gl/HRTcFF
Lista de Atributos
http://goo.gl/qkzLQG

Bônus CSS!
Maujor
http://maujor.com
CSS desde o início (Maujor)
http://goo.gl/EaSroL
Técnicas de Acessibilidade
(Maujor)
http://goo.gl/ZCfmNb

Código Fonte
Iago Effting iago.effting@gmail.com
https://gist.github.com/iagoEffting/4148
9bb8cbd6b5db9825

Introdução a desenvolvimento web

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (15)

Ähnlich wie Introdução a desenvolvimento web

Ähnlich wie Introdução a desenvolvimento web (20)

Introdução a desenvolvimento web