PRÉ REQUISITOS

Estamos começando com o HTML e é super importante sabermos de algumas coisinhas antes de iniciarmos:

• Como o conteúdo é bem tranquilo nesse aspecto apenas um bom conhecimento de informática básica é o suficiente para começarmos a trabalhar!

• Ambiente de desenvolvimento, necessário ter um ambiente configurado, uma IDE de sua escolha (VSCODE, Atom ou Sublime) . PS: Minha preferência é o VSCODE.

Tendo todas as coisas listadas acima vamos começando aos poucos!

INTRODUTÓRIO

Antes de começarmos qualquer coisa, é importante sabermos de algumas informações! Como vocês já devem ter lido lá na página de história, todas as informações de um site são organizadas em tags, e como funciona isso? Bom vamos lá.

Para entendermos de fato precisamos saber a diferença de certos elementos:

• Conteúdo, é o que vem entre as tags, geralmente é o conteúdo que vai ser abraçado pelas tags

• Elemento, é o conjunto do conteúdo com as tags, a informação já encapsulada e identificada

• Tag, traduzindo do inglês, "etiqueta", sã códigos que definem a estrutura da página, como textos, imagens e etc. Assim ajudando a reunir elementos com formatações semelhantes. Se a tag necessita de conteúdo, ela deverá ter abertura e fechamento, caso contrário ela se fecha na própria abertura ( como a tag do input ).

• Atributos de tag, seriam justamente palavras especiais colocadas dentro da abertura da tag, onde podemos controlar o comportamento da do elemento ou modificar-lo, com classes, id's , estilizações ou até mesmo pequenas ações.

BASE HTML

Para iniciarmos o conteúdo é fundamental que primeiramente você abra a sua IDE e coloque o código base de html (No vscode basta um "!" e enter).

Dentro dessa base temos alguns códigos necessários para começarmos a editar um website, vamos para a descrição de alguns códigos:

• !DOCTYPE html, esse é responsável para colocar nosso projeto no html versão 5, sem isso o navegador pode ser que entre em modo compatibilidade e renderizar o site de forma estranha.

• html lang="pt-br", essencial para colocar o container raiz e principalmente para acessibilidade, para informarmos ao navegador qual linguagem está sendo trabalhada nesse website.

• head, é onde ficam as informações técnicas (metadados), eles não são visíveis no site.

• meta charset="UTF-8", define a codificação de caracteres, o UTF8 permite que usemos acentos (á, õ , ç) sem se tornarem símbolos estranhos

• meta name="viewport" content="width=device-width, initial-scale=1.0, fundamental para a responsividade no futuro, faz com que o site se ajuste a largura do celular, impedindo que o texto fique pequeno.

• title, define o título do website

• body, define a área do documento onde terão elementos visíveis, como paragrafos ou titulos

Quando rodamos todos esse códigos dentro do navegador, ele é o responsável por renderizar e organizar o visual, ficaria algo próximo a isso (conceitualmente falando):

HEADING

Os headings são títulos ou subtítulos que são dispostos na página.

PARAGRAPHS

Os parágrafos são definidos pela tag "p" , do qual dá um pequeno espaço e quebra linha.

LINKS

Os links são definidos pela tag "a" , eles sempre virão acompanhados com o atributo "href" justamente onde iremos dizer onde esse link deverá ser direcionado

IMAGES

As imagens são definidas pela tag "img" , é a maneira de inserirmos no nosso site PNGS, JPGS, SVGS e até mesmo GIFS!. E nisso essa tag vem acompanhada geralmente de dois atributos padrão, "src" onde diremos de onte vem essa imagem (pode ser local ou na web) e o "alt" (essencial para descrever a imagem, principalmente para pessoas com deficiência visual, permitindo que entendam mesmo quando a imagem não estiver vísivel). É muito comum que venha os ajustes de "width" e "height" direto na tag, porém é algo que também pode ser feito no css.

BREAK

A tag "br" define uma quebra de linha.