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;
}