Manual_html.pptx Curso_Técnico Informática de Sistemas

INTRODUÇÃO AO HTML5
Formadora: Elsa Valada
1 Fonte: https://www.w3schools.com
1

EDITOR
VISUAL STUDIO CODE
O Visual Studio Code é um editor de código-fonte leve, mas poderoso,
que é executado na área de trabalho e está disponível para Windows,
macOS e Linux. Ele vem com suporte embutido para JavaScript,
TypeScript e Node.js e tem um rico ecossistema de extensões para outras
linguagens e tempos de execução (como C++, C#, Java, Python, PHP, Go,
.NET).
1

VISUAL STUDIO CODE
1

COMO FUNCIONA A INTERNET?
1
• Os browsers da Web renderizam a página de acordo com o
código HTML
• O CSS permite estilo e visual personalizado com o código
HTML
• O JavaScript permite criar interação dinâmica e é capaz de
manipular elementos html usando o modelo de objeto
Document

RECURSOS E CONFIGURAÇÃO
É necessário um lugar para escrever o código e ser capaz de
salvar os ficheiros.
‘editor’
É necessário um lugar para visualizar o código, que o
transforma em ficheiro.
‘browser’
5

RECURSOS E CONFIGURAÇÃO
Browsers
• Chrome
• Edge
• Firefox
• Internet Explorer
• Safari
• Opera
6

CONTEÚDOS
• Sintaxe básica - todas as tags comuns usadas para
desenvolver conteúdo web
• Como e onde programar em HTML - principais recursos e
links incluídos
• A estrutura HTML dentro de páginas da Web
• Explorar elementos semânticos HTML5
10

CONTEÚDOS
• Construir o próprio modelo HTML
• Criar listas HTML, hiperlinks e adicionar imagens
• Construir tabelas
• Criar formulários e explicações de tag HTML
• Adicionar iframes e elementos HTML
10

CONTEÚDOS
• Como usar classes e ID para selecionar elementos
• Explorar cores para fontes e fundos
• Mover propriedades de exibição de conteúdo
• Aprender a aplicar estilo ao HTML comum como Listas e
Tabelas.
10

CONTEÚDOS
• Estilizar texto e torná-lo fantástico com Google Fonts
• Floats para posicionar elementos e conteúdo
• O MODELO BOX - preenchimento , margens, borda, altura e
largura
• Pseudo ClassJavaScript Section
13

CONTEÚDOS
• Escrever o básico do JavaScript
• Tipos de dados e blocos de construção da codificação
12
• Usar variáveis para manter dados
• Funções invocando blocos de operadores
JavaScript e atribuição de sintaxe JavaScript
de código

CONTEÚDOS
• Objetos e Arrays
• Condições e Switches para aplicar loops lógicos
• Objeto de documentos para manipular conteúdo de
elemento HTML
12

BÁSICO DO HTML
Estrutura básica de uma página
página
<HTML>
<HEAD>
<TITLE>Página Inicial</TITLE>
</HEAD>
<BODY>
Aqui você coloca os comandos em HTML ,
os seus
Textos e Imagens .
</BODY>
</HTML>
Fonte: https://www.w3schools.com

BÁSICO DO HTML
A declaração <! DOCTYPE>
A <!DOCTYPE> declaração representa o tipo de documento
e ajuda os navegadores a exibir as páginas da web
corretamente.
Deve aparecer apenas uma vez, no topo da página (antes de
quaisquer tags HTML).
A <!DOCTYPE> declaração não diferencia maiúsculas de
minúsculas.
A <!DOCTYPE> declaração para HTML5 é
<!DOCTYPE html>
32

BÁSICO DO HTML
Os elementos HTML
Os elementos HTML é tudo desde a tag inicial até a tag final
< tagname > O conteúdo vai aqui ... < / tagname >
• Nunca ignorar a tag final.
• O HTML não é case sensitive.
32

BÁSICO DO HTML
Os elementos HTML
Exemplos de alguns elementos HTML:
< h1 > Meu primeiro título < / h1 >
< p > Meu primeiro parágrafo. < / p >
Alguns elementos HTML não têm conteúdo (como o elemento
<br>). Esses elementos são chamados de elementos vazios. Os
elementos vazios não possuem uma tag de finalização!
32

BÁSICO DO HTML
Elementos HTML encadeados
Os elementos HTML podem ser encadeados (isso significa que
os elementos podem conter outros elementos).
Todos os documentos HTML consistem em elementos HTML
encadeados.
32
<a href="https://www.google.com" alt="Site da Google">
<img src="Floresta.jpg" alt="Texto alternativo‚ width="50%;‚ height="50%;‚
/>
</a>

BÁSICO DO HTML
Atributos HTML
Os atributos HTML fornecem informações adicionais sobre os
elementos HTML.
• Todos os elementos HTML podem ter atributos
• Os atributos fornecem informações adicionais sobre os
elementos
• Os atributos são sempre especificados na tag inicial
• Os atributos geralmente vêm em pares nome / valor como:
nome = "valor"
32

BÁSICO DO HTML
Atributos HTML – href
A tag <a> define um hiperlink. O atributo href especifica o
URL da página para a qual o link vai:
32
<a href="https://www.google.com" alt="Site da Google"></a>

BÁSICO DO HTML
Atributos HTML – src
A tag <img> é usada para inserir uma imagem
numa página HTML. O atributo src especifica o
caminho para a imagem a ser exibida
32
<img src="Floresta.jpg" alt="Texto alternativo" width="50%;" height="50%;‚
/>

BÁSICO DO HTML
Existem duas maneiras de especificar o URL no src atributo:
1. URL absoluto - Links para uma imagem externa hospedada
noutro site.
Exemplo: src = "https://www.florestas.com/images/floresta.jpg"
Observações: as imagens externas podem estar protegidas
por direitos autor. Se não tiver permissão para as usar, pode
estar a violar as leis de direitos de autor. Além disso, não
pode controlar imagens externas; elas podem ser removidas
ou alteradas de um momento para o outro.
32

BÁSICO DO HTML
Existem duas maneiras de especificar o URL no src atributo:
2. URL relativo - Links para uma imagem hospedada no
site. Aqui, o URL não inclui o nome do domínio.
Se o URL começar sem barra, ele será relativo à página
atual.
Exemplo: src = “floresta.jpg"
32
Se o URL começar com
domínio.
Exemplo: src = “/images/floresta.jpg"
uma barra, será relativo ao

BÁSICO DO HTML
Atributos HTML – width, height
A tag <img> também deve conter os atributos width
e height, que especificam a largura e a altura da imagem
(em pixels ou percentagem):
32
<img src="Floresta.jpg" alt="Texto alternativo" width="50%;" height="50%;‚
/>

BÁSICO DO HTML
Atributos HTML – style
O atributo style é utilizado
32
para adicionar estilos a um
elemento, como cor, fonte, tamanho e outros.
O atributo style tem a seguinte sintaxe:
<tagname style="propriedade:valor;">
Exemplo: <p style=‚color:red;‚>Isto é um texto a vermelho</p>

BÁSICO DO HTML
<!DOCTYPE html>
<html>
<body>
<p style="color:red;">Eu sou vermelho</p>
<p style="color:blue;"> Eu sou azul</p>
<p style="font-size:50px;"> Eu sou grande</p>
</body>
</html>
32

BÁSICO DO HTML
- Cor de fundo -
</body>
32
A propriedade CSS background-color define a cor de
fundo de um elemento HTML.
Exemplo: Defina a cor de fundo de uma página
<body style="background-color:blue;">
<h1>Isto é o cabeçalho</h1>
<p>Isto é um parágrafo</p>

BÁSICO DO HTML
- Cor de texto -
A propriedade CSS color define a cor do texto de um
elemento HTML.
Exemplo:
<body>
<h1 style ="color:blue ;‛>Isto é o cabeçalho em azul</h1>
</body>
32

BÁSICO DO HTML
- Fonte -
A propriedade CSS font-family define a fonte utilizada
num elemento HTML.
Exemplo:
<body>
<h1 style=‚font-family:verdana;‛>Isto é o cabeçalho em fonte Verdana</h1>
</body>
32

BÁSICO DO HTML
- Tamanho do texto -
A propriedade CSS font-size define o tamanho da fonte
utilizada num elemento HTML.
Exemplo:
<body>
<h1 style =‚font-size:300% ;‛>Isto é o cabeçalho</h1>
</body>
32

BÁSICO DO HTML
- Alinhamento do texto -
A propriedade CSS texto-align define o alinhamento do
texto utilizado num elemento HTML.
Exemplo:
<body>
<h1 style=‚text-align:center;‛>Isto é o cabeçalho</h1>
</body>
32

BÁSICO DO HTML
- Alinhamento do texto -
Estilo
left Texto à esquerda
center Texto ao centro
rigth Texto à direita
justify Texto justificado
32

BÁSICO DO HTML
Elementos de formatação HTML
32
<b>
<strong>
<i>
<em>
<mark>
<small>
<del>
<ins>
<sub>
<sup>
Texto a negrito
Texto importante
Texto em itálico
Texto enfatizado
Texto marcado
Texto menor
Texto excluído
Texto inserido
Texto subscrito
Texto sobescrito <p>Este texto é <sup>superíndice</sup></p>
<p>a fórmula química da agua:
H<sub>2</sub>O</p>
Este texto é superíndice

BÁSICO DO HTML
Elementos de formatação HTML
32

BÁSICO DO HTML
Atributos HTML – lang
O atributo lang deve ser incluído dentro da tag <html>,
para declarar o idioma da página web. E serve para auxiliar os
mecanismos de pesquisa e dos browsers.
O exemplo a seguir especifica o português como o idioma:
<!DOCTYPE html>
<html lang=‚pt-PT">
<body>
...
</body>
</html>
32

BÁSICO DO HTML
Atributos HTML – lang
Os códigos de país também podem ser adicionados ao código
de idioma no lang atributo. Portanto, os dois primeiros
carateres definem o idioma da página HTML e os dois
últimos carateres definem o país.
32

BÁSICO DO HTML
Atributos HTML – title
O atributo title define algumas informações extras sobre
um elemento.
O valor do atributo title será exibido como uma “tip” quando
se passar com o rato sobre o elemento.
Exemplo:
<!DOCTYPE html>
<html lang=‚pt-PT">
<body>
<p title=‚Isto é uma tooltip">Texto de um paragrafo.</p>
</body>
</html>
32

BÁSICO DO HTML
Cabeçalhos HTML
Os cabeçalhos HTML são definidos com as tags <h1> para
<h6>. <h1> define o título mais importante. <h6> define o
título menos importante.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
37

BÁSICO DO HTML
Cabeçalhos HTML
Os mecanismos de pesquisa usam os títulos para indexar a
estrutura e o conteúdo das páginas da web. Os
utilizadores costumam folhear uma página pelos títulos.
É importante usar cabeçalhos para mostrar a estrutura do
documento. os cabeçalhos <h1> devem ser usados para os
cabeçalhos principais, seguidos dos cabeçalhos<h2>, depois
os menos importantes <h3> e assim por diante.
40

BÁSICO DO HTML
Parágrafos HTML
O elemento <p> HTML define um parágrafo.
Um parágrafo começa sempre numa linha nova e os browsers
adicionam automaticamente espaço em branco (uma
margem) antes e depois de um parágrafo.
40

BÁSICO DO HTML
Visualização em HTML
Nunca se tem a certeza de como o HTML será exibido.
Ecrãs grandes ou pequenos e janelas redimensionadas criarão
resultados diferentes.
Com HTML, não se pode alterar a exibição adicionando
espaços extras ou linhas extras no código HTML.
O browser removerá automaticamente quaisquer espaços e
linhas extras quando a página for exibida.
40

BÁSICO DO HTML
Regras horizontais HTML
A tag <hr> define uma quebra temática numa página HTML e
geralmente é exibida como uma régua horizontal.
O elemento <hr> é usado para separar o conteúdo (ou definir
uma mudança) numa página HTML.
A tag <hr> é uma tag vazia, o que significa que não possui
tag final.
40

BÁSICO DO HTML
Quebras de linha HTML
A tag <br> define uma quebra de linha.
Use <br> quando quiser uma quebra de linha (uma
nova linha) sem iniciar novo parágrafo.
Exemplo:
40
<p>Isto é<br>um paragrafo<br>com quebras de linha.</p>

BÁSICO DO HTML
O elemento HTML <pre>
O elemento <pre> define o texto pré-formatado.
O texto dentro de um elemento <pre> é exibido numa fonte
de largura fixa (geralmente Courier) e preserva os espaços e
as quebras de linha.
40

BÁSICO DO HTML
Citações HTML
O elemento <blockquote> define uma secção citada de
outra fontes.
Exemplo:
<body>
<p>Aqui está uma citação do site Melhores Destinos:</p>
<blockquote cite="https://www.melhoresdestinos.com.br/ilha-da-madeira-
em-portugal.html">
A Ilha da Madeira está entre os melhores destinos de Portugal e do mundo
para os viajantes apaixonados por paisagens espetaculares. É o lugar
ideal para quem busca novidades em meio à Europa ou deseja ir um pouco
além de Lisboa.
</blockquote>
</body>
40

BÁSICO DO HTML
Citações HTML
O elemento <q> tem por objetivo realçar citações curtas.
40
Exemplo:
<body>
<p>Aqui está uma citação sobre restaurantes em Lisboa.</p>
<q>
O Restaurante Típico Ilha da Madeira, convida-o a experimentar o sabor
verdadeiro da cozinha tradicional madeirense em Lisboa.
</q>
</body>

BÁSICO DO HTML
Citações HTML
O elemento <abbr> define uma abreviatura ou acrónimo
como "HTML", "CSS", "Sr.", "Dr.", "ASAP", "ATM".
As abreviações de marcação podem fornecer informações
úteis para navegadores, sistemas de tradução e mecanismos
de pesquisa.
Podemos usar o atributo <title> para mostrar a descrição da
abreviatura / acrônimo ao passar o mouse sobre o elemento.
40

BÁSICO DO HTML
Citações HTML
40
Exemplo:
<body>
<p>Este Arquipelago da Madeira foi descoberto em 1419, por navegadores
<abbr title=‚Tristão Vaz Teixeira, Bartolomeu Perestrelo e João
Gonçalves Zarco"> Portugueses</abbr> .</p>
</body>

BÁSICO DO HTML
Citações HTML
O elemento <cite> define o título de um trabalho criativo
(por exemplo, um livro, um poema, uma música, um filme,
uma pintura, uma escultura, etc.)
Nota: o nome de uma pessoa não é o título de uma obra.
O texto no <cite>elemento geralmente é processado
em itálico
40

BÁSICO DO HTML
Citações HTML
Exemplo:
<body>
<p><cite>O Grito</cite> por Edvard Munch. Foi pintado em 1893.</p>
</body>
40

BÁSICO DO HTML
Comentários HTML
Os comentários HTML não são exibidos no navegador, mas
podem ajudar a documentar o seu código-fonte.
Exemplo:
<body>
<p><cite>O Grito</cite> por Edvard Munch. Foi pintado em 1893.</p>
<!– Falta adicionar a imagem da pintura, verificar direitos de uso -->
40
</body>

BÁSICO DO HTML
Links HTML
Os cabeçalhos HTML são definidos com as tags <a>
40
<a href="https://www.google.com">Isto é um link</a>
O destino do link é especificado no href atributo.
Os atributos são usados para fornecer informações adicionais
sobre os elementos HTML.

BÁSICO DO HTML
Links HTML
Por padrão, os links aparecerão da seguinte forma em todos
os navegadores:
• Um link não visitado está sublinhado e em azul
• Um link visitado está sublinhado e roxo
• Um link ativo está sublinhado e vermelho
Os links podem, é claro, ser estilizados com CSS, para obter
outra aparência!
40

BÁSICO DO HTML
Links HTML - target
40
O atributo target especifica onde abrir o documento
vinculado.
Por padrão, a página vinculada será exibida na janela do
navegador atual. Para alterar isso, você deve especificar outro
destino para o link.

BÁSICO DO HTML
Links HTML - target
O target atributo pode ter um dos seguintes valores:
40
_self Padrão. Abre o documento na mesma janela /
tabulador em que foi clicado
Abre o documento numa nova janela.
Abre o documento no “frame” parente.
Abre o documento em todo o corpo da janela
_blank
_parente
_top

BÁSICO DO HTML
Links HTML - title
O atributo title especifica informações extras sobre um
elemento. As informações geralmente são mostradas como
um texto de dica de ferramenta quando o mouse se move
sobre o elemento.
Exemplo:
<a href=‚https://www.google.com‛ title=‚Vá para o site da Google.‛>Isto é um link</a>
40

BÁSICO DO HTML
Links HTML – imagem como link
Para usar uma imagem como link, basta colocar a <img> tag
dentro da <a> tag.
Exemplo:
<p>Site da Google!
<a href="https://www.google.com">
<br/><img src="Floresta.jpg" width="50%;" height="50%;" >
</a>
</p>
74

BÁSICO DO HTML
Links HTML – endereço de e-mail
Use mailto: dentro do atributo href para criar um link que
abre o programa de e-mail do utilizador (para permitir que ele
envie um novo e-mail).
Exemplo:
<a href="mailto:conta.de.email@dominio.pt">Enviar correio electronico</a>
74

BÁSICO DO HTML
Links HTML – botão
Para usar um botão HTML como link é necessário adicionar
código em JavaScript.
O JavaScript vai permitir que se defina o que vai acontecer em
certos eventos, como o clique de um botão.
74
<button onclick="document.location='contas.html’‛>Use a nossa calculadora</button>

BÁSICO DO HTML
Imagens HTML
As imagens podem melhorar o design e a aparência de uma
página da web.
Sintaxe de imagens HTML
A tag <img> é usada para inserir uma imagem numa
página web.
74

BÁSICO DO HTML
Imagens HTML
As imagens não são tecnicamente inseridas numa página da
web; as imagens estão vinculadas a páginas da web. A tag
<img> cria um espaço de retenção para a imagem
referenciada.
A tag <img> está vazia, contém apenas atributos e não possui
uma tag de fecho.
74

BÁSICO DO HTML
Imagens HTML
A tag <img> tem dois atributos obrigatórios:
74
- src
- alt
especifica o caminho para a imagem especifica
um texto alternativo para a imagem
<img src="url" alt=“texto alternativo">

BÁSICO DO HTML
Imagens HTML
O atributo src especifica o caminho (URL) para a imagem.
Quando uma página da web é carregada, é o broswer, naquele
momento, que obtém a imagem do servidor web e a insere na
página. Portanto, certifique-se de que a imagem realmente
permanece no mesmo lugar em relação à página da web, caso
contrário, os visitantes receberão um ícone de link partido. O
ícone de link partido e o alt texto são mostrados se o
navegador não conseguir encontrar a imagem.
74

BÁSICO DO HTML
Imagens HTML
O atributo alt é obrigatório e fornece um texto alternativo
para uma imagem, que deve corresponder a uma breve
descrição da imagem.
Se o utilizador por algum motivo não conseguir visualizar
(devido à ligação lenta, um erro no atributo src).
O valor do atributo alt deve descrever a imagem:
<img src="img_chania.jpg" alt="Flowers in Chania">
74

BÁSICO DO HTML
Imagens HTML
Os atributos width e height definem a largura e a altura
da imagem em pixels.
<img src="Floresta.jpg" alt="Imagem Floresta." width="600px;" height="398px;">
74
Também se pode utilizar o atributo style para especificar a
largura e a altura de uma imagem.
<img src="Floresta.jpg" alt="Imagem Floresta." style=‚width:600px;height:398px;">

BÁSICO DO HTML
Imagens HTML
Por norma as imagens ficam
74
numa pasta diferente dos
de
ficheiros html, principalmente, por uma questão
organização. Neste caso o caminho correto para a imagem
deve ser incluída no atributo src.
<img src="/imagens/Floresta.jpg" alt=‚Imagem de floresta." style="width:600px;height:400px;">

BÁSICO DO HTML
Imagens HTML
Alguns sites apontam para uma imagem noutro servidor.
Neste caso o URL completo para a imagem deve ser incluído
no atributo src.
<img src="https://www.florest.com/imagens/floresta.jpg" alt="Imagem de Floresta.">
As imagens externas podem estar protegidas por direitos de
autor. Se você não obtiver permissão para usá-las, pode estar
a violar as leis de direitos de autor. Além disso, você não pode
controlar imagens externas; elas podem ser removidas ou
alteradas.
74

BÁSICO DO HTML
Imagens HTML - Base 64
Podemos ainda ter as imagens embutidas na própria página
de html. Neste caso o atributo src deve ser informado que a
imagem está codificada em Base64.
Este tipo de codificação pode ser executada com o auxílio de
sites como o:
https://www.base64-image.de/ ou https://base64.guru/
74
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gA7Q …. eMEqCC9YmBEoiezvAMtIuiSV7z//Z" alt=‚Imagem de
Floresta." style="width:600px;height:400px;">

BÁSICO DO HTML
Imagens HTML - Flutuante
A propriedade CSS float
74
faz com que a imagem possa
flutuar à direita ou à esquerda de um texto.
<p><img src=‚Floresta.jpg" alt=‚Floresta‛ style="float:right;width:60px;heig
ht:40px;"> A Floresta irá flutuar a direita do texto.</p>
<p><img src=‚Floresta.jpg" alt=‚Floresta‛ style="float:left;width:60px;heigh
t:40px;"> A Floresta irá flutuar a esquerda do texto.</p>

BÁSICO DO HTML
Imagens HTML - Formatos
74
Abreviatura Fomato do Ficheiro Extensão
APNG Animated Portable Network Graphics .apng
GIF Graphics Interchange Format .gif
ICO Microsoft Icon .ico, .cur
JPEG Joint Photographic Expert Group image .jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG Portable Network Graphics .png
SVG Scalable Vector Graphics .svg

BÁSICO DO HTML
Imagens HTML - mapa de imagens
A tag <map> é usada para definir um mapa de imagem. Um
mapa de imagem é uma imagem com áreas clicáveis.
O elemento <map> contém vários elementos <area>, que
definem as áreas clicáveis no mapa de imagem.
74

BÁSICO DO HTML
74
<img src=‚floresta.jpg" alt=‚Floresta" usemap="#forestmap">
<map name=‚forestmap">
<area shape="rect" coords="34,44,270,350" alt=‚Tree01" href=‚tree01.htm">
<area shape="rect" coords="290,172,333,250" alt=‚Tree02" href=‚tree02.htm"
>
<area shape="circle" coords="337,300,44" alt=‚Bush01" href=‚bush01.htm">
</map>

BÁSICO DO HTML
Como funciona?
A ideia por trás de um mapa de imagem, é que o utilizador
74
deve conseguir dependendo de onde se
opções de escolha.
A imagem
A imagem é inserida usando a tag <img>
configuramos o atributo usemap
clica, ter várias
e adicionalmente

BÁSICO DO HTML
<img src=‚floresta.jpg" alt=‚Floresta" usemap="#forestmap">
74
O valor de usemap
nome do mapa de imagem e é usado para criar um
começa com uma hash tag # ,seguida pelo
relacionamento entre a imagem e o mapa de imagem.
Qualquer imagem pode ser um mapa de imagens!

BÁSICO DO HTML
Criar Mapa de Imagem
Em seguida, adicione um elemento
74
<map>. O elemento
<map> é usado para criar um mapa de imagem e está
vinculado à imagem usando o atributo name, obrigatório.
…
</map>
O atributo name deve ter o mesmo valor do atributo usemap
no elemento <src>.

BÁSICO DO HTML
Áreas
Em seguida, vamos adicionar as áreas clicáveis. Cada área
clicável é definida usando um elemento <area>.
74

BÁSICO DO HTML
Formas
As áreas clicáveis podem ter uma destas 4 formas, a saber,
74
• rect
• circle
• poly
• default
- define uma região retangular
- define uma região circular
- define uma região poligonal
- define toda a região

BÁSICO DO HTML
Coordenadas
As coordenadas dos pontos são em para o eixo do x e outra
para o eixo do y.
As coordenadas têm sintaxes diferentes de configuração,
consoante o tipo de forma que estamos a configurar.
74

BÁSICO DO HTML
A forma rect:
74
• 34 - o retângulo inicia a 34 pixéis da esquerda da imagem principal
• 44 - o retângulo inicia a 44 pixéis do topo da imagem principal
•
•
270 - o retângulo termina a 270 pixéis da esquerda da imagem principal
350 - o retângulo termina a 350 pixéis do topo da imagem principal

BÁSICO DO HTML
<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355
,58,352,37,322,40,259,103,161,128,147" href=‚who_knows.htm">
A forma poly contém vários pontos de coordenadas, o que
cria uma forma formada com linhas retas (um polígono). Isso
pode ser usado para criar qualquer forma.
Cada par x,y é um ponto a contar sempre de 0,0. O polígono é
criado desenhando linhas retas entre os pontos, formando o
objeto desejado.
74

BÁSICO DO HTML
Imagens HTML - mapa de imagens e JavaScript
Uma área clicável também pode acionar
JavaScript.
74
uma função
Adicione um evento click ao elemento <area> para executar
uma função em JavaScript.

BÁSICO DO HTML
Imagens HTML - mapa de imagens e JavaScript
<script type="text/javascript">
function funcao_java(){
alert(‚Imagemap‛);
}
</script>
<area shape="rect" coords="34,44,270,350" alt=‚Tree01" onclick=‚funcao_java()‛ href=‚tree01.htm">
</map>
74

BÁSICO DO HTML
Imagens HTML - imagens de fundo
Uma imagem de fundo pode ser especificada para quase qualquer elemento
HTML.
Para adicionar uma imagem de fundo num elemento HTML, use o atributo
style HTML e a propriedade background-image CSS.
<div style="background-image:url(‘floresta.jpg');">
Adicionar uma imagem de fundo a uma página
No elemento body, configuramos um propriedade style da seguinte forma:
<style>
body {
background-image: url(‘floresta.jpg');
}
</style>
74

BÁSICO DO HTML
74
Fundo de repetição
Se a imagem de fundo for menor que o elemento, a imagem repetir-se-á,
horizontal e verticalmente, até chegar ao final do elemento.
<style>
body {
background-image: url(‘floresta.jpg');
}
</style>
Para evitar que o fundo se repita, adicionamos a seguinte propriedade
configurada da seguinte forme:
background-repeat: no-repeat;

BÁSICO DO HTML
Capa de fundo
Se se quiser que a imagem de fundo cubra todo o elemento, você pode
definir a propriedade background-size para cover.
Depois, para garantir que todo o elemento é sempre coberto, defina a
propriedade background-attachment como fixed:
Desta forma, a imagem de fundo cobrirá todo o elemento, sem alongamento
(a imagem manterá suas proporções originais)
<style>
body {
background-image: url(‘floresta.jpg’);
background-attachment: fixed;
background-size: cover;
}
</style>
74

BÁSICO DO HTML
Alongamento de fundo
Se se quiser que a imagem de fundo se estique para caber em todo o
elemento, você pode definir a propriedade background-size para 100% 100%.
Se tentarmos redimensionar a janela do Browser, vamos assistir a que a
imagem será esticada, mas sempre cobrindo todo o elemento.
<style>
body {
background-image: url(‘floresta.jpg’);
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
74

BÁSICO DO HTML
Tabelas HTML
As tabelas HTML permitem que os programadores
da web organizem os dados em linhas e colunas.
74
Definir uma tabela HTML
A tag <table> define uma tabela HTML.
Cada linha da tabela é definida com uma tag <tr>.
<table style="width:100%">
<tr>
<th>Nome</th>
<th>Apelido</th>
<th>Idade</th>
</tr>
<tr>
<td>Antonio</td>
<td>Silva</td>
<td>34</td>
</tr>
<tr>
<td>Jose</td>
<td>Maria</td>
<td>27</td>
</tr>
Cada cabeçalho da tabela é definido com uma tag <th>.
Cada célula da tabela é definida com uma tag <td>.
Por pré definição, o texto nos elementos <th> estão
em negrito e centralizado, e nos elementos <td> é
regulado e alinhado à esquerda. </table>

BÁSICO DO HTML
Tabelas HTML
Adicionar um limite
Para adicionar um limite numa tabela, use a popriedade border CSS.
<style>
table, th, td {
border: 1px solid black;
}
</style>
74

BÁSICO DO HTML
Tabelas HTML
Limites recolhíeis
Para permitir que os limites se contraiam, adicione a propriedade border-
collapse CSS
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
74

BÁSICO DO HTML
Tabelas HTML
Adicionar espaçamento nas células
Preenchimento da célula especifica o espaço entre o conteúdo da célula e os
seus limites.
Se não se especificar um preenchimento, as células da tabela serão exibidas
sem preenchimento.
Para definir o preenchimento, use a propriedade padding CSS
<style>
table, th, td {
padding : 15px;
}
</style>
74

BÁSICO DO HTML
Tabelas HTML
Alinhar títulos à esquerda
Por padrão, os títulos das tabelas estão em negrito e centralizados.
Para alinhar à esquerda os títulos da tabela, use a propriedade text-align CSS
<style>
th {
text-align : left;
}
</style>
74

BÁSICO DO HTML
Tabelas HTML
Unir colunas no cabeçalho
Para fazer uma célula ocupar mais de uma coluna, use o atributo colspan
<tr>
<th>Nome</th>
<th colspan="2">Telefone</th>
</tr>
<tr>
<td>José Maria</td>
<td>915577854</td>
<td>935577855</td>
</tr>
</table>
74

BÁSICO DO HTML
Tabelas HTML
Unir colunas nas células
Para fazer uma célula ocupar mais de uma linha, use o atributo rowspan
<tr>
<th>Nome</th>
<td>José Maria</td>
</tr>
<tr>
<th rowspan=‚2‛>Telefone</th>
<td>935577854</td>
</tr>
<tr>
<td>935577855</td>
</tr>
</table>
74

BÁSICO DO HTML
Tabelas HTML
Adicionar um Título
Para adicionar uma legenda a uma tabela, use a tag <caption>
<caption>Despesas Mensais</caption>
<tr>
<th>Mês</th>
<th>Despesas</th>
</tr>
<tr>
<td>Janeiro</td>
<td>300€</td>
</tr>
<tr>
<td>Fevereiro</td>
<td>350€</td>
</tr>
</table>
74

BÁSICO DO HTML
Tabelas HTML
Adicionar um estilo
Para definir um estilo especial a uma tabela, adicione um atributo id.
<table id=‚t01‛>
…
</table>
<style>
#t01 {
width: 100%;
background-color: #f1f1c1;
}
</style>
74

BÁSICO DO HTML
Tabelas HTML
Configurar cores as linhas e cabeçalhos
<table id=‚t01‛>
…
</table>
<style>
#t01 tr:nth-child(even) {
background-color: #eee;
}
#t01 tr:nth-child(odd) {
background-color: #fff;
}
#t01 th {
width: 100%;
color: white;
background-color: black;
}
</style>
74

Manual_html.pptx Curso_Técnico Informática de Sistemas

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Manual_html.pptx Curso_Técnico Informática de Sistemas

Semelhante a Manual_html.pptx Curso_Técnico Informática de Sistemas (20)

Manual_html.pptx Curso_Técnico Informática de Sistemas