Tudo sobre Tecnologia da Informação
Dicas de HTML5 Parte 2
Para colocar uma imagem, fazemos assim:
<img src="imagens/linkdaimagem.png" alt="Texto da Imagem"/>
O Alt da tag img e de outras tags, é lido por leitores de tela, e ele aparece quando a imagem não é carregada, no caso da tag img.
Para que imagens de tamanhos diferentes sejam exibidas ao diminuir e aumentar o tamanho da janela do navegador, faça assim, com a tag picture:
<picture>
<source media="(max-width: 750px)" srcset="imagens/peq.png" type="image/png"/>
<source media="(max-width: 1000px)" srcset="imagens/med.png" type="image/png"/>
<img src="imagens/gran.png" alt="Imagem"/>
</picture>
No caso acima, a imagem da tag img é carregada por padrão, mas se a largura da janela for menor que 1000px, vai carregar a imagem definida em source.
PS: O ideal é o max-width ser um pouquinho mais que que o tamanho da imagem definida no mesmo source. Podemos colocar outros parâmetros como min-height, por exemplo. E também coloque o source da menor imagem primeiro, depois as maiores.
Os MIME Types usados são esses:
| Extensão | Parâmetro |
|---|---|
| JPEG/JPG | image/jpeg |
| PNG | image/png |
| GIF | image/gif |
Para fazer um site responsivo, que adapta a qualquer tela, basicamente fazemos assim:
body {
background-color: gray;
}
main {
background-color: white;
border-radius: 10px;
padding: 20px;
width: 85%;
min-width: 240px;
max-width: 800px;
margin: auto;
}
img {
display: block;
margin: auto;
width: 100%;
}
img.pequena {
max-width: 350px;
display: block;
margin: auto;
}
PS: O ideal é usar a tag picture para carregar fotos menores. E basicamente usamos o max e o min no width ou no height para tornar ele adaptável aos dispositivos. Alguns elementos se adaptam automaticamente ao colocar o width como 100%.
Podemos usar o figure e o figcaption para colocar legendas em fotos, assim:
<figure class="foto-leg">
<img src="imagens/windows-7.png" id="fig-ex"/>
<figcaption>
<h3>Windows 7</h3>
<p>Microsoft</p>
</figcaption>
</figure>
O código acima ficaria assim:
Windows 7
Microsoft
Para formatar a imagem acima em CSS, usamos esses códigos:
figure.foto-leg {
position: relative;
border: 8px solid white;
box-shadow: 1px 1px 4px black;
max-width: 400px; /* Esse define o tamanho da borda. */
max-height: 250px; /* Esse define o tamanho da borda. */
}
figure.foto-leg img {
width: 100%; /* Esse define o tamanho da imagem. */
height: 100%; /* Esse define o tamanho da imagem. */
}
figure.foto-leg figcaption {
opacity: 0;
position: absolute;
top: 0px;
background-color: rgba(0, 0, 0, 0.4);
color: white;
width: 100%; /* Esse define o tamanho do fundo da legenda. */
height: 100%; /* Esse define o tamanho do fundo da legenda. */
padding: 10px;
box-sizing: border-box;
transition: opacity 1s;
}
figure.foto-leg:hover figcaption {
opacity: 1;
}
O parâmetro relative é importante pra definir o espaço que a legenda ficará (pois ele ficará dentro de um container), senão caso você use absolute no figcaption, ele pode sair do espaço pré-definido (absolute deixa ele livre pelo site). Isso vale para tudo, num site em HTML5.
PS: Podemos usar outras bordas além do solid, como por exemplo:
As formatações com o figcaption é pra formatar a legenda da foto e a transição da mesma.
Veja a diferença entre position relative e absolute com esse exemplo:
section#container {
position: relative;
height: 500px;
padding: 10px;
background-color: purple;
}
article#conteudo {
position: absolute;
height: 200px;
width: 400px;
background-color: yellow;
left: 50%; /* pode ser porcentagem, como 50%, a referência é o superior esquerdo */
top: 50%;
transform: translate(-50%, -50%); /* Isso é pra fazer pequenos ajustes, no caso, centralizar */
}
As listas ordenadas podem ser definidas por tipos de ordenação, com parâmetro type, 1 para números, a para letras minúsculas, A para letras maiúsculas e I para números romanos. O parâmetro start é para definir o início do primeiro item e se define por números (independente do tipo, se for letra ou número romano também se define com 1, 2, 3, etc.), veja um exemplo:
<ol type="I" start="10">
<li>Item 10.</li>
<li>Item 11.</li>
<li>Item 12.</li>
</ol>
O parâmetro type pode ser usado nas listas não-ordenadas, mas para definir se do lado terá bolinhas, quadrados, nada, etc. (com os parâmetros disc, circle, square e none).
Em ambos os casos, o type pode ser definido em CSS também, com o parâmetro list-style-type.
PS: Podemos colocar listas dentro de listas também, como por exemplo:
<ul>
<li>Lista de Items:</li>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
</ul>
Quando colocamos listas dentro de listas, cada ol ou ul é independente.
O nav pode ser configurado assim, para criar um menu flutuante:
Em HTML5:
<nav id="menu">
<h1>Menu Principal</h1>
<ul>
<li><a href="index.html">Página Inicial</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</nav>
CSS referente ao nav acima:
nav#menu ul {
list-style-type: none;
text-transform: uppercase;
position: absolute;
top: -20px;
left: 300px;
}
nav#menu li {
display: inline-block;
background-color: #dddddd;
padding: 10px;
margin: 2px;
transition: background-color 1s;
}
nav#menu li:hover {
background-color: #606060;
}
nav#menu h1 {
display: none;
}
nav#menu a {
color: black;
text-decoration: none;
}
nav#menu a:hover {
color: white;
text-decoration: underline;
}
Lembrando que o parâmetro padding é um espaçamento interno, e o margin é um externo. Podemos colocar margin como auto para centralizar um conteúdo.
Alguns parâmetros de transformação de texto que podemos usar em text-transform são none, capitalize, uppercase e lowercase.
O display define os tipos de exibição interno e externo de um elemento, podendo ser block (lado a lado centralizado), inline-block (lado a lado centralizado, mas ocupando apenas a largura dos elementos juntos), none (nada é exibido), flex (lado a lado do lado esquerdo) e grid (um abaixo do outro).
Com um parâmetro dentro de uma tag div, você pode delimitar o espaço de um site, entre outras configurações, assim:
div#interface {
width: 800px;
background-color: white;
margin: 10px auto;
box-shadow: 0px 0px 10px black;
padding: 10px;
}
Para definir a configuração das margens, a ordem é cima, direita, baixo e esquerda (ou seja, sentido horário). O auto é pra centralizar de acordo com o navegador. No caso da sombra, a ordem é apenas lateral e vertical, nesse ordem, o terceiro é espalhamento. No caso do padding, você pode colocar só uma vez caso todas as margens sejam iguais, ou usar complementos como left e bottom.
O CSS também pode ser usado para configurar bordas redondas. Fazendo uma DIV quadrada, você pode fazer um círculo com ela, usando o parâmetro border-radius, dessa forma:
div.circulo {
width: 40px;
height: 40px;
border-radius: 100%; /* Resultados com px, tipo 40px, geram resultados diferente das porcentagens */
}
O CSS também pode ser usado para definir posições de imagens:
header#cabecalho img#icone {
position: absolute;
left: 780px;
top: 40px;
}
Assim como na sombra, pra definir posições de imagens também é apenas lateral e vertical, nessa mesma ordem, veja um exemplo de CSS definindo uma imagem e também uma borda inferior:
header#cabecalho {
border-bottom: 1px #606060 solid;
height: 150px;
background: url("../imagens/logo-peq.jpg") no-repeat 0px 100px;
}
Para importar fontes do arquivo do site para o CSS, você usa o parâmetro assim:
@font-face {
font-family: "FonteLogo";
src: url("../fonts/bubblegum-sans-regular.otf");
}
Ao colocar fontes importadas no CSS, você pode escolher qualquer nome, mas deverá sempre escrever entre aspas, dessa forma:
header#cabecalho h1 {
font-family: "FonteLogo", sans-serif;
font-size: 30pt;
color: #606060;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .6);
padding: 0px;
margin-bottom: 0px;
}
O Google também tem um site de fontes, que você pode visitar clicando aqui. Nele, você pode importar da URL ou mesmo baixar para usar no seu site ou instalar. Só procurar as opções de importação, e em CSS, e usar da mesma forma acima, como podem ver:
@import url("https://fonts.googleapis.com/css?family=Titillium+Web");
Para dividir as áreas do site, usamos as tags section e aside, veja um exemplo de como dividir em áreas esquerda e direita:
<section id="corpo">
<h1>Isso é principal e ficará a esquerda!</h1>
</section>
<aside id="lateral">
<h1>Isso ficará a direita!</h1>
</aside>
<footer id="rodape">
<h1>Isso ficará embaixo pra não encavalar o layout do site.</h1>
</footer>
O CSS deverá ser configurado também, para funcionar, dessa forma:
section#corpo {
display: block;
width: 500px;
float: left;
border-right: 1px solid black;
padding-right: 15px;
}
aside#lateral {
display: block;
width: 350px;
float: right;
}
footer#rodape {
clear: both;
border-top: 1px solid black;
}
footer#rodape p {
text-align: center;
}
PS: Lembre-se de configurar o footer com o parâmetro clear, para não bagunçar o layout do site.
O text-align ajusta o texto na horizontal (com os parâmetros left, center e right). O vertical-align ajusta na vertical, obviamente (com os parâmetros top, middle e bottom).
Você pode configurar as tags dentros de uma tag article usando CSS, dessa forma:
<article id="noticias">
<h2>Isso será formatado!</h2>
<p>Isso não!</p>
<p>Nem isso!</p>
</article>
Estilo do código acima:
article#noticias h2 {
font-size: 12pt;
color: #606060;
background-color: #dddddd;
padding: 5px 0px 5px 10px;
margin: 10px 0px 10px 0px;
}
PS: Você pode usar um header dentro do article também, para fazer formatações diferentes dentro do mesmo, pra determinadas tags.
Dentro de uma tag img, é recomendável usar o atributo alt, que ajuda nos mecanismos de busca (como o Google), mas não aparece nada ao passar o mouse em cima, a palavra só aparece caso a imagem não carregue. Para aparecer textos, usamos o parâmetro title, da mesma forma. Veja os exemplos:
Assim não aparece nada ao passar o mouse:
<img src="imagens/fundo.jpg" alt="Exemplo"/>
Assim aparece o texto ao passar o mouse:
<img src="imagens/fundo.jpg" title="Exemplo"/>
PS: Se as imagens estão dentro das tags figure, não há necessidade de usar tais parâmetros.
Você pode exibir dois documentos HTML numa só página, a segunda página, exibida num frame separado pode ter suas próprias configurações.
Para usar as tags iframe, você deve utilizar um name nelas, caso sejam pra exibir outras páginas. Para Youtube, apenas deve usar o atributo frameborder para tirar as bordas e, caso queira permitir tela cheia, o atributo allowfullscreen.
Esse é um exemplo básico para exibir vídeos do Youtube (alguns parâmetros podem ser removidos e definidos em CSS):
<iframe width="560" height="315" src="https://www.youtube.com/embed/WRcs8rebZtA" frameborder="0" allowfullscreen></iframe>
PS: O CSS tem prioridade em relação aos parâmetros como frameborder e width
Podemos fazer assim para um vídeo responsivo:
div.youtube {
margin: 0px -20px 30px -20px;
padding: 20px;
padding-bottom: 50%;
position: relative;
}
div.youtube iframe {
position: absolute;
top: 5%;
left: 5%;
width: 90%;
height: 90%;
border: none;
}
Como vimos, para remover bordas, é recomendável usar o CSS pra isso na página principal, dessa forma:
section#conteudo {
width: 1000px;
margin: auto;
}
iframe#frame-spec {
width: 430px;
height: 280px;
border: none;
}
iframe#frame-spec::-webkit-scrollbar {
display: none;
}
Para remover as barras de rolagem de um frame e impedir a rolagem do mesmo, você usa o parâmetro overflow: hidden; dentro da página CSS exclusiva do iframe a ser exibido, assim:
body {
font-family: Arial;
font-size: 10pt;
overflow: hidden;
}
PS: O parâmetro scrolling="no" está descontinuado no HTML5.
Lembrando que colocar sites dentro de iframes nem sempre funcionam, então podemos colocar uma mensagem assim:
<iframe src="frame.html" name="frame">
<!-- Isso só aparece quando o navegador não é compatível -->
<p>O seu navegador não é compatível com o iframe.</p>
</iframe>
Podemos configurar várias páginas a serem abertas no iframe, basta colocar o target (alvo) com o name do iframe, assim como parar a página num local especificado por uma id:
<p><a href="frame.html#artigo" target="frame">Clique Aqui</a></p>
PS: Podemos colocar um parâmetro srcdoc que inclusive permite HTML, para colocarmos uma frase padrão, por exemplo:
<iframe srcdoc="<h1>Escolha uma Opção Acima</h1>">
</iframe>
PS: Podemos colocar a opção sandbox e referrerpolicy para tornar eles mais seguros, principalmente com formulários, para evitar que eles não seja usados por atacantes dentros dos iframes. Basta colocar assim:
<iframe sandbox="sandbox" referrerpolicy="no-referrer">
</iframe>
Mas para permitir o formulário com segurança, podemos fazer assim:
sandbox="allow-same-origin allow-forms allow-scripts"
No caso acima, ele só permitirá formulários do próprio site, e permitirá o Javascript também do próprio site, impedindo interações externas.
PS: Indo em Google Maps ou no Waze e indo em compartilhar, tem a opção de copiar HTML assim como se faz com os vídeos do Youtube. Também podemos adicionar documentos do Google Docs, como planilhas e apresentações.
Para criar degradês fixos no background, usamos assim:
body {
background-image: linear-gradient(to right, white, blue);
background-attachment: fixed;
}
PS: Uma das opções de cores
pode ser transparent.
Podemos colocar também ao invés de to right/left/top/botton, colocamos algo como 90deg (até 360). Podemos colocar várias cores (no mínimo 2), divididas por vírgulas, para contraste maior. Também podemos colocar logo após as cores a porcentagem de cor, separada por um espaço.
Para gradiente circular, colocamos no lugar do linear-gradient, o radial-gradient, assim:
background-image: radial-gradient(circle, blue, green, red);
Caso não cubra a página toda, coloque a configuração global do CSS como 100%, assim:
* {
height: 100%;
}
Podemos criar degradês em bordas também, por exemplo:
#borda {
border: 8px solid;
border-image: linear-gradient(135deg, red 0%, blue 90%) 1; /* Não esqueça do 1 */
}
PS: Isso não funciona em bordas arredondadas com border-radius.