HTML

Question	Answer
HTML	A Linguagem de Marcação de Hipertexto (HTML - HyperText Markup Language) é uma linguagem de marcação utilizada para produzir páginas na Web que são interpretadas pelos navegadores. Os documentos em HTML são arquivos de texto simples que podem ser criados e editados em qualquer editor de textos comum, como o Bloco de Notas do Windows.
<meta charset="UTF-8">	Quando gravamos arquivos, há diferentes formatos de armazenar os caracteres em bytes, O Chrome, por padrão, tentará lê-lo em uma codificação conhecida por latin1. Se gravamos nosso arquivo em outro formato, precisamos colocar essa informação no HTML que possui uma série de tags que nem mesmo marcam o texto, e sim dão meta informações ao arquivo.
<meta name="description" content="Free Web tutorials">	Definir uma descrição da sua página da Web:
<meta name="author" content="John Doe">	Definir o autor de uma página
<meta http-equiv="refresh" content="30">	Atualize o documento a cada 30 segundos
<meta name="viewport" content="width=device-width, initial-scale=1.0">	Configurando a viewport para tornar o seu site bom em todos os dispositivos
Metadados são dados (informações) sobre dados.	A marca <meta> fornece metadados sobre o documento HTML. Os metadados não serão exibidos na página, mas serão analisáveis por máquina. Os elementos meta normalmente são usados para especificar a descrição da página, as palavras-chave, o autor do documento, a última modificação e outros metadados. Os metadados podem ser usados por navegadores (como exibir conteúdo ou recarregar página), motores de busca (palavras-chave) ou outros serviços da Web. O HTML5 introduziu um método para permitir que os web designers assumissem o controle sobre a viewport (a área visível do usuário de uma página da web), através da marca <meta> (veja o exemplo "Configuração do Viewport" abaixo).
<! DOCTYPE>	A declaração <! DOCTYPE> deve ser a primeira coisa no seu documento HTML, antes da tag <html>. A declaração <! DOCTYPE> não é uma tag HTML; é uma instrução para o navegador web sobre a versão do HTML em que a página está escrita.
<! --...-->	A etiqueta de comentário é usada para inserir comentários no código-fonte. Os comentários não são exibidos nos navegadores.
<a>	A tag <a> define um hiperlink, que é usado para vincular de uma página para outra.
<abbr>	A marca <abbr> define uma abreviatura ou um acrônimo, como "Sr.", "Dec.", "ASAP", "ATM". Dica: uma abreviatura e um acrônimo são versões abreviadas de outra coisa. Ambos são frequentemente representados como uma série de letras. As abreviaturas de marcação podem fornecer informações úteis para navegadores, sistemas de tradução e mecanismos de pesquisa.
<address></address>	A marca <endereço> define as informações de contato para o autor / proprietário de um documento ou um artigo. Se o elemento <address> estiver dentro do elemento <body>, ele representa as informações de contato para o documento. Se o elemento <endereço> estiver dentro de um elemento <artigo>, ele representa as informações de contato para esse artigo. O texto no elemento <endereço> normalmente é traduzido em itálico . A maioria dos navegadores irá adicionar uma quebra de linha antes e depois do elemento de endereço.
<map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun"> <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury"> <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus"> </map>	A tag <área> define uma área dentro de um mapa de imagem (um mapa de imagem é uma imagem com áreas clicáveis). O elemento <area> está sempre aninhado dentro de uma marca <map>. Nota: O atributo usemap na marca <img> está associado ao atributo do nome do elemento <map> e cria uma relação entre a imagem e o mapa.
<article></article>	A tag <article> especifica conteúdo autônomo independente. Um artigo deve ter sentido por conta própria e deve ser possível distribuí-lo independentemente do resto do site. Fontes potenciais para o elemento <article>: Postagem do fórum Postagem do blog Notícia Comente
<body style="background-color:powderblue;">	A propriedade background-color define a cor de fundo para um elemento HTML.
<h1 style="color:blue;">This is a heading</h1>	A propriedade de cor define a cor do texto para um elemento HTML:
<h1 style="font-family:verdana;">This is a heading</h1>	A propriedade font-family define a fonte a ser usada para um elemento HTML
<h1 style="font-size:300%;">This is a heading</h1>	A propriedade font-size define o tamanho do texto para um elemento HTML
<h1 style="text-align:center;">Centered Heading</h1>	A propriedade text-align define o alinhamento de texto horizontal para um elemento HTML
<b>	texto em negrito
<strong>	Texto importante
<i>	texto itálico
<em>	texto enfatizado
<marca>	texto marcado
<small>	Texto pequeno
<q>	O elemento HTML <q> define uma pequena cotação.
<blockquote>	O elemento HTML <blockquote> define uma seção que é citada de outra fonte.
Você pode definir a cor das bordas:	<h1 style="border:2px solid Tomato;">Hello World</h1>
.	class
#	id
(9, 100%, 64%, 0.5)	hsl ( tonalidade , saturação , leveza )
(255, 99, 71, 0.5)	rgba ( vermelho, verde , azul, alfa )
#ff6347	hex m HTML, uma cor pode ser especificada usando um valor hexadecimal na forma:
Tipos de CSS	Inline - usando o atributo de estilo em elementos HTML Interno - usando um elemento <style> na seção <head> Externo - usando um arquivo CSS externo
Os links HTML são hiperlinks	<a href="url">link text</a>
Em HTML, as imagens são definidas com a marca <img>	<img src="img_chania.jpg" alt="Flowers in Chania">
Use a marca <map>	<img src="workplace.jpg" alt="Workplace" usemap="#workmap"> <map name="workmap"> <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm"> <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm"> <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm"> </map>
Para adicionar uma imagem de fundo em uma página da Web,	<body style="background-image:url('clouds.jpg')">
Mostre uma imagem se a janela do navegador (viewport) for um mínimo de 650 pixels, e outra imagem se não, mas maior que 465 pixels.	<picture> <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg"> <source media="(min-width: 465px)" srcset="img_white_flower.jpg"> <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;"> </picture>
<table>	Uma tabela HTML é definida com a tag <table>
<tr>	Cada linha de tabela é definida com a marca <tr>
<th>	Um cabeçalho da tabela é definido com a tag <th> Por padrão, os cabeçalhos das tabelas são negrito e centrado
<td>	Um dado de tabela / célula é definido com a tag <td>
<caption>	Use o elemento HTML <caption> para definir uma legenda da tabela
text-align	Use a propriedade CSS text-align para alinhar o texto da célula
colspan	Use o atributo colspan para criar uma célula várias colunas <table style="width:100%"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>55577854</td> <td>55577855</td> </tr> </table>
rowspan	Para tornar uma célula mais de uma linha, use o atributo rowspan : <table style="width:100%"> <tr> <th>Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>55577854</td> </tr> <tr> <td>55577855</td> </tr> </table>
<colgroup> e <col>	Especifica um grupo de uma ou mais colunas em uma tabela para formatação <table> <colgroup> <col span="2" style="background-color:red"> <col style="background-color:yellow"> </colgroup> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <tr> <td>3476896</td> <td>My first HTML</td> <td>$53</td> </tr> </table>
<thead>	A tag <thead> é usada para agrupar conteúdo de cabeçalho em uma tabela HTML. thead { display: table-header-group; vertical-align: middle; border-color: inherit; }
<tbody>	A marca <tbody> é usada para agrupar o conteúdo do corpo em uma tabela HTML. tbody { display: table-row-group; vertical-align: middle; border-color: inherit; }
<tfoot>	A marca <tfoot> é usada para agrupar o conteúdo do rodapé em uma tabela HTML. tfoot { display: table-footer-group; vertical-align: middle; border-color: inherit; }
<ul>	Uma lista não ordenada começa com a tag <ul> Cada item de lista começa com a marca <li> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
<ol>	Uma lista ordenada começa com a marca <ol> . Cada item de lista começa com a marca <li> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
<div>	O elemento <div> é um elemento de nível de bloco.
<form>	Um formulário HTML com dois campos de entrada e um botão enviar: <form action="/action_page.php" method="get"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit"> </form>
<input>	A tag <input> especifica um campo de entrada onde o usuário pode inserir dados.
<textarea>	A tag <textarea> define um controle de entrada de texto de várias linhas.
<button>	A marca <button> define um botão clicável.
<select>	O elemento <select> é usado para criar uma lista suspensa. <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select>
<option>	A tag <option> define uma opção em uma lista de seleção. <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select>
<optgroup>	O <optgroup> é usado para agrupar opções relacionadas em uma lista suspensa. <select> <optgroup label="Swedish Cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </optgroup> <optgroup label="German Cars"> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </optgroup> </select>
<fieldset>	A tag <fieldset> é usada para agrupar elementos relacionados em um formulário. <form> <fieldset> <legend>Personalia:</legend> Name: <input type="text"><br> Email: <input type="text"><br> Date of birth: <input type="text"> </fieldset> </form>
<label>	A marca <label> define um rótulo para um elemento <input>. <form action="/action_page.php"> <label for="male">Male</label> <input type="radio" name="gender" id="male" value="male"><br> <label for="female">Female</label> <input type="radio" name="gender" id="female" value="female"><br> <label for="other">Other</label> <input type="radio" name="gender" id="other" value="other"><br><br> <input type="submit" value="Submit"> </form>
<video>	Para mostrar um vídeo em HTML, use o elemento <video> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>
<audio>	Para reproduzir um arquivo de áudio em HTML, use o elemento <audio> <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>
<object>	O elemento <object> é suportado por todos os navegadores. <object width="400" height="50" data="bookmark.swf"></object>
<canvas>	O elemento HTML <canvas> é usado para desenhar gráficos em uma página da Web. O elemento HTML <canvas> é usado para desenhar gráficos, sobre a marcha, via JavaScript.
SVG	O que é SVG? SVG significa gráficos vetoriais escaláveis SVG é usado para definir gráficos para a Web SVG é uma recomendação do W3C

Next up

Description

Resource summary

Similar

	Created by Paulo Sérgio over 6 years ago