Olá desenvolvedores, nesta continuação do desenvolvimento de uma tela de cadastro, aprenderemos como o CSS & HTML se integram ao Java web. No tutorial anterior iniciamos com o HTML um mini e rápido treinamento de front-end. Onde não tencionamos abranger todo o escopo do desenvolvimento de interfaces. Porém, lhe daremos as ferramentas necessárias, para, caso queira, você possa se aprofundar mais e solidificar seus conhecimentos de modo a desenvolver interfaces cada vez melhores para os seus sistemas.

SUBINDO O PROJETO

Vamos começar “startando” o servidor clicando em start na aba Servers da view para “subir” o projeto. Feito isso agora digite no navegador localhost:8080/front-end.

Veja que até o momento o que temos é um HTML puro, fazendo a marcação dos campos do formulário. Iremos então utilizar o CSS para estilizar o formulário, torná-lo visualmente melhor.

CSS NA PRÁTICA

Não utilizaremos uma folha de estilho separada, que é um dos meios mais comuns em desenvolvimento web de estilizar um documento HTML. Podem ser feitas três tipos de estilização, dentro da própria tga utilizando o style e seus atributos, inline ou em uma folha de estilo separada.

A estilização inline, é feita dentro do cabeçalho <head></head> do documento HTML, logo acima da tag body. A maior parte das nossas estilizações serão feitas dentro da tag, porém, antes vamos definir uma estilização que irá pegar todos os elementos de texto dentro do “body”.

<head>
<style>
   body{
     text-transform:uppercase;
   }
</style>
</head>

Mas vamos utilizá-lo dentro da própria tag. Dessa forma utilizaremos o CSS para adicionar uma borda (border-radius) ao botão e redefinir a largura (width). Atente-se para o ponto e vírgula após cada atributo do estilo.

<input type="submit" value="Salvar" style=”width: 100%; border-radius: 5px;”>

Nas demais tags de campo de texto apenas adicionaremos um “border-radius”, deixando-as igualmente com os cantos arredondados.

<input type="text" id="login" name="login" style=” border-radius: 5px;”>

Podemos também colocar uma cor de fundo na tabela, utilizando o atributo de estilo “background-color”. Caso não conheça códigos hexadecimais, você pode encontrar neste link, uma tabela de cores que será de grande auxílio.

<table class="form" style=”background-color: CFCFCF”;>

EM POUCAS PALAVRAS

O objetivo maior deste tutorial foi apresentar a você, programador iniciante, o CSS. É verdade que não criamos uma bonita estilização para o nosso formulário, mas se você se aprofundar um pouco mais será capaz de criar sistemas lindamente desenhados que proporcionarão uma ótima experiência para o usuário.

O curso de Formação Java Web, tem seu foco voltado para o back-end, entretanto, não podemos fugir das implementações de front-end, ainda que sejam simples. Eu fico por aqui, nos vemos na ultima parte deste minitreinamento onde falaremos sobre o JavaScript.