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)

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.