Flávia Correia
Posted on June 8, 2023
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.
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.
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!
Posted on June 8, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
