Java para Web

Elemento

Um elemento HTML é sempre representado pelos sinais de < e > (maior e menor que). Esses elementos correspondem aos nós da árvore no HTML, podendo ser aninhados de forma a construir uma estrutura de dados coerente para o navegador e outros clientes que farão a leitura do documento. Os elementos HTML são previamente definidos por especificação e possuem funções variadas: definir parágrafos, incluir imagens e videos, referenciar outros documentos, definir uma estrutura semântica. A maioria dos elementos possui uma tag de abertura <nome_elemento> e de fechamento </nome_elemento>, indicando o fim do bloco.

Atributo

Os atributos estão sempre relacionados com um elemento HTML. Estes atributos possuem geralmente a característica de personalizar o comportamento de um determinado elemento ou fornecer instruções adicionais para o interpretador (navegador). Alguns atributos podem ser utilizados em praticamente qualquer elemento (como o id e class), enquanto outros são específicos de um determinado elemento.

O Cascading Style Sheet (CSS) é uma linguagem de estilos usada para estilizar documentos escritos em linguagens como HTML, XHTML (uma reformulação da linguagem HTML com o padrão XML), SVG (linguagem baseada no XML para representação de gráficos vetoriais), XUL (linguagem da Mozilla para interfaces gráficas).

O CSS é capaz de identificar a estrutura implementada no HTML e especificar alternações na estilização de sua apresentação. Com essa linguagem, é possível realizar estilizações simples de texto - como alterar a cor e tamanho de um texto - até criação de colunas e grids e animações complexas.

Página HTML sem estilização

Exemplo de Folha de Estilos

Página HTML com estilização CSS

Os dois exemplos acima representam em ordem como uma folha de estilos é aplicada a um documento HTML. Após organizar a estrutura do documento HTML, definimos uma folha de estilo através de uma sintaxe própria. Essa folha é utilizada pelo navegador para aplicar adequadamente o estilo definido.

O CSS é uma linguagem baseada em regras, dessa forma utilizamos uma sintaxe padronizada para declarar regras que serão aplicadas aos elementos, como no exemplo a seguir:

h1 {
    color: red;
    font-size: 5em;
}

A regra acima pode ser lida da seguinte forma:

• h1 refere-se ao elemento HTML, essa declaração é chamada deseletor
• Em seguida, utilizamos as chaves para encapsular as regras que pretendemos aplicar ao seletor
• As linhas color: red; e font-size: 5em são aspropriedades que pretendemos modificar e seus respectivos novosvalores

Dessa forma, para fins didáticos, podemos descrever a sintaxe do CSS da forma abaixo:

seletor {
    propriedade: valor;
    ...
}

Assim como dentro de um seletor podemos descrever várias propriedades diferentes, também podemos adicionar vários seletores em um mesmo documento:

h1 {
    color: red;
    font-size: 5em;
}

p {
    color: black;
}

Usando o exemplo acima, podemos definir o estilo de qualquer elemento HTML em um documento. O conjunto de regras de cada seletor vale para todos os elementos do mesmo tipo, no entanto, existem casos onde desejamos definir regras mais complexas ou seletivas para os elementos, por exemplo:

• Como aplicar as regras apenas para alguns parágrafos (elemento p)?
• Como aplicar as regras apenas para um elemento específico?
• Como aplicar as regras apenas para parágrafos (p) que estão dentro do elementomain?

A maneira mais adequada de introduzir estilização a um documento HTML é através da criação de uma folha de estilos em um arquivo separado. Dessa forma, separamos as responsabilidades em arquivos diferentes e podemos facilmente modificar a apresentação de uma página através da substituição desse arquivo. Todo arquivo do tipo CSS terá a extensão .css para fins de identificação.

h1 {
    color: red;
    font-size: 5em;
}

p {
    color: black;
}

Anexando a folha CSS ao documento HTML

Para que a folha de estilos seja aplicada, precisamos especificar no documento HTML o local de nossa folha no sistema de arquivos. Para isso, usaremos o elemento link, como no exemplo a seguir:

<head>
    <link rel="stylesheet" href="style.css">
</head>

Repare que incluiremos o elemento link dentro do elemento head da página HTML. Isto é o suficiente para vincular nosso arquivo CSS ao documento HTML.

Outras formas de usar

Além da utilização através de um arquivo separado, também podemos usar o CSS diretamente em um documento HTML, sem necessidade de anexar um arquivo com a folha de estilos, através dessas duas maneiras:

• Usando o elemento style que encapsula a mesma sintaxe que usamos em um arquivo CSS:
  html index.html

  <style>
      h1 {
          color: red;
          font-size: 5em;
      }
  </style>
  

• Ou usando o atributo style dentro de um elemento HTML. Ex.:<p style="color: red;"></p>

A base da estilização do CSS é a boa definição de seletores. É através deles que o navegador reconhece quais são os elementos cujo as regras devem ser aplicadas. De maneira geral, temos os seguintes tipos de seletores no CSS:

• Seletores de Elementos (Ex.: .p), definem regras para todos os elementos HTML do mesmo tipo.
• Seletores de Classe (Ex.: .NomeDaClasse), definem regras para todos os elementos HTML que possuem a propriedade class igual ao identificador inserido depois do ponto.
• Seletores de Identificadores (Ex.: #Id), definem regras para o elemento HTML que possuem a propriedade id igual ao identificador inserido depois da cerquilha.

Algumas propriedades comuns que podem ser utilizadas nas regras do CSS, dentro de um seletor:

• color - Altera cor do texto dentro do elemento (Ex. de Valores:red, green, #555555, #FFF)
• background-color - Altera a cor de fundo do elemento (Ex. de Valores:red, green, #555555, #FFF)
• border - Altera o estilo da borda do elemento (Ex. de Valores:1px solid red)
• font-family - Especifica a família de fontes a ser utilizada (Ex. de Valores:'Serif', "Times New Roman", Times, serif)
• height - Especifica a altura de um elemento (Ex. de Valores:1rem,20px, 50%)
• width - Especifica a altura de um elemento (Ex. de Valores:1rem,20px, 50%)
• margin - Altera o tamanho da margem externa do elemento (Ex. de Valores:1rem, 20px, 50%)
• padding - Altera o tamanho da margem interna do elemento (Ex. de Valores:1rem, 20px, 50%)
• text-align - Especifica o alinhamento do texto dentro do elemento (Ex. de Valores: left, center, justify)
• text-transform - Altera a capitalização do texto dentro do elemento (Ex. de Valores: capitalize, uppercase, lowercase)
• line-height - Especifica a altura da linha do texto dentro do elemento (Ex. de Valores: 1rem,20px, 50%)
• list-style - Altera o marcador de uma lista (Ex. de Valores: none, url(), square)

Crie uma página em HTML que contenha uma lista contendo jogos, filmes ou séries do seu gosto. Esta lista deve conter:

• Uma sinopse;
• Uma seção com imagens;
• Uma lista contendo nome e descrição dos personagens;
• Um link para uma página externa (ex.: Wikipedia);
• Outras informações também são bem-vindas.

Faça a estilização ao seu gosto.

Crie uma página chamada criacao_personagem.html que contenha um formulário para criação de um personagem, contendo os seguintes dados:

• Nome do Personagem [nome]
• Cidade Natal (Thais, Carlin, Venore) [cidade]
• Classe (Guerreiro, Arqueiro, Mago) [classe]
• Raça (Humano, Elfo, Anão) [raca]
• Realizar Tutorial? (Boolean) [tutorial]

O formulário deve ser do tipo GET e enviar os dados para https://venson.net.br/professor/ws/personagem

Crie um script na linguagem javascript para o envio do personagem. Os dados do formulário só devem ser enviados ao servidor caso sigam as seguintes regras: :

• O nome do personagem deve conter pelo menos 3 letras
• O personagem não pode iniciar com as palavras:
  • Admin
  • GM
  • Moderador
• É proibido elfos em venore e anões em carlin

Mensagens devem ser mostradas para o usuário informando sobre os erros.