HTML, sigla para HyperText Markup Language, Embora não seja uma linguagem de programação propriamente dita, mas sim uma linguagem de marcação, ele é responsável por estruturar o conteúdo das páginas web, sendo o esqueleto do site. Por meio de elementos e tags, o HTML define como cada parte de uma página será exibida, organizando textos, imagens, links e outros elementos visuais.

No HTML, as tags desempenham um papel importante para a estruturação da página web, ela define que elemento será inserido. Existem inúmeras tags, que desempenham papéis diversos dentro da página. A maior parte delas vêm com uma tag de abertura, e uma de fechamento. Também, as tags são delimitadas dentro de colchetes angulares (< >), podendo inserir atributos dentro dos colchetes, como "class", "id", e/ou "src".

Existem várias tags que auxiliam no desenvolvimento da página web, e desempenham funções diversas:

html: A tag html é bem simples, ela é a raiz do documento, ela basicamente serve para definir a limitação de todo o site, onde ele começa e onde ele termina. ela informa o navegador que aquele documento é um HTML. Todas as tags devem ser incluidas dentro do html.

head: O head vêm do inglês, que significa "cabeça". Essa tag define um cabeçalho que engloba elementos que não serão incluidos diretamente no site, porém são importantes para o seu funcionamento. Essa tag pode conter varios elementos, como a inserção de um css externo, interno, um script JavaScript, informações para codificação de caracteres e etc.

body: A tag body é uma seção que armazena todos os elementos vísiveis dentro da página. Ou seja, todos os titulos, textos, containeres, e outros estarão alocados dentro do body.

h1, h2, h3, h4: Essas tags servem para fazer um título para certos elementos, como em uma pagína web, em um container de conteúdo e entre outros.

p: A tag p é o famoso parágrafo, ele serve para escrever várias linhas de caracteres, que podem formar um texto.

div: A tag div se traduz como divisória, sendo um elemento importante para agrupar e organizar vários conteúdos dentro de uma pagina web, incluindo uma outra div. Ela é bastante usada para aplicar estilos com CSS ou ser manipulado por um script

h1, h2, h3, h4: Essas tags servem para fazer um título para certos elementos, como em uma pagína web, em um container de conteúdo e entre outros.

Existem alguns tipos de atributos que podem ser atribuidos dentro do seu documento HTML, por exemplos:

id: O atributo id fornece um identificador único para um elemento. Ele é usado para manipulação via JavaScript ou para vincular estilos CSS a um elemento específico.

href: O atributo href é usado no elemento <a> para especificar o destino de um hiperlink.

placeholder: O atributo placeholder exibe um texto de sugestão em campos de entrada até que o usuário insira um valor.

disable: O atributo disabled desabilita um elemento, como um campo de formulário ou um botão, impedindo que o usuário o interaja.

class: A class serve especialmente para ser um marcador de tags específicas, que podem ser formatadas por um documento CSS, ou manipuladas por um script JavaScript.

type: Esse tipo informa qual tipo de elemento em um imput por exemplo ele é, ou em outras tags que usem esse elemento.

name: O name serve para dar um nome ao elemento em um formulário, que será manipulado com um script JavaScript.

O CSS, sigla para "Cascading Style Sheets" é uma linguagem de estilos utilizada para formatar e moldar a aparência de documentos HTML, e também XML. Anteriormente, foi dito que o HTML estrutura a página web, e o CSS vai agora controlar o conteúdo, e será responsável por cuidar da visualização dessa página, na questão de cores, fontes, espaçamentos, alinhamento, e disposição dos itens dentro do documento.

O CSS é responsável por várias funções dentro do site, e ofecere muitas opções para modificar o mesmo. O CSS possibilita ter um controle do layout, com várias ferramentas para posicionar, alinhar e dimensionar todos os elementos no layout. Exemplos deles são margin, padding, display, e outros. Ele também é bem utilizado para uma melhor responsibidade do site, moldando os elementos para que possa responder em vários tipos de resolução e tamanhos de tela.

Para formatar com um documento CSS, é preciso utilizar uma sintaxe diferente do HTML. A regra de estilos é em cascata. Ela funciona com um bloco de declaração, onde primeiramente referenciamos o elemento html, seja uma tag, ou uma classe ou id, e então dentro do bloco em chaves "{}" fazemos as declarações para formatar um ou mais elementos.

No CSS, as unidades de medida são essenciais para definir tamanhos, distâncias e outras propriedades. As unidades podem ser divididas em duas categorias principais: absolutas e relativas.

As unidades absolutas incluem pixels (px), pontos (pt), e polegadas (in). Os pixels são a unidade mais comum e são utilizados para a maioria dos elementos na web, pois oferecem precisão no controle do layout. Pontos são frequentemente usados em impressão, onde 1 ponto equivale a 1/72 de uma polegada. Polegadas também são mais utilizadas em impressão e design gráfico.

Por outro lado, as unidades relativas se adaptam ao contexto em que são usadas. As unidades mais conhecidas incluem porcentagem (%), que é relativa ao tamanho do elemento pai, e viewport (vw e vh), que são baseadas na largura e altura da janela de visualização do navegador. Além disso, existem unidades como em e rem, que se baseiam no tamanho da fonte. O "em" é relativo ao tamanho da fonte do elemento atual, enquanto "rem" é relativo ao tamanho da fonte da raiz do documento, geralmente o <html>.

Esse código CSS estiliza todos os elementos <p> (parágrafos) em um documento HTML. O seletor p indica que as regras dentro das chaves se aplicam a todos os parágrafos. A primeira declaração, color: blue;, define a cor do texto como azul, fazendo com que o texto dentro do parágrafo seja exibido nessa cor. A segunda declaração, "font-size: 16px;", estabelece o tamanho da fonte do texto para 16 pixels, que é um tamanho comum e legível. Por fim, a declaração "margin: 20px;" adiciona um espaço externo de 20 pixels ao redor do parágrafo, separando-o de outros elementos na página. Essas regras, juntas, proporcionam uma aparência organizada e atraente ao texto.