HTML e CSS

HTML e CSS
Starting

Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno

Starting
HTML


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;


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/>);


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/>);


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;


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;

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;

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;


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;


HTML
Headings HTML

• Definidos com as tags <h1> a <h6>;

• Quanto maior o número (<h6>), menor o tamanho da
letra apresentada;


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>


HTML
Headings HTML - Exemplo

• Obtem-se:


HTML
Parágrafos HTML - Exemplo


• 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>


HTML
Parágrafos HTML - Exemplo

• Obtem-se:


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;


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;


HTML
tags de formatação - Exemplo


• 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>


HTML
tags de formatação - Exemplo

• Obtem-se:


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;


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;


HTML
Como inserir imagens? - Exemplo



<img src=”http://www.iasfa.pt/imagens/images/
acordo/ulp.gif” alt=”logo_ULP” height=”300px”
width=”500px”>


HTML
Como inserir imagens? - Exemplo

• Obtem-se;


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>;


HTML
Como criar tabelas? - Exemplo


<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>


HTML
Como criar tabelas? - Exemplo

• Obtem-se:


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 (.);


HTML
Como criar listas? - Exemplo



<ul>
<li>Estudar</li>
<li>Não estudar</li>
</ul>
<ol>
<li>Estudar</li>
<li>Não estudar</li>
</ol>


HTML
Como criar listas? - Exemplo

• Obtem-se;


Starting
CSS


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;


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


CSS
Sintaxe CSS

• Cada declaração é composta por Propriedades e re-
spectivos Valores;

• Exemplo:

body { background-color:#fff; };

Selector Propriedade Valor


CSS
Como introduzir CSS?

• Folha de estilos externa;

• Folha de estilos interna;

• “Inline style”;


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;


CSS
Folha de estilos externa

• Exemplo:

<head>
<link rel=”stylesheet” type=”text/css” href=”meucss.css” />
</head>


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>


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>


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;


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);


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;


CSS

• “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;


CSS

• 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.


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


HTML e CSS

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a HTML e CSS

Último

HTML e CSS