PROGRAMAÇÃO WEB - CLIENTE
HTML
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
HTML – HyperText Markup Language
HTML & elementos
• Define a estrutura de uma página web
• É a linguagem principal que os browsers utilizam para interpretar e exibir conteúdo das página web
(botões, imagens, textos, etc…)
• Versão atual: HTML5 (W3C) - [Link]
• Composto por elementos, que são apresentados por pares de Tags entre parênteses angulares <>
• É o mais básico das tecnologias de front-end que serve como base de estilização com CSS e
funcionalidades implementadas com JavaScript
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
HTML – HyperText Markup Language
Como funciona?
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
HTML – HyperText Markup Language
Como funciona?
• Documentos HTML são ficheiros com as extensões .html ou .htm
• Podem ser visualizados em qualquer browser (Chrome, Safari, ou Mozilla Firefox).
• O browser faz a leitura do ficheiro em html e processa o conteúdo para visualização dos
utilizadores.
• Tipicamente os sites possuem várias páginas HTML.
• Por exemplo: homepage, sobre a empresa, página com produtos, contatos, etc… Mas todas com
documentos HTML distintos.
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
HTML – HyperText Markup Language
Como funciona?
• A linguagem do HTML é constituída por tags:
< > tag de abertura
</ > tag de fecho
• Dentro das tags existem elementos
• Se quisermos colocar um parágrafo num site utilizamos a tag <p> que semanticamente quer dizer
que o conteúdo que se espera nesse Elemento é um parágrafo
• Atributos são informações que atribuímos à tag para que ela se comporte de certa maneira.
• Deverão estão sempre entre aspas “ “
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
HTML – HyperText Markup Language
HTML – Tags Syntax
1. <tag> …. (texto/conteúdo) …. </tag>
<p> Esta tag permite adicionar um parágrafo </p>
2. <tag atribute=“value”> … (texto/conteúdo) …. </tag>
<a href=“[Link]”> LINK </a>
3. <tag atribute=“value”/>
<img src=“[Link]”/>
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
HTML – HyperText Markup Language
HTML – Estrutura do documento
Cada página HTML consiste numa série de elementos. E estes têm uma hierarquia que estrutura o
conteúdo entre seções, parágrafos, cabeçalhos e outros blocos de conteúdo.
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
HTML – HyperText Markup Language
HTML – Estrutura do documento
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
HTML – HyperText Markup Language
HTML – Elementos base
• <!DOCTYPE html> - declaração que define o tipo de documento (HTML5)
• <html> - elemento raíz da página HTML
• <head> - contém metadados sobre o document e é colocado entre a tag <html> e a tag <body> . Tags
que descrevem metadados:
• <title>
• <link>
• <style>
• <script>
• <meta>
• <base>
• <title> - especifica o título do documento
• <body> - contém o conteúdo visível da página
• <h1> - define um heading grande
• <p> - define um parágrafo POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
HTML – HyperText Markup Language
Comentários HTML
• O HTML não é case sensitive! <p> = <P>
• O HTML 5 não requer lowercase tags, mas o W3C recomenda lowercase e obriga lowercase em
documentos como o XHTML
• Comentários
• Informação extra
• Debugging
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
HTML – HyperText Markup Language
HTML – Estrutura do documento
<!DOCTYPE html>
• Define a versão HTML a usar no documento;
• Esta linha é obrigatória e importante;
• Colocar sempre na primeira linha do ficheiro;
• Permite que o browser saiba que aquele código é HTML;
• Permite usar e validar os elementos HTML5
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
HTML – HyperText Markup Language
HTML – Estrutura do documento
<html> … </html>
• Na estrutura do documento, antes de tudo, inserimos uma tag <html>
• Dentro dessa tag, é necessário indicar outras duas tags: <head> e <body>
• Essas duas tags são "irmãs", pois estão no mesmo nível hierárquico em relação à tag "pai", que é
<html>.
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
HTML – HyperText Markup Language
HTML – Estrutura do documento
<head> … </head>
• Esta tag contém informações sobre o documento que são importantes para o browser e não para
os visitantes do site.
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
HTML – HyperText Markup Language
HTML – Estrutura do documento
<head> … </head>
• *1 <meta name> adiciona metadados ao documento:
charset - especifica o conjunto de caracteres
<meta charset=“UTF-8”>
• generator – Software utilizado para gerar a página
<meta name="generator" content="HTML Tidy ... “>
• author – Autor do documento
<meta name="author" content="Marco Monteiro”>
• description – Descrição do documento
<meta name="description" content="Informação sobre HTML”>
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
HTML – HyperText Markup Language
HTML – Estrutura do documento
<head> … </head>
• keywords – Conjunto de palavras chave sobre o documento (separadas por vírgulas)
<meta name="keywords" content="HTML, CSS, XML, XHTML”>
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
HTML – HyperText Markup Language
HTML – Estrutura do documento
<body> … </body>
• Contém o corpo do documento, que é exibido na janela do browser.
• É necessário que o <body> tenha ao menos um elemento "filho", ou seja, uma ou mais tags HTML
dentro dele. Neste exemplo, usamos a tag <h1>, que indica um título.
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
HTML – HyperText Markup Language
HTML – Tags
• <h[1,2,3,4,5,6]> </h[1,2,3,4,5,6]> - Headings
• <p> </p> - Define um parágrafo
• <a> </a> - Define uma âncora ou um link (hyperlink)
• <img> - Define uma imagem
• <button> </button> - Define um botão
• <script> </script> - Permite incluir um script numa linguagem de programação (e.g. Javascript)
• <br> - Line break sem começar um novo parágrafo
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
HTML – HyperText Markup Language
VER EXEMPLO 1
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
HTML – HyperText Markup Language
HTML – Hiperligações
• As hiperligações podem “saltar” para páginas, ou para âncoras na própria página
• Nos dois casos, utilizamos a tag <a>, que define uma hiperligação e que com o atributo href
indica o destino do link.
• O seguinte código mostra como adicionar uma hiperligação para outra página, neste caso,
indicada pelo arquivo [Link]
<a href="[Link]">Página 2</a>
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
HTML – HyperText Markup Language
HTML – Hiperligações
• Também é possível “saltar” para âncoras de outras páginas
• A ancora é definida por uma hiperligação com o atributo id:
<a id=“ancora">texto</a>
• A hiperligação para uma âncora é precedido do caráter # no próprio documento:
<a href=“#ancora”>texto</a>
• Noutro documento:
<a href=“[Link]#ancora">texto</a>
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
HTML – HyperText Markup Language
HTML – Imagem
• A inserção de imagens é feita através da tag img, que recebe do atributo src o endereço do
ficheiro a ser carregado.
• Existem mais 2 atributos importantes:
• alt - indica um texto alternativo que será exibido caso o ficheiro não possa ser carregado
• title - indica o texto que aparece como tooltip* ao passar o rato por cima da imagem
• *moldura flutuante (pop up) que abre ao passar o rato por cima da imagem
[Link]
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
HTML – HyperText Markup Language
HTML – Style & Special elements
• Style – a propriedade é uma propriedade CSS. O valor é um valor CSS.
• Além do atributo Style, o HTML define elementos especiais de texto:
• <b> - Bold text
• <del> - Deleted text
• <strong> - Important text
• <ins> - Inserted text
• <i> - Italic text
• <sub> - Subscript text
• <em> - Emphasized text
• <sup> - Superscript text
• <mark> - Marked text
• <small> - Small text
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
HTML – HyperText Markup Language
VER EXEMPLO 2
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
HTML – HyperText Markup Language
HTML – Listas
As listas, tag <li></li>, são elementos úteis para organizar e ordenar itens que estão relacionados de
alguma forma.
Em HTML é possível criar 2 tipos de listas:
• Order List (Listas Ordenadas) • Unorder List (Listas Não Ordenadas)
<ol> <ul>
<li> ABC </li> <li> ABC </li>
<li> Olá Mundo </li> <li> Olá Mundo </li>
</ol> </ul>
Resultado: Resultado:
1. ABC • ABC
2. Olá Mundo • Olá Mundo
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
HTML – HyperText Markup Language
VER EXEMPLO 3
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
HTML – HyperText Markup Language
HTML – Tabelas
• As tabelas são elementos utilizados com frequência para exibir dados de forma organizada
em linhas e colunas.
• No HTML são constituídas por 3 tags básicas:
• table - para delimitar a tabela
• tr - para as linhas
• td - para as colunas
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
HTML – HyperText Markup Language
HTML – Tabelas
• <table> </table> - Cria uma tabela
• <tr> - Definição de uma linha
• <td> - Definição de uma célula
• <th> - Definição do table header (por defeito são centrados a negrito)
• <caption> - Definição da legenda da tabela
Existem ainda outras 3 tags utilizadas para delimitar de forma mais organizada as partes da
tabela
• <thead> - Definição do header group na tabela
• <tbody> - Definição do body group na tabela
• <tfoot> - Definição do footer group na tabela
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
HTML – HyperText Markup Language
VER EXEMPLO 4
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
HTML – HyperText Markup Language
HTML – Tabelas
Atributo colspan do elemento <td> - Permite agrupar várias células “horizontais” numa só (faz o
merge horizontal de várias células numa só)
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
HTML – HyperText Markup Language
HTML – Tabelas
Atributo rowspan do elemento <td> - Permite agrupar várias células “verticais” numa só (faz o
merge vertical de várias células numa só)
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
HTML – HyperText Markup Language
HTML – Elementos block e inline
• Existem 2 tipos de elementos: de bloco e inline:
• Elementos de bloco começam uma nova linha no documento.
• Podem conter outros elementos de bloco, elementos inline ou dados (texto)
• Elementos inline são integrados no fluxo do texto e não criam uma quebra de linha.
Não podem conter elementos de bloco.
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
HTML – HyperText Markup Language
HTML – Elementos block e inline
Tags de Elementos bloco
• Os 3 elementos bloco que todo documento HTML precisa conter são: <html>, <head>, e
<body>.
• A tag <html></html> é o elemento de maior nível que está em todas as páginas HTML.
• A tag <head></head> possui informações do meta como o título e charset da página.
• A tag <body></body> engloba todos os elementos que são mostrados na página.
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
HTML – HyperText Markup Language
HTML – Elementos block e inline
Tags de Elementos inline
• Muitos elementos em linhas são utilizados na formatação de textos.
• Por exemplo, uma tag <strong></strong> mostra um elemento em negrito, enquanto as
tags <em></em> mostram em itálico.
• Hyperlinks também são elementos em linha que utilizam as tags <a></a> e o atributo href
para indicar o destino do link.
• As imagens também são elementos em linha. É possível adicionar uma tag <img> sem a
necessidade de fecho. Mas é preciso utilizar o atributo src para especificar o caminho da
imagem.
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
HTML – HyperText Markup Language
HTML – Elementos block e inline
Tags de <div> e <span>
• São 2 das tags mais utilizadas no HTML. Ambas têm grande importância na composição do layout
das páginas e na formatação do texto.
• Definem apenas zonas lógicas
• Não têm semântica própria
• Não têm formatação própria.
• Servem apenas para agrupar outros elementos / dados
• Usados normalmente em conjunto com estilos (CSS) para redefinir o formato de uma
determinada zona da página
• Diferença entre os dois: <div> é um elemento de bloco e <span> é um elemento inline
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
HTML – HyperText Markup Language
HTML – Elementos block e inline
• <div> - é um elemento em bloco (block); começa numa nova linha e ocupa a
largura total
• Utilizado normalmente para criar blocos de conteúdo na página web;
• Permite agrupar outros elementos (bloco e inline) e pode conter dimensões
e posição definidas.
• A sua principal característica, é que quando adicionada na página, gera
automaticamente uma nova linha no layout (semelhante a um parágrafo).
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
HTML – HyperText Markup Language
HTML – Elementos block e inline
• <span> - é um elemento em linha (inline); não começa numa nova linha e apenas
ocupa a largura necessária
• Utilizado normalmente para colocar algum destaque numa parte de texto;
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
HTML – HyperText Markup Language
HTML – Elementos block e inline
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
HTML – HyperText Markup Language
HTML – Formulários
• Conjunto de campos que o utilizador pode preencher e cujos dados são enviados (submetidos)
para um servidor
• Cada formulário deve ter um botão “submit” (e quando o botão é clicado os dados são enviados
para o servidor)
• Uma página Web pode conter vários formulários
• É representado pela tag <form>
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
HTML – HyperText Markup Language
HTML – Formulários
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
HTML – HyperText Markup Language
HTML – Formulários
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
HTML – HyperText Markup Language
HTML – Formulários
Algumas regras para criar formulários:
• Obrigatório preencher o atributo action do <form>
• Deve conter o endereço (URL) para onde são enviados os dados.
• O atributo method é opcional. Valores possíveis: "get" e "post". Por omissão, valor = "get" (se
method não existir, é usado o método get).
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
HTML – HyperText Markup Language
HTML – Formulários
• O atributo name dos campos (<input>, <select>, <textarea>) deve ser preenchido.
• O name é submetido em conjunto com o valor introduzido pelo utilizador. O servidor recebe a
informação em pares name/valor
• Cada formulário deve ter um botão (ou imagem) para submeter os dados
<input type= "submit">
<button type= "submit">
<input type= "image">
(Em alternativa, os dados poderão ser submetidos através de código JavaScript)
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
HTML – HyperText Markup Language
HTML – Formulários
VER EXEMPLO 5
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
HTML – HyperText Markup Language
HTML – Atributos mais comuns
class= “” // Define estilos iguais para os elementos com o mesmo nome da classe.
Para definir mais do que uma classe, separar por espaços. Tags diferentes podem partilhar
a mesma classe <h1> <p>
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
HTML – HyperText Markup Language
VER EXEMPLO 6
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
HTML – HyperText Markup Language
HTML – Atributos mais comuns
id=“” // define um id único para um elemento HTML. O id pode ser usado em CSS e
JavaScript para efetuar certas tarefas para um elemento com um valor específico.
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
HTML – HyperText Markup Language
HTML – Atributos mais comuns
• Class vs ID
• Um elemento HTML só pode ter um único id que pertence a esse elemento
• Uma classe pode ser usada em múltiplos elementos
VER EXEMPLO 7
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
HTML – HyperText Markup Language
HTML5 – Layout
Os websites costumam mostram conteúdo em múltiplas
colunas (como uma revista/jornal):
• <header> - Cabeçalho do documento ou da secção;
• <nav> - Espaço para links de navegação
• <section> - Define uma secção no documento;
• <article> - Define um artigo independente e contido
• <aside> - Define conteúdo à parte do conteúdo (ex.
sidebar)
• <footer> - Rodapé do documento ou da secção
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
HTML – HyperText Markup Language
Responsive Web Design
• Responsive Web Design tem a ver com o uso do HTML e CSS para automaticamente
redimensionar, ocultar, reduzir ou ampliar um website, de forma a apresentá-lo corretamente em
todos os dispositivos (desktops, tablets e smartphones)
• Para tal, adicionar o elemento <meta> em todas as páginas:
POLITÉCNICO DE LEIRIA . TeSP PSI
POLITÉCNICO DE LEIRIA . Programação para a Web Cliente
HTML – HyperText Markup Language
Responsive Web Design
Sem viewport: Com viewport:
POLITÉCNICO DE LEIRIA . TeSP PSI