Para começar abra algum editor de arquivo texto, pode ser o notepad, alguma versão do Microsoft Visual Studio, como o que estou nesta prática o VWD(Visual Web developer 2008 Express Edition), caso queira ver mais informações sobre o VWD veja este post.
Crie um novo arquivo HTML e salve num diretório, como por exemplo c:\ClienteWeb\OiMundoHTML\OiMundo.htm. As imagens abaixo mostram como isto é feito passo a passo com o VWD:
Imagem 1 - Criando um novo arquivo
Imagem 2 - Definindo o tipo do novo arquivo como HTML
Imagem 3 - Salvando o arquivo
Imagem 4 - Salvando o arquivo no diretório definidoPor padrão o VWD adiona a declaração de tipo de documento, que é muito importante, pois o HTML tem várias versões e ele quem define qual versão estamos escrevendo, mas para simplificar nossa prática, iremos retirá-lo e deixar o HTML conforme o código 1:
<html>
<head>
<title>ClienteWeb - Oi Mundo</title>
</head>
<body>
<div>
Linha 1
Linha 2
</div>
</body>
</html>
<head>
<title>ClienteWeb - Oi Mundo</title>
</head>
<body>
<div>
Linha 1
Linha 2
</div>
</body>
</html>
Código 1 - HTML do Oi Mundo
Salve novamente o arquivo e abra nos navegadores, como no passo a passo abaixo onde estamos abrindo o arquivo no FireFox 3:
Imagem 5 - Abrindo o arquivo no Firefox 3
Imagem 6 - Selecionando o ArquivoRepare que no HTML então definimos informações sobre o documento, como o título e fica visível no título do navegador, conforme imagem 7:
Imagem 7 - Titulo do arquivo criadoO HTML também tem informações sobre seu conteúdo, conforme Imagem 8:
Imagem 8 - Visualizando o arquivo criadoAinda na imagem 8, repare que no HTML colocamos uma quebra de linha no arquivo criado e esta não foi apresentada no navegador, isto porque o HTML é linguagem de elementos(tags) e existe um para representar a quebra de linha, o elemento <br />. Faça a alteração conforme código 2 e veja o resultado, conforme imagem 9.
<html>
<head>
<title>ClienteWeb - Oi Mundo</title>
</head>
<body>
<div>
Linha 1<br />
Linha 2
</div>
</body>
</html>
Código 2 - Adicionando o elemento de quebra de linha <br /><head>
<title>ClienteWeb - Oi Mundo</title>
</head>
<body>
<div>
Linha 1<br />
Linha 2
</div>
</body>
</html>
Imagem 9 - HTML após a alteração de quebra de linhaAssim pudemos ver que o HTML é uma linguagem de elementos, onde têm informações sobre o próprio documento e seu conteúdo. O elemento head possui informações sobre o documento, como por exemplo o título e o conteúdo do HTML fica dentro do elemento body. Existem elementos como o <div> e o <br /> que são utilizados para organizar o conteúdo do HTML. Para conhecer os elementos existem alguns sites úteis como o :
MSDN - Microsoft Develper Network
MDC - Mozilla Developer Center
O próprio VWD possui um editor visual de HTML, que é interessante utilizá-lo para aumentar nossa produtividade. Ainda assim é extremamente importante para um bom desenvolvedor WEB entender como funciona a sintaxe HTML, pois mais tarde, quando estivermos fazendo um uso avançado de funcionalidades WEB, como o AJAX, pode ser necessário escrever um simples HTML.
Referências:
http://www.w3.org/QA/Tips/Doctype
http://www.w3.org/QA/2002/04/valid-dtd-list.html
http://msdn.microsoft.com/en-us/library/ms535240(VS.85).aspx
