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

HTML e CSS

Embed Size (px)

DESCRIPTION

bases de HTML e CSS, irá ser melhorado e completado em breve

Citation preview

Page 1: HTML e CSS

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

HTML e CSSStarting

Page 2: HTML e CSS

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

HTMLStarting

Page 3: HTML e CSS

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

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;

Page 4: HTML e CSS

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

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

Page 5: HTML e CSS

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

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

Page 6: HTML e CSS

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

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;

Page 7: HTML e CSS

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

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;

Page 8: HTML e CSS

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

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;

Page 9: HTML e CSS

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

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;

Page 10: HTML e CSS

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

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;

Page 11: HTML e CSS

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

HTML

Headings HTML

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

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

Page 12: HTML e CSS

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

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>

Page 13: HTML e CSS

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

HTML

Headings HTML - Exemplo

• Obtem-se:

Page 14: HTML e CSS

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

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>

Page 15: HTML e CSS

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

HTML

• Obtem-se:

Parágrafos HTML - Exemplo

Page 16: HTML e CSS

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

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;

Page 17: HTML e CSS

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

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;

Page 18: HTML e CSS

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

HTML

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

tags de formatação - Exemplo

Page 19: HTML e CSS

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

HTML

• Obtem-se:

tags de formatação - Exemplo

Page 20: HTML e CSS

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

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;

Page 21: HTML e CSS

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

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;

Page 22: HTML e CSS

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

HTML

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

Como inserir imagens? - Exemplo

Page 23: HTML e CSS

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

• Obtem-se;

Como inserir imagens? - Exemplo

HTML

Page 24: HTML e CSS

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

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

Page 25: HTML e CSS

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

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>

Page 26: HTML e CSS

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

HTML

Como criar tabelas? - Exemplo

• Obtem-se:

Page 27: HTML e CSS

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

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

Page 28: HTML e CSS

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

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>

Page 29: HTML e CSS

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

HTML

Como criar listas? - Exemplo

• Obtem-se;

Page 30: HTML e CSS

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

CSSStarting

Page 31: HTML e CSS

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

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;

Page 32: HTML e CSS

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

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

Page 33: HTML e CSS

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

body { background-color:#fff; };

Selector Propriedade Valor

CSS

Sintaxe CSS

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

• Exemplo:

Page 34: HTML e CSS

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

Como introduzir CSS?

• Folha de estilos externa;

• Folha de estilos interna;

• “Inline style”;

CSS

Page 35: HTML e CSS

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

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

Page 36: HTML e CSS

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

Folha de estilos externa

• Exemplo:

CSS

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

Page 37: HTML e CSS

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

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:

CSS

<head><style type=”text/css”>hr {color:#fff;}p {margin-to:200px;}body {background-color:blue);}</style></head>

Page 38: HTML e CSS

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

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

CSS

<p style=”color:#fff; margin:auto”>...</p>

Page 39: HTML e CSS

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

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;

Page 40: HTML e CSS

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

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

Page 41: HTML e CSS

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

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;

Page 42: HTML e CSS

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

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;

Page 43: HTML e CSS

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

CSS

Propriedade “background”

• Exemplo:

• NOTA: A ordem tem obrigatoriamente de ser a apresentada, mas podem-se não utilizar todas as características.

body { background: #ffffff url(‘img_tree.png’) no-repeat fixed right top; };

Cor (color)

Imagem(image)

Fixação(attachment)

Posição(position)

Repetição(repeat)

Page 44: HTML e CSS

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

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