Tudo sobre Tecnologia da Informação

Dicas de HTML5 Parte 1

Essa é a estrutura básica de uma página HTML5, sendo o DOCTYPE uma tag identificadora da versão do HTML (no caso, o HTML5):


<!DOCTYPE html>
<html lang="pt-br">
    <head>
    
    </head>
    <body>
    
    </body>
</html>

Para linkar favicons no HTML, usamos a tag link, que também é usada para linkar conteúdo CSS na página. Para anexar conteúdo Javascript usamos a tag script. Para colocar título, use a tag title, e para corrigir erros de acentuação, use a tag meta, assim:


<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8"/>
        <title>Título da Página em HTML</title>
        <link rel="icon" href="imagens/favicon.ico"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <link rel="stylesheet" href="css/estilo.css"/>
        <script src="javascript/funcoes.js"></script>
    </head>
    <body>
        <!--
            O restante do conteúdo se coloca dentro da tag body
        -->
    </body>
</html>

A tag meta também é utilizada para outras configurações, como a viewport, que define se o site ocupará a tela inteira.

E podemos usar CSS e Javascript diretamente no HTML, com as tags style e script, respectivamente:


<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8"/>
        <title>Título da Página em HTML</title>
        <link rel="icon" href="imagens/favicon.ico"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <style>
            /* Isso é código CSS (comentários em CSS são feitos usando barra e asterisco) */

            body {
                font-family: Arial, sans-serif;
                color: white;
                background: url("imagens/fundo.png") center fixed repeat;
                background-color: black;
            }
        </style>
        <script>
            alert("Isso é um código em Javascript!");

            // Dependendo do caso, a tag script pode ficar em body também
        </script>
    </head>
    <body>
        <!-- Essa tag abaixo só é exibida com o Javascript desativado: -->
        <noscript>
            Ative o Javascript do seu navegador!
        </noscript>
        <h1>Olá Mundo!</h1>
        <h2>Primeiros passos em HTML5</h2>

        <p>PS: HTML <strong>não</strong> é linguagem de programação, nem CSS!</p>
        <script>
            document.write("Mas Javascript é!");
        </script>
    </body>
</html>

Quando o arquivo a ser chamado está na mesma pasta que o HTML, basta chamar ele diretamente pelo nome, como "arquivo.png". Se ele tiver em outra pasta dentro do diretório do HTML, coloque "nomedapasta/arquivo.png". Se ele estiver em uma pasta anterior, use dois pontos pra voltar uma pasta, como "../arquivo.png". Links externos são colocados diretamente, como "https://dominio.com/arquivo.png". Isso vale pra tudo, documentos, URLs, imagens, multimídia, etc.

Vejam as principais tags de HTML5, que podem ser úteis:


<html></html> - Define o início do documento HTML, todos as demais tags devem estar dentro desta tag.
<head></head> - É o cabeçalho onde ficar os metadados do documento, como metatags, CSS e Javascript.
<meta/> - São as metatags, como charset, description, viewport ou keywords.
<link/> - Utilizado para linkar um arquivo de imagem ou CSS a página HTML.
<title></title> - Define o título do documento, mostrado na barra de títulos do navegador e como link nos mecanismos de busca.
<script></script> - É utilizado para escrever ou anexar um arquivo normalmente Javascript a página.
<style></style> - É utilizada para adicionar um código CSS a página.
<body></body> - É o corpo ou área principal do documento, dentro deste deve ficar o conteúdo da sua página.
<main></main> - Conteúdo principal da página.
<header></header> - Para agrupar conteúdo num cabeçalho (não necessariamente só no cabeçalho principal do site).
<h1></h1> - Representam níveis de títulos, sendo o h1 de maior importância, vai até o h6 (não confundir com letra grande e eles não precisam seguir uma ordem numérica).
<p></p> - Define um parágrafo.
<b></b> - Deixa o texto em negrito (para textos em destaque use <strong></strong>).
<i></i> - Deixa o texto em itálico (para textos em ênfase use <em></em>).
<del></del> - Para riscar palavras (mostrar conteúdo excluído).
<ins></ins> - Para sublinhar palavras (mostrar conteúdo incluído).
<br/> - Define uma quebra de linha.
<a></a> - Define um link que deve ser apontado com o atributo href.
<img/> - Define a utilização de uma imagem (JPG, GIF, PNG e outras). A imagem deve ser apontada com o uso do atributo src.
<!-- --> - Para comentários (que não aparecem no documento).
<wbr/> - Para forçar quebra de linha ao ajustar palavras compostas sem criar hífens.
<hr/> - Para criar uma linha.
<span></span> - Na verdade é uma tag "vazia", que pode ter funções implementadas.
<div></div> - Também uma tag "vazia", mais usada em blocos.
<pre></pre> - Usada para pré-formatar textos.
<code></code> - Para exibir códigos, usada geralmente em conjunto com a tag pre.
<var></var> - Mesmo caso da tag code.
<sup></sup> - Para o texto ficar sobreescrito.
<sub></sub> - Para o texto ficar sub-escrito.
<nav></nav> - Para definir menus de navegação (inclusive menus flutuantes).
<ol></ol> - Para listas ordenadas.
<ul></ul> - Para listas não ordenadas.
<li></li> - Para definir cada item de listas.
<section></section> - Para definir uma área principal, caso haja divisões de sessões no site.
<aside></aside> - Para definir uma área secundária (como uma lateral).
<footer></footer> - Para agrupar conteúdo no rodapé.
<table></table> - Para Definir Tabelas.
<caption></caption> - Para identificar uma tabela (fora do quadro, mas dentro das tags table).
<article></article> - Para separar artigos em sessões (usa dentro das tags section).
<iframe></iframe> - Para exibir outras páginas em janelas separadas, muito usada também para vídeo do Youtube.
<map></map> - Para definir mapas de sites (dentro de tags section).
<area/> - Para definir as coordenadas de um mapa (usada dentro de tags maps).
<embed/> - Usada para colocar conteúdos chamados por plugins, como aplicações Flash.
<audio></audio> - Para exibir um arquivo de áudio em um formato como MP3 ou OGG.
<video></video> - Para exibir um arquivo de vídeo em um formato como MP4 ou WEBM.
<form></form> - Para criar formulários.
<input/> - Para definir campos, botões e outros componentes em formulários.
<fieldset></fieldset> - Usado para agrupar elementos dentro de um formulário, por exemplo.
<legend></legend> - Para colocar uma legenda num fieldset.

O span é usado como o div, mas o div é para um bloco, e span para uma linha), mas pode ser usada, por exemplo, para formatar textos com CSS (pode ser usada dentro da TAG, algo como <span style="text-decoration: underline">).

Evite o uso excessivo de tags br para espaçamento, use o CSS para isso. E também lembre-se que espaços com Enter não querem dizer nada pro HTML, nem espaços normais.

PS: Existem algumas tags que estão obsoletas em HTML5, veja elas aqui: https://www.w3.org/TR/2010/WD-html5-20100304/obsolete.html

Apesar de algumas delas ainda funcionarem por compatibilidade, elas pararão de funcionar com o tempo. No lugar delas, é recomendado usar o CSS com tags span, poucas tags foram substituídas. Algumas das tags obsoletas são essas:


basefont
big
center
font
strike
tt

Parâmetros como bgcolor, color, align e font (além da tag font) estão depreciadas e não devem ser usadas em HTML5, já que este foca apenas na semântica, a parte visual é totalmente configurada por CSS. Os únicos parâmetros ainda existentes em HTML5 são o width e o height, mas é preferível usar o CSS também.

Veja aqui as tags e parâmetros depreciados no HTML5: https://www.devmedia.com.br/tags-e-atributos-depreciados-na-html/28042

Para usar CSS, podemos usar estilo local em determinada tag usando o parâmetro style (sendo recomendada para pequenas configurações em tags específicas). O mais recomendado é usar arquivos CSS externos ou usando a tag style para configurar estilos.

Usando a tag style ou arquivos CSS (coloque no head a tag <link rel="stylesheet" href="css/estilo.css"/>):


@charset "UTF-8"; /* Coloque apenas em arquivos CSS separados, para compatibilidade de acentuação. */

h1 {
    font-family: Arial, sans-serif;
    font-size: 30pt;
    color: black;
}

PS: Para todo o documento, podemos colocar *, ou a tag html em si.

Estilo local (inline):


<h1 style="font-family: Arial, sans-serif; color: blue">Título da Página</h1>

PS: O @charset é uma regra CSS para corrigir acentuações. Existem outras como a @font-face e a @import. E os comentários em CSS devem estar entre as /* */, independente da quantidade de linhas destes.

Uma mesma página pode ter vários links de estilos e de scripts, assim como tags referentes aos mesmos, só tome cuidado para não conflitar algum deles.

As prioridades de estilos são nessa ordem: Inline, tag style e arquivo CSS externo.

As tags frame, frameset e noframes foram retiradas por prejudicar a navegação e usabilidade.

E essas tags foram substituídas:

Lembre-se também das diferenças entre href e src:

O href é a referencia de um link, para onde ele aponta. Já o src é o arquivo fonte com alguma informação.

Veja alguns símbolos especiais:


&nbsp; =   (Espaço "não-quebrável").
&amp; = & (E Comercial).
&shy; = ­ (Para forçar quebra de linha ao ajustar palavras compostas, criando hífens ao quebrar).
&quot; = " (Aspas Duplas).
&lt; = < (Menor).
&gt; = > (Maior).
&le; = ≤ (Menor ou Igual).
&ge; = ≥ (Maior ou Igual).
&pound; = £ (Libra).
&yen; = ¥ (Ien).
&euro; = € (Euro).
&copy; = © (Copyright).
&cent; = ¢ (Centavos).
&delta; = δ (Delta).
&reg; = ® (Marca Registrada).
&trade; = ™ (Trademark).
&permil; = ‰ (Por Mil).
&lambda; = λ (Lambda).
&radic; = √ (Raiz Quadrada).
&frac12; = ½ (Meio).
&frac34; = ¾ (Três Quartos).
&infin; = ∞ (Infinito).
&plusmn; = ± (Mais ou Menos).
&ne; = ≠ (Não Igual).
&times; = × (Vezes).
&divide; = ÷ (Divisão).
&pi; = π (Pi).
&larr; = ← (Seta pra Esquerda).
&rarr; = → (Seta pra Direita).
&uarr; = ↑ (Seta pra Cima).
&darr; = ↓ (Seta pra Baixo).
&spades; = ♠ (Espadas).
&clubs; = ♣ (Paus).
&hearts; = ♥ (Copas).
&diams; = ♦ (Ouros).

Alguns desses símbolos ficam diferentes se a inicial foi maiúscula, como por exemplo, as setas. Podemos ver outros símbolos aqui nesse link: https://pt.wikipedia.org/wiki/Ajuda:Caracteres_de_escape

Também podemos usar símbolos HTML para letras acentuadas ou com cedilha, por exemplo:


&aacute; = á
&agrave; = à
&atilde; = ã
&acirc; = â
&uuml; = ü
&ccedil; = ç

PS: Podemos usar outras letras, minúsculas ou maiúsculas, como por exemplo &Eacute; para gerar a letra É e &Otilde; para gerar a letra Õ, claro, dentro das possibilidades, um &Tacute; por exemplo, não funciona.

Para emojis você primeiro vai nesse site: https://emojipedia.org/

Copie o código de "codepoint" (como U+1F596) e escreva assim no HTML: &#x1F596;. Ele resultará o emoji 🖖.

PS: Os emojis não funcionam em todos os navegadores.

Para colocar imagem ou cor de fundo num site, fazemos assim:


body {
    font-family: Arial, sans-serif;
    color: white;
    background: url("imagens/fundo.png") center repeat fixed; /* A ordem é cor, imagem, posição, repetição, tamanho (não funciona em todos os browsers), anexo */
}

O center é para centralizar (podemos usar left, right, top e bottom, ou combinar dois deles como left top, left center ou mesmo center center, na ordem X Y), e podemos também colocar as porcentagens das posições X e Y para posicionar a imagem (como 50% 50%).

O fixed é para fixar a imagem ao rolar a página (para não rolar, basta não colocar ele ou colocar scroll).

O repeat é para definir a repetição da imagem (para não repetir coloque no-repeat, podemos também colocar repeat-x e repeat-y para repetir somente ao lado ou embaixo um do outro).

PS: Para alguns desses componentes da propriedade background, temos propriedades específicas, como background-size, background-position, etc. Veja um exemplo:


body {
    background-color: gray;
    background-image: url("../imagens/fundo.png");
    background-size: 50px 50px;
    background-repeat: no-repeat;
    background-position: left center;
    background-attachment: fixed;
}

PS: O background-size pode ter também a opção cover, que definirá a imagem ocupando toda a tela, independente do tamanho da mesma.

As cores em CSS, podem ser definidas basicamente de três formas:

O tamanho máximo recomendado de uma imagem para o fundo de um site é de 1500 de largura para não ficar muito pesado, com resolução entre 50 e 72, no Gimp.

Além do tamanho, esteja atento a algumas diferenças entre os formatos de imagens mais comuns:

O mais recomendado é usar o JPEG por ocupar menos espaço, mas se a qualidade e a transparência forem necessários use o PNG, e o GIF é melhor para ícones pequenos e simples e também para as famosas animações.

Para criar âncoras de sites externos fazemos assim:


<a href="https://www.google.com.br/" target="_blank" rel="external">Clique Aqui para Abrir o Google!</a>

O rel indica que o link é externo, mas não é obrigatório, já que o que faz o link abrir em nova aba é o target mesmo. Links externos podem ser indicados no rel também com "nofollow", que indica aos indexadores para não seguir essa página.

Para criar links internos, basta usar o caminho dos arquivos html e remover os parâmetros target e rel, assim:


<a href="contato.html">Entre em Contato Conosco!</a>

PS: Atenção as posições das pastas do site, caso existam, que deverão ser indicadas (como noticias/main.html), e para voltar a pasta anterior use dois pontos (como ../index.html).

No entanto, semanticamente, links internos deverão ter o target indicando _self, como por exemplo:


<a href="contato.html" target="_self" rel="next">Entre em Contato Conosco!</a>

Como visto, podemos indicar páginas internas no rel com antes (prev) e depois (next).

Para a tag a redirecionar para a página coloque o link no href como "index.html", se quiser que ele vá para um ponto do documento onde está uma determinada id, coloque "index.html#nomedaid". Se colocar apenas "#" ficará um link sem ação. O href com aspas vazias direciona pra página no qual ele está (página atual) e também pode ter comandos Javascript (precedidos por javascript:, como javascript:void()) e e-mails (precedidos por mailto:, como mailto:teste@teste).

Para link de downloads de PDF, fazemos assim:


<ul>
    <li><a href="files/livro.pdf" download="livro.pdf" type="application/pdf">Baixar o livro em PDF</a></li>
    <li><a href="files/livro.zip" download="livro.zip" type="application/zip">Baixar o livro em ZIP</a></li>
</ul>

PS: O type não é obrigatório, mas forçará o arquivo a ser baixado, assim como o parâmetro download.

Para ver todos os MIME Types, podemos olhar nesse site: https://www.iana.org/assignments/media-types/media-types.xhtml

Em CSS se usa # para formatar IDs específicas, e . para fazer o mesmo com classes, e ainda pode usar : para movimentos de mouse, após o nome da tag em que um deles se localiza, por exemplo:


/* Classes e ids podem ser colocadas sem indicar a tag antes também. */

header#cabecalho {
    
}
input.enviar {
    
}
a:hover {
    
}
a:visited {

}

No caso usamos dessa forma nas tags:


<header id="cabecalho">

</header>

<input class="enviar"/>

No HTML e CSS, as ids só podem ser aplicadas a um único objeto. Para aplicar a vários objetos, usamos classes, como visto no exemplo acima.

PS: Sobre os movimentos do mouse, o hover é para trabalharmos quando movimentarmos o mouse por cima, podemos usar o visited para quando o link já tiver sido visitado, o link para quando antes de clicarmos e o active para o momento de clicarmos. Veja como são usados eles:

Para trabalharmos com cores (usando color para letras e background-color para o fundo), usamos três formas basicamente: Nomes explícitos em inglês (como red, white, gray, green, blue), códigos hexademicais (como #0000ff), e o rgb (como rgb(255, 255, 0), e também tem o rgba para definir a opacidade de 0 a 1, como rgba(255, 255, 0, 0.4)). Os códigos de várias cores podem ser vistos aqui: https://pt.wikipedia.org/wiki/Lista_de_cores

No caso de famílias de letras (font-family), além das fontes padrões como Arial, Cambria e Calibri, podemos importar nossas próprias fontes (algo que será visto posteriormente), e também podemos usar fontes genéricas, apenas indicando os tipos, que no caso são serif, sans-serif, monospace, cursive e fantasy.

Podemos também especificar mais de uma classe no mesmo elemento, para isso, use algo como class="classe1 classe2". E para um mesmo bloco CSS servir para mais de um elemento, classe ou ID, podemos fazer assim:


input, textarea {
    
}

PS: Para importar outro arquivo CSS numa folha CSS, use no começo a diretiva @import "folha.css". Se quiser definir algo como importante (como por exemplo, a cor de fundo, use algo como background-color: red !important.

Apesar da possibilidade de usar a tags <i></i> para inclinar textos, podemos fazer isso em CSS com o font-style. Da mesma forma, o <b></b> pode ser substituído pelo font-weight mesmo existindo o <strong></strong>. Para sublinhar usamos a tag <ins></ins>, ou usamos totalmente o CSS, dessa forma:


ul li {
    font-family: Arial;
    font-size: 13pt;
    font-style: italic;
    font-weight: bold;
    text-decoration: underline;
}

PS: O uso de tags ins, assim como o del, tem efeito semântico.

As opções que podem ser usadas no font-weight são, da mais fina à mais grossa, lighter, normal, bold e bolder. Podemos usar também um número entre 100 e 900.

As opções que podem ser usadas no font-style são normal, italic e oblique. Podemos usar também um grau de inclinação, como por exemplo oblique 40deg.

PS: Esteja atento as diferenças de especificar elementos no CSS:


div span /* Apenas o elemento filho do primeiro */

div > span /* Elemento que é filho direto do primeiro */

div + span /* Elemento e o próximo que vier */

div ~ span /* Todos os elementos após o primeiro */

Só lembrando que há diferença entre <b></b> e <strong></strong>, assim como <i></i> e <em></em>. As tags strong e em destacam o que estiver entre elas para mecanismos de pesquisa como algo relevante. As tags b e i só alteram visualmente.

No text-decoration podemos riscar também usando o line-through, assim:


p span {
    text-decoration: line-through;
}

Também temos os parâmetros overline (linha superior) e blink (piscar).

Para criar bordas num texto, usamos o text-shadow, assim:


h2 {
    text-shadow: 1px -1px black, -1px 1px black, 1px 1px black, -1px -1px black;
}

Podemos usar variáveis em CSS também, como por exemplo:


/* O root é pra declarar variáveis em CSS, estas são declaradas com dois -- na frente: */

:root {
    --cor0: #c5ebd6;
    --cor1: #83e1ad;
    --fonte-padrao: Arial, sans-serif;
}

* {
    font-family: var(--fonte-padrao);
}

body {
    background-color: var(--cor0);
}

Podemos ver em algum código algo assim:


height: 100vh;
width: calc(100% - 44px);

No caso accima, o VH ocupará 100/100 da altura da tela. O calc permite cálculos entre proporções. Podemos ver algo como 1em, um em equivale à 16px.

Parte 2 da Matéria