MIEEC SIEM ano letivo 2014/15 Introdução a HTTP, HTML e CSS José A. Faria (jfaria@fe.up.pt) FEUP, DEGI Setembro 2014
1. Introdução ao protocolo HTTP
Introdução A WEB -worldwideweb é um sistema global de hipertexto inicialmente desenvolvido em 1989 no CERN para facilitar a partilha de documentos científicos entre um grupo de cientistas geograficamente distribuído. A WEB utiliza um modelo de processamento do tipo cliente/servidor onde: os clientes são designados por web browsers os servidores por web servers.
Introdução Exemplos de web browsers: Internet Explorer Mozzila Firefox Googel Chrome Exemplos de web servers: Internet Information Server Apache
WEB browsers Um web browser é uma aplicação que fornece aos utilizadores acesso a servidores web, sendo responsável: pela formatação e apresentação dos dados; pela interação com o utilizador.
WEB browsers No mínimo, um web browser contém: um cliente HTTP (hypertext transfer protocol) um interpretador de HTML (hypertext markup language). Nota Os clientes e servidores web interatuam através do protocolo HTTP. Os documentos transmitidos dos servidores para os browsers são codificados em formato HTML.
WEB servers Os servidores web são responsáveis pelo atendimento dos pedidos de informação provenientes dos clientes. A informação enviada pelos servidores aos clientes (browsers) pode consistir: no conteúdo de um ficheiro de texto; no output gerado por um programa.
Protocolo HTTP Os browsers e servidores web interactuam através do protocolo HTTP -hypertext transfer protocol, o qual permite a transferência de documentos HTML.
Protocolo HTTP O protocolo HTTP é baseado em interações do tipo pedido/resposta (request/response) onde: o cliente estabelece uma conexão ao servidor e envia-lhe um pedido através da invocação do método request; o servidor responde ao pedido, após o que termina a conexão.
Protocolo HTTP Assim, as transações HTTP desenvolvem-se em 4 fases: o browser abre uma conexão ao servidor o browser envia um pedido ao servidor o servidor envia uma resposta ao browser a conexão é fechada Nota: Além da informação propriamente dita, as mensagens enviadas pelo servidor incluem outros dados como a versão do protocolo, um código de sucesso ou erro, a identificação do servidor,...
Endereços WEB Um URI -Uniform Resource Identifier (endereço web), é uma stringque identifica um servidor web e uma fonte de informação nesse servidor (ficheiro ou programa). Exemplo paginas.fe.up.pt/~jfaria/public_html/aulas/siem/index.html
Endereços WEB Um URI combina: um URL -Uniform Resource Locator, para a identificação do servidor um URN -Uniform Resource Name, para a identificação da fonte de informação dentro do servidor.
Endereços WEB: exemplo URL URN paginas.fe.up.pt / ~jfaria/public_html/aulas/siem / index.html servidor caminho no sistema de ficheiros ficheiro
Endereços WEB Num servidor web Apache, por defeito: os recursos disponíveis na web estão debaixo da pasta public_html é devolvido o ficheiro index.html Assim, o endereço web: paginas.fe.up.pt/~jfaria/public_html/aulas/siem/index.html é equivalente a: paginas.fe.up.pt/~jfaria/aulas/siem
2. Introdução à linguagem HTML
Linguagem HTML O HTML é uma linguagem baseada em marcas (tags) através das quais é formatado o conteúdo das páginas (texto, imagens, links,...). Cada documento html é composto por um cabeçalho (header) e por um corpo (body).
Linguagem HTML O HTML é uma linguagem baseada em marcas (tags) através das quais é formatado o conteúdo das páginas (texto, imagens, links,...). Cada documento html é composto por um cabeçalho (header) e por um corpo (body).
Primeiro exemplo <html> <head> <title>primeira página web</title> </head> <body> Estão a ver como é fácil criar uma página web? </body> </html> ver exemplo-inicial.html
Comandos Cada marca corresponde a um comando e está contida entre os carateres < e >. Todos os caracteres que não se encontrem entre < e > são tratados como texto e inseridos diretamente na página. Os comandos permanecem ativos desde que são abertos e até serem fechados através do sinal /.
Formatação Basicamente, o HTML dispõe dos comandos de formatação usuais que se encontram nos processadores de texto mais, entre os quais: <p> introduz um parágrafo e uma linha em branco. <br> introduz um parágrafo, sem adicionar linha. <i>... </i> itálico <b>... </b> bold <u>... </u> sublinhado ver exemplos formatação
Ligações (Links) Uma das características fundamentais do htmlé a possibilidade incluir, dentro de um documento, ligações (links) para outros documentos. Os links são introduzidos através da tag <a>... </a>: <a href = URL > texto </a>
Exemplo <a ref= http://paginas.fe.up.pt/~jfaria/aulas/siem/ ficha.pdf >Ficha da disciplina</a> Cria um link: para o ficheiro ficha.pdf contido no diretório public_html/aulas/siem/ da área de trabalho do utilizador jfaria do servidor páginas do domínio fe.up.pt O link é apresentado no browser como: Ficha da disciplina.
Ligações (Links) Os links podem também ser associados a imagens. No exemplo seguinte, o link fica associado à imagem contida no ficheiro figuras/fig4.jpg. <a href= http://www.fe.up.pt/~jfaria/aulas/satd > </a> <img src= figuras/fig4.jpg >
Ligações (Links) <a href= http://paginas.fe.up.pt/~jfaria/aulas/siem > <img src= figuras/fig4.jpg > </a> Neste caso, clicando sobre a figura, será invocado o ficheiro: /~jfaria/public_html/aulas/siem/index.html ver exemplo figuras.html
Ligações (Links) Por defeito, um link para uma página coloca o cursor no início dessa página. É, no entanto, possível efetuar ligações para pontos específicos dentro de uma página. Para isso, no ponto destino terá de ser inserido um bookmark através da marca: <a name= nome do bookmark >
Ligações (Links) Admitindo que o ficheiro index.html do diretório sie contém o bookmark Trabalhos, o comando: <a href= http://www.fe.up.pt/~jfaria/sie/ index.html#trabalhos >Trabalhos práticos</a> apresenta o link Trabalhos práticos no browser. Quando este link for clicado, o cursor ficará posicionado no local da página onde foi inserido o bookmark: <a name= Trabalhos >
Tabelas As tabelas são um elemento fundamental do HTML e podem ser utilizadas com duas finalidades distintas: apresentação dos dados sob forma tabular (o que corresponde à utilização convencional de tabelas) estruturação da própria página HTML, definido o layout dos vários elementos (texto e figuras) que a compõem.
Tabelas As principais marcas associadas às tabelas são: <table>... </table> introduz uma tabela no documento. <tr>... </tr> introduz uma nova linha na tabela (table row). <td>... </td> introduz uma nova célula na tabela (table data) na linha atual (esta marca deve ser sempre introduzida entre a marca <tr> </tr>).
Tabelas Nota As várias linhas de uma tabela podem conter diferentes números de células, sendo a dimensão das células calculada com base na linha que contiver o maior número de células. Nas linhas com menor número de células, serão acrescentadas células vazias.
Tabelas O HTML suporta múltiplas propriedades associadas às tabelas, às linhas e às células que permitem definir em detalhe o aspeto gráfico e a apresentação dos dados. Essas propriedades permitem, nomeadamente definir as dimensões, cores, caixilho das células, o alinhamento do texto, o espaçamento entre células,...
Listas O HTML suporta vários tipos de listas, numeradas ou não: as listas bulleted são delimitadas pelas marcas <ul> e </ul> (unordered list) As listas numeradas são delimitadas pelas marcas <ol> e </ol> (ordered list) Os elementos das listas são separados pelas marcas <li> e </li> (listelement).
Exemplos de listas <ul type= disk"> <li>text1</li> <li>text2</li> <li>text3</li> </ul> text1 text2 text3 Para o bullet existem 3 opções: disc <ul type= disk"> circle <ul type="circle"> square <ultype= square"> <ol> <li>text1</li> <li>text2</li> <li>text3</li> </ol> 1. text1 2. text2 3. text3 ver exemplo listas.html
3. Introdução às folhas de estilo (CSS)
Folhas de estilo Uma folha de estilo (CSS cascading stylesheets) define um conjunto de regras que determinam como é que o browser apresenta os documentos html. Através das CSS é possível separar: o conteúdo do documento (HTML) do estilo da apresentação (CSS).
Folhas de estilo Através das CSS s é possível definir um vasto conjunto de propriedades, por exemplo: ------ Font : Font Family, Font Size,... Color and Background: Color, Background Color,... Text : Word Spacing, Letter Spacing, Vertical Alignment, Text Indentation, Line Height Box : Margin, Padding, Border Width, Border Color,... Para uma listagem completa das propriedades que podem ser definidas nas CSS s ver: http://www.htmlhelp.com/reference/css/quick-tutorial.html
Exemplo
Dimensões, background, tipo de letra das divisões
Cor, tamanho dos vários tipos de títulos
Indentação do texto
Margens, espaçamento, tipo de letra: - células header e dados, - linhas normais e alternativas
Tipo de letra, cores, border dos botões
Seletores Cada regra de estilo é formada por um seletor (por exemplo um elemento html como BODY, P ou H1) e um estilo a ser aplicado a esse seletor. selector { property: value }
Folhas de estilo: Exemplo Por exemplo, as seguintes regras especificam que os headers: do tipo H1 devem ser apresentados pelo browser com font extra large e cor vermelha e os do tipo H2 com font large e cor azul H1 { font-size: x-large; color: red } H2 { font-size: large; color: blue } propriedade valor
Seletores Qualquer elemento HTML (BODY, P, DIV, H1, TABLE...) pode ser um selector. Na regra de estilo seguinte, o seletor é o parágrafo: p {font-family:arial; font-size=12; font-color: black} Se esta regra for aplicada a um documento html, o browser irá a font Arial, 12 pixels, preto a todos os parágrafos.
Selectores Os seletores também podem ser definidos com base nos atributos class e id do html. CSS p.comentario {color: grey;} #div_principal { font: arial; background-color: blue; } HTML <p class= comentario >... </p> <div id= div_principal >... </div>
Seletores ID Os seletores do tipo ID permitem definir um estilo para um elemento particular do documento html. Estes seletores são antecedidos pelo caracter "#, como em: #div_menu { left: 3px; width: 800px; position: absolute; top: 3px; height: 28px; background-color: blue; }
Seletores ID <body> <div id=div_menu>... </div> </body> #div_menu { left: 3px; width: 800px; position: absolute; top: 3px; height: 28px; background-color: blue; }
Seletores Class Os seletores de classe podem ser associados a seletores html, como em: p.normal {color: green;} p.comentario {color: blue;} após o que podem ser utilizados nesses seletores, por exemplo: <body> <p class= normal >texto normal</p> <p class= comentario >texto do comentario</> </body>
Seletores Class Os seletores de classe também podem ser declarados sem estar associadas a qualquer elemento, por exemplo:.normal {font-size: 12pt; font-family: Times} Neste caso, o seletor classe pode ser utilizado em qualquer elemento: <p class= normal >texto com formato normal</p> <input type= submit class= normal value= Ok></input>
In linecss as definições de estilo podem ser incluídas no interior de qualquer elemento dentro do BODY do documento html, como em: <p STYLE="color: red; font-family: serif"> Este parágrafo será apresentado com fontserif e cor vermelha</p>
CSS embebidas As definições de estilo podem ser embebidas nos cabeçalhos dos documentos html através do elemento STYLE: <head> <STYLE TYPE="text/css" MEDIA=screen> body { background: url(foo.gif) red; color: black} p { background: yellow; color: black}.note { margin-left: 5em; margin-right: 5em } </STYLE> </head>
CSS externas As definições de estilos também podem ser definidas em ficheiros externos aos ficheiros html, o que permite utilizar as mesmas definições de estilo em múltiplas páginas. Desta forma, é possível mudar completamente o estilo de uma aplicação (possivelmente com dezenas ou centenas de páginas) atuando sobre uma único ficheiro. Esta é a forma mais correta de especificar as definições de estilo.
CSS externas Neste caso, as páginas contém um link para o ficheiro CSS externo no cabeçalho (Head) do documento htmlpor exemplo: <head> <link rel=stylesheet href="style.css" type="text/css"> </head> onde style.css é o nome do ficheiro contendo a folha de estilo.
Exemplo de ficheiro CSS /********* Gerais *********/ p { color: #4d4d4d; font-size: 8pt; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; }.buttons { font-family: Verdana; font-size: 8pt; color: #4d4d4d; } table {...... /********* Títulos *********/.titulo1 { color: White; padding: 1px 6px 1px 6px; text-align: center; border: 1px #7c9ccc solid; }.titulo2 { /********* Divisões *********/ #div1 { left: 3px; width: 800px; position: absolute; top: 3px; height: 28px; background-color: #0099ff; border: 1px solid #0099ff; }