Imersão Dev: Introdução ao Curso
A Imersão Dev é um curso gratuito de programação, realizado pela Alura, e começará no dia 30 de Janeiro de 2023.
Para mais informações, leia o meu o meu post explicando sobre: Imersão Dev: Um Novo Marco na Comunidade Dev
Entendendo As Linguagens
No curso, serão apresentadas as Lingugens HTML, CSS e JavaScript: As linguagens da Web. Todas as paginas que você visita no seu navegador precisam dessas três linguagens funcionando harmonicamente para funcionar. Vamos entender como funciona cada uma delas.
O HTML
O HTML vem do termo em inglês Hyper Text Markup Language, ou seja, é uma linguagem de marcação. Perceba a página web do TabNews. Ele tem texto, cabeçalhos, rodapé, etc. Todas essas informações relacionadas ao conteúdo da página é feito por meio do HTML.
O CSS
O CSS significa Cascading Style Sheet, é a linguagem de estilização do HTML. Com ela, você pode Adicionar Estilos ao conteúdo da página, como mudando elementos de posição, trocando fontes, adicionando margens, entre outros.
O JS
O JS (Comumente chamado de JavaScript) é a linguagem de de programação para a Web. Perceba que das três principais linguagens, o JS é a única linguagem de programação. Ele adiciona as funcionalidades dinânicas em uma página. Por exemplo, as caixas de alerta do navegador ou até funções mais complexas, como auto-complete de formulários, entre outros.
Exemplos
Vamos criar uma página simples, com apenas um título, subtítulo e texto, com uma caixa de alerta quando a acessarmos.
HTML
O HTML é separado em Tags. As Tags são elementos para representar textos, imagens, formulários, etc. Quase todas as tags precisam ser abertas e fechadas em algum momento. A tag mais famosa é a tag de título, que é o <h1>.
Quando abrimos uma tag, como por exemplo, a tag h1 isso significa que a partir daquele ponto, todo o texto será classificado como um título. O </h1>, com uma barra antes do título da tag, representa o fim da tag, ou seja, o conteúdo após o fechamento não será mais classificado como título.
Mas também existem as tags que não necessitam de um conteúdo ou algo do tipo, então escrevemos-a de um jeito diferente. A tag de nova linha (br), por exemplo, é usada assim </br>.
Um exemplo com um título (h1), subtítulo (h2) e texto (p), separados entre uma nova linha (br):
<h1>Título</h1>
<p>Hello, World!</p>
</br>
<h2>Subtítulo</h1>
CSS
Para estilizar elementos em uma página por meio do CSS, precisamos entender que, existem vários seletores (Classes, Id, Tags HTML, etc), e esses seletores dirão quais elementos receberão o estilo. Neste exemplo, usaremos o seletor mais simples, o seletor de Tags HTML. Dentro do conteúdo, colocamos chaves ({ }), e uma ou mais regras com um valor, como por exemplo, a regra de color, que define a cor do texto.
h1 {
color: blue;
}
h2 {
color: red;
}
JS
Famos fazer um alerta que aparece com a mensagem "Olá, Mundo: Essa mensagem está sendo imprimida pelo JavaScript!". Para isso, usamos a função alert("MENSAGEM").
alert("Olá, Mundo: Essa mensagem está sendo imprimida pelo JavaScript!")
Juntando Tudo
Para juntarmos todo o código que programamos até agora, colocaremos todos eles dentro do HTML. O Código CSS dentro da tag <style> e o código JavaScript dentro da tag <script>.
<style>
h1 {
color: blue;
}
h2 {
color: red;
}
</style>
<h1>Título</h1>
<p>Hello, World!</p>
</br>
<h2>Subtítulo</h1>
<script>
alert("Olá, Mundo: Essa mensagem está sendo imprimida pelo JavaScript!")
</script>
Continuação
Acesse Esse Post para se aprofundar mais em JavaScript.
Sobre Mim 🐘
Me Chamo Erick. Desenvolvedor PHP (Symfony).