Your SlideShare is downloading. ×
0
HTML e CSS                                                     Starting Mónica Ferreira   |   2º Ano de Comunicação audiov...
Starting                                             HTML Mónica Ferreira   |   2º Ano de Comunicação audiovisual e Multim...
HTMLO que é HTML? • Linguagem utilizada para a criação de páginas Web; • Abreviatura de Hyper Text Markup Language; • Não ...
HTMLO que são “tags” HTML? • tags HTML = tags de marcação HTML; • São palavras-chave contidas entre o sinal de menor (<) e...
HTMLO que são Elementos HTML? • É tudo o que começa com uma tag de abertura (<body>) e uma tag de fecho (</body>); • Termi...
HTMLO que são Elementos HTML? • O elementos sem conteúdo abrem-se e fecham-se na mesma tag (<br/>); • A maior parte dos el...
HTMLElementos HTML • <html> ... </html> define todo o documento HTML e o seu conteúdo são outros elementos HTML, como por ...
HTMLElementos HTML • <link ... /> define a relação entre o documento HTML e uma fonte externa (Folha CSS); • <body> ... </...
HTMLElementos HTML • <h1> ... </h1> define um título com um tamanho de letra já predefinido; • <table> ... </table> cria u...
HTMLO que são Atributos HTML? • Atribuem informação adicional a um elemento HTML; • São sempre especificados na tag de abe...
HTMLHeadings HTML • Definidos com as tags <h1> a <h6>; • Quanto maior o número (<h6>), menor o tamanho da letra apresentad...
HTMLHeadings HTML - Exemplo • Abrir editor de HTML (Notepad, Dreamweaver); • Entre as tags de abertura e fecho do “body”, ...
HTMLHeadings HTML - Exemplo  • Obtem-se:       Mónica Ferreira   |   2º Ano de Comunicação audiovisual e Multimédia   |   ...
HTMLParágrafos HTML - Exemplo • Abrir editor de HTML (Notepad, Dreamweaver); • Entre as tags de abertura e fecho do “body”...
HTMLParágrafos HTML - Exemplo  • Obtem-se:       Mónica Ferreira   |   2º Ano de Comunicação audiovisual e Multimédia   | ...
HTMLtags de formatação • <b> ... </b> põe um texto, uma palavra, letra(s) a bold; • <i> ... </i> põe um texto, uma palavra...
HTMLtags de formatação • <sub> ... </sub> põe palavra(s), texto, letra(s) em subscrito; • <sup> ... </sup> põe palavra(s),...
HTMLtags de formatação - Exemplo • Abrir editor de HTML (Notepad, Dreamweaver); • Entre as tags de abertura e fecho de um ...
HTMLtags de formatação - Exemplo  • Obtem-se:       Mónica Ferreira   |   2º Ano de Comunicação audiovisual e Multimédia  ...
HTMLComo inserir imagens? • Definidas em HTML com a tag <img>; • Tem que conter o atributo “src” (source); • O valor do at...
HTMLComo inserir imagens? • Pode conter os atributos “height” (altura) e “width” (lar- gura); • “height” e “width” definem...
HTMLComo inserir imagens? - Exemplo • Abrir editor de HTML (Notepad, Dreamweaver); • Entre as tags de abertura e fecho de ...
HTMLComo inserir imagens? - Exemplo • Obtem-se;        Mónica Ferreira   |   2º Ano de Comunicação audiovisual e Multimédi...
HTMLComo criar tabelas? • Definida pela tag <table>; • São divididas em linhas (<tr>); • Cada linha é dividida em células ...
HTMLComo criar tabelas? - Exemplo • Abrir editor de HTML (Notepad, Dreamweaver); • Entre as tags de abertura e fecho de um...
HTMLComo criar tabelas? - Exemplo • Obtem-se:        Mónica Ferreira   |   2º Ano de Comunicação audiovisual e Multimédia ...
HTMLComo criar listas? • Podem-se criar listas ordenadas e não ordenadas; • <ul> tag de abertura de uma lista não ordenada...
HTMLComo criar listas? - Exemplo • Abrir editor de HTML (Notepad, Dreamweaver); • Entre as tags de abertura e fecho de um ...
HTMLComo criar listas? - Exemplo • Obtem-se;        Mónica Ferreira   |   2º Ano de Comunicação audiovisual e Multimédia  ...
Starting                                                   CSS Mónica Ferreira   |   2º Ano de Comunicação audiovisual e M...
CSSO que é CSS? • Abreviatura de Cascading Style Sheet; • Definimos a disposição dos elementos HTML; • Permite ter um docu...
CSSSintaxe CSS • Cada regra CSS é composta por duas partes: Selector e a Declaração; •O selector é aquilo que queremos for...
CSSSintaxe CSS • Cada declaração é composta por Propriedades e re- spectivos Valores; • Exemplo:               body { back...
CSSComo introduzir CSS? • Folha de estilos externa; • Folha de estilos interna; • “Inline style”;          Mónica Ferreira...
CSSFolha de estilos externa • Ideal quando se quer aplicar estilos a várias páginas; • Pode-se mudar o aspecto todo de um ...
CSSFolha de estilos externa • Exemplo:    <head>    <link rel=”stylesheet” type=”text/css” href=”meucss.css” />    </head>...
CSSFolha de estilos Interna • Deve ser utilizada quando um dado documento tem um estilo específico; • Definida com a tag <...
CSS“Inline Style” • Perde muitas das vantagens das folhas de estilo porque mistura o conteúdo do documento com a apre- sen...
CSSSelectores CSS • CSS permite-nos atribuir dois selectores: “id” e “class”; • “id” usado para especificar um estilo para...
CSSSelectores CSS • “class” usado para especificar um estilo para um grupo de elementos HTML; • “class” usado em mais do q...
CSSPropriedade “background” • Utilizada para atribuir um fundo a um elemento do documento; • “background-color” - atribui ...
CSSPropriedade “background” • “background-attachment” - define se a imagem é fixa ou se “anda” quando se utiliza a barra d...
CSS    Propriedade “background”      • Exemplo:      body {      background: #ffffff url(‘img_tree.png’) no-repeat fixed r...
CSS   Propriedade “text”     • Utilizada para formatar texto;     • “text-color” - define a cor do texto;	     • “text-ali...
Upcoming SlideShare
Loading in...5
×

HTML e CSS

1,320

Published on

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

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,320
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
22
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "HTML e CSS"

  1. 1. HTML e CSS Starting Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  2. 2. Starting HTML Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  3. 3. HTMLO 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. 4. HTMLO 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. 5. HTMLO 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. 6. HTMLO 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. 7. HTMLElementos 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. 8. HTMLElementos 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. 9. HTMLElementos 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. 10. HTMLO 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. 11. HTMLHeadings 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. 12. HTMLHeadings 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. 13. HTMLHeadings HTML - Exemplo • Obtem-se: Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  14. 14. HTMLPará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. 15. HTMLParágrafos HTML - Exemplo • Obtem-se: Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  16. 16. HTMLtags 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. 17. HTMLtags 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. 18. HTMLtags 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. 19. HTMLtags de formatação - Exemplo • Obtem-se: Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  20. 20. HTMLComo 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. 21. HTMLComo 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. 22. HTMLComo 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. 23. HTMLComo inserir imagens? - Exemplo • Obtem-se; Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  24. 24. HTMLComo 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. 25. HTMLComo 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. 26. HTMLComo criar tabelas? - Exemplo • Obtem-se: Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  27. 27. HTMLComo 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. 28. HTMLComo 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. 29. HTMLComo criar listas? - Exemplo • Obtem-se; Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  30. 30. Starting CSS Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  31. 31. CSSO 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. 32. CSSSintaxe 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. 33. CSSSintaxe 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. 34. CSSComo 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. 35. CSSFolha 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. 36. CSSFolha 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. 37. CSSFolha 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. 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. 39. CSSSelectores 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. 40. CSSSelectores 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. 41. CSSPropriedade “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. 42. CSSPropriedade “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. 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 ascaracterísticas. Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  44. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×