Introdução às tecnologias Web - ITW
Aula 2 – Introdução à World Wide Web (WWW)
Sumário
Breve história da Internet
O protocolo http/https
A linguagem html – versões iniciais
Cabeçalhos, parágrafos, áreas, hiperligações, tabelas. …
História de Internet / WWW
6 de agosto de 1991 – Tim Berners-Lee, a trabalhar no CERN, Suíça, publica
um resumo do projeto da World Wide Web no alt.hypertext newsgroup. Essa
data marca o nascimento da Web como um serviço público da Internet;
1993 – Marc Andreessen, no NCSA, University of Illinois, EUA, apresenta o
primeiro navegador gráfico, o Mosaic.
Depois da graduação Marc Andreessen associou-se a um anterior chefe da Silicon Graphics
e iniciaram a comercialização do Mosaic que passou a chamar-se Netscape em Abril 1994.
História de Internet / WWW
A Netscape Communications Corporation foi responsável pelo
desenvolvimento de:
Secure Sockets Layer Protocol (SSL) – protocolo para transmissão segura de dados,
ainda hoje largamente utilizado (https, por exemplo);
JavaScript – a linguagem de programação mais utilizada na criação de programas para
páginas web, do lado do cliente, ainda hoje utilizada (até nesta disciplina! ).
A Netscape foi comprada em 1999 por 4.2MM$ pela AOL, perto do pico do
que na altura de denominou como “dot-com bubble”
História de Internet / WWW
Antes da venda da Netscape Communications Corporation à AOL, foi
disponibilizado o código fonte (open source) e criada a Mozilla Organization
para permitir o desenvolvimento futuro do produto em diferentes direções.
A Mozilla Organization reescreveu todo o código do browser e denominou esse
desenvolvimento Gecko engine;
Todas as versões do Netscape até ao seu encerramento foram baseadas no
Gecko que foi posteriormente utilizado no browser Firefox – da Mozilla
Foundation.
Evolução histórico-gráfica da marca firefox
História de Internet / WWW
Windows Internet Explorer foi o browser da Microsoft desde 23 de agosto de 1995.
Era baseado no motor Gecko produzido pela Mozzila organization em open source.
.oOo.
Em 2 de setembro de 2008 saiu a primeira versão beta do browser Chrome da
Google. Em 11 de dezembro de 2008 foi lançada uma versão estável ao público em
geral.
.oOo.
Em 17 de Março de 2015, a Microsoft anunciou que o Microsoft Edge substituirá o
Internet Explorer no Windows 10.
Assim, o Internet Explorer 11 foi a última versão deste browser.
História de Internet / WWW
Em 8 de abril de 2019, a Microsoft anuncia que o Microsoft Edge passa a ser
baseado em Chromium.
Não confundir com …
O Chromium é um projeto browser de código aberto
que é também a base do browser da web Chrome.
A maior diferença entre os dois browsers é que, embora
o Chrome seja baseado no Chromium, a Google também
adiciona ao Chrome vários recursos proprietários, como
atualizações automáticas e suporte para formatos de
vídeo adicionais, etc, etc, etc. O Edge, atualmente,
incorpora as ferramentas da OpenAI/ChatGPT
História de Internet / WWW
Estatísticas da “guerra dos browsers”
O IE foi durante muitos anos hegemónico vindo, no entanto a perder cota de
mercado para o Google Chrome da Google.
O Chrome assumiu a liderança em maio de 2012, de acordo com o site StatsCounter.
História de Internet / WWW
Os pioneiros - resumos
Tim Berners Lee
Criador e ainda atual mentor da WWW
Uniform Resource Locator (URL),
Hypertext Transfer Protocol (HTTP),
Hypertext Markup Language (HTML)
Marc Andreessen
Criador do Mosaic
Fundador da Netscape Communications Corporation
HTTP
Hypertext Transfer Protocol
Hypertext Transfer Protocol (HTTP)
Protocolo utilizado para transferir documentos de hipertexto e seus recursos
de máquinas remotas.
Hypertext Transfer Protocol (HTTP)
Características gerais
Protocolo da camada de aplicação utilizado para transferir documentos de
hipertexto e os seus recursos (imagens, estilos, …) entre máquinas remotas.
Modelo de funcionamento baseado em pedido-resposta - não orientado a conexões;
Cabeçalho das mensagens é texto puro (não binário);
Não guarda estado entre conexões distintas, isto é, a cada novo pedido ao servidor, é sempre
criada uma nova conexão para o servidor (isso não acontece , por exemplo, quando estamos a fazer
uma transferência de ficheiros por ftp (file transfer protocol).
• No protocolo ftp, orientado à conexão, se uma transmissão for quebrada a
meio, o protocolo permite retomá-la a partir do ponto em que foi
interrompida;
• No protocol http, não orientado À conexão, se uma transmissão for quebrada
a meio, é necessário recomeçar a transmissão desde o início.
Hypertext Transfer Protocol (HTTP)
Sintaxe geral de uma URL
<protocolo>://<servidor>:<porta>/<caminho>/<recurso>?dados
Protocolo: http / https / …
A porta é opcional para serviços em portas default
para o http a porta default é a 80;
Para o https a porta default é a 443.
Caminho e recurso podem ser omitidos (URLs parciais)
As URLs podem conter dados depois do nome do recurso
Hypertext Transfer Protocol (HTTP)
Exemplos de URL’s
http://www.ua.pt
Neste exemplo de url parcial não se incluiu a porta default (80, para o http)
nem o caminho/recurso.
O recurso por default é variável e dependente do tipo de servidor e do tipo de linguagem
de programação utilizada no desenvolvimento do servidor.
Nomes típicos: index.htm / index.html / default.htm / default.html / default.asp /
default.aspx / default.php / …
https://www.ua.pt/pt/curso/383
Neste exemplo a URL possui vários recursos: pt (língua), curso(tipo de
informação), 383 (identificador do curso).
Pergunta: Que representa esta URL?
Hypertext Transfer Protocol (HTTP) } separadores
Exemplos de URL’s
http://some.site.com/APageCourse.aspx?id=383&p=4&a=9
Neste exemplo há 3 parâmetros / dados depois no nome do recurso
id=383, p=4, a=9
No primeiro separador é usado o ponto de interrogação;
Nos demais separadores á utilizado o “i comercial / ampersand”
Pergunta: como “&” é uma letra reservada, como enviar o símbolo “&” nos dados, como
no exemplo seguinte, sem baralhar o servidor?:
Empresa= Dias & Dias A. Boavida
http://localhost:6067/Aula01/index.html
Neste exemplo o nome do servidor é o “localhost”, o que significa que o servidor está
no computador do próprio utilizador (localhost).
Neste exemplo o servidor está a responder a pedidos na porta 6067. Isto é análogo ao que
deverá acontecer quando executarem os vossos projetos no Visual Studio.
Hypertext Transfer Protocol (HTTP)
Exemplo (http://www.mytestsite.com/hello.htm )
www.mytestsite.com
Hypertext Transfer Protocol (HTTP)
Pedido e resposta a um servidor web
GET /hello.html HTTP/1.1
User-Agent: Mozilla/4.0 (compatible; MSIE5.01; Windows NT)
Host: www.mytestsite.com
Accept-Language: en-us HTTP/1.1 200 OK
Accept-Encoding: gzip, deflate Date: Mon, 27 Jul 2009 12:28:53 GMT
Connection: Keep-Alive Server: Apache/2.2.14 (Win32)
Last-Modified: Wed, 22 Jul 2009 19:15:56 GMT
ETag: "34aa387-d-1568eb00"
Vary: Authorization,Accept
Pedido e resposta com sucesso Accept-Ranges: bytes
Content-Length: 88
Content-Type: text/html
Connection: Closed
<html>
<body>
<h1>Hello, World!</h1>
</body>
</html>
Hypertext Transfer Protocol (HTTP)
Pedido e resposta a um servidor web
GET /t.htm HTTP/1.1
User-Agent: Mozilla/4.0 (compatible; MSIE5.01; Windows NT)
Host: www.mytestsite.com
Accept-Language: en-us
Accept-Encoding: gzip, deflate HTTP/1.1 404 Not Found
Connection: Keep-Alive Date: Sun, 18 Oct 2012 10:36:20 GMT
Server: Apache/2.2.14 (Win32)
Content-Length: 230
Connection: Closed
Content-Type: text/html; charset=iso-8859-1
Pedido e resposta com erro
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html>
<head>
<title>404 Not Found</title>
</head>
<body>
<h1>Not Found</h1>
<p>The requested URL /t.html was not found on this server.</p>
</body>
</html>
Hypertext Transfer Protocol (HTTP)
Pedido e resposta a um servidor web (F12 > Network)
HTTPS
Hypertext Transfer Protocol Secure
HTTPS
Hyper Text Transfer Protocol Secure (1)
O HTTPS (Hyper Text Transfer Protocol Secure - protocolo de transferência de
hipertexto seguro) é uma implementação do protocolo HTTP sobre uma
camada adicional de segurança que utiliza o protocolo SSL/TLS.
Essa camada adicional permite que os dados sejam transmitidos através de uma conexão
criptografada que garante a autenticidade do servidor e do cliente por meio de
certificados digitais.
A porta TCP usada por norma para o protocolo HTTPS é a 443, no protocolo HTTP a porta
utilizada é a 80, tal como referido previamente.
HTTPS
Hyper Text Transfer Protocol Secure (2)
A ideia principal do HTTPS é criar um canal seguro sobre uma rede insegura.
Isso garante uma proteção razoável de pessoas que realizam escutas ilegais
(eavesdropping attacks) e de ataques de homem-no-meio (man-in-the-
middle), dado que a cifragem foi adequadamente utilizada e que o certificado
do servidor é verificável e confiável.
A confiança fornecida pelo HTTPS é baseada em autoridades de
certificação que vêm pré-instaladas no navegador.
Isto é equivalente a dizer "Eu confio na autoridade de certificação VeriSign / Microsoft /
etc. para me dizer em quem devo confiar".
Eavesdropping attacks
Antigamente, este tipo de ataque era realizado sobre as linhas telefónicas,
dando origem ao que ainda hoje conhecemos como uma escuta telefónica.
Com o desenvolvimento da tecnologia, os hackers criaram novos métodos e
canais para espiar as conversas digitais.
Hoje, os analisadores de protocolos podem ser usados para gravar comunicações baseadas
em IP e podem converter os dados em arquivos de áudio facilmente acessíveis.
A deteção de dados é outro tipo comum de escuta eletrónica. É usado principalmente nas
redes locais empresariais.
Como todas as comunicações dentro da rede são enviadas para os routers/gateways, os hackers podem aceder ao sistema e
intercetar esses dados. Da mesma forma, os dados das redes sem fios podem ser facilmente manipulados se informações não
seguras chegarem às portas da rede.
A forma mais comum de espionagem é conduzida usando a função de alto-falante ou
microfone de um dispositivo.
Esse tipo de ataque de espionagem ocorre mais comumente ao laptop do utilizador, já que o microfone pode ser ativado
discreta e remotamente por um terceiro.
Man In The Middle Attack
Princípio de funcionamento
O SSL (Secure Sockets Layer) usa um sistema de criptografia que utiliza duas
chaves para criptografar os dados, uma chave pública conhecida por todos e
uma chave privada conhecida apenas pelo destinatário.
O SSL é a única maneira eficaz de obter segurança de dados em comércio eletrónico.
Quando um SSL – Certificado Digital está instalado no website, um ícone de um cadeado
aparece no navegador e o endereço começa com https:// ao invés de http:// informando
que os dados serão criptografados.
HTTPS
o site https://www.ua.pt
HTML
HyperText Markup Language
A linguagem html
HTML (abreviatura da expressão inglesa “HyperText Markup Language”, que
significa “Linguagem de Marcação de Hipertexto”)
É a linguagem de marcação utilizada para produzir páginas na Web definida
por Tim Berners Lee, conforme já foi visto no início da aula.
Versões da linguagem html
November 24, 1995 - HTML 2.0 – IETF RFC 1866.
November 25, 1995: RFC 1867 (form-based file upload)
May 1996: RFC 1942 (tables)
August 1996: RFC 1980 (client-side image maps)
January 1997: RFC 2070 (internationalization)
January 1997 – HTML 3.2 published as a W3C Recommendation.
It was the first version developed and standardized exclusively by the W3C, as the IETF
December 1997 – HTML 4.0 published as a W3C Recommendation
Versões da linguagem html
April 1998 – HTML 4.0, reissued with minor edits without incrementing the
version number.
December 1999 – HTML 4.01, published as a W3C Recommendation.
Development of the parallel, XML-based language XHTML occupied the
W3C's HTML Working Group through the early and mid-2000s.
As of mid -2008 – HTML 4.01, ISO/IEC 15445:2000.
December 2012 – HTML5, candidate recommendation of the World Wide
Web Consortium.
October 2014 – HTML5 was published as a W3C Recommendation
December 2017 – HTML 5.2 as a W3C Recommendation,
Características de um elemento html
Um marcador / etiqueta (tag em inglês) num documento html fica sempre
colocada entre os símbolos “<“ e “>”. As etiquetas são responsáveis pela
formatação da linguagem.
Nas últimas versões da linguagem, um elemento é constituídos por um par
de marcadores: um no início do elemento e outro no fim do elemento.
Elemento HTML
<marcador lista de atributos>texto</marcador>
marcador de início do Marcador de fim do
elemento elemento
Características de um elemento HTML
Um elemento HTML é formado por um marcador com o nome de etiqueta (tag),
atributos, valores e filhos (que podem ser outros elementos ou texto).
Os atributos modificam os valores padrão dos elementos e os valores caracterizam essa
mudança.
Exemplo de um elemento HTML simples (não possui filhos):
<hr/>
Exemplo de um elemento HTML com atributos:
<a href="http://www.ua.pt/">Universidade de Aveiro</a>
Exemplo de um elemento HTML com filhos e atributos:
<p>A <a href="http://www.ua.pt/">Universidade de Aveiro</a> é a
minha Universidade.</p>
Estrutura base de um documento html
��DÔCŢŸRÉ ḥʧņľ�
�ḥʧņľ�
�ḥêắđ�
�ņêʧắ çḥắsșêʧ��ụʧǧ�¨� �� Cabeçalho do documento
�ņêʧắ ŋắņê��Aụʧḥộs� çộŋʧêŋʧ����
�ņêʧắ ŋắņê��Ḳêỳxộsđș� çộŋʧêŋʧ����
[Este conteúdo não é representado]
�ņêʧắ ŋắņê��Dêșçsîřʧîộŋ� çộŋʧêŋʧ����
�ʧîʧľê�Dộçụņêŋʧ��ʧîʧľê�
��ḥêắđ�
�čộđỳ� Conteúdo do documento
��čộđỳ� [Este conteúdo é representado]
��ḥʧņľ�
Elementos base de um documento html
Os elementos básicos de um documento html são:
<html> – define o início de um documento html e indica ao navegador que todo
conteúdo posterior a este marcador deve ser tratado como uma série de marcadores html.
Neste marcador pode ter como atributo a língua em que o documentos está escrito. Essa informação
é importante para os motores de pesquisa / indexação.
<head> – define o cabeçalho do documento e possui informações sobre o documento
que vai ser representado;
<body> – define o conteúdo principal do documento e é a paret que é exibida no
navegador. No marcador do corpo podem-se definir atributos comuns a toda a página,
como cor de fundo, margens, e outras formatações.
Elementos do cabeçalho de um documento
html
Dentro do cabeçalho podemos ter os seguintes elementos:
<title> – define o título da página; é exibido na barra de título do browser;
<style type="text/css"> – define a formatação das etiquetas em CSS (vamos ver isto no futuro, em detalhe);
<script type="text/javascript"> – define a programação de certas funções da página
escritas na linguagem JavaScript (vamos ver isto no futuro, em detalhe);
<link> – define ligações da página com outros arquivos, como por exemplo, feeds, CSS,
scripts, tipos de letra, etc.
<meta> – define propriedades da página, como, por exemplo, a codificação dos caracteres
(UTF-8, ISO-8859-1, …), a descrição da página (autor, keywords,…)
Etiquetas do corpo de um documento html
<h1>, <h2>, ... <h6> – define os cabeçalhos e títulos no documento em
diversos tamanhos;
<p>…</p> – define um novo parágrafo;
<br /> – impõe uma quebra de linha num texto;
<b>…</b>, <i>…</i>, <u>…</u> e <s>…</s> – determina diversas
formatações de letra: negrito, itálico, sublinhado e riscado, respectivamente.
<a>…</a> – cria uma hiperligação para um outro local, seja uma página, um
e-mail ou outro serviço.
Exemplo
Código fonte
��độçʧỳřê ḥʧņľ�
�ḥʧņľ ľắŋĝ��êŋ��
�ḥêắđ�
�ņêʧắ çḥắsșêʧ��ÛŢG�¨��
�ņêʧắ ŋắņê��Aụʧḥộs� çộŋʧêŋʧ��Kộắṛụîņ�Şộụșắ�Rîŋʧộ��
�����ņêʧắ�ŋắņê��Ḳêỳxộsđș��çộŋʧêŋʧ��đụņņỳ�řắĝê��ḥʧņľ��
�ņêʧắ ŋắņê��Dêșçsîřʧîộŋ� çộŋʧêŋʧ����
�ʧîʧľê�Dộçụņêŋʧộ�đê�ʧêșʧê��ʧîʧľê�
��ḥêắđ�
�čộđỳ�
�ḥ̦ �Ʌîđîʧ Ȟộņêsụș řsộčắsî ǧắčụľắņ�ŋộŋ�řộșșê��ḥ̦ �
�ḩ̣ �Í�çắŋʧîụŋçụľîș ʧắŋʧụș îssêʧîʧụș ŵîs�ʧêŋêsêʧụs���ḩ̣ �
�ř�Ľộsêņ îřșụņ độľộs șîʧ ắņêʧ��çộŋșêçʧêʧụs ắđîřîșçîŋĝ êľîʧ��Řụắŋʧụņ�Asîșʧộỵêŋî îŋĝêŋîụņ çộŋșụņřʧụņ ŵîđêņụș îŋ�
ņụșîçîș��Řụîđ ắîʧ Asîșʧộʧêľêș sêľîṛụîṛụê Rľắʧộŋîș ắľụņŋî��Ȟîç ŋîḥîľ ǧụîʧ��ṛụộđ ṛụắêsêsêņụș���ř�
�ř��č�Éắđêņŋê��ṛụắê sêșʧîŋçʧắ șîʧî���č� Řụắê đîľîĝêŋʧîșșîņê çộŋʧsắ�Asîșʧộŋêņ đîçụŋʧụs ắ�Cḥsỳîřřộ��Řụîřřê��ḥắčêș
êŋîņ ắ�sḥêʧộsîčụș��Ņêĝắʧ êŋîņ șụņņộ čộŋộ�ắǧǧêssê îŋçsêņêŋʧụņ đîêņ���ř�
�ř�
Şêđ ṛụîđ șêŋʧîắʧ��ŋộŋ�ŵîđêʧîș��Ňîŋîņê ŵêsộ��îŋṛụîʧ îľľê��çộŋșêŋʧîʧ��Bêắʧụș șîčî ŵîđêʧụs êșșê�ņộsîêŋș��Dụộ�
Ŗêĝêș��çộŋșʧsụçʧîộ îŋʧêssêʧê���î�Ņîḥîľ îľľîŋç ḥụç řêsŵêŋîʧ���î��čs ��
Şêđ ḥắêç ŋîḥîľ șắŋê�ắđ�sêņ�
��ř�
��čộđỳ�
��ḥʧņľ�
Exemplo
Representação no navegador
Hiperligações
Exemplos
Ligação para outro site internet:
<a href="https://pt.wikipedia.org/">Ligação à Wikipedia!</a>
Ligação para outra página do mesmo site:
Estando dentro do site www.ua.pt e pretendendo aceder à página do curso da LEI …
<a href="/pt/curso/383">Licenciatura em Engenharia Informática</a>
Que é equivalente a escrever…
<a href="https://www.ua.pt/pt/curso/383">Licenciatura em Engenharia Informática</a>
Em qualquer dos casos, este é o valor que aparecerá na barra de endereço do browser
Exemplos da utilização de hiperligações
com imagens
<a href="http://www.ua.pt/40anos">
<img src="/images/40anos.png" alt="40 anos da UA" title="40 anos da UA">
</a>
Parâmetros da hiperligação: Parâmetros da imagem:
• href = destino • src= localização da imagem
• alt = texto apresentado nos browsers de texto ou quando as
imagens não são apesentadas
• title = texto que é mostrado quando o rato passa sobre a
imagem (pode ser também utilizado o atributo aria-label)
• width = largura da imagem
• height = altura da imagem
Etiquetas do corpo de um documento html
<table>…</table> – cria uma tabela
As linhas são criadas com o marcador <tr>…</tr>
As células são criadas com o marcador <td>…</td>
Os cabeçalhos das colunas são criados com o marcador <th>…</th>
A legenda da tabela é inserda com o marcador <caption>…</caption>
Exemplos de tabelas
Exemplo de uma tabela (<table>) com duas linhas (<tr>) e 3 colunas (<td>)
<table border="1">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Adaptado de : http://www.w3schools.com/html/html_tables.asp
Exemplos de tabelas
Exemplo de tabela com 2 linhas (<tr>) sendo a primeira com cabeçalhos
(<th>) e a segunda com dados (<td>)
<table border="1">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Adaptado de : http://www.w3schools.com/html/html_tables.asp
Exemplos de tabelas
Exemplo de uma tabela com uma célula colapsada na horizontal (colspan).
Note que a 1ª linha possui apenas 2 colunas enquanto a 2ª linha possui 3 colunas.
Na primeira linha, as 2ª e 3ª colunas foram unidas numa única (atributo colspan="2").
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
Fonte: http://www.w3schools.com/html/html_tables.asp
Exemplos de tabelas
Exemplo de uma tabela com uma célula colapsada na vertical (rowspan).
Note que a 3ª linha possui somente uma coluna enquanto as duas anteriores possuem
duas.
Na 1ª coluna da 2ª linha o atributo rowspan="2" une esta célula com a seguinte.
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
Adaptado de: http://www.w3schools.com/html/html_tables.asp
Exemplos de tabelas
O atributo <caption> introduz uma legenda na tabela (caption)
<table border="1">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
Adaptado de: http://www.w3schools.com/html/html_tables.asp
Atributo de largura (width) de uma célula
Tabelas
<table style="width:100%">
<tr>
<th>Firstname</th>
<th style="width:70%">Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Atributo de altura (height) de uma célula
Tabelas
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr style="height:200px">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Atributo de borda (border) de uma célula
/ linha / tabela
<table style=“border:solid 1px black">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Etiquetas do corpo de um documento html
Imagens
<img /> – Insere uma imagem.
<img src="https://www.w3schools.com/images/lamp.jpg" alt="Lamp" width="32" height="32" />
<a><img /></a>
<a href="https://www.ua.pt">
<img src="http://makerlab.gitlab.io/jedy/img/ua_logo.png" alt="Universidade de Aveiro" height="50" />
</a>
Exemplo
Tabela com 300 px de largura O que devemos
<table xxxxxxxxxxxxxxxxxxxx> colocar na linha
<tr> amarela?
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
