---
# System prepended metadata

title: 'Playlist: HTML e CSS'

---

# Playlist: HTML e CSS
**nome:** Patricia Oliveira Paulino
**número:** 37
**turma:** INFO D



Baixar no computador o visual studio code.
Para os icones ficar mais bonitinho tem que instalar uma extensão, também para caso de querer trocar a cor dos icones.
Modo de fazer:
Após clicar em extensão vai baixar a extensão vscode icons e apertar em instalar.

Para configurar o local do projeto temos que selecionar a pasta que vai ser nosso local do projeto..
Vai no menu FILE, após clica em OPEN FOLDER que vai te direcionar a escolher a pasta que todos os arquivos do projeto vai ficar.
Para iniciar precisamos criar um arquivo "html", após isso temos que colocar o codigo html:5 para criar a esrutura inicial do html.

Estrutura inicial para começar quando tiver trabalando com uma pagina web:
<html>
<hed>
<title> titulo </title>
</head>
<body>

</body>
</html>

Tambem podemos colocar atributo dentro de uma tag. EX:
<p aling="right"> ola </p>

Se abrir a tag <style> dentro de <head> eu consigo colocar codigos de css. EX:
<head>
<style>
h1 {
color:blue;
}
</style>
</head>

Criar uma pagina assets (acessorios), outra pasta pages.
Criar a pagina images, audios, videos e font dentro de assets.

Colocar html dentro de pages.

Criar dentro da pasta pages e criar uma pasta css.

Linkar o css com a tag link:css

Modo de colocar imagem no html :
<img src="../assets/images/nome do arquivo" />

Modo de usar font no css:
@font-face {
font-family: Discord;
src: url ('../assets/font/Discord4.woff2');
}

Para tirar a margem(largura) vamos no css e colocamos: margin:0px;

Caso eu queira fazer uma formatação apenas em algum lugar de uma tag eu posso usar o exemplo abaico:
No html:
<h1 class="titulo"></h1>
No css:
.titulo {
color:black;
}

Criar uma segunda pagina html e css.
linkar o html com o segundo css
Criar um botaõ no html principal para ir para o html secundario.
Modo de criar:
<a href="pagina2.html"> ir para pagina2 </a>

Modo de colocar borda:

div {
border: 2px solid (cor);
}


Como adicionar uma fonte remota: 

- Para usar uma fonte remota podemos utilizar o link ou o import

Para utilizar uma fonte local: 

- Uma fonte local é uma fonte que nós temos o arquivo no computador, Para utiliza-la passamos o arquivo para a pasta e depois usamos o font-face para indicar seu nome e sua importação


Temos 3 formas de usar uma cor no nosso CSS: 

- Escrever o nome da cor: Black
- Código hexadecimal: #000000
- Código rgb: (0, 0, 0)

Usando opacidade:

```Opacidade=
Opacity: 0,2;
```

Font-Size: 
- Px
- Em
- Rem
- %

Height: 
- Em
- %
- Vh

Width:
- Em
- %
- Vw


- Espaçamentos internos:
padding; height; padding-top

- Espaçamentos externos:
margin

> Box - sizing: Border-Box

> Css de dimencionamento: Altura e largura

- Height: min-height, max-height

- Width: min-width, max-width

> Por padrão quando colocamos uma imagem ela mantém a sua própria altura e largura


Colocando imagem como plano de fundo:
* Background-image: url('../assets/images/images.PNG')

> Background-Size = Altera o tamanho de Background pra fazer que preencha o fundo de outras formas

> Background-position: pode posicionar o plano de fundo atráves do numero de px indicado (podendo descer, subir, ir pra esquerda ou direita)