Daniela Matos de Carvalho
Software Engineer @Dashlane, mother, photographer amateur, former @requirelx organiser, prev @YLDio, @zpx_interactive
CoderDojo LX
<coder-dojo></coder-dojo>
HTML & CSS
Cabeçalho
(Header)
Corpo
(Body)
Rodapé
(Footer)
Rodapé
(Footer)
Corpo
(Body)
Cabeçalho
(Header)
Páginas HTML terminam com a extensão .html
A página principal chama-se index.html
Antes de colocar mãos
à obra...
<!DOCTYPE html>
<html>
<body>
<header>
<p>Workshop de Html</p>
</header>
A CoderDojo é o máximo!
<footer>
Criado por: Daniela Borges
</footer>
</body>
</html>Vamos experimentar!
<!DOCTYPE html>É uma instrução para o browser/navegador sobre a página que estamos a escrever
Deve aparecer sempre antes das tags
<html> bla bla bla </html>
(...)
<body>
<!-- Eu sou um comentário e a linha seguinte é um parágrafo -->
<p> A CoderDojo é o máximo!</p>
</body>
(...)Mas os nossos parágrafos podem ter estilo!
Vamos experimentar!
(...)
<body>
<p>
<!-- Adiciona um texto em que acrescentes as tags <i>, <b> e <s> -->
<!-- NOTA IMPORTANTE: Não te esqueças de fechar as tags! -->
</p>
</body>
(...)Vamos experimentar
<img src="a-minha-imagem-gira.png"></img>...acrescentar uma imagem!
<img src="a-minha-imagem-gira.png" />semelhante a...
Vamos experimentar
...acrescentar uma imagem!
<img src="a-minha-imagem-gira.png" /> src quer dizer SOURCE!
.... mas há mais campos:
width
height
Altura
(Height)
Largura (Width)
<img src="a-minha-imagem-gira.png" width="150px" height="50px" /><img src="a-minha-imagem-gira.png" width="150px" height="50px" />Alguém sabe o que quer dizer px?
píxeis
Também podemos utilizar dimensões relativas
em percentagem %
100 % largura
~70 %
ocupada
Links / Ligações
<a href="www.coderdojo-lx.pt">Clica aqui para seguires para CoderDojo LX</a>Links / Ligações
são referências HTML (href) para outros locais
podem ser usadas em...
Texto simples
Links / Ligações
<a href="www.coderdojo-lx.pt">
<img src="a-minha-flor.png" />
</a>
podem referenciar...
Links / Ligações
conteúdo da própria página
conteúdo externo
<a href="www.coderdojo-lx.pt">
CoderDojo
</a> <a href="#seccao-gira-no-body">
Seguir para secção gira
</a>Links / Ligações
conteúdo da própria página
<a href="#seccao-gira-no-body">
Seguir para secção gira
</a>Só funciona se existir uma secção gira
com este ID na nossa página!
<p id="seccao-gira-no-body">
Secção dos doces ou travessuras!
</p>
Listas
1. ordenadas
- não ordenadas
Listas
Ordenadas Não ordenadas
- Chá
- Leite
- Sumo
- Elefante
- Leão
- Girafa
Listas
Ordenadas Não ordenadas
- Chá
- Leite
- Sumo
- Elefante
- Leão
- Girafa
<ol></ol>
(ordered list)
<ul></ul>
(unordered list)
Vamos experimentar
...acrescentar uma lista!
<ul>
<li>Elefante</li>
<li>Leão</li>
<li>Girafa</li>
</ul>Alguém adivinha o que quer dizer LI?
Vamos experimentar
...acrescentar uma lista!
Desafio!
Lista de compras
Cria uma lista ordenada com uma frase e uma imagem alusiva por cada item da lista
<pausa>
Todos de pé
</pausa>
Tabelas!
Também podem ter:
- Cabeçalho (head)
- Corpo (body)
- Rodapé (footer)
Tabelas!
Totais = 33 = 46 ...
Rodapé
(Footer)
Corpo
(Body)
Cabeçalho
(Header)
Tabelas!
... de doces!
... em HTML!
<table>
<tbody>
<tr>
<td>Doce 1</td>
<td>Doce 2</td>
</tr>
<tr>
<td>Doce 3</td>
<td>Doce 4</td>
</tr>
<tr>
<td>Doce 5</td>
<td>Doce 6</td>
</tr>
</tbody>
</table>1
2
3
4
5
6
<table>
<tbody>
<tr>
<td>Doce 1</td>
<td>Doce 2</td>
</tr>
<tr>
<td>Doce 3</td>
<td>Doce 4</td>
</tr>
<tr>
<td>Doce 5</td>
<td>Doce 6</td>
</tr>
</tbody>
</table>Daniela descomplica!
tr = table row (linha da tabela)
<table>
<tbody>
<tr>
<td>Doce 1</td>
<td>Doce 2</td>
</tr>
<tr>
<td>Doce 3</td>
<td>Doce 4</td>
</tr>
<tr>
<td>Doce 5</td>
<td>Doce 6</td>
</tr>
</tbody>
</table>Daniela descomplica!
td = table data (dados/conteúdo)
Daniela descomplica!
- thead = table head (cabeçalho)
- tbody = table body (corpo)
- tfooter = table footer (rodapé)
CSS
CSS
Porquê?
CSS
Porquê?
Separar a apresentação da estrutura (HTML)
Fica tudo mais organizado!
...e mais bonito
CSS
Proposta
body {
font-family: Arial, Sans-serif;
font-size: 12px;
}
body {
font-family: Arial, Sans-serif;
font-size: 120%; /* ou 1em */
}
.title {
color: orange;
}
p {
color: blue
}
.title {
color: orange;
}Com que cor fica o título se tivermos esta regra?
p {
color: blue
}
.title {
color: orange;
}E esta regra?
.title {
color: orange;
}
.title {
color: blue;
}Porque é que às vezes as minhas regras não funcionam?
Erros de sintaxe
Diferentes navegadores/browsers
...
href, para que te quero!
a {
color: blue;
}
<a href="#aboutscratch">About Scratch</a>href , para que te quero!
a {
color: blue;
text-transform: uppercase;
/* font-weight: bold; */
}
a:hover {
text-decoration: underline;
} <a href="#aboutscratch">About Scratch</a>Onde posso encontrar mais propriedades?
color text-transform text-align font-weight font-style font-size line-height background-image background-color background-repeat border width height float display cursor ...
Remove as tags
da página e substitui por classes CSS
Vamos experimentar
...remover as tags antigas!
Desafio!
<i></i>
<s></s>
<b></b>
<html>
<body>
<i>Texto em itálico</i>
<b>Texto a negrito</b>
<s>Texto riscado</s>
</body>
</html>Vamos experimentar
...remover as tags antigas!
Desafio!
HTML
Estrutura e Organização
CSS
Estilo
Conteúdo
Apresentação (do conteúdo)
Conclusão
Tópicos mais avançados
Que outras coisas poderíamos falar mais sobre HTML?
caixa de texto, checkbox, vídeo,
lorem ipsum,..
e de CSS ?
dimensões absolutas versus relativas
(por exemplo)
e que mais?
Javascript!
Chrome Developer Tools (ou Firefox)
Contactos
http://slides.com/danielaborges/coderdojo-html-css/
HTML & CSS Basics @ CoderDojo LX
By Daniela Matos de Carvalho
