Ao acessar o link com a hashtag seguida da id de alguma tag do site, a página será posicionada na mesma posição em que ela se encontra. Sabendo disso, facilitará o uso de alguns recursos como os mapas.
Para utilizar mapas de imagens, você usa as tags map, e na imagem (ou outro arquivo) você indica o uso do mapa desejado com o parâmetro usemap, tudo dentro de tags section (os mapas não precisam obrigatoriamente estar dentro da tag, mas é recomendável).
Para definir os usos de mapas, usamos as tags area (sem fechamento), com as coordenadas e a tag shape, que definirá o tipo de polígono usado (círculo, retangular e poligonal), dessa forma:
<section id="conteudo">
<img src="imagens/foto.jpg" usemap="#meumapa"/>
<map name="meumapa">
<area shape="rect" coords="179,202,270,260" href="exemplo.html#tela" target="janela"/>
<area shape="circle" coords="76,51,11" href="exemplo.html#gadgets" target="janela"/>
<area shape="poly" coords="28,143,83,216,84,249,27,169" href="exemplo.html#sensores" target="janela"/>
</map>
<iframe src="exemplo.html" name="janela" id="frame-spec"></iframe>
</section>
Pode ver que no atributo href, o link será usado com a hashtag e a id do artigo da página no iframe. Para funcionar corretamente, devemos usar o parâmetro target com o name do iframe que está a página.
Para definir as coordenadas da imagem desejada, você pode usar um editor de imagens qualquer e abrir a imagem, e pegar as coordenadas desejadas para isso.
Essas são as ordens das coordenadas, e seus respectivos nomes nos parâmetros:
Ordem das coordenadas em retângulos/quadrados (rect):
Ordem das coordenadas em circunferências (circle):
Ordem das coordenadas em polígonos livres, como um losango ou trapézio (poly):
Você pode inserir imagens sem precisar da tag img, usando CSS, para gerar efeitos especiais, como nesse exemplo, que criamos uma lista com fotos onde elas são ampliadas ao passar o mouse:
No HTML fará somente isso:
<ul id="album-fotos">
<li id="foto01"><span>Foto 01</span></li>
<li id="foto02"><span>Foto 02</span></li>
<li id="foto03"><span>Foto 03</span></li>
<li id="foto04"><span>Foto 04</span></li>
<li id="foto05"><span>Foto 05</span></li>
<li id="foto06"><span>Foto 06</span></li>
</ul>
E no CSS você postará algo assim:
ul#album-fotos {
width: 700px;
margin: 0 auto;
padding: 50px;
overflow: hidden;
list-style: none;
}
ul#album-fotos li {
float: left;
width: 200px;
height: 200px;
margin: 10px;
border: 5px solid white;
background-color: white;
box-shadow: 2px 2px 3px rgba(0, 0, 0, .4);
-webkit-transition: all .4s ease-in;
}
ul#album-fotos li:hover {
-webkit-transform: scale(1.5);
}
ul#album-fotos li span {
opacity: 0;
color: white;
text-shadow: 1px 1px 1px black;
background-color: rgba(0, 0, 0, .3);
font-size: 9pt;
line-height: 370px;
padding: 5px;
}
ul#album-fotos li:hover span {
opacity: 1;
}
ul#album-fotos li#foto01 {
background: url("../imagens/galeria-01.jpg") no-repeat;
background-position: 50% 50%;
background-size: 400px 400px;
background-color: white;
}
ul#album-fotos li#foto01:hover {
background-position: 0px 0px;
background-size: 200px 200px;
}
ul#album-fotos li#foto02 {
background: url("../imagens/galeria-02.jpg") no-repeat;
background-position: 50% 50%;
background-size: 400px 400px;
background-color: white;
}
ul#album-fotos li#foto02:hover {
background-position: 0px 0px;
background-size: 200px 200px;
}
ul#album-fotos li#foto03 {
background: url("../imagens/galeria-03.jpg") no-repeat;
background-position: 50% 50%;
background-size: 400px 400px;
background-color: white;
}
ul#album-fotos li#foto03:hover {
background-position: 0px 0px;
background-size: 200px 200px;
}
ul#album-fotos li#foto04 {
background: url("../imagens/galeria-04.jpg") no-repeat;
background-position: 50% 50%;
background-size: 400px 400px;
background-color: white;
}
ul#album-fotos li#foto04:hover {
background-position: 0px 0px;
background-size: 200px 200px;
}
ul#album-fotos li#foto05 {
background: url("../imagens/galeria-05.jpg") no-repeat;
background-position: 50% 50%;
background-size: 400px 400px;
background-color: white;
}
ul#album-fotos li#foto05:hover {
background-position: 0px 0px;
background-size: 200px 200px;
}
ul#album-fotos li#foto06 {
background: url("../imagens/galeria-06.jpg") no-repeat;
background-position: 50% 50%;
background-size: 400px 400px;
background-color: white;
}
ul#album-fotos li#foto06:hover {
background-position: 0px 0px;
background-size: 200px 200px;
}
As tags spans (que são "vazias") nesse caso é usado para esconder o texto temporariamente, como podem ver no CSS acima.
Para colocar áudio e vídeo em HTML, você usa a tags audio e video, respectivamente, com os atributos, que são o controls (que exibe os controles), o autoplay (que inicia a reprodução automaticamente), o muted (inicia sem som) e o loop (que faz ele reproduzir novamente desde o início, ao final da execução).
O caminho do áudio ou vídeo é colocado numa tag source (sem fechamento), dentro das tags audio ou video, dessa forma:
<audio id="musica" controls>
<source src="media/audio.mp3" type="audio/mpeg"/>
<source src="media/audio.ogg" type="audio/ogg"/>
<p>Não é possível reproduzir o áudio!</p>
</audio>
PS: A ordem dos source tem influência, ele vai tentar o primeiro, depois o segundo e assim por diante, por isso é recomendado usar do menor ao maior, em MB. Lembrando que quanto mais pesados os arquivos de áudio e vídeo, mais tráfego terá no seu servidor.
No exemplo acima, apenas um dos arquivos será carregado no navegador, no caso será o formato que o navegador reconhecerá melhor. E tem também um texto alternativo para caso nenhum seja reconhecido. Mas no geral, o MP3 pra áudios e MP4 pra vídeos costuma ser aceitos por todos os navegadores atualizados.
Se tiver um único arquivo, podemos colocar diretamente na tag audio ou video o src, assim:
<audio id="musica" src="media/audio.mp3" controls>
<p>Não é possível reproduzir o áudio!</p>
</audio>
Só que essa forma não é recomendada porque nem sempre os arquivos são compatíveis com 100% dos navegadores.
Dentro das tags videos, é possível colocar uma imagem personalizada como miniatura do vídeo com o atributo poster, dessa forma:
<video id="filme" controls poster="imagens/mini-video.jpg">
<source src="media/video.mp4" type="video/mp4"/>
<source src="media/video.ogv" type="video/ogg"/>
<p>Não é possível reproduzir o vídeo!</p>
</video>
PS: Os parâmetros width e height podem ser usados em tags video. E o width em audio. Mas é melhor usar o CSS para dimensionar eles.
O parâmetro preload define que o arquivo será carregado enquanto a página é lida (o padrão é o auto, que só termina de carregar junto com o site, metadata carrega apenas dados do arquivo e none não carrega nada, mas é ignorado caso o autoplay esteja definido).
Esses são os parâmetros para os formatos de arquivos de áudio e vídeo suportados pelo HTML5:
Para áudio:
| Extensão | Parâmetro |
|---|---|
| MP3 | audio/mpeg |
| WAV | audio/wav |
| OGG | audio/ogg |
Para vídeo:
| Extensão | Parâmetro |
|---|---|
| MP4 | video/mp4 |
| M4V | video/mp4 |
| WEBM | video/webm |
| OGV | video/ogg |
Você também pode colocar um plano de fundo para áudios e vídeos, colocando tudo dentro de uma div com uma id pré-definida, nessa forma:
<div id="tv-radio">
<video id="filme" controls poster="imagens/mini-video.jpg">
<source src="media/video.mp4" type="video/mp4"/>
<source src="media/video.ogv" type="video/ogg"/>
<p>Não é possível reproduzir o vídeo!</p>
</video>
<audio id="musica" controls>
<source src="media/audio.mp3" type="audio/mpeg"/>
<source src="media/audio.ogg" type="audio/ogg"/>
<p>Não é possível reproduzir o áudio!</p>
</audio>
</div>
Para ajustar o background e a posição do vídeo e controles do áudio acima, usamos CSS, dessa forma:
div#tv-radio {
width: 900px;
height: 580px;
margin: auto;
background: url("../imagens/radio-tv.png") no-repeat;
}
audio#musica {
display: block;
position: relative;
left: 575px;
top: 500px;
width: 300px;
}
video#filme {
display: block;
position: relative;
left: 90px;
top: 80px;
width: 440px;
}
Para colocar aplicações chamadas por plugins, como aplicações flash, fazemos assim:
<embed src="arquivoflash.swf" type="application/x-shockwave-flash" width="640" height="480"/>
Para criar bordas em letras, faça assim no CSS:
h1 {
color: white;
text-shadow: 1px -1px black, -1px 1px black, 1px 1px black, -1px -1px black;
}
Para criar bordas maiores, basta seguir a proporção (2px -2px, por exemplo).
Para abreviações, cujo conteúdo completo aparece ao colocar o mouse em cima dele, usamos o abbr, assim:
<p>Aprendendo a codificar em <abbr title="Hypertext Markup Language (Linguagem de Marcação de Hipertexto)">HTML</abbr></p>
De forma parecida, usamos o dfn, que deixa o conteúdo em itálico inclusive:
<p><dfn title="Hypertext Markup Language">HTML</dfn> é uma linguagem de marcação utilizada em páginas na web.</p>
<p><dfn title="Cascading Style Sheets">CSS</dfn> é uma linguagem de estilos que define a formatação e estilos de tags HTML.</p>
Para informações de contato, usamos a tag address, assim:
<address>
As informações de contato são:<br/>
E-mail: <a href="mailto:contato@dicasdeti.com.br">contato@dicasdeti.com.br</a><br/>
Telefone: (01) 2345-6789
</address>
A tag base especifica um link base para links (como os usados em a), e é usada dentro do head, e só pode ser usada uma vez, assim:
<head>
<meta charset="UTF-8"/>
<title>Título da Página em HTML</title>
<base href="http://localhost/DicasDeTI/"/>
</head>
Para inverter direção de textos, usamos a tag bdo, assim:
<p><bdo dir="rtl">Socorram-me, subi no ônibus em Marrocos.</bdo></p>
<!-- Para inverter usamos o parâmetro "rtl" (Right to Left), para a direção padrão é "ltr" -->
Para citações longas usamos a tag blockquote, e pra curtas a tag q, e podemos destacar citações com a tag cite, assim:
<!-- Citação longa: -->
<blockquote cite="http://localhost/DicasDeTI">
<p>Isso é uma citação longa sobre o exemplo da tag blockquote.</p>
<p>Mais informações pesquise sobre <cite>blockquote</cite>.</p>
</blockquote>
<!-- Citação curta: -->
<p>Isso é uma citação curta sobre o exemplo da tag <q cite="https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/q">q</q>.</p>
Use a tag q ao invés de simplesmente aspas, por ter um significado semântico, mesmo se não tiver o parâmetro cite.
Além da tag input, podemos criar botões usando a tag button, assim:
<button name="botao">Texto do Botão</button>
Podemos usar a tag interativa details junto com summary para mostrar mais detalhes sobre algo, assim:
<details>
<summary>Detalhes sobre a tag details:</summary>
<p>Acesse o link: <a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/details" target="_blank">https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/details</a></p>
</details>
Para englobar uma lista de pares de termos e descrições (como uma lista ordenada tipo "dicionário"), usamos a tag dl em conjunto com a dt e dd, assim:
<dl>
<dt>HTML</dt>
<dd>HTML é uma linguagem de marcação utilizada em páginas na web.</dd>
<dt>CSS</dt>
<dd>CSS é uma linguagem de estilos que define a formatação e estilos de tags HTML.</dd>
</dl>
Podemos usar a tag kbd para mostrar determinadas palavras, como no exemplo abaixo que é pra mostrar como salvar uma página do site:
<p>Para salvar o site nos seus favoritos utilize <kbd>Ctrl D</kbd>.</p>
Para destacar parte do texto, podemos usar a tag mark assim:
<p>O texto tem uma parte destacada <mark>que é essa</mark>!</p>
Podemos usar a tag meta, em head, para redirecionar páginas, por exemplo:
<head>
<meta charset="UTF-8"/>
<!-- Redireciona após 3 segundos: -->
<meta http-equiv="refresh" content="3;url=https://www.google.com.br/">
<title>Título da Página em HTML</title>
</head>
Para criar medidores, usamos o meter, assim:
Temperatura atual:<br/>
<meter min="-50" max="50" low="22" high="25" value="22">°C</meter>22°C
<hr/>
Mínima:<br/>
<meter min="-50" max="50" low="22" high="25" value="20">°C</meter>20°C
<hr/>
Máxima:<br/>
<meter min="-50" max="50" low="22" high="25" value="26">°C</meter>26°C
Para criar barras de progressão, usamos a tag progress, assim:
<progress value="70" max="100">70%</progress>
Para, por exemplo, mostrarmos traduções de caracteres diferentes, podemos usar as tags ruby e rt, usadas para exibir os caracteres 漢
e 字
:
<ruby>
漢<rp>(</rp><rt>Kan</rt><rp>)</rp>
字<rp>(</rp><rt>Ji</rt><rp>)</rp>
</ruby>
Podemos utilizar o samp para representar uma saída de um código, assim:
<p>A saída do código será essa:</p>
<p><samp>Hello World!</samp></p>
A tag small permite criar trechos de texto pequenos, assim:
<p>Isso é uma frase com fonte normal <small>e isso é com uma fonte pequena.</small></p>
<p>Ela pode ser combinada com outras tags para gerar resultados como 10<sup><small>3</small></sup> e H<sub><small>2</small></sub>0.</p>
Podemos criar um efeito de animação em botões, crie esse botão abaixo:
<button class="botao"><span>Clique Aqui!</span></button>
E esse código em CSS para o efeito:
.botao {
border-radius: 15px;
background-color: #5511ff;
border: none;
color: white;
text-align: center;
font-size: 14pt;
padding: 15px;
width: 200px;
cursor: pointer;
margin: 5px;
transition: all .5s;
}
.botao span {
display: inline-block;
position: relative;
transition: all .5s;
}
.botao span:after {
content: "\00bb";
position: absolute;
opacity: 0;
top: 0px;
right: -10px;
transition: all .5s;
}
.botao:hover span {
padding-right: 25px;
}
.botao:hover span:after {
opacity: 1;
right: 2px;
}
A tag time pode ser usada assim:
<p>O horário da reunião é <time>20:00</time>.</p>
<p>O dia do evento é <time datetime="2023-06-01 14:00">1º de junho</time>.</p>
Para criar versões diferentes de sites para impressora, podemos linkar o CSS assim, onde o padrão de media é all para todos, print para impressão, e screen para somente o site. Veja como usar:
<link rel="stylesheet" href="css/estilo.css" media="screen"/>
<link rel="stylesheet" href="css/impressora.css" media="print"/>
Aí no CSS da impressora, podemos colocar, por exemplo, uma fonte serifada (que é melhor pra leitura no papel), e ocultar coisas como links e menus. Por exemplo:
* {
margin: 10px;
padding: 10px;
}
html {
font-family: "Courier New", Courier, monospace;
font-size: 1.5em;
line-height: 1.5em;
}
ul, footer {
display: none;
}
Para separar em retrato (em pé) e paisagem (deitado), como por exemplo para celulares, podemos fazer assim:
<link rel="stylesheet" href="css/retrato.css" media="screen and (orientation: portrait)"/>
<link rel="stylesheet" href="css/paisagem.css" media="screen and (orientation: landscape)"/>
Isso é útil, para, por exemplo, ter imagens de fundo de tamanho certinho pra cada tipo de tela. Veja um exemplo para a paisagem:
body {
background-image: url("../imagens/paisagem.jpg");
background-position: left bottom;
}
PS: No caso acima, pode ser necessário usar outras opções como center bottom.
Podemos também criar um CSS específico para cada caso também, por exemplo:
@media print {
/* As outras configurações ficam aqui */
ul {
display: none;
}
}
@media screen and (orientation: portrait) {
}
@media screen and (orientation: landscape) {
}
Podemos configurar uma tela padrão para cada tipo de tela, como por exemplo:
@media print { /* Impressão /*
}
@media screen and (max-width: 768px) { /* Podemos configurar um CSS padrão para mobile e colocar para outros tipos de tela aqui */
}
@media screen and (min-width: 768px) and (max-width: 992px) { /* Tablet */
}
Outro exemplo:
@media print {
body {
background-image: none;
}
img#print {
display: block;
}
}
@media screen and (max-width: 768px) {
body {
background-image: url("../imagens/back-phone.jpg");
}
img#phone {
display: block;
}
}
-----------------------------------------
Para fazer um menu responsivo:
<nav id="menu">
<h1>Menu</h1>
<ul>
<li><a href="#">Opção 1</a></li>
<li><a href="#">Opção 2</a></li>
<li><a href="#">Opção 3</a></li>
<li><a href="#">Opção 4</a></li>
<li><a href="#">Opção 5</a></li>
</ul>
</nav>
Para colocar o ícone de "hamburguinho" do site de fontes da Google:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
Acima do nav colocamos isso:
<span id="burger" class="material-icons" onclick="clickMenu()">menu</span>
CSS do código acima:
* {
margin: 0px;
padding: 0px;
}
main {
width: 90%;
margin: auto;
max-width: 1000px;
}
header {
background-color: gray;
}
header > h1 {
padding: 10px;
text-align: center;
}
nav#menu {
display: block;
}
nav#menu > ul {
list-style-type: none;
}
nav#menu > ul > li > a {
display: block;
padding: 10px;
margin: 0px;
text-decoration: none;
text-align: center;
color: white;
background-color: rgb(87, 87, 87);
}
nav#menu > ul > li:hover > a {
background-color: gray;
}
span#burger {
background-color: rgb(48, 48, 48);
display: block;
color: white;
text-align: center;
padding: 10px;
cursor: pointer;
}
span#burger:hover {
background-color: white;
color: black;
}
E nesse caso precisaremos usar Javascript:
function clickMenu() {
if(menu.style.display == "block") {
menu.style.display = "none";
}
else {
menu.style.display = "block";
}
}
Para ele ficar diferente em telas menores e maiores, faça assim:
/* Atenção que é min e não max */
@media screen and (min-width: 768px) {
span#burger {
display: none;
}
nav#menu > ul {
display: block;
}
nav#menu > ul > li {
display: inline-block;
}
}
E na tag body, coloque o evento onresize, assim:
<body onresize="mudouTam()">
Com essa função em Javascript:
function mudouTam() {
if(innerWidth >= 768) { // parâmetro do objeto window
menu.style.display = "block";
}
else {
menu.style.display = "none";
}
}