Nota: Érecomendado; Adobe DreamWeaver ou pode usar um bloco de notas
de preferência NotePad++
Com HTML, você pode criar seu próprio Web site.
Este tutorial ensina tudo sobre HTML.
HTML é fácil de aprender - Você vai se divertir.
Exemplos em cada capítulo
Este tutorial HTML contém centenas de exemplos de HTML.
Com nosso editor HTML online, você pode editar o HTML, e clicar em um botão para ver o resultado.
Ex:
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Exemplo Explicado
A declaração DOCTYPE define o tipo de documento
O texto entre <html> e </ html> descreve a página web
O texto entre <body> e </ body> é o conteúdo da página visível
O texto entre <h1> e </ h1> é exibida como um título
O texto entre <p> e </ p> é exibido como um parágrafo
*O <! DOCTYPE html> declaração é o doctype para HTML5.
O que é HTML?
HTML é uma linguagem para descrever páginas web.
HTML significa H yper T ext M arkup L anguage
HTML é uma marcação linguagem
Uma linguagem de marcação é um conjunto de marcação marcas
As tags descrever o conteúdo do documento
Documentos HTML contêm HTML marcas e simples do texto
Documentos HTML são também chamadas de páginas web
Tags HTML
Tags de marcação HTML são geralmente chamados de tags HTML
HTML tags são palavras-chave (nomes de marca) cercados por colchetes como <html>
Tags HTML normalmente vêm em pares como <b> e </ b>
A primeira tag em um par é a tag de início, a segunda tag é a tag final
A marca final é escrito como a marca de início, com uma barra antes do nome da tag
Iniciar e marcas de fim são também chamados de tags de abertura e tag de fecho
<tagname> conteúdo </ tagname>
Elementos HTML
"Tags HTML" e "elementos HTML" são muitas vezes usadas para descrever a mesma coisa.
Mas, estritamente falando, um elemento HTML é tudo entre a tag de início ea marca final, incluindo as tags:
Elemento HTML:
<p> Este é um parágrafo. </ p>
Navegadores
O propósito de um navegador web (como o Google Chrome, Internet Explorer, Firefox, Safari) é ler documentos HTML e exibi-las como páginas da web.
O navegador não exibe as tags HTML, mas usa as tags para determinar como o conteúdo da página HTML deve ser apresentado / indicado para o usuário:
Navegador
HTML Estrutura Página
Abaixo está uma visualização de uma estrutura da página HTML:
<html>
<body>
<h1> Este é um </ h1> título
<p> Este é um parágrafo. </ p>
<p> Este é outro parágrafo. </ p>
</ Body>
</ Html>
As versões HTML
Desde os primeiros dias da web, tem havido muitas versões do HTML:
| Version | Year |
|---|---|
| HTML | 1991 |
| HTML+ | 1993 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML 1.0 | 2000 |
| HTML5 | 2012 |
| XHTML5 | 2013 |
O <! DOCTYPE>
O <! DOCTYPE> ajuda o navegador para exibir uma página web corretamente.
Há muitos documentos diferentes na web, e um navegador só pode exibir uma página HTML 100% corretamente se sabe o tipo de HTML e versão utilizada.
Declarações comuns
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML escrito, utilizando o Bloco de Notas ou TextEdit
HTML podem ser editados usando um editor de HTML profissional como:
Adobe Dreamweaver
Microsoft Expression Web
CoffeeCup HTML Editor
No entanto, para o aprendizado de HTML recomendamos um editor de texto como o Bloco de Notas (PC) ou TextEdit (Mac). Acreditamos que através de um simples editor de texto é uma boa maneira de aprender HTML.
Siga os 4 passos abaixo para criar sua primeira página web com o bloco de notas.
Passo 1: Inicie o Bloco de Notas
Para iniciar o bloco de notas, vá para:
Iniciar
Todos os Programas
Acessórios
Bloco de Notas
Passo 2: Edite a sua HTML com o Bloco de Notas
Digite o seu código HTML em seu bloco de notas:
Selecione Salvar como .. no menu Arquivo do Bloco de Notas.
Quando você salvar um arquivo HTML, você pode usar o arquivo. Htm ou a extensão do arquivo html.. Não há diferença, é inteiramente até você.
Salve o arquivo em uma pasta que seja fácil de lembrar, como w3schools.
Passo 4: Execute o HTML em seu navegador
Inicie o seu navegador e abra o arquivo html do arquivo , Abrir menu ou simplesmente navegar na pasta e clique duas vezes no arquivo HTML.
O resultado deve ser parecido com isto:
Não se preocupe se os exemplos usam tags que você não aprendeu.
Você vai aprender sobre elas nos próximos capítulos.
Títulos HTML
Cabeçalhos HTML são definidos com o <h1> a tags <h6>.
Ex:
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
Parágrafos em HTML
Parágrafos HTML são definidos com a tag <p>.
Ex:
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
HTML Ligações
Links em HTML são definidas com a tag <a>.
Ex:
<!DOCTYPE html>
<html>
<body>
<a href="http://www.omegapontocom.blogspot.com.br">
This is a link</a>
</body>
</html>
Nota: O endereço do link é especificado no atributo href.
(Você vai aprender sobre os atributos em um capítulo posterior deste tutorial).
Imagens HTML
Imagens HTML são definidas com a tag <img>.
Ex:
<!DOCTYPE html>
<html>
<body>
<img src="http://i1.ytimg.com/vi/gJUoLZzn1W4/hqdefault.jpg" width="600" height="400"></body>
</html>
Nota: O nome e o tamanho da imagem são fornecidos como atributos.
