MIEEC SIEM ano letivo 2013/14 Introdução ao HTML e às folhas de estilo (CSS) José A. Faria (jfaria@fe.up.pt) FEUP, DEIG Setembro 2013 MIEEC SIEM --- 1 --- José António Faria
Introdução ao protocolo HTTP MIEEC SIEM --- 2 --- José António Faria
Introdução A WEB - world wide web é um sistema global de hipertexto 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. MIEEC SIEM --- 3 --- José António Faria
Introdução Exemplos de web browsers: Internet Explorer Mozzila Firefox Googel Chrome Exemplos de web servers: Internet Information Server Apache MIEEC SIEM --- 4 --- José António Faria
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 interacção com o utilizador. MIEEC SIEM --- 5 --- José António Faria
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. MIEEC SIEM --- 6 --- José António Faria
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. MIEEC SIEM --- 7 --- José António Faria
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. MIEEC SIEM --- 8 --- José António Faria
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. MIEEC SIEM --- 9 --- José António Faria
Protocolo HTTP Assim, as transações HTTP desenvolvem-se em 4 fases: 1. o browser abre uma conexão ao servidor 2. o browser envia um pedido ao servidor 3. o servidor envia uma resposta ao browser 4. a conexão é fechada Nota: Além da informação propriamente dita, as mensagens enviadas pelo servidor incluem a versão do protocolo, um código de sucesso ou erro, a identificação do servidor,... MIEEC SIEM --- 10 --- José António Faria
Endereços WEB Um URI - Uniform Resource Identifiers (endereço www), é 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 MIEEC SIEM --- 11 --- José António Faria
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. MIEEC SIEM --- 12 --- José António Faria
Endereços WEB: exemplo URL URN paginas.fe.up.pt / ~jfaria/public_html/aulas/siem / index.html servidor caminho no sistema de ficheiros ficheiro MIEEC SIEM --- 13 --- José António Faria
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 MIEEC SIEM --- 14 --- José António Faria
Introdução à linguagem HTML MIEEC SIEM --- 15 --- José António Faria
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) MIEEC SIEM --- 16 --- José António Faria
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) MIEEC SIEM --- 17 --- José António Faria
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> ver exemplo-inicial.html </html> MIEEC SIEM --- 18 --- José António Faria
Comandos Cada marca corresponde a um comando e está contida entre os sinais < 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 /. MIEEC SIEM --- 19 --- José António Faria
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 MIEEC SIEM --- 20 --- José António Faria
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> MIEEC SIEM --- 21 --- José António Faria
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. MIEEC SIEM --- 22 --- José António Faria
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> MIEEC SIEM --- 23 --- José António Faria
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 MIEEC SIEM --- 24 --- José António Faria
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 > MIEEC SIEM --- 25 --- José António Faria
Ligações (Links) Adimitindo que o ficheiro index.html do directório satd contém o bookmark Trabalhos, o comando: <a href= http://www.fe.up.pt/~jfaria/sie/ index.html#trabalhos > Trabalhos práticos</a> cria o link Trabalhos práticos Quando este link for clicado, o cursor ficará posicionado no local da página onde foi inserido o bookmark: <a name= Trabalhos > MIEEC SIEM --- 26 --- José António Faria
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. MIEEC SIEM --- 27 --- José António Faria
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>). MIEEC SIEM --- 28 --- José António Faria
Tabelas 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. Nota MIEEC SIEM --- 29 --- José António Faria
Tabelas O HTML suporta múltiplas propriedades associadas às tabelas, às linhas e às células que permitem definir em detalhe o aspecto 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,... MIEEC SIEM --- 30 --- José António Faria
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). MIEEC SIEM --- 31 --- José António Faria
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 MIEEC SIEM --- 32 --- José António Faria
Introdução às folhas de estilo (CSS) MIEEC SIEM --- 33 --- José António Faria
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). MIEEC SIEM --- 34 --- José António Faria
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 MIEEC SIEM --- 35 --- José António Faria
Exemplo MIEEC SIEM --- 36 --- José António Faria
Dimensões, background, tipo de letra das divisões MIEEC SIEM --- 37 --- José António Faria
Cor, tamanho dos vários tipos de títulos MIEEC SIEM --- 38 --- José António Faria
Indentação do texto MIEEC SIEM --- 39 --- José António Faria
Margens, espaçamento, tipo de letra: - células header e dados, - linhas normais e alternativas MIEEC SIEM --- 40 --- José António Faria
Tipo de letra, cores, border dos botões MIEEC SIEM --- 41 --- José António Faria
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 } MIEEC SIEM --- 42 --- José António Faria
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 MIEEC SIEM --- 43 --- José António Faria
Selectores 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. MIEEC SIEM --- 44 --- José António Faria
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> MIEEC SIEM --- 45 --- José António Faria
Selectores 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; } MIEEC SIEM --- 46 --- José António Faria
Selectores ID <body> <div id=div_menu>... </div> </body> #div_menu { left: 3px; width: 800px; position: absolute; top: 3px; height: 28px; background-color: blue; } MIEEC SIEM --- 47 --- José António Faria
Selectores 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> MIEEC SIEM --- 48 --- José António Faria
Selectores 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> MIEEC SIEM --- 49 --- José António Faria
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> MIEEC SIEM --- 50 --- José António Faria
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> MIEEC SIEM --- 51 --- José António Faria
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. MIEEC SIEM --- 52 --- José António Faria
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. MIEEC SIEM --- 53 --- José António Faria
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; } MIEEC SIEM --- 54 --- José António Faria