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:ribafs@gmail.com?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="fulano@mail.com
document.getElementById('cloak78297c3b05b083443d04081c3b44101a').innerHTML = '';
var prefix = 'ma' + 'il' + 'to';
var path = 'hr' + 'ef' + '=';
var addy78297c3b05b083443d04081c3b44101a = 'fulano' + '@';
addy78297c3b05b083443d04081c3b44101a = addy78297c3b05b083443d04081c3b44101a + 'mail' + '.' + 'com';
var addy_text78297c3b05b083443d04081c3b44101a = 'fulano' + '@' + 'mail' + '.' + 'com';document.getElementById('cloak78297c3b05b083443d04081c3b44101a').innerHTML += '<a ' + path + '\'' + prefix + ':' + addy78297c3b05b083443d04081c3b44101a + '\'>'+addy_text78297c3b05b083443d04081c3b44101a+'<\/a>';
" 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/
Comentários (0)
Comments fornecido por CComment