Já criei tópico por aqui falando bem rasamente de web, que foi o tópico onde foi criada a Blastter.com. Como web é um mercado bem abrangente e muita gente tem interesse em montar um site ou criar um aplicativo mobile (sim, é possível criar um app mobile com conhecimentos de web), então em paralelo aos tópicos de Python, vou jogar conteúdo de web por aqui agora também.
Basicamente deve-se aprender 3 linguagens para conseguir desenvolver um site.
1. HTML: não é linguagem de programação, e sim de marcação. Você marca textos dentro de tags html e constrói o esqueleto do seu site ou do seu app mobile.
2. CSS: apesar de ter certos elementos de lógica no CSS, ele é uma linguagem de criação de estilos. Ele pega o esqueleto do HTML e o torna mais apresentável para o usuário, mais bonito.
3. JavaScript: linguagem de programação que tá crescendo bastante. É a linguagem da web. Qualquer pessoa que usa um navegador como Chrome ou Firefox já tem a opção de programar em JavaScript abrindo o console do navegador. No Chrome, o atalho é Ctrl + Shift + J, no Firefox é Ctrl + Shift + K. Experimentem aí, vai abrir uma janela parecida com o terminal do sistema, onde usamos pra programar Python. Dando um Hello World em JavaScript:
JavaScript tá se metendo em tudo ultimamente. Dá pra usar pra desenvolver mobile, como já dito. Dá pra ser a linguagem do back-end de uma aplicação (como Python, C#, Java, Ruby), fora muitas outras possibilidades.
Mas vamos começar do começo, com HTML.
Ao criar scripts Python, adicionamos a extensão .py ao fim de um arquivo. Arquivos HMTL são aqueles que têm a extensão ".html" e podemos abrir com qualquer browser.
Então, criando nosso primeiro html:
EDIT: Saiu todo o código sem quebras de linha, vejam o meu primeiro comentário abaixo com o código estruturado.
<!--Este é um comentário em HTML-->
<!--Abaixo exemplos das tags de cabeçalho e títulos-->
<!--Lembre-se de sempre fechar a tag com a barra "/"-->
<h1>Este é um título h1</h1>
<h2>Este é um título h2</h2>
<h3>Este é um título h3</h3>
<h4>Este é um título h4</h4>
<h5>Este é um título h5</h5>
<h6>Este é um título h6</h6>
<!--Agora temos exemplos de parágrafo-->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec erat nec nisl vulputate elementum. Quisque odio mi, laoreet eget suscipit nec, sollicitudin non ipsum. Pellentesque vehicula felis nunc, eget pretium neque efficitur nec. Fusce eget commodo ex. Nam luctus iaculis tortor, dictum tempor leo maximus at. Donec ullamcorper venenatis urna, sodales dignissim nibh mollis varius. Nunc hendrerit at felis sed sodales. Pellentesque consectetur neque metus, vitae sagittis justo porta quis. Quisque commodo risus nisl, quis posuere felis ornare at. Pellentesque facilisis placerat sagittis. Nam aliquam ullamcorper sapien in pharetra. Ut ac nisl leo. Nunc accumsan a mauris quis fringilla. Aliquam molestie consectetur consectetur. Nunc vitae lobortis dui, ut dapibus ante. Donec id quam et ex imperdiet feugiat.</p>
<p>Fusce et convallis metus. Curabitur rhoncus dui nulla, sit amet convallis sapien eleifend vitae. In id lectus libero. Morbi molestie turpis orci, quis facilisis sapien tempus nec. Donec congue iaculis felis id rutrum. Curabitur et tristique urna. Suspendisse nisi dui, ultrices eu facilisis aliquet, porttitor non justo. Suspendisse dolor augue, rutrum at nunc quis, tincidunt finibus orci. In vitae consectetur metus. Aenean vitae mollis lacus. Duis a neque nulla. Mauris lacus eros, malesuada id eros quis, pretium aliquam dolor.</p>
<!--Deu vontade de adicionar uma imagem ao meu site-->
<!--O atributo "src" pede o link da imagem no computador ou na internet-->
<!--O atributo "alt" é um texto alternativo para a imagem, caso ela não carregue será exibido o texto-->
<p>Bastter.com</p>
<img src="Bastter.com - Seu melhor amigo/mercado/images/logo-bastter-pc.png?v2" alt="Logo da Bastter.com">
<!--Abaixo preciso adicionar uma quebra de linha para o link não ficar ao lado da imagem. Testem rodar sem a tag abaixo-->
</br>
<!--Deu vontade de criar um link para o site da Bastter agora-->
<!--A tag de link recebe o atributo "href", que é o link para onde o usuário será levado ao clicar no texto dentro da tag <a>-->
<a href="https://www.bastter.com">Melhor site de HCAOCing do Brasil</a>
<!--Abaixo uma lista não ordenada das ações recomendadas da semana que eu achei na Bastter-->
<p>Carteira recomendada da semana</p>
<ul>
<li>MOVI3</li>
<li>SMFT11</li>
<li>PETR4</li>
<li>PDGR11</li>
</ul>
<!--Abaixo uma lista ordenada do que aprendi na Bastter-->
<p>Coisas que aprendi na Bastter.com</p>
<ol>
<li>Usar a água do ovo cozido pra fazer café</li>
<li>Posso ser mais rico sem trabalho na Tailândia do que trabalhando no Brasil</li>
<li>HCAOCing é coisa do passado, a onda agora é mentoring</li>
<li>Voadora é amor</li>
</ol>
Salvando o arquivo acima como "pagina.html" e abrindo no navegador:
Se eu clicar no link acima, vou ser redirecionado para o melhor site de HCAOCing do Brasil, que é o link que tá dentro do atributo href da tag <a> logo acima.
Percebam que fica uma coisa muito quadrada, muito sem graça. O CSS que torna as coisas mais bonitas aqui. Mas isso vai ser assunto para depois. Ainda tem muitas tags html para vermos.
