Download - HTML e CSS
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
HTML e CSSStarting
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
HTMLStarting
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;
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/>);
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/>);
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;
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;
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;
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;
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;
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;
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>
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
HTML
Headings HTML - Exemplo
• Obtem-se:
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>
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
HTML
• Obtem-se:
Parágrafos HTML - Exemplo
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;
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;
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
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
HTML
• Obtem-se:
tags de formatação - Exemplo
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;
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;
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
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
• Obtem-se;
Como inserir imagens? - Exemplo
HTML
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>;
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>
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
HTML
Como criar tabelas? - Exemplo
• Obtem-se:
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 (.);
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>
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
HTML
Como criar listas? - Exemplo
• Obtem-se;
Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
CSSStarting
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;
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
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:
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
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
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>
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>
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>
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;
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);
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;
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;
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)
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