Universidade Politécnica
A POLITÉCNICA
Engenharia Informática e de Telecomunicações
7º Semestre
Programação Web
M.Sitoe_24A
Tema 1_Aula 3
Fundamentos de HTML
FUNDAMENTOS DO HTML
❑Conceitos Básicos
❑Tags
❑ Listas
❑ Tabela
❑ Imagens
❑ Navegação
18/02/2024 M. S
FUNDAMENTOS DO HTML
WEB SITE
&
WEB APPLICATION
18/02/2024 M. S
ISP –EIT2 7ºS/24 PW
Web site
➢ Colecção de páginas HTML estáticas, que não interagem com um
banco de dados através de uma linguagem de servidor Web.
➢ Todo o conteúdo da página está escrito directamente no
documento HTML (incluindo Mídias).
18/02/2024 M. S
ISP –EIT2 7ºS/24 PW
Web application
➢ O conteúdo destas páginas é montado dinamicamente e carregado através de
solicitações (Request) à BD, que armazena os textos e indicação dos caminhos
das imagens ou mídias que a página precisa exibir.
➢O HTML não tem acesso directo à BD. Esta comunicação deve ser feita por uma
linguagem de programação de servidor Web.
18/02/2024 M. S
ISP –EIT2 7ºS/24 PW
Web site vs web application
18/02/2024 M. S
ISP –EIT2 7ºS/24 PW
Editores
Editores de Texto: Notepad++, TexyMAte, Vim, …
IDE’s: VScode; Eclipse, Atom, JetBrains WebStorm, VisualStudio, …
18/02/2024 M. S
ISP –EIT2 7ºS/24 PW
HTML - HyperText Markup Language
➢ É um conjunto estruturado de instruções (etiquetas ou tags), que dizem a um
browser como publicar uma página web.
➢ O browser interpreta essas etiquetas e desenha a página no ecrã. Estes
conjuntos de instruções estão agrupados em ficheiros de tipo texto (.html).
➢ A linguagem HTML foi criada por Tim Barners Lee na década de 1990. As
especificações da linguagem são controladas pela W3C (World Wide Web
Consortium).
18/02/2024 M. S
ISP –EIT2 7ºS/24 PW
HTML – Conceitos Fundamentais
Elemento
➢ É um Container em que é colocada uma secção de uma pagina web. É definido por uma tag
inicial, algum conteúdo e uma tag final. Tudo que estiver dentro do container fica com as
característas desse mesmo elemento.
➢<!-- Este é um comentário -->
➢ < tagname > O conteúdo vai aqui... < /tagname >
< h1> Meu primeiro cabeçalho < /h1>
< p > Meu primeiro parágrafo. < /p >
18/02/2024 M. S
ISP –EIT2 7ºS/24 PW
TPC
Investigar mais sobre elementos HTML (Elaborar uma tabela de consulta)
18/02/2024 M. S
ISP –EIT2 7ºS/24 PW
HTML – Conceitos Fundamentais
Atributo
➢ É utilizado para definir as características de um elemento e é colocado no
interior da tag de abertura do elemento.
➢ Os atributos são sempre especificados na tag de início. Geralmente vêm em
pares de nome/valor como: name="value"
❑<tag_nome style =“color: red; font-family: 'Gill Sans', 'Gill Sans MT', Calibri,
'Trebuchet MS', sans-serif”>…….</tag_nome>
❑< a href = https://www.w3schools.com> Clica aqui </a>
18/02/2024 M. S
ISP –EIT2 7ºS/24 PW
TPC
Investigar mais sobre Atributos HTML
18/02/2024 M. S
ISP –EIT2 7ºS/24 PW
HTML – Conceitos Fundamentais
Aninhamento (Nestiing)
➢ Em um página web existem quase sempre múltiplos elementos que nunca se
devem sobrepor.
➢ Os elementos devidamente aninhados são sempre independentes uns dos
outros.
18/02/2024 M. S
ISP –EIT2 7ºS/24 PW
HTML – Conceitos Fundamentais
Aninhamento (Nestiing)
<a>
<b>
<c>
</c>
</b>
</a>
18/02/2024 M. S
ISP –EIT2 7ºS/24 PW
HTML – Estrutura Básica
<html> -> Definem o início e o fim do programa
<head> É o cabeçalho do programa e, normalmente, não aparece na janela web.
<title>
Minha pagina
</title> - Escreve o título da página na barra de título na janela do browser.
</head>
<body> -> Contém o conteúdo principal da página web.
Bem Vindo a PW
</body>
</html>
18/02/2024 M. S
ISP –EIT2 7ºS/24 PW
Resultado
18/02/2024 M. S
ISP –EIT2 7ºS/24 PW
HTML – Estrutura completa
<!DOCTYPE html> é uma instrução para o navegador para detectar a versão do HTML usda
<html lang="pt-br"> indica o idioma principal utilizado no conteúdo da página HTML.
<head>
<title>
</title>
<meta charset="utf-8"> especifica a codificação de caracteres para o documento HTML.
</head>
<body>
</body>
</html>
18/02/2024 M. S
HTML TAGS
18/02/2024 M. S
ISP –EIT2 7ºS/24 PW
HTML TAGS
Headings <hn | n={1…6}>
➢São os títulos ou subtítulos que se deseja exibir na página.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
18/02/2024 M. S
ISP –EIT2 7ºS/24 PW
HTML TAGS
Headings <hn>
<hn>Texto a aparecer no cabeçalho</hn>
Também pode se especificar o tamanho do cabeçalho através do atributo style, usando a
propriedade font-size.
<h1 style="font-size:60px;">Heading 1</h1>
18/02/2024 M. S
ISP –EIT2 7ºS/24 PW
HTML TAGS
Paragrafo <p>…</p>
➢ É utilizada para definir o início de um novo parágrafo, deixando uma linha em
branco entre este e o texto anterior.
<P ALIGN=“left | right | center | justify”> Texto</P>
<p> Parágrafo 1 </p>
<p> Parágrafo 2 p>
Quebra de linha: <br>
18/02/2024 M. S
ISP –EIT2 7ºS/24 PW
HTML TAGS
Paragrafo <p></p>
<p> <pre>
My Bonnie lies over the ocean. My Bonnie lies over the ocean.
My Bonnie lies over the sea. My Bonnie lies over the sea.
My Bonnie lies over the ocean. My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me. Oh, bring back my Bonnie to me.
</p> </pre>
Qual será o resultado ao executar pos dois blocos de código?
18/02/2024 M. S
ISP –EIT2 7ºS/24 PW
HTML TAGS
Paragrafo <p></p>
<p> Define um parágrafo
<hr> Define uma mudança temática no conteúdo
<br> Insere uma única quebra de linha.
<pre> Define um texto pré-formatado.
18/02/2024 M. S
ISP –EIT2 7ºS/24 PW
HTML TAGS
Aplique cada Marcação abaixo. Observe e anote os resultados
<B> texto </B>; <Big>texto</Big>
<I> texto </I>; <small>texto</small>
<U> texto </U>; <sup><texto</sup>
<STRONG> texto </STRONG> <blink>texto</blink>
<TT>Texto</TT>
18/02/2024 M. S
LISTAS
18/02/2024 M. S
ISP –EIT2 7ºS/24 PW
Listas
➢ As listas HTML permitem que os desenvolvedores agrupem um conjunto de
itens relacionados em listas.
Uma lista HTML ordenada: Uma lista HTML não ordenada:
1.primeiro item •Item
2.segundo item •Item
3.Terceiro item •Item
4.Quarto item •Item
18/02/2024 M. S
ISP –EIT2 7ºS/24 PW
UL: (Unordered lists)
➢ Uma lista não ordenada começa com a <ul> tag. Cada item da lista começa
com a <li> tag.
➢ Os itens da lista serão marcados com marcadores (pequenos círculos pretos)
por padrão:
<UL>
<li> Mateus </li>
<li> Joaquim</li>
<li> Alberto</li>
</Ul>
18/02/2024 M. S
ISP –EIT2 7ºS/24 PW
UL: (Unordered lists)
Atributos:
Type = Square – Define um quadrado preto como marcador.
Type = circle: Define um círculo como marcador.
Type = Disc: define um círculo preto como marcador.
18/02/2024 M. S
ISP –EIT2 7ºS/24 PW
OL: (Ordered lists)
➢ Uma lista não ordenada começa com a <Ol> tag. Cada item da lista começa
com a <li> tag.
➢ Os itens da lista serão marcados com marcadores (pequenos círculos pretos)
por padrão:
<OL>
<li> Mateus </li>
<li> Joaquim</li>
<li> Alberto</li>
</Ol>
18/02/2024 M. S
ISP –EIT2 7ºS/24 PW
OL: (Ordered lists)
Atributos:
Start = “nr”: permite escolher o primeiro numero da lista
Type = 1: Cria uma lista numérica normal
Type = A: Cria uma lista Alfabética com letras maiúscula, iniciando pelo A
Funcionam de forma análoga
Type = a:
Type = I
Type = i
18/02/2024 M. S
ISP –EIT2 7ºS/24 PW
OL: (Ordered lists)
Descrição da etiqueta
<ul> Define uma lista não ordenada
<ol> Define uma lista ordenada
<li> Define um item de lista
<dl> Define uma lista de descrição
<dt> Define um termo em uma lista de descrição
<dd> Descreve o termo em uma lista de descrição
18/02/2024 M. S
Imagens <IMG>
18/02/2024 M. S
ISP –EIT2 7ºS/24 PW
Imagens <IMG>
➢ De entre a multitude de formatos gráficos que se podem utilizar os três mais
comuns na web são o GIF, JPEG/JPG e PNG.
➢ A diferença fundamental entre estas três formas reside na forma de
compressão das imagens, i.e., como as imagens vêm comprimido o seu
tamanho de forma a acelerar a sua transmissão pela Internet e outros
factores a serem considerados.
<img src="pic_trulli.jpg" alt="Italian Trulli">
18/02/2024 M. S
ISP –EIT2 7ºS/24 PW
Imagens <IMG>
➢ As imagens não são tecnicamente inseridas em uma página da web, mas
sim vinculadas a páginas da web.
➢ A <img> tag cria um espaço de retenção para a imagem referenciada e
está vazia, contém apenas atributos e não possui uma tag de fechamento.
➢ Possui dois atributos obrigatórios:
src - Especifica o caminho para a imagem.
alt - Especifica um texto alternativo para a imagem.
18/02/2024 M. S
ISP –EIT2 7ºS/24 PW
Imagens <IMG>
Tamanho da Imagem - Largura e Altura
➢ Pode ser usado o atributo style para especificar as dimensões da imagem.
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
<img src="/images/html5.gif" alt="HTML5
Imagem em outra pasta Icon" style="width:128px;height:128px;">
18/02/2024 M. S
ISP –EIT2 7ºS/24 PW
Imagens <IMG>
Imagem em outro <img src="https://www.w3schools.com/images/w3sch
servidor/site ools_green.jpg" alt="W3Schools.com">
<img src="programming.gif" alt="Computer
Imagens animadas Man" style="width:48px;height:48px;">
<a href="default.asp">
Imagem como link
<img src="smiley.gif" alt="HTML
tutorial" style="width:42px;height:42px;">
</a>
18/02/2024 M. S
ISP –EIT2 7ºS/24 PW
Imagens <IMG>
Pode se usar a propriedade CSS float para deixar a imagem
Imagem flutuante flutuar à direita ou à esquerda de um texto:
<p><img src="smiley.gif" alt="Smiley
face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>
<p><img src="smiley.gif" alt="Smiley
face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>
18/02/2024 M. S
ISP –EIT2 7ºS/24 PW
Imagens <IMG>
Legenda
<figure>
<img src="C:\Users\M SITOE\Desktop\w_f2.png"
border="5" alt="Imagem de tempertura“ height="100"
width="50">
<figcaption> Previsao </figcaption>
</figure>
18/02/2024 M. S
ISP –EIT2 7ºS/24 PW
Imagens <picture>
Legenda
<picture>
<source srcset="imagem-grande.jpg" media="(min-width: 1024px)">
<source srcset="imagem-media.jpg" media="(min-width: 768px)">
<img src="imagem-pequena.jpg" alt="Descrição da imagem">
</picture>
18/02/2024 M. S
ISP –EIT2 7ºS/24 PW
Imagens <IMG>
Tag Descrição
<img> Defines an image
<map> Defines an image map
<area> Defines a clickable area inside an image map
<picture> Defines a container for multiple image resources
18/02/2024 M. S
ISP –EIT2 7ºS/24 PW
Links/Hyperlink - <a>
➢ Palavras ou imagens de um documento que o interligam com outros.
➢ Pode ser um texto, uma imagem ou qualquer outro elemento HTML!
➢ O atributo mais importante do <a> elemento é o href, que indica o destino
do link.
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>
18/02/2024 M. S
ISP –EIT2 7ºS/24 PW
Links/Hyperlink - <a>
principais parâmetros
href (hiperlink reference)= “nome ou url do arquivo” - especifica o endereço da
url ao qual o link está associado.
name=“nome” - especifica o nome da secção de um documento que é referida
por um link de hipertexto.
18/02/2024 M. S
ISP –EIT2 7ºS/24 PW
Links/Hyperlink - <a>
O atributo target especifica onde abrir o documento vinculado. pode ter um
dos seguintes valores:
•_self - Padrão. Abre o documento na mesma janela/guia em que foi clicado
•_blank- Abre o documento em uma nova janela ou guia
•_parent- Abre o documento no quadro (frame) pai.
•_top- Abre o documento em todo o corpo da janela.
18/02/2024 M. S
ISP –EIT2 7ºS/24 PW
Links/Hyperlink - <a>
URLs absolutos vs. URLs relativos
➢ Ambos usam um URL absoluto (um endereço da Web completo) no atributo.
Um link local (um link para uma página dentro do mesmo site) é especificado com um URL
relativo (sem a parte "https://www"):
<h2> URL Absoluto</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2> URL Relativo</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p
18/02/2024 M. S
ISP –EIT2 7ºS/24 PW
Links/Hyperlink - <a>
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
<a href="mailto:someone@example.com">Send email</a>
<button onclick="document.location='default.asp'">HTML Tutorial</button>
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML
section">Visit our HTML Tutorial</a>
18/02/2024 M. S
Tabelas <Table></Table>
18/02/2024 M. S
ISP –EIT2 7ºS/24 PW
Tabelas - <table></ttable>
➢ Uma tabela é constituída de linhas e colunas, e a intersecção entre estes
dois elementos é denominada célula.
➢ As tabelas são criadas pelo comando TABLE, suas linhas são criadas pelo
comando TR e as células de uma linha são criadas pelos comandos TD ou
TH.
18/02/2024 M. S
ISP –EIT2 7ºS/24 PW
Tabelas - <table></ttable>
Principais parametros:
Border=“nr”: specifica a largura da linha das bordas que separam as células da tabela.
CELLSPACING=“número” - Especifica o espaçamento, em pixels, entre as células.
CELLPADDING=“número” - Especifica o espaçamento, em pixels, entre o conteúdo e a borda da célula
WIDTH=“número | número%” - Especifica a largura da tabela em px ou em % relativa à largura da janela.
ALIGN=“left | center | right” - Define o alinhamento da tabela na página.
BGCOLOR= “cor” - Especifica a cor de fundo de toda a tabela.
BORDERCOLOR=“cor” - define a cor de borda da tabela.
BACKGROUND= “nome ou URL do arquivo” - Dene uma imagem como plano de fundo para toda a tabela.
18/02/2024 M. S
ISP –EIT2 7ºS/24 PW
Tabelas - <table></ttable>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
18/02/2024 M. S
ISP –EIT2 7ºS/24 PW
Navegação- <nav>…</nav>
➢ O Elemento HTML de Navegação (<nav>) representa uma seção de uma
página que aponta para outras páginas ou para outras áreas da página, ou
seja, uma seção com links de navegação
18/02/2024 M. S
ISP –EIT2 7ºS/24 PW
Navegação- <nav>…</nav>
<nav>
<ul>
<li><a href="#">Página inicial</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
18/02/2024 M. S
ISP –EIT2 7ºS/24 PW
Navegação- <nav>…</nav>
<nav>
<ul>
<li><a href="#">Página inicial</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
<style>ul li { display: inline-block;}</style>
18/02/2024 M. S
ISP –EIT2 7ºS/24 PW
Proxima aula…
➢ Formulário Inteligentes; Divisão, Frames e Iframes;
➢ Introdução ao CSS e conceitos
➢ Estilização de Paginas HTML com CSS
➢ CSS Responsivo
18/02/2024 M. S
