reginadiana/00_html.md

## 00_html.md

      
    Raw
  

              00_html.md
            
          
## 01_patterns.md

      
    Raw
  

              01_patterns.md
            
          
    Patterns


Especifique o tamanho das imagens

Essa prática tem um grande impacto visual para o usuário. Quando não especificamos o tamanho da imagem, o navegador não reserva um espaço na página para ela. O efeito é que, quando a imagem chega, ela é posicionada em seu lugar empurrando o restante do conteúdo. Isso dá a sensação de que os elementos da página estão se movendo e que ela ainda não está carregada. É uma péssima prática de usabilidade e dá a sensação de mais lerdeza.


Sempre use elementos semanticos como header, footer, ul, li, article, section, etc.


Nunca use apenas caixa alta ou baixa na marcação de títulos, utilize a propriedade CSS text-transform para isso.


Preferir a importação de font-family com @font-face e especificar cada uma das fontes.


Todo conteúdo que for adicionado no content do :before e :after não tem valor semantico e não renderiza no HTML. Esse texto não será acessivel e por isso devemos usar essas pseudo classes apenas para complementos visuais.


Podemos deixar elementos puramente visuais como icones invisiveis para leitores de telas usando aria-hidden="true"


Podemos fazer uso da tag <noscript> para fornecer um feedback ao usuário caso o javascript não esteja disponível para ele.


Usar a tag nav para todas as sessões do projeto que representem uma navegação, e não apenas para o menu do cabeçalho.


A tag main deve ser usada apenas 1 vez no projeto para agrupar o conteúdo principal da página. Exemplo:


<body>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</body>


Existem cerca de 100 tags HTML. É bastante improvável que não exista uma que sirva exatamente para cada ocasião.


i e em deixam o elemento itálico e ambos possuem carga semantica, sendo que o i costuma ser usado para coisas como expressões em outros idiomas e o em para indicar enfase no texto.


Visualmente b e strong deixam o elemento negrito. A diferença é que o b não carrega qualquer semantica e o strong representa um texto importante.


## 02_resume_html.md

      
    Raw
  

              02_resume_html.md
            
          
    Anotações sobre HTML

Define o tipo de arquivo, assim é mais fácil para os navegadores fazerem o reconhecimento do tipo de arquivo que será processado.
<!DOCTYPE html>
Puxa um arquivo css para o html.
<link rel="stylesheet" href="css/styles.css" />
Define um titulo para a página. Também deve ser escrito com cautela, pois também será usado para ajudar nas buscas na internet.
<title>Music | Justin Bieber</title>
Ao passar o mouser por cima do elemento, um bloquinho com o texto definido em title será mostrado. Exemplo
<h1 title="Justin Bieber">Justin Bieber</h1>
Define a linguagem da página
<html lang="en">
Define um icon na aba na página:
<link rel="icon" href="assets/icons/music-note.svg" />
Ao usar as meta tag como configuradores do arquivo html, podemos usar:
Para aceitar e mostrar corretamente os diferentes tipos de caracteres:
<meta charset="UTF-8"> 
Para se adaptar aos dispositivos moveis:
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
Adicionar uma descrição e autor para a página. A descrição é útil para adicionar palavras chaves e ajudar nas buscas por aquele site no Google por exemplo.
<meta name="description" content="Justin Bieber clone website">
<meta name="author" content="Diana Regina">
Lista de tags

<div> representa uma caixa, uma box, que no entando não dá verdadeiro sentido aos elementos
<header> espaço para cabeçalho
<footer> espaço para rodapé
<section> espaço para sessão
<article> espaço para artigos de blog
<svg> imagens do tipo .svg
<img> imagens de todos os tipos
<pre> mostra o texto com o espaçamento exato ao que foi escrito no editor
<b> texto em negrito
<strong> texto em negrito, representando algo importante
<i> texto em italico, representa algo com enfase
<a> Gera uma ancora, link, url
<mark> texto marcado, como se tivessemos passado um marcatexto por cima
<small> texto menor
<del> texto com um risco no meio
<ins> texto com um risco em baixo
<sub> _{texto rebaixado}
<sub> _{texto sobreposto}
<blockquote> define um bloco com um espaçamento
<q> adiciona aspas em volta do texto
<abbr> define uma abreviação, pode vir acompanhada de um atributo title para mostrar o seu significado
<address> define uma informação para contato
<cite> define o titulo de um trabalho, obra, etc
<bdo dir="rtl"> deixa o texto invertido
Lista de atributos para tags

target especifica onde o link será aberto
alt adiciona um nome para imagem, que será mostrado na tela caso a imagem não puder ser renderizada e também será lido pelos leitores de tela
title 
adiciona um texto para ser mostrado quando o usuário passar o mouse por cima do elemento

src define o caminho relativo para puxar a imagem, svg, giff, etc para o elemento
tabIndex com ele podemos definir um caminho de focus que o usuário irá seguir ao ficar clicando na tecla tab
Target para a tag ancora

_blank abre o link em outra aba
_self abre o link na mesma aba
_parent abre o link em outra aba
_top abre o link em outra aba
Fontes

Ao definir a fonte, podemos fazer uma lista de tipos, permitindo que sistemas operacionais que não possam a fonte principal definida
(Lucida Grande) tentem aplicar a próxima (Lucida Sans Unicode) e assim sucessivamente. Isso é importamente porque nem todas
as fontes estão disponíveis em todos os sistemas operacionais.
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdada, sans-serif;

Por padrão, caso o navegagor não tenha suporte a um tipo novo de campo, o elemento será tratado como um campo de texto normal (text), para garantir o funcionamento básico dos formulários.

  
## 03_buttons.md

      
    Raw
  

              03_buttons.md
            
          
    Diferentes tipos de botões

<button>Default</button>
<button className="btn-custom btn-large" type="button">
  Large Custom
</button>
<button>
 {/* Ignora o icone em screen-readers */}
 <span aria-hidden="true" data-icon="cloud"></span>
  Icon
</button>
<button type="submit">Submit</button>
<button type="button">Type Button</button>
<button type="reset">Reset</button>
<button disabled>Disabled</button>
<input type="button" value="<input>" />
<input type="file" name="" id="" />