Your SlideShare is downloading. ×
0
Criação de sites
Criação de sites
Criação de sites
Criação de sites
Criação de sites
Criação de sites
Criação de sites
Criação de sites
Criação de sites
Criação de sites
Criação de sites
Criação de sites
Criação de sites
Criação de sites
Criação de sites
Criação de sites
Criação de sites
Criação de sites
Criação de sites
Criação de sites
Criação de sites
Criação de sites
Criação de sites
Criação de sites
Criação de sites
Criação de sites
Criação de sites
Criação de sites
Criação de sites
Criação de sites
Criação de sites
Criação de sites
Criação de sites
Criação de sites
Criação de sites
Criação de sites
Criação de sites
Criação de sites
Criação de sites
Criação de sites
Criação de sites
Criação de sites
Criação de sites
Criação de sites
Criação de sites
Criação de sites
Criação de sites
Criação de sites
Criação de sites
Criação de sites
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Criação de sites

121

Published on

Linguagem HTML e Folha de estilos

Linguagem HTML e Folha de estilos

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

  • Be the first to like this

No Downloads
Views
Total Views
121
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. CRIAÇÃO DE SITES HTML ESCRITA E EDIÇÃO CÓDIGO TESTAR AS PÁGINAS
  • 2. HTML – O QUE É?  HTML é a "língua mãe" do seu BROWSER.  Resumindo uma longa história, HTML foi inventado em 1990 por um cientista chamado Tim Berners-Lee.  HTML é a abreviatura de "HyperText Mark-up Language"
  • 3. O QUE É PRECISO ?  Com um “BLinhaSER“, que é um programa que permite visualizar e navegar por páginas na Internet.  E, já deve ter ouvido falar de programas como, Microsoft FrontPage, Adobe Dreamweaver ou mesmo Microsoft Word, que podem criar websites.  Você precisará de um simples editor de textos. Se você tem instalado o Windows, poderá usar o Bloco de Notas, que normalmente pode ser encontrado no menu Programas  Acessórios.
  • 4. Preciso estar online?  Não. Não precisa de estar on-line.  Pode criar e testar as Páginas Web no seu PC.  Mas, para isso depois de escrever o Código HTML, tem de guardar o ficheiro com a extensão .htm ou .html.
  • 5. O que são tags HTML?  Tags são rótulos (ou Marcas) usados para informar ao BLinhaser como deve ser apresentado o website.  Todas as tags têm o mesmo formato: começam com um sinal de menor "<" e acabam com um sinal de maior ">".  Genericamente falando, existem dois tipos de tags - tags de abertura: <comando> e tags de fecho: </comando>.  A diferença entre elas é que na tag de fecho existe um barra "/".
  • 6. O que são tags HTML?  Tudo que estiver contido entre uma tag de abertura e uma tag de fechamento será processado segundo o comando contido na tag.  Mas existem também Tags isoladas - isto é, são tags de comandos isolados, por exemplo, um pulo de linha é conseguido com a tag <br />.  HTML é tag - e nada mais do que tags. Aprender HTML é aprender como usar as diferentes tags.
  • 7. Exemplos tags HTML  <b>Este texto deve ser em Negrito.</b>  <i>Este texto deve ser em Itálico.</i>  <h1>Este é um título</h1>  <h2>Este é um sub título</h2>
  • 8. REVISÕES DA MATÉRIA DADA  O QUE É HTML?  DE QUE É CONSTÍTUIDA HTML?  COM QUETAG COMEÇA ETERMINA UMA PÁGINAWEB?  COM QUETAG COMEÇA ETERMINAO CORPO UMA PÁGINAWEB?  QUAL ATAG DUM CABEÇALHO?QUANTAS ?  DIGA ASTAGS DE:  NEGRITO; ITÁLICO E SUBLINHADO
  • 9. Onde devo colocar todas estas tags?  Você deve escrever as tags num documento HTML.  Um website é constituído por um ou mais documentos HTML.  Quando se navega na Web, você está abrindo diferentes documentos HTML.
  • 10. REVISÕES DA MATÉRIA DADA  QUAL ATAG PARA INSERIR LINHA HORIZONTAL?  QUAL ATAG PARA INSERIR UMA IMAGEM?  QUAL ATAG PARA CENTRAR CONTEÚDO?  QUAL O FORMATO DE IMAGENS QUE JÁ CONHECE E PODE INSERIR NA PÁGINAWEB?  QUAL ATAG QUE PERMITE INSERIR UM PAINEL ROLANTE?  QUAL O FORMATO DUMA IMAGEMANIMADA ?  QUAL ATAG PARA DEFINIR UM PARÁGRAFO?
  • 11. Atributos da tag <Body>  Através de <BODY>, podemos definir cores dos textos, links e fundo das páginas, ou uma imagem de fundo. Temos então:  BGCOLOR - Cor de fundo  Outros atributos daTag <BODY>:  TEXT - Cor da font dos textos
  • 12. Atributos da tag <Body>  LINK - Cor dos links (padrão: azul)  ALINK - Cor dos links, quando clicados (padrão: vermelho)  VLINK - Cor dos Links, depois de visitados (padrão: roxo)  BACKGROUND - Imagem de fundo: Indica o URL da imagem.  Podemos definir tudo de uma só vez, colocando o seguinte código: <BODY BGCOLOR="YELLOW" TEXT="BLACK" LINK="BLUE" ALINK="RED"VLINK="PURPLE">
  • 13. Atributos da tag <FONT>  Já sabe que a TAG FONT- permite definir o Tipo de Letra, mas eis alguns dos seus Atributos de TAMANHO E CORES DAS LETRAS :  <FONT FACE> - Define o tipo de letra  <FONT COLOR> - Define a cor da letra  <FONT SIZE> - Define o tamanho da letra Veja abaixo alguns exemplos: <FONT FACE="ARIAL" SIZE="1" COLOR="RED">Fica assim</FONT>
  • 14. REVISÕES DA MATÉRIA DADA  QUAIS SÃO OS ATRIBUTOS DATAG BODY?  QUAL ATAG PARATRABALHAR COMTEXTO?  QUAL ATAG PARA INSERIR HIPERLIGAÇÃO?  QUAL O ATRIBUTO DATAG BODY QUE PERMITE COLOCAR UMA IMAGEM COMO FUNDO?  O QUE ACONTECE À IMAGEM DO FUNDO QUANDO ELA É PEQUENA?  QUAL O ATRIBUTO DATAG FONT PARA DEFINIR O TIPO DE LETRA?  QUAL O ATRIBUTO DATAG BODY QUE PERMITE COLOCAR UMA CÔR DE FUNDO?
  • 15. COMO FAZER PARÁGRAFOS E LINHAS :  Não basta você teclar ENTER para que a linha vá para baixo.Você terá que colocar umaTAG para um parágrafo ou para uma nova linha. Para um parágrafo sabe que tem de usar aTAG <P> e para linha usar <BR> Exemplo: <P> Primeiro Parágrafo <BR> Primeira Linha<P> Segundo Parágrafo <BR> Segunda Linha Note que cada vez que você coloca aTAG <BR> estará fazendo uma nova linha, que também não deixa de ser um parágrafo.
  • 16. IMAGENS NA PÁGINA WEB:  ATAG utilizada para inserir imagem é:  <img src="nome da imagem+ extensão"(gif,jpg,bmp,png,etc)>  Atributos da Imagem: WIDTH - Define a largura da imagem.  HEIGHT - Define a altura da imagem.  ALT -Texto que aparece quando é passado o ratosobre a imagem  BORDER - É um valor atribuído à largura do limite da imagem (Contorno).
  • 17. IMAGENS FUNDO DA PÁGINA WEB:  Para colocar uma imagem de fundo no seu site é só colocar um atributo dentro da TAG <BODY>, assim:  <BODY BACKGROUND="nome da imagem+extensão">.  Quando a imagem é menor que o tamanho do ecrã, o BLinhaser duplica essa imagem tantas vezes forem necessárias para cobrir todo o espaço do ecrã.  Existem vários tamanhos do ecrã.  Lembre-se: imagens grandes demoram a carregar.
  • 18. CORES RGB (HEXADECIMAIS)
  • 19. CORES RGB (HEXADECIMAIS)
  • 20. CORES RGB (HEXADECIMAIS)
  • 21. CORES RGB (HEXADECIMAIS)
  • 22. COLOCAR LINKS NAS PÁGINAS  ATAG PARA COLOCAR LINKS É <a> LINK </a>  EXEMPLO:  < A HREF=“CAMINHO DA PÁGINA">TEXTO</A>  Entre aspas deverá ser colocado o endereço completo URL (http://...)  Ex Site: < A HREF="http://www.kundanweb.com"> Visite o Site do Formador</A>  Ex Página: < A HREF=“mypage.htm"> Nome da Página.extensão</A>
  • 23. TABELAS NUMA PÁGINA WEB:  As tabelas valorizam o Layout das páginas, pois dão harmonia e organização dos textos, imagens, listas, etc.  A tabela é representada pelasTags  <TABLE> e </TABLE> e possui os seguintes atributos: border="valor" -Onde o "valor" define a largura do limite (contorno). cellspacing="valor" -Onde o "valor" define o espaço horizontal entre as células. cellpadding="valor" -Onde o "valor" define o espaço vertical entre as células.
  • 24. TABELAS NUMA PÁGINA WEB:  width="valor" -Onde o "valor" define a largura da tabela em pixels ou em percentagem. height="valor" -Onde o "valor" define a altura da tabela em pixels ou em percentagem. bgcolor="#cor" -Define a cor de fundo da tabela. bordercolor="#cor" -Define a cor do limite . background="imagem.jpg" -Define uma imagem de fundo.  A tabela possui alguns comandos que são: <TR> e </TR> -Define uma linha da tabela. <TH> e </TH> -Define um cabeçalho da tabela. <TD> e </TD> -Define a coluna de informações.
  • 25. Exemplo: TABELAS  <TABLE BORDER="2" BORDERCOLOR="RED" CELLSPACING="10" CELLPADDING="6" WIDTH="50" HEIGHT="20" BGCOLOR="YELLOW" <TR> <TD> 1a.coluna </TD> <TD>2a.coluna </TD> <TD> 3a.coluna </TD> </TR> <TR> <TD> 1a.linha </TD> <TD> 1a.linha </TD><TD> 1a.linha </TD> </TABLE> </BR>
  • 26. Exercício 1: TABELAS  Tabela sem linha  <table> <tr><td>Conteúdo Célula</td></tr> </table>  Tabela com linha  <table border=1> <tr><td>Conteúdo Célula</td></tr> </table>
  • 27. Exercício 2: TABELAS  <table border="1"> <tr> <td>célula 1</td><td>célula 2</td> </tr> <tr> <td>célula 3</td><td>célula 4</td> </tr> </table>
  • 28. Qual a diferença entre <tr> e <td>?  Como você deve ter visto no exemplo anterior as 3 tags básicas são usadas para inserir tabelas:  <table> começa e termina uma tabela. Evidente.  <tr> significa "table row" - linha de tabela - começa e termina e uma linha horizontal da tabela. Também evidente.  <td> significa "table data" - dados da tabela. começa e termina cada célula contida nas linhas da tabela.Tudo simples e evidente.
  • 29. Exercício 3: TABELAS  <table border="1" width="400" height="150">  <tr> <td>Linha 1, Coluna 1</td> <td>Linha 1, Coluna 2</td> </tr>  <tr> <td>Linha 2, Coluna 1</td> <td>Linha 2, Coluna 2</td> </tr> </table>
  • 30. Exercício 4: TABELAS  <table width="200" align="right" border="1"> <tr><th colspan="3">Exemplo célula unida!</th> </tr> <tr><td>célula1<td>  <td>célula2</td>  <td>célula3</td> </tr> </table>
  • 31. CSS  Já sabe que o HTML é a linguagem utilizada para criar Páginas Web.  Vimos que formatamos asTags localmente, até esta altura.  Isto porque as páginas que criou, são simples e que não precisam de tanta formatação..  Mas, imagine que tem um Site de 50 páginas e precisa de Formatá-las todas ao mesmo tempo !!!  O QUE HAVERIA DE FAZER ???
  • 32. CSS  Aí é que entram as CSS, sigla em inglês para Cascading Style Sheet que em português foi traduzido para Folha de Estilo em Cascata.  A tarefa de estilização ficará a cargo da CSS declaradas propriedades e valores de estilização para os elementos da HTML.  Estas declarações de estilo, podem ser estruturadas num ficheiro externo com extensão .css quer sejam declaradas de outros modos (importadas, lincadas, incorporadas ou inline ), contém todas as regras de estilo para os elementos do documento HTML.
  • 33. Vantagens do CSS  Inúmeras são as vantagens do uso das CSS nos documentosWeb. Eis uma relação das principais:  controle total sobre a apresentação do site a partir de um ficheiro central;  agilização da manutenção e redesign do site;  saída para diferentes tipos de media a partir de uma versão única de HTML;  redução do tempo de carga dos documentosWeb;  adequação simplificada aos critérios de acessibilidade e usabilidade;  elaboração de documentos consistentes com as aplicações de utilizações futuras;  aumento considerável na portabilidade dos documentos Web.
  • 34. Regras CSS  Uma regra CSS é uma declaração que segue uma sintaxe própria e que define como será aplicado estilo a um ou mais elementos HTML.  Um conjunto de regras CSS formam uma Folha de Estilos.  Uma regra CSS, na sua forma mais elementar, compõe-se de três partes: um seletor, uma propriedade e um valor e tem a sintaxe conforme mostrado abaixo:  seletor { propriedade: valor; }
  • 35. Regras CSS  Muitas das propriedades usadas em Cascading Style Sheets (CSS) são semelhantes àquelas do HTML.  Assim, se está acostumado a usar HTML para layout irá reconhecer muitos dos códigos que vai usar. Vamos dar uma olhada em um exemplo concreto.  Suponha que desejamos uma cor de fundo vermelha para a página web:  Usando HTML podemos fazer assim:  <body bgcolor="#FF0000">  Com CSS o mesmo resultado será obtido assim:  body {background-color: #FF0000;}
  • 36. Regras CSS  Como você pode notar os códigos HTML e CSS são mais ou menos parecidos.  O exemplo acima serve também para demonstrar o fundamento do modelo CSS:
  • 37. seletor { propriedade: valor; }  Seletor: genericamente, é o elemento HTML identificado por sua tag, ou por uma classe, ou por uma ID, e para o qual a regra será válida (por exemplo: <p>, <h1>, <form>, etc...);  Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo: font, color, background, etc...).  Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo arial, cor azul, fundo verde, etc...)
  • 38. seletor { propriedade: valor; }  Na sintaxe de uma regra CSS, escreve-se o seletor e a seguir a propriedade e valor separados por dois pontos e entre chaves { }.  Quando mais de uma propriedade for definida na regra, deve-se usar ponto-e-vírgula para separá-las. O ponto-e-vírgula é facultativo no caso de propriedade única e também após a declaração da última propriedade quando houver mais de uma.  No entanto é de boa técnica usar-se sempre o ponto-e-vírgula após cada regra para uma propriedade.
  • 39. Exemplo 1  <html>  <head>  <style type=”text/css”>  p  {  color:blue;  text-align:center;  }  </style>  </head>  <body>  <p>Olá </p>  <p>Olá malta</p>  </body>  </html>
  • 40. Exemplo 2  p {  font-size: 12px; /* ponto-e-vírgula é facultativo */  p {  text-align: right;  color: #f00;  }  p {text-align: right;color: #f00;}
  • 41. Exemplo 3  h3 {  font-family: "Comic Sans MS";  }  body {  color: #000;  background: #fff;  font-weight: bold; /*ponto-e-vírgula é facultativo */  }
  • 42. 1- Formas de inserir CSS  1ª Forma: CSS diretamente nas tags HTML  <html ><head> <title>Seu título</title> </head>  <body>  <p style="color:#B000FF;">CSS dentro das tags HTML</p>  </body>  </html>
  • 43. 1ª Forma: CSS diretamente nas tags HTML  Essa forma não é recomendada pois ali está a misturar a camada de conteúdo(HTML), com a camada de apresentação(CSS).  Utilize somente em casos de extrema necessidade, ou somente para efetuar testes.
  • 44. 2- Formas de inserir CSS  2ª Forma: CSS dentro do Head de sua página  <html >  <head> <title>Seu título</title>  <style type="text/css"> .texto {color:#B000FF;} </style>  </head> <body>  <p class="texto">Estilo chamado através do head da página</p> </body> </html>
  • 45. 2- Formas de inserir CSS  2ª Forma: CSS dentro do Head de sua página  Nessa 2ª forma, utilizamos de classes ou ids para dar estilo a nossa página, inserindo o CSS dentro do Head da nossa página.  E, depois é invocada no respectivo objecto ouTAG.
  • 46. 3- Formas de inserir CSS  3ª Forma: CSS dentro do Head de sua página vindo de um Ficheiro externo (estilos.css).  <html >  <head> <title>Seu título</title> <link rel=”stylesheet” type=”text/css” href=”estilo.css” /> </head> <body> <p class=”texto”>Estilo chamado através do head da página</p> </body> </html>
  • 47. 3- Formas de inserir CSS  3ª Forma: CSS dentro do Head de sua página vindo de um Ficheiro externo (estilos.css).  Essa é a forma mais recomendada, pois o nosso CSS fica em um Ficheiro externo, e as camadas ficam todas separadas.  E, também temos a vantagem de que se precisarmos efectuar alguma manutenção no CSS, não precisaremos tocar no HTML.  Basta alterar no ficheiro .CSS e a mudança afectará o Site todo.
  • 48. Ficheiro CSS externo  Uma folha de estilo é dita externa, quando as regras CSS estão declaradas num documento à parte do documento HTML.  Uma folha de estilo externa é ideal para ser aplicada a várias páginas.  Com uma folha de estilo externa, você pode mudar a aparência de um site inteiro mudando regras de estilos contidas em um Ficheiro apenas (o Ficheiro da folha de estilo com extensão .css).
  • 49. Ficheiro CSS externo  O Ficheiro css da folha de estilo externa deverá ser linkado ou importado ao documento HTML, dentro da secção head do documento.  A sintaxe geral para linkar uma folha de estilo chamada estilo.css é mostrada a seguir.  <head>  <link rel="stylesheet" type="text/css" href= "estilo.css">  </head>
  • 50. Ficheiro CSS externo  O Browser "lerá" as regras de estilo na própria página, e formatará o documento de acordo com elas.

×