Gostou do nosso conteúdo? Te ajudou?
Nos ajude também! Faça um PIX, de qualquer valor:
programacao.progressiva@gmail.com

Como criar o primeiro site em HTML


Tutorial de HTMLAgora que já lemos bastante sobre a linguagem de marcação HTML, está na hora de colocarmos a mão na massa e criar o nosso primeiro Website.

Escolha seu editor de textos, aqueça seu browser, que você vai criar páginas de internet!

Bem vindo ao nosso curso de HTML!

Caso deseje transformar seus estudos de HTML em uma profissão para começar a ganhar dinheiro criando sites, sugerimos que faça o curso e obtenha seu certificado de Webmaster (tudo online):

Curso de HTML e CSS com certificado
Obter meu certificado!
Apostila HTML Progressivo: Fazer download

Como criar o primeiro site em HTML

HTML é uma linguagem de marcação, ou seja, o que vamos fazer é apenas marcar, fazer alterações em textos.
Ou seja, uma página da internet não deixa de ser um texto.

Por isso, parar criar nossa primeira página em HTML simplesmente vamos abrir nosso editor HTML e digitar o seguinte texto:

Curso HTML Progressivo - Meu primeiro site


Pronto. Agora salve seu arquivo com a extensão '.html' ou '.htm' e clique duas vezes no arquivo que você criou.
Como esse arquivo tem a extensão '.htm' ou '.html', seu Sistema Operacional vai entender que se trata de uma página, e irá usar um navegador web para abrir seu arquivo.

O navegador, ou Browser, nada mais é que um programa que interpreta seus códigos de HTML.
E qual código HTML que usamos?
Nenhum. Então ele simplesmente irá exibir o texto, sem formatar ou marcar nada.
viu o resultado?

Agora vamos alterar e fazer uma coisa diferente, troque o texto por:


Curso HTML Progressivo
Meu primeiro site


Salve como .html e abra o arquivo.
Opa, como assim? Você deu um ENTER após a primeira frase, e isso não saiu no seu site?
Por que? Que bruxaria é essa?

Comandos em HTML: quebra de linha <br>

A explicação está na marcação.
Você escreveu um texto e mandou seu navegador interpretar.
Você escreveu as duas frases, e estas duas frases foram exibidas.

Mas agora percisamos fazer algumas marcações, precisamos dizer ao navegador Web como exibir as informações.

Queremos que o navegador exiba um ENTER ou quebra de linha, e vamos dizer isso pra ele com o seguinte código de HTML: <br>

O 'br' é de 'break', que significa quebra.
Agora altere o conteúdo do seu site para:


Curso HTML Progressivo!<br>
Meu primeiro site!


Salve e rode! Que beleza, como você queria, não é?
O que fizemos foi 'Hey, navegador, exiba a segunda frase após uma quebra de linha da primeira frase".
E isso é dito com um comando, chamado Tag, que o é um código HTML que o seu navegador interpreta.

Agora teste:

Curso HTML Progressivo!<br>Meu Primeiro site!


Viu o que aconteceu? Nada, é a mesma coisa para o HTML e para o navegador.
Agora que você é um Webmaster (pois já fez sites), você tem que pensar tanto como humano (usuário), como máquina (navegador).

Para nós, humanos, os textos a seguir são diferentes:
"Apostila de HTML"
"Apostila de
HTML"

O primeiro exemplo é todo exibido em uma única linha, já o segundo é exibido em duas linhas.
Porém, não há nenhum código de HTML que diga se devemos mudar de linha, então para o HTML é a mesma coisa!
Se quiser fazer uma quebra de linha, você precisa dizer ao navegador, através de código HTML, que essa marcação deve ser feita.

Exercício: Criando um site em HTML
Crie um site que exiba seu nome completo em uma única linha.
Em seguida, altere o código HTML de seu site para que seu nome seja exibido quebrado, ou seja, em cada linha tem que aparecer uma parte do nome, formando seu nome completo.

8 comentários:

Anônimo disse...

Olá estou começando a estudar este tutorial e gostaria
de saber qual editor mais apropriado para usar neste curso,
pois neste tópico usei o Kompozer, mas com ele a quebra de linha
saiu normalmente sem precisar usar o código
.
E eu gostaria de aprender do jeito que é explicado aqui.
Se vcs puderem me ajudar, por favor.

Apostila HTML Progressivo disse...

Olá Anônimo,

Se for usar o Kompozer, use a parte dele que aparece o código.

No decorrer de nosso curso, vamos criar os códigos na mão mesmo.
Quando for profissional, você vai usar as ferramentas do Kompozer, ou de outros editores de HTML.

Mas por hora, digite os códigos na mão, no modo código do editor de HTML, ou em um editor de textos comum, como Bloco de Notas ou Notepad++.

Teste alguns e fique com o que você gostar mais, o foco mesmo é que você faça o site na mão mesmo, escrevendo todos os códigos.

Mailton SS disse...

Iniciei o curso dia 20 de março de 2014. Estou achando muito bom. Excelente curso on-line.

Anônimo disse...

Como anônimo disse acima, eu uso o KompoZer e quando simplesmente aperto enter ele exibe a quebra de linha no site normalmente queria saber porque isso acontece

Unknown disse...

Ótima postagem gostei muito parabéns.

Anônimo disse...

Pessoas como vocês prestam um excelente serviço aos estudantes sinceros. Penso que vocês deveriam ser homenageados.

Anônimo disse...

Show, sou 100% iniciante e estou gostando muito do curso. Parabéns!

Anônimo disse...

Olá pessoal, bom dia!
Estou lendo e praticando o conteúdo da apostila e, estou achando o máximo!
Sou deficiente visual e estou conseguindo compreender de maneira muito clara todas as explicações pois, vocês detalham tudo por meio de textos e não de imagens, como muitas outras pessoas fazem. Do jeito como vocês explicam, ficam totalmente acessível!
Muito obrigada!
E, apenas uma sugestão: vocês podiam fazer uma apostila de php progressivo ou de lógica de programação, baseada em textos como essa do HTML.

Parabéns!
Paula

Tutoriais de HTML e CSS