Programação para Web I

Atributos globais são atributos que podem ser utilizados em qualquer elemento HTML. Mesmo em elementos que não estão no padrão do HTML, mas são implementados em alguns navegadores, os atributos globais podem ser utilizados (ainda que nem sempre tenham efeito).

Além dos atributos globais básicos que veremos a seguir, existem vários atributos que possuem como comportamento a manipulação de evento, como por exemplo: onclick,onloadou onchange. Esses atributos determinam comportamentos que são executados na ocorrência de algum evento, sendo utilizados com a linguagem javascript.

O atributo id define um identificador exclusivo que deve ser únicopara todo o documento. O objetivo principal desse atributo é identificar um elemento para que possa ser estilizado (CSS) ou manipulado (javascript). Além disso, é possível usar do identificador para criar links para pontos específicos da página, como veremos em seguida.

<form id="formularioCadastro"></form>

O valor do identificador deve seguir algumas regras:

• Não deve conter espaços;
• Não deve conter tabulações;
• Não deve ser utilizado duas vezes no mesmo documento;

Pode-se utilizar caracteres de separação (como _, - ou.). Porém eles não são indicados quando é necessário manter a compatibilidade com versões anteriores ao HTML 5, quando esse tipo de caractere não era permitido.

Como já mencionado, o identificador pode ser utilizado para permitir navegar para pontos específicos de um documento. Esse tipo de hiperlink pode ser chamado de Navegação por Âncoras.

Para criar um link para um ponto específico de uma página, podemos usar o elementoa, onde a URI informada no atributo href será valor do elemento precedido pelo caracter#:

<a href="#previsaoTempo">Veja a previsão do tempo</a> <section id="previsaoTempo">

No exemplo acima, o link deve redirectionar para a section cujo o identificador éprevisaoTempo. Dessa forma, não devem existir dois elementos com o mesmo nome na página. O direcionamento para o local destino é feito pelo navegador com base na renderização atual, dessa forma, a rolagem da página é automaticamente modificada para o ponto onde encontra-se o elemento. Caso o elemento já esteja em visualização na página, é possível que nada aconteça.

Faça o teste com este link, que redireciona você para a seção de exercícios desta página.

Repare também que esta é uma ótima forma de prover índices para as suas páginas, como podemos ver naWikipedia

Por fim, também podemos utilizar o valor do identificador de um elemento para apontar diretamente para ele através de um link externo, como no exemplo:

<a href="https://pt.wikipedia.org/wiki/Mozilla#Firefox">Informações sobre o Firefox</a>

O atributo class é utilizado como forma de agrupar elementos semelhantes sob um mesmo identificador. Ao contrário do id, o atributo class não exige que o valor seja único por documento. Sob esse atributo, podemos agrupar elementos com características semânticas semelhantes, como no exemplo:

<p id="nota01" class="nota">Isto é uma nota</p>
<p class="conteudo">Isto é um parágrafo que descreve o conteúdo da página</p>
<p id="nota02" class="nota">Isto também é uma nota</p>

Assim como o id, o atributo class também tem como função auxiliar a identificação dos elementos para fins de estilização (CSS) e manipulação (javascript).

O style é um atributo global usado para aplicar estilização CSS em um elemento. É importante destacar que o uso deste atributo tem como propósito principal permitir estilização rápida, geralmente para testes, e não é indicado para estilização de um documento em produção. O atributo style substitui o uso do elemento style.

<div style="background-color: red;">Veja a previsão do tempo</div>

O valor do atributo utiliza a mesma estrutura do documento CSS. O nome da propriedade que desejamos manipular + o valor que vamos dar a ela:

propriedade: valor;

Dessa forma, propriedade refere-se a um elemento estabelecido no CSS, cujo o valor depende de qual elemento estamos nos referindo.Também é possível alterar mais de uma propriedade com este elemento:

<div style="background-color: red; color: #FFFFFF;">Veja a previsão do tempo</div>

É importante lembrar que ao alterar o estilo de um elemento usando o atributo style, esta estilização é aplicada somente ao respectivo elemento, independente de sua classe ou id.

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?

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)

• Lista de propriedades CSS (inglês)
• Lista de propriedades CSS - MDN (português)
• Criador de Gradiente CSS
• Repositório de Fontes - Google

O seletor mais básico apresentado pelo CSS é o seletor de elemento, que define regras para todos os elementos de um mesmo tipo. Para declarar as regras, basta definir os respectivos elementos no HTML e seu nome no documento CSS:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>
    

li {
    font-family: 'Serif';
}

No exemplo acima, todos os elementos do tipo li serão estilizados com uma fonte do tipo Serif.

Podemos utilizar regras que se apliquem ao atributo class definido em elementos HTML. Para isso, utilizaremos o . (ponto) + o nome da classe, como no exemplo:

<p class="anotacao">CSS é muito legal!</p>

.anotacao{
    color: red;
}

Dessa forma, todos os elementos HTML que tiverem definido o valor de class paraanotacao deverão receber a estilização (nesse exemplo: a cor do texto será vermelha).

Podemos utilizar regras que se apliquem ao atributo id definido em elementos HTML. Para isso, utilizaremos o # (cerquilha) + o nome do identificador, como no exemplo:

<p id="recepcao">Bem vindo, Biro-Biro!</p>

#recepcao{
    margin: 20px;
}

Dessa forma, o elemento HTML que tiver definido o valor de id pararecepcao deverá receber essa estilização (nesse exemplo: a margem será de 20 pixels). Lembre-se que não é possível definir dois ou mais elementos HTML com o mesmo identiicador (id) dentro de um mesmo documento, por isso essa regra deve ser aplicada a somente um elemento.

Também podemos definir seletores que corespondam a elementos com atributos específicos. Para isso, utilizaremos a sintaxe [atributo=valor] precedido pelonome do elemento, como no exemplo:

<input type="password">

input[type="password"]{
    background-color: #222;
}

Dessa forma, todos os elementos input que possuirem o atributo type com o valor password deveram receber essa estilização (nesse exemplo: a cor de fundo será#222).

Outra maneira de definir regras mais complexas para os seletores é a utilização de seletores compostos. Podemos definir um conjunto aninhado de seletores, aplicando as regras somente aos seletores que seguirem a ordem definida, como no exemplo:

<p>Este paragrafo não será estilizado</p>
<footer>
    <p>Este paragráfo ganhará uma borda</p>
</footer>

footer p{
    border: 2px solid grey;
}

Nesse exemplo, apenas o segundo parágrafo será estilizado pois está aninhado dentro do elementofooter. Para criar essa regra específica, definimos o seletor composto no CSS na mesma ordem de encapsulamento do HTML (primeiro o elemento footer e dentro dele o elementop). Dessa forma, o segundo parágrafo, nesse exemplo, ganhará uma borda cinza de 2 pixels.

Os pseudo-seletores (ou pseudo-classes) são palavras-chave usadas no CSS para especificar estados especiais dos elementos HTML. Por exemplo, um elemento a possui algumas pseudo-classes como :visited, que são incluídas em links que já foram visitados pelo usuário. Dessa forma, podemos aplicar estilização específica a estes estados especiais de links:

a:visited{
    background-color: grey;
}

Entre outras pseudo-classes existentes em elementos HTML:

• :hover - ativado quando o mouse está sobre o elemento
• :checked - usada em alguns elementos de formulário
• :disabled - quando um elemento está desativado
• :enabled - quando um elemento esta ativado

Mais informações sobre pseudo-classes

As regras de precedência no CSS seguem a seguinte ordem, do menos importante para o mais importante:

1. Ordem de leitura (primeiras regras primeiro)
2. Seletores universais; ex: *
3. Seletores de elementos; ex: p
4. Seletores de classe, ex: .minhaclasse
5. Seletor de atributo, ex: input[type="text"]
6. Pseudo-seletor, ex.: div:hover
7. Seletor de ID, ex.: #minhaid
8. Atributo style do HTML, ex.: style="color: blue;"
9. Anotação !important

Utilizando esta página como base, crie um índice no local correspondente do código fonte que seja capaz de permitir a navegação por âncora entre todos os títulos/seções da página. Para isso, todos os títulos devem ser apresentados na ordem em que aparecem na página e aninhados em seus respectivos níveis (por exemplo, titulo h3 deve aparecer no índice aninhado dentro do título h2)

A apresentação do índice deve usar a estrutura de lista ordenada (ol e li)

Salve e edite o código desta página fazendo as seguintes alterações no estilo, usando o elemento style:

• A margem do elemento body deve ser igual a 0;
• A família de fontes usada em todo documento deve ser igual a sans
• A cor de fundo do header e footer devem ser iguais a#333 e a cor da letra deve ser igual a white
• O espaçamento interno do header e footer devem ser iguais a1rem, com o texto centralizado;
• O título principal (h1) e os links da página devem estar em letras maiúsculas (não alterar diretamente o texto);
• Deve ser removido qualquer marcador ao lado dos links;
• A altura das linhas da seção principal deve ser igual a 1.5rem;
• Cada seção deve ter margem externa de 2rem;
• Os parágrafos dentro de cada section devem ter o texto justificado;
• Os títulos h2 devem ter uma borda inferior com o seguinte valor:1px solid red e o texto deve estar na cor vermelha;

Após realizar todas as alterações, envie o arquivo HTML editado ao professor.

Usando esta template HTML, estilize o documento para que fique desta forma.

Utilize as seguintes recomendações:

• Fonte Roboto, encontrada no repositório da Google;
• Títulos
  • Cor da fonte: rebeccapurple;
  • Tamanho da fonte: 1rem;
• Rodapé com data:
  • Cor da fonte: #555;
  • Tamanho da fonte: 0.8rem;
• Altura da imagem: 30rem;
• Toda a página com texto alinhado ao centro;
• Primeiro artigo deve ter as seguintes especificações:
  • Altura da imagem: 50rem;
  • Tamanho do título: 2rem;
  • Tamanho da manchete: 1.5rem;
  • Margem: 3rem;
  • Espaçamento Interno: 3rem;
  • Cor de fundo: #EEE;

Ao final do projeto, compacte e envie ao professor.