Se voc\u00ea sempre quis um Curso de HTML gr\u00e1tis, seja bem vindo! Aqui eu pretendo come\u00e7ar a abordar alguns temas para voc\u00ea poder dar o pontap\u00e9 inicial no desenvolvimento web.<\/p>\n
Antes de come\u00e7ar, saiba que o mercado de desenvolvimento est\u00e1 em constante crescimento. Mas tamb\u00e9m \u00e9 preciso lembrar que voc\u00ea vai ter que estudar bastante.<\/p>\n
Eu costumo dizer que desenvolvimento web \u00e9 como um po\u00e7o sem fundo. Voc\u00ea vai cavando, cavando, cavando e sempre sai coisa nova de l\u00e1.<\/p>\n
Voc\u00ea tamb\u00e9m pode pensar nisso como um cruzamento que vai entrar em uma estrada. Nesse momento, voc\u00ea est\u00e1 bem nesse cruzamento e vai precisar entrar nessa estrada.<\/p>\n
Sempre vai ter algumas pessoas atr\u00e1s de voc\u00ea e sempre ter\u00e1 pessoas \u00e0 sua frente. Voc\u00ea n\u00e3o pode ficar parado e desistir, deve sempre seguir em frente, procurando se atualizar sempre.<\/p>\n
Na \u00e9poca 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\u00e1-lo com HTML e CSS at\u00e9 ficar muito pr\u00f3ximo ou igual ao layout que eu tinha desenvolvido.<\/p>\n
Eu sempre gostei muito de ler, ent\u00e3o investi em alguns livros e para n\u00e3o perder tempo, tamb\u00e9m fiz um curso no SENAC.<\/p>\n
O curso em si n\u00e3o 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.<\/p>\n
Mas, mesmo assim, o curso me proporcionou coisas boas. Al\u00e9m do que sempre \u00e9 bom conhecer pessoas novas e voc\u00ea ganha muito com a troca de conhecimento.<\/p>\n
Se voc\u00ea est\u00e1 determinado a aprender, seja bem vindo ao time DEV. Mas saiba que voc\u00ea precisar\u00e1 ter muita persist\u00eancia e determina\u00e7\u00e3o para conseguir atingir resultados.<\/p>\n
Como eu j\u00e1 disse, desenvolvimento web \u00e9 um po\u00e7o sem fundo. E o HMTL e CSS s\u00e3o os conhecimentos mais b\u00e1sicos que voc\u00ea pode ter.<\/p>\n
Portanto, j\u00e1 coloque na sua cabe\u00e7a que isso \u00e9 apenas o come\u00e7o. Voc\u00ea vai precisar continuar estudando e aprendendo sempre, ok?<\/p>\n
Se voc\u00ea est\u00e1 come\u00e7ando agora, com certeza j\u00e1 deve ter visto algu\u00e9m falar que voc\u00ea precisa aprender HTML e CSS.<\/p>\n
Embora tenham fun\u00e7\u00f5es diferentes, os dois funcionam em conjunto. Pense neles como queijo com goiabada, leite com chocolate, pipoca com guaran\u00e1.<\/p>\n
Ou seja: embora fa\u00e7am coisas diferentes, um complementa o outro.<\/p>\n
Um site apenas com html pode ser visualizado, mas vai ser muito feito. Se voc\u00ea quiser dar um up no visual, vai precisar aprender CSS tamb\u00e9m.<\/p>\n
Basicamente, a fun\u00e7\u00e3o do HTML \u00e9 apenas para mostrar um conte\u00fado (seja ele texto ou imagens).<\/p>\n
Pense no HTML como um dedo-duro. O que voc\u00ea faz com o HTML \u00e9 indicar: isso \u00e9 uma caixa, isso \u00e9 um texto, essa imagem vai aqui, esse texto vai aqui, isso \u00e9 um link.<\/p>\n
O HTML n\u00e3o \u00e9 uma “linguagem de programa\u00e7\u00e3o”, mas uma “linguagem de marca\u00e7\u00e3o”. Ele serve apenas para isso, para demarcar o conte\u00fado do documento.<\/p>\n
HTML significa “HyperText Markup Language”, que poderia ser traduzido como “Linguagem de Marca\u00e7\u00e3o de Hipertexto”, ou seja, o HTML \u00e9 uma forma de apresentar o conte\u00fado, sendo que voc\u00ea pode navegar pelo pr\u00f3prio documento ou para outros documentos de uma forma simples e f\u00e1cil.<\/p>\n
E o CSS? A fun\u00e7\u00e3o dele \u00e9 estilizar o HMTL. Ou seja, com o CSS voc\u00ea consegue alterar as cores, disposi\u00e7\u00e3o, alinhamento, tamanho, esconder e exibir objetos, etc.<\/p>\n
CSS significa “Cascading Style Sheets”, ou seja “Folha de Estilo em Cascatas”. A id\u00e9ia aqui \u00e9 que os estilos CSS s\u00e3o aplicados um em cima do outro, estilizando o documento HTML.<\/p>\n
O foco desse curso que estou dando agora \u00e9 HTML, ou seja, se voc\u00ea quer aprender CSS, fique atento que futuramente eu devo colocar um curso espec\u00edfico sobre CSS.<\/p>\n
Mas por enquanto, n\u00e3o vamos misturar as coisas.<\/p>\n
Para iniciar o aprendizado do HTML, voc\u00ea vai precisar de um editor de texto e de um navegador. Sim, apenas isso.<\/p>\n
Quanto ao navegador, sinta-se a vontade para utilizar aquele que voc\u00ea mais gosta: pode ser o Chrome, o Firefox, Opera etc.<\/p>\n
Quanto ao editor, vale aqui lembrar que quando eu digo “editor de textos”, estou falando de um editor de textos pr\u00f3prio para programa\u00e7\u00e3o.<\/p>\n
Voc\u00ea n\u00e3o pode, portanto, utilizar o Word ou Wordpad (editor do Windows). Isso porque esses editores adicionam algumas informa\u00e7\u00f5es a mais ao documento. E em se tratando de HTML, praticamente tudo o que voc\u00ea colocar no documento ser\u00e1 exibido.<\/p>\n
Voc\u00ea pode utilizar o Bloco de Notas do Windows, por exemplo. Ele \u00e9 um editor de texto puro e n\u00e3o vai adicionar nenhuma informa\u00e7\u00e3o a mais no seu arquivo.<\/p>\n
Ali\u00e1s eu recomendo que no come\u00e7o voc\u00ea realmente utilize o bloco de notas, para ir se familiarizando com a sintaxe dos comandos HTML.<\/p>\n
Futuramente, quando voc\u00ea j\u00e1 estiver entendendo como as coisas funcionam e j\u00e1 tiver decorado os comandos, poder\u00e1 migrar para um editor espec\u00edfico para desenvolvedores.<\/p>\n
Algumas sugest\u00f5es s\u00e3o: Sublime Text, Brackets, Atom, Notepad++, etc. Sinta-se livre para pesquisar e escolher aquele que voc\u00ea se sentir mais a vontade. Eu, particularmente utilizo o Sublime Text.<\/p>\n
Existem alguns editores com o Dreamweaver por exemplo, que permitem que voc\u00ea desenvolva seu c\u00f3digo de uma forma mais f\u00e1cil.<\/p>\n
Mas \u00e9 concenso entre os desenvolvedores que voc\u00ea tem muito mais controle do que est\u00e1 fazendo se voc\u00ea mesmo escrever seu pr\u00f3prio c\u00f3digo. E no caso do Dreamweaver, ele pode atrapalhar um pouco colocando estilos css inline (maiores explica\u00e7\u00f5es no curso de CSS), o que n\u00e3o \u00e9 uma coisa boa.<\/p>\n
Atualmente, estamos usando o HTML 5.2 e antes disso, tivemos outras vers\u00f5es. Abaixo voc\u00ea pode conferir as vers\u00f5es e o ano de lan\u00e7amento.<\/p>\n
Basicamente, o que voc\u00ea precisa saber \u00e9 com o XHTML tivemos uma mudan\u00e7a significativa. E do XHTML para o HTML5 tamb\u00e9m.<\/p>\n
Muito resumidamente, o XHTML permitia que voc\u00ea escolhesse a forma como HTML iria trabalhar. Existia uma forma chamada “Strict”, que travava seu documento em caso de erro.<\/p>\n
Ou seja, se voc\u00ea estivesse trabalhando nesse modo e houvesse um erro, nada seria exibido. Isso \u00e9 o que se chamava “tratamento draconiano” de erros, em alus\u00e3o ao imperador romano Draco que punia com morte os menores crimes.<\/p>\n
Essa vers\u00e3o, embora fosse um pouco mais chatinha de se trabalhar, for\u00e7ava os desenvolvedores a terem um c\u00f3digo mais correto, sem fazer gambiarras.<\/p>\n
Explico: quando voc\u00ea abre uma p\u00e1gina em um navegador, ele vai ler o documento HTML e exibir o conte\u00fado para voc\u00ea. Mas e se o desenvolvedor cometeu algum erro? Nesse caso, o navegador “se vira nos trinta” e exibe a p\u00e1gina de alguma forma.<\/p>\n
Assim, as vezes ele pode corrigir o problema e voc\u00ea nem iria perceber, ou ele pode corrigir e aparecer algum bug.<\/p>\n
Mas, se voc\u00ea 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.<\/p>\n
Isso era ruim do ponto de vista do usu\u00e1rio, j\u00e1 que se um erro existisse a p\u00e1gina n\u00e3o seria exibida, mas por outro lado, for\u00e7ava os desenvolvedores a utilizarem boas pr\u00e1ticas.<\/p>\n
Quando eu comecei a aprender HTML procurei trabalhar dessa forma, porque isso me for\u00e7ou a aprender da forma correta.<\/p>\n
Espero que voc\u00ea tenha gostado das explica\u00e7\u00f5es e esteja pronto para colocar a m\u00e3o na massa.<\/p>\n
Escolha seu navegador e editor favoritos e vamos para o pr\u00f3ximo post do nosso Curso de HTML Gr\u00e1tis – 2.<\/p>\n","protected":false},"excerpt":{"rendered":"
Se voc\u00ea sempre quis um Curso de HTML gr\u00e1tis, seja bem vindo! Aqui eu pretendo come\u00e7ar a abordar alguns temas para voc\u00ea poder dar o pontap\u00e9 inicial no desenvolvimento web. Antes de come\u00e7ar, saiba que o mercado de desenvolvimento est\u00e1 em constante crescimento. Mas tamb\u00e9m \u00e9 preciso lembrar que voc\u00ea vai ter que estudar bastante….<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6],"tags":[8],"_links":{"self":[{"href":"https:\/\/www.labweb.com.br\/blog\/index.php?rest_route=\/wp\/v2\/posts\/309"}],"collection":[{"href":"https:\/\/www.labweb.com.br\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.labweb.com.br\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.labweb.com.br\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.labweb.com.br\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=309"}],"version-history":[{"count":1,"href":"https:\/\/www.labweb.com.br\/blog\/index.php?rest_route=\/wp\/v2\/posts\/309\/revisions"}],"predecessor-version":[{"id":310,"href":"https:\/\/www.labweb.com.br\/blog\/index.php?rest_route=\/wp\/v2\/posts\/309\/revisions\/310"}],"wp:attachment":[{"href":"https:\/\/www.labweb.com.br\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=309"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.labweb.com.br\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=309"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.labweb.com.br\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=309"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}