André Kawamoto NE31A

Transcrição

1 André Kawamoto NE31A

2 Internet Internet: uma coleção de redes Todos os computadores conectados à Internet fazem parte de uma rede (rede local, rede doméstica) Rede de Redes

3 Internet x WWW Internet e World Wide Web são a mesma coisa? Não. A Internet é um conjunto de redes que engloba milhões de computadores, enquanto a Web é uma sub-rede (a maior e mais popular) da Internet

4 A Web A Web tem sua funcionalidade baseada em três padrões: URI (Uniform Resource Identifier Identificador Uniforme de Recursos), que é um sistema que determina como cada página de informação recebe um "endereço" único onde pode ser encontrada HTTP, um protocolo que especifica como o navegador e servidor web comunicam entre si. HTML, uma linguagem de marcação para codificar a informação de modo que possa ser exibida em uma grande quantidade de dispositivos.

5 Como funciona?

6 Como funciona a Web? De maneira simplificada, o funcionamento da WEB pode ser explicado em quatro passos: 1. Usuário digitar uma URL no navegador ou acessando uma hiperligação (link) 2. Primeiramente, a parte da URL referente ao servidor web é separada e transformada em um endereço IP, por um banco de dados da Internet chamado Domain name system (DNS). O navegador estabelece então uma conexão TCP-IP com o servidor web localizado no endereço IP retornado. 3. O navegador envia uma requisição HTTP ao servidor para obter o recurso indicado pela parte restante da URL (retirando-se a parte do servidor). No caso de uma página web típica, o texto HTML é recebido e interpretado pelo navegador, que realiza então requisições adicionais para figuras, arquivos de formatação, arquivos de script e outros recursos que fazem parte da página. 4. O navegador então renderiza (desenha) a página na tela do usuário, assim como descrita pelos arquivos que a compõe

7 HTTP e HTML O HTTP - HyperText Transfer Protocol - é um protocolo de aplicação responsável pelo tratamento de pedidos e respostas entre cliente e servidor na Web. Utiliza o paradigma de requisição-resposta (cliente cria uma conexão e envia uma requisição. O servidor responde a essa requisição com o dado solicitado, e a conexão é encerrada)

8 Protocolos da Internet Existem outros protocolos, além do HTTP: FTP (File Transfer Protocol) SMTP (Simple Mail Transfer Protocol) NNTP (network news transfer Protocol)

9 HTML = HyperText Markup Language (linguagem de marcação de Hipertexto)

10 HTML é uma linguagem para descrever páginas web HTML não é uma linguagem de programação, é um conjunto de tags HTML usa as tags para descrever (estruturar) uma página web

11 O que é preciso para editar HTML Editor (notepad, vi, etc.) Editor WYSIWYG (dreamweaver, frontpage) Arquivos html possuem extensão.htm ou.html

12 Todo documento HTML apresenta elementos entre < e >; Esses elementos são as etiquetas (tags) de HTML, que são os comandos de formatação da linguagem. A maioria das etiquetas tem sua correspondente de fechamento: <etiqueta>...</etiqueta> <H1>... </H1>

13 Isso é necessário porque as etiquetas servem para definir a formatação de uma porção de texto, e assim marcamos onde começa e termina o texto com a formatação especificada por ela.

14 Alguns elementos são chamados vazios, pois não marcam uma região de texto, apenas inserem alguma coisa no documento: <etiqueta> Todos os elementos podem ter atributos: <etiqueta atributo1=valor1 atributo2=valor2>...</etiqueta>

15 A estrutura de um documento HTML apresenta os seguintes componentes: <HTML> <HEAD> <TITLE>Titulo do Documento</TITLE> </HEAD> <BODY> texto, imagem, links,... </BODY> </HTML>

16 As etiquetas HTML não são sensíveis à caixa. Traduzindo: tanto faz escrever <HTML>, <Html>, <html>, <HtMl>,... OBS: XHTML exige que as tags sejam escritas em letras minúsculas. Esse será o padrão utilizado durante o curso.

17 - HEAD <head> contém informações sobre o documento. O elemento <title>, por exemplo, define um título, que é mostrado no alto da janela do browser. Por exemplo: <head> <title> Pensamentos Inteligentes </title> </head>

18 Todo documento WWW deve ter um título O título do documento é referenciado em buscas pela rede, dando uma identidade ao documento. O título é usado, por exemplo, quando se adiciona uma página aos seus favoritos (Bookmarks)

19 sugerido que os títulos dos documentos sejam sugestivos, evitando-se títulos genéricos como "Introdução". O título também é bastante significativo para a listagem de uma página nos resultados de pesquisas nos catálogos da Internet.

20 Além do título, <head> contém outras informações de importância para os robôs de pesquisa, indicadas nos campos <meta>.

21 Meta elementos podem ser usados para especificar descrições da página, palavras-chave e qualquer outro dado nao fornecido por outros elementos e atributos de head. O elemento meta possui quatro atributos válidos: content, http-equiv, name, e scheme. Desses, apenas o atributo content é obrigatório.

22 - BODY Tudo que estiver contido em <body> será mostrado na janela principal do browser, sendo apresentado ao leitor. <body> pode conter cabeçalhos, parágrafos, listas, tabelas, links para outros documentos, imagens, formulários, animações, vídeos, sons e scripts embutidos

23 Atributos de BODY Através de atributos de <body>, podemos definir cores para os textos, links e para o fundo das páginas, bem como uma imagem de fundo (marca d água)

24 Exemplo <BODY bgcolor="#rrggbb" TEXT="#rrggbb" LINK="#rrggbb" ALINK="#rrggbb" VLINK="#rrggbb" BACKGROUND="URL">

25 onde: BGCOLOR - cor de fundo (quando não é indicada, o browser irá mostrar uma cor padrão, geralmente o cinza ou branco; alguns editores poderão estabelecer o branco para o fundo da página) TEXT cor dos textos da página (padrão: preto) LINK cor dos links (padrão: azul) ALINK cor dos links, quando acionados (padrão: vermelho) VLINK cor dos links, depois de visitados (padrão: azul escuro ou roxo)

26 BACKGROUND indica o URL da imagem a ser replicada no fundo da página, como uma marca d água.

27 Os valores das cores são dados em hexadecimal, equivalentes a cores no padrão RGB (Red, Green, Blue). Existem tabelas de cores com esses valores, mas grande parte dos editores já oferece uma interface bem amigável através da qual escolhemos as cores desejadas

28 Browsers que seguem a definição de HTML 3.2 em diante, também aceitam 16 nomes de cores, tirados da paleta VGA do Windows por exemplo, podemos escrever BGCOLOR="BLUE". Porém, browsers mais antigos não apresentarão as cores indicadas.

29 Os nomes que podem ser usados são: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow.

30 Cabeçalhos Cabeçalhos HTML são definidos através das tags <h1> a <h6> tags. <h1>isso é um cabeçalho Nível 1</h1> <h2>isso é um cabeçalho Nível 2</h2> <h3>isso é um cabeçalho Nível 3</h3> E assim por diante

31 Podemos, na tag de cabeçalho, incluir um atributo para alinhamento Exemplos de Alinhamento <h2 align= center >Cabeçalho centralizado</h2> <h3 align= right >Cabeçalho alinhado à direita</h3> <h4 align= left >Cabeçalho alinhado à esquerda (default)</h4>

32 Atividade Pesquisar e dar exemplos das seguintes Meta-tags: Keywords Description Robots Content-language Content-type Author Reply-to Generator Refresh Expires Revised Set-cookie

33 Com essas informações, podemos criar 1 primeiro exemplo Salve um documento no bloco de notas com o nome pagina.html A estrutura da página HTML deve ser obedecida

34 O título da página deve ser Hello World Insira cores para o fundo, links ativos, links atuais, links visitados Insira 6 cabeçalhos e altere seu alinhamento, e verifique os resultados abrindo as páginas no navegador Dentro da tag <head>, insira algumas meta-tags e observe se há alguma alteração no aspecto visual da página.

35 Separadores <br /> quebra de linha <p>...</p> Parágrafos <hr /> Linha Horizontal

36 <hr> insere uma linha horizontal: Essa linha tem diversos atributos, oferecendo resultados diversos. <HR SIZE=7> insere uma linha de largura 7 (pixels) <HR WIDTH=50%> insere uma linha que ocupa 50% do espaço horizontal disponível:

37 <HR WIDTH=30% ALIGN=RIGHT NOSHADE> insere uma linha de comprimento 30% (do espaço horizontal disponível), alinhada à direita, sem efeito tridimensional: <HR SIZE=70 WIDTH=2 ALIGN=LEFT> insere uma linha de largura 70 (pixels), comprimento 2 (pixels), alinhada à esquerda (o Netscape, aparentemente, não aceita esta formatação de <HR>):

38 Outros elementos usados para separar porções de texto são o <div> e o <span>. <div> marca uma divisão lógica de um documento <span> também marca uma divisão lógica em um documento, seu uso será melhor compreendido quando for utilizado em conjunto com CSS (Cascading Style Sheets)

39 Formatação É possível formatar o texto apresentado pelo navegador, de várias maneiras Para ilustrar, é mais apropriado utilizar exemplos

40 Formatação de Texto <html> <body> <p><b>este texto é negrito (BOLD)</b></p> <p><strong> b>este texto é strong</strong></p> <p><big> b>este texto é big</big></p> <p><em> b>este texto é destacado emphasized</em></p> <p><i> b>este texto é itálico</i></p> <p><small> b>este texto é small</small></p> <p>este é <sub> subscrito</sub> e <sup>sobrescrito</sup></p> </body> </html>

41 Texto pre-formatado <html> <body> <pre> Este texto é Pre-formatado. Ele preserva tanto E quebras de linha. </pre> espaços <p>essa Tag é útil para exibir código de programação</p> <pre> for i = 1 to 10 writeln (i); Writeln( FIM ); </pre> </body> </html>

42 Saída computacional <html> <body> <code>computer code</code> <br> <kbd>entrada do Keyboard (teclado)</kbd> <br> <tt>teletipo</tt> <br> <samp>sample text (texto exemplo)</samp> <br> <var>variável </var> <br> <p> <b>note:</b> Uteis para exibir codificaçao/programas </p> </body> </html>

43 Endereços <html> <body> <address> UTFPR Universidade Tecnologica Federal do Paraná<br> Rod. BR 369, Km 0,5<br> Campo Mourao<br> Brasil </address> </body> </html>

44 Abreviaturas /Acrônimos <html> <body> <abbr title="united Nations">UN</abbr> <br> <acronym title="world Wide Web">WWW</acronym> <p>o atributo title é usado para mostrar como a palavra é pronunciada quando o ponteiro do pouse está sobre o acrônimo ou a abreviatura.</p> <p>isso funciona para o elemento acronym a partir do IE 5.</p> <p>isso funciona tanto para abbr e acronym a partir do Netscape 6.2.</p> </body> </html>

45 Direção do Texto <html> <body> <p> Se o seu browser possui suporte a sobrecarga bidirecional, a proxima linha será escrita da direita para a esquerda (rtl) Right To Left: </p> <bdo dir="rtl"> Eis uma frase dificil de se ler. </bdo> </body> </html>

46 Citações <html> <body> Uma citação longa: <blockquote> Citação longa várias linhas. Citação longa várias linhas. Citação longa várias linhas. Citação longa várias linhas. Citação longa várias linhas. </blockquote> Citação Curta: <q> Isto é uma citação curta.</q> <p> Com a tag blockquote o browser alinha a citação de maneira que ela fique recuada. </p> </body> </html>

47 Texto deletado e inserido <html> <body> <p> Uma dezena é formada por <del>12</del> <ins>10</ins> unidades </p> <p> A maioria dos browsers vai marcar o texto deletado e sublinhar o texto inserido. </p> <p> Browsers antigos vao exibir como se fosse texto normal </p> </body> </html>

48 Atividade Escreva um documento HTML que contém: A definição (e abreviatura) de uma lista encadeada Um exemplo de código para percorrer uma lista encadeada Utilize os formatadores vistos em sala