View
128
Download
3
Category
Preview:
DESCRIPTION
Introdução de HTML e CSS básico.
Citation preview
Introdução a Desenvolvimento Web
Iago Effting iago.effting@gmail.com
O que é?
O que é?Linguagem de Marcação
O que é?Linguagem de Marcação
Para que serve?
O que é?Linguagem de Marcação
Para que serve?Desenvolver página Web
O que é?Linguagem de Marcação
Para que serve?
Recomendações
Desenvolver página Web
O que é?Linguagem de Marcação
Para que serve?
W3Schoolshttp://goo.gl/9Z751Y
Recomendações
Desenvolver página Web
O que é?
O que é?Folha de Estilo Cascata
O que é?Folha de Estilo Cascata
Para que serve?
O que é?Folha de Estilo Cascata
Para que serve?Deixar as coisas “Legais”
O que é?Folha de Estilo Cascata
Para que serve?
Recomendações
Deixar as coisas “Legais”
O que é?Folha de Estilo Cascata
Para que serve?
Maujorhttp://goo.gl/9Z751YW3Schoolshttp://goo.gl/lxH1lg
Recomendações
Deixar as coisas “Marotas”
HTML + CSSCriando uma página HTML
<!DOCTYPE html><html>
</html>
SaídaIndex.html
HTML + CSSAdicionando um Titulo
<!DOCTYPE html><html><head>
<title>Site 01</title></head></html>
SaídaIndex.html
HTML + CSSCriando Corpo <body>*
<!DOCTYPE html><html><head>
<title>Site 01</title></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 + CSSEscrevendo no Corpo
<!DOCTYPE html><html><head>
<title>Site 01</title></head><body><h1>Cabeçalho</h1><p>Istó é um parágrafo</p></body></html>
SaídaIndex.html
HTML + CSSEscrevendo no Corpo
<!DOCTYPE html><html><head>
<title>Site 01</title></head><body><h1>Cabeçalho</h1><p>Istó é um parágrafo</p></body></html>
SaídaIndex.html
HTML + CSSAlterando cor da tag <h1>
…<body><h1 style=“color: #F00F00”>Cabeçalho</h1><p>Istó é um parágrafo</p></body>…
SaídaIndex.html
HTML + CSSAlterando 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 + CSSSeparando CSS do HTML
…<head>
<title>Site 01</title>
<style>
</style></head>…
SaídaIndex.html
HTML + CSSSeparando 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çãoO 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çãoO 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 + CSSAtribuindo 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 + CSSAtribuindo Identificador
<style>h1#titulo{color: #F00F00”; }</style>…<h1 id=“titulo”>Cabeçalho</h1><h1>Outro Cabeçalho</h1>…
SaídaIndex.html
HTML + CSSAtribuindo Identificador
<style>h1#titulo{color: #F00F00”; }</style>…<h1 id=“titulo”>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 classes
HTML + CSSCriar grupo de elementos
…<p class=“claro”>texto 1</p><p class=“escuro”>texto 2</p><p class=“claro”>texto 3</p><p class=“escuro”>texto 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 + CSSCriar grupo de elementos
…<style>p.claro{background: #F6F6F6;}p.escuro{background: #333;}</style>…<p class=“claro”>texto 1</p><p class=“escuro”>texto 2</p><p class=“claro”>texto 3</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 + CSSResetar Espaços Padrões
…<style>*{ margin: 0; padding: 0}p.claro{background: #F6F6F6;}p.escuro{background: #333;}</style>…
SaídaIndex.html
HTML + CSSCriar um arquivo CSS
…<head>…<link rel=“stylesheet” type=“text/css” href=“estilo.css”>…</head>…
SaídaIndex.html estilo.css
HTML + CSSInserir Dados no estilo.css
*{ margin: 0; padding: 0; }p.Claro { background: #F6F6F6; }p.escuro{ background: #333; }
SaídaIndex.html estilo.css
*Arquivos .cssSã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 + CSSAcentuação
…<head>…<meta charset=“utf-8”>…</head>…
SaídaIndex.html estilo.css
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 Tagshttp://goo.gl/HRTcFF
Lista de Atributoshttp://goo.gl/qkzLQG
Bônus CSS!
Maujorhttp://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/41489bb8cbd6b5db9825
Recommended