#ChallengeCommunityWeek
- #HTML
Primeiros passos ao Html
Nem sempre é fácil começar do zero na programação, na verdade tudo que é novo não é da noite para o dia que se aprende, tão pouco no auge dos meus 33 anos, apesar disso, estou aqui iniciando meus estudos para me tornar um Dev, seja Front ou Back-end... e pensei, e porque não compartilhar alguns conhecimentos aprendidos até aqui. Não importa sua idade, qual plataforma de estudos ou qual for sua linguagem preferida, pois se tratando de programação o primeiro conteúdo a ser aprendido é o Html. Mas calma não tenha medo vamos por partes.
Mas o que é esse tal de Html?
O Html, é conhecida como uma linguagem de marcação, ou mais especificamente (HyperText Markup Language — Linguagem de Marcação de Hipertexto) é o componente base da web, ou seja, a estrutura base de todo website, é sem dúvida a linguagem mais importante, pois sem ela não há como construir desenvolver um site do zero, ou entender suas ligações com as outras linguagens, seja o CSS, JAVA script e por aí vai... Porém calma! Nosso foco aqui vai ser apenas o HTML.
Origem do html
Em 2004, foi fundado o WHATWG (Web Hypertext Application Technology Working Group) por desenvolvedores de grandes empresas como Mozilla, Apple e Opera. Dando início ao trabalho de criação da nova versão do HTML. Em 2008 foi lançada uma versão beta, que mais tarde seria lançada a versão definitiva: o HTML5.
O HTML 4 estagnou de forma que já não conseguia atender a todas as necessidades do mercado. Portanto, era necessário integrar plugins externos, como o flashplayer, para poder garantir as novas funcionalidades.
O HTML5 surgiu em 2014, com muitas mudanças e atualizações na linguagem, já que é a mais utilizada no mundo inteiro. O HTML , criado por Tim Berners Lee, surgiu em 1991 e logo se popularizou, por ser a principal linguagem utilizada na web. Hoje ela é considerada um dos padrões web supervisionada e controlada pela W3C (The World Wide Web Consortium) .
Desde 1999 o HTML não recebia uma grande atualização.
Tags html estruturais
As tags abaixo são utilizadas nos documentos em HTML5, e têm função estrutural no seu código. Portanto, essas tags têm grande importância na questão semântica da sua página, saber utilizá-las pode adequar o seu código para uma melhor visualização por parte do navegador e do usuário, além de proporcionar uma otimização para os processos de SEO.
<header></header> – define um cabeçalho. Portanto, todo conteúdo que estiver dentro dela faz parte de um cabeçalho, podendo ser utilizado dentro de outras sessões. Não confundir com as tags <head>;
<main></main> – Essas tags representam o conteúdo principal do seu corpo, ou seja, o conteúdo relacionado diretamente com o tópico central da página ou com a funcionalidade central da aplicação;
<footer></footer> – Essas tags definem um rodapé para a página, geralmente utilizadas no final da página;
<section></section> – Essas tags definem uma sessão para sua página;
<article></article> – Essas tags definem um artigo da sua página. Nesse sentido, são utilizadas para separar o conteúdo da sua página. Muito utilizado principalmente por blogs ou páginas de conteúdo;
<nav></nav> – Essa tag define um conteúdo de navegação. Portanto, é muito utilizado em conjunto com listas e na criação de menus;
<div></div> – Define uma divisão da página. Desta forma, funciona como um container para conteúdo de fluxo. Uma vez que não possui um valor semântico, é muito utilizado para organizar melhor o conteúdo. Anteriormente ao HTML5, era utilizado no lugar das categorias acima.
Tags HTML de listas
Para ser criada uma lista, podemos utilizar uma lista ordenada, a partir das tags <ol> </ol>, ou uma lista não ordenada, a partir das tags <ul> </ul>. Posteriormente, incluímos dentro da lista os elementos da mesma, dentro das tags <li> </li>.
Vejamos os exemplos a seguir:
<p>Minha lista ordenada:</p>
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
<p>Minha lista não ordenada:</p>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
Bom agora que você já aprendeu um pouco sobre o HTML, precisamos saber como, onde podemos escrever nossos códigos , Existem muitos programas editores que poderíamos utilizar, até mesmo se você pesquisar no google, irá aparecer muitas opções, podendo até utilizar o bloco de notas, porém já que existem programas com muitas ferramentas que ajudam a deixar nosso código mais estruturado e até mais prático, evitando possíveis erros que poderão acontecer, e pode ter certeza que você irá errar muito, mas com o passar do tempo você irá se aperfeiçoando e decorando cada sintaxe de seu código evitando erros comuns, seja de escrita ou quando usar qual comando. Bom eu irei indicar o software chamado Visual Studio Code, que é o que eu mais utilizo atualmente.
O VSC (Visual Studio Code) é leve na execução, sendo um dos editores de código mais leves e rápidos que temos hoje no mercado. Com ele você pode utilizar para criar seu primeiro arquivo em html, assim como utilizar outras linguagens de programação. Mas primeiro vamos ver como encontramos ele, para fazer o download em nosso computador ou notebook.
Para baixar e instalar basta entrar no seguinte link:
https://code.visualstudio.com/download
O Visual Studio Code pode ser instalado em outros SO (Sistemas Operacionais) Linux, Mac e Windows. Porém cada sistema operacional tem seu jeito de instalar, porém escolha o programa compatível com o seu sistema operacional específico caso contrário não será reconhecido pelo seu sistema sendo impossível a sua correta instalação.
Requisitos
Mas sempre é interessante sabermos se o programa irá rodar bem em nosso PC. Abaixo segue os requisitos recomendados.
Desta forma, os requisitos de hardware são baixos, porém recomendamos uma máquina com pelo menos Intel Core i3, Dual Core, com 8GB de Ram e no mínimo 128GB de disco.
Recomendamos também manter o Sistema Operacional sempre atualizado, e em caso de uso do Windows, utilizar sempre a versão 10 ou superior.
Algumas dicas importantes
Eu recomendo, se você tiver condições utilizar dois Monitores, pois facilitará sua visualização, tendo melhor desempenho e agilidade. Você pode fazer o seguinte: em uma das telas você deixa o VSC aberto e na outra o navegador, para você visualizar instantaneamente as modificações durante a criação dos seus códigos.
Versão em português
Logo quando você for instalar o VSC haverá uma atualização para o seu programa ir para uma versão em português, então fique tranquilo que após a instalação dela, você só precisa fechar o programa e abrir novamente para que a atualização funcione, caso o programa peça para reiniciar ou reinicie automaticamente está tudo certo.
Outra dica é habilitar o salvamento automático no seu VSC, assim você evita esquecer de salvar seu documento. Vamos ver como habilitar no VSC.
Habilitando salvamento automático no VSC
Primeiro entre no menu arquivo e agora procure a opção salvamento automático, e marque clicando em cima e pronto. Sempre criar uma pasta com seus projetos, para não virar bagunça, e todo arquivo novo em html, você pode salvar como index.html para que este documento possa ser compreendido pelo seu navegador. Sempre verifique se seu navegador está atualizado, caso não esteja pode não funcionar corretamente a visualização de sua página.
Extensões no Visual Studio Code
Após instalar seu Visual Studio Code você pode instalar algumas extensões úteis.
Para instalar as extensões siga o passo a passo abaixo, logo depois de efetuar a instalação da extensão é recomendado fechar o programa para que as alterações sejam efetuadas.
Instalando extensões no VSC
Menu Arquivo - Preferências- extensões digite na caixa de pesquisa uma destas extensões abaixo: e clique na opção instalar, essas são algumas que tenho instalado. Mas sempre procure saber mais sobre o programa, pesquise no youtube até mesmo aqui em nossa comunidade para saber mais a respeito.
*Live server: permite que você veja a sua página ao vivo no navegador
* Themes: permitem que você dê uma aparência totalmente única ao seu editor, às vezes as cores mais escuras nos temas podem ser melhores para focar mais nas suas linhas de códigos, mas escolha o que você melhor se adapta.
*IntelliCode: para te ajudar a autocompletar o seu código. É uma extensão que utiliza a inteligência artificial e o contexto do seu código para criar, e oferecer autocompletes.
Hora de Praticar
Bom que tal praticar um pouco, vou deixar aqui um ótimo exemplo para você poder estudar e treinar as diversas tags HTML. Crie um arquivo de texto e salve com o nome index e com a extensão .html e comece a treinar agora mesmo!
Mas antes crie uma pasta na sua área de trabalho com o nome projetos se preferir, agora
Abra o VSC e vá no menu Arquivo – Abrir Pasta localize a pasta que você criou na área de trabalho e vá na opção Selecionar Pasta.
Agora sim no ícone novo arquivo, crie um arquivo com o nome index.html
E agora é só digitar os comandos abaixo e praticar.
Segue nosso código de exemplo contendo uma estrutura de uma página em HTML.
<!DOCTYPE html>
<html>
<head>
<title>Título da página</title>
<meta charset="utf-8">
<style> /*AQUI VAI TODO NOSSO CÓDIGO CSS*/ </style>
</head>
<body>
<header> <!--criando um cabeçalho para nossa página com um menu-->
<h2>Minha Página</h2>
<nav><!--vamos criar um menu utilizando listas-->
<ul>
<li>Home</li>
<li>Meu menu</li>
</ul>
</nav><!--aqui finaliza o meu menu-->
</header>
<main>
<section> <!--vamos criar a primeira section do meu documento-->
<article>
<h3>Titulo do meu artigo</h3>
<p>Conteúdo do meu artigo</p>
<p>Mais conteúdo para o meu artigo</p>
<ol> <!--vamos criar uma lista ordenada-->
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
</article><!-- aqui finaliza meu primeiro artigo da section-->
<article>
<h3>Título do meu segundo artigo</h3>
<p>Conteúdo do meu segundo artigo</p>
<p>Mais conteúdo para o meu segundo artigo</p>
</article> <!--aqui finaliza meu segundo artigo da section-->
</section><!--aqui encerra a primeira section do meu documento-->
</main><!--aqui finaliza todo conteúdo principal do corpo da página-->
<aside>
<h4>Conteúdos relacionados</h4>
<ul>
<li>Página oficial da <a href="https://www.dio.me/sign-in/">Dio</a></li>
<li>item da lista</li>
<li>item da lista</li>
</ul>
</aside>
<footer>
<div><!--criando uma divisão para meu rodapé-->
<p>Inscreva-se para receber notícias</p>
<form method="post">
<input type="text" name="nome" placeholder="Digite seu Nome">
<input type="email" name="email" placeholder="Digite seu Email">
<input type="submit" name="enviar" value="Enviar">
</form>
</div>
<div><!--criando outra para meu rodapé-->
<h3>Minha primeira página html</h3>
<span>Todos os direitos reservados</span>
</div>
</footer>
<script>
//AQUI VAI NOSSO CÓDIGO DE SCRIPT (JAVASCRIPT)
</script>
</body>
</html>
Obs: Para você visualizar sua página, basta ir na opção GO live, que está localizada no canto inferior direito da janela do VSC, que abrira uma nova aba em seu navegador com sua página do html.
Super Dicas
Caro leitor, futuros Devs, para mandar bem no html, reuni algumas dicas que eu utilizo muito para melhorar meus conhecimentos e ficar mais perto de me tornar um expert em html, ainda posso ser ainda muito melhor, assim como você que chegou até aqui, persistência e paciência são essenciais para aprender qualquer coisa. Mas chega de enrolação e vamos para as dicas!
#1 Se inscreva em um curso introdutório, aqui na Dio! tem muitos cursos para iniciantes não só o Html, além de ter um conteúdo de primeira, sempre pode contar com pessoas dispostas a te ajudar a tirar todas as suas dúvidas.
#2 Faça um esboço, desenhe, escreva todas as informações necessárias para o desenvolvimento do seu site.
#3 Estude sempre, seja um conhecedor das famosas <tags>, estruturas do html.
#4 Pratique muito, não tenha medo de refazer, organize seu código, para não se perder. Tenha paciência, foco, estude 1h e meia por dia, crie o hábito de estudar. Corra atrás das informações, se atualize.
5# Nunca desista, pois a prática leva a perfeição, e a constância a voos maiores.
Considerações Finais
Bom chegamos ao fim deste artigo, mas acredito que este não pode ser considerado o fim de nossos estudos, pois existem infinitas possibilidades um mar de conhecimento a nossa espera, não deixe se estagnar, avance crie suas metas seus objetivos almejam conquistas maiores ainda, explore seu potencial e acredite em você, pois quando chegar lá, você verá o quanto você progrediu no caminho, como se desenvolveu e que ainda tem muito pela frente.
Eu apenas estou começando, e acredito que esse sim seja um dos primeiros passos ou o mais importante para se tornar um expert no html. Espero ter lhe motivado, ter feito parte desta sua caminhada. Até logo, futuro Dev, e está esperando o que para vir para a Dio!
Deivid de Souza
Criado em: 28/06/2022
