Aprendendo HTML5

Introdução ao HTML

HyperText Markup Language (Linguagem de Marcação de Hipertexto)

W3C

World Wide Web Consortium
Padrões:
- Linguagem estrutural (HTML, XML)
- Linguagem de apresentação (CSS)
- Comportamento (DOM, ECMAScript)

Estrutura Básica


<html lang="pt">
<head>
  <meta charset="UTF-8">
  <meta name="keywords" content="Estudo constante">
  <meta name="description" content="Aprendizado">
  <title>Título</title>
</head>
<body>
  Olá, mundo!
</body>
</html>

Elementos como <head></head> são tags de abertura e fechamento. Elementos isolados como <hr/> usam / para fechamento.

Elementos Básicos

Títulos
Parágrafos
Quebras de linha
Linhas horizontais
Estilos de texto
Comentários e símbolos especiais

<h1>Título Principal</h1>
<p>Texto contínuo formando um parágrafo completo.</p>
<hr>
<p>Segunda linha<br>com quebra manual</p>
<strong>Texto forte</strong> <em>Ênfase</em>
<p>Espaços&nbsp;&nbsp;extras &copy; Direitos</p>

Imagens

<img src="caminho/imagem.jpg" alt="Descrição" 
     title="Tooltip" width="300" height="200">

Links

<a href="pagina.html" target="_blank">Abrir página</a>
<a href="#topo">Ir para topo</a>
<a href="mailto:exemplo@email.com">Contato</a>

Elementos em Bloco vs. Linha

Bloco: Ocupam linha inteira (h1, p)
Linha: Ajustam ao conteúdo (a, strong)

Listas

<ol>
  <li>Item ordenado</li>
</ol>

<ul>
  <li>Item não-ordenado</li>
</ul>

<dl>
  <dt>Termo</dt>
  <dd>Definição</dd>
</dl>

Tabelas

<table border="1">
  <tr>
    <td colspan="2">Célula combinada</td>
  </tr>
  <tr>
    <td rowspan="2">Célula vertical</td>
  </tr>
</table>

Mídia

<video src="video.mp4" controls></video>
<audio src="audio.mp3" controls></audio>

Estrutura Semântica

header: Cabeçalho
footer: Rodapé
section: Área independente
article: Conteúdo editorial
aside: Conteúdo relacionado
nav: Navegação

Iframes

<iframe src="https://exemplo.com" name="quadro"></iframe>
<a href="outra.html" target="quadro">Carregar</a>

Formulários

<form action="/processar" method="post">
  <input type="text" name="usuario" placeholder="Nome" required>
  <input type="password" name="senha">
  <input type="radio" name="genero" value="M"> Masculino
  <input type="checkbox" name="interesses" value="tech"> Tecnologia
  <select name="pais">
    <option value="BR">Brasil</option>
  </select>
  <textarea name="mensagem"></textarea>
  <input type="submit" value="Enviar">
</form>

Tags: html5 Semântica Formulários W3C ElementosHTML

Publicado em 7-14 12:36

Doido Dev