Introdução ao HTML e às folhas de estilo (CSS)

Transcrição

1 MIEEC SIEM ano letivo 2013/14 Introdução ao HTML e às folhas de estilo (CSS) José A. Faria ([email protected]) FEUP, DEIG Setembro 2013 MIEEC SIEM José António Faria

2 Introdução ao protocolo HTTP MIEEC SIEM José António Faria

3 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 José António Faria

4 Introdução Exemplos de web browsers: Internet Explorer Mozzila Firefox Googel Chrome Exemplos de web servers: Internet Information Server Apache MIEEC SIEM José António Faria

5 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 José António Faria

6 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 José António Faria

7 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 José António Faria

8 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 José António Faria

9 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 José António Faria

10 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 José António Faria

11 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 José António Faria

12 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 José António Faria

13 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 José António Faria

14 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 José António Faria

15 Introdução à linguagem HTML MIEEC SIEM José António Faria

16 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 José António Faria

17 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 José António Faria

18 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 José António Faria

19 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 José António Faria

20 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 José António Faria

21 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 José António Faria

22 Exemplo <a ref= 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 José António Faria

23 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= > <img src= figuras/fig4.jpg > </a> MIEEC SIEM José António Faria

24 Ligações (Links) <a href= > <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 José António Faria

25 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 José António Faria

26 Ligações (Links) Adimitindo que o ficheiro index.html do directório satd contém o bookmark Trabalhos, o comando: <a href= 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 José António Faria

27 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 José António Faria

28 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 José António Faria

29 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 José António Faria

30 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 José António Faria

31 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 José António Faria

32 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 José António Faria

33 Introdução às folhas de estilo (CSS) MIEEC SIEM José António Faria

34 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 José António Faria

35 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: MIEEC SIEM José António Faria

36 Exemplo MIEEC SIEM José António Faria

37 Dimensões, background, tipo de letra das divisões MIEEC SIEM José António Faria

38 Cor, tamanho dos vários tipos de títulos MIEEC SIEM José António Faria

39 Indentação do texto MIEEC SIEM José António Faria

40 Margens, espaçamento, tipo de letra: - células header e dados, - linhas normais e alternativas MIEEC SIEM José António Faria

41 Tipo de letra, cores, border dos botões MIEEC SIEM José António Faria

42 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 José António Faria

43 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 José António Faria

44 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 José António Faria

45 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 José António Faria

46 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 José António Faria

47 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 José António Faria

48 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 José António Faria

49 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 José António Faria

50 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 José António Faria

51 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 José António Faria

52 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 José António Faria

53 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 José António Faria

54 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 José António Faria