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 = "me.jpg">
- <img src = "www.imgur.com/me.jpg" 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 = "https://site.com">hello</a>
-
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
-
-
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>
-
Nesse exemplo, a gente muda todas as linhas horizontais
presentes no código html para os parâmetros acima.
body{
background-color: wheat;
}
hr{
border-style: none;
border-top-style: dotted;
border-top-color: black;
border-width: 2px;
width: 8%;
}
</style>
Anatomia
-
**selector :: who?
--quem voce quer modificar?-- h1, hr?etcc..
**property
-- o q vc qr mudar do seletor??
**value
--como vc quer mudar:)
-
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.
-
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 styles.css 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 é deterrminado 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 é definida pela ordem do código, ou seja,
quem vier primeiro é mostrado primeiro.
-
-
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.
-
Flex positioning: Ideal para mudar o posicionamento. Caso
quisermos que algum elemento, a exemplos de tabela, sejam
posicionados no centro da tela, fazemos:
- display: flex;
- justify-content: center;
Propriedades mais usadas
color: Define a cor do texto ou elementos de primeiro plano.
background-color: Define a cor de fundo de um elemento.
font-size: Define o tamanho da fonte.
font-family: Especifica a família de fontes para o texto.
margin: Define a margem (espaço) ao redor de um elemento.
padding: Define o preenchimento (espaço interno) dentro de um elemento.
border: Define as propriedades da borda (largura, estilo e cor) de um
elemento.
width: Define a largura de um elemento.
height: Define a altura de um elemento.
display: Especifica como um elemento é exibido (por exemplo, block,
inline).
position: Define o esquema de posicionamento de um elemento (por
exemplo, estático, relativo, absoluto).
float: Especifica se um elemento deve flutuar à esquerda ou à direita.
text-align: Define o alinhamento horizontal do texto dentro de um
elemento.
text-decoration: Especifica a decoração do texto (por exemplo,
sublinhado, tachado).
list-style: Define o estilo dos marcadores de lista (por exemplo,
pontos, números).
overflow: Especifica como o conteúdo que transborda a caixa de um
elemento é tratado.
visibility: Define a visibilidade de um elemento (visível, oculto,
colapsado).
opacity: Define a opacidade (transparência) de um elemento.
cursor: Define o tipo de cursor a ser exibido ao passar o mouse sobre
um elemento.
text-transform: Especifica a capitalização do texto (por exemplo,
maiúsculas, minúsculas).
Lembrando que, se quisermos adicionar apenas borda superior, ou apenas
padding superior, etc, usamos como no exemplo a seguir:
border-width: Define a largura da borda.
border-style: Define o estilo da borda (por exemplo, sólido,
pontilhado, tracejado).
border-color: Define a cor da borda.
border-radius: Define o raio dos cantos da borda, criando cantos
arredondados.
border-top: Define a borda superior do elemento.
border-right: Define a borda direita do elemento.
border-bottom: Define a borda inferior do elemento.
border-left: Define a borda esquerda do elemento.