html + css
DESCRIPTION
Slides do Workshop de HTML+CSS da Universidade de Verão de 2010 no Dep. de Eng. Informática em Coimbra. O site de apoio está aqui: http://nei.dei.uc.pt/workshop-html-css/TRANSCRIPT
HTML + CSSUma introdução
Dep. Eng. Informá/ca -‐ FCTUC
Universidade de VerãoJulho de 2010
Pedro GasparTwiGer: @pedrogaspar
Web: hGp://pedrogaspar.com/
O QUE SÃO?
HTML CSSConteúdo Apresentação
3
HTML
Conteúdo
Estrutura
CSS
Propriedades visuais das estruturas definidas em HTML
Menu
Notícia 1
Notícia 2
Título
Menu Notícia 1
Notícia 2
Notícia 3
Título
COMO FUNCIONA?Pedidos e Respostas
COMO FUNCIONA?Pedidos e Respostas
GET /index.html
COMO FUNCIONA?Pedidos e Respostas
GET /index.html
<html><head>...
</head><body>...
</body></html>
COMO FUNCIONA?Pedidos e Respostas
GET /index.html
<html><head>...
</head><body>...
</body></html>
HTML
HTML - SINTAXE
<p>...</p>
<img src=”...” />
HTML - TAGS COMUNS
Parágrafo <p>...</p>
Cabeçalhos <h1>...</h1>, <h2>...</h2>, etc.
Lista <ul> <li>...</li> </ul>
Imagem <img src=”...“ />
Link <a href=”...“>...</a>
Bloco <div>...</div>
HTML - PARÁGRAFO
<p>Texto...Fim.
</p>
HTML - PARÁGRAFO
<p>Texto...Fim.
</p>
<br />
HTML - TEXTO
<p><i>Itálico</i><br /><small>Pequeno</small><br /><b>Negrito</b><br /><i><b>Composto</b></i>
</p>
HTML - TEXTO
<pre><i>Itálico</i><small>Pequeno</small>
<b>Negrito</b><i><b>Composto</b></i>
Um dois três.</pre>
HTML - CABEÇALHOS
<h1>O meu Livro</h1><h2>Capítulo 1</h2><p>...</p>
<h2>Capítulo 2</h2><h3>Capítulo 2.1</h3><p>...</p>
<h3>Capítulo 2.2</h3><p>...</p>
...
HTML - LISTAS
<h3>A Fazer</h3>
<ul><li>Limpar a casa</li><li>Lavar o carro</li><li>Estudar</li><li>Ir de Férias!</li><li>etc...</li>
</ul>
HTML - LISTAS
<h3>A Fazer</h3>
<ol><li>Limpar a casa</li><li>Lavar o carro</li><li>Estudar</li><li>Ir de Férias!</li><li>etc...</li>
</ol>
HTML - IMAGENS
<img src=”pessoa.png“ />
O atributo src indica o caminho para a imagem a mostrar.
Pode mesmo ser um URL.
HTML - LINKS
<a href=”hSp://google.pt“>Link para o Google
</a>
O atributo href indica o URL para onde o link aponta.
Pode ser um caminho local.
HTML - BLOCOS
<div><p>Texto...</p>
</div>
O div pode conter qualquer elemento dentro de sí.
Principalmente usado através do CSS.
HTML - TABELAS<table border=”1”><th>Número</th><th>Nome</th>
<tr><td>1</td><td>Luís</td>
</tr><tr><td>2</td><td>Armando</td>
</tr></table>
th - Table Header
tr - Table Row
td - Table Data
HTML - FORMS
<form>...
</form>
<input type=”text” />
<input type=”password” />
<input type=”radio” />
<input type=”checkbox” />
<input type=”submit” /> <textarea> </textarea>
<label>Nome:</label>
<html><head>...
</head>
<body>...
</body></html>
HTML - ESTRUTURA
Início do documento
Elemento head
Elemento body
Tag externa que contém todo o HTML
<html><head>...
</head>
<body>...
</body></html>
HTML - ESTRUTURA
Início do documento
Elemento head
Elemento body
Contém tags que dão valor semântico à página e que fazem referência a ficheiros com código CSS
<html><head>...
</head>
<body>...
</body></html>
HTML - ESTRUTURA
Início do documento
Elemento head
Elemento body
Tags de HTML normais
CSS
Código num ficheiro externo
Código no próprio ficheiro HTML
Código no atributo style de cada tag
CSS - UTILIZAÇÃO
Na tag head ficheiro HTML
CSS - UTILIZAÇÃO
<head><link rel=”stylesheet” type=”text/css” href=”style.css”/>
</head>
CSS - SINTAXE
h1 { color: gray; font-‐size: 12px; }
Selector
CSS - SINTAXE
h1 { color: gray; font-‐size: 12px; }
Propriedade
CSS - SINTAXE
h1 { color: gray; font-‐size: 12px; }
Valor
CSS - SINTAXE
h1 {color: gray;font-‐size: 12px;
}
p {font-‐family: Arial;
}
CSS - SINTAXE
h1 {color: gray;font-‐size: 12px;
}
p {font-‐family: Arial;
}
CSS - SELECTORS
div { ... }
<div>...</div><div>...</div><p>...</p>H
TML
CSS
CSS - SELECTORS
.content { ... }
<div class=”content”>...</div><div>...</div><p class=”content”>...</p>H
TML
CSS
CSS - SELECTORS
div.content { ... }
<div class=”content”>...</div><div>...</div><p class=”content”>...</p>H
TML
CSS
CSS - SELECTORS
#content { ... }
<div id=”content”>...</div><div>...</div><p class=”content”>...</p>H
TML
CSS
EXEMPLO
EX. - BACKGROUND
body { background-‐color: #005e1a;background-‐image: url(‘bg.jpg’);background-‐repeat: repeat-‐x;font-‐family: Arial;
}
CSS
EX. - CONTAINER
<div id=”site-‐ftle”><h1>Um Blog</h1>
</div>
<div id=”container”>...
</div>
HTM
L
EX. - CONTAINER
#site-‐/tle { text-‐align: center; }
#site-‐/tle h1 { color: white; font-‐family: Arial;}
CSS
EX. - CONTAINER
#container { width: 700px; background-‐color: white; margin: auto; margin-‐boSom: 20px;}
CSS
EX. - MENU
<div id=”menu”><ul><li><a href=”sobre.html”>Sobre</a></li>
<li><a href=”fotos.html”>Fotos</a></li><li><a href=”hSp://google.com”>Google</a></li>
</ul></div>...<div class=”clear”></div>
HTM
L
EX. - MENU
#menu { width: 150px; float: lek; background-‐color: #DDD; border-‐boSom: 1px solid gray; border-‐right: 1px solid gray; padding: 1px;}
#menu li { list-‐style: circle; }.clear { clear: both; }
CSS
EX. - MENU
a, a:visited, a:link {text-‐decorafon: none;color: #333;
}
a:hover {color: #777;font-‐weight: bold;
}
CSS
EX. - POSTS
<div class=”post”><p>Texto...</p>...
</div>HTM
L
.post { margin: 20px 0px 5px 24px; float: right; background-‐color: #EEE; color: #555; width: 480px; padding: 10px;}
<div class=”post”><p>Texto...</p>...
</div>HTM
LC
SSEX. - POSTS
.post p { margin: 0px;}
Photo by Al_HikesAZ
EXPERIMENTEM
hGp://nei.dei.uc.pt/workshop-‐html-‐css/
hSp://w3schools.com/
hSp://colourlovers.com/
hSp://www.famfamfam.com/lab/icons/
Google: “background gradient”