Curso de HTML Grátis – 1

Se você sempre quis um Curso de HTML grátis, seja bem vindo! Aqui eu pretendo começar a abordar alguns temas para você poder dar o pontapé inicial no desenvolvimento web.

Antes de começar, saiba que o mercado de desenvolvimento está em constante crescimento. Mas também é preciso lembrar que você vai ter que estudar bastante.

Eu costumo dizer que desenvolvimento web é como um poço sem fundo. Você vai cavando, cavando, cavando e sempre sai coisa nova de lá.

Você também pode pensar nisso como um cruzamento que vai entrar em uma estrada. Nesse momento, você está bem nesse cruzamento e vai precisar entrar nessa estrada.

Sempre vai ter algumas pessoas atrás de você e sempre terá pessoas à sua frente. Você não pode ficar parado e desistir, deve sempre seguir em frente, procurando se atualizar sempre.

Como eu comecei com HTML e CSS

Na época que eu comecei, eu queria um curso que me ensinasse a criar um site, de forma que eu conseguisse pegar um layout de um site e transformá-lo com HTML e CSS até ficar muito próximo ou igual ao layout que eu tinha desenvolvido.

Eu sempre gostei muito de ler, então investi em alguns livros e para não perder tempo, também fiz um curso no SENAC.

O curso em si não foi tudo o que eu esperava. Na verdade, eu aprendi muito mais estudando sozinho em casa com meus livros e com o site do W3Schools do que no curso.

Mas, mesmo assim, o curso me proporcionou coisas boas. Além do que sempre é bom conhecer pessoas novas e você ganha muito com a troca de conhecimento.

Como estudar HMTL e CSS

Se você está determinado a aprender, seja bem vindo ao time DEV. Mas saiba que você precisará ter muita persistência e determinação para conseguir atingir resultados.

Como eu já disse, desenvolvimento web é um poço sem fundo. E o HMTL e CSS são os conhecimentos mais básicos que você pode ter.

Portanto, já coloque na sua cabeça que isso é apenas o começo. Você vai precisar continuar estudando e aprendendo sempre, ok?

Iniciando: HTML x CSS

Se você está começando agora, com certeza já deve ter visto alguém falar que você precisa aprender HTML e CSS.

Embora tenham funções diferentes, os dois funcionam em conjunto. Pense neles como queijo com goiabada, leite com chocolate, pipoca com guaraná.

Ou seja: embora façam coisas diferentes, um complementa o outro.

Um site apenas com html pode ser visualizado, mas vai ser muito feito. Se você quiser dar um up no visual, vai precisar aprender CSS também.

Basicamente, a função do HTML é apenas para mostrar um conteúdo (seja ele texto ou imagens).

Pense no HTML como um dedo-duro. O que você faz com o HTML é indicar: isso é uma caixa, isso é um texto, essa imagem vai aqui, esse texto vai aqui, isso é um link.

O HTML não é uma “linguagem de programação”, mas uma “linguagem de marcação”. Ele serve apenas para isso, para demarcar o conteúdo do documento.

HTML significa “HyperText Markup Language”, que poderia ser traduzido como “Linguagem de Marcação de Hipertexto”, ou seja, o HTML é uma forma de apresentar o conteúdo, sendo que você pode navegar pelo próprio documento ou para outros documentos de uma forma simples e fácil.

E o CSS? A função dele é estilizar o HMTL. Ou seja, com o CSS você consegue alterar as cores, disposição, alinhamento, tamanho, esconder e exibir objetos, etc.

CSS significa “Cascading Style Sheets”, ou seja “Folha de Estilo em Cascatas”. A idéia aqui é que os estilos CSS são aplicados um em cima do outro, estilizando o documento HTML.

O foco desse curso que estou dando agora é HTML, ou seja, se você quer aprender CSS, fique atento que futuramente eu devo colocar um curso específico sobre CSS.

Mas por enquanto, não vamos misturar as coisas.

Começando com o HTML

Para iniciar o aprendizado do HTML, você vai precisar de um editor de texto e de um navegador. Sim, apenas isso.

Quanto ao navegador, sinta-se a vontade para utilizar aquele que você mais gosta: pode ser o Chrome, o Firefox, Opera etc.

Quanto ao editor, vale aqui lembrar que quando eu digo “editor de textos”, estou falando de um editor de textos próprio para programação.

Você não pode, portanto, utilizar o Word ou Wordpad (editor do Windows). Isso porque esses editores adicionam algumas informações a mais ao documento. E em se tratando de HTML, praticamente tudo o que você colocar no documento será exibido.

Qual editor de textos eu devo usar?

Você pode utilizar o Bloco de Notas do Windows, por exemplo. Ele é um editor de texto puro e não vai adicionar nenhuma informação a mais no seu arquivo.

Aliás eu recomendo que no começo você realmente utilize o bloco de notas, para ir se familiarizando com a sintaxe dos comandos HTML.

Futuramente, quando você já estiver entendendo como as coisas funcionam e já tiver decorado os comandos, poderá migrar para um editor específico para desenvolvedores.

Algumas sugestões são: Sublime Text, Brackets, Atom, Notepad++, etc. Sinta-se livre para pesquisar e escolher aquele que você se sentir mais a vontade. Eu, particularmente utilizo o Sublime Text.

Existem alguns editores com o Dreamweaver por exemplo, que permitem que você desenvolva seu código de uma forma mais fácil.

Mas é concenso entre os desenvolvedores que você tem muito mais controle do que está fazendo se você mesmo escrever seu próprio código. E no caso do Dreamweaver, ele pode atrapalhar um pouco colocando estilos css inline (maiores explicações no curso de CSS), o que não é uma coisa boa.

Versões do HTML

Atualmente, estamos usando o HTML 5.2 e antes disso, tivemos outras versões. Abaixo você pode conferir as versões e o ano de lançamento.

• HTML – 1991
• HTML 2.0 (1995)
• HTML 3.2 (1997)
• HTML 4.01 (1999)
• XHTML (2000)
• HTML5 (2014)
• HTML5.1 (2016 e 2017)
• HTML5.2 (2017)

Basicamente, o que você precisa saber é com o XHTML tivemos uma mudança significativa. E do XHTML para o HTML5 também.

Muito resumidamente, o XHTML permitia que você escolhesse a forma como HTML iria trabalhar. Existia uma forma chamada “Strict”, que travava seu documento em caso de erro.

Ou seja, se você estivesse trabalhando nesse modo e houvesse um erro, nada seria exibido. Isso é o que se chamava “tratamento draconiano” de erros, em alusão ao imperador romano Draco que punia com morte os menores crimes.

Essa versão, embora fosse um pouco mais chatinha de se trabalhar, forçava os desenvolvedores a terem um código mais correto, sem fazer gambiarras.

Explico: quando você abre uma página em um navegador, ele vai ler o documento HTML e exibir o conteúdo para você. Mas e se o desenvolvedor cometeu algum erro? Nesse caso, o navegador “se vira nos trinta” e exibe a página de alguma forma.

Assim, as vezes ele pode corrigir o problema e você nem iria perceber, ou ele pode corrigir e aparecer algum bug.

Mas, se você estivesse trabalhando com o XHTML no modo Strict, caso o navegador encontrasse um erro ele simplesmente parava a leitura e exibia uma mensagem de erro, informando a linha em que esse erro tinha ocorrido.

Isso era ruim do ponto de vista do usuário, já que se um erro existisse a página não seria exibida, mas por outro lado, forçava os desenvolvedores a utilizarem boas práticas.

Quando eu comecei a aprender HTML procurei trabalhar dessa forma, porque isso me forçou a aprender da forma correta.

Próximos passos

Espero que você tenha gostado das explicações e esteja pronto para colocar a mão na massa.

Escolha seu navegador e editor favoritos e vamos para o próximo post do nosso Curso de HTML Grátis – 2.