0151

123 visualizações

Publicada em

0151 - Linguagem Html e Construção de páginas para a Internet

Publicada em: Internet
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
123
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
0
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

0151

  1. 1. Caracterizar a linguagem HTML como base na construção de páginas para Internet Joana Fontinha Ferreira Formação Tecnológica Técnico/a de Multimédia Tema: Linguagem HTML e Construção de Páginas de Internet
  2. 2. Introdução à Internet e ao HTML
  3. 3. O que é a Internet?
  4. 4. A Internet, ou apenas a Net, é uma rede mundial de computadores ligados entre si através de linhas telefónicas comuns, cabo, fibra ótica, satélites e outros serviços de telecomunicações, com o objetivo de partilhar informação.
  5. 5. 5 Internet Um pouco da sua História
  6. 6. • A Internet surgiu em 1969, nos Estados Unidos da América, para fins militares. Surgiu como uma rede de comunicação entre as bases militares espalhadas pelos E. U. A., sob o nome de ARPANET. • Em 1972 as universidades passaram a usufruir dessa rede, e deu-se a separação em duas: MILNET – utilizada pelas bases militares ARPANET – utilizada pelas universidades • Em 1982 foi criado o protocolo TCP/IP – conjunto de regras que as redes têm obrigatoriamente que respeitar, e que permitiu o aparecimento de mais redes, com a possibilidade de comunicação ente elas. • Durante os anos seguinte as redes foram evoluindo. • Apenas em 1995 a Internet foi aberta ao uso global e comercial, e passou a estar disponível nas nossas casas. 6
  7. 7. World Wide Web (www) A World Wide Web, traduzido para português como teia global, e vulgarmente conhecida como WWW é um sistema de ficheiros interligados e executados através da internet.     Toda a informação que existe na internet se encontra guardada nos servidores na forma de ficheiros.     Pode dizer-se então que a World Wide Web é o conjunto de toda a informação existente na internet: páginas web, imagens, músicas, vídeos, etc…
  8. 8. 8 Muitas vezes a World Wide Web confunde-se com a própria Internet, no entanto são coisas distintas:     Internet – é a rede de computadores – hardware. É uma coisa física – os computadores ligados entre si através de cabos ou redes sem fios.   World Wide Web – é a informação que circula na rede, na internet, ou seja, os ficheiros das páginas, as imagens, as músicas, vídeos, que circulam nos cabos ou nas redes sem fios. World Wide Web (www)
  9. 9. 9 Uma página Web é uma “página” na World Wide Web, contendo hiperligações que permitem a navegação de uma página, ou secção, para outra. As páginas contêm com frequência imagens e animações gráficas para fins de ilustração, e também estes ficheiros podem ser hiperligações clicáveis.    O conteúdo de uma página Web visualiza-se através de um navegador, ou browser, que tem que estar instalado no computador do utilizador. Páginas de Internet ou Páginas Web
  10. 10. 10 Um sítio, site ou Website da Internet é um conjunto de páginas Web relacionadas entre si, e normalmente alojadas no mesmo servidor.     Um site é sempre constituído por uma página principal, ou inicial, e esta contém hiperligações para outras páginas. Por sua vez, as outras páginas também contêm hiperligações para outras páginas, e normalmente uma hiperligação para a página inicial. Sítio, Site ou Website da Internet
  11. 11. 11 A Internet evoluiu muito nos últimos anos.   Estamos agora na versão 5 do HTML – veremos de seguida o que é - e na versão 11 do Internet Explorer, na versão 37 do Google Chrome, e os sites sofreram igualmente uma grande evolução.   A classificação dos sites em gerações não tem uma relação direta com as versões do HTML e dos browsers. Os requisitos para um site ser classificado de determinada geração estão mais relacionados com o design, do que propriamente com a tecnologia utilizada. Sites – as várias gerações
  12. 12. 12 Os primeiros sites na Web privilegiavam apenas o conteúdo e não a forma. Foram criados por cientistas que desejavam partilhar as suas ideias com outros cientistas. Esses sites eram muito simples e tinham um mínimo de funcionalidade. Na primeira geração, nota-se claramente uma limitação do grafismo das páginas, condicionada por modems lentos e monitores monocromáticos. Os gráficos e textos eram apresentados sempre de cima para baixo e da esquerda para a direita. Era muito comum o uso de saltos de linhas, marcadores e linhas horizontais para separar parágrafos. Sites de 1º Geração
  13. 13. 13 No início de 1995, foram lançadas diversas extensões à linguagem HTML no browser Netscape Navigator (que até então dominava sozinho a Web). A evolução nos sites surgiu na forma de ícones, imagens de fundo, botões, tabelas e gráficos. A estrutura deixou de ser linear para ser apresentada de forma hierárquica, quase sempre através de menus com vários níveis. A maior diferença da segunda geração para a primeira foi a substituição de palavras por elementos gráficos. Passam a aparecer ícones, surgem imagens de fundo em vez dos antigos fundos cinzas, os gráficos coloridos e animados substituem as imagens antigas. Cria- se o conceito de "home-page": uma página cheia de desenhos 3D, janelas e botões, que serve para aceder ao restante do site. Nesta época, a legibilidade deixou de ser importante, em deterioramento da estética. Para ter um bom site, era necessário mostrar uma grande quantidade de truques técnicos. Sites de 2º Geração
  14. 14. 14 O que distingue a terceira geração das demais é o design. A ideia passou a ser proporcionar aos utilizadores novas experiências, através de recursos interativos. Na terceira geração o conteúdo voltou ao seu lugar de destaque. No entanto, a forma não foi deixada de lado. Há uma preocupação simultânea de funcionalidade e beleza estética. Há grande preocupação com o layout, a harmonia entre as cores, a escolha do tipo de letra adequado, o uso correto dos gráficos e o tempo para carregar cada página. Acima de tudo, há um compromisso em ser agradável (em todos os sentidos) ao utilizador. Os programadores e designers destes novos sites utilizam metáforas e modelos psicológicos dos consumidores. Assim, como os arquitetos que fazem os centros comerciais, eles passam horas e até dias a pensar em como tornar suas páginas mais atraentes aos utilizadores. Criar sites de terceira geração é um trabalho árduo, que exige dedicação e uma grande sentimento daquilo que agrada ao público-alvo. Em geral, envolve o trabalho de uma equipa que precisa de trabalhar unida para fazer cada página o melhor possível, e o site como um todo a funcionar sempre com o objetivo de captar os utilizadores. Sites de 3º Geração
  15. 15. 15 Exercicio sobre as Várias Gerações de Websites   Para uma melhor percepção das 3 primeiras gerações de Websites, façam uma pesquisa pela Internet e descrevam com o apoio de textos e imagens sobre as 3 primeiras gerações. De seguida deverão guardar o documento em formato PDF e enviar para o email da turma. Sites – as várias gerações
  16. 16. 16 O HTML é uma linguagem de programação, utilizada para construir páginas Web. A sigla HTML significa: HiperText Markup Language O HTML foi desenvolvido no início dos anos 90 e foi sofrendo sucessivas evoluções. Em 1996 foi estandarizado pela W3C – World Wide Web Consortium. O HTML
  17. 17. 17 O HTML não é utilizado isoladamente na programação das páginas Web. O HTML é a base das páginas, e a complementá-lo existem outras linguagens tais como o CSS, o JavaScript, o PHP, entre outras. O HTML, ao contrário de outras linguagens de programação, não é compilado nem é criado um executável. O HTML é uma linguagem que é interpretada. O software que interpreta o HTML e mostra o resultado da conversãodo código chama-se navegador oubrowser. Exemplos de browsers: O HTML Internet Explorer Mozilla Firefox Google Chrome
  18. 18. 18 A extensão dos ficheiros de HTML é .html ou .htm Para criar ficheiros em HTML pode utilizar-se, por exemplo, o Notepad ++ ou o Bloco de Notas, e depois é só guardar os ficheiros com a extensão .html ou .htm Quando os mesmos são abertos por um browser, o browser vai percorrer todas as linhas de código do ficheiro e vai transformar as instruções do código em texto (de vários tamanhos e cores), imagens, tabelas, hiperligações, animações, etc… Por defeito, na maioria dos sistemas operativos, um ficheiro de HTML é distinguido pela da extensão html ou htm, pelo que, quando se tenta abrir um ficheiro deste tipo, imediatamente é ativado o browser predefinido, de forma a poder visualiza-lo. Ficheiros de HTML
  19. 19. 19 Utilizar o Html para construção das Páginas O HTML é constituído por umas instruções básicas que se chamam TAGS. Uma tag é uma instrução com uma determinada função, que vai ser interpretada pelo browser, e vai ter efeitos sobre a estrutura da página, sobre o texto, sobre uma imagem, uma hiperligação, etc… As tags colocam-se sempre entre os sinais de < (menor) e > (maior). Dependendo do facto de terem que ser fechadas ou não, as tags dividem-se em dois grupos: Únicas - quando não existe a tag de fecho. <TAG> Duplas – quando existe uma tag de fecho, que é igual à de abertura, mas tem uma barra / a seguir ao sinal de menor. <TAG> … </TAG>
  20. 20. 20 Utilizar o Html para construção das Páginas Dependendo das opções (argumentos) que as tags podem ter, elas podem ainda ser classificadas como: Simples – quando são constituídas apenas pelo sinal de <, nome da tag, e sinal de > <TAG> Com argumentos – quando a seguir ao nome da tag têm uma ou mais instruções com indicações complementares sobre a formatação do texto, do fundo, dos limites, etc… <TAG argumento1=“condição” argumento2=“condição” … > Os argumentos são eles também instruções para o browser. Os argumentos são constituídos pelo nome, seguidos do sinal de igual, e pela condição de formatação entre aspas. Os vários argumentos separam-se por um espaço. nome_do_argumento=“condição”
  21. 21. 21 Estruturo de um documento HTML Um documento em HTML começa e termina sempre com a tag <HTML> . . . </HTML> Dentro destas tags, temos duas secções básicas: HEAD – controla as especificações do cabeçalho de uma página. Uma tag muito utilizada no HEAD é a tag TITLE, que permite escrever o título da página. BODY – controla as especificações da parte principal de uma página.
  22. 22. 22 Estruturo de um documento HTML < HTML> < HEAD> < TITLE> Primeira página em HTML< / TITLE> < / HEAD> < BODY> Esta é minha primeira página em HTML! < / BODY> < / HTML> HEAD BODY
  23. 23. 23 Exercicio – Introdução à Internet e ao HTML  
  24. 24. 24 Tad Body - argumentos Alguns argumentos da tag BODY: BGCOLOR – permite formatar a cor do fundo da página BACKGROUND – permite formatar o fundo da página com uma imagem <HTML> <HEAD> <TITLE>Primeira página em HTML</TITLE> </HEAD> <BODY BGCOLOR="green"> Esta é minha primeira página em HTML! </BODY> </HTML>
  25. 25. 25 TAGS de formatação de texto BR> Permite fazer quebras de linha. <CENTER>…</CENTER> Centra o texto e todos os elementos contidos entre o sua abertura e o seu fecho. <B>…</B> Aplica o estilo negrito. <I>…</I> Aplica o estilo itálico. <U>…</U> Aplica o estilo sublinhado. <SUP>…</SUP> Faz com que o texto fique sobrescrito. <SUB> …</SUB> Faz com que o texto fique subscrito. <P>…</P> Cria um parágrafo na página. TAGS de títulos e subtítulos - H1 tem o tamanho maior, e H6 o mais pequeno: <H1>…</H1> <H2>…</H2> … <H6>…</H6>
  26. 26. 26 TAGS de formatação de texto <FONT ARGUMENTO=“condição” …>…</FONT> – formatação do texto contido entre a sua abertura e o seu fecho. Argumentos mais utilizados: COLOR – permite alterar a cor do texto SIZE – permite alterar o tamanho do texto FACE – permite alterar o tipo de letra Exemplo: <HTML> <HEAD> <TITLE>Primeira página em HTML</TITLE> </HEAD> <BODY BGCOLOR="black"> <CENTER> <FONT COLOR="red" SIZE="4"> <I>Texto vermelho<BR>a itálico</I> </FONT> </CENTER> </BODY> </HTML>
  27. 27. 27 TAGS de formatação de texto HTML> <HEAD> <TITLE>Página de teste</TITLE> </HEAD> <BODY BACKGROUND="sky.jpg" > <CENTER> <H1>Isto é um título H1</H1> <H2>Isto é um título H2</H2> <P><FONT COLOR="yellow" SIZE="4"> <B>Isto é um novo parágrafo.</B> </FONT></P> </CENTER> Texto normal <SUB>Texto subscrito</SUB> <SUP>Texto sobrescrito</SUP> </BODY> </HTML>
  28. 28. 28 TAGS de formatação de texto - Alinhamento As tags de título (H1, H2, …, H6) e a tag de parágrafo (P), podem ter com argumento a instrução ALIGN, cujos valores podem ser ◦ left – o texto fica alinhado à esquerda ◦ right – o texto fica alinhado à direita ◦ center – o texto fica alinhado ao centro ◦ justify - o texto fica justificado Exemplo: <HTML> <HEAD> <TITLE>Título da página</TITLE> </HEAD> <BODY> <H1>Texto 1</H1> <H2 ALIGN="center">Texto 2</H2> <H3 ALIGN="left">Texto 3</H3> <P ALIGN="right">Texto 4</P> <P ALIGN="justify">Texto 5</P> <H6>Texto 6</H6> </BODY> </HTML>
  29. 29. 29 Quebras de Linha As quebras de linha são criadas através da utilização da tag <BR> e utilizadas quando se pretende forçar uma mudança de linha, num determinado ponto do texto, sem criar um parágrafo. A tag <BR> não tem tag de fecho nem qualquer conteúdo. Exemplo: <HTML> <HEAD> <TITLE>Exemplo</TITLE> </HEAD> <BODY> <P> Isto<BR>é um parágrafo com<BR> uma quebra de linha </P> </BODY> </HTML>
  30. 30. 30 Linhas divisórias Para dividir uma página com linhas horizontais utiliza-se a tag <HR>. Atributos da tag HR: Exemplo: <HTML> <HEAD> <TITLE>Exemplo</TITLE> </HEAD> <BODY> <P>O tag hr desenha uma linha horizontal:</P> <HR> <P>Isto é uma linha horizontal</P> </BODY> </HTML> Atributo Valor Descrição           ALIGN center left right     Especifica a posição da linha horizontal   NOSHADE true false Quando o valor é falso, a linha apresenta um relevo, surgindo lisa quando o valor for verdadeiro   SIZE pixels % Espessura da linha   WIDHT pixels % Comprimento da linha
  31. 31. 31 Cores em HTML Até ao momento, nos atributos COLOR e BGCOLOR utilizámos apenas as cores com o seu nome em inglês: COLOR="red" BGCLOR="yellow"   Esta forma de representar as cores é muito limitada, pois: ◦ Apenas nos permite representar um número muito reduzido de cores; ◦ Não permite representar uma mesma cor em várias tonalidades diferentes.     Para contornar essas limitações o HTML permite a representação das cores no sistema RGB. RGB tem origem no nome, em inglês, das 3 cores: RedGreenBlue. A partir de uma combinação dessas 3 cores é possível obter qualquer umas das cores existentes.
  32. 32. 32 Cores em HTML – sistema RGB As cores em sistema RGB representam-se por uma sequência de 3 números, que podem variar entre 0 e 255, correspondendo cada número à quantidade Red, Green e Blue, respectivamente.   O preto, a cor mais escura de todas representa-se por ( 0 , 0 , 0). O branco, a cor mais clara, representa-se por (255 , 255 , 255 ).   O vermelho representa-se, obviamente por ( 255 , 0 , 0 ) ou seja, tudo vermelho, zero verde, zero azul.    O verde representa-se, obviamente por ( 0 , 255 , 0 ) ou seja, zero vermelho, tudo verde, zero azul.     O azul representa-se, obviamente por ( 0 , 0 , 255 ) ou seja, zero vermelho, zero verde, tudo azul.
  33. 33. 33 Cores em HTML – sistema RGB O número total de cores distintas que é possível representar através do sistema RGB é: 256 × 256 × 256 = 16’776’216. Quase17 milhões!     Basta variar um número na cor, que a tonalidade já será ligeiramente diferente. (123 , 134, 34 ) ≠ (123 , 134, 35 )   Para representar uma cor no sistema RGB, em HTML utiliza-se a seguinte notação: COLOR="rgb(0,0,255)" → forma de representar o azul em HTML COLOR="rgb(255,0,255)" → forma de representar o rosa em HTML
  34. 34. 34 Cores em HTML – sistema RGB BGCOLOR="rgb(255,255,0)" → forma de representar o amarelo em HTML
  35. 35. 35 Cores em HTML – sistema Hexadecimal Além do sistema RGB, as cores podem ser também representadas e istema Hexadecimal. Os caracteres Hexadecimais que existem são: 0 1 2 3 4 5 6 7 8 9 A B C D E F 0 é o valor mais pequeno, e F é o maior) Para representar uma cor em Hexadecimal, faz-se a conversão dos números decimais para hexadecimal, e coloca-se antes um cardinal (#). O formato Hexadecimal assume então a seguinte codificação: #RRGGBB
  36. 36. 36 Cores em HTML – sistema Hexadecimal s cores no sistema Hexadecimal, representam-se por uma sequência de racteres, de entre o conjunto (0 1 2 3 4 5 6 7 8 9 A B C D E F) , em cada sequência de 2 caracteres corresponde à quantidade Red, Green ue, respectivamente. preto, a cor mais escura de todas representa-se por #000000 branco, a cor mais clara, representa-se por #FFFFFF vermelho representa-se, obviamente por #FF0000 Em HTML: u seja, tudo vermelho, zero verde, zero azul. COLOR="#FF0000" verde representa-se, obviamente por #00FF00 Em HTML: u seja, zero vermelho, tudo verde, zero azul. COLOR="#00FF00" azul representa-se, obviamente por #0000FF Em HTML: seja, zero vermelho, zero verde, tudo azul. COLOR="#0000FF"
  37. 37. 37 Como saber qual o formato RGB e Hexadecimal de uma cor? Ir ao Google e pesquisar por “HTML colors”.      Encontras muitas páginas que te fornecem os códigos RGB e Hexadecimais das cores.   Exemplo: http://www.w3schools.com/html/html_colors.asp E se tiveres uma imagem da qual queiras utilizar a cor?     Abres a imagem com o Paint Clicas em cima da cor com o seleccionador de cores Vais a Editar → Cores, Definir cor personalizada Aqui encontras os códigos RGB da cor Em HTML: COLOR="rgb(16,214,49)"
  38. 38. 38 Converter RGB para Hexadecimal Para converter o formato decimal para hexadecimal basta ir ao Google e pesquisar por Converter RGB em Hexadecimal   Encontrarás várias páginas que te farão a conversão. Exemplo: http://www.webcalc.com.br/utilitarios/rgb_hex.html Em HTML: COLOR="#10D631"
  39. 39. 39 Exemplo de utilização das cores <HTML> <HEAD> <TITLE> Exemplo </TITLE> </HEAD> <BODY BGCOLOR="rgb(250,134,11)"> <CENTER> <FONT SIZE="6"> Página com o fundo com uma cor em RGB </FONT> <BR><BR> <FONT SIZE="6" COLOR="#00993F"> Texto com a cor em Hexadecimal </FONT> </CENTER> </BODY> </HTML>
  40. 40. 40 Hiperligações em HTML A tag para criar hiperligações é a tag A – é uma tag dupla. <A ARGUMENTO="condição"… > Texto da Hiperligação </A> Os principais argumentos são: HREF – destino da hiperligação (pode ser uma página web, um ficheiro, etc…) TARGET – especifica como vai ser aberta a hiperligação (se na mesma janela, numa janela nova, etc…) O valor do TARGET pode ser: _self : abre a hiperligação na mesma janela _blank : abre a hiperligação numa nova janela Exemplos: <A HREF="http://www.google.pt" TARGET="_blank"> Google </A>   <A HREF="imagem1.jpg" TARGET="_self"> Imagem </A>
  41. 41. 41 Hiperligações em HTML - Exemplos <HTML> <HEAD> <TITLE> Página com hiperligações </TITLE> </HEAD> <BODY> <CENTER> <A HREF="http://www.google.pt" TARGET="_blank" > Google </A> <BR><BR> <A HREF="sky.jpg" TARGET=" _self" > Imagem do céu azul </A> </CENTER> </BODY> </HTML>
  42. 42. 42 Imagens HTML A tag de inserção de imagens é a tag IMG. É uma tag única, pelo que não tem fecho. No entanto tem a barra antes do sinal de >. <IMG ARGUMENTO="condição"… /> Argumentos da tag IMG: SRC – nome do ficheiro da imagem ALIGN – alinhamento da imagem. Pode tomar os valores: left e right. BORDER – serve para colocar um bordo na imagem, medido em pixéis. Ex: 10px HEIGHT – serve para especificar a altura da imagem. Pode ser em pixéis, ou em percentagem da altura original. Ex: 110px; 90% WIDTH - serve para especificar a largura da imagem. Pode ser em pixéis, ou em percentagem da largura original. Ex: 230px; 120% Exemplo: <IMG SRC="imagem.jpg“ ALIGN="left" />
  43. 43. 43 Imagens HTML - center Para centrar uma imagem, utiliza-se a tag CENTER, que deverá ser aberta antes da imagem, e fechada depois (tal como se utiliza para centrar texto). <HTML> <HEAD> <TITLE>Imagem</TITLE> </HEAD> <BODY> <CENTER> <IMG SRC="imagem.jpg" BORDER="5px" /> </CENTER> </BODY> </HTML>
  44. 44. 44 Imagens HTML – alinhar e redimensionar Para alinhar uma imagem à direita utiliza-se o argumento ALIGN. Para redimensionar a imagem são os argumentos HEIGHT e WIDTH. <HTML> <HEAD> <TITLE>Imagem</TITLE> </HEAD> <BODY> <IMG SRC="imagem.jpg" ALIGN="right" HEIGHT="150px" WIDTH="200px" /> </BODY> </HTML>
  45. 45. 45 Imagens animadas em HTML Além de imagens no formato JPG, também é possível inserir imagens em formato BMP e PNG, e imagens animadas em formato GIF. <HTML> <HEAD> <TITLE>Imagem</TITLE> </HEAD> <BODY> <CENTER> <IMG SRC="patos.gif" /> <IMG SRC="imagem.png" /> </CENTER> </BODY> </HTML>
  46. 46. 46 Imagens como Hiperligação Uma imagem pode funcionar como uma hiperligação.. Para isso basta declarar a imagem dentro da tag de hiperligação. Exemplo: <A HREF="http://www.sapo.pt" TARGET="_self"> <IMG SRC="imagem.jpg" /> </A>
  47. 47. 47 Imagens como Hiperligação - Exemplo <HTML> <HEAD><TITLE>Imagem</TITLE></HEAD> <BODY> <CENTER>A seguinte imagem é uma hiperligação para o Google<BR><BR> <A HREF="http://www.google.pt" TARGET="_self"> <IMG SRC="logo_google.jpg" BORDER="0px" HEIGHT="30%"/> </A> </CENTER> </BODY> </HTML>

×