O que é Javascript? Como usar na sua página? O Javascript foi criado em em 1995 por um integrante da Netscape, que futuramente virou a Mozila Firefox. Dentro do Javascript, temos objetos, arrays, variáveis, funções, eventos, animações, manipulação de html/css e entre outras muitas coisas possíveis de serem feitas, só usando essa linguagem. Para falarmos de Javascript é necessário entender o que é uma Linguagem de programação, então de forma resumida, é uma tecnologia que permite criar programas, mecanismos com funcionalidades diferentes. Client Side e Server Side No caso do Javascript, ele se dividi em lado do cliente (client-side) e lado do servidor (server-side), mas o importante para nós é entender a linguagem do lado do cliente. Então, javascript é uma linguagem web que permite dar dinamismo para sua página, funcionando em conformidade com o HTML e o CSS, permitindo a manipulação dos mesmos, ou criando outras funcionalidades próprias a partir da própria lingu...
Venho trazendo para o canal, vários vídeos sobre as tags HTML, mas já parou pra pensar o que é o HTML e como aplicar? Segundo a documentação oficial do Mozila Developer HTML é: Uma linguagem de marcação utilizada para dizer ao seu navegador como estruturar a página web que você visita, ou seja, a estrutura que damos para uma página!
Mas como aplicamos o HTML na página? É necessário usar “tags”, tags são elemento envolvidos pelo simbolo de "maior" e "menor" que quando colocamos na página defini algo para a gente!
Por exemplo, eu posso ter uma frase:
e definir que essa frase é um paragrafo, para isso eu colocaria a tag p e fecharia com a tag /p, a primeira tag que colocamos é conhecida como tag de abertura e a segunda tag no final é definida como tag de fechamento.
Ficaria dessa forma:
Mas, o que quer dizer a palavra Semântico para o HTML?
Semântico
Mas o que quer dizer que só porque colocamos essas tags, essa frase virou um paragrafo? Bem, isso quer dizer que nosso navegador, que é o responsável por interpretar o HTML e transformar de fato em página, entende que essas tags atribuem a esse texto a estrutura de paragrafo, resumindo, semanticamente o “robozinho” do navegador entende que deve atribuir características típicas, não necessariamente físicas, a esse elemento.
Semântico, quer dizer algo que tem um significado relativo, assim, como para nós humanos, uma palavra tem seu significado e até conseguimos descrever o que é só baseado na palavra. As tags fazem esse mesmo papel para o navegador, ele consegue entender e descrever o que é, e a partir disso interpreta e mostra na tela o seu resultado.
Aninhamento de Elementos
Então, pensando no significado da tag, sempre fica aquela pergunta, podemos colocar uma tag dentro de outra tag? E a resposta é sim, o nome disso é “Aninhamento de elementos”, é quando uma tag dá um significado para um elemento, mas queremos dar outro significado para algo especifico dentro do conteúdo desse elemento, e isso pode ser feito pegando todo o conteúdo dentro dele ou pegando apenas alguma partes. Vamos começar pelo mais básico, digamos que eu queira, dentro da frase que escolhemos, deixar uma palavra em bold, como faríamos? Pela lógica, e também pelo óbvio, pegamos uma palavra:
que está dentro da tag de abertura e fechamento e colocamos novas tags ao seu redor, aplicando assim o bold, como queremos:
Dessa forma, podemos aninhar elementos como queremos!Dando outras características ao nosso texto!
Block e Inline
Mas eu disse que tem outra forma de fazer isso, pegando o conteúdo completo dentro do elemento que já tem tags atribuídas a ele, como fazemos isso? Para entendermos isso, precisamos falar de: Block e Inline.
Pensa comigo, o “robô” do navegador, não sendo uma pessoa como nós, precisa que tudo seja explicado para ele nos mínimos detalhes, então ele precisa que expliquemos que um elemento vai ocupar só o espaço do conteúdo dentro dele, ou que seu tamanho vai ser maior que o conteúdo dentro dele. Isso define se o próximo elemento colocado vai aparecer do lado do elemento anterior ou embaixo por não caber na mesma linha. O nome desse processo é inline e block, sendo inline quando o elemento ocupa apenas o espaço do seu conteúdo interno, permitindo que o próximo elemento fique ao seu lado:
e block quando o elemento ocupa mais do que o espaço dentro do conteúdo interno, mas especificamente, todo o espaço da linha em que foi inserido, impedindo que outros elementos fiquem ao seu lado, obrigando que fiquem embaixo dele:
Resumindo, tudo trata-se de “caixas”, caixas pequenas ou caixas longas, ou mais especificamente: blocos, como um “bloco de construção”. Entenderam a ideia?
Sendo assim, para responder a pergunta que fizemos sobre como colocar um elemento envolvido dentro de tags, dentro de outra tag, nós trabalhamos com o principio de caixas/bloco, onde eu posso inserir novas caixas/bloco dentro de uma caixa anterior. Por exemplo, eu posso ter um paragrafo, e colocar uma caixa envolta desse paragrafo
nesse caso, usando o elemento "div", que ilustra bem essa ideia de uma caixa, não tendo um sentido muito semântico, a não ser a própria ideia de separar coisas uma das outras. O que temos então, é uma caixa dentro de outra caixa, que permite mais elementos, que vão poder ser inseridos como inline e block:
mas nunca ultrapassando o tamanho da caixa considerado “pai”, que no nosso caso é a "div".
Caixas sem fundo
Porém, também temos as consideradas “caixas sem fundo”, que são elementos que não aceitam conteúdo interno e são criadas apenas com uma tag de abertura, não possuindo uma tag de fechamento. Uma tag bem comum para explicarmos isso, é a tag "img", que é o resumo de image, ou seja, onde colocamos uma imagem que irá aparecer na tela. Mas, como você coloca a imagem, se esse tipo de tag não tem conteúdo interno? É ai que entra os “atributos”, que de forma resumida quer dizer: Características de uma tag, ou seja, onde definimos nome, espaço e valor para uma tag. No caso de img, nós temos um espaço que fica dentro dele, como um conteúdo, mas que não é separado por tag de abertura e fechamento, ela fica no mesmo espaço da tag:
aqui podemos imaginar, a tampa de uma caixa, onde você coloca algo em cima, ela não está dentro, mas está ocupando o mesmo espaço, sobre o elemento, entendeu?
A borda preta, seria nossa tampa da caixa, e a imagem, o conteúdo interno, não tão interno assim, dentro dela!
Poderíamos ficar muito tempo filosofando sobre o HTML em si, sua aplicação, sua anatomia, mas eu acho que por enquanto está bom. Nos vemos em uma próxima!
Comentários
Postar um comentário