Tema 1 - Aula 2

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
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
Web site vs web application
18/02/2024 M. S
Editores
Editores de Texto: Notepad++, TexyMAte, Vim, …

IDE’s: VScode; Eclipse, Atom, JetBrains WebStorm, VisualStudio, …
18/02/2024 M. S
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
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.
➢
➢ < tagname > O conteúdo vai aqui... < /tagname >
< h1> Meu primeiro cabeçalho < /h1>

< p > Meu primeiro parágrafo. < /p >
18/02/2024 M. S
TPC
Investigar mais sobre elementos HTML (Elaborar uma tabela de consulta)
18/02/2024 M. S

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
TPC
Investigar mais sobre Atributos HTML
18/02/2024 M. S
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
Aninhamento (Nestiing)
<a>
<b>
<c>
</c>
</b>
</a>
18/02/2024 M. S
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
Resultado
18/02/2024 M. S
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
<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
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
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
<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
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
<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
<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
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

Tema 1 - Aula 2

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Tema 1 - Aula 2

Enviado por

Direitos autorais:

Formatos disponíveis

Universidade Politécnica

Engenharia Informática e de Telecomunicações

➢ Colecção de páginas HTML estáticas, que não interagem com um

➢ Todo o conteúdo da página está escrito directamente no

➢ 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.

linguagem de programação de servidor Web.

Web site vs web application

Editores de Texto: Notepad++, TexyMAte, Vim, …

HTML - HyperText Markup Language

➢ É um conjunto estruturado de instruções (etiquetas ou tags), que dizem a um

➢ O browser interpreta essas etiquetas e desenha a página no ecrã. Estes

HTML – Conceitos Fundamentais

➢

➢ < tagname > O conteúdo vai aqui... < /tagname >

< h1> Meu primeiro cabeçalho < /h1>

Investigar mais sobre elementos HTML (Elaborar uma tabela de consulta)

HTML – Conceitos Fundamentais

➢ É utilizado para definir as características de um elemento e é colocado no

➢ Os atributos são sempre especificados na tag de início. Geralmente vêm em

❑< a href = https://www.w3schools.com> Clica aqui </a>

Investigar mais sobre Atributos HTML

HTML – Conceitos Fundamentais

➢ Em um página web existem quase sempre múltiplos elementos que nunca se

➢ Os elementos devidamente aninhados são sempre independentes uns dos

HTML – Conceitos Fundamentais

HTML – Estrutura Básica

</title> - Escreve o título da página na barra de título na janela do browser.

<body> -> Contém o conteúdo principal da página web.

HTML – Estrutura completa

<html lang="pt-br"> indica o idioma principal utilizado no conteúdo da página HTML.

<meta charset="utf-8"> especifica a codificação de caracteres para o documento HTML.

Também pode se especificar o tamanho do cabeçalho através do atributo style, usando a

<h1 style="font-size:60px;">Heading 1</h1>

<P ALIGN=“left | right | center | justify”> Texto</P>

<p> Parágrafo 1 </p>

<p> Parágrafo 2 p>

Quebra de linha: <br>

Qual será o resultado ao executar pos dois blocos de código?

<p> Define um parágrafo

Aplique cada Marcação abaixo. Observe e anote os resultados

<B> texto </B>; <Big>texto</Big>

Uma lista HTML ordenada: Uma lista HTML não ordenada:

UL: (Unordered lists)

UL: (Unordered lists)

OL: (Ordered lists)

OL: (Ordered lists)

Funcionam de forma análoga

OL: (Ordered lists)

➢ De entre a multitude de formatos gráficos que se podem utilizar os três mais

➢ A diferença fundamental entre estas três formas reside na forma de

➢ Possui dois atributos obrigatórios:

➢ 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 outro <img src="https://www.w3schools.com/images/w3sch

<img src="programming.gif" alt="Computer

Pode se usar a propriedade CSS float para deixar a imagem

<p><img src="smiley.gif" alt="Smiley

<p><img src="smiley.gif" alt="Smiley

<img src="C:\Users\M SITOE\Desktop\w_f2.png"

<figcaption> Previsao </figcaption>