HTML e CSS em 10 minutos
Tags: beginners, web, html, css
Published: 2023-06-08 14:30:55

Fala pessoal! Tudo bem?

Esse post é para você iniciante e que tem dificuldade em entender o que é HTML e CSS. Mas será que dá mesmo pra entender sobre esse assunto em 10 minutos? Essa resposta é... 

---

## O HTML

### O que é?

HyperText Markup Language, no português brasileiro Linguagem de Marcação de Hipertextos, é uma linguagem de marcação, usada para definir a estrutura do conteúdo, o HTML é um padrão para estruturar um site, e ele possui sintaxe e semântica.

O conteúdo de um documento HTML é formado por diversos tipos de elementos, então, um parágrafo, uma imagem ou uma tabela é um elemento no HTML.

### Um elemento HTML
Para inserir um elemento no documento HTML, é necessário uma tag (marcação), essa tag possui abertura, mas nem sempre possui fechamento, além disso, cada tag no HTML possui um nome, outra coisa necessária no elemento é o seu conteúdo (imagem,texto, vídeo, áudio, etc).

A estrutura da tag de abertura é:
- Sinal do menor que (<)
- Nome da tag
- Sinal do maior que (>)
- ex. `<h1>`

A estrutura da tag de fechamento é:
- Sinal do menor que (<)
- Barra (/)
- Nome da tag
- Sinal do maior que (>)
- ex. `</h1>`

A estrutura de um elemento título:
- `<h1> Olá Mundo! </h1>`

### Sintaxe de um documento .html

```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Olá Mundo!</title>
  </head>
  <body>
    <h1> Olá Mundo! </h1>
    <p> Esse é um parágrafo. </p>
    </body>
</html>
```

a. O **DOCTYPE** é uma declaração para informar ao navegador como o documento deve se comportar.

b. O elemento **html** é um elemento que envolve todo o conteúdo da página, pode ser conhecido como o elemento raiz.

c. O elemento **head** é um elemento que envolve todo conteúdo importante para a página HTML, mas que não é relevante ao usuário sua visibilidade. 
   - o elemento **meta** define qualquer informação de metadados que não pode ser definida por outro elemento.
   - o **charset** define a codificação de caracteres usada na página, nesse caso o UTF-8.
   - o elemento **title** define o título do documento mostrado na aba da página do navegador.

d. O elemento **body** é um elemento que envolve todo o conteúdo da página e esse sim, fica visível ao usuário.
- o elemento **h1** define um título principal na página, existem elementos de título do h1 ao h6, eles agem de forma hierárquica como capítulos e subcapítulos de um livro.
- o elemento **p** define um parágrafo no documento HTML.

### Atributos

Um elemento pode possuir atributos, como o atributo class ou o id (identificador). O atributo class e id são utilizados tanto no CSS quanto no JavaScript para selecionar o elemento e estilizá-lo ou modificá-lo através de funções ou da DOM.

ex1. 

``` 
<h1 class="title"> Olá Mundo! </h1>
```

ex2. 
```
<div id="containerTitle"> 
   <h1 class="title"> Olá Mundo! </h1>
</div>
```

ex3.
```
<meta charset="utf-8">
```
---

Para conhecer mais sobre elementos e atributos HTML, clique [aqui](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element).

---

## O CSS

### O que é?

CSS ( Cascading Style Sheets ou Folhas de Estilo em Cascata) é uma linguagem de estilo usada para descrever a apresentação de um documento escrito em HTML ou em XML. Ele é definido seguindo algumas regras.

### Sintaxe

a. A regra é aberta com um seletor. 
- o seletor pode ser: o nome de uma tag, uma classe ou um id
- tag: h1;
- classe: .title;
- id: #containerTitle.

b. em seguida, a abertura de chaves ( { ); 

c. a propriedade a ser modificada, dois pontos ( : ), o valor e ponto e vírgula ( ; )
- ex. `color : purple;`

d. por fim, o fechamento de chaves ( } );

O resultado é o seguinte:

ex1.
```
h1{
  color: purple;
}
```

ex2.
```
.title{
  color: green;
}
```

ex3.
```
#containerTitle{
  background-color: #dfdfdf;
}
```

### Formas inserir no HTML

Existem 3 formas simples de se utilizar o CSS no HTML

#### 1a
Essa primeira é inserindo diretamente no elemento utilizando o atributo style:

ex.
```
<h1 style="font-size: 30px;">Olá Mundo!</h1>
```
Perceba que a inserção da propriedade e valor seguem o padrão mencionado na seção anterior (propriedade:valor;)

#### 2a
A segunda forma de estilizar um documento HTML é utilizando o elemento style dentro do elemento head:

```
<style>
   p{
       color:darkblue;
       font-size: 15px;
    }
</style>
```
Assim como temos um atributo style dentro de uma tag, temos o elemento style para estilizar, esse segundo segue o padrão de sintaxe citado na seção anterior:
- seletor
- abertura de chaves
- propriedade:valor;
- fechamento de chaves

#### 3a
Essa terceira forma é a mais indicada para se trabalhar com o  CSS. Ela consiste em:

- criar um documento .css e adicionam-se os seletores e as modificações desejadas:
ex.
```
.title{
  color: green;
}

p{
  color:darkblue;
  font-size: 15px;
}
```

- chamar esse documento .css no .html com o elemento link:

```
<link rel="stylesheet" href="css/styles.css">
```

a. o link é um elemento utilizado para linkar, fazer uma ligação com outro documento ou arquivo que não se encontra dentro do documento HTML.
b. O atributo rel define a relação entre o que está sendo importado e o documento atual. Nesse caso, é uma relação de estilização.
o atributo href define o caminho a ser percorrido para importação. Nesse caso, o documento .css está na pasta css.


Para conhecer mais sobre estilização, clique [aqui](https://developer.mozilla.org/pt-BR/docs/Web/CSS).

---

E ai, deu para aprender em 10 minutos?

Depende do seu nível de abstração, se a minha escrita foi coerente e coesa, se foi preciso ler mais de uma vez. 

Aprender em 10 minutos não acontece, nem em 1 mês. Fica ai o conselho: para aprender é necessário constância, pratique todos os dias, desafie a si mesmo, porque conhecimento não aplicado de nada adianta. Ele se perde, se esquece.

Esse conteúdo exposto aqui é um pouquinho do mundo das linguagens de marcação e estilos. Tem muito mais. 

Seja curioso, pesquise e aplique.


Valeu por estar até aqui.

Até a próxima!