HTML
ESTRUTURA PADRÃO:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>[
</body>
</html>
TAGS:
- Headings: Tags de heading são usadas para títulos. As tags variam de 1 até 6, e
diminuem com o aumento do número. Ex:
- <h1>Heading 1</h1>
- <h2>Heading 2</h2>
- Quebra de linha: Quebra a linha no ponto em que for chamada
- <br>
- Linhas horizontais: “Desenha uma linha horizontal onde for
chamada. Pode ser modificada usando css.
- <hr>
- Parágrafos: Mostram um texto/palavra na tela. Geralmente
usados para textos comuns.
- <p>Text</p>
- Ênfase/itálico: Usado para colocar uma determinada palavra ou
determinado texto em itálico/ênfase. Quando queremos alterar
apenas a aparência, usamos itálico, e quando queremos
“informar ao navegador” que o texto em questão é importante,
têm ênfase, usamos ênfase, já que a preocupação é com a
estrutura.
- <em></em>
- <i></i>
- Strong/Negrito: Segue o mesmo exemplo acima. Quando estamos
preocupados com a aparência, usamos bold, quando estamos
preocupados com a estrutura, usamos strong. Ademais, todos
tem o mesmo funcionamento.
- <strong></strong>
- <bold></bold>
- Listas: Usado para a criação de listas ordenadas e não
ordenadas.
- Listas não ordenadas:
- <ul>
- <li>Item 1</li>
- <li>Item 2</li>
- <li>Item 3</li>
- </ul>
- Listas Ordenadas:
- <ol>
- <li>Item 1</li>
- <li>Item 2</li>
- <li>Item 3</li>
- </ol>
- Listas de definições: Lista + definição
- <dl>
- <dt>Term 1</dt>
- <dd>Definition 1</dd>
- <dt>Term 2</dt>
- <dd>Definition 2</dd>
- <dt>Term 3</dt>
- <dd>Definition 3</dd>
- </dl>
- Imagens: Imagens podem ser colocadas dentro da pasta do
projeto, ou referenciadas através de links web.
- <img src = "[Link]">
- <img src = "[Link]/[Link]" alt = "testing photo">
- “alt” é a descrição da imagem, e sempre aparece no lugar
dela caso não consiga ser carregada
- Links e tags de âncora
- Links: Usados sempre que quero colocar um link no meu site.
Caso não seja usado, não consigo clicar no link.O href pode
ser tanto um link quanto um arquivo html prsente na pasta do
projeto. Ao clicar nesse arquivo, iríamos ver/ser
redirecionados para outra página da web.
- <a href = "[Link]
- Forms: Usado quando queremos pegar algum input do usuário, como
nome, senha, etc.
- <form>
- <label for="username">Username:</label>
- <input type="text" id="username" name="username"><br><br>
-
- <label for="password">Password:</label>
- <input type="password" id="password">
- </select><br><br>
-
- <button type="submit">Submit</button>
- </form>
- Tabelas: Cria uma tabela, com linhas e colunas. O usuário pode
colocar o que quiser nas colunas criadas, como imagens, texto,
etc.
- <table>
- <tr>
- <td> </td>
- </tr>
- </table>
- Table: Table.
- Tr: Table row
- Td: Conteúdo de cada coluna
- Caso eu queria adicionar mais colunas, basta adicionar mais
<td>’s
CSS
- Inline elements: Alterar atributos localmente. Se você alterar o
body, como no código abaixo, você altera todos os elementos do
body, ou seja, todos os elementos locais.
- <body style="background-color:blue;">
- A cor de fundo do body como um todo será azul.
- External elements: Alterar elementos externos, ou seja, alterar
elementos específicos, e não todos. Essas alterações são feitas
geralmente no próprio código HTML.
- <style>
-
- body{
- background-color: wheat;
- }
-
- hr{
- border-style: none;
- border-top-style: dotted;
- border-top-color: black;
- border-width: 2px;
- width: 8%;
- }
-
- </style>
- Nesse exemplo, a gente muda todas as linhas horizontais
presentes no código html para os parâmetros acima.
- Como debugar?
- Imagina que a gente ta tendo um problema no código, seja
html ou css. Pra gente saber onde está o problema, e fazer
alterações em tempo-real, podemos usar a ferramenta de
inspecionar dos navegadores, como o google chrome. Essa
ferramenta está disponível geralmente no menu de
configurações e também através da tecla f12. Com essa
ferramenta conseguimos acessar o campo que queremos e fazer
alterações que podem ser muito úteis na resolução do erro.
- Prioridade das mudanças entre Inline, Internal e External:
- 1: Inline. 2: Internal. 3: External.
- Anatomia
- **selector :: who?
- --quem voce quer modificar?-- h1, hr?etcc..
-
- **property
- -- o q vc qr mudar do seletor??
-
- **value
- --como vc quer mudar:)
- FavIcons: São ícones que aparecem na aba do site
- <head>
- <link rel="shortcut icon" type="image/x-icon"
href="[Link]">
- </head>
- Divs: São uma das estruturas mais usadas para estruturação do
site. Ele pode ser visto como uma caixa, você cria e coloca o que
você quer estruturar e dividir o conteúdo.
- TheBoxModel: Essas “caixas” podem ser alteradas. Posso aumentar e
diminuir, alterar cor, borda, padding, etc.
- Padding: É o gap que existe entre a box que contém o texto e a
borda.
- Margin: É como um escudo, protege a box como um todo.
- Id: Serve para rastrear um elemento em específico
- Poderíamos ter <h3 id=”teste”> na página html para um h3
qualquer. Ná página de css teríamos:
- #test{
- background-color:blue;
- }
- Classes: Basta adicionar <h1 class=”test”> por exemplo.
- Para cada elemento h1, ou h2, h3..etc que quisermos que
tenha as mesmas características, dizemos que o elemento tem
a classe test.
- Em [Link] você coloca
- .test{
- background-color:blue;
- }
- Um atributo pode ter mais de uma classe
- <div class="test test2">
- Display properties: Alguns elements são conhecidos como
“display-elements”, e seus blocos tomam toda a página
horizontalmente, impedindo que outros elements fiquem do seu
lado. Ex:
- paragraphs
- headers
- divisors
- list & listitems
- forms
- Inline elements: tomam apenas o espaço que precisam
- img
- span
- anchor
- Positioning: mesmo sem css, os elementos em HTML já possuem
pré-definições de como tudo deve ser posicionado.
- O tamanho pré-definido do conteúdo é dterminado por cada
elemento desse conteúdo.
- Isso quer dizer que, se eu coloco uma fonte que naturalmente
é grande, vou perder um bom espaço da página, e, seguindo a
lógica, se for uma fonte menor, perco menos espaço.
- A ordem do layout é definido pela ordem do código, ou seja,
quem vier primeiro é mostrado primeiro.
- Filhos são mostrados na frente de seus pais. Ex: Se eu
instanciar um div, e dentro do div colocar uma frase e nessa
frase eu selecionar uma parte(span), a lógica seguida é:
- Quem fica em cima é p span(filho), no meio estará a
frase e em baixo o div.
- Relative positioning:
- Posição relativa:
- position: relative;
- top: 50px;
- left :50px;
- Faz com que o objeto se mova para a direita e para
baixo em 50px.
- Absolute positioning: No relativo, mudamos a posição relativa a
onde ele está. No absoluto, mudamos a posição dele em relação ao
pai dele. O pai pode ser um div, o próprio body, etc.
BOOSTRAP
container - Cria um container de largura fixa que centraliza seu
conteúdo horizontalmente.
container-fluid - Cria um contêiner de largura total que abrange toda a
largura da viewport.
linha - Cria uma linha horizontal de colunas.
col-{breakpoint}-{number} - Define a largura de uma coluna. Substitua
{breakpoint} por um nome de ponto de interrupção Bootstrap (por
exemplo, sm, md, lg, xl, xxl) para especificar em qual tamanho de tela
a coluna deve ser aplicada e substitua {number} por um número entre 1 e
12 para especificar quantos "virtuais " colunas que o elemento deve
abranger. Por exemplo, col-sm-6 faria o elemento abranger 6 das 12
colunas disponíveis em telas pequenas e maiores.
justificar-conteúdo-{valor} - Define o alinhamento horizontal das
colunas dentro de uma linha. Substitua {value} por um dos seguintes
valores: início, fim, centro, entre ou ao redor.
align-items-{value} - Define o alinhamento vertical das colunas dentro
de uma linha. Substitua {value} por um dos seguintes valores: start,
end, center, baseline ou stretch.
order-{breakpoint}-{number} - Define a ordem de uma coluna. Substitua
{breakpoint} por um nome de ponto de interrupção Bootstrap e {number}
por um número entre 1 e 12 para especificar a ordem do elemento. Por
exemplo, order-md-2 faria o elemento aparecer em segundo lugar em telas
médias e maiores.
offset-{breakpoint}-{number} - Define o número de colunas pelas quais o
elemento deve ser compensado. Substitua {breakpoint} por um nome de
ponto de interrupção Bootstrap e {number} por um número entre 1 e 12
para especificar o número de colunas pelas quais o elemento deve ser
compensado. Por exemplo, offset-lg-3 faria o elemento iniciar 3 colunas
à direita em telas grandes e maiores.