Comentários
Em HTML para comentar um trecho de código usamos:
<!-- Aqui todo o código
será ignorado pelo navegador.
Ou seja, temos um comentário para
múltiplas linhas.
-->
Dica sobre o Notepad++
Para trabalhar com caracteres UTF-8 e salvar assim:
Formatar - Codificação em UTF-8 (sem BOM)
Exemplos
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Título do site</title>
</head>
<body>
<h1>Título nível 1</h1>
<h2>Título nível 2</h2>
<div>Aqui temos uma divisão lógica</div>
<hr>
Acima mostrarei uma linha horizontal.
<ol>
<li>Aqui é um item de uma lista ordenada (ol - ordered list)</li>
<li>li significa list item</li>
<li>Podemos adicionar tantos itens quantos quizermos</li>
</ol>
<ul>
<li>Aqui é um item de uma lista não ordenada (ul)</li>
<li>li significa list item</li>
<li>Podemos adicionar tantos itens quantos quizermos</li>
</ol>
<p>Aqui uma <strong>palavra em negrito</strong> em <br>
quebra de linha</p>
</body>
</html>
Exibindo Imagens
<img src="/portal/logo.png" width="100" height="80" alt="Logomarca">
Links
<a href="http://ribafs.org" target="_blank">RibaFS Portal</a>
target="_blank" - para abrir a página noutra aba ou janela.
Podemos linkar para IDs da página, veja:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Título do site</title>
</head>
<body>
<div id="topo">Topo da página</div>
<h1>Título nível 1</h1>
<h2>Título nível 2</h2><div>Aqui temos uma divisão lógica</div>
<hr>
Acima mostrarei uma linha horizontal.
<ol>
<li>Aqui é um item de uma lista ordenada (ol - ordered list)</li>
<li>li significa list item</li>
<li>Podemos adicionar tantos itens quantos quizermos</li>
</ol>
<ul>
<li>Aqui é um item de uma lista não ordenada (ul)</li>
<li>li significa list item</li>
<li>Podemos adicionar tantos itens quantos quizermos</li>
</ol>
<a href="#topo">Voltar ao topo</a>
</body>
</html>Crie um arquivo chamado links.html e cole o conteúdo acima para testar o link para a mesma página.
Precisará adicionar mais texto no body para que possa rolar a tela e clicar no link que rolará a
tela para o topo.
Link para e-mail
<a href="mailto:Este endereço de email está sendo protegido de spambots. Você precisa do JavaScript ativado para vê-lo.?Subject='E-mail de teste'">Contato</a>
Tabelas
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Título do site</title>
</head>
<body>
<div id="topo">Topo da página</div>
<h1>Título nível 1</h1>
<table>
<caption>Minha Tabela HTML5</caption>
<tr><td>Celula 11</td><td>Célula 12</td></tr>
<tr><td>Celula 21</td><td>Célula 22</td></tr>
<tr><td>Celula 31</td><td>Célula 32</td></tr>
</table>
</body>
</html>Formulários
Neste assunto o HTML5 trouxe muitas novidades interessantes.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>--Formulário Contato--</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="/portal/estilo.css" rel="stylesheet" media="all" />
<script src="/portal/script.js"></script>
</head>
<body>
<form name="meu_form">
<h1>Entre em contato</h1>
<p class="nome">
<input type="text" id="nomeid" placeholder="Tiago Vale" required="required" name="nome" />
<label for="nome">Nome</label>
</p>
<p class="fone">
<input type="text" id="foneid" placeholder="(xx)xx-xx-xx-xx" name="fone" />
<label for="fone">Fone</label>
</p>
<p>
<input type="email" id="emailid" placeholder="Este endereço de email está sendo protegido de spambots. Você precisa do JavaScript ativado para vê-lo." name="email" />
<label for="email">Email</label>
</p>
<p>
<textarea placeholder="Deixe sua opinião"></textarea>
</p>
<p class="submit">
<input type="submit" onclick="Enviar();" value="Enviar" />
</p>
</form>
</body>
</html>Veja em CSS e JavaScript os arquivos estilo.css e script.js.
Algumas novas TAGs do HTML5
<header>Texto</header>
<footer>Texto</footer>
<nav>Texto</nav>
<section>Texto</section>
<section>
<article>
Texto
</article>
<article>
Texto
</article>
</section>
E muitos outros. Veja aqui:
https://developer.mozilla.org/pt-BR/docs/Web/HTML/HTML5/HTML5_element_list
Vídeos
<video width="640" height="480" controls>
<source src="/portal/video.mp4" type="video/mp4">
<source src="/portal/video.webm" type="video/webm">
Meus Vídeos
</video>
Áudio
<audio controls>
<source src="/portal/audio.mp3" type="audio/mpeg">
<source src="/portal/video.ogg" type="audio/ogg">
Meus Áudio
</audio>Algumas tags foram adicionadas pelo HTML5 e outras foram removidas. Veja aqui:
http://newhtml5.blogspot.com.br/2011/03/novas-tag.html
http://www.scriptcase.com.br/blog/objetos-removidos-html5/