Os demarcadores são chamados de tags, no qual temos a tag html (que indica o início do documento HTML, e todas as demais tags devem estar dentro dela). Dentro da tag html temos a tag head (cabeçalho da página, que define a parte comportamental da mesma, como codificação de caracteres e adição de estilo CSS) e a tag body (que define o corpo da página, que aparecerá no browser). Essas e outras tags tem abertura e fechamento (abertura com <html> e fechamento com </html>) e o conteúdo fica entre as duas (incluindo outras tags).
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>
Como visto acima, podemos definir o idioma do HTML com o parâmetro lang="pt-br". 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>
<!--
Isso é um comentário em HTML, que não aparece na página.
A maior parte do conteúdo, que aparecerá no navegador, se coloca aqui 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. Note que a tag meta não tem fechamento, podendo colocar uma barra no final pra indicar isso, mas é opcional. A tag link é outra que não tem fechamento.
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).
O body é um seletor, no caso, da tag de mesmo nome. As chaves formam blocos. */
body {
font-family: Arial, sans-serif; /* Sempre na ordem propriedade e valor. */
color: white;
background: url("imagens/fundo.png") center fixed repeat;
background-color: black;
}
</style>
<script>
// Dependendo do caso, a tag script pode ficar em body também, isso é um comentário em Javascript.
alert("Isso é um código em Javascript!"); // Exibe um alerta no navegador.
</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 (indicadas quais tags tem e não tem fechamento):
<html></html> - Define o início do documento HTML, todos as demais tags devem estar dentro desta.
<head></head> - É o cabeçalho onde ficam 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 à 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 à página.
<style></style> - É utilizada para adicionar um código CSS à página.
<body></body> - É o corpo ou área principal do documento, dentro deste deve ficar o conteúdo da 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.
<strong></strong> - Deixa o texto em negrito (destaque).
<em></em> - Deixa o texto em itálico (ênfase).
<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, é inline.
<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.
<article></article> - Para separar artigos em sessões (usa dentro das tags section).
<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).
<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 map).
<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.
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.
As tags frame, frameset e noframes foram retiradas por prejudicar a navegação e usabilidade.
E essas tags foram substituídas:
acronym: Substituída por abbr.applet: Substituída por object.dir: Substituída por ul.strike e s: Substituída por del (mas prefira usar o CSS para isso).u: Substituída por ins (idem o item anterior).isindex: Substituída por form.menu: Substituída por ul.Veja aqui as tags e parâmetros depreciados no HTML5: https://www.devmedia.com.br/tags-e-atributos-depreciados-na-html/28042
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">).
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.
Lembre-se também das diferenças entre href e src:
a e link, em links como html e php, mas no caso de tag link também se usa com CSS e favicons.img), videos e audios (independente se ser em tags audio/video, source ou em iframe) e scripts, em iframe sempre usa ele até mesmo pra HTML e PHP.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:
= (Espaço "não-quebrável").
& = & (E Comercial).
­ = (Para forçar quebra de linha ao ajustar palavras compostas, criando hífens ao quebrar).
" = " (Aspas Duplas).
< = < (Menor).
> = > (Maior).
≤ = ≤ (Menor ou Igual).
≥ = ≥ (Maior ou Igual).
£ = £ (Libra).
¥ = ¥ (Ien).
€ = € (Euro).
© = © (Copyright).
¢ = ¢ (Centavos).
δ = δ (Delta).
® = ® (Marca Registrada).
™ = ™ (Trademark).
‰ = ‰ (Por Mil).
λ = λ (Lambda).
√ = √ (Raiz Quadrada).
½ = ½ (Meio).
¾ = ¾ (Três Quartos).
∞ = ∞ (Infinito).
± = ± (Mais ou Menos).
≠ = ≠ (Não Igual).
× = × (Vezes).
÷ = ÷ (Divisão).
π = π (Pi).
← = ← (Seta pra Esquerda).
→ = → (Seta pra Direita).
↑ = ↑ (Seta pra Cima).
↓ = ↓ (Seta pra Baixo).
♠ = ♠ (Espadas).
♣ = ♣ (Paus).
♥ = ♥ (Copas).
♦ = ♦ (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:
á = á
à = à
ã = ã
â = â
ü = ü
ç = ç
PS: Podemos usar outras letras, minúsculas ou maiúsculas, como por exemplo É para gerar a letra É e Õ 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: 🖖. 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:
red, green, white, etc.rgb(0, 128, 255). Podemos tem a transparência de 0 a 1 com o rgba, como por exemplo rgba(0, 128, 255, 0.5).#0080ff.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:
:hover: Aplica estilos a um elemento quando o usuário passa o cursor sobre ele.:active: Aplica estilos a um elemento no momento em que ele está sendo ativado pelo usuário, geralmente clicado.:focus: Aplica estilos a um elemento quando ele recebe o foco, geralmente através de navegação pelo teclado ou clique.:link: Aplica estilos a um link que ainda não foi visitado.:visited: Aplica estilos a um link que já foi visitado pelo usuário.:first-line: Aplica estilos à primeira linha de um bloco de texto.:first-letter: Aplica estilos à primeira letra de um bloco de texto.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, separados por vírgulas:
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 tag i
para inclinar textos, podemos fazer isso em CSS com o font-style. Da mesma forma, o b
pode ser substituído pelo font-weight. 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 tag ins, assim como o del, tem efeito semântico. E as tags b e i devem ser evitadas, ainda mais que a i depois passou a ser usada para elementos visuais e até pra isso deve ser evitada.
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 apenas colocar o texto em negrito ou itálico e usar tags semânticas pra isso. As tags <strong></strong> e <em></em> destacam o que estiver entre elas para mecanismos de pesquisa como algo relevante.
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 equivalente pro width é vw. O calc permite cálculos entre proporções. Podemos ver algo como 1em, um em
equivale à 16px.