Instituto Superior Politécnico Tocoista

Engenharia Informática

Programação em Hipermédia
 Introdução á web
Web é uma palavra inglesa que significa teia ou rede também pode ser sinônimo de WWW ou World
Wide Web:
– Em português literal: Teia Mundial.
–Nada mais é do que um sistema de documentos em hipermédia que são interligados e
executados na internet.

Browser é um software ou aplicativo:

Browser é um programa que nos permite navegar pela internet, encontrar páginas e exibir imagens,
textos, vídeos e demais informações no desktop, celular.
1. Exibe conteúdo disponível na Web;
1. Recebe um arquivo HTML;
1.2. Exibe o conteúdo informado pelo HTML;
2. Recebe solicitações do usuário e busca respostas nos servidores Web;
 Introdução web
✓ Websites
Um Website, ou apenas Site, é um conjunto de Páginas Web:
– Em português: Sítio;
– É um determinado lugar demarcado;
• Existem diversos principais grupos de Websites:
– institucionais, informativos, pessoais, comunitários, etc
Cada website possui um objectivo, de acordo com o público ao qual é direccionado.
Páginas de um website podem ser colocados textos, imagens, vídeos ou animações digitais.
Estas páginas são carregadas através do protocolo de rede HTTP (Hypertext Transfer
Protocol) e são visualizadas através de um navegador (browser).
 Introdução web
✓ Páginas Web
O que são páginas web ?
– Arquivos de Texto:
• Padrão HTML;
• São armazenadas nos servidores Web;
• São exibidas na tela, para o usuário, pelo Browser;

A Web funciona em três camadas, o Front-end ou Client-side, o Back-end ou Server-

side e a camada de ligação, o Webserver .

No começo a Web era constituída de HTML puro. Sim, era muito feia. A primeira
disputa para ver quem tinha os melhores sites não foi feita pelos desenvolvedores mas
sim pelos navegadores.
 Introdução web
Quem conseguisse renderalizar melhor os sites ganharia uma disputa, e o vencedor
foi o Internet Explorer. Que se consagrou dominante no mercado de navegadores por
mais de uma década até o surgimento de bons concorrentes.

Servidores Web trabalham o tempo todo

aguardando e atendendo solicitações:

– Páginas Web;
– Imagens;
– Sons;
– Vídeos;
– Outros documentos.
 Introdução web
URL
A URL é o endereço eletrônico que permite que o seu site ou blog seja
encontrado na rede.

✓ Uniform Resource Locator:

– Localizador-Padrão de Recursos;
– Popular: endereço;
– Composto pela identificação do protocolo:
• Ex: http, ftp, mms, etc...
– Seguido de uma identificação de local;
• protocolo://maquina/caminho/recurso – Exemplo:
• http://www.ifsc.edu.br/ensino/calendario
Introdução ao HTML5
Definição de HTML
HyperText Markup Language — Linguagem de Marcação de Hipertexto —,
o HTML é o componente base da web. Isso quer dizer que ele permite a
construção de websites e a inserção de novos conteúdos, como imagens e
vídeos, por meio dos hipertextos.
HTML não é realmente uma linguagem de programação é uma linguagem de marcação ou
uma UI web (User Interface web), utilizada para dizer ao navegador como exibir as páginas
que são visitadas. Ela consiste de uma série de elementos (marcas), que juntamos ao redor de
diferentes partes do conteúdo para que apareça ou comporte-se de uma determinada forma.
Por exemplo, veja a seguinte linha de conteúdo:

Se nós queremos oficialmente dizer que isso é um parágrafo, nós podemos envolver o
elemento em uma tag/marca (<p>):
 • Introdução ao HTML5, CSS3, JAVACRIPT.

<p> Introdução ao HTML5, CSS3, JAVACRIPT </p>

Introdução ao HTML5
O HTML actualmente
Está nova versão (html5), traz consigo importantes mudanças quanto ao papel do HTML
no mundo da Web, através de novas funcionalidades como semântica, estilo e interatividade.
Tudo o que é feito em HTML5 é semântica (tem significado), todas as formatações em
html5 utiliza uma outra tecnologia chamada CSS, que está na versão três (3) e a
interatividade com as páginas (pós execução no navegador) é utilizado uma outra
tecnologia denominada JavaScript (ECMAScript).
NOTA:
A tecnologia HTML de hoje, funciona melhor com a composição css e
javascript.
 Introdução ao HTML 5
❑Sintaxe de um elemento HTML
Introdução ao HTML5
Descrição básica da composição de um elemento HTML
✓A tag/marca de abertura (opening tag): Consiste no nome da marca (no caso, p),
envolvido em chaves (chevrons) de abertura e fechamento. Isto demonstra onde o
elemento começa, ou onde o seu efeito se inicia — neste caso, onde é o começo do
parágrafo.
✓A tag/marca de fechamento (closing tag): Isto é a mesma coisa que a marca de
abertura, exceto que inclui uma barra antes do nome do elemento. Isto demonstra
onde o elemento acaba — neste caso, onde fica o fim do parágrafo. Esquecer de incluir
uma marca de fechamento é um dos erros mais comuns de iniciantes, e pode levar a
resultados estranhos.
Introdução ao HTML5
O conteúdo (content): Este é o conteúdo da marca, que neste caso é só texto.
A marca (element): A marca de abertura, de fechamento, junto com o conteúdo
formam o elemento HTML

❑ Sintaxe de um atributo HTML

Introdução ao HTML5
Atributo contém informação extra sobre o elemento, que não queremos que apareça no
elemento de facto. Neste caso, o atributo classe (class) permite que dêmos ao elemento um
nome de identificação (editor-note), que depois pode ser utilizado para dar ao elemento
informações de estilo ou outras informações.

Um atributo deve ter sempre:

✓ Um espaço entre ele e o nome do elemento (ou o atributo anterior, se o elemento já tiver um );
✓ O nome do atributo, seguido por um sinal de igual;
✓ Aspas de abertura e fechamento, envolvendo todo o valor do atributo.
Introdução ao HTML5
❑Aninhando os elementos HTML
Podemos colocar elementos dentro de outros elementos também — isto é
chamado aninhar (nesting). Se quisermos declarar que o gato é MUITO
rabugento, podemos envolver a palavra "muito" em um <strong>, o que
significa que a palavra deve ser fortemente enfatizada:

<p>Meu gatinho é <strong>muito</strong> mal humorado.</p>

Contudo, precisamos ter certeza que os elementos estão devidamente

aninhados: no exemplo acima, nós abrimos o elemento <p> primeiro, depois o

<strong>, então temos que fechar o </strong> primeiro e depois o </p>.

<p>Meu gatinho é <strong>muito mal humorado.</p> </strong>

Introdução ao HTML5
OBS: Os elementos têm que abrir e fechar perfeitamente para que eles
estejam claramente dentro ou fora um do outro. Se eles se sobrepuserem como no
exemplo anterior, o browser vai tentar adivinhar o que estamos tentando dizer, o
que pode gerar resultados inesperados. Então não faça isso!

❑ Elementos vazios
Alguns elementos não têm conteúdo, e são chamados elementos vazios. Considere o
elemento <img> que é apresentado abaixo:

<img src=“Imagens_EA/tics.gif" alt="Minha imagem de teste">

Introdução ao HTML5
Apresenta dois atributos(src e alt), mas não há tag </img> de fechamento, e não há
conteúdo interno. Isto acontece porque uma imagem não envolve conteúdo para ter
efeito em si mesma. Sua proposta é incorporar uma imagem na página HTML, no
lugar que o código aparece.

❑Sintaxe básica de uma página HTML

Introdução ao HTML5
❑ Descrição básica da composição de uma página HTML
<!DOCTYPE html> : o doctype. Há muito tempo, quando o HTML era novo (por volta
de1991/2), doctypes eram criados para agir como links para um conjunto de regras
que a página HTML tinha que seguir para ser considerada bom HTML, o que poderia
significar checagem automática ou outras coisas úteis. No entanto, a sua utilização
servirá para indicar que o tipo de documento é do tipo HTML5.
<html></html> : o elemento <html>. Este elemento envolve todo o conteúdo da
página e às vezes é conhecido como o elemento raiz.
<head></head> : o elemento <head>. Este elemento age como um recipiente de
tudo o que desejamos incluir em uma página HTML, que não seja o conteúdo que
queremos mostrar para quem vê a nossa página. Isto inclui coisas como palavras
chave e uma descrição que queremos que apareça nos resultados de busca, CSS

para dar estilo ao conteúdo, declarações de conjuntos de caracteres, e mais.

Introdução ao HTML5
❑ Descrição básica da composição de uma página HTML
<body></body> — o elemento <body>. Contém todo o conteúdo queremos mostrar ao
público que visita a nossa página, seja texto, imagens, vídeos, jogos, faixas de áudio tocáveis
entre outros.
<meta charset="utf-8"> — este elemento junto com o charset, aponta qual conjunto de
caracteres o documento deve utilizar, que inclui praticamente todos os caracteres conhecidos por
algumas linguagens humanas. Basicamente, isto pode lidar com todo conteúdo em texto que
colocarmos. Não há razão para não escrever este código, e vai ajudar-nos a evitar problemas
depois.
<title></title> — indica o título da página, que é o título que aparece no topo do browser
quando a página é carregada, e é utilizado para descrever a página quando colocarmos nos
favoritos.
<html lang=“PT-PT”> (lang) – o atributo lang no elemento raiz, indica ao web browser que a
página que está sendo carregada utiliza o idioma Português de Portugal
 Introdução ao HTML5
❑Ficheiro HTML no Sistema Operativo
Os ficheiros que são salvos ou guardados no sistema operativo, são composto
por um nome e um identificador do tipo de ficheiro, isto implica que, cada ficheiro
dentro do OS tenha um nome e um identificador do tipo de ficheiro (extensão) .
Por Exemplo:
Nomedoficheiro.extensão
Para ficheiros HTML, existem dois tipos de extensões válidos para salvar
ficheiro deste tipo: .html e .htm

Por Exemplo:
páginainicial.html
Note que: sempre que escrever marcações HTML ou editar, quer no bloco de
nota, sublime-text, notepad++, ou num outro editor de texto dedicado, certifica-te de
salvar o ficheiro com uma das extensões HTML.
 Introdução ao HTML5
❑ Navegadores da Web ou Web browsers
Toda marcação HTML que é salva ou um ficheiro html que é alterado, é visualizada
através do navegador da web, o navegador da web o é responsável pela interpretação e
execução do documento HTML. Sempre que trabalharmos com a linguagem HTML, os
efeitos visuais, serão possíveis se o documento for aberto num navegador da web.

Note que: estamos a trabalhar na versão cinco da Linguagem HTML, é importante que
instale o maior número de navegadores possíveis, de preferência as versões recentes
do google chrome, Firefox, opera, etc.
algumas versões de web browser não suportam as novas marcas da versão
cinco do HTML.
 Introdução ao HTML5
❑ Informação Extra

OBS.:
Existem outros elementos, para além dos que estudamos nesta aula e
podem ser encontrados nas fontes abaixo descriminadas!
 Elementos estruturais do HTML5

❑ Principais Elementos do HTML

Os princincipais elementos do HTML utilizados para a composiçõ de uma página Web,

que ficam entre a tag <body> que é a tag que possui toda informação visivel da página,
serão apresentados a seguir:

Elementos de Cabeçalhos e Parágrafos:

<p> : Parágrafos;
<h1> a <h6> : Cabeçalhos;
<hr> : Réguas.
 Elementos estruturais do HTML5
❑ Elementos de Formatação

<i> : Itálico;
<u> : Sublinhado;
<b> => <Strong> => <em> :Negrito, Importante, Enfatizado;
<s> : Rabiscado/Rasurado;
<font-color> : Atribui cor a um texto;
<small> : Diminui o tamanho do texto;
<big> : Aumenta o tamanho do texto;
<mark> : Realçado/Marcado;
<marquee> : Movimentar um texto da direita para esquerda;
<sub> : Formata um número para Índice;
<sup> : Formata um número para Expoente.
 Elementos estruturais do HTML5
Elementos de Âncora e Imagem

Elementos de Imagem:
<img> : Inserição de imagem;
src : Atributo que define o endereço/caminho do ficheiro da imagem a ser exibida;

alt : Atributo que define um texto alternativo para a imagem;

width|height : Atributo que define a largura/altura da imagem em píxeis(px).
 Elementos estruturais do HTML5
Elementos de Listas
<ol> : Cria listas ordenadas;
<ul> : Cria listas não ordenadas;
<li> : Cria os ítens das listas ;
<dl> : Cria lista de descrição;
<dt> : define o nome/termo;
<dd> : descreve cada nome/termo;
type: define o tipo de listagem para lista ordenadas e não ordenadas;
start: define o ínicio de uma lista ordenada que possui um dos tipos:A,I ou 1.
Elementos estruturais do HTML5
❑Elementos de Tabelas
<table> : Cria tabela;
<tr> : Cria linhas da tabela;
<td> : Cria célula da tabela;
<th> : Cria cabeçalho da tabela;
border : atributo que define a borda da tabela;
Colspan: atributo que define o número de colunas que deve abrangir;
rowspan : atributo que define o número de células que deve abrangir

Exemplo1:
<h2><font color="#1e90ff">Meus Dados Escolares:</font></h2>
<p><s>Lista de Províncias:</s></p>
 Elementos Semânticos
O consórcio W3C anunciou a publicação do HTML5, que foi importante para a
evolução do padrão que não era actualizado por muito tempo. Até a versão 4 do
HTML, os programadores estruturavam o conteúdo de uma página HTML utilizando
os

elementos <div>, com o atributo id que servia para identificar o tipo de conteúdo
do elemento. Este elemento (<div>) não fornecia qualquer significado e dificultava a
extração de informação de uma forma inteligente.

Na versão 5 o HTML foi enriquecido, não apenas para estruturar documentos para a WEB,
mas também para descrever o significado do conteúdo desses documentos, por intermédio de
tags semânticas.
O HTML semântico tem como objectivo descrever o significado do conteúdo presente em
documentos HTML, tornando-o mais claro tanto para o programador, como para os browsers e
outros softwares que processam automaticamente esta informação.
 Elementos Semânticos
❑Principais Elementos Semânticos
Os principais elementos semânticos que foram inseridos no HTML5 são:
<header></header>;
<nav></nav>;
<section></section>;
<article></article>; <aside></aside> e <footer></footer>;
Exemplo:
 Elementos Semânticos
❑Estruturas da página actualmente

NOTA:
Algumas marcas, novas ou revisadas não têm
uma alteração visual no corpo da página do
documento HTML, mas, têm uma grande
importância na semântica, o significado para o
seu HTML é muito importante.
 Elementos Semânticos
❑ Descrição dos elementos semânticos

<article>: define um artigo, um conteúdo independente e autocontido (por exemplo,um artigo de

um blog, revista ou jornal). Recomenda-se que cada <article> deve ser identificado com um título;
<aside>: define um conteúdo de auxílio ao conteúdo principal. Normalmente fica na lateral do
conteúdo principal da página e serve para incorporar conteúdos externos;
<footer>: representa um rodapé de um documento, como a área do final de uma página WEB. É
utilizaddo normalmente para descrever informações de autoria, como nome, contacto do autor e
data de criação do conteúdo.
 ❑Exemplo Prático
<!DOCTYPE html>
<html lang=“Pt-Pt”>
<head>
<meta charset=“utf-8”>
<title>Página dos Cursos do ITEL</title>
</head>
<body>
<header>
<h1>Cursos do ITEL</h1>
</header>
<section>
<h2>Informática</h2>
<article>
<h3>Técnico Médio de Informática</h3>
<p>Este curso possui disciplinas teóricas e práticas</p>
</article>
</section>
 Fundamentos
CSS é a abreviação para o termo em inglês Cascading Style Sheet ,traduzido para o
português como folhas de estilo em cascata.

❑Estrutura Básica
Primeiramente, é preciso ter em mente que qualquer modelo CSS só será visto e aproveitado
quando usado em um código HTML ou semelhantes. O CSS possui sua própria sintaxe, com algumas
de suas propriedades parecidas `as do HTML. Na sua forma mais simples, ´e composto por 3 partes:

Regra CSS é a unidade básica de uma folha de estilo. Nessa definição, o termo unidade básica
significa a menor porção de código capaz de produzir efeito de estilização. Uma regra CSS é
composta de duas partes: o seletor e a declaração.A declaração compreende uma propriedade e
um valor.
 Sintaxe Básica
Regra Css

Seletor : { Propriedade: valor;}

Declaração

seletor - tag em HTML que terá tal valor aplicado àquela propriedade citada. Cada
seletor possui mais de uma propriedade que pode vir a ser modificada e pode ser
aplicado a uma classe. Ex: <p>, <body>, <h1>, <img>.
 Sintaxe Básica
Propriedade - atributo que será modificado ao receber tal valor. Ex: size, color, font,...

Valor - característica que a propriedade irá assumir.

Ex: 3, red, tahoma.
Quando os valores forem numéricos, há a opção de determiná-los em pixels, centímetros ou
percentagens.

Ex: estilo.css:
p.right {
text-align: right
}
p.left {
text-align: left
}
 Fontes
Muitas das funções apresentadas no capítulo são bem específicas e impossíveis de serem
aplicadas pelo HTML. Como no capítulo anterior, todas as propriedades são aplicadas a seletores
relacionados a textos, como <p> e <h1>.

font-family - Refere-se à família da fonte. O valor pode ter o nome específico da fonte
(Verdana, comic saens) ou de fontes genéricas (menospace, serif). Vale lembrar que a fonte
escolhida deverá estar instalada na máquina do usuário.

font-size - Pode-se escolher o tamanho da fonte usando valores num´ericos ou

nomenclaturas: x-small, xx-small, x-large, xx-large, small, medium, large, smaller e
larger.
 FONTES
font-style - Há 3 opções: normal, italic e oblique, que se referem a letras em sua fonte
normal na vertical, letras inclinadas e letras obliquas, respetivamente.

font-weight - Define a intensidade de negrito que a fonte vai receber. Pode assumir 3
opções: bold, bolder e lighter ou valores numéricos.

font-variant - Varia o tamanho das letras maiúsculas quando recebe o valor small-caps.

Ex:
estilo.css:
h1 {
color: #DDA0DD;
font-family: arial;
 FONTES
❑Borda

As bordas são muito úteis pois, dependendo da criatividade do programador, assumem

várias funções no desenvolvimento da página. Podem ser empregadas como elemento
decorativo, separação entre textos e muitos outros recursos.

border-width - Define a espessura da borda. Assume thin, medium e thick (fina, média
e grossa respectivamente) como valores.

border -color - Define a cor da borda. Assume "cor" ou "#AAAAAA" como valores.

border-style - Define o estilo da borda. Valores assumidos: dotted, dashed, solid,

double, groove, ridge, inset, outset.
 FONTES
Um recurso muito importante presente nas bordas é a possibilidade de setar tais funções
especificando o lado da borda a empregar a função, usando como valores top, bottom, left e right.

Ex.:
- border-TOP-width: medium
- - border-BOTTOM-color: red
- - border-LEFT-style: groove

Ex:
estilo.css:
h1 {
border-width: thick;
border-style: dotted;
border-color: gold;
}
 FONTES
❑Margin e Padding

As margens definem o espaçamento entre os elementos HTML, que possuem quatro

lados: right, left, top e bottom e também de elementos de parágrafo ou cabeçalhos (Ver
dica abaixo). Os valores assumidos pelas margens são em pixels.

✓ margin-top - Define a margem superior.

✓ margin-right – Define a margem direita.
✓ margin-bottom - Define a margem inferior.
✓ margin-left - Define a margem esquerda.
✓ margin - Define os valores das quatro margens na
seguinte ordem: top, right, bottom, left.
 FONTES
Ex.: estilo.css:
body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}
p{
margin: 5px 50px 5px 50px;
}

❑LISTA
Esta propriedade cria uma lista de elementos definidos pelo programador, usando
como marcadores imagens ou números.
 FONTES
✓ list-style-image - Define uma imagem como marcador da lista.
Valor: url(”caminho/para/o/arquivo”)
✓ list-style-position - Posiciona o marcador da lista. Valores: outside e inside.
✓ list-style-type - Define o tipo de marcador da lista. Valores: disc, circle, square, decimal,
lower-roman, upper-roman, lower-alpha, upper-alpha.
✓ list-style - Define todas as propriedades acima em uma ´unica linha na seguinte ordem:
image, position e type.

Ex.: estilo.css:
ul.inside {
list-style-position: inside;
}
ul.outside {
list-style-position: outside;
}
 FONTES
❑ Tabela

As propriedades de tabelas são as seguintes:

✓ table-layout - Nos permite indicar se queremos que a tabela tenha o seu fluxo com o

tamanho fixo ou o seu tamanho acompanhe o fluxo do conteúdo. Valores: automática

ou fixed. (Acompanhar no exemplo ao final deste ´ıtem.)
✓ border-collapse - A propriedade border-collapse define se as bordas em uma tabela
vão se fundir ou vão ser separadas. Valores: collapse e separate.
✓ border-spacing - Define um espaçamento (horizontal e vertical) entre os elementos
da tabela. Valores em px.
 SELECTORES
❑ Selectores por tipo de Elementos

Element selectors: <p> <h1> <em> <span>, etc. referenciam as tags HTML que
formatam. Por exemplo: o element selector corresponde à tag <h1>

h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 2em;
color: #333333;
}
 SELECTORES
❑ Selectores por Identificador

ID selectors: definem-se com o sinal cardinal (#) e deve ser usado

uma única vez em cada documento HTML. Pode haver, no entanto, haver
mais do que um selector com o mesmo ID. Quando queremos usar vários
selectores com o mesmo nome devemos usar classes em vez de ID

Sintaxe

#valor_id { propriedade de estilo }

Note que isso é equivalente aos seguintes selectores de atributo.

[valor _ id] { propriedade de estilo }

 SELECTORES
❑ Selectores por Classe
Class selectores: Com os selectores de classe podemos definir diferentes
estilos para o mesmo tipo de elemento num documento HTML.
Os atributos de classe podem ser usados localmente (inline) no documento
HTML.
Os selectores de classe devem começar com um ponto e podem ter o nome que
quisermos. Podemos usar várias vezes a mesma classe no mesmo documento.

Sintaxe
.classe_nome{ propriedade de atributos }

Exemplo:

.vermelho{
color: #f33;
}
 Criação de Layouts
O primeiro passo para construir um layout css é definir como será o design da página. O
design de uma página pode ser feito em ferramentas(Fireworks, CorelDrawn, Photoshop)
apropriadas pra criação de design de páginas WEB ou mesmo em uma folha de papel.

<header> - Define um cabeçalho para um documento ou seção

<nav> - Define um conjunto de links de navegação
<section> - Define uma seção em um documento
<article> - Define um conteúdo independente e autocontido
<aside> - Define o conteúdo além do conteúdo (como uma barra lateral)
<footer> - Define um rodapé para um documento ou seção
<details> - Define detalhes adicionais que o usuário pode abrir e fechar
sob demanda
<summary>- Define um título para o <details>elemento