Notes - Midia&Emojis&Fontes - HTML5
--------
unicode emoji list / emojipedia.org (search for codepoint)
js: U+1f603 . \u{1f603}
++
ou+
qlqr lugar q escreva: 😃 (substitua o "U+" por "&#x")
em css > substitua "U+" por \0
list-style-type: '2714'; // troca o símbolo das ul por algum emoji. Ex.: U+2714.
Recorda o 2714 e acrescenta uma "\". Caso queira dar um espaço entre o símbolo e o
texto da lista, coloca '2714\0020\0020...etc' logo ao lado. (não é compatível com
todos os navegadores)
00a0 ou 0020 => espaço sem quebra.
--------
pegar cores de IMAGEM:
f12 (inspecionar) -> Elementa -> clica na parte rgb -> seleciona
--------
IMAGEM >> <img> com src
Pegar imagens da net, botão direito, copiar endereço da imagen e colocar em src
--------
Banco de IMAGENS gratuitas -> UnSplash/Pexels (tem VÍDEOS
também)/Freepik/Rawpixel/Pixabay/Libreshot/Wikimedia Commons
--------
Redimensionando imagens com o GIMP: abre ela no tamanho original e n no formato
gimp (clicar em manter), dps vai em imagens no menu de cima e depois em
redimensionar, dps muda as configurações para as seguintes recomendações: 1200 de
largura com o cadeado fechado, 50% ou 11% se for mt pequena de qualidade em baixo.
Dps disso vai em exportar e coloca a resolução 70%.
--------
Formatar imagens em circulo: pega a imagem, corta um pouco mais ela pra ficar mais
fácil de cortar, ai redimensiona para 150x150 (normalmente), cria uma seleção
elíptica no canto superior esquerdo ou tecla E (eu acho), ai arruma na imagem. Dps
disso, botão direito na seleção, vai em inverter. Dps vai na camada da iagem e
ativa o negoço q eu esqueci o nome mas é algm coisa c a, ai dps volta p imagem e
clica em limpar. Dps exporta
--------
png é mais pesado e maior q o jpg
salvar para web ja com as dimensoes certas p diminuir o tamanho do arquivo
--------
Buscar imagens sem copyright no google: ferramentas >> direito de uso >>
reutilização com modificação
--------
Os textos alternativos, ou "alt", servem como acessibilidade para deficientes
visuais e para suas imagens aparecerem no mecanismo de busca. Logo, seja
descritivo, porém, objetivo ao colocar os nomes alternativos (não utilize "foto",
por exemplo).
--------
favicon
após o <title> do <header>, digita "link:favicon"
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
favicon sites: iconarchive.com >> favicon list /// favicon.cc >> favicon
painter /// favicon.io >> favicon generator
--------
ao criar nova imagem no gimp, apertar tab após digitar largura ou altura ja faz ele
ir pro prox topico
--------
IMAGEM DINÂMICA
<picture></picture> >> serve pra armazenar mais de um tamanho de imagem da mesma
original, para adaptar de acordo com o tamanho do aparelho do usuário. Ela será
usada em conjunto com a tag source para fazer essa troca.
<source media="(min-width: )" srcset="" type="image/"> ( source:media:type )
media (utilizar max-width, é mlhr) >> indica o tamanho máximo a ser considerado pra
passar a carregar a imagem indicada no atributo srcset (os sources devem estar na
ordem crescente, sendo o último item de picture, a maior imagem (tag <img>), ou
seja, a padrão) (colocar o valor de width máx exato da imagem abaixo funciona, mas
a barra horizontal de rolagem ainda pode aparecer, logo, é recomendado usar 50px ou
35px ou 30px a mais) (é interessante você conferir se a imagem, quando trocada, não
fica muito grande na tela. Caso fique, basta diminuir o max-width que ele passará a
trocar de imagem somente quando a tela estiver nesse tamanho {menor} e isso fará
com que dê tempo da imagem "diminuir" um pouco) (utilizando site responsivo, esse
processo fica mais fácil, ent nesse caso o ideal é usar, talvez, -200px da qntd de
pixels da imagem anterior (abaixo))
srcset >> vai configurar o nome da imagem que será carregada quando o tamanho
indicado for atingido.
type >> vai indicar o media type da imagem que usamos. type="" ->>
(https://www.iana.org/assignments/media-types/media-types.xhtml) (pdf:
application/pdf /// zip: application/zip /// text.html /// text/css ///
text/javascript /// video/mp4 /// video/webm /// video/ogv /// video/H264 ///
video/JPEG //// audio/aac /// mp3: audio/mpeg /// audio/ogg /// audio/wav ///
font/ttf /// image/jpeg /// image/png)
(source:src)
Ex.: <picture>
<source media="(max-width: 750px)" srcset="imagens/foto-p.png"
type="image/png"> /*mostra uma outra imagem caso a tela do dispositivo/navegador
atinja a max-width, cuja dimensão será a width da imagem abaixo*/
<source media="(max-width: 1050px)" srcset="imagens/foto-m.png"
type="image/png"> /*mostra uma outra imagem caso a tela do dispositivo/navegador
atinja a max-width, cuja dimensão será a width da imagem abaixo*/
<img src="imagens/foto-g.png" alt="Imagem flexível"> /*img
original com 1000px*/
</picture>
(se a original no {img} n tiver pegando tenta trocar o src por srcset {tem q
escrever o url certo} p arrumar)
--------
AUDIOS
procurar na biblioteca do youtube studio, em atribuição (necessária = copiar a
linha do código)
(source:src)
<audio scr="audio.mp3" controls autoplay></audio> >> essa maneira é meio
ultrapassada e só funciona para mp3/OGG/WAV. O scr é o source, p controls faz
aparece os controles de áudio e o autoplay, em teoria, deveria fazer tocar.
maneira ideal:
<audio preload="metadata" autoplay controls loop>
<source src="midia/happy-mistake.mp3" type="audio/mpeg">
</audio>
preload >> define se o áudio vai ser pré-carregado ou não (metadata >> carrega
apenas informações sobre o arquivo {tamanho, tempo, direitos, etc} // none >>
carrega nada até q o usuário clique no botão play ou algo inicie a reprodução //
auto {padrão} >> carrega o arquivo de áudio por inteiro assim que a pág for
carregada, mesmo se o usuário não apertar play.
controls >> apresenta o player na tela. Caso n esteja dentro da tag <audio>, ele
será transparente e o usuário não poderar interagir com ele.
autoplay >> inicia a reprodução do áudio assim q a pág for carregada
loop >> áudio vai ser repetido eternamente
*Obs.: dentro da tag <audio> deve haver diversas formas do arquivo, pois ela tenta
carregar o primeiro e caso não dê, ela tenta carregar na segunda forma, e assim por
diante. Após todas as formas "de segurança", deve-se ter um parágrafo com um link
para download indicando que o navegador do usuário não permite o áudio e apresenta
a opção de download.
VÍDEOS
conversões: adaptar o mp4 >> handbrake faz // converter para WebM >> handbrake
faz // converter para ogv >> online mesmo (convertio.co (algm coisa assim)
(source:src) >> hospedar vídeos dessa maneira pode gerar um custo elevado de banda
ao hospedar um site. // IDEAL: vimeo ou YouTube
<video width="600" poster="imagens/limoes-capa.png" controls loop autoplay>
<source src="midia/coffe-video.ogv" type="video/ogv">
<source src="midia/coffe-video.webm" type="video/webm">
<source src="midia/coffe-video.mp4" type="video/mp4">
<p>Infelizmente seu navegador não conseguiu carregar o vídeo.</p>
</video>
width >> largura do video (600px)
poster >> coloca uma thumbnail no video q ficará antes do video dar play
controls >> configura se os controles do video vao aparecer na parte inferior da
mídia
autoplay >> diz se o video começa automaticamente
loop >> toca o video novamente automaticamente e infinitamente
Navegadores ||| Arquivos Compatíveis
Microsoft Edge ||| .mp4 .m4v
Apple Safari ||| .mp4 .m4v
Google Chrome ||| .mp4 .m4v .webm .ogv
Mozilla Firefox ||| .webm .ogv
Opera ||| .webm .ogv
IFRAMES (inline frames - NÃO são a mesma coisa que frames):
Iframes é uma tag usada para inserir uma página HTML em outra. Normalmente são
utilizados para integrar objetos de outras páginas em um site, como por exemplo,
vídeos do YouTube, mapas do Google Maps, entre outros.
Deve-se tomar cuidado ao utilizar iframes pois eles apresentam certos riscos como:
má usabilidade de usuários caso sejam sites no iframe, alguns navegadores não serem
compatíveis ou reconhecerem os comandos de maneiras diferentes, má acessibilidade
para pessoas com deficiência visual pois alguns leitores de tela não são
compatíveis, bot do google não conseguindo ler/acessar o iframe adequadamente em
alguns casos, site do iframe não responsivo, possíveis riscos ao anexar sites que
são perigosos, entre outros.
>>SEGURANÇA nos iframes:
+Dentro da tag <iframe> se adiciona ' sandbox="sandbox" ' para criar uma proteção
um pouco maior contra ataques. "sandbox" limita muito, porém, caso você queira, há
como tirar algumas das limitações para certas finalidades e casos. Ex.:
sandbox="allow-same-origin" > segurança, porém libera para arquivos da mesma
origem (caso seja um arquivo do seu domínio)
sandbox="allow-forms" > segurança, porém permite formulários
sandbox="allow-scripts" > segurança, porém permite scripts
sandbox="allow-same-origin allow-forms allow-scripts" > permite tudo acima
com segurança
+Dentro da tag <iframe> se adiciona ' referrerpolicy="no-referrer" ' para limitar
um pouco o site/arquivo do iframe, fazendo com que o conteúdo do iframe não colete
nenhum tipo de informação do usuário, seja pra anúncios ou até certas coisas
indevidas.
*Obs¹.: alguns navegadores não são compatíveis com esse recurso, logo, é
interessante adicionar dentro do <iframe></iframe> um link para que esses usuários
também possam usufruir de 100% do site. Fazendo isso, caso o navegador não carregue
o iframe, ele carregará a âncora com o link. Ex.:
Acessando o site do
<iframe src="https://www.cursoemvideo.com" frameborder="0">
<a href="https://www.cursoemvideo.com">CursoemVideo</a>
</iframe>
para aprender a programar.
*Obs².: alguns sites possuem proteção para que não sejam exibidos em iframes. Ex.:
o site da google
*Obs³.: para anexar um arquivo HTML/site próprio, você pode colocar o link ou, caso
seja um arquivo HTML próprio, basta colocar o nome do arquivo e se necessário, a
pasta (vscode: cntrl+espaço)
>>Como anexar iframes de vídeos):
YouTube >> ideal para não gastar a banda da hospedagem do cliente, porém, mesmo que
o vídeo esteja não listado (não poderá ser encontrado no search do YT), quando o
cliente do site pegar o link, ele poderá incorporá-lo em qlqr lugar. (compartilhar
>> </> incorporar >> colar no arquivo html)
Vimeo >> é necessário ter uma conta paga. Porém, com ele, o usuário pode limitar
quem tem acesso aos seus vídeos e a fluidez do vídeo, quando hospedada no site, é
maior. (compartinhar >> incorporar >> colar no arquivo html)
>>Como anexar iframe de mapas:
Maps.google >> www.google.com/maps > compartilhar > incorporar um mapa > "Copiar
HTML"
Waze >> www.waze.com > compartilhar > incorporar um mapa > copia e cola
>>Como anexar docsgoogle:
Google Apresentações >> docs.google.com > apresentações >> canto superior esquerdo
> arquivo > compartilhar > publicar na web > incorporar
>>Como fazer navegação no iframe:
Cria-se um iframe, que não necessariamente precisa ter um src dentro, mas é
interessante para o conteúdo não ficar vazio de início. Esse iframe deve conter um
name="" ("frame" é + prático). Após isso, cria-se alguma div no código principal no
qual o iframe está inserido com as âncoras de navegação. Elas devem conter os
links/arquivos que vão ser as "páginas" do iframe e, além disso, devem conter no
target o name que você determinou no iframe. Nesse caso, ' target="name" '. Ex.:
<ul>
<li><a href="paginas-extras/pag001.html" target="frame">Primeira
página</a></li>
<li><a href="paginas-extras/pag002.html" target="frame">Segunda
página</a></li>
<li><a href="paginas-extras/pag003.html" target="frame">Terceira
página</a></li>
</ul>
<iframe src="paginas-extras/pag001.html" id="tela" name="frame">
<p>[ Infelizmente seu navegador não é compatível com isso !]</p>
</iframe>
>Transformando iframes em uma rolagem de site (simua um site, é mais leve, e não
tem cliques):
Em alguns celulares samsung, tira o print, e na tela transparente debaixo, clica na
opção de rolagem para baixo até estar satisfeito.
Caso não tenha esse recurso, tira vários prints.
No Gimp: Imagens > Tamanho da Tela de Pintura > Muda a altura para um tamanho
absurdo (10000) para poder acrescentar as fotos e editar. Além disso, muda x e y no
deslocamento para 0, caso não estejam assim > Ferramenta de movimento e move a
imagem a fim de retirar a "barra de rolagem" de cima da tela, pois é um print de um
celular > Depois vai na seleção retangular e corta a 2 imagem para encaixar na 1° >
Ao colar, aperta shift + q e usa a ferramenta de mover > repete isso para as outras
imagens > ao finalizar, usa a ferramenta de corte para selecionar só o que você
quer (ou imagem > recortar para conteúdo). Após isso, vai em imagem > redimensionar
a imagem > altera a largura dela para o que você precisa (talvez, 600px) > Exportar
como > Selecionar tipo de arquivo (embaixo) > Seleciona jpg.
Bons sites para criar a paleta de cores do seu site
https://color.adobe.com/pt/
https://paletton.com/
https://coolors.co/generate
https://palx.jxnblk.com/
FONTES
Tipografia >> arte antiga que estuda as técnicas de ESCRITA (escrita do Grego,
graphia) para a apresentação de forma impressa (impressão do Grego, týpos). Essa
preocupação surgiu na época em que as grandes prensas físicas eram usadas para
produzir livros/jornais. Os TIPOS MÓVEIS são aquelas peças de metal/madeira/argila
que são usados para "carimbar" o papel e fazer as letras.
O mundo da tipografia se inicia em 1450, com o inventor Alemão Johannes Gutenberg,
criador da prensa mecânica de tipos móveis. Guternberg acabou sendo reconhecido
como aquele que deu início à Revolução da Imprensa (posteriormente descobriram que
os chineses já possuíam algo semelhante antes, fato que "invalida" o título do
alemão, porém na época não existia um fluxo de informação intenso, portanto,
provavelmente foi uma "coincidência" de épocas diferentes). Após a prensa
começou-se a estudar e a buscar letras que fossem mais "legíveis" e de fácil
entendimento comum para utilizar nessas prensas; surge então, o estudo da
tipografia. Antes disso tudo, cada exemplar de um livro era reproduzido através de
material manuscrito devidamente copiado, palavra por palavra, até atingir o
resultado desejado. Quem copiava esses livros, cujo processo demorava bastante, em
função do demasiado tempo que era necessário para copiar diversas páginas repletas
de palavras à mão, eram os Monges Copistas, ou, Amanuenses.
Fonte, Letra e Família
+ Glifos, letras e caracteres
>> São os signos alfabéticos projetados para reprodução mecânica. Ex. (a à h):
abcdefgh
+ Família Tipográfica
>> É o conjunto de glifos que possuem as mesmas características anatômicas,
independente de suas variações.
Ex.: a família tipográfica "Open Sans" possui várias configurações de peso (de
300 a 800). Mesmo parecendo diferentes, a tipografia das variações são as mesmas.
(Light 300/Angular 400/Semi-bold 600/Sold 700/Extra-bold 800)
+ Fontes
>> Conjunto de glifos que formam uma família tipográfica. Esse termo também é
aplicável ao arquivo digital que armazena todos os formatos de glifo que compõem
uma determinada família tipográfica.
Logo, Família tipográfica = Fonte, porém, este é o arquivo digital e aquela é o
"conceito"/"conteúdo". E também, 2 fontes podem pertencer a mesma família
tipográfica, porém, com características diferente.
Anatomia do Tipo
+Elementos Métricos
Ao criar uma fonte, primeiramente, mede-se a altura que a letra "x" minúscula vai
ocupar (altura-x).
A altura das masiúsculas localiza-se acima da altura-x, ocupando o espaço
"restante" que as letras maiúsculas precisam usar.
Além disso, existem as alturas: ascendente e descendente. Elas delimitam o espaço
do "vazamento" das letras, para cima e para baixo, respectivamente.
Ao somar todas essas alturas, acha-se o "corpo".
+Elementos anatômicos
Nem todas as fontes os possuem, porém, são elementos que formam a "personalidade"
da fonte. Ex.: serifa (apoio). Pequenas retas que ornamentam as hastes de alguns
tipos; é a pontinha que sai no final das letras, quase como um "pé" (cuidado para n
confundir como elemento anatômico pé).
+Categorias de fontes
Normalmente são classificadas baseado na presença ou ausência de serifa, afinal, as
demais categorias são variações dessas duas principais (com ou sem serifa) ou não
se encaixam nessas características.
Categorias (Noto Serif - Google)
>> Serif: serifadas. Guiam os olhos. É mais usada no papel. Não é recomendada
para textos longos na web.
>> Sans-serif: não serifadas. Transmitem a sensação de limpeza, clareza e
organização, logo, são as mais utilizadas em sites, principalmente em textos
longos. Ainda assim, é importante se atentar ao espaçamento das letras.
>> Monospaced: monoespaçadas. Possuem a mesma largura para todas as letras. É
muito usada em comandos de linguagens de programação de computadores. Por isso,
também é chamada de fonte de terminal ou fonte de console.
>> Handwriting: também chamadas de fontes script, são aquelas que tentam
imitar a escrita humana. Seu uso deve ser bastante controlado e jamais deve ser
aplicados a textos muito longos, pois causam cansaço visual e tornam-se difíceis de
ler.
>> Display: são fontes com bastante efeitos visuais e enfeitadas. Também são
chamadas de fontes comemorativas e algumas delas sequer representam letras, podendo
ser desenhos, objetos, pessoas. São recomendadas para títulos mas devem ser
evitadas em textos médios ou longos.
UTILIZANDO FONTES (para sites e navegadores normalmente a fonte tem 16px)
Em css, usando "font-family:". O recomendável é usar mais de uma família e depois
terminar com uma categoria genérica (normalmente, serif, sans-serif ou monospaced).
Existem muitos dispositivos/navegadores diferentes e isso pode gerar alguma
incompatibilidade com alguma fonte que você inserir, logo, colocar opções sempre é
interessante. A categoria no final serve para, caso o navegador, ao ler as fontes
com prioridade da esquerda para direita, não possua as fontes, ele seleciona alguma
qualquer que ele possua dentro daquela categoria. Ex.: font-family: Arial,
Helvetica, sans-serif;
Existem sequências/combinações de fontes que são pre-determinadas e seguras para
utilizar nas CSS após o "font-family", que já possuem, usualmente, dois nomes de
fontes e uma categoria ao final (CSS Web Safe Font Combinations - site que possui
algumas).
+ Tamanhos
>>Existem várias medidas e elas são divididas em Absolutas e Relativas. São elas:
>>Absolutas: cm (centímetros), mm (milímetros), in (polegadas), pt (pontos),
px (pixels) e pc (paica) (datilografia / papel), etc.
///Recomendada: px.
>>Relativas: em (relativa ao tamanho atual da fonte, normalmente 16px padrão
{M maiúsculo de uma letra}), ex (relativa a uma altura x de uma fonte), rem
(relativo ao tamanho do root, ou seja, a fonte que tá configurada no body ou no *),
VW (relativo a largura da viewport, viewport é o tamanho da sua tela), vh (altura
da viewport), %, etc.
///Recomendada: em.
Para tamanhos de fonte a serem exibidos na tela, o W3c (órgão regulamentador de
coisas da web) recomenda o uso do px ou do em.
A recomendação para usar Pt é somentes para referênciar conteúdos que serão
impressos.
A medida "em" gera muitas dúvidas. Ela é uma medida referencial em relação ao
tamanho original da fonte. Levando em consideração que o padrão é 16px, isso
equivale a 1em. Com base nisso a fonte é utilizada; Ex.:
h1 {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 2em;
}
h2 {
font-family: 'Times new Roman', Times, serif;
font-size: 1.5em;
}
No exemplo acima, todo h1 terá o dobro de tamanho padrão e todo h2 terá 1,5x o
tamanho padrão.
+Outros Estilos
Também são muito usadas as propriedades: font-style para aplicar o "itálico"
(italic ou oblique - menos usado) e a font-weight para aplciar o "negrito"
(lighter, normal, bold, bolder, ou números de, normalmente, 100 a 900), sem
apresentar fator semântico.
+Shorthands
Além disso, existem shorthands que encurtam a estilização de fontes (n gosto). Ao
invés de fazer configurações em múltiplas linhas, Ex.:
p {
font-family: Arial;
font-size: 1em;
font-style: italic;
font-weight: bold;
}
Podemos usar o FONT que simplifica tudo:
p {
font: italic bold 1em Arial, Helvetica, sans-serif;
}
ORDEM dos atributos em CSS:
font style-->font-variant-->font-weight-->font-size/line-height--> font-family.
"Modificações na Fonte":
text-transform: uppercase; // muda p caixa alta
font-variant: small-caps;
ADICIONANDO FONTES EXTERNAS
Via "LINKS": Vai no google fonts, procura a fonte, quando for na categoria style
dela, ao lado de cada versão tem um +. Depois de adiconar todas as fontes que quer
usar, em cima, nos bloquinhos quadrados que parecem o windows, abre uma aba para
poder anexar ao código. Pode ser por <link> (em HTML) ou por @import (em CSS), @ é
recomendado (site bom: fonts.google.com).
Ex.: @import url('https://fonts.googleapis.com/css2?
family=Kaushan+Script&display=swap');
Via ARQUIVOS: na parte style do site, no início, acrescenta @font-face com o url e
o format(); (site: dafont.com {cuidado com direitos autorais})
Ex.:
@font-face {
font-family: 'Android';
src: url('../fontes/idroid.otf') format('opentype'); {ao pegar várias,
separa {o src e o format} por vírgulas, igual em h1, h2.
font-weight: normal;
font-style: normal;
}
tipos de format() (pode verificar nas propriedades do arquivo)
-opentype (otf)
-truetype (ttf)
-embedded-opentype
-truetype-aat (Apple Advanced Typography)
-svg
IDENTIFICAR FONTES
sites:
https://www.whatfontis.com/
https://www.fontsquirrel.com/matcherator
https://www.myfonts.com/pages/whatthefont
ctrl + shif + a >> tira a seleção atual no Gimp (desseleciona o elemento atual;
deixa livre)
Borda Personalizada por imagem - ñ recomendado
no gimp, arquivo novo, 80x80, resolução 70 nos dois, faz um jogo da velha simétrico
com as linhas de seleção, cria uma seleção elíptica no quadrado do canto superior
direito(n precisa ser todo), pinta com o balde de alguma cor. Daí, seleciona na de
mover essa camada, vai no canto inferior esquerdo do gimp, clica nos dois
quadradinhos de duplicar camada, move a bola arrastando para o próximo quadrado da
direita. Faz isso para todos menos no meio. Após ter um quadrado com bolas ao
redor, pode pintar as bolas dos cantos, aperta ctrl + shift + a para desselecionar
a que vc ta, clica na q vc quer pintar através das camadas na direita, escolhe uma
cor e pinta as pontas. Salva a imagem como png.
É obrigatório ter uma border: e um padding: antes pra depois a imagem ir por cima,
por isso usamos o transparent, afinal, nem todos os navegadores são compatíveis.
<style> > h1{} >
border: 17px solid transparent;
padding: 10px;
border-image: url('borda.png') 25 repeat;
---------------------------------------------------------
border-image-source: url('borda.png');
border-image-slice: 25;
border-image-repeat: repeat; (tbm pode ser stretch)
ou
border-image: url('borda.png') 25 repeat;
CRIANDO TABELAS
++Não usar tabelas pra montar a estrutura do site.ex
<table></table> Cria um loca para delimitar a tabela.
>Anatomia de Tabela SIMPLES:
TABLE = Tabela ( <table></> )
TABLE ROW = linha de tabela ( <tr></> - fechamento opc. )
TABLE HEADER = cabeçalho de tabela ( <th></> fechamento opc. )
TABLE DATA = dado de tabela ( <td></> - fechamento opc.)
Ex. de tabela:
<table>
<tr> <!--1 Linha-->
<td>A1</td>
<td>B1</td>
<td>C1</td>
</tr>
<tr> <!--2 Linha-->
<td>A2</td>
<td>B2</td>
<td>C2</td>
</tr>
<tr> <!--3 Linha-->
<td>A3</td>
<td>B3</td>
<td>C3</td>
</tr>
<tr> <!--4 Linha-->
<td>A4</td>
<td>B4</td>
<td>C4</td>
</tr>
Resultado:
A1 B1 C1
A2 B2 C2
A3 B3 C3
A4 B4 C4
Shorthand:
table>tr*4>td*3 // Tabela com 4 rows (linhas) e 3 datas (infos) em cada linha
>Anatomia de Tabela GRANDE:
TABLE
CAPTION (sem tr, td, th ou <p>. só o texto)
THEAD
TR, TD, TH
TBODY
TR, TD, TH
TFOOT
TR, TD, TH
Ex. de estrutura de tabela grande:
<table>
<thead>
<th></th>
<th></th>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<th></th>
<td><strong></strong></td>
</tfoot>
</table>
Resultado:
Estados População
São Paulo 44.420.459
Minas Gerais 20.538.718
Total de Habitantes 64.959.177
>Escopo dos table headers ( <th> ):
As tags <th>, para ficarem semânticamente adequadas, devem receber um escopo
( scope ).
Existem 4 tipos de scope:
¹¹col > Usa-se quando os conteúdos do título <th> vão estar apresentadas na coluna
desse <th>
Ex.:
Estados
São Paulo
Minas Gerais
Nesse ex. de cima, o <th> Estados recebe um scope='col'.
¹²colgroup > Usa-se quando o título <th> engloba mais de uma coluna (colspan).
²¹row > Usa-se quando os conteúdos do título <th> vão estar apresentadas na linha
desse <th>
Ex.:
Total de Habitantes | 616.044.125
Nesse ex. de cima, o <th> Total de Habitantes recebe um scope='row'.
²²rowgroup > Usa-se quando o título <th> engloba mais de uma linha (rowspan).
ÍCONES:
para usar um ícones do google com o Google Fonts basta incluir em html:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
Assim como em outras fontes da Web do Google, o CSS correto vai ser veiculado para
ativar a fonte "Ícones do Material Design" específica do navegador. Uma outra
classe CSS vai ser declarada com o nome .material-icons. Qualquer elemento que use
essa classe terá o CSS correto para renderizar esses ícones da fonte da Web.
Depois disso, onde quiser o ícone, basta adiconar:
<span class="material-icons">menu</span>
OU
<i class="material-icons">menu</i>
(n sei o "ideal"/"certo")
O "menu" pode ser substituído pelo nome de qlqr outro item, como por exemplo,
"face"
