learnxinyminutes-docs/pt-br/html-pt.html.markdown
2024-04-06 08:33:50 -07:00

4.6 KiB

language filename contributors translators lang
html learnhtml-br.txt
Christophe THOMAS
https://github.com/WinChris
Robert Steed
https://github.com/robochat
pt-br

HTML é um acrônimo de HyperText Markup Language(Linguagem de Marcação de HiperTexto). É uma linguagem que nos permite escrever páginas para a "world wide web". É uma linguagem de marcação, nos permite escrever páginas na web usando código para indicar como o texto e os dados serão ser exibidos. De fato, arquivos HTML são simples arquivos de texto. O que seria marcação? É um método de organização dos dados da página envolvidos por abertura e fechamento de tags. Essa marcação serve para dar significado ao texto que envolve. Assim como outras linguagens, o HTML tem diversas versões. Aqui falaremos sobre o HTML5.

NOTA : Você pode testar diferentes tags e elementos conforme progride os tutoriais em sites como codepen podendo ver seus efeitos, entendendo como funcionam e se familiarizando com a linguagem. Esse artigo tem seu foco principal na sintaxe do HTML e algumas dicas úteis.

<!-- Comentários são envolvidos conforme essa linha! -->

<!-- #################### As Tags #################### -->

<!-- Aqui está um exemplo de arquivo HTML que iremos analisar. -->

<!doctype html>
	<html>
		<head>
			<title>Meu Site</title>
		</head>
		<body>
			<h1>Olá, mundo!</h1>
			<a href = "http://codepen.io/anon/pen/xwjLbZ">Venha ver como isso aparece</a>
			<p>Esse é um parágrafo.</p>
			<p>Esse é um outro parágrafo.</p>
			<ul>
				<li>Esse é um item de uma lista não enumerada (bullet list)</li>
				<li>Esse é um outro item</li>
				<li>E esse é o último item da lista</li>
			</ul>
		</body>
	</html>

<!-- Um arquivo HTML sempre inicia indicando ao navegador que é uma página HTML. -->
<!doctype html>

<!-- Após isso, inicia abrindo a tag <html>. -->
<html>

<!-- Essa tag deverá ser fechada ao final do arquivo com </html>. -->
</html>

<!-- Não deverá haver nada após o fechamento desta tag. -->

<!-- Entre a abertura e o fechamento das tags <html></html>, nós encontramos: -->

<!-- Um cabeçalho definido por <head> (deverá ser fechado com </head>). -->
<!-- O cabeçalho contém uma descrição e algumas informações adicionais que não serão exibidas; chamam-se metadados. -->

<head>
	<title>Meu Site</title><!-- Essa tag <title> indica ao navegador o título a ser exibido na barra de títulos e no nome da aba. -->
</head>

<!-- Após a seção <head>, nós encontramos a tag - <body> -->
<!-- Até esse ponto, nada descrito irá aparecer na janela do browser. -->
<!-- Nós deveremos preencher o body(corpo) com o conteúdo a ser exibido. -->

<body>
	<h1>Olá, mundo!</h1> <!-- A tag h1 cria um título. -->
  <!-- Há também subtítulos do <h1>, o mais importante, aos mais precisos (h6). -->
  <a href = "http://codepen.io/anon/pen/xwjLbZ">Venha ver o que isso exibe</a> <!-- Um hiperlink ao endereço preenchido no atributo href="" -->
	<p>Esse é um parágrafo.</p> <!-- A tag <p> permite incluir um texto na página. -->
	<p>Esse é um outro parágrafo.</p>
	<ul> <!-- A tag <ul> cria uma lista de marcação. -->
	<!-- Para criar uma lista ordenada, devemos usar <ol>, exibindo 1. para o primeiro elemento, 2. para o segundo, etc. -->
		<li>Esse é um item de uma lista não-enumerada.</li>
		<li>Esse é um outro item</li>
		<li>E esse é o último item da lista</li>
	</ul>
</body>

<!-- E é isso, criar um arquivo HTML pode ser bem simples. -->

<!-- Também é possível adicionar alguns outros tipos de tags HTML. -->

<!-- Para inserir uma imagem. -->
<img src="http://i.imgur.com/XWG0O.gif"/> <!-- O caminho da imagem deve ser indicado usando o atributo src="" -->
<!-- O caminho da imagem pode ser uma URL ou até mesmo o caminho do arquivo no seu computador. -->

<!-- Também é possível criar uma tabela. -->

<table> <!-- Iniciamos a tabela com a tag <table>. -->
	<tr> <!-- <tr> nos permite criar uma linha. -->
		<th>Primeiro cabeçalho</th> <!-- <th> nos permite criar o título de uma coluna. -->
		<th>Segundo cabeçalho</th>
	</tr>
	<tr>
		<td>Primeira linha, primeira coluna</td> <!-- <td> nos permite criar uma célula da tabela. -->
		<td>Primeira linha, segunda coluna</td>
	</tr>
	<tr>
		<td>Segunda linha, primeira coluna</td>
		<td>Segunda linha, segunda coluna</td>
	</tr>
</table>

Uso

HTML é escrito em arquivos com a extensão .html ou .htm. Seu mime type é text/html.

Para aprender mais