Anotações HTML

21/04/2023, 17:51 Anotações - Evernote
HTML
*Estrutura*
<!DOCTYPE HTML> (Informa que o documento é do tipo HTML5)

<html lang="pt-br"> (Abre documento HTML e identifica o documento em português)
<head> (Comportamental)
<meta charset=utf-8"> (Informa o parâmetro de pontuação correto para suportar acentuações)
</head> (Comportamental)
<body> (Corpo - visualização da página)
</body> (Corpo - visualização da página)

</html> (Fecha Documento HTML)
**************************************************************************************************************
*Anotações*
- Tudo que está entre os sinais < (menor) e > (maior) são chamadas "marcas" ou "tags"
- < > (abre) - </> (fecha)
- <head> (cabeçalho): configurações comportamentais da página devem estar nesta tag
- <body> (exibição): tudo que aparecerá na página deve estar nesta tag
- <li> (List item)
- href (hypertext reference)
**************************************************************************************************************
*Tags Comportamentais*
1) <title>
2) <style>
**************************************************************************************************************
* Tags sem fechamento - <tag/> ou <tag> (A tag não é repetida no final, e a barra é colocada depois do nome)
1) <meta> (Conjunto de caracteres latinos que resolve o problema da acentuação)
Ex:
<meta charset=utf-8"></meta> (ERRADO)

<meta charset=utf-8"/> (CORRETO)
<meta charset=utf-8"> (CORRETO)
2) <br/> (Quebra de linha)
3) <wbr/> (Quebra de palavra)
4) <link> (Cria ligação da folha de HTML com a folha CSS)
**************************************************************************************************************
* Tags com fechamento - <tag> </tag> (A tag é repetida no final, porém com a barra na frente do nome)
1) <title> (Coloca nome na aba da página)

https://www.evernote.com/client/web?login=true#?b=5e76cfdd-de69-479e-8caa-c0b802aaa996&n=fdb78a12-3771-4a31-9602-e0eae3f26113& 1/15
1) <title> (Coloca nome na aba da página)
2) <h1> (Título principal)
3) <h2> (Subtítulo de <h1>)
4) <h3> (Subtítulo de <h2> e <h1>)
5) <style> (Estilo da página)
6) <hgroup> (Agrupa títulos e organiza a semântica do código HTML)
7) <header> (Cria e delimita o conteúdo do cabeçalho)
8) <div> (Cria divisões na página)
9) <p> (Cria parágrafos)
10) <nav> (Tudo que está entre essa tag, vira um menu de navegação)
11) <ol> (Lista ordenada)
12) <ul> (Lista não ordenada)
13) <li> (Para cada item dentro de <ol> e <ul> usar a tag <li>)
14) <a> (Âncora para aplicação de links)
15) <b> (Texto em negrito)
16) <i> (Texto em itálico)
17) <em> (Texto em itálico com ênfase) - IMPORTANTE
18) <del> (Texto riscado)
19) <figure> (Organiza imagem que está relacionada ao conteúdo)
20) <figcaption> (Cria legenda na imagem para facilitar busca e o sistema de acessibilidade faz a leitura)
21) <section> (Cria uma sessão: conteúdo - corpo)
22) <aside> (Cria conteúdo lateral/auxiliar)
23) <footer> (Cria rodapé)
24) <table> (Cria estrutura da tabela)
25) <caption> (Título da tabela)
26) <strong> (Texto em negrito)
27) <main> (Apenas de sintaxe, demonstra que é o conteúdo principal)
28) <blockquote> (Semanticamente para citação)
29) <cite> (Autor da citação)
**************************************************************************************************************
* Tags depreciadas (HTML4)
1) <u> (Texto sublinhado)
2) <s> (Texto riscado)
3) align=center (Centraliza e modifica outros formatos do texto)
**************************************************************************************************************
AGRUPANDO TÍTULOS QUE CONDIZEM COM O MESMO ASSUNTO
**************************************************************************************************************

Ex:
<hgroup>
<h1>Google Glass</h1>
<h2>A revolução do Google está chegando</h2>
</hgroup>
**************************************************************************************************************
ADICIONANDO IMAGENS
**************************************************************************************************************
<img src="caminho_da_imagem_nome_e_formato">
Ex:
<img src="_imagens/teste-imagem.jpg">
Usando alt, o usuário que não enxerga poderá saber o que a imagem significa por meio da legenda:
<img src="_imagens/teste-imagem.jpg" alt="Legenda">
--------------------------------------------------------------------------------------------------------------
CSS
--------------------------------------------------------------------------------------------------------------
<head>
<style>
body{

background-image: url("nome_formato_imagem");
</style>
</head>
- Para imagem de fundo na página
- Toda imagem que faz parte de um conteúdo deve receber uma tag:
Ex:
<figure>
</figure>
- Pode se colocar legenda nas imagens, porque facilitam na busca de pesquisas e o sistema de acessibilidade faz a leitura da legenda.
Ex:
<figure>
<figcaption>
<h3>Isto é um teste</h3>
<p>Aqui pode ser escrita a legenda</p>
</figcaption>
</figure>
**************************************************************************************************************
CRIANDO CABEÇALHOS
**************************************************************************************************************
<header id="cabecalho">
(Conteúdo que será o cabeçalho na página)
</header>
- O id é basicamente a identificação por nome da estrutura criada para melhor visualização do código
**************************************************************************************************************
CRIANDO DIVISÕES NA PÁGINA
**************************************************************************************************************
<div id="nome_da_div">
</div>
**************************************************************************************************************
QUEBRA DE LINHA E ESPAÇAMENTO LATERAL
**************************************************************************************************************
<br/> (Break row)
- De acordo com a quantidade de inserções dessa tag, o mesmo número de linhas será pulado
(Non-breaking Space - Espaço sem quebra)
- Espaços em branco
**************************************************************************************************************
HIFENIZAÇÃO E QUEBRA DE PALAVRAS
**************************************************************************************************************
<wbr/> (Word breaker) - Dividindo as palavras sem hífen
- Se um termo for muito longo e no momento em que se redimensiona a página, essa palavra nunca é dividida em duas, pode se usar a tag para quebrar a
palavra.
Ex:
superhumano -> super<wbr/>humano
--------------------------------------------------------------------------------------------------------------
(Soft Hyphen) - Dividindo as palavras com hífen
- O termo será quebrado quando a tela for redimensionada e aparecerá o hífen para separar os dois termos
Ex:
Ex:
superhumano -> superhumano
super-
humano
**************************************************************************************************************
*SÍMBOLOS ESPECIAIS*
**************************************************************************************************************
* Operadores Relacionais
< (<)
> (>)
≤ (<=)
≥ (>=)
--------------------------------------------------------------------------------------------------------------
* Moedas
£ (libras)
¥ (ienes)
€ (euros)
--------------------------------------------------------------------------------------------------------------
* Marcas
© (selo copyright)
® (marca registrada)
™ (trademark)
--------------------------------------------------------------------------------------------------------------
* Sinais
&pernil; (porcentagem dividido por mil)
∑ (soma)
∞ (infinito)
× (multipliação)
± (mais ou menos)
&oplus; (soma dentro de uma circunferência)
√ (raíz quadrada)
≠ (símbolo de diferente)
--------------------------------------------------------------------------------------------------------------
* Letras Gregas
δ (símbolo de delta minúsculo)
Δ (símbolo de delta maiúsculo)
λ (lâmbida)
ω (ômega)
φ (fi)
--------------------------------------------------------------------------------------------------------------
* Setas
← (seta para esquerda - left arrow)
→ (seta para direita - right arrow)
↑ (seta para cima - up arrow)
↓ (seta para baixo - down arrow)
↔ (seta para os dois lados)
- Se colocar a primeira letra do comando em maísculo, a seta é modificada
--------------------------------------------------------------------------------------------------------------
* Naipes de Cartas
&spades; (espadas)
&clubs; (paus)
&hearts; (copas)
&diams; (ouros)
**************************************************************************************************************
CRIANDO UMA ÁREA DE NAVEGAÇÃO (CONTAINER)
**************************************************************************************************************
<nav id="nome_da_nav">
</nav>
* Transformando itens em lista:
- Dois tipos de lista:
1) Ordered lists (ol) - Listas Ordenadas
1) <ol type="1">
- Ordena numéricamente os itens
2) <ol type="a">

- Ordena alfabeticamente os itens
- Se a letra for "A", na ordenação as letras também serão maiúsculas
3) <ol type="i">
- Ordena por meio de algarismos romanos (i, ii, iii, iv...)
é ú
- Se a letra for "I", na ordenação os algarismos romanos também serão maiúsculos (I, II, III, IV...)
- Para começar a lista em um valor específico:
<ol type="1" start="valor_especifico";
Ex:
<ol type="1" start="3";
3. Home
4. Fotos
5. Multimídia
6. Fale Conosco
Ou
<ol type="a" start="3";
c. Home
d. Fotos
e. Multimídia
f. Fale Conosco
Ex Lista Ordenada:
<nav>
<h1>Menu Principal</h1>
<ol>
<li>Home</li>
<li>Fotos</li>
<li>Multimídia</li>
<li>Fale Conosco</li>
</ol>
</nav>
--------------------------------------------------------------------------------------------------------------
2) Unordered lists (ul) - Lista Não Ordenadas
1) <ul type="square">
- Transforma os itens em pequenos quadrados
2) <ul type="disc">
- Transforma os itens em pequenos círculos
3) <ul type="circle">

- Transforma os itens em pequenos círculos com borda preta e fundo branco
Ex Lista Não Ordenada:
<nav>
<ul>
<li>Home</li>
<li>Fotos</li>
</ul>
</nav>
--------------------------------------------------------------------------------------------------------------
* Listas Encadeadas
Ex 1 - Lista encadeada mista:
<nav>
<ul>
<li>Home</li>
<li>Fotos</li>
<ol>
<li>Músicas</li>
<li>Vídeos</li>
</ol>
</ul>
</nav>
--------------------------------------------------------------------------------------------------------------
Ex 2 - Lista encadeada com hierarquia:
<nav>
<ul>
<li>Home</li>
<li>Fotos</li>
<ul>
<li>Músicas</li>
<li>Vídeos</li>
</ul>
</ul>
</nav>
**************************************************************************************************************
COLOCANDO LINKS
**************************************************************************************************************
* Criar âncora (tag a) para abrir outros sites (na mesma aba)
<a href="endereco_site">Palavra</a>
Ex:
<a href="http://glass.google.com">Projeto Glass</a>
ou
<a href="http://glass.google.com" target="_self">Projeto Glass</a>
--------------------------------------------------------------------------------------------------------------
* Criar âncora para abrir outros sites (em outra aba) (RECOMENDADO)
<a href="endereco_site" target="_blank">Palavra</a>
Ex:
<a href="http://glass.google.com" target="_blank">Projeto Glass</a>
**************************************************************************************************************
FORMATANDO O TEXTO
**************************************************************************************************************
NEGRITO
<b> texto </b> -> negrito

<strong> texto </strong ênfase negrito (A aparência é a mesma, mas nesse caso, o navegador reconhece que é uma ênfase a tal palavra ou termo)
ITÁLICO
<i> texto </i> -> itálico (Muda apenas o formato da palavra ou termo)
<em> texto </em> -> ênfase itálica (A aparência é a mesma, mas nesse caso, o navegador reconhece que é uma ênfase a tal palavra ou termo)
RISCA
<del> texto </del> -> risca o texto
--------------------------------------------------------------------------------------------------------------
CSS
--------------------------------------------------------------------------------------------------------------
* <span> texto </span>
- Tag utilizada para formatar pequenos trechos de textos
Ex 1:
- Sublinha o texto
<span style="text-decoration: underline;">Texto</span>
Ex 2:
- Linha acima do texto
<span style="text-decoration: overline;">Texto</span>
Ex 3:
- Risca o texto
<span style="text-decoration: line-through;">Texto</span>
Ex 4:
- Texto sem formatação alguma
<span style="text-decoration: none;">Texto</span>
Ex 5:
- Texto formatado no padrão normal
<span style="font weight: normal;">Texto</span>
Ex 6:
- Texto em negrito
<span style="font weight: bold;">Texto</span>
Ex 7:
- Texto em negrito com maior intensidade
<span style="font weight: bolder;">Texto</span>
Ex 8:
- É possível escolher a intensidade do negrito entre "100" e "900"
<span style="font weight: 600;">Texto</span>
--------------------------------------------------------------------------------------------------------------
* ALINHAMENTO
--------------------------------------------------------------------------------------------------------------
Ex 1:
- Texto no centro
<h2 style="text-align: center;">texto</h2>
Ex 2:
- Texto justificado
<h2 style="text-align: justify;">texto</h2>
Ex 3:
- Texto justificado com parágrafos identados
<h2 style="text-align: justify; text-indent: 50 px">texto</h2>
Ex 4:
- Texto à esquerda
<h2 style="text-align: left;">texto</h2>
Ex 5:
- Texto à direita
<h2 style="text-align: right;">texto</h2>
--------------------------------------------------------------------------------------------------------------
* EXEMPLOS DE FORMATAÇÃO
--------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------
1 - Resultado de texto sobrescrito (acima)
<sup>texto</sup>
2 - Resultado de texto subscrito (abaixo)
<sub>texto</sub>
3 - Se for necessário escrever um código de alguma outra linguagem, como por exemplo: <stdio.h> é necessário escrever assim: <stdio.h> para que não
hajam confusões de símbolos e tags na exibição
4 - Tag para formatar códigos
<pre>
<code>
...
código
...
</code>
</pre>
- Com a tag <code> (tag semântica) o HTML reconhece que há linhas de código e a tag <pre> considera todos os espaços e linhas preenchidas para uma
exibição mais organizada
**************************************************************************************************************
FORMATAÇÕES GLOBAIS DO CSS
**************************************************************************************************************
- As formatações serão feitas dentro da tag <head> (comportamental)
Ex:
<head>
<style>
</style>
</head>
- Tudo que estiver dentro da tag <style> será a formatação geral da página
Ex:
<head>
<style>
p{
text-align: justify;
text-indent: 50 px;
</style>
</head>
- No caso acima, foi criado um estilo para todos os parágrafos da página
**************************************************************************************************************
CORES EM CSS
**************************************************************************************************************
<head>
<style>
body{
background-color: nome_da_cor ou código; (Troca a cor de fundo da página)

color: nome_da_cor ou código; (Troca a cor da fonte da página)
</style>
</head>
* Maneiras de se colocar cores
1 - Estrutura em hexadecimal: #000000;
- Inicia com asterisco, os dois primeiros dígitos são a quantidade de vermelho, os próximos dois a quantidade de verde e os últimos dois a quantidade de azul
2 - Estrutura em RGB: rgb(0, 0, 0);
- Valor de vermelho, verde e azul
3 - rgba(0,0,0,0); ou rgba(0,0,0,1); (valor_vermelho, valor_verde, valor_azul, canal_alfa)
(0 -> transparente, 1 -> não transparente e os valores entre 0 e 1 são as variações de transparência)
4 - hsl(0, 0%, 0%); (matiz, saturação (em porcentagem) e luminosidade (em porcentagem))
5 - hsl(0, 0%, 0%, 0); (matiz, saturação (em porcentagem), luminosidade (em porcentagem) e canal_alfa)
**************************************************************************************************************
CRIANDO SESSÃO - CORPO, CONTEÚDO LATERAL E RODAPÉ
**************************************************************************************************************
<section id="corpo">
Conteúdo - corpo
</section>
<aside id="lateral">
Conteúdo lateral
</aside>
<footer id="rodape">
Rodapé
</footer>
--------------------------------------------------------------------------------------------------------------
SECTION/ASIDE/FOOTER
--------------------------------------------------------------------------------------------------------------
section#corpo{

display: block; (para ser exibida em bloco)
width: 400px; (largura)
float: left; (configuração que faz o bloco flutuar no lado esquerdo)
aside#lateral{
display: block;
width: 400px;
float: right; (configuração que faz o bloco flutuar no lado direito)
footer#rodape{
clear: both; (mostra o rodapé fora da divisão feita acima)
**************************************************************************************************************
CRIANDO TABELA
**************************************************************************************************************
<table>
</table>
* Toda tabela é composta por linhas e todas as linhas são compostas por células
<caption> (Título da tabela)
Table rows (<tr>): linhas da tabela
Table date (<td>): células com dados
---------------------------------------------------------------------------------------------------------------
ANOTAÇÕES
CSS:
* nome_tag + componente
Exemplo:
main h1{
* line-height: Controla o espaço entre as linhas de texto ou, mais precisamente, qual a altura que uma linha de texto deve ter, independente do tamanho do
texto dentro dela.
* Fazendo um triângulo:
div {
border-bottom: 30px solid red;
border-bottom: 30px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
width: 0;
}
* Bordas com diferentes cores
blockquote {
border: 10px solid #C2CCCA;
border-bottom-color: #333;
border-right-color: #FFF;
}
* Inline : não tem tamanho regulável

Tem que ser "inline:block" ou "block"
* Display: empilhamento ou posicionamento
* text-transform: uppercase; (Essa opção de letras maiúsculas não gera conflitos nas ferramentas de acessibilidade - leitura do navegador)
* Image replacement : substituição de texto por imagem

"text-indent: -9999px;" ou "font-size: 0;"
* Sintaxe:
- Classe:
.nome_classe{
}
- Tag:
nome_tag{
}
- Tag com id/ Tag com classe:
nome_tag#nome_id{
}
nome_tag#nome_classe{
}
- Tag com id e componente:
nome_tag#nome_id nome_componente{
}
* Objetos Float
Exemplo:
clear: rigth; (nenhum componente pode ter um float ao lado dele)

clear: both; (técnica clearfix) - Elemento vai para baixo de todos os floats (rodapé)
- Floats em sequência formam uma linha
* Position (referência) - Dá um controle maior para posicionar os objetos na tela

- Relative (ele mesmo) mantém fluxo da página
- Para sair do fluxo, usamos Absolute (relativo à janela do navegador)

Anotações HTML

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Anotações HTML

Enviado por

Direitos autorais:

Formatos disponíveis

21/04/2023, 17:51 Anotações - Evernote

<!DOCTYPE HTML> (Informa que o documento é do tipo HTML5)

<meta charset=utf-8"> (Informa o parâmetro de pontuação correto para suportar acentuações)

<body> (Corpo - visualização da página)

</body> (Corpo - visualização da página)

- < > (abre) - </> (fecha)

- <head> (cabeçalho): configurações comportamentais da página devem estar nesta tag

- <li> (List item)

- href (hypertext reference)

1) <meta> (Conjunto de caracteres latinos que resolve o problema da acentuação)

<meta charset=utf-8"></meta> (ERRADO)

2) <br/> (Quebra de linha)

3) <wbr/> (Quebra de palavra)

4) <link> (Cria ligação da folha de HTML com a folha CSS)

1) <title> (Coloca nome na aba da página)

2) <h1> (Título principal)

3) <h2> (Subtítulo de <h1>)

4) <h3> (Subtítulo de <h2> e <h1>)

5) <style> (Estilo da página)

6) <hgroup> (Agrupa títulos e organiza a semântica do código HTML)

7) <header> (Cria e delimita o conteúdo do cabeçalho)

8) <div> (Cria divisões na página)

9) <p> (Cria parágrafos)

11) <ol> (Lista ordenada)

12) <ul> (Lista não ordenada)

14) <a> (Âncora para aplicação de links)

15) <b> (Texto em negrito)

16) <i> (Texto em itálico)

17) <em> (Texto em itálico com ênfase) - IMPORTANTE

18) <del> (Texto riscado)

19) <figure> (Organiza imagem que está relacionada ao conteúdo)

21) <section> (Cria uma sessão: conteúdo - corpo)

22) <aside> (Cria conteúdo lateral/auxiliar)

23) <footer> (Cria rodapé)

24) <table> (Cria estrutura da tabela)

25) <caption> (Título da tabela)

26) <strong> (Texto em negrito)

27) <main> (Apenas de sintaxe, demonstra que é o conteúdo principal)

28) <blockquote> (Semanticamente para citação)

29) <cite> (Autor da citação)

* Tags depreciadas (HTML4)

1) <u> (Texto sublinhado)

2) <s> (Texto riscado)

3) align=center (Centraliza e modifica outros formatos do texto)

<img src="_imagens/teste-imagem.jpg" alt="Legenda">

- Para imagem de fundo na página

(Conteúdo que será o cabeçalho na página)

<br/> (Break row)

&nbsp; (Non-breaking Space - Espaço sem quebra)

<wbr/> (Word breaker) - Dividindo as palavras sem hífen

superhumano -> super<wbr/>humano

&shy; (Soft Hyphen) - Dividindo as palavras com hífen

superhumano -> super&shy;humano

&copy; (selo copyright)

&reg; (marca registrada)

&pernil; (porcentagem dividido por mil)

&plusmn; (mais ou menos)

&oplus; (soma dentro de uma circunferência)

&radic; (raíz quadrada)

&ne; (símbolo de diferente)

&delta; (símbolo de delta minúsculo)

&Delta; (símbolo de delta maiúsculo)

&larr; (seta para esquerda - left arrow)

&rarr; (seta para direita - right arrow)

(Non-breaking Space - Espaço sem quebra)

(Soft Hyphen) - Dividindo as palavras com hífen

superhumano -> superhumano

© (selo copyright)

® (marca registrada)

± (mais ou menos)

√ (raíz quadrada)

≠ (símbolo de diferente)

δ (símbolo de delta minúsculo)

Δ (símbolo de delta maiúsculo)

← (seta para esquerda - left arrow)

→ (seta para direita - right arrow)

↑ (seta para cima - up arrow)

↓ (seta para baixo - down arrow)

↔ (seta para os dois lados)