Introdução a HTTP, HTML e CSS
Propaganda
MIEEC | SIEM | ano letivo 2014/15 Introdução a HTTP, HTML e CSS José A. Faria ([email protected]) FEUP, DEGI Setembro 2014 1. Introdução ao protocolo HTTP Introdução • A WEB - world wide web é 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 string que 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”> <img src=“figuras/fig4.jpg“> </a> 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> (list element). 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 <ul type=“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 style sheets) 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 line CSS 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 font serif 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 html por 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; }
