diff options
Diffstat (limited to 'pt-br/html-pt.html.markdown')
| -rw-r--r-- | pt-br/html-pt.html.markdown | 125 |
1 files changed, 125 insertions, 0 deletions
diff --git a/pt-br/html-pt.html.markdown b/pt-br/html-pt.html.markdown new file mode 100644 index 00000000..5a4bc3bc --- /dev/null +++ b/pt-br/html-pt.html.markdown @@ -0,0 +1,125 @@ +--- +language: html +filename: learnhtml.txt +contributors: + - ["Christophe THOMAS", "https://github.com/WinChris"] +translators: + - ["Robert Steed", "https://github.com/robochat"] +lang: 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](http://codepen.io/pen/) 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. + + +```html +<!-- 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 + +* [wikipedia](https://en.wikipedia.org/wiki/HTML) +* [HTML tutorial](https://developer.mozilla.org/en-US/docs/Web/HTML) +* [W3School](http://www.w3schools.com/html/html_intro.asp) |