1. HTML e CSS
Starting
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
2. Starting
HTML
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
3. HTML
O que é HTML?
• Linguagem utilizada para a criação de páginas Web;
• Abreviatura de Hyper Text Markup Language;
• Não é uma linguagem de programação mas sim uma
linguagem de marcação;
• Liguagem de marcação = grupo de “tags” de marcação
que descrevem as páginas Web;
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
4. HTML
O que são “tags” HTML?
• tags HTML = tags de marcação HTML;
• São palavras-chave contidas entre o sinal de menor (<)
e maior (>);
• Existe sempre uma de abertura (<body>) e uma de fe-
cho (</body>);
• Existem tags de abertura e fecho simultâneo (<br/>);
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
5. HTML
O que são Elementos HTML?
• É tudo o que começa com uma tag de abertura
(<body>) e uma tag de fecho (</body>);
• Termina sempre com uma tag de fecho (</body>);
• O seu conteúdo é tudo o que está entre as tags de ab-
ertura e de fecho;
• Existem elementos HTML sem conteúdo (<br/>);
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
6. HTML
O que são Elementos HTML?
• O elementos sem conteúdo abrem-se e fecham-se na
mesma tag (<br/>);
• A maior parte dos elementos HTML podem ter atribu-
tos;
• Pode haver elementos HTML dentro de outros elemen-
tos HTML;
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
7. HTML
Elementos HTML
• <html> ... </html> define todo o documento HTML
e o seu conteúdo são outros elementos HTML, como por
exemplo:
• <head> ... </head> onde está contida a metadata
e o seu conteúdo são outros elementos HTML, como por
exemplo:
• <title> ... </title> nome que vai aparecer no separa-
dor/barra do browser;
• <keywords> ... </keywords> contém todas as pala-
vras chaves, para quando numa pesquisa num motor de
busca mostre-nos também o nosso site;
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
8. HTML
Elementos HTML
• <link ... /> define a relação entre o documento HTML
e uma fonte externa (Folha CSS);
• <body> ... </body> define o todo o documento
HTML e contém outros elementos HTML, como por exem-
plo:
• <p> ... </p> define um parágrafo num documento
HTML;
• <a href=”meusite.html” > ... </a> define um link
para uma página HTML;
• <br/> ou <br> elemento HTML vazio que define uma
quebra de linha;
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
9. HTML
Elementos HTML
• <h1> ... </h1> define um título com um tamanho de
letra já predefinido;
• <table> ... </table> cria uma tabela e contém outros
elementos HTML que dão forma à tabela, como por ex-
emplo:
• <tr > ... </tr> define o número de linhas de uma tab-
ela;
• <td> ... </td> define uma célula de cada linha;
• <img src=”eu.png”> ... </img> insere uma imagem;
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
10. HTML
O que são Atributos HTML?
• Atribuem informação adicional a um elemento HTML;
• São sempre especificados na tag de abertura (<a
href=”meusite.html”>);
• São sempre definidos dentro da tag de abertura como
nome=”valor”, onde as aspas são obrigatórias;
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
11. HTML
Headings HTML
• Definidos com as tags <h1> a <h6>;
• Quanto maior o número (<h6>), menor o tamanho da
letra apresentada;
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
12. HTML
Headings HTML - Exemplo
• Abrir editor de HTML (Notepad, Dreamweaver);
• Entre as tags de abertura e fecho do “body”, escrever
o seguinte código:
<h1>O meu título “h1”</h1>
<h2>O meu título ”h2”</h2>
<h3>O meu título “h3”</h3>
<h4>O meu título “h4”</h4>
<h5>O meu título “h5”</h5>
<h6>O meu título “h6”</h6>
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
13. HTML
Headings HTML - Exemplo
• Obtem-se:
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
14. HTML
Parágrafos HTML - Exemplo
• Abrir editor de HTML (Notepad, Dreamweaver);
• Entre as tags de abertura e fecho do “body”, escrever
o seguinte código:
<p>O meu primeiro parágrafo</p>
<p>O meu segundo parágrafo</p>
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
15. HTML
Parágrafos HTML - Exemplo
• Obtem-se:
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
16. HTML
tags de formatação
• <b> ... </b> põe um texto, uma palavra, letra(s) a
bold;
• <i> ... </i> põe um texto, uma palavra, letra(s) a
itálico;
• <big> ... </big> põe um texto, uma palavra, letra(s)
um pouco maior;
•<code> ... </code> muda o tipo de letra para o que
normalmente é utilizado em programação;
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
17. HTML
tags de formatação
• <sub> ... </sub> põe palavra(s), texto, letra(s) em
subscrito;
• <sup> ... </sup> põe palavra(s), texto, letra(s) em
sobrescrito;
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
18. HTML
tags de formatação - Exemplo
• Abrir editor de HTML (Notepad, Dreamweaver);
• Entre as tags de abertura e fecho de um parágrafo,
escrever o seguinte código:
<b>Texto em Bold</b>
<i>Texto em itálico</i>
<big>Texto maior</big>
<code>Texto com letra de código</code>
<sub>Texto subscrito</sub>
<sup>texto sobrescrito</sup>
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
19. HTML
tags de formatação - Exemplo
• Obtem-se:
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
20. HTML
Como inserir imagens?
• Definidas em HTML com a tag <img>;
• Tem que conter o atributo “src” (source);
• O valor do atributo “src” é o URL da imagem;
• URL indica onde está a imagem (quer seja no computa-
dor quer seja online);
• Pode conter o atributo “alt”, que atribui um texto à im-
agem quando esta não for visualizada;
•Apresentada no browser no sítio onde está inserida no
documento;
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
21. HTML
Como inserir imagens?
• Pode conter os atributos “height” (altura) e “width” (lar-
gura);
• “height” e “width” definem a altura e a largura da ima-
gem, respectivamente;
• Os valores dos atributos “height” e “width” são defini-
dos em pixeis;
•Não tem tag de fecho;
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
22. HTML
Como inserir imagens? - Exemplo
• Abrir editor de HTML (Notepad, Dreamweaver);
• Entre as tags de abertura e fecho de um parágrafo,
escrever o seguinte código:
<img src=”http://www.iasfa.pt/imagens/images/
acordo/ulp.gif” alt=”logo_ULP” height=”300px”
width=”500px”>
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
23. HTML
Como inserir imagens? - Exemplo
• Obtem-se;
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
24. HTML
Como criar tabelas?
• Definida pela tag <table>;
• São divididas em linhas (<tr>);
• Cada linha é dividida em células (<td>);
• Pode-se definir a espessura da borda da tabela com o
atributo “border”;
• Podem-se definir cabeçalhos a cada coluna da tabela
com a tag <th>;
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
25. HTML
Como criar tabelas? - Exemplo
• Abrir editor de HTML (Notepad, Dreamweaver);
• Entre as tags de abertura e fecho de um parágrafo,
escrever o seguinte código:
<table border=”2”>
<tr>
<th>Primeiro Cabeçalho</th>
<th>Segundo Cabeçalho</th>
</tr>
<tr>
<td>Primeira célula, primeira linha</td>
<td>Segunda célula, primeira linha</td>
</tr>
<tr>
<td>Primeira célula, segunda linha</td>
<td>Segunda célula, segunda linha</td>
</tr>
</table>
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
26. HTML
Como criar tabelas? - Exemplo
• Obtem-se:
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
27. HTML
Como criar listas?
• Podem-se criar listas ordenadas e não ordenadas;
• <ul> tag de abertura de uma lista não ordenada;
• <ol> tag de abertura de uma lista ordenada;
• <li> tag de abertura de cada item da lista;
• Os items das listas não ordenadas são antecedidos de
uma bola preenchida a negro;
• Os items das listas ordenadas são antecedidos de um
número (1) e um ponto (.);
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
28. HTML
Como criar listas? - Exemplo
• Abrir editor de HTML (Notepad, Dreamweaver);
• Entre as tags de abertura e fecho de um parágrafo,
escrever o seguinte código:
<ul>
<li>Estudar</li>
<li>Não estudar</li>
</ul>
<ol>
<li>Estudar</li>
<li>Não estudar</li>
</ol>
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
29. HTML
Como criar listas? - Exemplo
• Obtem-se;
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
30. Starting
CSS
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
31. CSS
O que é CSS?
• Abreviatura de Cascading Style Sheet;
• Definimos a disposição dos elementos HTML;
• Permite ter um documento HTML mais “limpo”;
• Permite-nos mudar a formatação de todos os nossos
documentos HTML ao mesmo tempo;
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
32. CSS
Sintaxe CSS
• Cada regra CSS é composta por duas partes: Selector
e a Declaração;
•O selector é aquilo que queremos formatar;
• Exemplo:
body { background-color:#fff; };
Selector Declaração
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
33. CSS
Sintaxe CSS
• Cada declaração é composta por Propriedades e re-
spectivos Valores;
• Exemplo:
body { background-color:#fff; };
Selector Propriedade Valor
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
34. CSS
Como introduzir CSS?
• Folha de estilos externa;
• Folha de estilos interna;
• “Inline style”;
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
35. CSS
Folha de estilos externa
• Ideal quando se quer aplicar estilos a várias páginas;
• Pode-se mudar o aspecto todo de um website mudando
apenas um ficheiro;
• Cada página tem que ter um link para a folha de esti-
los (<link>) que se insere na tag <head>;
• Pode ser criada em qualquer editor de texto (notepad,
Dreamweaver), guardado com a extensão “.CSS”;
• Não contém tags HTML;
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
36. CSS
Folha de estilos externa
• Exemplo:
<head>
<link rel=”stylesheet” type=”text/css” href=”meucss.css” />
</head>
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
37. CSS
Folha de estilos Interna
• Deve ser utilizada quando um dado documento tem um
estilo específico;
• Definida com a tag <style> inserida na tag <head> do
documento HTML;
• Exemplo:
<head>
<style type=”text/css”>
hr {color:#fff;}
p {margin-to:200px;}
body {background-color:blue);}
</style>
</head>
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
38. CSS
“Inline Style”
• Perde muitas das vantagens das folhas de estilo
porque mistura o conteúdo do documento com a apre-
sentação do mesmo;
• Necessário utilizar o atributo de estilo na tag pretend-
ida;
• O atributo pode conter qualquer propriedade CSS;
• Exemplo:
<p style=”color:#fff; margin:auto”>...</p>
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
39. CSS
Selectores CSS
• CSS permite-nos atribuir dois selectores: “id” e
“class”;
• “id” usado para especificar um estilo para um só ele-
mento;
• “id” definido no CSS com cardinal (#estilo);
• <div id=”estilo”> código para designar um estilo a um
determinado elemento HTML;
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
40. CSS
Selectores CSS
• “class” usado para especificar um estilo para um grupo
de elementos HTML;
• “class” usado em mais do que um elemento HTML, ao
contrário do “id”;
• “class” definido no CSS com um ponto(.classe);
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
41. CSS
Propriedade “background”
• Utilizada para atribuir um fundo a um elemento do
documento;
• “background-color” - atribui uma cor ao fundo;
• “background-image” - atribui uma imagem ao fundo;
• “background-repeat” - define se a imagem se repete
no eixo xOy;
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
42. CSS
Propriedade “background”
• “background-attachment” - define se a imagem é
fixa ou se “anda” quando se utiliza a barra de rolamento;
• “background-position” - define a posição da imagem
do fundo;
• “background” - podem-se inserir todas as caracterís-
ticas anteriores numa só declaração;
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
43. CSS
Propriedade “background”
• Exemplo:
body {
background: #ffffff url(‘img_tree.png’) no-repeat fixed right top;
};
Cor Imagem Repetição Posição
(color) (image) (repeat) (position)
Fixação
(attachment)
• NOTA: A ordem tem obrigatoriamente de ser a apresentada, mas podem-se não utilizar todas as
características.
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
44. CSS
Propriedade “text”
• Utilizada para formatar texto;
• “text-color” - define a cor do texto;
• “text-align” - define o alinhamento horizontal do texto;
• “text-decoration” - define se há ou não alguma for-
matação adicional ao texto (rasurado, linha por cima, sub-
linhado, blink (bold));
• NOTA: “blink” não é aceite por alguns browsers como o Google Chrome, Internet Explorer, Safari
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno