Aula1web html

230 visualizações

Publicada em

Publicada em: Tecnologia
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
230
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
7
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Aula1web html

  1. 1. Módulo 1Introdução ao ambiente web ccunip2011@hotmail.com shinodaluk@gmail.com
  2. 2. A World Wide Web – WWWA idéia inicial da Internet surgiu, em 1969, como uma rededescentralizada para interligar instalações militares (ARPANET).Durante a década de 70 várias outras redes foram sendointerligadas à ARPANET e, em 1980, ela passou a se chamarInternet.A World Wide Web (WWW), ou simplesmente Web, foidesenvolvida no final da década de 80 como uma forma defacilitar aos pesquisados o acesso a documentos científicos.
  3. 3. Com a Web, ganhou força a utilização, em larga escala, datécnica de hipertextos.Um hipertexto é um documento onde é possível incluir referências(Links) a outros documentos.A seleção de uma destas referências, leva o usuário ao documentoreferenciado.Inicialmente, a informação disponível na Web era encontradaprincipalmente sob a forma de textos e hipertextos.Aos poucos foram sendo incorporados elementos gráficos eanimações aos documentos que contribuíram para apopularização da Web, aproximando-a mais do cidadão comum.
  4. 4. Atualmente, a Web é utilizada na divulgaçãocientífica, trabalho cooperativo, disponibilização de informaçõesculturais e livros eletrônicos, promoção de produtos eserviços, realização de comércio eletrônico e suporte técnicoe vários outros usos que vão sendo concebidos continuamente.Uma característica importante da Web (Internet) é que ainformação é disponibilizada de forma independente do tipode computador que será utilizado para a sua visualização.
  5. 5. Para isso é necessário que os documentos sejam escritosutilizando um formato padronizado.A padronização é obtida através de uma linguagem chamadaHTML:HyperText Markup Language.O padrão HTML é definido pelo World Wide Web Consortium-W3C.O código HTML contém instruções de visualização de texto einformação para localização de outros documentos (links).
  6. 6. Navegadores (Browser)Para poder visualizar corretamente o documento, o usuárionecessita de um programa (navegador) capaz de interpretaresta linguagem, reconstituindo a informação segundo asinstruções contidas no código.Para ter acesso a um documento na Web, o usuário deve fornecerao navegador um conjunto de informações sobre este documento:a) seu protocolo de comunicação (HTTP, FTP)b) o endereço, na Internet, da máquina na qual se encontra o documento,c) o diretório onde o documento está arquivado na máquina ed) o nome do documento.
  7. 7. As informações dos itens a) a d) são resumidas em formato padrãodenominado URL (Uniform Resource Locator) .Exemplo: http://www.unip.br/bibliotecaUma URL obedece ao seguinte formato:protocolo://servidor/caminho/arquivoOnde:protocolo – Indica a forma de realização da comunicação entre oservidor e o cliente e também o tipo de serviço que será prestado.No caso de HTML o protocolo é o http (HyperText TransferProtocol).servidor – Endereço do servidor web.Formas: nome_da_máquina.domínio ou através do endereço IPda máquina (146.164.2.68).
  8. 8. caminho – Localização do arquivo no disco do servidoratravés de um diretório ou de uma lista de diretórios. (porexemplo: http://www.ic.uff.br/~aconci/curso/formatos.html, onde~aconci e curso são diretórios ou "pastas").arquivo – Nome do arquivo desejado.No exemplo, formatos.html
  9. 9. O computador que contém o documento solicitado deveexecutar um programa que, recebendo pedido do documento,localiza-o no disco e envio-o para a máquina que fez a solicitação.O programa executado no computador que recebe pedidos échamado de Servidor Web.O computador que solicita documentos, através de navegadores, éconhecido como Cliente.Exemplos de navegadores:Netscape, Internet Explorer, Mosaic, Lynx. Opera, Mozilla Firefox,Google Chrome.Exemplo de Servidores (Web Servers):NCSA, CERN, Apache (ambiente UNIX), PWS, IIS (ambientewindows).
  10. 10. Características Gerais de HTMLUm documento escrito em HTML é um arquivo ASCIIcomum, contendo apenas os caracteres ASCII visíveis.O navegador ignora qualquer caracter especial, inclusiveaqueles que sugerem algum tipo de formatação ao texto(como TAB, CR, LF).Qualquer tipo de formatação deve ser informada através doscomandos conhecidos como tags.
  11. 11. As tags, ou marcas, se diferenciam do texto comum porSerem escritas entre "<" e o ">".Algumas tags contêm atributos que permitem configuraralgumas características.E alguns atributos podem ter valores específicos. Estes atributossão colocados entre os delimitadores (< e >), após o nome da tag.Os valores vêm depois de um sinal de "=" colocado junto aosatributos.A sintaxe genérica de uma tag é :<nome atributo1=valor atributo2= valor....>Como por exemplo:<A HREF="http://faperj.br"><HR SIZE=8 WIDTH=80%>
  12. 12. Tipos de tagsHá dois tipos de tags:container tags (ou emparelhada)empty tags.Container TagsServem para definir um efeito sobre um trecho dodocumento.Estas tags vêm sempre aos pares: uma tag no início do texto eoutra no final.Por exemplo, para indicar que uma parte do texto deve serexibida em negrito utiliza-se o par de tags <B> e </B>.Palavras em <i>italico e <B>negrito</B> ficam realcadas </i>diferentemente
  13. 13. Empty TagsSão tags que produzem efeitos locais, normalmenteintroduzindo algum elemento no texto, e, portanto, nãoprecisam de uma tag finalizadora.Um exemplo é a tag <BR> que insere no texto uma mudança delinha.
  14. 14. Estrutura de um Documento HTMLTodo documento HTML tem a seguinte estrutura:<HTML> < HEAD> <TITLE> Titulo da Pagina </TITLE> </HEAD> <BODY> Descrição do documento </BODY></HTML>
  15. 15. HTMLA tag HTML indica ao navegador a área onde deve estar contidoodocumento HTML.HEADA tag HEAD é o cabeçalho do documento.Nesta área são colocadas tags com informações relativas aodocumento.A tag mais importante destas informações está contida na tagTITLE que deve sempre ser incluída em todas as páginas.Normalmente, o texto que aparece no interior da tagTITLE é visualizado na barra de títulos da janela do browser.
  16. 16. BODYA tag BODY contém o documento propriamente dito.Nesta área, deve ser colocado tudo que representa a página a servisualizada.ComentáriosComo em outras linguagens de programação, é possívelinserir parte de texto que o usuário não tem acesso.Essas partes são chamadas comentários.Num texto HTML, todo texto incluído entre <!-- e --> éignorado pelo Browser, ou seja é interpretado como umcomentário do programador.
  17. 17. Comandos Básicos de FormataçãoA HTML possui duas classes de elementos utilizados para modificaro estilo de apresentação de partes do texto: tags físicas e tagslógicas.As tags físicas indicam, explicitamente, a forma como oautor deseja ver exibido o seu texto. Exemplos de tags físicas
  18. 18. As tags lógicas expressam uma idéia que deve ser passada aousuário e a forma como o texto será exibido depende donavegador. Exemplos
  19. 19. FormatadoresA formatação de texto e HTML é obtida a partir tags da tabelaabaixo.
  20. 20. O controle sobre o alinhamento da página pode serconseguido através da margem.O par de tags <BLOCKQUOTE>...</BLOCKQUOTE> serve paraaumentar a margem.Essa tag pode ser acumulada para conseguir margens maiores,como por exemplo:<BLOCKQUOTE> texto com mais margem <BLOCKQUOTE> texto com mais margem ainda... </BLOCKQUOTE></BLOCKQUOTE>
  21. 21. Alinhamento de TextoPara ter o texto alinhado de forma diferente é necessário modificaro atributo ALIGN existente em algumas tags (como cabeçalhos <P>e <HR>).O atributo ALIGN pode assumir os seguintes valores: RIGHT(direita), CENTER (centro) ou LEFT (esquerda).Exemplo: <P align=right>O alinhamento centralizado também pode ser obtido atravésda tag <CENTER> ... </CENTER>.Exemplo: <center>texto centralizado </center>
  22. 22. Atributos de Linha Horizontal <HR>O atributo SIZE é utilizado para definir a espessura da linhaem número de pontos (pixels).O atributo WIDTH serve para definir a largura da linha. Estalargura pode ser especificada pelo número de pontos ou pelopercentual da janela que será ocupado pela linha.O atributo NOSHADE (no shade, isto é, sem sombra) não temvalor. A sua simples inclusão faz com que a linha não sejadesenhada com efeito sombreado.O atributo ALIGN, já foi descrito anteriormente, tem a finaliadadede alinhar a linha horizontal.
  23. 23. O exemplo abaixo, inclui uma linha de 2 pontos de espessura,ocupando 50% da janela e sem sombreado:<HR SIZE=2 WIDTH=50% NOSHADE>
  24. 24. <HTML> <HEAD> <TITLE> Primeira Página feita em HTML </TITLE> </HEAD> <BODY> <I> SEU NOME </I> <BR> <B> SEU ENDERÇO </B><BR> <HR SIZE=2 WIDTH=50% NOSHADE ALIGN = LEFT><BR> <A HREF=AULA11.HTML> CLIQUE AQUI </A> PARA IR PARA A PRÓXIMA PÁGINA<BR> <A HREF=HTTP://WWW.UOL.COM.BR> UOL </A> </BODY></HTML>

×