Programação de Servidores CST Redes de Computadores Marx Gomes Van der Linden http://marx.vanderlinden.com.br ( Material baseado no original de Marcelo José Siqueira Coutinho de Almeida )
HMTL Arquivo-texto composto por um texto e um conjunto de tags de marcação. As tags podem referenciar imagens, scripts e outros objetos. http://marx.vanderlinden.com.br 2
Vínculos (Links) HTML Código (Applet, scripts) Nome: HTML Idade: Enviar Links para outra página Imagem Formulário http://marx.vanderlinden.com.br 3
Estrutura de um documento A estrutura de um documento html é definida através de tags: Comandos entre < e > Quase sempre aparecem aos pares, sendo uma de abertura e outra de fechamento: <tag> texto... </tag> http://marx.vanderlinden.com.br 4
Estrutura de um documento Podemos ter tags sem fechamento chamadas de tags vazias <tag> Tags podem ter atributos <tag atributo1="valor"> http://marx.vanderlinden.com.br 5
Estrutura de um documento Um documento HTML inicia e finaliza com uma tag de identificação html <html>... </html> http://marx.vanderlinden.com.br 6
Estrutura de um documento <html> Cabeçalho Corpo </html> http://marx.vanderlinden.com.br 7
Estrutura de um documento O browser não faz distinção entre maiúsculas e minúsculas <HEAD> = <head> = <Head> = <head> Os caracteres < e > são representados como < ( less than ) e > ( greater than ) http://marx.vanderlinden.com.br 8
Cabeçalho Informações sobre o documento (metainformações) e que não são exibidas (com exceção do título) Definido pelas tags <head> e </head> Uso opcional Pode apresentar as seguintes tags: title meta link... http://marx.vanderlinden.com.br 9
Cabeçalho Título Nomeia um dado documento <head> <title> Minha Primeira Página </title> </head> http://marx.vanderlinden.com.br 10
Cabeçalho Título Quando o usuário define que determinada página fará parte de sua lista de favoritos, é o texto do título que será inserido: http://marx.vanderlinden.com.br 11
Cabeçalho Título Usado pelos mecanismos de busca http://marx.vanderlinden.com.br 12
Corpo Parte da página onde são colocados os textos e as marcações É o que o usuário vê... Texto Imagens Formulários Vínculos http://marx.vanderlinden.com.br 13
Corpo <html> <head> <title> Minha Primeira Página </title> </head> <body> Texto e Tags... </body> </html> http://marx.vanderlinden.com.br 14
Headings Usados para definir títulos de seção Organizados através de seis tamanhos <H1> texto </H1> <H2> texto </H2>,... Tamanho H1 > Tamanho H2 > Tamanho H3 >... http://marx.vanderlinden.com.br 15
Headings <html> <head> <title> Minha Primeira Página </title> </head> <body> <h1>título da Seção 1</h1> <h2>título da Seção 1</h2> <h3>título da Seção 1</h3> <h4>título da Seção 1</h4> <h5>título da Seção 1</h5> </body> </html> http://marx.vanderlinden.com.br 16
http://marx.vanderlinden.com.br 17
Parágrafos Bloco de texto entre as tags <P> e </P> Quebra uma linha antes e uma depois do texto HTML <p> Esse é o primeiro parágrafo. </p> <p> Esse é o segundo parágrafo. </p> Visualização Esse é o primeiro parágrafo. Esse é o segundo parágrafo. http://marx.vanderlinden.com.br 18
Quebra de Linha Podemos quebrar uma linha sem criar um parágrafo usando <BR> Não existe </BR> Pode estar inserido dentro de <P> HTML Esse texto está <br> quebrado. Visualização Esse texto está quebrado. http://marx.vanderlinden.com.br 19
Destaque Destaca um elemento do texto. Por padrão, implica em negrito. <strong> e </strong> HTML Esse texto está em <strong>negrito</strong> Visualização Esse texto está em negrito. http://marx.vanderlinden.com.br 20
Ênfase Indica ênfase em um elemento do texto. Por padrão, implica em itálico. <em> e </em> HTML Esse texto está em <em> itálico </em>. Visualização Esse texto está em itálico. http://marx.vanderlinden.com.br 21
Sobrescrito Permite alterar a posição de um determinado texto em relação à linha de texto, colocando-o acima do padrão <SUP> e </SUP> HTML Palavra <sup> sobrescrita </sup>. Visualização Palavra sobrescrita http://marx.vanderlinden.com.br 22
Subescritos Permite alterar a posição de um determinado texto em relação à linha de texto, colocando-o abaixo do padrão <SUB> e </SUB> HTML Palavra <sub> sobrescrita </sub>. Visualização Palavra sobrescrita http://marx.vanderlinden.com.br 23
Texto sem Formatação Exibe o texto conforme formatado na fonte <PRE> e </PRE> Retira a formatação de tabulação e de texto Comando for: <pre> if (a > b) { printf( Erro! ); } </pre> Comando for: if (a > b) { printf( Erro! ); } http://marx.vanderlinden.com.br 24
Imagens Imagens são anexadas em um documento HTML através da tag IMG Não há </IMG> 25
Imagens Atributos: src:(obrigatório) caminho da imagem (local ou remoto) alt: (opcional) texto alternativo width: (opcional) largura de exibição em pixels heigth: (opcional) altura de exibição em pixels 26
Imagens Exemplos <img src=..\imagens\minhafoto.jpg > <img src=..\imagens\minhafoto.jpg alt= Texto que irá aparecer... > <img src=..\imagens\minhafoto.jpg width= 30 heigth= 90 > 27
Links Os links (ligações ou hiperligações) representam um dos recursos mais interessantes da web, pois permite, dentre outras coisas, que: Se mova de uma página à outra Se descarregue um vídeo ou música Se acione uma aplicação http://marx.vanderlinden.com.br 28
Estrutura de um Hiperlink São formados por três partes: Destino Identifica o servidor onde se encontra o recurso e o recurso De acordo com o recurso uma determinada ação é realizada Rótulo Parte que o usuário vê e na qual clica para acessar o recurso Alvo Representa o destino onde o documento será exibido. http://marx.vanderlinden.com.br 29
URL Uniform Resource Locator Permite localizar qualquer tipo de recurso (objeto MIME) que possa ser reproduzido a partir de um browser web. Seria o path de um arquivo, porém com maior alcance. Também indica ao browser o que ele deve fazer. Pode ser absoluto ou relativo. http://marx.vanderlinden.com.br 30
URL em um site estático Formato http://www.meusite.com.br/pasta/arq.htm Protocolo Servidor Caminho Arquivo http://marx.vanderlinden.com.br 31
URL em um site dinâmico (GET) Formato http://www.ms.com/pst/arq.php?var1=x&var2=y Protocolo Servidor Caminho Arquivo Variáveis http://marx.vanderlinden.com.br 32
URL Outros formatos ftp://ftp.meusite.com.br/pub/musica.mp3 news:soc.culture.catalan mailto:marcelo@coinfo.cefetpb.edu.br file:///c:/textos/web/historiadaweb.html http://marx.vanderlinden.com.br 33
URL Absoluto Mostra o caminho completo do arquivo Esquema, servidor, caminho e o nome do arquivo. Não importa onde esteja o documento com a referência, o browser conseguirá encontrar o caminho. Pode estar em qualquer servidor da web http://marx.vanderlinden.com.br 34
URL Absoluto http://www.meusite.com.br/marcelo/arq.html http://marx.vanderlinden.com.br 35
URL Relativo Mostra o caminho parcial do recurso Omite o servidor onde o mesmo se encontra Suficiente colocar o caminho e o recurso Usa um diretório base como referência http://marx.vanderlinden.com.br 36
URL Relativo index.html /marcelo/index.htm../marcelo/index.htm http://marx.vanderlinden.com.br 37
www.meusite.com.br servidor www.outrosite.com.br servidor web info pub textos homepage.html algo.html aqui.html dados.html imagem sol.gif http://marx.vanderlinden.com.br 38
Arquivo URL Asoluto URL Relativo algo.html meusite.com.br/web/algo.html algo.html sol.gif meusite.com.br/web/imagens/sol.gif imagens/sol.gif dados.html meusite.com.br/info/dados.html../info/dados.html homepage.html outrosite.com.br/pub/homepage.html (nenhum) http://marx.vanderlinden.com.br 39
Hiperlinks Hiperlinks também são chamados de Âncoras: Âncora Externa Liga um documento a um outro Âncora Interna Liga um ponto de um documento a outro ponto http://marx.vanderlinden.com.br 40
Criando Hiperlinks Criando um Hiperlink para outra página web <A HREF = documento.html > Rótulo </A> A: Âncora (Anchor) URL da página de destino Rótulo Texto ou Imagem http://marx.vanderlinden.com.br 41
Criando Hiperlinks <HTML> <HEAD><TITLE>Desenvolvendo Sites</TITLE> </HEAD><BODY> <p>uma das páginas mais úteis para quem quer começar a trabalhar com Web é a do <A HREF="http://www.w3c.org"> W3C (World Wide Web Consortium)</A>.</p> <p> Lá você encontrará tudo que se relaciona com as tecnologias abertas da WEB.</p> </BODY> http://marx.vanderlinden.com.br 42 </HTML>
Criando Hiperlinks http://marx.vanderlinden.com.br 43
Âncoras Internas Permitem ao usuário ir direto a um trecho específico de uma página html Longos textos Páginas com layout complexo É preciso que exista algum rótulo para identificar o trecho específico http://marx.vanderlinden.com.br 44
Criando uma Âncora Inserir na seção específica: <A NAME= nome da âncora > rótulo </A> <A NAME= intro > <H1> 1. Introdução </H1></A> <p> bla bla bla bla bla bla bla bla bla bla </p> <A NAME= motiva > <H1> 2. Motivação </H1></A> <p> bla bla bla bla bla bla bla bla bla bla </p> <A NAME= vant > <H1> 3. Vantagens </H1></A> <p> bla bla bla bla bla bla bla bla bla bla </p> http://marx.vanderlinden.com.br 45
Criando um link para uma âncora Digite <A HREF= #nome da âncora > rótulo </A> Onde nome da âncora é o valor do atributo NAME da seção anterior. <BODY>... <A HREF= #intro > 1. Introdução </A> <A HREF= #motiva > 2. Motivação </A> <A HREF= #vant > 3. Vantagens </A>... </BODY> </HTML> http://marx.vanderlinden.com.br 46
Observações Se a âncora estiver em outro documento, use: <A HREF= pagina.html#nomeancora > Se a âncora estiver em um documento em outro servidor, use: <A HREF= http://www.meusite.com.br/ info.html#ancora1 > http://marx.vanderlinden.com.br 47