Tutoriais

Programando uma página simples

Um dos objetivos desse tutorial é incentivar programadores iniciantes a escreverem código html.

Software de editar código

Para programar o site é necessário um software que gere arquivos de texto.
O tutorial irá apresentar códigos que deverão ser transcritos.

Existem muitos softwares editores de código que servem.

Arquivo principal

Crie um arquivo chamado index.htm. Ele irá conter código que o browser renderiza.

Código base

O arquivo principal deve conter esse código: 
<!doctype html>
<html lang="pt-br">
<head>
	<title>Loren Ipsun</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
</head>

<body>

</body>
</html>
A tag title: 
<title>Loren Ipsun</title>
determina o texto da aba:

Cabeçalho do site

Dentro da tag body deve estar o conteúdo do site.
Vamos começar determinando um cabeçalho. 
<h1>Empresa Hello World</h1>

Atributo style

Com css é possível determinar a apresentação dos elementos do site: 
<body style='background-color: #dadada;'>
	<h1 style='background-color: #404040; color:#ffffff; padding: 26px; border-bottom: 12px double #dadada;'>Empresa Hello World</h1>

</body>
#404040 é cinza escuro.
#ffffff é branco.
#dadada é cinza claro.
padding é a distância de 26 pixels entre o texto e o limite do h1.

Texto do site

Depois da tag h1 vai o conteúdo textual do site: 
<main>
A empresa <b>Hello World</b> é muito eficiente. Estamos no mercado a bastante tempo e nossos produtos são muito bons. A gente trabalha para oferecer o melhor para nossos clientes.<br>
Estamos no mercado a bastante tempo e nossos produtos são muito bons. A gente trabalha para oferecer o melhor para nossos clientes. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>

Somos totalmente excelentes.<br><br>

A empresa <b>Hello World</b> é muito eficiente. Estamos no mercado a bastante tempo e nossos produtos são muito bons. Estamos no mercado a bastante tempo e nossos produtos são muito bons.<br>
Nossa localização é boa pois estamos também em sua cidade. Nossos funcionários são atenciosos e prestativos, sempre atendendo com disposição.<br><br>
Nossos funcionários são atenciosos e prestativos, sempre atendendo com disposição. A gente trabalha para oferecer o melhor para nossos clientes. Estamos no mercado a bastante tempo e nossos produtos são muito bons.
</main>
Repara que a tag <br> não precisa ser fechada.

Uma imagem no site

Faça o download da imagem fachada.png

Considera que esse é um site de uma empresa. O texto apresenta a empresa. Junto vai a foto da fachada da empresa.

Dentro da tag main vai a tag img 
<img src=fachada.png style='float:right; margin-left:10px;'>
Repara que a tag <img> não precisa ser fechada.

Código completo

<!doctype html>
<html lang="pt-br">
<head>
	<title>Loren Ipsun</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
</head>

<body style='background-color: #dadada; font-family:Arial;'>
	<h1 style='background-color: #404040; color:#ffffff; padding: 26px; border-bottom: 12px double #dadada;'>Empresa Hello World</h1>

<main style='font-size:20px; margin-left:10px; min-height:500px;'>
<img src=fachada.png style='float:right; margin-left:20px;'>
A empresa <b>Hello World</b> é muito eficiente. Estamos no mercado a bastante tempo e nossos produtos são muito bons. A gente trabalha para oferecer o melhor para nossos clientes.<br>
Estamos no mercado a bastante tempo e nossos produtos são muito bons. A gente trabalha para oferecer o melhor para nossos clientes. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>

Somos totalmente excelentes.<br><br>

A empresa <b>Hello World</b> é muito eficiente. Estamos no mercado a bastante tempo e nossos produtos são muito bons. Estamos no mercado a bastante tempo e nossos produtos são muito bons.<br>
Nossa localização é boa pois estamos também em sua cidade. Nossos funcionários são atenciosos e prestativos, sempre atendendo com disposição.<br><br>
Nossos funcionários são atenciosos e prestativos, sempre atendendo com disposição. A gente trabalha para oferecer o melhor para nossos clientes. Estamos no mercado a bastante tempo e nossos produtos são muito bons.
</main>

	<footer style='text-align:right; background-color: #404040; color:#ffffff; padding: 26px; border-bottom: 12px double #dadada;'>Hello World &reg;</footer>
</body>
</html>

Publicar

Enviar o arquivo htm e as imagens para algum servidor na web também não é tão difícil.
Existem opções gratuítas.