HomeDesenvolvimentoInício rápido: HTML, CSS & JS

Início rápido: HTML, CSS & JS

Desenvolvimento

Papa Neto | 16/out/2017


 

Opa! Tudo bem? Cansado de vídeo-aulas extensas e confusas sobre criação de páginas HTML? Seja bem-vindo ao tutorial TURBO para programadores iniciantes na arte do desenvolvimento WEB. Neste artigo iremos abordar a estrutura básica de uma página HTML, estilização simples com CSS 3 e uma introdução rápida ao JavaScript com Jquery.

O Jquery é uma biblioteca de funções escritas em JavaScript, feita para simplificar a vida dos desenvolvedores WEB.
Como isso é possível? Por exemplo, para selecionar um elemento através do ID:

→ com JS puro: document.getElementById(“id-do-elemento”);

→ com Jquery: $(“#id-do-elemento”);

Uma mão na roda, certo? Vamos prosseguir.

O editor

Para programar com essas linguagens não é preciso um software especial, você pode escrever os códigos no bloco de notas e abrir o arquivo com qualquer navegador que ele será interpretado. Aqui usaremos o SublimeText 3 como editor, mas fique à vontade para usar outro de sua preferência.

A estrutura HTML

Se uma página web fosse uma construção civil, o HTML seria o piso, paredes, portas e janelas. Já o CSS seria a tinta e os azulejos. Ou seja, não existe CSS sem HTML.
Estruturas HTML são formadas a partir de TAGS. Aqui vão as principais TAGS, aquelas que não podem faltar:

Tags são abertas com <nome> e fechadas por </nome>. O que está entre <!– –> são comentários, textos que o navegador não enxerga. Porém, ainda não foi criado nenhum layout. Vamos fazer isso agora?

Dentro da tag <body> iremos criar um cabeçalho, local onde ficaria o LOGOTIPO ou menu, uma sessão onde ficaria o conteúdo da página e um rodapé, que carrega as informações como endereço, mapa, e-mails para contato, etc.

Salve o arquivo com a extensão .html e abra com o navegador.

exemplo 01

No lado esquerdo é como deverá abrir no seu navegador. Do lado direito é uma representação dos espaços que cada tag está ocupando.

Ok, muito bem! Mas, e ai? Que diabos de site é esse? Não fique aflito! Após estilizarmos com CSS, fará mais sentido. O que aconteceu aqui é o seguinte: nossas tags <header>, <section> <footer> tem, por padrão, “width=100%”, ou seja, sua largura toma a página toda, porém, sua altura seria igual a zero se não tivéssemos escrito nada dentro delas.

Outra coisa importante é que não é preciso lembrar o nome de todas essas tags, se tivéssemos escrito da forma a seguir, abriria do mesmo jeito no navegador:

Na maioria das vezes, a nomenclatura das tags é uma questão de organização. Confira a lista de elementos do HTML5.

O estilo CSS

Se a comparação com uma construção civil não deixou claro o que é um estilo CSS, a imagem a seguir irá reproduzir na integra o que seria isso.

Com algumas linhas de comando CSS podemos deixar nosso site mais interessante. Existem 3 formas de inserir um estilo em nossos elementos HTML. Vamos começar pelo jeito mais fácil, porém não recomendado. Este chama-se “Inline style“, que é inserido diretamente na nossa TAG que queremos estilizar.

Inline Style

O bloco de código a seguir refere-se ao button de borda verde da imagem anterior.

Dentro da TAG button, inicializamos o atributo style dessa forma: <button style=”” ></button>. Em seguida, passamos como valor os estilos que queremos aplicar, separados por ponto e vírgula. Nada complicado, não? Vamos prosseguir.

Há outras formas de escrever um estilo, por exemplo, a borda verde foi feita assim:

Mas poderia ser assim:

Bem melhor, concorda? Faça do jeito que você achar melhor. Existem centenas de estilos que uma tag HTML pode assumir, confira o GUIA DE REFERÊNCIA CSS.

A tag style

A segunda forma de estilizar um elemento HTML é criando uma tag <style> </style> dentro da tag head e passando os atributos CSS.

Diga qual tag receberá os estilos e entre { } você os insere, separados por ponto e vírgula. Adicionei mais alguns estilos ao resto da página, para deixá-la mais agradável. Porém, não adicionei ou removi algum da tag button. Sua página no navegador deve abrir assim:

Exemplo CSS 2

Estilos CSS em outro arquivo

A terceira forma é separar seus estilos em outro arquivo com a extensão .css e fazer um link com seu documento .html. Crie um arquivo com o nome style.css, copie o que está dentro da tag style e cole no arquivo recém-criado. Em seguida, você pode apagar a tag style do nosso head.
Para referenciar  o arquivo CSS em nosso HTML criaremos uma tag <link>, inserimos o atributo href=”” e dentro dele escrevemos o caminho até nosso arquivo CSS. Como eu criei ele na mesma pasta que está o arquivo HTML, precisarei escrever apenas seu nome.

Arquivo HTML

style.css

Agora você está fazendo isso de uma forma profissional! Quanto mais organizado seu código estiver, mais fácil será fazer modificações posteriores e achar falhas.

Estilos inseridos inline causam lentidão na hora de carregar uma página na web.

Classes e IDs

Da forma que fizemos até aqui, se criássemos outros buttons, todos eles receberiam borda verde, fundo branco, etc. Como podemos diferenciá-los? É aí que entram as classes IDs. Eles funcionam da seguinte forma: Criamos um atributo class=”” dentro da tag desejada e damos um nome a ela, por exemplo, class=”btn-verde”, em seguida, no nosso arquivo .css, substituímos a referência button por .btn-verde. 

ME MOSTRA LOGO ESSE CÓDIGO! Sem delongas, aí vai ele:

Parte que sofre alteração no arquivo HTML

Parte que sofre alteração no style.css

Fácil, concorda? O ID funciona da mesma forma, porém há restrições. Um elemento pode ter somante um ID e ninguém pode ter o mesmo ID que ele. Vamos criar outro button para exemplificar a usabilidade do ID.

Insira a seguinte linha no arquivo HTML logo abaixo do button de classe “btn-verde”:

Já no style.css insira o seguinte bloco ao fim do arquivo:

Abra no navegador e verifique

Agora você conhece uma fatia desse universo que é o desenvolvimento WEB. Faça suas modificações, crie mais layouts  e explore o GUIA CSS. Na próxima semana irei postar a parte final desse artigo falando somente sobre o JavaScript com Jquery.

Papa Neto
Atuo na área de programação web (back-end & front-end), além disso me interesso em qualquer área da programação que envolva tecnologias inovadoras e contribuintes para o progresso da humanidade em tornar a vida cada vez mais acessível.