O que é HTML?
HTML significa Hyper T ext Markup L anguage _
HTML é a linguagem de marcação padrão para páginas da Web
Os elementos HTML são os blocos de construção das páginas HTML
Elementos HTML são representados por tags <>
Elementos HTML
Um elemento HTML é uma tag inicial e uma tag final com conteúdo intermediário:
<h1>Este é um título</h1>
| Start tag | Element content | End tag |
|---|---|---|
| <h1> | This is a Heading | </h1> |
| <p> | This is paragraph. | </p> |
Atributos HTML
- Elementos HTML podem ter atributos
- Os atributos fornecem informações adicionais sobre o elemento
- Os atributos vêm em pares nome/valor como charset="utf-8"
Um documento HTML simples
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Page Title</title>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is
another paragraph.</p>
</body>
</html>
Exemplo explicado
Os elementos HTML são os blocos de construção das páginas HTML.
- A
<!DOCTYPE html>declaração define este documento como HTML5 - O
<html>elemento é o elemento raiz de uma página HTML - O
langatributo define o idioma do documento - O
<meta>elemento contém meta-informações sobre o documento - O
charsetatributo define o conjunto de caracteres usado no documento - O
<title>elemento especifica um título para o documento - O
<body>elemento contém o conteúdo da página visível - O
<h1>elemento define um título grande - O
<p>elemento define um parágrafo
Documentos HTML
Todos os documentos HTML devem começar com uma declaração de tipo de documento: <!DOCTYPE html>.
O próprio documento HTML começa <html>e termina com </html>.
A parte visível do documento HTML está entre <body>e </body>.
Estrutura do documento HTML
Abaixo está uma visualização de um documento HTML (uma página HTML):
Nota: Apenas o conteúdo dentro da seção <body> (a área branca acima) é exibido em um navegador.
Títulos HTML
Os cabeçalhos HTML são definidos com tags <h1>to .<h6>
<h1>define o título mais importante. <h6>define o título menos importante:
Exemplo
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
Parágrafos HTML
Os parágrafos HTML são definidos com <p>tags:
Exemplo
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Links HTML
Os links HTML são definidos com <a>tags:
Exemplo
<a href="https://www.w3schools.com">This is a link</a>
O destino do link é especificado no hrefatributo.
Imagens HTML
As imagens HTML são definidas com <img>tags.
O arquivo de origem ( src), o texto alternativo ( alt),
widthe heightsão fornecidos como atributos:
Exemplo
<img src="img_w3schools.jpg" alt="W3Schools" style="width:120px;height:150px"
Botões HTML
Os botões HTML são definidos com <button>tags:
Exemplo
<button>Click me</button>
Listas HTML
As listas HTML são definidas com tags (lista <ul>não ordenada/com marcadores) ou
<ol>(lista ordenada/numerada), seguidas por <li>
tags (itens da lista):
Exemplo
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Tabelas HTML
Uma tabela HTML é definida com uma <table>tag.
As linhas da tabela são definidas com <tr>tags.
Os cabeçalhos das tabelas são definidos com <th>tags. (negrito e centralizado por padrão).
As células da tabela (dados) são definidas com <td>tags.
Exemplo
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Programação HTML
Cada elemento HTML pode ter atributos .
Para desenvolvimento e programação web, os atributos mais importantes são id e class. Esses atributos são frequentemente usados para lidar com manipulações de páginas da Web baseadas em programas.
| Atributo | Exemplo |
|---|---|
| identificação | < ID da tabela ="tabela01" |
| classe | <p class ="normal"> |
| estilo | <p style ="font-size:16px"> |
| dados- | <div data -id="500"> |
| ao clicar | <input onclick ="myFunction()"> |
| passar o mouse | <a onmouseover ="this.setAttribute('style','color:red')"> |
Tutorial HTML Completo
Esta foi uma breve descrição do HTML.
Para um tutorial HTML completo, vá para W3Schools HTML Tutorial .
Para uma referência de tag HTML completa, vá para Referência de Tag do W3Schools .