Formulários HTML

1. Elementos básicos para construção de formulários:

O elemento <form> (o "container" para os elementos a seguir);

Input type: text
Definindo dois campos de linha única de texto que um usuário pode digitar texto:
Nome: <input type="text" name="nname"> <br>
Sobrenome: <input type="text" name="sname"> <br>

Input type: password
Definindo um campo de senha com caracteres mascarados
<input type="password" name="pwd">

Input type: email
Definindo um campo de um endereço de e-mail (será validada automaticamente quando submetido):
E-mail: <input type="email" name="usremail">

Input type: search
Definindo um campo de busca (como um site de pesquisa Google):
Pesquisa Google: <input type="search" name="googlesearch">

Input type: url
Definindo um campo para digitar uma URL:
Adicione a sua página inicial: <input type="url" name="homepage">

Input type: hidden
Definindo um campo oculto (não é visível para o usuário). Um campo oculto costuma
armazenar um valor padrão, ou pode ter seu valor alterado por um JavaScript:
<input type="hidden" name="country" value="Norway">

Input type: number
Definindo um campo para digitar um número (Você também pode definir restrições sobre o que os números são aceitos):
Quantidade (entre 1 e 5): <input type="number" name="quantity" min="1" max="5">
Usar os seguintes atributos para especificar restrições:
• max - especifica o valor máximo permitido
• min - especifica o valor mínimo permitido
• step - especifica os intervalos de um número
• value - Especifica o valor padrão

Input type: range
Definindo um controle para entrar em um número cujo valor exato não é importante (como um controle deslizante). Você também pode definir restrições sobre quais os números são aceitos:
<input type="range" name="points" min="1" max="10">
Usar os seguintes atributos para especificar restrições:
• max - especifica o valor máximo permitido
• min - especifica o valor mínimo permitido
• step - especifica os intervalos de um número
• value - Especifica o valor padrão
Input type: tel
Definindo um campo para digitar um número de telefone:
Telefone: <input type="tel" name="usrtel">

Input type: date
Define um controle de data:
Aniversário: <input type="date" name="bday">

Input type: datetime
Define uma data e hora de controle (com fuso horário):
Aniversário (data e hora): <input type="datetime" name="bdaytime">

Input type: datetime-local
Define um controle de data e hora (sem fuso horário):
Aniversário (data e hora): <input type="datetime-local" name="bdaytime">

Input type: time
Definir um controle para entrar em um tempo (não fuso horário):
Selecione um tempo: <input type="time" name="usr_time">

Input type: month
Definir um mês e ano controle (sem fuso horário):
Aniversário (mês e ano): <input type="month" name="bdaymonth">

Input type: week
Definir uma semana e controle de ano (sem fuso horário):
Escolha uma semana: <input type="week" name="week_year">

Input type: checkbox
Checkboxes permitir que um usuário selecione uma ou mais opções de um número limitado de opções.

<input type="checkbox" name="vehicle" value="Bike"> Eu tenho uma bicicleta<br>
<input type="checkbox" name="vehicle" value="Car"> Eu tenho um carro
Input type: radio
Botões de rádio que um usuário pode selecionar apenas um número limitado de opções:
<input type="radio" name="gender" value="male"> Masculino<br>
<input type="radio" name="gender" value="female"> Feminino

Input type: file
Definir um campo de arquivo-seleção e um "Procurar ..." botão (para upload de arquivos):
Selecione um arquivo: <input type="file" name="img">

Input type: color
Escolha uma cor de um seletor de cores:
Escolha sua cor favorita: <input type="color" name="favcolor">

Input type: button
Um botão, que ativa um JavaScript quando é clicado:
<input type="button" value="Click me" onclick="msg()">

Input type: image
Definir uma imagem como um botão de envio:
<input type="image" src="img_submit.gif" alt="Submit">

Input type: reset
Definir um botão de reset (reseta todos os valores do formulário para os valores padrão):
<input type="reset">

Input type: submit
Definir um botão de envio:
<input type="submit">


Tag < Textarea>
<form>
< textarea name="relatorio" rows=12 cols=50>
Aqui você digita o que desejar.
</textarea>
</form>

Tag <select> + <option>
Criar um drop-down list com quatro opções:
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>

Tag <datelist> + <option>
Um elemento <input> com valores predefinidos em uma <datalist>:
<input list="browsers">

<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

Tag <keygen>
O elemento keygen de HTML existe para facilitar a geração de chaves, e enviar a chave pública, como parte de um formulário HTML. Este mecanismo foi projetado para uso com sistemas de gestão certificados, baseada na web.Espera-se que o elemento keygen é utilizado em um formulário HTML, juntamente com as outras informações necessárias para a construção de um pedido de certificado, e que o resultado do processo será um certificado assinado.

Atributos:

autofocus
Este atributo booleano especifica que o controle deve ter o foco de entrada quando a página é carregada, a menos que o usuário cancelou, por exemplo, escrevendo em um controle diferente. Apenas um elemento de formulário em um documento pode ter o atributo autofocus que é um valor booleano.
challenge
A seqüência de desafio que se apresenta juntamente com a chave pública. O padrão é uma string vazia se não especificado.
disabled
Este atributo booleano indica que o controle de formulário não está disponível para a interação.
form
O elemento de forma a que este elemento está associado (o proprietário da forma). O valor do atributo deve ser um ID de um elemento no <form> mesmo documento. Se este atributo não for especificado, este elemento deve ser um descendente de um <form> elemento. Este atributo permite que você coloque elementos <keygen> em qualquer lugar dentro de um documento, não apenas como descendentes do formulário.
KeyType
O tipo de chave gerada. O padrão é o RSA.
name
O nome do controlo, que é enviada com os dados do formulário.
Uso
O elemento é escrito da seguinte forma:
<keygen name="name" challenge="challenge string" keytype="type" keyparams="pqg-params">

Tag <output>
Realizar um cálculo e mostrar o resultado em um elemento <output>:
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>

Tag <button>
Elemento <button> é usado para confirmar uma ação do usuário. O elemento de comando requer abertura e fechamento de uma tag.
<html>
<head>
<title> elemento botão </ title>
</ head>
<body>
<button> clique em mim botão </>
</ body>
</ html>

2. Estrutura de elementos de formulários – Boas Práticas IHC


A área de IHC surgiu no inicio dos anos 80 apoiada principalmente pela expansão de sistemas de software interativos. A IHC envolve uma área da computação responsável por estudos com objetivos de proporcionar aos usuários sistemas fáceis de aprender, utilizar e memorizar e, como consequência, satisfatórios a necessidade do usuário. As atividades envolvem a identificação da necessidade e característica do usuário, a elaboração do projeto, a implementação e a avaliação da interface do aplicativo .
Esta área da computação tem ganhado cada vez mais espaço dentro de ambientes de pesquisa e desenvolvimento. Isso se deve, principalmente, ao fato de que as empresas de software estão compreendendo a necessidade de prover sistemas amigáveis para o usuário. Tal característica também é interesse da equipe de projeto e desenvolvimento dos sistemas, bem como das organizações que adquirem sistemas computacionais com objetivo de apoiar suas tarefas operacionais, gerenciais e estratégicas.
A qualidade da interação é um atributo perceptível ao usuário e permite ao mesmo mensurar a qualidade da aplicação utilizada. Com isto, as organizações estão optando por sistemas com interfaces amigáveis e fáceis de utilizar. Sistemas que agreguem estas características tem usabilidade que, segundo a ISO9 241 se trata da qualidade que um sistema interativo oferece a seu usuário de realizar suas tarefas com eficácia, eficiência e satisfação. Aplicativos que apresentam esta característica de qualidade, além do aspecto de interface são agradáveis para o usuário evitando que o mesmo venha a ter stress, sensação de inferioridade, dificuldade de trabalho, atraso na entrega de tarefas dentre outro problemas técnicos e fisiológicos provocados por sistemas mal projetados.

O elemento LABEL
O elemento LABEL é utilizado, em conjunto com o atributo “id” para relacionar de forma clara o elemento ao seu rótulo.
O elemento LABEL pode ser usado em conjunto com todos os elementos de formulário, exceto o elemento BUTTON.
Ex:
<label for="nome">Nome:</label>
<input type="text" name="nome" id="nome"/>

Os elementos FIELDSET e LEGEND
O elemento FIELDSET é utilizado para agrupar os itens de formulários com características em comum. Por exemplo, um formulário para inscrição em boletim pode ter seus elementos agrupados da seguinte forma:
_ Dados de identificação: Nome, sobrenome, endereço físico, endereço de email;
_ Preferências de recebimento: periodicidade (diária, semanal, mensal) e tipo de
boletim (html, texto plano);
_ Artigos de seu interesse: Lista de itens que podem constar no boletim.
O elemento FIELDSET é utilizado em conjunto com o elemento LEGEND, que melhora a acessibilidade do elemento FIELDSET quando este não é visível em navegadores gráficos.

Ex:
<fieldset>
<legend>Quais suas cores preferidas?</legend>
<input type="checkbox" name="chk0" id="chk0_0" value="vermelho">
<label for="chk0_0">vermelho</label><br />
<input type="checkbox" name="chk1" id="chk1_1" value="verde">
<label for="chk1_1">verde</label><br />
<input type="checkbox" name="chk2" id="chk2_2" value=" azul">
<label for="chk2_2">azul</label><br />
<input type="checkbox" name="chk3" id="chk3_3" value="amarelo">
<label for="chk3_3">amarelo</label>
</fieldset>

O elemento OPTGROUP
O elemento OPTGROUP trabalha de forma semelhante ao FIELDSET, agrupando itens do elemento SELECT quando necessário. Cada elemento OPTGROUP recebe um atributo “label” que é o nome do grupo criado.
Ex:
<select name="Lista de mercado">
<optgroup label="Laticínios">
<option>leite desnatado</option>
<option>queijo ralado</option>
<option>queijo prato</option>
<option>requeijão</option>
</optgroup>
<optgroup label="Vegetais">
<option>alface</option>
<option>alho</option>
<option>Beringela</option>
<option>Cenoura</option>
<option>Pimentão</option>
</optgroup>
<optgroup label="Frutas">
<option>Abacaxi</option>
<option>Banana</option>
<option>Manga</option>
</optgroup>
</select>

Teclas de atalho (Accesskeys)
O uso de teclas de atalho através do atributo “accesskey”, permite escolher um atalho de teclado para cada um dos campos do formulário, possibilitando o acesso rápido. O atributo pode ser aplicado tanto ao elemento LABEL como ao elemento INPUT.
Ex: tecla de atalho para a busca
<input type="text" name="txtbusca" accesskey="s" />

No exemplo, se o usuário pressionar as teclas “alt” e “S” ele irá diretamente para o campo de busca.
No entanto, deve-se tomar cuidado com a escolha das teclas de atalho, pois diversos navegadores utilizam-se delas para sua própria navegação, variando do navegador, versão e língua. Em caso de conflito, a preferência é do navegador.

Navegando pelos campos
Como links, campos de formulário (e grupos de campos) precisam ser navegáveis
sem o uso de um dispositivo apontador, como o mouse. Os mesmos métodos usados em links para facilitar essa tarefa podem ser usados em elementos de formulário – tabulação e teclas de acesso.
Os atributos accesskey e tabindex podem ser adicionados nas tags individuais do formulário, como input, e também em tags legend.
<input type="text" name="nome" accesskey="n" tabindex="1" />

Campos obrigatórios


Repare que o formulário acima indica os campos obrigatórios apenas através da
mudança de cor. Um usuário que não pode ver, não saberá quais campos são de
preenchimento obrigatório. Uma solução para o caso de campos obrigatórios em
formulários seria inserir um asterisco em forma de imagem ao lado de cada campo
obrigatório, fornecendo uma descrição no atributo alt para esta imagem, que
poderia ser “campo obrigatório” ou, simplesmente, “obrigatório”.

<label for="nome">Nome:
<img src="images/icon_asterisk.gif" alt="obrigatório"/>
</label>
<input type=text name="nome" id="nome" />
Exemplo 2
<label for="nome">Nome:
<span>Obrigatório<span/>
</label>
<input type=text name="nome" id="nome" />

Outra solução é utilizar uma tagspan contendo a informação “obrigatório”, que será ocultada por CSSe, em seu lugar, inserimos a imagem de um asterisco.
O único cuidado é ocultar o elemento através de técnicas que preservem a acessibilidade, ou seja, de
forma que o conteúdo fique oculto visualmente, mas que continue sendo acessado pelos leitores de
tela. Repare nos mecanismos para ocultar elementos e seus efeitos na acessibilidade:

CAPCHA
O CAPCHA é um teste interativo humano, completamente automatizado para diferenciar computadores de seres humanos. Os CAPTCHAS comuns fazem uso de imagens que expressam símbolos e caracteres. Esse tipo de CAPTCHA não é interpretado e lido pelos softwares leitores de tela. Logo, esse recurso somente deverá ser utilizado em casos de extrema necessidade, e, quando utilizado, deverá ser disponibilizada em forma alternativa, podendo ser de perguntas de interpretação ou testes matemáticos que só poderão ser respondidas por seres humanos. Essas perguntas devem ser simples, permitindo que possam ser respondidas por variados tipos de usuários, de diferentes culturas e níveis de instrução.

<form action="action.php" method="post">
<fieldset>
<legend>CAPTCHA</legend>
<label for="pergunta">Escreva por extenso quanto é dois mais três.</label>
<input type="text" id="pergunta" name="pergunta" />
<input type="submit" name="enviar" value="Enviar!" />
</fieldset>
</form>


Outros exepmlos de captcha acessiveis





Alterações automáticas
Quando campos ou elementos de um formulário receberem foco, não devem ser iniciadas alterações automáticas na página que confundam ou desorientem os usuários. Logo, as mudanças devem ocorrer através do acionamento de botões, permitindo que os usuários tenham total controle do formulário.

Exemplo Correto

<select id="cidade" name="cidade">
<option value="POA">Porto Alegre</option>
<option value="BH">Belo Horizonte</option>
<option value="RJ">Rio de Janeiro</option>
<option value="SP">São Paulo</option> </select>
<input type="submit" id="submit" value="Enviar" />


ExemploIncorreto

<select name="cidade" id="cidade" onchange="location = this.options[this.selectedInd
ex].value;">
<option value="POA">Porto Alegre</option>
<option value="BH">Belo Horizonte</option>
<option value="RJ">Rio de Janeiro</option>
<option value="SP">São Paulo</option>
</select>

Botões de imagem
Os botões de imagem são elementos input do tipo image (input type=”image”). Para os
botões de imagem que servem para o mesmo propósito do botão do tipo submit, deve ser
fornecida uma descrição textual para o botão através do atributo alt, conforme o exemplo a
seguir.





<inputtype="image"name="entrar"src="entrar.jpg"alt="entrar" />


Já para outros tipos de botões (reset e button), é preciso substituir o botão pela imagem
que se deseja utilizar através do CSS, já que o comportamento dos leitores de tela quanto ao
atributo alt nesses tipos de botões é bastante variável. Nesse caso, para que o botão seja
acessível, ele deve possuir um value descritivo, conforme o exemplo a seguir.




HTML
<inputtype="reset"name="limpar"value="Limpar"class="btLimpar"/>

CSS
input.btLimpar{
background:transparenturl(btLimpar.jpg) no-repeat left top;
width:100px;
height:47px;
text-indent:-20000px;
border:0; }

Aviso de erro
Quando um erro de entrada de dados for automaticamente detectado, seja pelo não preenchimento de campos obrigatórios, ou pelo preenchimento incorreto de algum campo, o item que apresenta erro deve ser identificado e o usuário deve ser informado sobre o erro por meio de texto. Após o envio das informações, caso exista algum campo incorreto, o mesmo deve receber o foco, e nele deverá conter uma mensagem informando claramente ao usuário o real motivo do problema, para que esse possa ser resolvido, permitindo o envio dos dados.
Exemplo:
O usuário envia o formulário e deixa de preencher campos obrigatórios ou preenche algum campo de maneira incorreta. O foco retorna ao início do formulário contendo o aviso de erro e links (âncoras) para os campos do formulário que apresentaramerro.Abaixo dos avisos, encontram-se os campos de formulário que contiveram erro de preenchimento e, também, um link que permite ao usuário expandir os demais campos do formulário.




Referencias :
https://cirofeitosa.com.br/
https://www.dicionarioinformal.com.br
https://acessibilidade.bento.ifrs.edu.br
https://librosweb.es
https://maujor.com
https://codando.wordpress.com/
https://www.jsites.com.br
https://www.w3c.br/https://www.webstandards.org/learn/tutorials/accessible-‐forms/

                                                                       CSS

O que é CSS:
O Cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e utilizada para definir a apresentação (aparência) em páginas da internet que adotam para o seu desenvolvimento linguagens de marcação (como XML, HTML e XHTML). O CSS define como serão exibidos os elementos contidos no código de uma página da internet e sua maior vantagem é efetuar a separação entre o formato e o conteúdo de um documento.

 Benefícios de utilização
* Código enxuto, deixa seu (X)HTML a ser usado para sua função principal, sem sujar o código, focando a acessibilidade e semântica;
* Facilidade de manutenção;
* Otimização de tempo de carregamento da página.

Formas de utilização (externo, embutido, inline)
1- Usar um arquivo CSS externo
Você pode colocar as suas regras de estilo em um arquivo externo e em seguida vincular este arquivo a qualquer página web na qual você deseja que as regras de estilo sejam aplicadas. Para referenciar um arquivo CSS externo a partir de um formulário web você deve incluir tag no elemento head da página:

No exemplo acima o recurso arquivo.css é um arquivo texto contendo as regras de folhas de estilo CSS definidas. Abaixo um exemplo de um possível conteúdo deste arquivo:
a
{
background: #ff9;
color: #00f;
text-decoration: underline;
}
2- Usar um arquivo CSS embutido
Você pode colocar as regras de estilo para uma página no interior das tags
3- Usar regras de estilos inline
Utilizar estilos inline permite a você definir estilos para um único elemento usando um atributo style. Por exemplo:
Podemos definir que um determinado parágrafo tenha uma borda vermelha usando o seguinte código:

Quando usados em um arquivo externo ou embutidos na página web , a primeira parte de qualquer regra de estilo precisa determinar os elementos para o qual a regra será aplicada; fazemos isto usando um seletor. Em ASP.NET usamos basicamente dois tipos de seletores:
a- Seletor do tipo elemento - element type
Um seletor do tipo elemento aponta para cada instância única de um elemento especificado. Assim se precisamos alterar a cor de dois cabeçalhos em um documento devemos usar um seletor do tipo elemento para apontar para todas as tags

:
h2
{
color: #369;
}
b- classes de estilos
Outra forma muito popular de usar estilos em suas páginas web é dar a cada elemento da página um atributo de classe.
O exemplo a seguir mostra um parágrafo cuja atributo de classe é definido como imprimirLinha
.imprimirLinha
{
font-family: Arial;
font-size: x-small;
}
Não importa se você esta usando arquivos CSS externos, embutidos ou inline, as declarações de estilo usam a mesma sintaxe.
Vejamos a seguir os diferentes tipos de estilos que podem ser usados no com páginas ASP.NET.



Tipos de Seletores (elemento HTML, Id ou Classe)
Existe diversas formas de estilizar um seletor, desde estilizar um seletor genérico, por exemplo:
div {
propriedade: valor;
}

/* Desta forma todos elementos 'DIV' receberiam as declarações CSS. */
Até estilizar apenas um único elemento, por exemplo, um elemento com o atributo 'ID' (lembre-se que em seu (X)HTML não pode existir elementos com o atributo 'ID' igual):
#ElementoUnico {
propriedade: valor;
}

/* Desta forma apenas o elemento com ID = ElementoUnico receberia as declarações CSS. */
Nota: No caso de estilização por 'ID' não há diferenças se escrevermos "#ElementoUnico" ou "div#ElementoUnico" Veremos a seguir que pode existir diferenças na estilização utilizada desta forma com elementos com o atributo 'CLASS'.
Seletor de tag
Como já vimos, é o seletor CSS utilizado para elementos genéricos.
Exemplo:
p {
propriedade: valor;
}

/* Desta forma todos elementos 'P' receberiam as declarações CSS. */
Seletor de ID
Como já vimos, é o seletor CSS utilizado para um elemento específico. Este seletor vem sempre acompanhado de "#" antes da 'ID'
Exemplo:
#ElementoUnico {
propriedade: valor;
}

/* Desta forma apenas o elemento com ID = ElementoUnico receberia as declarações CSS. */
Seletor de Classe
No (X)HTML pode (e deve) ser re-aproveitadas classes de elementos que recebem as mesmas declarações. Este seletor vem sempre acompanhado de "." antes da 'CLASS'
Exemplo:
CÓDIGO HTML:
Link A
Link B
CÓDIGO CSS:
.linksIguais {
color:red;
text-decoration:underline;
}
/* Desta forma todos os ELEMENTOS com a classe 'estilosIguais" receberia as declarações CSS. */
Por quê se disse "ELEMENTOS" e não "LINKS HTML"? Por causa da forma que o CSS foi escrito.
Declarando apenas a classe como seletor, você está indicando que TODOS elementos com esta classe (seja link, ou não) receberá as propriedades do CSS.
Se o seu desejo for especificar estas propriedades apenas para links, você deve indicar a tag alvo antes da classe:
Exemplo:
CÓDIGO HTML:
Link A
Link B

Este parágrafo receberá as declarações CSS?

Codigo CSS
a.linksIguais {
color:red;
text-decoration:underline;
}
/* Desta forma todos os ELEMENTOS , com a classe 'estilosIguais" receberia as declarações CSS. */


Sintaxe
Tudo que é escrito no comentário não aparece para o usuário na pagina, apenas para quem ver o código.
• O comentário é feito da seguinte forma: /* Comentários */
• Regra:
Declaração com sintaxe própria que indica como será aplicado um estilo:
@import "folha.css" tipo-midia;
@media tipo-midia {
seletor {
Propriedade: valor(es);
}
};

Unidades
Unidade relativa- é aquela tomada em relação a uma outra medida. Folhas de Estilo em Cascata que usam unidades de comprimento relativas são mais apropriadas para ajustes de uso em diferentes tipos de mídia. (p. ex., de uma tela de monitor para uma impressora laser).
O valor é tomado em relação: 
em: ...ao tamanho da fonte ('font-size') herdada;
ex: ...a altura da letra x (xis) da fonte herdada;
px: ...ao dispositivo (midia) de exibição;
%: ... a uma medida previamente definida.
Unidade Relativa
em
expx
pixel
% - percentagem
as unidades relativas são referenciadas a outras unidades como veremos a seguir.
Unidade absoluta - é aquela que não esta referenciada a qualquer outra unidade e nem é herdada. São unidades de medida de comprimento definidas nos sistemas de medidas pela física e em fim são os conhecidos "centímetros, polegadas etc...). São indicadas para serem usadas quando as mídias de exibição são perfeitamente conhecidas.
Abaixo exemplos ilustrativos do uso destas medidas de comprimento CSS:
div { margin: 1.5em; } h4 { margin: 2ex; } p { font-size: 14px; } .classe { padding: 90%; } hr { width: 14pt; } h1 { margin: 1pc; } h2 { font-size: 4mm; } p.classe { padding: 0.3cm; } h5.classe { padding: 0.5in; }

Unidade Absoluta
pt - point :1/72 in;
pc - pica :12 points ou 1/6 in;
mm - milímetro :1/10 cm;
cm - centímetro :1/100 m;
in - polegada :2,54 cm;



Tipos de seletores:


• Seletor universal: *
O seletor universal em CSS é representado pelo caractere *, esse seletor é utilizado para resetar as margens e paddings de todos os elementos da página, características aplicáveis a todos os elementos, um exemplo de sua utilização:
* {
color: #000000;
}
• Elemento HTML: e
Seletor de tipo de elemento: seleciona qualquer elemento
e {
font-family: sans-serif;}
• Seletor contextual: e f
Seletor contextual:seleciona qualquer elemento que estiver contido num elemento
h1 em {
color: blue;
}
• Seletor elemento filho: e>f
Seletor de elementos-filho: seleciona qualquer elemento descendente direto de um elemento
body > p {
line-height: 1.3;
}
• Seletor adjacente: e+f
Seleciona o elemento que estiver imediatamente após um elemento
h1 + h2 {
margin-top: -5mm;
}
• Seletor de classe: e.classe
Seleciona o(s) elemento(s) em que se aplicou a "classe"
h1.pastoral {
color: green;
}
• Seletor de ID: e#Id
Seleciona o elemento identificado com Id
h1#chapter1 {
text-align: center;
}
• Agrupamento de Seletores: e, f
Seleciona os elementos e do agrupamento
h1, h2 {
font-family: sans-serif; }

• Seletor de atributo:
e [atrib] : seleciona o elemento que contenha o atributo indicado.
h1[title] {
color: blue;
}

e [atrib="valor"] : seleciona o elemento com o mesmo atributo e “valor” .
span[class=exemplo] {
color: blue;
}

e [atrib~="valor"] : seleciona o elemento em que “valor” de atributo esteja em uma lista de valores separadas por espaços.
a[rel~="copyright"]{
color: red;
}?

e [atrib|="val"]: seleciona o elemento em que valor do atributo seja idêntico a “val” ou inicia-se com “val”.
*[lang|="pt"] {
color: red;
}
• Pseudo classes :
As Pseudo classes são usadas em CSS para adicionar efeitos especiais a um seletor. Elas não são elementos HTML. As pseudo-classes são definidas conforme abaixo:

e:first-child
Primeiro-filho é aquele contido dentro de outro elemento HTML (chamado de seletor-pai).
div > p:first-child {
text-indent: 0;
}

a:link
Link que estiliza links não visitados.
a:link {
color: blue;
}

a:visited
Visited que estiliza links visitados.
a:visited {
color: yellow;
}

e:active
Active que estiliza links ativos (clicados).
a:active {
color: lime;
}

e:hover
Hover que estiliza links com o ponteiro do mouse em cima, mas sem ativa-los.
a:hover {
color: Red;
}

e:focus
Destacado quando o foco estiver posicionado nele
a:focus {
background: yellow;
}

e:lang(val)
Aplica-se ao elemento se este estiver marcado com o idioma “val”.
html:lang(pt) {quotes: '« ' ' »'; }

e:first-line
Estiliza a primeira linha de uma frase.
p:first-line {
text-transform: uppercase; }

e:first-letter
Estiliza a primeira letra de uma palavra.
p:first-letter {
font-size: 3em; font-weight: normal;
}

e:before
Aplica conteúdo especificado em posição anterior ao elemento
e:before {
content: open-quote;
}

e:after
Aplica conteúdo especificado em posição posterior ao elemento
e:after {
content: close-quote;
}



Folhas de Estilo são um conjunto de definições que irão determinar/modificar a forma como as TAG's HTML serão exibidas pelo browser. CSS estão aprovadas pelo órgão que regulamenta os padrões de programação para a linguagem HTML o aspecto específico do elemento que você quer usar como estilo. Deve ser um nome de atributo CSS válido, como o atributo font-size.

Valor - a configuração aplicada ao atributo. Deve ser uma configuração válida para o atributo em questão , como 20pt (20 pontos) para font-size.
propriedade:valor - a parte declaração da regra. Você pode atribuir múltiplas declarações se desejar separá-los com ponto-e-vírgula (;). Não coloque um ponto-e-vírgula depois da última declaração.
(Consultei a especificação do W3C para CSS)
de estilo é composta de duas partes: um SELETOR e uma DECLARAÇÃO:
seletor { declaração}
A declaração fica entre chaves " { } " e é formada pela dupla propriedade: valor, em que o valor é separado da propriedade por dois pontos " : "
seletor { propriedade: valor }
Onde:
Seletor - escreve o elemento de design ao qual o estilo será aplicado. A mesma tag HTML mas sem os sinais de maior e menor. Essa parte da regra é às vezes chamadas de seletor.
Propriedade -
Exemplo1 : Regra CSS que especifica que todos os títulos de nível 1 (tags

) sejam exibidos em uma fonte de 36 pontos:
H1 {font-size: 36pt}

RESUMINDO: Transforma varias chamadas varias chamadas da mesma propriedade em uma unica.
Folhas de Estilo
Existem três maneiras de definir regras de CSS. E, por definição, pode utilizar uma combinação dos três métodos nos seus web sites. A maneira como as regras interagem entre si está relacionada à parte "em cascata".Os três lugares são:
Inline - Inline significa que você especifica as regras de CSS dentro da tag de HTML. Essas regras afetam somente a tag atual.
Incorporado - Incorporado significa que você especifica as regras de CSS no cabeçalho do documento. As regras incorporadas afetam somente a página atual.
Vinculado ou Externo - Externo significa que você coloca as regras de CSS em um arquivo separado, e então sua página HTML pode fazer um link para esse arquivo. Essa abordagem lhe permite definir regras em um ou mais arquivos que podem ser aplicadas em alguma página do seu web site.
Sobre as Propriedades CSS abreviadas
A especificação CSS permite a criação de estilos através de uma sintaxe abreviada conhecida como CSS abreviada. A CSS abreviada permite que você especifique os valores de várias propriedades usando uma única declaração. Por exemplo, a propriedade font permite que você defina as propriedades font-style, font-variant, font-weight, font-size, line-height e font-family em uma única linha.
Um ponto-chave a ser observado quando se usa a CSS abreviada é que os valores omitidos em uma propriedade CSS abreviada são definidos para seus valores padrão. Isso pode fazer com que as páginas sejam exibidas incorretamente quando duas ou mais regras CSS são atribuídas à mesma tag.
Por exemplo, a regra h1 mostrada a seguir usa a sintaxe CSS longa. Observe que as propriedades font-variant, font-stretch, font-size-adjust e font-style foram definidas para seus valores padrão.
h1 { font-weight: bold; font-size: 16pt; line-height: 18pt; font-family: Arial; font-variant: normal

Aplicando Técnicas Abreviadas para:
Fundo:
body {background-color: #cff;} /*azul claro*/
05.h2 {background-color: #f00;} /* vermelho */
06.p {background-color: #0f0;} /* verde */
Propriedades de fronteira:
Todos os Border Propriedades CSS

Propriedade
Descrição
fronteira
Define todas as propriedades de fronteira em uma declaração
border-bottom
Define todas as propriedades de borda inferior em uma declaração
border-bottom-color
Define a cor da borda inferior
border-bottom-style
Define o estilo da borda inferior
border-bottom-width
Define a largura da borda inferior
border-color
Define a cor das quatro bordas
margem esquerda
Define todas as propriedades da borda esquerda em uma declaração
border-left-color
Define a cor da borda esquerda
border-left-style
Define o estilo da borda esquerda
border-left-width
Define a largura da borda esquerda
margem direita,
Define todas as propriedades da borda direita em uma declaração
border-right-color
Define a cor da borda direita
border-right-style
Define o estilo da borda direita
border-right-width
Define a largura da borda direita
border-style
Define o estilo das quatro bordas
borda superior-
Define todas as propriedades da borda superior em uma declaração
border-top cor-
Define a cor da borda superior
border-top-style
Define o estilo da borda superior
border-top-width
Define a largura da borda superior




Define a largura das quatro bordas

Cor:

body { background-color: #FFCC66; }
h1 { color: #990000; background-color: #FC9804; }

Fonte:
A propriedade abreviada font define todas as propriedades de fonte em uma declaração.
Font - font: font-style font-variant font-weight font-size font-family
ex: font: italic small-caps bold 50px serif;
ex: outline: 3px dotted #ABC;
obs:obs:obs: A propriedade Border funciona da mesma maneira background: url(imagem.gif) no-repeat;


Outline - outline: outline-width outline-style outline-color
h1 { font-weight: bold; font-size: 16pt; line-height: 18pt; font-family: Arial; font-variant: normalMargem;
Margem;

Cor da margem
A propriedade border-color é utilizado para definir a cor da borda. A cor pode ser definida por:
nome - especificar um nome de cor, como "vermelho"
RGB - especificar um valor RGB, como "rgb (255,0,0)"
Hex - especificar um valor hexadecimal, como "# ff0000"
Você também pode definir a cor da borda para "transparente".
Nota: O "border-color" propriedade não funciona se for usado sozinho. Use o "border-style"
propriedade para definir as fronteiras primeiro.
Exemplo
p.one
{ border-style:solid; border-color:red; } p.two { border-style:solid; border-color:#98bf21;

}
 

Tabelas HTML


As tabelas em html, foram criadas com um propósito de divisão dos elementos que compõem a pagina web, ou seja, não só podemos criar tabelas com texto (como uma planilha Excel) mas também utilizar para alterar o layout da página.
As tabelas surgiram para substituir os "frames" que antes tinham o papel de estruturar a página, porém não é tão vantajoso hoje o uso de frames, devido a mudanças de resolução, dificuldade dos buscadores de localizar a página e incompatibilidade, pois hoje em dia não navegamos apenas em nossos computadores pessoais, mas também em tablets, celulares e outros dispositivos móveis.
Ouve também um movimento de transição das tabelas para a tag <div> (divisões) chamado "tableless", a tag <div> que também tem o objetivo de estruturar uma página.
Agora veremos como funciona a construção de tabelas .

Tags <table> </table>
Esta é a tag para criar uma tabela e determinar ao navegador que o código contido entre eles é uma tabela.
Como no Excel ou qualquer aplicativo de planilha, as tabelas tem colunas e linhas, para adicionarmos uma linha usamos:


<tr> </tr> - Para inserir linhas.
<td> </td> - Para inserir colunas.



O atributo border utilizado na tag table "border" serve para adicionar uma borda em volta da tabela equivalente a 1 pixel, ou seja, quando maior o valor, maior a borda.

Tag <th> </th>
A tag <th> permite criar uma cabeçalho para a tabela, vamos adicionar esta tag no código:




Tag Caption
A tag <caption> adiciona uma legenda a tabela, esta tag deve ser inserida logo após a tag <table>, por padrão somente uma legenda pode ser especificada por tabela.
Vamos inserir uma legenda no código.

<caption> Criando a Primeira Tabela </caption>




thead, tfoot, tbody.
Para melhor organização do web site, podemos criar grupos de linhas e defini-las para qual grupo determinado código faz parte, esta divisão é importante para que os motores de busca identifique se determinado conteúdo faz parte do cabeçalho, rodapé ou corpo, para isso usamos 3 tags que nos auxilia:

Cabeçalho da tabela:
<thead> - Informa ao navegador que o conteúdo da tabela faz parte do cabeçalho e deve ser definida antes do corpo de dados da tabela contendo pelo menos uma tag <td> ou <th>


Rodapé da tabela:
<tfoot> - Informa ao navegador que o conteúdo da tabela faz parte do rodapé, assim como <thead>, deve ser definida antes do corpo de dados da tabela para que possa ser processada antes das prováveis e inúmeras linhas do corpo de dados.

Corpo da tabela:
<tbody> - Informa ao navegador que o conteúdo da tabela faz parte do corpo, uma tabela pode possuir mais de um <tbody> e seu uso é obrigatório sempre que utilizamos <thead> e <tfoot>.





Indiferente de onde inserimos a tag <tfoot>, o navegador automaticamente entende que a informação " Fim da tabela" faz parte do rodapé.


Tabelas acessíveis



Definição:

São utilizadas para tabular dados ou para criar um layout de página(não recomendado).

Tabelas de dados:

Podem ser acessíveis fornecendo informações resumidas ou identificar linha e informação da coluna.

Informações resumidas

Através dos elementos abaixo :

CAPTION é possível identificar o título da tabela.
summary é um atributo não visível , após a renderização, importante para documentação da tabela.

Identificando informações em linhas e colunas

Tabelas de dados são identificadas com linhas e colunas .
Os grupos de linas são representadas pelo atributo THEAD(TH) quando repetitivas e TFOOT para rodapé.
Grupos de colunas usam os atributos COLGROUP e COL.
Elementos como "scope", "headers" e "axis" permite que dados sejam selecionados por categorias em navegadores que as suportem.

THEAD, TBODY e TFOOT grupos de linhas para tabelas extensas

Os elementos THEAD, TBODY E TFOOT são necessários em tabelas extensas,
que ocupam mais de uma página.
O elemento THEAD agrupa uma ou mais linhas de cabeçalho da tabela. O elemento TFOOT
agrupa linhas com informações de rodapé. No código HTML o elemento TFOOT deve
aparecer antes do elemento TBODY.
O elemento TBODY define o corpo da tabela que contém as células de dados. Uma tabela
pode conter mais de um elemento TBODY separando os diferentes grupos de dados.
O uso desses elementos permite que:
As linhas contidas nos elementos THEAD e TFOOT sejam fixas no navegador,
permitindo que as células de dados contidas no TBODY ‘rolem’ entre as duas;
Que quando impressas, as tabelas mostrem o cabeçalho e o rodapé em todas
as páginas.
Os elementos THEAD, TFOOT e TBODY de uma tabela devem ter o mesmo número de
colunas.

Ex:

<table sumary="....">
< caption>.....</caption>
< thead>
< tr> ...informação contida no cabeçalho... </tr>
< /thead>
< tfoot>
< tr>...informação contida no rodapé... </tr>
< /tfoot>
< tbody>
< tr> ...primeira linha de dados do bloco um... </tr>
< tr> ...segunda linha de dados do bloco um...</tr>
< /tbody>
< tbody>
< tr> ...primeira linha de dados do bloco dois...
< tr> ...segunda linha de dados do bloco dois...</tr>
< tr> ...terceira linha de dados do bloco dois...</tr>
< /tbody>
< /table>

Agrupando colunas – elementos COLGROUP e COL

O elemento COLGROUP cria um grupo/estrutura de colunas, permitindo sua diferenciação.
A tabela do próximo exemplo contém dois grupos de colunas. O primeiro grupo de colunas
contém 10 colunas e o segundo contém 5 colunas.

Ex:

< table sumary="...">
< caption>…</caption>
< colgroup span="10">
< colgroup span="5">
< thead>
< tr><td> ...
< /table>

O número de colunas contidas no grupo pode se especificado de duas maneiras
diferentes:
Utilizando o atributo “span”;
Utilizando o elemento COL;
Ex: Um grupo de 60 colunas com as mesmas características:

Ex:

Utilizando o atributo “span”
<colgroup span="60" id="cor">
< /colgroup>
Utilizando o elemento COL
< colgroup>
< col id="cor">
< col id="cor">...segue até completar 60 elementos col...
< /colgroup>

O atributo “span” costuma ser mais vantajoso em grupos de colunas com as mesmas
características. O elemento COL é um elemento vazio, sem função estrutural e serve
como suporte para os atributos. O elemento COL pode estar no interior ou no exterior de
um grupo explícito de colunas - COLGROUP.
O atributo “span” também pode ser utilizado no elemento COL, sempre que seja
necessário isolar uma coluna no interior de um grupo.

Atributos id e headers - Uma forma de associar cabeçalhos e células de dados

O atributo “headers” é utilizado nas células de tabelas (<td></td>) em conjunto com o
atributo id na célula de cabeçalho (<th></th>) para associar as células de dados aos seus
respectivos cabeçalhos.
O atributo headers é requerido sempre que os cabeçalhos estiverem situados em posições
irregulares, em relação aos dados aos quais eles se referem.

<table summary="Oferta de cursos - tabela estruturada em: nome do curso,
professor, resumo da disciplina e carga horária">
< caption>Oferta de cursos - Primeiro semestre</caption>
< tr>
< th id="t1” abbr="Nome">Nome do Curso</th>
< th id="t2” >Professor</th>
< th id="t3” >Resumo</th>
< th id="t4” abbr="carga”>Carga horária</th>
< /tr>
< tr>
< td header=”t1”>Gravura – conceitos básicos</td>
< td header=”t2”>Eunice Lobato</td>
< td header=”t3”>História da gravura, estilos, gráfica. Visita aos ateliês.
< /td>
< td header=”t4”>40h</td>
< /tr>
< tr>
< td header=”t1”>Gravura em metal</td>
< td header=”t2”>Ione Rocha</td>
< td header=”t3”>Trabalhos práticos de gravura em metal. </td>
< td header=”t4”>160h</td>
< /tr>
< tr>
< td header=”t1”>Xilogravura</td>
< td header=”t2”>Heli Santos</td>
< td header=”t3”>Trabalhos práticos em xilogravura.</td>
< td header=”t4”>160h</td>
< /tr>
< /table>

Atributo scope -Uma outra forma de associar cabeçalhos e células de dados

De forma semelhante aos atributos “id” e “header”, o uso do atributo scope é uma outra
forma de se agrupar cabeçalhos de colunas com suas respectivas informações e assim
melhorar a acessibilidade das tabelas de dados.
O atributo “scope” especifica o grupo de células de dados para qual a célula de cabeçalho
(<th></th>) está associada. Este atributo é usado no lugar do atributo “header”,
preferencialmente em tabelas de dados simples. O atributo possui os seguintes valores:
· row: Fornece informação de cabeçalho referente a linha que a contém;
· col: Fornece informação de cabeçalho referente a coluna que a contém;
· rowgroup: Fornece informação de cabeçalho referente ao grupo de linhas que a
contém;
· colgroup: Fornece informação de cabeçalho referente ao grupo de colunas que a
contém.
O atributo “scope” também pode ser associado, quando necessário, ao elemento de célula
de dados (<td></td>). Os leitores de tela entenderão a célula como o cabeçalho da linha.

Ex:

<table summary="Oferta de cursos - tabela estruturada em: nome do curso,
professor, resumo da disciplina e carga horária">
< caption>Oferta de cursos - Primeiro semestre</caption>
< tr>
< th scope="col" abbr="Nome">Nome do Curso</th>
< th scope="col" >Professor</th>
< th scope="col">Resumo</th>
< th scope="col" abbr="carga”>Carga horária</th>
< /tr>
< tr>
< td scope="row">Gravura – conceitos básicos</td>
< td>Eunice Lobato</td>
< td>História da gravura, estilos, gráfica. Visita aos ateliês. </td>
< td>40h</td>
< /tr>
< tr>
< td scope="row">Gravura em metal</td>
< td>Ione Rocha</td>
< td>Trabalhos práticos de gravura em metal. </td>
< td>160h</td>
< /tr>
< tr>
< td scope="row">Xilogravura</td>
< td>Heli Santos</td>
< td>Trabalhos práticos em xilogravura.</td>
< td>160h</td>
< /tr>
< /table>

Tabelas contendo níveis simples de cabeçalhos de colunas e/ou linhas são mais fáceis de serem acessadas que tabelas complexas com múltiplos níveis de cabeçalhos (ex: três
níveis de cabeçalhos para colunas e dois níveis para linhas).
Mesmo com todos os elementos que proporcionem a acessibilidade, tabelas complexas são
de difícil compreensão para o usuário que utiliza leitores de tela. Sempre que possível
devem ser usadas tabelas simples.
Quando possível, as tabelas complexas devem ser divididas em tabelas simples.

Exemplificando uma tabela não acessível:

A - Descreveremos os problemas que uma pessoa portadora de deficiência visual terá para entender os dados da tabela abaixo
B - Vamos propor alterações no código da tabela abaixo para torná‐la acessível a portadores de deficiência visual

< p class="centro">Avaliação de aprendizagem dos alunos na Escola Professor Pardal Pinto.</p>
< table width="80%" align="center" border="1" cellpadding="5" cellspacing="4" bgcolor="#FFF4EA">
< tr>
< td rowspan="2" bgcolor="#efefef" align="center"><strong>Aluno</strong></td>
< td rowspan="2" bgcolor="#efefef" align="center"><strong>Grupo</strong></td>
< td colspan="2" bgcolor="#efefef" align="center"><strong>Matérias</strong></td>
< /tr>
< tr>
< td bgcolor="#efefef" align="center"><strong>Português</strong></td>
< td bgcolor="#efefef" align="center"><strong>Matemática</strong></td>
< /tr>
< tr>
< td bgcolor="#FFFFFF"><font color="#ff0000">Paulo</font></td>
< td bgcolor="#FFFFFF" align="center"><font color="#ff0000">A</font></td>
< td bgcolor="#FFFFFF" align="center"><font color="#ff0000">7</font></td>
< td bgcolor="#FFFFFF" align="center"><font color="#ff0000">8</font></td>
< /tr>
< tr>
< td bgcolor="#FFFFFF"><font color="#ff0000">Marcos</font></td>
< td bgcolor="#FFFFFF" align="center"><font color="#ff0000">A</font></td>
< td bgcolor="#FFFFFF" align="center"><font color="#ff0000">6</font></td>
< td bgcolor="#FFFFFF" align="center"><font color="#ff0000">9</font></td>
< /tr>
< tr>
< td bgcolor="#FFFFFF"><font color="#ff0000">Rosa</font></td>
< td bgcolor="#FFFFFF" align="center"><font color="#ff0000">B</font></td>
< td bgcolor="#FFFFFF" align="center"><font color="#ff0000">10</font></td>
< td bgcolor="#FFFFFF" align="center"><font color="#ff0000">7</font></td>
< /tr>
< tr>
< td bgcolor="#FFFFFF"><font color="#ff0000">Maria</font></td>
< td bgcolor="#FFFFFF" align="center"><font color="#ff0000">B</font></td>
< td bgcolor="#FFFFFF" align="center"><font color="#ff0000">7</font></td>
< td bgcolor="#FFFFFF" align="center"><font color="#ff0000">5</font></td>
< /tr>
< tr>
< td colspan="2" bgcolor="#efefef" align="center"><strong>Média por matéria</strong></td>
< td bgcolor="#FFFFFF" align="center"><font color="#003399"><strong>7,50</strong></font></td>
< td bgcolor="#FFFFFF" align="center"><font color="#003399"><strong>7,25</strong></font></td>
< /tr>
< /table>

A maioria dos softwares leitores de tela para pessoas com deficiência visual só terá a possibilidade de ler essa tabela "célula a célula" isoladamente. Dessa forma, lerá:
Aluno Grupo Matérias Português Matemática Paulo A 7 8 Marcos A 6 9 Rosa B 10 7 Maria B 7 5 Média por matéria 7,50 7,25

O conteúdo de cada célula não fica associado nem ao cabeçalho nem ao nome, ou seja, à linha e coluna. A pretensão de uma tabela acessível é que o usuário de um leitor de tela possa saber exatamente a que linha e coluna o conteúdo de cada célula pertence, podendo ser lidos o cabeçalho horizontal e o vertical associados ao conteúdo da célula de uma só vez.

Nas versões mais atuais, alguns leitores já leem a linha e coluna em tabelas simples sem acessibilidade, mas se perdem caso essas tabelas saiam do padrão mais comum, como em nosso exemplo, onde Matérias se dividem em português e matemática.

Como você pode observar na tabela acima, toda a apresentação foi feita com marcações de HTML, como:

width, border, cellpadding, cellspacing, bgcolor, font color e align.

Todos esses atributos estão em desuso (deprecated), são obsoletos, sendo muito mais lentos na sua renderização pelo navegador.

Tornando a Tabela de Dados Acessível.

Limpeza do código.

Nosso primeiro passo será eliminar toda a apresentação e formatação em HTML, para posteriormente serem colocados na folha de estilo. Ao retirá-los, nosso código será:

< table>
< tr>
< td rowspan="2">Aluno</td>
< td rowspan="2">Grupo</td>
< td colspan="2">Matérias</td>
< /tr>
< tr>
< td>Português</td>
< td>Matemática</td>
< /tr>
< tr>
< td>Paulo</td>
< td>A</td>
< td>7</td>
< td>8</td>
< /tr>
< tr>
< td>Marcos</td>
< td>A</td>
< td>6</td>
< td>9</td>
< /tr>
< tr>
< td>Rosa</td>
< td>B</td>
< td>10</td>
< td>7</td>
< /tr>
< tr>
< td>Maria</td>
< td>B</td>
< td>7</td>
< td>5</td>
< /tr>
< tr>
< td>Média por matéria</td>
< td>7,50</td>
< td>7,25</td>
< /tr>
< /table>

Tabelas com identificador axis

O axis é um atributo que faz a associação de um identificador ID a uma célula, criando a repetição do conteúdo do axis sempre que esse identificador for requisitado.
Código:

< th id="portugues" axis="materia">Português</th>
e, na célula da tabela:
< td headers="portugues">7</td>

No exemplo acima, o leitor de tela que aderir aos padrões web poderão sonorizar o conteúdo de uma td que estiver associada a um headers do identificador Português, como "Matéria Português" e, no nosso caso, com o conteúdo da célula "Matéria Português 7", sendo 7 o conteúdo da célula, como na tabela que virá abaixo.

Elementos de Tabela thead, tfoot,tbody.

As linhas de uma tabela <tr> podem ser agrupadas em cabeçalho (thead), corpo (tbody) e rodapé (tfoot), quando houver mais de um nível de cabeçalho.

< thead>Linhas de Cabeçalho</thead>
< tbody>Linhas do corpo da tabela e suas células </tbody>

Tabela Acessível.

Código HTML

< table summary="Tabela contendo notas por grupo em relação a alunos e matérias.">

< caption>Avaliação de aprendizagem dos alunos na Escola Professor Pardal Pinto.</caption>

< colgroup>
< col />
< col />
< col span="2" /><!-- Agrupamento das colunas Português e Matemática à célula de cabeçalho Matérias -->
< /colgroup>

< thead>
< tr>
< th rowspan="2" id="aluno">Alunos</th>
< th rowspan="2" id="grupo">Grupo</th>
< th colspan="2" id="materia">Matérias</th>
< /tr>

< tr>
< th id="portugues" axis="materia">Português</th>
< th id="matematica" axis="materia">Matemática</th>
< /tr>
< /thead>

< tbody>
< tr>
< td class="esquerda" headers="aluno">Paulo</td>
< td headers="grupo">A</td>
< td headers="portugues">7</td>
< td headers="matematica">8</td>
< /tr>

< tr>
< td class="esquerda" headers="aluno">Marcos</td>
< td headers="grupo">A</td>
< td headers="portugues">6</td>
< td headers="matematica">9</td>
< /tr>

< tr>
< td class="esquerda" headers="aluno">Rosa</td>
< td headers="grupo">B</td>
< td headers="portugues">10</td>
< td headers="matematica">7</td>
< /tr>

< tr>
< td class="esquerda" headers="aluno">Maria</td>
< td headers="grupo">B</td>
< td headers="portugues">7</td>
< td headers="matematica">5</td>
< /tr>
< /tbody>

< tbody class="linha-das-medias">
< tr>
< th colspan="2" id="media">Média por matéria </th>
< td headers="portugues">7,50</td>
< td headers="matematica">7,25</td>
< /tr>
< /tbody>

< /table>

Código CSS (Deverá ficar num arquivo à parte. Ex.: estilos.css).

.centro { text-align:center; }
.esquerda { text-align:left; }
table { width:80%; border:1px outset #333; border-spacing:5px; font-size:1em; margin:auto; background:#FFF4EA; }
caption { margin:auto; }
th, td { border:1px inset #DDD; padding:4px; }
th { background:#efefef; }
td { background:#FFF; text-align:center; }
tbody td { color:#F00; }
.linha-das-medias td { text-align:center; font-weight:bold; color:#039; }

Atenção! É recomendado usar os estilos em um arquivo à parte e fazer a chamada entre as tags <head> e </head>.
Obs.: Para que o espaçamento entre as células (border-spacing:5px;) no Internet Explorer fique igual ao dos outros navegadores é preciso usar o seguinte hack:

< !--[if IE]><style type="text/css">table { *border-collapse: expression('separate', cellSpacing = '5px'); }</style><![endif]-->


Ex.:

< head>
< meta ... />
< title> ...</title>
< link href="estilos.css" rel="stylesheet" type="text/css" />
< !--[if IE]><style type="text/css">table { *border-collapse: expression('separate', cellspacing = '5px'); }</style><![endif]-->
< /head>

* Esta página não passará pelo avaliador de código XHTML Strict do W3C por estar apresentando, para fins didáticos, uma tabela sem acessibilidade com elementos obsoletos;

* Para se navegar por tabelas no leitor de tela Jaws, utilizam-se as teclas control e alt simultaneamente e com as setas para cima e para baixo, esquerda e direita, conforme se queira saber em que linha ou coluna estamos além do conteúdo da célula e a tecla 5 do teclado numérico para que seja lido coluna, linha e conteúdo da célula ao mesmo tempo.

Referências;

https://www.acessibilidadelegal.com/13-tabelas-acessiveis.php

https://www.w3.org/TR/html4/struct/tables.html
https://www.acessibilidadelegal.com
https://www.utad.pt/wai/wai-pageauth.html
https://www.ilearn.com.br/TR/WCAG20/
https://www.maujor.com

https://www.jsites.com

                                              HTML
 

1.HTML é as inicias de Hyper Text Markup Language – (Tradução) Linguagem de Marcação de Hipertexto, criada por Tim Bernes-Lee na década de 90 a partir da ideia de “conectar” diferentes arquivos acadêmicos, já com a concepção de links, a fim de facilitar a navegação entre eles e possibilitar eficiente referência cruzada. É a principal linguagem de marcação utilizada para criação de páginas web e outras informações que podem ser identificadas e apresentadas por navegadores.
Um documento HTML é um arquivo de texto, seus elementos são tags (etiquetas), comandos de formatação da linguagem, colocando atributos, entre sinais de menor e maior (< exemplo >).
Os avanços na área de comunicação e Internet desenvolvem a linguagem HTML e seu posterior aprimoramento e estudo.
A linguagem têm sua especificação e padronização coordenada, pesquisada e aprimorada pela W3C. Atualmente trabalha-se para a definição de sua quinta versão: HTML5.

1.1 Elemento root: html
A tag <html> informa ao navegador que aquele é um arquivo escrito na linguagem HTML e deve ser apresentado como uma página web. Ela representa a raiz do documento e, exceto por <!DOCTYPE>, todos os elementos e comandos da página estão dentro dela. Ela é aberta no início do documento (<html>) e é a última tag a ser fechada em seu final (</html>).

1.2 Metadados: head, title, link, meta, style
São chamados metadados os “dados sobre dados”, ou seja, descrevem quais tipos de dados estão contidos naquele documento. Os metadados informam sobre as particularidades do arquivo, como sua apresentação, administração, uso, direitos do autor e catalogação, entre outras. Em arquivos digitais, os metadados são de extrema importância para os mecanismos de busca, que os utilizarão para relacionar arquivos pertinentes às pesquisas de seus usuários.
É no elemento <head> que estão contidos os metadados do documento HTML. Ele indica a seção de cabeçalho da página. A tag <head> deve ser fechada (</head>) ao final da inserção dos outros elementos de metadados utilizados, antes da abertura da seção de corpo do documento.
<title> é a tag utilizada para dar título ao documento, que será exibido na barra de títulos dos navegadores, dará um “nome” à página quando ela for adicionada aos favoritos e quando for exibida como resultado em sites de busca. Não é possível haver mais de uma tag <title> em uma página. Ela deve sempre ser fechada com o comando </title> após sua atribuição.
<link> define uma relação entre o documento e um recurso externo, geralmente uma folha de formatação. Essa tag contém apenas atributos e pode ser usada quantas vezes forem desejadas ou necessárias. Não precisa ser fechada com comando </link>.
<meta> contém as propriedades da página, metadados em si. Ela pode especificar palavras-chave, autor, descrição e decodificação de caracteres da página, por exemplo.

Apesar de seu conteúdo não ser exibido na página, ele é legível para máquinas, sendo usada por navegadores (especifica como exibir conteúdo ou recarregar a página), mecanismos de busca (elenca palavras-chave) e outros serviços web. Essa tag não possui comando de fechamento. <style> é a tag que especifica como os elementos html devem ser renderizados pelo navegador. É possível utilizar quantas tags <style> forem desejadas, todas devidamente fechadas pelo comando </style>.

Toda a formatação de um documento html deve, pelas boas praticas, ser feita através de CSS.

1.3 Seções: body, article, section, nav, aside, h1, h2, h3, h4, h5, h6, hgroup, header, footer, address
O corpo do documento HTML detém todo o conteúdo da página, como textos, imagens, links, listas, tabelas, etc., porém atributos de layout não são suportados no HTML5. O elemento <body>, aberto após encerramento do cabeçalho, só será fechado depois da inserção e término de todo o conteúdo da página, pelo comando </body>.
<article> é uma tag nova no HTML5 usada para seccionar um conteúdo da página que deve fazer sentido por si só (não se relacionando diretamente com o restante do conteúdo da página), como, por exemplo, um postagem de blog, um comentário postado por um usuário, um widget ou gadget interativo ou um artigo de jornal online. Utiliza-se </article> para seu fechamento.
<section> é também uma tag nova no HTML5. Ela secciona um conteúdo do corpo da página que normalmente recebe um título. Apesar de ser bastante genérica, deve-se atentar ao seu uso, pois ela não serve para estilizar ou receber conteúdo “independente”. Nesses casos, deveriam ser usadas as tags <div> e <article>, respectivamente. A <section> é uma pequena porção de conteúdo que pode ser armazenada como um registro individual em um banco de dados. Após sua conclusão, o comando </section> encerra esse elemento.
<nav> é usada para declarar uma seção navegável do documento HTML. É uma tag nova. É dentro dessa seção que devem ser colocados os links internos de navegação do site: “o menu”. Seu comando de fechamento é </nav>.
<aside> representa uma seção da página que recebe conteúdo relacionado ao conteúdo principal, sem fazer parte dele diretamente. Pode conter explicações paralelas, definições de um glossário para palavras do conteúdo da página ou outras informações complementares, como a biografia do autor ou informações de um perfil. É uma tag nova no HTML5 e deve ser aberta (<aside>) e fechada (</aside>).
<h1> a <h6> definem títulos em um documento HTML. Seus diferentes níveis seguem sua “numeração”, onde <h1> seria o título principal e <h6> o mais baixo subtítulo da página (passando pelos níveis <h2>, <h3>, <h4> e <h5>). Esses comandos nunca devem ser utilizados para estilizar o tamanho da fonte (para isso usa-se CSS) e seus níveis não devem ser “pulados” (usar tag <h1> e depois <h4>, por exemplo). Recomenda-se o uso de apenas uma tag <h1> por página, ao exemplo dos grandes portais da Internet. As tags devem sempre ser fechadas.
<hgroup> é o elemento que agrupa os comandos de título e subtítulos do documento. Contribui para a associação de um subtítulo, um título alternativo ou um slogan ao título principal, sem poluir a página. É fechada por </hgroup>. Essa tag foi introduzida no HTML5, porém foi removida de suas especificações pela W3C. Por seu futuro (atualmente) incerto, recomenda-se não utilizá-la por enquanto.
<header> especifica uma seção de cabeçalho à página ou a qualquer uma de suas seções, podendo conter uma introdução ao conteúdo ou uma série de links navegáveis. É possível usar vários elementos <header> em um documento. Esse elemento não pode ser usado para seccionar um elemento <footer>, <address> ou outro <header>, sendo aplicável aos outros (<article>, <section>, <aside>, etc). Essa tag foi introduzida no HTML5 e deve ser fechada (</header>) após aberta.
<footer> é muito similar a tag <header>, porém especifica uma seção de rodapé à página ou às suas seções. Apenas não pode ser inserida dentro de um elemento <header>, <address> ou outro <footer>. </footer> é usado para seu fechamento.
<address> define a informação de contato do autor do documento ou da seção em que está inserida. É geralmente usada em uma seção de rodapé e não deve conter informações de publicação ou edição do conteúdo, apenas contato de seu autor. Seu conteúdo é geralmente renderizado em itálico pelos navegadores e há uma quebra de linha antes e após esse elemento. A tag deve ser fechada por </address>.

1.4 Comentário
Tags de comentário (<!-- ... -->) são geralmente utilizadas para adicionar informações ao seu código que facilitem futuras edições, especialmente se ele for muito extenso. Essa tag não suporta atributos e não é renderizada pelo navegador, ou seja, não é visível na página para os usuários. Elas não possuem fechamento e todo seu conteúdo deve estar entre os símbolos que a determinam: <!-- exemplo -->.

1.5 Elementos de agrupamento: p, hr, blockquote, ol, ul, li, dl, dt, dd, div
Elementos de agrupamento – texto:
A tag <p> define um parágrafo de texto. Os navegadores automaticamente acrescentam um pequeno espaço antes de cada elemento <p>, uma margem. Essas margens podem ser formatadas com CSS. Após aberta, a tag de encerramento pode ser omitida no caso do elemento <p> ser imediatamente seguido por <address>, <article>, <aside>, <blockquote>, <div>, <dl>, <fieldset>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hr>, <menu>, <nav>, <ol>, <pre>, <section>, <table>, <ul> ou outro <p>. Contudo, é parte das boas práticas sempre fechar o elemento utilizado antes da abertura do próximo.
O elemento <hr> representa uma quebra temática entre parágrafos. Os navegadores renderizam o comando como uma linha horizontal, que é uma separação visual, mas possui valor semântico, pois separa blocos de texto que indicam mudança de tópico/assunto em uma seção ou mudança de cenas em uma história. Não deve ser usada para dividir a página em seções: há elementos semânticos específicos para tanto.
<blockquote> é utilizada para representar uma citação longa (em bloco) de uma fonte externa. Uma URL para a fonte deve ser dada usando-se o atributo cite. Os navegadores renderizam o comando apresentando um recuo antes do texto, em relação à margem esquerda da página. Após fechada (</blockquote>), o recuo é encerrado.
Elementos de agrupamento – listas:
<ol> define uma lista ordenada, podendo ser numérica ou alfabética. CSS pode ser usado para modificar o sistema numérico da lista, mas outros atributos como reversed (numerais decrescentes), start (por qual valor começar) e type (qual tipo de marcador) podem ser incorporados ao elemento HTML. Ao seu final, é fechada por </ol>, encerrando a contagem de seus itens.
Listas não ordenadas são definidas pelo elemento <ul> e seus itens são elencados por caracteres simbólicos. São usadas quando a ordem dos itens não altera seus significados. Devem ser formatadas com CSS e fechadas com o comando </ul>.
<li> é a tag usada para definir os itens em uma lista (um a um), seja ordenada (<ol>), seja não ordenada (<ul>), seja um menu (<menu> - obsoleto). Seu valor inicial pode ser definido pelo atributo value. A tag deve ser aberta (<li>) antes da inserção do item e fechada (</li>) logo após, repetindo-se o processo item por item.
Uma lista descritiva é definida por <dl>. Geralmente empregada na estruturação de glossários ou exibição de metadados. Ela consiste em grupos de “nomes e valores”, podendo ser um termo (nome) e suas definições (valores).
Os “nomes” são definidos pela tag <dt> e os “valores” pela tag <dd>. Dessa forma, abre-se a lista pelo comando <dl>, adiciona-se o termo por <dt>-</dt> e atribui-se a ele suas definições por <dd>-</dd>, fecha-se </dl> ao final da lista.
Elementos de agrupamento – elementos:

<div> define uma divisão ou seção em uma página HTML, podendo ter a função de
reunir elementos que serão formatados com CSS, por exemplo. Ela não possui
significado especial, é uma seção genérica que existe em função dos elementos que
contém em si.Ela jamais deve substituir um elemento semântico do HTML, como o <aside>, <section> ou <article>. Tag de fechamento: </div>.


1.6 Elementos de texto semânticos: a, abbr, span, strong, em, br
Elementos de texto semânticos:
<a> define um hyperlink, usado para conectar uma página à outra. O mais importante de seus atributos é href, que especifica a URL da página para qual o link levará o usuário. Por padrão, os navegadores renderizarão os links da seguinte maneira: link não visitado – sublinhado e azul; link visitado – sublinhado e roxo; link ativo – sublinhado e vermelho. Outros atributos podem ser usados quando href não estiver definido: hreflang – especifica a linguagem do documento linkado; media – especifica para qual tipo de mídia ou dispositivo o documento linkado é otimizado; rel – cada um de seus valores especifica a ligação entre o documento atual e o de destino; target – seus valores especificam onde abrir o novo documento; type – especifica as Extensões Multifunção para Mensagens de Internet (MIME, em inglês) do documento linkado.
<abbr> é usada para definir um acrônimo ou abreviação. Ao marcar uma abreviação, são dadas informações úteis a indexadores de mecanismos de busca, tradutores, navegadores e corretores ortográficos. O atributo title pode ser usado com a tag <abbr> para mostrar o significado completo da abreviação ou acrônimo quando o cursor do mouse for posicionado sobre ela. É fechada por </abbr>.
A tag <span> é usada para agrupar elementos em linha em um documento. Por si só a tag não traz nenhuma mudança visual ao documento, mas possibilita que a parte que detém tenha seu estilo alterado com CSS ou manipulado com JavaScript. Essa tag, assim como a <div>, só deve ser usada quando nenhum outro elemento semântico puder ser aplicado. Observação: <span> é um elemento “em linha” e <div> é um elemento “de blocos”. O comando </span> é usado para seu fechamento.
<strong> é usada para realçar texto de grande importância, concedendo-lhe o aspecto de texto em negrito quando renderizado pelos navegadores. Deve ser fechada pelo comando </strong>.
<em> define uma parte de frase ou texto como sendo enfática, concedendo o aspecto de texto em itálico quando renderizado pelos navegadores. Deve ser fechada pelo comando </em>.
A tag <br> insere uma quebra de linha ao texto. É especialmente usada quando a divisão do texto em linhas é importante, como em poemas ou endereços. Não deve ser usada para aumentar o espaçamento entre as linhas do texto ou separar parágrafos. Para tanto, deve-se usar formatação CSS. Essa é uma tag que não possui fechamento.





1.7 Conteúdo embutido: img
Para acrescentar uma imagem ao documento HTML, utiliza-se a tag <img>. A imagem não é tecnicamente inserida no documento, mas linkada a ele. Dois atributos são necessários ao uso dessa tag: src – especifica a URL da imagem, onde ela está – e alt – especifica um texto descritivo/informativo para ser visualizado no lugar da imagem (muito importante para a otimização de mecanismos de busca e questões de acessibilidade). Não há tag de fechamento para esse comando em HTML.

Referências;

https://www.w3schools.com/html/

https://maujor.com

https://librosweb.es
https://www.jsites.com.br