Eu resolvi fazer esse minicurso básico de HTML, com a intenção
de ajudar quem pretende fazer uma página neste "tilde hole".
NãoéporqueoJeffnãosabecriarlistadelinkscofcof
Eu irei ensinar as tags básicas, que não podem faltar em nenhum
código [1mHTML[0m e também a forma correta de usar
[1m<ul>[0m, [1m<li>[0m e a forma correta de usar isso com a tag
[1m<a>[0m.
Se não fizer isso corretamente, os retro clubeiros não
conseguirão acessar todos os "tildes" do Hole, sem ter que digitar
o caminho da URL. Pois o [1mLinks[0m não renderiza certo.
Apesar que o lema do clube é: Ser uma rede social lenta. Mas enfim.
Começando pela primeira tag:
```
<!doctype html>
```
É essa tag que diz ao navegador qual é a versão do HTML.
E sem ela, o conteúdo pode não renderizar de forma correta.
Aliás, para quem gosta de usar umas tags que não são mais
compativeis com a versão atual do HTML, recomendo aprender HTML4
transitional.
A segunda tag é:
```
<html>
```
Não me pergunte o porquê. Mas é obrigatória!
A terceira tag é:
```
<head>
```
É onde ficará o cabeçalho da página. Título, CSS etc.
Para quem pretende fazer um layouts responsivo (mais a ver com CSS)
a tag a seguir é de extrema importancia.
```
<meta name="viewport" content="width=device-width, initial-scale=1.
```
CSS serve para alterar o layout da página. É da área do design
e não é relevante para este minicurso.
Mais uma tag "meta (não será necessário aprender todos os usos)"
e de estrema importância, pois é comum os navegadores não
exibirem caractéres unicodes (como os latinos "é", "ç" etc.),
essa tag meta diz ao navegador que pode exibir cractéres de todos
os idiomas. Incluindo os não latinos.
```
<meta charset="utf-8">
```
Já deve ter reparado em uma coisa. Todas as tags ficam entre "<" e
">" O nome da tag vem depois de "<" e sempre termina antes de ">".
O que vem depois do nome da tag e antes de ">", são atrtibutos. No
caso da tag "<meta>" acima, o atributo é "charset". Ao lado do
"charset" tem um sinal de "=" e um valor entre áspas.
Esse valor depende muito da tag. No caso da tag acima, diz ao
browser que há supórte para todos os idiomas.
Uma tag relevante para quem vai usar CSS é:
```
<link rel="stylesheet" href="caminhodacss">
```
Há dois meios de usar CSS. Uma é incorporando no próprio arquivo
HTML. Mas dessa forma você teria que inserir o mesmo código CSS
em outros HTML's e isso é um uso desnecessário de espaço.
Outra é importando um arquivo CSS que pode ser usado para
multiplos layouts.
Agora a tag para dizer o que irá aparecer na barra de título e na
aba.
```
<title>Título</title>
```
E agora aprendemos a "fechar" uma tag. Não são todas que
precisam, mas é importante saber disso.
E aqui fechamos o cabeçalho
```
</head>
```
e começamos o conteúdo, que fica todo dentro da tag
```
<body>
```
Há muito mais para se aprender, mas vamos focar na filosofia retro.
Para quem pretende fazer layouts com CSS, é importante conhecer a
tag "<div>" e seus atributos.
Para que o CSS saiba onde fazer a alteração visual, precisa
atribuir uma classe.
```
<div class="nomedaclase">Blah etc. poo</div>
```
O atributo [1mclass[0m pode ser usado em toda tag que exibe
conteúdo na tela.
Se for escrever um artigo, vai querer inserir um título e subtítulo
```
<h1>Título</h1>
<h2>Subtítulo</h2>
Vai até "h7".
```
HTML não reconhece quebras de linhas. Você pode quebrar uma linha
usando "<br>", mas para escrever parágrafo inteiros é inviável.
Para parágrafos, use:
```
<p>Pou Piu</p>
```
Você pode definir a largura do parágrafo com CSS.
Os hyperlinks (links clicaveis) são feitos coma tag "<a>". Da
seguinte forma:
```
<a href="caminhoouendereçoweb">Nome do link</a>
```
E para fazer o link abrir em outra aba (ou janela), use o atributo
'target="_blank"'.
```
<a href="url" target="_blank">Uau!</a>
```
Existem duas maneiras de fazer listas em HTML. Uma é com "<ol>",
que numera as listas e "<ul>", que adiciona um ponto à esquerda
dos elementos.
Para nosso exêmplo, vamos usar "<ul>". Depois da tag "<ul>", vem
a tag "<li>", que é onde fica o item da lista. Cada item é um
"<li>" e todo "<li>" precisa ser fechado com "</li>". Também pode
inserir links nas listas. E a lista termina com "</ul>".
Podem ser criados subitems em listas. Basta abrir mais uma "<ul>"
antes de fechar com "</ul>.":
```
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li><a href="ujuuy">Olha lá Um link em uma lista</a></li>
<ul>
<li>Subitem</li>
</ul>
</ul>
```
Para deixar palavras e fráses em [1mnegrito[0m:
```
<strong>AAAAAAAAAAAAHHHHHHHHHH!</strong>
```
Italico:
```
<em>MI</em>
```
Stroke:
```
<s>AAAAAAAHHHHRRRWWEEEUERREOOUUWBWKGPLRFFR</s>
```
E fechamos todo o conteúdo
```
</body>
```
e todo o HTML
```
</html>
```
Se qiser ter certeza que o código segue as normas, cheque isso em
```
validator.w3.org
```
E aqui encerramos o minicurso básico de HTML. Faça bom proveito!=)
[1mPublicado em[0m: Mar.23.2024
[1mPublicado por[0m: Lera
___________________________________________________________________
Gophered by Gophernicus/3.1.1 on Debian/12 x86_64