Tags iniciais:
Tags: html, script e style
Delimita as partes do código escritas, respectivamente, em HTML, JavaScript e CSS.
Tags head e body:
A tag head corresponde a informações passadas ao navegador, enquanto a body corresponde ao conteúdo em si.
Tags da head:
- link : Corresponde a um import, normalmente de um arquivo .css ou .js, o endereço do arquivo é definido na propriedade href e seu tipo na propriedade rel, fica na tag head.
- meta : Define algumas configurações, como o encoding.
- title : Altera o nome que aparecerá na guia do navegador.
Divisões de uma página e boas práticas:
Principais tags:
- div : Divisão Genérica
- section : Divide um conteúdo com a mesma semântica, significado
- header : Cabeçalho
- main : Conteúdo Principal
- footer : Rodapé
- nav : Barra de Navegação
Boas práticas quando usamos divs:
Usar divs de forma excessiva no nosso HTML é uma má prática, pois assim o código pode ficar menos semântico e mais difícil de ser lido e de receber manutenção. Além das tags que citamos acima, existem outras que podem ser úteis:
- code : Demarca um código qualquer que quisermos mostrar, seja CSS, JavaScript ou qualquer outra linguagem.
- blockquote : Tag usada para marcar uma citação de outro autor.
- mark : Uma marcação qualquer, como se estivéssemos marcando o conteúdo com um marca texto, dando mais destaque.
- summary : Demarca o sumário da página, onde resumiremos um pouco do conteúdo, indicando a ordem na qual o conteúdo aparecerá.
- article : Usada para delimitar o conteúdo referente a um artigo.
- aside : Um adendo qualquer, usamos quando queremos passar uma observação, por exemplo. A tradução para 'aside' é 'à parte'.
- figure : Demarca um espaço para uma tag img, que pode ter uma legenda representada pela tag figcaption.
- address : Contém conteúdo referente ao endereço e contato da página
Qual a diferença entre as propriedades class e id:
Usamos class quando queremos atribuir estilo, enquanto usamos id quando queremos definir um comportamento. Como o id é muito específico e é um tipo de seleção muito forte, normalmente utilizamos class, que é uma seleção mais fraca e portanto mais fácil de fazer alterações.
Trabalhando com listas e texto:
Tags de título:
Marcam um título, que vai de h1 a h6, sendo h1 o principal e h6 o menor.
h1
h2
h3
h4
h5
h6
Tags de listas:
- ul : Unordained list, lista não ordenada, tem uma ordem específica a ser seguida.
- ol : Ordained list, lista ordenada, os elementos tem que ter uma ordem definida.
- li : List item, define um item da lista.
Tags de texto:
- p : Marca um parágrafo.
- em : Texto em itálico.
- b : Texto em negrito.
- strong : Texto também em negrito, usamos quando queremos dar uma ênfase maior no texto, dando uma semântica diferente.
- sup : Texto na parte superior.
- sub : Texto na parte inferior.
- br : Quebra de página.
Na maioria dos casos, é má prática utilizar as tags em, strong e br, já que essas características podem ser definidas mais facilmente no CSS.
Isto é um parágrafo.
Isto está em itálico.
Isto está em negrito.
Isto é um texto strong.
Textosupsub
Log101010 = 10
H+ + OH- -> H2O
Ca2+(OH-)2 + H+2SO42- -> CaSO4 + 2H2O
Relação com outras páginas:
Tags básicas:
- a : Âncora, define um link que redireciona para outra página, também pode redirecionar para um elemento da página, marcado com o id, ou também telefones e emails.
- img : Imagem, que pode ser importada de um endereço na web, ou de um arquivo local, passando o caminho dos diretórios e o nome do arquivo, a propriedade src define a fonte e alt mostra uma visualização alternativa, contribuindo com a acessibilidade.
- iframe : É como uma incorporação de uma janela de outro site, como apresentações do powerpoint, páginas do facebook, fotos do Instagram, mapas, vídeos do YouTube e de outras plataformas e entre outras formas de conteúdo. Esses conteúdos possuem um código de incorporação, que pode ser copiado e colado no seu código html.
- video : Tag específica para vídeos, pode ser complementada com a tag track:
- track : Pode ser usado para definir uma legenda ou aúdio transcrição, a partir de um arquivo vtt, por exemplo.
Tipos de imagem:
- SVG : Imagem criada com cálculos de computadores, não ficam pixeladas com mudança de resolução. O ponto negativo é que não consegue retratar imagens mais complexas, que exijam textura e sombreamento.
- PNG : Imagem mais pesada, que guarda a posição dos pixels e permite que haja transparência, que a imagem não ocupe uma área necessáriamente retangular.
- JPG : Imagem mais leve, não suporta transparência e tem sempre formato quadrado / retangular.
Importando mapas:
É possível incorporar mapas usando a tag iframe. O código de incorporação pode ser obtido através de serviços como o Google Maps.
Trabalhando com botões e formulários:
Tag button:
Cria um botão que pode fazer uma ação, normalmente executando uma função em JavaScript.
Tags usadas para formulários:
- form : Tag que envolve o formulário, definindo o destino dos dados.
- input : Entrada de dados, se relaciona com o label através do seu name e id.
- label : Rótulo para os inputs, a propriedade for define o input a que se refere.
- textarea : Delimita uma área de texto, que ao contrário de um input, não é limitado a apenas uma linha.
- select : Representa uma combobox, onde é possível selecionar uma opção.
- option : É uma opção possível para o select.
- fieldset : Marca uma divisão para inputs de radiobox ou selects.
- legend : Funciona como um título para as opções a serem marcadas no input.
Tipos de input:
- radio : Uma radiobox que pode ser selecionada.
- checkbox : Uma caixinha que pode ser selecionada.
- text : Usado para textos comuns.
- password : Usado para senhas.
- number : Números comuns.
- tel : Números de telefone.
- email : Usado para emails.
- submit : Envia os dados.
Propriedades de inputs:
- id : Identificação do input, faz a ligação com o label.
- name : Define o nome do input, usado para demarcar inputs diferentes mas que fazem parte de um mesmo grupo.
- required : Torna o campo obrigatório.
- checked : Marca uma box por padrão, podendo ser checkbox ou radiobox.
- placeholder : Auxilia o usuário, com um exemplo a ser seguido ou uma dica.
- value : Define seu valor.
Tabelas:
Tags básicas:
- table : Tag raíz de uma tabela.
- thead : Marca seu cabeçalho.
- tbody : Marca o corpo da tabela.
- tfoot : Delimita o rodapé da tabela.
- td : Marca uma célula.
- tr : Table row, define uma linha.
- th : Célula específica do cabeçalho.
A propriedade colspan pode definir o número de colunas que uma célula ocupa, possibilitando a junção de células da tabela.
| Cabeçalho | ||
|---|---|---|
| Célula 1 | Célula 2 | Célula 3 |
| Célula 4 | Célula 5 | Célula 6 |
| Célula 7 | Célula 8 | Célula 9 |
| Rodapé | ||
Abreviações Emmet
Quando escrevemos HTML, algumas vezes precisamos repetir várias vezes um mesmo elemento com uma ou mais classes, o que pode ser um pesadelo se escrevermos na mão. Para facilitar isso, existe o Emmet, que permite que escrevamos HTML de forma mais fácil e rápida, com a tecla de atalho Ctrl + espaço + Enter.
- As operações básicas do Emmet são:
- > : Cria um elemento filho.
- + : Cria elemento irmão.
- . : Adiciona uma classe, sendo que pode ser usado várias vezes.
- # : Inclui um id.
- * : Permite que criemos n elementos iguais.
- () : Os parentêses assim como na matemática, ajudam a organizar o código e indicar qual parte deve ser executada primeiro.
- {} : Colocam um conteúdo de texto dentro da tag.
- [] : Podem ser usados para colocar atributos dentro da tag.
- Veja alguns exemplos:
section#emmet.container>h2{Título}+input.form-control[disabled placeholder="input"]+(ul>li*3)+div.exemplo>p#emmet
Essa abreviação emmet cria o seguinte código:
Inclusão de favicon
Quando estamos navegando na internet, é possível perceber que na maioria dos sites há um ícone ao lado esquerdo do título das guias, esse ícone geralmente é chamado favicon.ico, que pode ser definido no head da página com uma tag link.
Existem vários tipos de ícones de cada dispositivo e tamanho, porém o mais comum é o favicon.ico de 16 por 16 pixels. É possível gerar um ícone desses gratuitamente na internet a partir de um arquivo de imagem através do seguinte site, por exemplo: Gerador de ícones.
Após o ícone ter sido criado e já estiver na pasta do projeto, basta o importar com uma tag link:
Boas práticas de SEO
SEO é uma sigla para Search Engine Optimization, o que significa basicamente otimização de mecanismos de busca. Esse mecanismo serve para posicionar as páginas de acordo com a busca do usuário, com o objetivo de gerar um tráfego orgânico e que satisfaça o usuário.
O processo de SEO vai gerar um ranqueamento dos sites mais adequados para a busca feita no navegador. A maioria das características analisadas pelo SEO são relacionadas a performance, usabilidade, acessibilidade, navegabilidade e comunicabilidade. Basicamente o site deve ter navegação fácil e intuitiva, conteúdo nos tamanhos adequados e deixar claro sobre o que a página fala.
Algumas recomendações:
SEO é um tema extenso, porém estas são algumas das recomendações mais importantes que podem ser cumpridas sem muita dificuldade:
- Usar fontes de tamanho legível
- Botões e elementos clicáveis devem ter tamanhos apropriados
- Colocar o atributo "alt" nas imagens
- Links atualizados e funcionando, a página deve poder ser acessada por outra, assim como levar o usuário a outras páginas
- Especificar o idioma do documento com o atributo "lang"
- Evitar plugins, já que não podem ser indexados pelos mecanismos de busca e nem todos os dispositivos podem ter suporte a certo plugin
- Links devem ter texto descritivo, deixando claro sua função e para onde levam
- Página deve retornar um HTTP status code de sucesso (da "família" 200)
- O documento deve ter uma tag meta description, que contém uma breve descrição sobre o conteúdo da página
- A página HTML deve ter um title (definido na head do HTML)
- Possuir uma tag meta viewport, por questões de acessibilidade
Core Web Vitals
A Core Web Vitals são formadas por 3 métricas focadas na experiência do usuário:
- LCP - Sigla para Largest Contentful Paint, analisa o tempo necessário para que a maior parte do conteúdo visível da página seja carregado.
- FID - Sigla para First Input Delay, mede o tempo de resposta da página para uma interação do usuário.
- CLS - Significa Cumulative Layout Shift, avalia a estabilidade da página, isto é, se o conteúdo fica estável durante o carregamento e também se há mudanças que fogem do controle do usuário.