2- Cont e Introducao a HTML

Esta é uma pré-visualização de arquivo. Entre para ver o arquivo original

Cont. 
Introdução a HTML
1
Titao Yamamoto – titaoyamamoto.com/estacio
1
W3C - World Wide Web Consortium
É a principal organização de padronização da web;
Consiste em um consórcio internacional com quase 400 membros, agrega empresas, órgãos governamentais e organizações independentes com a finalidade de estabelecer padrões para a criação e a interpretação de conteúdos para a Web ;
Alguns membros bem conhecidos são: IBM, Microsoft, Apple, Adobe, Google, Oracle, etc. 
 Lista completa de membros em 
http://www.w3.org/Consortium/Member/List 
2
Titao Yamamoto – titaoyamamoto.com/estacio
‹#›
W3C - World Wide Web Consortium
Um dos trabalhos mais importantes realizado pelo W3C é o desenvolvimento de especificações (também chamadas de recomendações); 
Elas descrevem padrões como HTML, XML, etc; 
Cada recomendação é realizada por um grupo de trabalho consistido de membros e “experts” convidados; 
Empresas podem submeter recomendações ao W3C para uma recomendação formal; 
3
Titao Yamamoto – titaoyamamoto.com/estacio
‹#›
Arquitetura Típica da Internet
2
O acesso a Internet é feito normalmente através de microcomputadores (PCs) que estão conectados à rede através de um provedor de acesso a Internet.
Este acesso pode ser do tipo discado, banda larga ou através da rede corporativa de uma empresa. 
Titao Yamamoto – titaoyamamoto.com/estacio
‹#›
Arquitetura Típica da Internet
3
PASI provê conexão a Internet a seus clientes utilizando normalmente a rede telefônica para acesso discado. São oferecidas também conexões de banda larga como o ADSL ou via TV a Cabo. 
Para um grande provedor de Internet estas conexões de clientes ocorrem em um ponto de presença do provedor na cidade onde está localizado o cliente. 
Estes pontos de presença estão conectados às instalações centrais do PASI onde estão localizados o servidor de emails e o servidor WEB, além das conexões ao Backbone Internet. 
Titao Yamamoto – titaoyamamoto.com/estacio
‹#›
Arquitetura Típica da Internet
4
O Backbone Internet é formado por vários backbones ou sistemas autônomos. 
Um sistema autônomo é uma rede ou conjunto
de redes que está sob uma única administração ou política de roteamento. 
Os sistemas autônomos pode estar conectados diretamente ou através de um PTT (Ponto de Troca de Tráfego). 
Titao Yamamoto – titaoyamamoto.com/estacio
‹#›
Endereços IP
Cada dispositivo(Host) tem um endereço IP único. 
200.148.12.188 é um exemplo de endereço IP. 
A alocação dos endereços é feita internacionalmente pelo ICANN (Corporação da Internet para Atribuição de Nomes e Números) e no Brasil pelo Registro BR. 
Cada sistema autônomo recebe uma faixa de endereços IP que utiliza internamente e repassa em parte para os PASI ou provedores de conteúdo conectados a sua rede. 
Os PASI por sua vez alocam de forma fixa ou dinâmica endereço IP aos seus clientes. 
5
Titao Yamamoto – titaoyamamoto.com/estacio
Servidor DNS
Para facilitar o acesso de clientes a servidores na Internet foram estabelecidos endereços em forma de texto (domínios). 
Os servidores de DNS(DomainNameSystem) tem a função de mapear estes endereços de domínios em endereços IP. 
Assim, ao consultar uma página na Internet como www.estacio.br a primeira coisa que o seu navegador faz é solicitar a um servidor de DNS na rede qual o endereço IP onde está hospedado este domínio. 
6
Titao Yamamoto – titaoyamamoto.com/estacio
Modelo OSI e os Protocolos Utilizados na Internet
7
OSI
Internet
TCP/IP
Aplicação
SMTP,HTTP, DNS, FTP
Aplicação
Apresentação
Sessão
Transporte
TCP,UDP
Transporte
Rede
IP
IP
Enlace
Ethernet, ATM, FR
RededeAcesso
Física
Modelo OSI (criado em 1983 e formalizado em 1995) é um modelo de referência da ISO que tinha como principal objetivo ser um modelo standard, para protocolos de comunicação entre os mais diversos sistemas, e assim garantir a comunicação end-to-end.
O Modelo OSI permite comunicação entre máquinas heterogêneas e define diretivas genéricas para a construção de redes de computadores (seja de curta, média ou longa distância) independente da tecnologia utilizada.2
Titao Yamamoto – titaoyamamoto.com/estacio
Camada de Aplicação
8
Internet
TCP/IP
SMTP,HTTP, DNS, FTP
Aplicação
TCP,UDP
Transporte
IP
IP
Ethernet, ATM, FR
RededeAcesso
Nesta camada estão os protocolos que
dão suporte às aplicações do usuário, 
ex.:
* SMTP para emails,
* HTTP para a WEB,
* FTP para transferência de arquivos,
* RTP para streaming de multimídia,
* DNS para o sistema de domínios,
* etc.
Titao Yamamoto – titaoyamamoto.com/estacio
Camada de Transporte
9
Internet
TCP/IP
SMTP,HTTP, DNS, FTP
Aplicação
TCP,UDP
Transporte
IP
IP
Ethernet, ATM, FR
RededeAcesso
Esta camada é responsável por garantir um serviço confiável de envio de mensagens com retransmissão em caso de perda. 
Estas funções são garantidas pelo Transmission Control Protocol (TCP) que é usado na maioria das conexões da 
Internet. 
O UDP (User Datagram Protocol) é utilizado nas conexões com os servidores de
DNS e aplicações em tempo real para difusão de fluxos contínuos de áudio ou vídeo 
Titao Yamamoto – titaoyamamoto.com/estacio
Camada de IP
10
Internet
TCP/IP
SMTP,HTTP, DNS, FTP
Aplicação
TCP,UDP
Transporte
IP
IP
Ethernet, ATM, FR
RededeAcesso
O IP é um protocolo desenvolvido para possibilitar a interconexão de redes e esta é a origem do seu nome, internetwork 
Protocol ou Internet Protocol. 
Ele estabelece as regras de atribuição e os formatos de endereços de computadores
e outros dispositivos conectados a rede. 
Fornece também regras para que os pacotes sejam encaminhados de um computador ou dispositivo na rede para outro, 
até atingir o endereço destino constante do pacote
Titao Yamamoto – titaoyamamoto.com/estacio
Camada de Rede
11
Internet
TCP/IP
SMTP,HTTP, DNS, FTP
Aplicação
TCP,UDP
Transporte
IP
IP
Ethernet, ATM, FR
RededeAcesso
Nesta camada encontramos os vários tipos de redes que podem compor um backbone IP ou sua rede de acesso. 
Estas redes podem utilizar os mais variados protocolos como ATM, Frame Relay, X.25 ou os definidos pela IEEE 802. 
Titao Yamamoto – titaoyamamoto.com/estacio
Introdução ao HTML
O que é a linguagem HTML? 
  Hiper => é o oposto de linear 
  Text => é o texto propriamente dito 
  Markup => significa marcação, marcar o texto 
  Language => significa linguagem 
Linguagem de marcação de hipertexto 
O que é um hipertexto? 
documento constituído de texto, onde se pode associar (ligar) uma palavra, um trecho de texto ou até uma figura a outras partes do texto ou a outros documentos. 
A ligação é chamada link de hipertexto 
13
Titao Yamamoto – titaoyamamoto.com/estacio
Introdução ao HTML
O que é URL (Uniform Resource Locator)
Localizador de recurso uniforme ́e um endereço único que pode ser referenciado em links. 
Características da linguagem HTML: 
Possui cerca de 100 comandos, que são chamados “TAGS” 
Uma tag inicia com o sinal “<”e termina com o sinal “>” 
Existem 2 tipos de TAGS: 
 Tags de abertura: <comando> 
 Tags de fechamento: </comando> 
Tudo que estiver contido entre as tags de abertura e fechamento será processado segundo o comando contido entre as tags. 
14
Titao Yamamoto – titaoyamamoto.com/estacio
Introdução ao HTML
Características da linguagem HTML: 
Comandos de Tag única: 
Exceção: Comandos que não necessitam de conteúdo para serem processados 
Ex.: <br/> à comando para pular uma linha 
 A linguagem HTML é interpretada 
 O interpretador é o navegador, que converte os comandos em uma representação gráfica, ou seja, estruturada em textos e imagens formatados. 
15
Titao Yamamoto – titaoyamamoto.com/estacio
Introdução ao HTML
Passos para criar um primeiro website: 
Abrir um navegador e um editor de texto simples (Ex.:Notepad) 
Criar uma pasta em seu ambiente para salvar seus documentos
dentro desta pasta. 
No Notepad, editar e salvar o documento html 
Abrir o documento salvo em um navegador (Firefox, Chrome, Internet Explorer, etc.) 
16
Titao Yamamoto – titaoyamamoto.com/estacio
Estrutura Básica do HTML
<html>
 <! Trecho a comentar… >
 <head>
 <! Cabeçalho do documento HTML>
 <title> Meu website </title>
 </head>
 <body>
 <! Corpo do documento >
 </body>
</html>
17
Na seção ‘head’são colocadas informações sobre a página 
Na seção ‘body’ são colocadas informações que constituem a página 
Titao Yamamoto – titaoyamamoto.com/estacio
18
TAG title
<html>
 <! Trecho a comentar… >
 <head>
 <! Cabeçalho do documento HTML>
 <title> Meu website </title>
 </head>
 <body>
 <! Corpo do documento >
 </body>
</html>
O comando ‘title’ escreve o título da página na barra de títulos do navegador. Deve sempre estar dento da seção ‘head 
Titao Yamamoto – titaoyamamoto.com/estacio
19
TAG Comentário
<html>
 <! Trecho a comentar… >
 <head>
 <! Cabeçalho do documento HTML>
 <title> Meu website </title>
 </head>
 <body>
 <! Corpo do documento >
 </body>
</html>
A tag <! … > inclui comentários no documento html
Titao Yamamoto – titaoyamamoto.com/estacio
Cabeçalho do documento HTML: <head> ... </head> 
Nenhum comando de cabeçalho é mostrado na página web => Comandos permitidos internamente: 
<title> ... </title> 
Título do documento, mostrado na barra de status e no bookmark do navegador 
<isindex>
Indica que o documento pode ser analisado pelo processo de busca do servidor 
 <base> 
Define um endereço URL base que será usado por todas as outras referências de endereços. 
Ex.: <base 
href="http://www.minhaspaginas.br/paginas/" > 
20
Titao Yamamoto – titaoyamamoto.com/estacio
Corpo do documento HTML: 
<body> ... </body> 
Define a composição da página web (textos, imagens, tabelas, etc) 
Admite os seguintes parâmetros (<body parâmetros >): 
background="url”
Coloca uma imagem (.gifou.jpg) no fundo do documento. 
bgcolor="#rrggbb" 
Define uma cor de fundo para o documento html,com o nome em inglês ou codificada em hexadecimal no formato ”rrggbb”. É possível definir até 16 milhões de cores, onde "#FFFFFF" indica o branco e o "#000000" indica o preto. 
21
Titao Yamamoto – titaoyamamoto.com/estacio
Mais Cores
22
Titao Yamamoto – titaoyamamoto.com/estacio