HTML Apoio v13

ESCOLA SECUNDÁRIA DE CALDAS DAS TAIPAS
2022-2023
CURSO PROFISSIONAL DE TÉCNICO DE MULTIMÉDIA
Sistema(s) de Informação – 10º-11ºAno
UFCD […] Apoio-BLOCO DE NOTAS HTML (INTRODUÇÃO)-V13
ESTRUTURA BÁSICA DE UM DOCUMENTO HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title> Título (no separador) da página/janela </title>
Outras TAGs
</head>
<body>
Textos e outros elementos da página
</body>
</html>
INSERIR ESPAÇOS ADICIONAIS ENTRE PALAVRAS

Os Browsers ignoram os espaços (entre palavras) a mais. Assim, usa-se a instrução (não TAG) (non breakable space)
para o caracter ESPAÇO não ser ignorado;
INSTRUÇÃO
MUDAR DE LINHA – INSERIR LINHAS EM “BRANCO” [“ENTER”]

<br />
BLOCO DE TEXTOS:: PARÁGRAFOS (CAIXA DE TEXTO)

<p> …</p>
Ex: <p> Um texto qualquer </p>
BLOCOS::(CAIXA DE TEXTO)-MAS COM TAMANHOS DE LETRA DIFERENTES

Caixas de texto mas com tamanhos de letra diferentes pré-definidos (existem 6 tamanhos predefinidos - do
maior para o mais pequeno; no entanto pode-se alterar com CSS)
<h1> … </h1>
<h2>… </h2>
<h3> …</h3>
<h4> … </h4>
<h5> … </h5>
<h6> … </h6>
PÁG: 1 - 10
2022-2023
MARCAR PARTE DE UM TEXTO DE UM PARÁGRAFO (…PARA FORMATAR)

<span> …</span>
Nota: útil quando se quer formatar (com CSS) parte de um parágrafo
Ex: <p>Quero <span style=”color:black;”> formatar </span> uma palavra deste parágrafo</p>
FORMATAR COM HTMLCOM NEGRITO OU ITALICO

NEGRITO (bold): <b> …palavras…..</b>
ITÁLICO (italic): <i>… palavras …</i>
LISTAS DE MARCAS E NUMERADAS

O HTML disponibiliza TAGS para a escrita de listas. Existem vários tipos de listas:
TAG <ul > … </ul> listas não ordenadas (com marcas)
TAG <ol> … </ol> listas ordenadas (numeradas)
Atributos/parâmetros:
TYPE=” ”
Listas ul -> define a marca a ser
utilizada (circle, square, disc)
Listas ol - > define o tipo de numeração
Para estes dois tipos de listas utiliza-se a TAG

<li>…</li> para definir o item da lista.
Exemplo:
<ul type = “circle”>
<li> Item X </li>
<li> Item Y </li>
<li> Item Z </li>
</ul>
LINHAS HORIZONTAIS::LINHAS SEPARADORAS:

As linhas separadoras podem servir para separar texto, imagens e outros objetos.
TAG <hr>
Nota: esta TAG não tem a correspondente TAG de fecho.
Exemplo: <hr />
PÁG: 2 - 10
2022-2023
IMAGEM:: INSERIR UMA IMAGEM NA PÁGINA

TAG <img>
Nota: não tem TAG de fecho
Atributos/Parâmetros:
src=” ” onde se indica a localização e o nome (path) do ficheiro de imagem
alt=” ” define um texto alternativo à imagem (caso esta não apareça na página por alguma razão!)
Exemplos:
<img src=”gato.gif” alt=”Gato Miau” />
<img src=”fotos/gato.gif” alt=”Gato Miau” />
<img src=”imagens/fotos/gato.gif” alt=”Gato Miau” />
TABELAS:: CRIAÇÃO E CONFIGURAÇÃO

As tabelas servem, para além de apresentar dados num esquema tabular, localizar elementos (imagens, blocos
de texto, etc) lado a lado.
No HTMLas tabelas são construídas linha a linha, utilizando as seguintes tags
<table> … </table> define o início e o fim da tabela
<caption>…</caption> para definir um título à tabela
<tr>…</tr> (table row) define uma linha na tabela
<td>…</td> (table data) define o conteúdo da tabela, ou melhor, da célula (colocada dentro das tags <tr>
- definido colunas?)
<th>…</th> (table head) define o conteúdo da tabela, ou melhor, da célula (nos cabeçalhos da tabela)
notas:
 a diferença do th e td é que no caso do th , este destaca a negro (negrito) o conteúdo.
 as tags tr, td e th não necessitam das tags de fecho, mas…
Aributos/parâmetros:
tag table
cellpadding=” ” define o espaço entre o conteúdo das células e as linhas da tabela.
tag <tr>
tag <td>
colspan=” “ especifica quantas colunas são abrangidas pelas células (unir células na mesma linha)
rowspan=” “ especifica quantas linhas são abrangidas pelas células (unir células na mesma coluna)
PÁG: 3 - 10
2021-2022
Sistema de Informação – 11ºAno
Exemplo1
<table border=”1” >
<tr> célula 1 célula 2 célula 3

<td >célula 1</td>
<td > célula 2</td> célula 4 célula 5 célula 6
<td > célula 3</td> célula 7 célula 8 célula 9
</tr>
<tr>
<td > célula 4</td>
</tr>
<tr>
<td >célula 7</td>
</tr>
</table>
OBS: após utilizar para visualizar a tabela resultante deve eliminar border=”1” …a formatação deverá ser feita com CSS…
PÁG: 4 - 10
2021-2022
Exemplo2 coluna 1 coluna 2 coluna 3
<table border =”1”> célula 1 célula 2 célula 3

<caption>tabela 1 </caption> célula 4 célula 5 célula 6
<th>coluna 1<\th>
<th>coluna 2<\th> célula 7 célula 8 célula 9
<th>coluna 3<\th>
<tr>
<td width=”31%” bgcolor=”blue”>célula 1</td>
<td width=”33%”> célula 2</td>
<\tr>
<tr>
<td width=”31%” bgcolor=”green”>célula 4</td>
<td width=”33%” align=”center”> célula 5</td>
<\tr>
<tr>
<td width=”33%” align=”center” > célula 8</td>
<td width=”36%”bgcolor=”yellow”> célula 9</td>
<\tr>
<\table>
OBS: a formatação, cores, alinhamento, tamanho, etc, deve ser feita em CSS (não como se apresenta aqui…)
PÁG: 5 - 10
2021-2022
Exemplo3 célula 1 célula 2

célula 5
célula 3
célula 6
Unir células numa tabela com rowspan e colspan. célula 7 célula 8
<table width=”70%” border=”1” align=”center” >
<tr>
<td width=”31%” bgcolor=”blue” rowspan=”2”>célula 1</td>
<\tr>
<tr>
<td width=”31%” align=”center” > célula X</td>
<td width=”33%” align=”center” > célula 5</td>
<\tr>
<tr>
<td width=”33%” align=”center” colspan=”2”> célula 8</td>
<td width=”36%”> célula Y</td>
<\tr>
<\table>
OBS: a formatação, cores, alinhamento, tamanho, etc, deve ser feita em CSS (e não como se apresenta aqui….)
PÁG: 6 - 10
2021-2022
HIPERLIGAÇÕES:: CRIAÇÃO E CONFIGURAÇÃO

Nota: Hiperligação designa-se qualquer porção de texto ou imagem sobre a qual é possível fazer clique para saltar para
outro “local”.
Com uma hiperligação pode-se “saltar” para:
 Um local/secção da página atual

 Outra página Web local ou remota
 Um endereço eletrónico
 Uma localização específica de outra página Web
OBS: Quando queremos criar uma Hiperligação que salte para um local/secção específico de uma página teremos antes
de mais criar os marcadores (Bookmarks) – que marcam um local como destino e só depois as hiperligações para esses
locais específicos da página.
ASSIM…
A TAG chave para se efetuarem as ligações chama-se Anchor Tag (etiqueta de âncora)
<a>…</a>
Atributos/Parâmetros:
href=”?” define o local para onde se vai saltar;
name=”?” define uma âncora (uma marca) numa palavra ou frase; define um destino dentro de um
documento
target=”?” permite definir a janela do browser onde vai ser acedido o link
Quando queremos definir LINKS para um local de um documento (seja a mesma ou outra página):
 No destino <a name=”textodest”>texto</a>
 Na origem (utilização do símbolo #)
na mesma página <a href=”#textodest>textoorigem</a>
noutra página <a href=”pagx,html#textodest>textoorigem</a>
Exemplos para href
HREF= LINK para

“http://www.dom.xx” o site indicado, usando o protocolo http
“ftp://ftp.dom.xx” o site indicado, usando o protocolo ftp
“mailto:emeile@dom.xx” Envio de e-mail para o endereço indicado
“pag7.html” a página pag7.html que está na mesma pasta
“#texto” a própria página onde a âncora seja «texto»
“pag7.html#texto” a âncora «texto» na página pag7.html
PÁG: 7 - 10
2021-2022
NOTA 1:
Podemos definir LINKS a partir de imagens. Por exemplo,
<a href=”pag2.html”> <img src=”boneco.gif”></a>
NOTA 2:
Também podemos definir cores específicas para LINKS por visitar e visitados na TAG <body>
com os atributos/parâmetros,
link=”?” define a cor dos LINKS
vlink=”?” define a cor dos LINKS visitados
Exemplo:
<body link=”green” vlink=”red”>
IFRAMES::INSERÇÃO DE UMA JANELA/QUADRO NA PÁGINA

Para criar um quadro/janela incorporada na página (por exemplo, pode-se usar para colocar outra página,
imagens, etc)
TAG <iframe>…</iframe>
Atributos/Parâmetros (principais):
src=” ” onde se indica o nome e a localização do nome (path) do ficheiro de imagem ou o
URL da página;
width=” ” define a largura da frame (pixels)
height=” ” define a altura da frame (pixels)
name=” ” permite definir um nome para a frame, o qual pode ser utilizado nas hiperligações
<a> no parâmetro target para que o elemento (página ou imagem) seja aberta na mesma
Exemplos:
 Para abrir uma imagem numa iframe:
<iframe src="fotos\praia.jpg" width="800px" height="600px">

<p>O navegador não admite iframes</p>
</iframe>
 Para abrir uma página web (externa) no iframe:
<iframe src="http://www.jn.pt"></iframe>
 Para abrir uma imagem (selecionada numma hiperligação) no iframe:
<iframe name=”quadro” src="fotos\praia.jpg" width="800px" height="600px"></iframe>

… e numa hiperligação para a iframe 
<a href=”fotos\praia.jpg” target=”quadro”> Praia </a>
PÁG: 8 - 10
2021-2022
INSERÇÃO DE ÁUDIO
Para inserir áudio…uma música, som ,etc…
<audio propriedades>
<source src="caminho\nome_musica.ogg" type="audio/ogg">
<source src="caminho\nome_musica..mp3" type="audio/mpeg">
Este navegador não suporta a tag áudio…
</audio>
Exemplo:
<audio controls autoplay>
<source src="cancoes\hello.ogg" type="audio/ogg">
<source src="cancoes\hello.mp3" type="audio/mpeg">
Este navegador não suporta a tag áudio…
</audio>
OBS: consultar a página http://www.w3schools.com/tags/tag_audio.asp
INSERÇÃO DE VIDEO
Para inserir video…um filme…
<video propriedades>
<source src="caminho\nome_video.mp4" type="video/mp4">
<source src="caminho\nome_video.ogg" type="video/ogg">
O navegador não suporta esta TAG (video).
</video>
Exemplo:
<video controls >
<source src="videos/filmex.ogg" type="video/ogg">
<source src="videos/filmex.mp4" type="video/mp4">
Este navegador não suporta a tag video…
</video>
OBS: consultar a página https://www.w3schools.com/tags/tag_video.asp
PÁG: 9 - 10
2021-2022
…DIVERSOS…
CARATER:: ALGUMAS ACENTUAÇÕES E CEDILHAS
Símbolo Código Símbolo Código

á á õ õ
Á Á ç ç
é é ú ú
É É Ú Ú
à à ó &oacute
À À
â â
ã ã
Exemplo:
Frase normal: Olá, é o último dia do mês.
Frase em HTML: Olá, é o último dia do mês.
CARATER:: OUTROS SÍMBOLOS
Símbolo Código Símbolo Código

© © ® ®
™ ™ & &
“ " < <
> > º º
® ® € €
& & « «
< < » »
ª ª
PÁG: 10 - 10

HTML Apoio v13

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

HTML Apoio v13

Enviado por

Direitos autorais:

Formatos disponíveis

ESCOLA SECUNDÁRIA DE CALDAS DAS TAIPAS

ESTRUTURA BÁSICA DE UM DOCUMENTO HTML

Textos e outros elementos da página

INSERIR ESPAÇOS ADICIONAIS ENTRE PALAVRAS

MUDAR DE LINHA – INSERIR LINHAS EM “BRANCO” [“ENTER”]

BLOCO DE TEXTOS:: PARÁGRAFOS (CAIXA DE TEXTO)

Ex: <p> Um texto qualquer </p>

BLOCOS::(CAIXA DE TEXTO)-MAS COM TAMANHOS DE LETRA DIFERENTES

MARCAR PARTE DE UM TEXTO DE UM PARÁGRAFO (…PARA FORMATAR)

Nota: útil quando se quer formatar (com CSS) parte de um parágrafo

FORMATAR COM HTMLCOM NEGRITO OU ITALICO

ITÁLICO (italic): <i>… palavras …</i>

LISTAS DE MARCAS E NUMERADAS

Para estes dois tipos de listas utiliza-se a TAG

LINHAS HORIZONTAIS::LINHAS SEPARADORAS:

Exemplo: <hr />

IMAGEM:: INSERIR UMA IMAGEM NA PÁGINA

TABELAS:: CRIAÇÃO E CONFIGURAÇÃO

<tr> célula 1 célula 2 célula 3

Exemplo2 coluna 1 coluna 2 coluna 3

<table border =”1”> célula 1 célula 2 célula 3

Exemplo3 célula 1 célula 2

<table width=”70%” border=”1” align=”center” >

HIPERLIGAÇÕES:: CRIAÇÃO E CONFIGURAÇÃO

Com uma hiperligação pode-se “saltar” para:

 Um local/secção da página atual

HREF= LINK para

IFRAMES::INSERÇÃO DE UMA JANELA/QUADRO NA PÁGINA

<iframe src="fotos\praia.jpg" width="800px" height="600px">

<iframe name=”quadro” src="fotos\praia.jpg" width="800px" height="600px"></iframe>

OBS: consultar a página http://www.w3schools.com/tags/tag_audio.asp

OBS: consultar a página https://www.w3schools.com/tags/tag_video.asp

CARATER:: ALGUMAS ACENTUAÇÕES E CEDILHAS

Símbolo Código Símbolo Código

CARATER:: OUTROS SÍMBOLOS

Símbolo Código Símbolo Código

Você também pode gostar