Introdução ao HTML e ao CSS
HTML e CSS:
HTML:
HTML significa HyperText Markup Language → Não é uma linguagem de programação, mas sim uma linguagem de marcação, utilizada para que navegadores (chrome, firefox, Explorer, opera) interpretem suas marcações e transforme na página que será visualizada.
DOM → Document Object Model
Basicamente a estruturação de documentos Web (o padrão de formato).
Estruturado em 3 partes principais: Doctype, Head, Body
TERMOS COMUNS EM HTML
- ELEMENTS
Designações. Definem a estrutura e o conteúdo em uma página.
Identificados entre "<" e ">"
Exemplo:
- TAGS
A utilização dos símbolos "<" e ">" ao redor do elemento criam a tag.
As tags mais comuns são abertas e fechadas em pares.
1
<div>
2
Temos acima a abertura da tag div (divisão) e abaixo o fechamento da tag.
3
</div>
Copied!
- ATRIBUTOS
Propriedades que providenciam maiores informações acerca do elemento.
1
<a href="http://sitequalquer.com">Clique aqui para acessar um site qualquer</a>
2
|-----> atributo da tag 'a' (âncora)
Copied!
ESTRUTURAÇÃO DO HTML
1
<!DOCTYPE html>
2
<html lang="pt-br">
3
<head>
4
<meta charset="UTF-8">
5
<title> Hello, World!</title>
6
</head>
7
<body>
8
<h1> Hello, my World!</h1>
9
<p>Isso vai aparecer no site.</p>
10
</body>
11
</html>
Copied!
SEMÂNTICA
Prática de fornecer conteúdo, sentido e estrutura, utilizando o elementos ideais para cada caso.
Desconsidera questões visuais, avaliando a estrutura semântica da página por meio de seus elementos.
ARQUITETURA DE UM HTML
arch-html
Outro elemento importante é o nav:
1
<nav>
2
Utilizado aqui para navegar entre as informações do site, do servidor, etc.
3
</nav>
Copied!
CSS:
CSS significa Cascading Style Sheets.
Utilizado em conjunto com as outras linguagens HTML e JS, conferindo um conjunto de estilos como propriedades de cada elemento desejado na página HTML.
TERMOS COMUNS EM CSS
- SELETOR
Seleciona qual elemento (s) está sofrendo alteração em seu estilo.
Pode sofrer especificações, identificando elementos específicos elementos específicos (id, nomes, classes).
- PROPRIEDADES
Estilos adicionados ao elemento selecionado
- VALOR
Comportamento da propriedade
1
|--> SELETOR
2
p {
3
|--> PROPRIEDADE
4
color : orange;
5
font-size : 12px;
6
|-->VALOR
7
}
Copied!
REFINANDO OS SELETORES
- TYPE
Seleção por tipo do elemento
1
div {...}
2
Todo elemento com tag <div>
Copied!
- CLASSE
Selecionamos elementos a partir de sua classe
1
div.suaclasse { ... }
2
.suaclase { ... }
Copied!
Exemplo 1: elementos com tag e classe "suaclasse".
Exemplo 2: elementos de qualquer tag, com classe "suaclasse".
OBS .: podemos determinam um objeto no HTML com várias classes, de modo a modularizar a escolha de estilo:
1
<a class="btn btn-danger">...</a>
2
<a class="btn btn-success">...</a>
Copied!
Neste caso, temos uma classe comum (btn), na qual a fonte de tamanho 16 pixels será padrão. Depois temos 2 especificações de modo a individualizar as outras 2 "sub-classes"
1
.btn {
2
font-size: 16px;
3
}
4
.btn-danger {
5
background: red;
6
}
7
.btn-success {
8
background: green;
9
}
Copied!
- ID
Selecionamos, especificamente, um elemento a partir do seu ID.
1
div#seuID { ... }
2
#seuID { ... }
Copied!
Exemplo 1: elemento com tag e id "seuID".
Exemplo 2: elemento de qualquer tag, com id "seuID".
REFERENCIANDO O CSS NO HTML
Dentro do HTML
1
<head>
2
<link rel="stylesheet" href="main.css">
3
</head>
Copied!
Referência:
Last modified 1yr ago