Aula1web html
- 1. Módulo 1 Introdução ao ambiente web ccunip2011@hotmail.com shinodaluk@gmail.com
- 2. A World Wide Web – WWW A idéia inicial da Internet surgiu, em 1969, como uma rede descentralizada para interligar instalações militares (ARPANET). Durante a década de 70 várias outras redes foram sendo interligadas à ARPANET e, em 1980, ela passou a se chamar Internet. A World Wide Web (WWW), ou simplesmente Web, foi desenvolvida no final da década de 80 como uma forma de facilitar aos pesquisados o acesso a documentos científicos.
- 3. Com a Web, ganhou força a utilização, em larga escala, da té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 documento referenciado. Inicialmente, a informação disponível na Web era encontrada principalmente sob a forma de textos e hipertextos. Aos poucos foram sendo incorporados elementos gráficos e animações aos documentos que contribuíram para a popularização da Web, aproximando-a mais do cidadão comum.
- 4. Atualmente, a Web é utilizada na divulgação científica, trabalho cooperativo, disponibilização de informações culturais e livros eletrônicos, promoção de produtos e serviços, realização de comércio eletrônico e suporte técnico e vários outros usos que vão sendo concebidos continuamente. Uma característica importante da Web (Internet) é que a informação é disponibilizada de forma independente do tipo de computador que será utilizado para a sua visualização.
- 5. Para isso é necessário que os documentos sejam escritos utilizando um formato padronizado. A padronização é obtida através de uma linguagem chamada HTML: 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 e informação para localização de outros documentos (links).
- 6. Navegadores (Browser) Para poder visualizar corretamente o documento, o usuário necessita de um programa (navegador) capaz de interpretar esta linguagem, reconstituindo a informação segundo as instruções contidas no código. Para ter acesso a um documento na Web, o usuário deve fornecer ao 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 e d) o nome do documento.
- 7. As informações dos itens a) a d) são resumidas em formato padrão denominado URL (Uniform Resource Locator) . Exemplo: http://www.unip.br/biblioteca Uma URL obedece ao seguinte formato: protocolo://servidor/caminho/arquivo Onde: protocolo – Indica a forma de realização da comunicação entre o servidor e o cliente e também o tipo de serviço que será prestado. No caso de HTML o protocolo é o http (HyperText Transfer Protocol). servidor – Endereço do servidor web. Formas: nome_da_máquina.domínio ou através do endereço IP da máquina (146.164.2.68).
- 8. caminho – Localização do arquivo no disco do servidor através de um diretório ou de uma lista de diretórios. (por exemplo: 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. O computador que contém o documento solicitado deve executar 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 (ambiente windows).
- 10. Características Gerais de HTML Um documento escrito em HTML é um arquivo ASCII comum, contendo apenas os caracteres ASCII visíveis. O navegador ignora qualquer caracter especial, inclusive aqueles que sugerem algum tipo de formatação ao texto (como TAB, CR, LF). Qualquer tipo de formatação deve ser informada através dos comandos conhecidos como tags.
- 11. As tags, ou marcas, se diferenciam do texto comum por Serem escritas entre "<" e o ">". Algumas tags contêm atributos que permitem configurar algumas características. E alguns atributos podem ter valores específicos. Estes atributos são colocados entre os delimitadores (< e >), após o nome da tag. Os valores vêm depois de um sinal de "=" colocado junto aos atributos. 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. Tipos de tags Há dois tipos de tags: container tags (ou emparelhada) empty tags. Container Tags Servem para definir um efeito sobre um trecho do documento. Estas tags vêm sempre aos pares: uma tag no início do texto e outra no final. Por exemplo, para indicar que uma parte do texto deve ser exibida em negrito utiliza-se o par de tags <B> e </B>. Palavras em <i>italico e <B>negrito</B> ficam realcadas </i> diferentemente
- 13. Empty Tags São tags que produzem efeitos locais, normalmente introduzindo algum elemento no texto, e, portanto, não precisam de uma tag finalizadora. Um exemplo é a tag <BR> que insere no texto uma mudança de linha.
- 14. Estrutura de um Documento HTML Todo documento HTML tem a seguinte estrutura: <HTML> < HEAD> <TITLE> Titulo da Pagina </TITLE> </HEAD> <BODY> Descrição do documento </BODY> </HTML>
- 15. HTML A tag HTML indica ao navegador a área onde deve estar contido o documento HTML. HEAD A tag HEAD é o cabeçalho do documento. Nesta área são colocadas tags com informações relativas ao documento. A tag mais importante destas informações está contida na tag TITLE que deve sempre ser incluída em todas as páginas. Normalmente, o texto que aparece no interior da tag TITLE é visualizado na barra de títulos da janela do browser.
- 16. BODY A tag BODY contém o documento propriamente dito. Nesta área, deve ser colocado tudo que representa a página a ser visualizada. Comentários Como em outras linguagens de programação, é possível inserir 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 um comentário do programador.
- 17. Comandos Básicos de Formatação A HTML possui duas classes de elementos utilizados para modificar o estilo de apresentação de partes do texto: tags físicas e tags lógicas. As tags físicas indicam, explicitamente, a forma como o autor deseja ver exibido o seu texto. Exemplos de tags físicas
- 19. As tags lógicas expressam uma idéia que deve ser passada ao usuário e a forma como o texto será exibido depende do navegador. Exemplos
- 20. Formatadores A formatação de texto e HTML é obtida a partir tags da tabela abaixo.
- 21. O controle sobre o alinhamento da página pode ser conseguido através da margem. O par de tags <BLOCKQUOTE>...</BLOCKQUOTE> serve para aumentar 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>
- 22. Alinhamento de Texto Para ter o texto alinhado de forma diferente é necessário modificar o 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és da tag <CENTER> ... </CENTER>. Exemplo: <center>texto centralizado </center>
- 23. Atributos de Linha Horizontal <HR> O atributo SIZE é utilizado para definir a espessura da linha em número de pontos (pixels). O atributo WIDTH serve para definir a largura da linha. Esta largura pode ser especificada pelo número de pontos ou pelo percentual da janela que será ocupado pela linha. O atributo NOSHADE (no shade, isto é, sem sombra) não tem valor. A sua simples inclusão faz com que a linha não seja desenhada com efeito sombreado. O atributo ALIGN, já foi descrito anteriormente, tem a finaliadade de alinhar a linha horizontal.
- 24. O exemplo abaixo, inclui uma linha de 2 pontos de espessura, ocupando 50% da janela e sem sombreado: <HR SIZE=2 WIDTH=50% NOSHADE>
- 25. <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>