HTML e estrutura semântica
Estrutura do documento, conteúdo semântico, tabelas, formulários e dados enviados ao servidor.
O essencial
- HTML descreve estrutura e significado; CSS trata da apresentação.
- O navegador constrói o DOM, uma árvore de nós em memória. JavaScript lê e altera essa árvore, não o ficheiro original.
- PHP corre no servidor e envia só a saída. Mudar o DOM não guarda nada na base de dados.
Documento
<!doctype html>pede o modo normal;lang="pt-PT"declara a língua.headguarda metadados e título do separador;bodyguarda o conteúdo.idé único no documento;classpode repetir-se e acumular.disabled="false"continua a desativar: booleanos valem pela presença.img,input,meta: elementos vazios, sem fecho.
| Para isto | Usa isto |
|---|---|
| Conteúdo principal, navegação | main, nav |
| Peça autónoma, secção temática | article, section |
| Navegar, agir | a, button |
| Lista solta, passos, termos | ul, ol, dl |
| Importância, ênfase | strong, em |
| Agrupar sem significado | div, span |
- Títulos seguem a hierarquia do conteúdo, não o tamanho da letra.
- Imagem informativa:
altcom a informação. Decorativa:alt="". placeholdersugere; não substituilabel.divdentro depfecha o parágrafo implicitamente: confirma no inspetor.
Caminhos e tabelas
../sobe um nível do caminho; o fragmento#idnunca viaja no pedido HTTP.- Tabela de dados:
caption,thcomscope,rowspan/colspanocupam posições que não se voltam a preencher. Grelha de página faz-se com CSS.
Formulários: o que viaja
action dá o destino, method o método. GET põe parâmetros na query (pesquisas); POST põe-nos habitualmente no corpo. POST não cifra.
| Controlo | Viaja? |
|---|---|
Com name, ativo | Sim, como name=valor |
Sem name, ou disabled | Não |
readonly | Sim, nos tipos compatíveis |
| Checkbox por marcar | Não, nem false |
Checkbox marcada sem value | Sim, normalmente on |
Radios com o mesmo name | Só o selecionado |
| Botão de submissão usado | Pode enviar o seu par |
select multiple | Vários valores, mesmo nome |
idserve alabel(for);nameserve o pedido. São funções distintas.datalistsugere e admite outro valor;selectlimita às opções.type="password"só oculta caracteres;type="hidden"continua editável pelo cliente. Upload exige POST commultipart/form-data.- Validação do navegador ajuda o utilizador; o servidor valida tudo de novo: presença, tipo, limites e permissões.