INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, I.

P
DELEGAÇÃO REGIONAL NORTE
Centro de Emprego e Formação Profissional do Alto Tâmega

UFCD 9963 - EDIÇÃO WEB

“A internet de todas as coisas poderá em breve criar um fluxo de dados tão imenso e tão rápido
que mesmo algoritmos humanos aprimorados não darão conta dele.”
Yuval Noah Harari

Elaborado por: Rui Fernandes

UFCD –9963 - EDIÇÃO WEB

PAG.:2
UFCD –9963 - EDIÇÃO WEB
Índice

Conteúdo
Conceitos ......................................................................................................... 4
Planeamento de websites ..................................................................................... 10
Navegação e Usabilidade...................................................................................... 13
introdução ao html............................................................................................. 16
O elemento/Tags HTML ....................................................................................... 18
TAGS DE MODELOS DE CONTEÚDO ........................................................................... 19
Headings ou Títulos ............................................................................................ 28
Listas ............................................................................................................. 29
Formularios ..................................................................................................... 32
servidores ....................................................................................................... 49

PAG.:3
UFCD –9963 - EDIÇÃO WEB
CONCEITOS

O que é Internet?
A Internet consiste num conjunto de servidores (computadores) ligados entre si aos quais
qualquer pessoa se pode ligar por modo a aceder à informação e transferir dados de todo tipo
existentes em qualquer um deles. Por vezes costuma-se dizer que é uma rede de redes à escala
mundial.

O que é preciso para aceder à internet?

Para aceder à Internet precisa de ter um (COMPUTADOR), um fornecedor internet (ISP) e um
programa para aceder à Internet que se chama browser ou navegador.

O que é um Browser e para que servem?

Os Browsers são também conhecidos por navegadores.
São programas de computador que permitem aos utilizadores verem e interagirem com os
websites ou páginas de internet.

O que é um servidor web?

O termo servidor web pode significar duas coisas:
um programa de computador responsável por aceitar pedidos HTTP de clientes, geralmente os
navegadores, e servi-los com respostas HTTP, incluindo opcionalmente dados, que geralmente
são páginas web, tais como documentos HTML com objetos embutidos (imagens, etc.), ou um
computador que executa um programa que provê a funcionalidade descrita acima.

O que é um domínio?
O nome de Domínio é seu Endereço Web (registro do Nome de Domínio). É a sua identidade na
Internet, sua marca "online".

PAG.:4
UFCD –9963 - EDIÇÃO WEB
Os utilizadores irão lembrar desse nome e usá-lo para encontrar informações sobre determina
Empresa, produtos e
serviços.

Como em nenhuma hipótese podem existir dois nomes de domínio iguais para empresas
diferentes, seu Endereço Web é único.

Tecnicamente, um Endereço Web é uma construção de endereço utilizado para identificar e

localizar computadores na Internet. Os computadores usam números de Protocolo Internet (IP
- Internet Protocol) para se acharem entre si. As pessoas acham difícil memorizar estes
números (ex:172.18.16.23).

Em decorrência, Endereços Web foram criados para facilitar a memorização de palavras e frases
que identificam os endereços Internet.

Endereço Ip
Na Internet, cada servidor possui um endereço único (endereço IP), uma série de
números separados por pontos; por exemplo o endereço do servidor Web do youtube é
216.58.195.78 que corresponde a youtube.pt

O que são cookies?

Cookies são pequenas informações, deixadas pelos sites que visadospelos utilizadores, nos seus
computadores/dispositivos. Os Cookies são utilizados pelos sites de diversas formas, eis
algumas:

• Para guardar a sua identificação e senha quando pula de uma página para outra;
• Para manter uma lista de compras em sites de comércio eletrônico;
• Personalização de sites pessoais ou de notícias, quando você escolhe o que quer
• que seja mostrado nas páginas destes sites;
• Manter a lista das páginas vistas em um site, para estatística ou para retirar as

PAG.:5
UFCD –9963 - EDIÇÃO WEB
• páginas que você não tem interesse dos links.

O problema com relação aos Cookies é que eles são utilizados por empresas que
vasculham suas preferências de compras e espalham estas informações para outros sites de
comércio eletrônico. Assim você sempre terá páginas de promoções ou publicidade, nos sites
que visitar, dos produtos de seu interesse.

Na verdade, não se trata de um problema de segurança, mas alguns utilizadores podem

considerar este tipo de atitude uma invasão de privacidade.

Site ou página?

Um site (ou website) é um conjunto de páginas de informação disponíveis na Internet. Pode

conter todo o tipo de informações em texto, imagem, animações, vídeo e som e pode ser
consultado a partir de qualquer local do mundo através de quaisquer dispositivos com acesso a
internet.

Home Page.
Página inicial de um site, tem o objetivo de apresentar e indicar as outras páginas
que compõem o mesmo.

URL.
Abreviatura de Universal Resource Locator é o endereço de um recurso ou página da Internet.
Pode ser um endereço de um site ou de um recurso como um arquivo, geralmente utiliza os
protocolos HTTP, FTP, entre outros.

Hiperlink .
Ou simplesmente Link é uma referência dentro de um documento ou página da
Internet a outro documento. É o elo de ligação entre as páginas da Internet. Podem aparecer
associados a palavras ou imagens e pode despoletar determinada ação.

PAG.:6
UFCD –9963 - EDIÇÃO WEB

Web designer.
É uma extensão de designer, profissional responsável pela criação das páginas da
Internet (layout) por meio de diversas áreas de conhecimento além do design, como
programação por exemplo.

PAG.:7
UFCD –9963 - EDIÇÃO WEB

O que é desenvolvimento para a Web?

O desenvolvimento para a Web refere-se ao processo de criar uma página da Web
ou um site. As páginas da Web são escritas em HTML, CSS , JavaScript etc. Essas páginas podem
consistir em texto simples e imagens gráficas. As páginas podem também ser interativas ou
exibir informações dinâmicas. As páginas interativas de servidor são mais complexas de se
desenvolver, mas possibilitam sites mais avançados. Hoje em dia, a maioria das páginas é
interativa e fornece serviços online modernos, como carrinhos de compra, visualizações
dinâmicas e até mesmo complexas redes sociais como o FACEBOOK.

O que é preciso para ter um Site na Internet.

1- Fazer uma pesquisa na Internet das páginas relacionadas com o que pretende fazer;
2- Fazer um esquema da informação e imagens que pretende colocar desenvolver a página;
3- Ter um alojamento (pode alugar um servidor online, criar o próprio servidor, ou arranjar um
grátis);
4- Registar um domínio (.com,.net,.org,.pt,.tv,etc) ou arranjar um subdomínio grátis.

Editores de Paginas Web.

• Dreamweaver- Programa O Adobe Dreamweaver é um editor profissional que cria
e gere páginas Web. Com este programa é fácil criar e editar páginas compatíveis com
diversos navegadores e plataformas usando ferramentas avançadas de desenho e layout.
• HTML-KIT;
• Programmer’s notepad
• Notepad (bloco de notas);
• Visual Studio Code (editor HTML grátis desenvolvido pela Microsoft);~
• Brackets (editor de códigos voltado para web, desenvolvido pela Adobe);
Editores de imagens.
Adobe Photoshop - O Adobe Photoshop é o editor de imagens mais utilizado pela web
designers profissionais. Com ele é possível manipular as imagens de todas as maneiras
possíveis trabalhando com as mais utilizadas extensões de arquivos gráficos.

PAG.:8
UFCD –9963 - EDIÇÃO WEB
Coreldraw - O Coreldraw é um programa gráfico que gera desenhos vetoriais. Ele cria
imagens usando formas de objetos armazenados internamente como equações matemáticas
(vetor), bem diferente das aplicações que utilizam bitmap, uma imagem composta pôr uma
série de pontos.
Gimp - é a opção mais profissional que você poderá encontrar gratuitamente. Além das
ferramentas já encontradas – como pincéis, filtros, etc -, também é possível instalar plugins
oferecidos pela comunidade que utiliza o editor. E mais: muitos usuários do Gimp argumentam
que o programa não perde muito para o Photoshop. Para quem já teve experiência com o
software da Adobe, a interface será familiar e facilmente explorada.

O Gimp é um projeto aberto, ou seja, permite contribuições de desenvolvedores e usuários ao

redor do mundo. Assim, você conta com possibilidades infinitas.

Photoscape - é um editor relativamente fácil, ideal para quem não tem experiência com
softwares de edição. Ele permite que você faça colagens, mexa com gifs animados, possibilita
a conversão de fotos em formato RAW e tem uma série de outras ferramentas.

PAG.:9
UFCD –9963 - EDIÇÃO WEB
PLANEAMENTO DE WEBSITES

Os websites têm objetivos específicos que determinam o seu aspeto.

Aspetos a ter em conta:

• Objetivos do Website.
• Importância do aspeto visual (combinação de cores e imagens).
• Importância da qualidade e atualidade da informação.
• Fácil localização da informação pretendida.
• Navegabilidade
• Usabilidade

Definição do site
• Quais os seus objetivos?
• A quem se destina (público-alvo)?
• Como será produzido?
• Que tecnologia será utilizada na sua construção?
• Onde será colocado?
• Qual o espaço máximo que poderá ocupar?
• Como será atualizado?

Escolher o conteúdo
• Que elementos vais incluir: texto, imagens, sons, tabelas, fotografias,
• Organizar o conteúdo
• Decidir qual o n.º páginas do site
• Dividir o conteúdo por elas
• Qual a estrutura das páginas
• Página principal: deve ser apelativa e informativa!
Atenção: não exagerar na quantidade de informação por página

PAG.:10
UFCD –9963 - EDIÇÃO WEB
• Arquitetura de informação
o Aspeto de background;
o Formato do cabeçalho;
o Formato dos rodapés;
o Gráficos;
o Área de conteúdo propriamente dito;
o Área de navegação Arquitetura de informação,

PAG.:11
UFCD –9963 - EDIÇÃO WEB
• Estrutura de uma Página
o Elaborar um esboço ou esquema das páginas que vão integrar o Web site,
definir o conteúdo de cada página, definir as ligações entre as páginas, etc.
o Deve-se fazer o storyboard (esquema da página)
Exemplo:
Rascunho

Organograma

PAG.:12
UFCD –9963 - EDIÇÃO WEB
NAVEGAÇÃO E USABILIDADE

• Aspetos a ter em conta antes da criação do Website:

o Conteúdo
o Fatores de design
o Navegação
o Layout
o Apoio técnico e processo de atualização
• Conteúdo das páginas
o Resumir os conteúdos ao fundamental.
o A informação deve estar organizada tendo em atenção a sua importância.
o Textos com uma linguagem simples e com parágrafos curtos (5 a 8 linhas).
• Design - Navegação
o A estrutura do site deve manter-se simples e de fácil navegação.
o Disponibilizar um mapa do Web site para o utilizador se situar.
o Disponibilizar uma secção de “Ajuda” com a descrição dos passos a efetuar
para visualizar a página corretamente.
o O Web site pode conter um campo para pesquisa.
o Disponibilizar uma secção de “Contactos”.
o Possibilitar em qualquer altura o acesso à página inicial.
o Definir menus de acordo com os conteúdos principais e secundários de
forma a facilitar o acesso à informação.
• Design - Layout
o As cores a utilizar e os efeitos gráficos devem ser escolhidos com cuidado.
o As imagens a incluir em cada página, bem como o seu formato, devem ser
escolhidas cuidadosamente.
o Utilizar títulos para que o utilizador saiba sempre onde está.
o Layout elaborado de forma clara e compreensiva.
o A apresentação da informação deve ser atrativa.
o As imagens, som ou vídeo devem estar de acordo com a informação
existente.
PAG.:13
UFCD –9963 - EDIÇÃO WEB
• Consistência do website
o Utilização de molduras/camadas/secções/frames e tabelas que dividem a
página em áreas para colocação de informação específica.
o Localização de títulos em locais estratégicos.
o Disposição e organização dos menus, dos cabeçalhos e rodapés.
o Ligações e barras de ferramentas sempre nos mesmos locais.
o Código de cores idêntico em todas as páginas.
o Formatação semelhante de caracteres.
o Modelos idênticos de botões.

PAG.:14
UFCD –9963 - EDIÇÃO WEB

• Outros aspetos relevantes:

o Os cabeçalhos e rodapés, locais onde a informação se repete ao
longo das páginas do Website;
o Os títulos e subtítulos devem identificar claramente o conteúdo das
páginas;
o A legibilidade do texto, isto é, a formatação dos caracteres e dos
parágrafos;
o As cores a utilizar devem privilegiar o que é mais relevante e
importante na página.
o Os objetos multimédia (imagens, gráficos, animações, sons, vídeos)
são objetos muito
o utilizados para tornar as páginas e Web sites mais atraentes e com
melhor aspeto gráfico.

PAG.:15
UFCD –9963 - EDIÇÃO WEB
INTRODUÇÃO AO HTML

VISÃO GERAL DO HTML

De acordo com o W3C a Web é baseada em 3 pilares:
• Um esquema de nomes para localização de fontes de informação na Web, esse esquema
chama-se URI.
• Um Protocolo de acesso para aceder estas fontes, hoje o HTTP.
• Uma linguagem de Hypertexto, para a fácil navegação entre as fontes de informação:
o HTML.

Vamos nos focar no terceiro pilar, o HTML.

HTML é uma abreviação de Hypertext Markup Language - Linguagem de Marcação de
Hypertexto.
Resumindo em uma frase: o HTML é uma linguagem para publicação de conteúdo (texto,
imagem,vídeo, áudio e etc) na Web.
O HTML é baseado no conceito de Hipertexto.
Hipertexto são conjuntos de elementos (tags), ligados por conexões.
Estes elementos podem ser palavras, imagens, vídeos, áudio, documentos etc.

Estes elementos conectados formam uma grande rede de informação. Eles não estão
conectados linearmente como se fossem textos de um livro, onde um assunto é ligado
ao outro seguidamente. A conexão feita em um hipertexto é algo imprevisto que permite
a comunicação de dados, organizando conhecimentos e guardando informações
relacionadas.

Para distribuir informação de uma maneira global, é necessário haver uma linguagem
que seja entendida universalmente por diversos meios de acesso. O HTML propõe-se a
ser esta linguagem.

Desenvolvido originalmente por Tim Berners-Lee o HTML ganhou popularidade quando o

PAG.:16
UFCD –9963 - EDIÇÃO WEB
Mosaic - browser desenvolvido por Marc Andreessen na década de 1990, ganhou
popularidade. A partir daí, os desenvolvedores e fabricantes de browsers utilizaram o
HTML como base, passaram a usar as mesmas convenções.

ESTRUTURA BÁSICA, DOCTYPE E CHARSETS

1 <!DOCTYPE HTML>
2 <html lang=”pt-br”>
3 <head>
4 <meta charset=”UTF-8”>
5 <link rel=”stylesheet” type=”text/css” href=”estilo.css”>
6 <title></title>
7 </head>
8 <body>
9
10 </body>
11 </html>

Declaração de tipo de documento

Um dos elementos mais óbvios, e dos primeiros que temos que assimilar, é que Internet
Explorer 9 não entende um documento HTML a não ser que se especifique a declaração
de tipo de documento. À diferença da especificação anterior onde dispúnhamos de três
declarações de tipo de documento, agora só há que especificar uma: <!DOCTYPE HTML>

O Doctype
O Doctype deve ser a primeira linha de código do documento antes da tag HTML.
<!DOCTYPE html!>
O Doctype indica para o navegador e para outros meios qual a especificação de código
utilizar. Em versões anteriores, era necessário referenciar o DTD diretamente no código
do Doctype. Com o HTML5, a referência por qual DTD utilizar é responsabilidade do
Browser.
O Doctype não é uma tag do HTML, mas uma instrução para que o browser tenha
informações sobre qual versão de código a marcação foi escrita.

PAG.:17
UFCD –9963 - EDIÇÃO WEB

O ELEMENTO/TAGS HTML
O código HTML é uma série de elementos em árvore onde alguns elementos são filhos de
outros e assim por diante.
O elemento principal dessa grande árvore é sempre a tag HTML.
<html lang=”pt-pt”>
O atributo LANG é necessário para que os user-agents saibam qual a linguagem principal
do documento.
Lembre-se que o atributo LANG não é restrito ao elemento HTML, pode ser utilizado em
qualquer outro elemento para indicar o idioma do texto representado.
Para encontrar a listagem de códigos das linguagens, podem ser consultados em:
http://www.w3.org/International/questions/qa-choosing-language-tags

HEAD
A Tag HEAD é onde fica toda a parte inteligente da página. No HEAD ficam os metadados.
Metadados são informações sobre a página e o conteúdo ali publicado.

METATAG CHARSET
No exemplo abaixo há uma metatag responsável por defenir qual tabela de caractéres
que a página irá a usar.
<meta charset=”utf-8”>
Ou
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”>

TAG LINK
Há dois tipos de links no HTML: a tag A, que são links que levam o utilizador para outros
documentos e a tag LINK, que são links para fontes externas que serão usadas no
documento.
No exemplo seguinte há uma tag LINK que importa o CSS para a página:

PAG.:18
UFCD –9963 - EDIÇÃO WEB
<link rel=”stylesheet” type=”text/css” href=”estilo.css”>
O atributo rel=”stylesheet” indica que aquele link é relativo a importação de um arquivo
referente a folhas de estilo.

Há outros valores para o atributo REL, como por exemplo o ALTERNATE:

<link rel=”alternate” type=”application/atom+xml” title=”feed” href=”/feed/”>

O ALTERNATE serve para indicar aos user-agents que o conteúdo do site poder ser
encontrado ou acedido um caminho alternativo via Atom FEED.

No HTML há outros links relativos que podem ser insridos como o rel=”archives” que
indica uma referência a uma coleção de material histórico da página. Por exemplo, a
página de histórico de um blog pode ser referenciada nesta tag.

TAGS DE MODELOS DE CONTEÚDO

Existem pequenas regras básicas que estão no HTML desde o início. Estas regras definem
onde os elementos podem ou não estar. Se eles podem ser filhos ou pais de outros
elementos e quais os seus comportamentos.

Dentre todas as categorias de modelos de conteúdo, existem dois tipos de elementos:

• Elementos de linha.
• Elementos de bloco.

Os elementos de linha marcam, na maioria das vezes, texto. Alguns exemplos:

a, strong,em, img, input, abbr, span.

PAG.:19
UFCD –9963 - EDIÇÃO WEB
Os elementos de blocos funcionam como caixas, que dividem o conteúdo nas seções do
layout.
Seguem-se algumas premissas que é preciso relembrar e conhecer:

• Os elementos de linha podem conter outros elementos de linha, dependendo da

categoria que ele se encontra. Por exemplo: o elemento a não pode conter o elemento
label.
• Os elementos de linha nunca podem conter elementos de bloco.
• Elementos de bloco sempre podem conter elementos de linha.
• Elementos de bloco podem conter elementos de bloco, dependendo da categoria que
se encontram. Por exemplo, um parágrafo não pode conter um DIV. Mas o contrário é
possível.

Estes dois grandes grupos podem ser divididos em categorias. Estas categorias dizem
qual modelo de conteúdo o elemento trabalha e qual poe ser o seu comportamento.

CATEGORIAS/ELEMENTOS/TAGS
Cada elemento no HTML pode ou não fazer parte de um grupo de elementos com
características similares.
As categorias estão a seguir. Manteremos os nomes das categorias em inglês para que
seja de melhor entendimento:
• Metadata content
• Flow content
• Sectioning content
• Heading content
• Phrasing contente
• Embedded content
• Interactive contente

Abaixo segue como as categorias estão relacionadas de acordo com o WHATWG:

PAG.:20
UFCD –9963 - EDIÇÃO WEB

• Metadata content
Os elementos que compõe a categoria Metadata são:
o base
o command
o link
o meta
o noscript
o script
o style
o title

Este conteúdo vem antes da apresentação, formando uma relação com o documento e
seu conteúdo com outros documentos que distribuem informação por outros meios.

• Flow content
A maioria dos elementos utilizados no body e aplicações são categorizados como Flow
Content. São os seguintes:
o a
o abbr
o address
o area (se for um decendente de um elemento de mapa)
o article
o asideMarkup HTML 5 - Curso W3C Escritório Brasil 21
o audio
o b
o bdo
o blockquote
o br
o button

PAG.:21
UFCD –9963 - EDIÇÃO WEB
o canvas
o cite
o code
o command
o datalist
o del
o details
o dfn
o div
o dl
o em
o embed
o feldset
o fgure
o footer
o form
o h1
o h2
o h3
o h4
o h5
o h6
o header
o hgroup
o hr
o i
o iframe
o img
o input
o ins

PAG.:22
UFCD –9963 - EDIÇÃO WEB
o kbd
o keygen
o label
o link (Se o atributo itemprop for utilizado)
o map
o mark
o math
o menu
o meta (Se o atributo itemprop for utilizado)
o meter
o nav
o noscript
o object
o ol
o output
o •p
o • pre
o • progress
o •q
o • ruby
o • samp
o • script
o • section
o • select
o • small
o • span
o • strong
o • style (Se o atributo scoped for utilizado)
o • sub
o • sup

PAG.:23
UFCD –9963 - EDIÇÃO WEB
o • svg
o • table
o • textarea
o • time
o • ul
o • var
o • video
o • wbr
o • Text

• Sectioning content

Estes elementos definem um grupo de cabeçalhos e rodapés.

o article
o aside
o nav
o section
Basicamente são elementos que juntam grupos de textos no documento.

• Heading contente
Os elementos da categoria Heading definem uma seção de cabeçalhos, que podem estar
contidos em um elemento na categoria Sectioning.
o h1
o h2
o h3
o h4
o h5
o h6
o hgroup

PAG.:24
UFCD –9963 - EDIÇÃO WEB
• Phrasing content
Fazem parte desta categoria elementos que marcam o texto do documento, bem como
os elementos que marcam este texto dentro do elemento de parágrafo.
o a
o abbr
o area (se ele for descendente de um elemento de mapa)
o audio
o b
o bdo
o br
o button
o canvas
o cite
o code
o command
o datalist
o del (se ele contiver um elemento da categoria de Phrasing)
o dfn
o em
o embed
o i
o iframe
o img
o input
o ins (se ele contiver um elemento da categoria de Phrasing)
o kbd
o keygen
o label
o link (se o atributo itemprop for utilizado)
o map (se apenas ele contiver um elemento da categoria de Phrasing)

PAG.:25
UFCD –9963 - EDIÇÃO WEB
o mark
o math• meta (se o atributo itemprop for utilizado)
o meter
o noscript
o object
o output
o progress
o q
o ruby
o samp
o script
o select
o small
o span
o strong
o sub
o sup
o svg
o textarea
o time
o var
o video
o wbr
o Text

• Embedded content
Na categoria Embedded, há elementos que importam outra fonte de informação para o
documento.
o audio
o canvas

PAG.:26
UFCD –9963 - EDIÇÃO WEB
o embed
o iframe
o img
o math
o object
o svg
o vídeo

Interactive content
Interactive Content são elementos que fazem parte da interação com o utilizador.
o a
o audio (se o atributo control for utilizado)
o button
o details
o embedMarkup
o iframe
o img (se o atributo usemap for utilizado)
o input (se o atributo type não tiver o valor hidden)
o keygen
o label
o menu (se o atributo type tiver o valor toolbar)
o object (se o atributo usemap for utilizado)
o select
o textarea
o video (se o atributo control for utilizado)

Alguns elementos no HTML podem ser ativados por um comportamento ou Acão. Isso
significa que o utilizador pode ativá-lo de alguma maniera.

PAG.:27
UFCD –9963 - EDIÇÃO WEB
O início da sequencia de eventos depende do mecanismo de ativação e normalmente
culminam em um evento de click seguido pelo evento DOMActivate.

O user-agent permite que o utilizador ative manualmente o elemento que tem este
comportamento utilizando um teclado, mouse, comando de voz etc.

HEADINGS OU TÍTULOS

Em HTML, podemos criar títulos para o nosso documento usando hierarquias, ou seja,
criando níveis como título, subtítulo e assim por diante.

A tag que faz isso é o h (que é a letra inicial do inglês heading). Usamos a tag h com um
número logo após, no qual determina a sua importância para o documento. Esse número
vai de 1 a 6, sendo 1 o relativamente o mais importante e 6 o menos.

Os browsers tratam visualmente os títulos (headings) modificando seu tamanho. Veja o

código abaixo e sua visualização.

Exemplo das hierarquias de títulos de 1 a 6

• elementos p, blockquote e hr

PAG.:28
UFCD –9963 - EDIÇÃO WEB
Estes elementos marcam e separam blocos de texto, organizando-os em forma de
parágrafos. No HTML, junto com o elemento p, o elemento hr assume também o
mesmo nível semântico de um parágrafo, com a função de separar conteúdos através
de uma linha, um separador.

<p>Segundo John Willians, autor da trilha sonora de <cite>Guerra nas

estrelas</cite>:</p>
<blockquote>O trompete é um instrumento dos mais versáteis, devido à sua grande
extensão, controle de dinâmica e dramaticidade.</blockquote>
<hr />
<p> ...Aqui é outro parágrafo...</p>

LISTAS

LISTAS NÃO ORDENADAS

<h3>Alguns instrumentos de metal</h3>

<ul> <!—inicio da Lista →
<li>Trompete</li>
<li>Trompa</li>
<li>Trombone</li>
</ul> <!—Fim da lista -->

LISTAS ORDENADAS
Identificada pelo elemento ol, permite a exibição dos seus itens de maneira
sequencial.

<h3>Alguns instrumentos de metal</h3>

PAG.:29
UFCD –9963 - EDIÇÃO WEB
<h4>Do mais grave ao mais agudo</h4>
<ol>
<li>Tuba</li>
<li>Trombone</li>
<li>Trompa</li>
<li>Trompete</li>
</ol>

LISTA ORDENADA REVERSA

Pelo atributo reverse é possível inverter a ordem da numeração de uma lista
ordenada.

<h3>Alguns instrumentos de metal</h3>

<h4>Do menor ao maior :</h4>
<ol reversed>
<li>Tuba</li>
<li>Trombone</li>
<li>Trompa</li>
<li>Trompete</li>
</ol>

LISTA ORDENADA COM INICIAL

No HTML é possível atribuir um número para o item inicial através do atributo start.

<h3>Os mais importantes trompetistas do século XX</h3>

<h4>Do 15º ao 19º</h4>
<ol start="15">
<li>Fulano de Tal</li>
<li>Fulano de Tal</li>
<li>Fulano de Tal</li>

PAG.:30
UFCD –9963 - EDIÇÃO WEB
<li>Fulano de Tal</li>
<li>Fulano de Tal</li>
</ol>

LISTA ORDENADA IMPOSTA

No HTML 5 é possível impor um valor de numeração a um item de uma lista ordenada
através do atributo value.

<h3>Na sua opinião, quem é o maior trompetista de todos os tempos?</h3>

<h4>Resutado da votação dos internautas</h4>
<ol>
<li>Louis Armstrong - 327 votos</li>
<li>Wynton Marsalis - 311 votos</li>
<li>Alan Vizzutti - 262 votos </li>
<li>Dizzy Gillespie - 198 votos</li>
<li value ="4">Miles Davis - 198 votos</li>
<li>Arturo Sandoval - 109 votos</li>
</ol>

LISTA DE DESCRIÇÃO

Antes chamado de lista de definição, o elemento dl e seus elementos relativos ( dt e

dd). Quando for necessário fazer uma definição exata de um termo no conteúdo, o
elemento semântico recomendado é o dfn.

<h2>Instrumentos de metal</h2>
<h3>Saiba um pouco sobre cada um deles :</h3>
<dl>
<dt>Trombone</dt>
<dd>Instrumento com muito volume de som, surgiu na idade média</dd>

PAG.:31
UFCD –9963 - EDIÇÃO WEB
</dl>
<dl>
<dt>Trompete</dt>
<dd>O mais agudo instrumento da família do metais</dd>
</dl>
<dl>
<dt>Tuba</dt>
<dd>O mais grave instrumento da família do metais</dd>
</dl>

FORMULARIOS

PAG.:32
UFCD –9963 - EDIÇÃO WEB
A TAG <FORM>

TAG <INPUT>

PAG.:33
UFCD –9963 - EDIÇÃO WEB

PAG.:34
UFCD –9963 - EDIÇÃO WEB

PAG.:35
UFCD –9963 - EDIÇÃO WEB

PAG.:36
UFCD –9963 - EDIÇÃO WEB

PAG.:37
UFCD –9963 - EDIÇÃO WEB

PAG.:38
UFCD –9963 - EDIÇÃO WEB

PAG.:39
UFCD –9963 - EDIÇÃO WEB

PAG.:40
UFCD –9963 - EDIÇÃO WEB

PAG.:41
UFCD –9963 - EDIÇÃO WEB

PAG.:42
UFCD –9963 - EDIÇÃO WEB

PAG.:43
UFCD –9963 - EDIÇÃO WEB

PAG.:44
UFCD –9963 - EDIÇÃO WEB

PAG.:45
UFCD –9963 - EDIÇÃO WEB

FRAMES EM HTML

TAGS DE LAYOUT/SECÇÕES EM HTML

PAG.:46
UFCD –9963 - EDIÇÃO WEB

PAG.:47
UFCD –9963 - EDIÇÃO WEB

PAG.:48
UFCD –9963 - EDIÇÃO WEB

SERVIDORES

PAG.:49
UFCD –9963 - EDIÇÃO WEB

PAG.:50
UFCD –9963 - EDIÇÃO WEB

PAG.:51