Sejam bem vindos as aulas de HTML e CSS, para iniciar, vamos relembrar alguns conceitos básicos?
Link do projeto desenvolvido durante a aula: Regaste Pet
HTML é uma abreviação de Hyper Text Markup Language (linguagem de marcação em hipertexto). Isso mesmo, HTML não é uma linguagem de programação, pois não tem lógica (algoritmos, processos, etc). Ele cria a estrutura de uma página ou aplicação web, determinando a separação de layout e seu conteúdo. Os sites, nos seus primórdios, eram basicamente feitos de html puro! Da uma olhadinha nesse site dos anos 90 que continua até hoje no ar:
Fonte: https://www.spacejam.com/1996/
Outros exemplos: http://www.goetzskyvu.com/GOETZ_THEATRE/GOETZ_SHOW_&_TIMES.html https://www.lingscars.com/
Antes de começar a codar, você precisa criar o arquivo html:
index.html
Depois, arquivo criado, você inicia com a estrutura básica:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documento</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
</body>
<script src="myscript.js"> </script>
</html>Quem lembra da música:cabeça, ombro, joelho e pé?" É neste flow que o html se estrutura.
As tags definem metadados de um documento HTML, ou seja, informações que vão dentro do elemento e normalmente são usadas para especificar um conjunto de caracteres, descrição da página, palavras-chave, autor do documento e configurações do navegador.
<!-- Define palavras-chave para motores de busca-->
<meta name="keywords" content="HTML, CSS, JavaScript">
<!--Define uma descrição da sua página da web-->
<meta name="description" content="Aula de HTML de A a Z">
<!--Define o autor de uma página-->
<meta name="author" content="Maria Silva">
<!--Atualiza o documento a cada 30 segundos-->
<meta http-equiv="refresh" content="30">
<!--Configurando a janela de visualização para que seu site fique bem em todos os dispositivos-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">Dentro do body, colocamos as tags (etiquetas) que referenciam os elementos no html. Vejam o exemplo a seguir, a tag
referencia um elemento de parágrafo.
<p>Eu sou um parágrafo!</p>
Algumas tags precisam ser abertas e fechadas, para que estejam certas, como no exemplo acima. Outras são autocontidas, não precisando de tag de fechamento, como é o caso da tag que referencia uma imagem:
<img src="http://seusite.com/imagem.jpg" />
| Tags HMTL | O que faz? |
|---|---|
| html, head, body | Utilizada para definir a relação entre o documento e algum recurso externo |
| link | Localizada na head é utilizada para definir a relação entre o documento e algum recurso externo |
| title | Localizada na head, define o título do documento |
| main | Representa o conteúdo de maior relevância dentro de uma página |
| header | Utilizada para representar o cabeçalho do documento |
| nav | Utilizada para definir um conjunto de links de navegação |
| section | Utilizada para criar seções dentro de um documento e geralmente contém um título |
| article | Utilizada para fazer um artigo dentro de um conteúdo, geralmente se utiliza um título e são independentes |
| aside | Seções muitas vezes representadas como barras laterais, relacionado ao conteúdo do seu entorno, que poderia ser considerado separado do conteúdo |
| div | Utilizada para divisão do conteúdo |
| footer | Utilizada para representar o rodapé do documento |
| a | Utilizada para inserir links |
| h1 a h6, p, span | Tags para definir títulos e textos |
| img | Utilizada para inserir imagem |
| video | Utilizada para inserir um vídeo |
| audio | Utilizada para inserir conteúdo de som |
| iframe | Utilizado para incorporar um documento HTML dentro de outro |
| form, input, placeholders, checkbox, radiobuttons, buttons | Utilizadas para elementos de um formulário |
| thead, tbody, td, th, tr | Utilizadas para elementos de uma tabela |
| ul, li, ol | Utilizadas para criar listas ordenadas e não ordenadas |
Semântica é um estudo a respeito do significado/sentido de palavras, frases ou expressões dentro de um contexto. Na programação ela está relacionada ao significado de uma parte do código. Por exemplo: Qual a finalidade/função que esse elemento tem no HTML? O HTML semântico torna as informações de um site bem explicadas para o computador, facilitando o entendimento de leitores de acessibilidade, e ajudando mecanismos de pesquisa a captarem palavras-chave importantes que identificam a página com mais facilidade, indexando com preferência nas buscas.
Algumas tag são mais semãnticas do que outras e é importante ficar atenta a elas.
Leia mais aqui:
HTML Semântico: Conheça os elementos semânticos da HTML5
Um Atributo é uma característica associada ao Elemento HTML. Ele é usado para dar alguma ‘qualidade’ para o Elemento e é posicionado no interior da Etiqueta ou Tag de início. Cada Atributo recebe um valor para configurar essa característica que será dada ao Elemento. Cada Elemento pode ter associado a si alguns pares de Atributos=”valor” dentro de sua Tag inicial.
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600" />
Atributos globais são aqueles que todos elementos podem ter:
| Atributo | Descrição |
|---|---|
| accesskey | Especifica uma tecla de atalho para ativar/focar um elemento |
| contenteditable | Especifica se o conteúdo de um elemento é editável ou não |
| data-* | Usado para armazenar dados personalizados privados para a página ou aplicativo |
| dir | Especifica a direção do texto para o conteúdo em um elemento |
| draggable | Especifica se um elemento pode ser arrastado ou não |
| hidden | Especifica que um elemento ainda não é ou não é mais relevante |
| id | Especifica um ID exclusivo para um elemento |
| lang | Especifica o idioma do conteúdo do elemento |
| spellcheck | Especifica se o elemento deve ter sua ortografia e gramática verificadas ou não |
| style | Especifica um estilo CSS embutido para um elemento |
| tabindex | Especifica a ordem de tabulação de um elemento |
| title | Especifica informações extras sobre um elemento |
| translate | Especifica se o conteúdo de um elemento deve ser traduzido ou não |
| class | Especifica um ou mais nomes de classe para um elemento (refere-se a uma classe em uma folha de estilo) |
https://spria.softcoders.net/ https://demo-egenslab.b-cdn.net/html/hotelina/?c=1 https://demo.web3canvas.com/themeforest/proland/index_kickstarter.html https://new.axilthemes.com/demo/template/abstrak/onepage-1.html https://new.axilthemes.com/demo/template/abstrak/onepage-3.html
CSS é abreviação de Cascading Style Sheet (folha de estilos em cascata). É a linguagem que define estilos para o HTML, portanto, não se trata de linguagem de programação. CSS tem "cascata" no nome, devido a sua forma de determinar a propriedade de um elemento - levando em consideração hierarquia de seletores e de chamadas de estilo (CSS Interno, CSS inline e CSS externo).
Uma folha de estilo interna pode ser usada se uma única página HTML tiver um estilo único.
O estilo interno é definido dentro do elemento
<style> dentro da seção <head>
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: red;
}
h1 {
color: blue;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>Um estilo embutido pode ser usado para aplicar um estilo único para um único elemento. Para usar estilos embutidos, adicione o atributo style ao elemento relevante. O atributo style pode conter qualquer propriedade CSS.
<!DOCTYPE html>
<html>
<head>
<title>Documento</title>
</head>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>Para fazer o link de um arquivo .css em um documento .html, devemos inserir a tag no do documento, com o href do caminho do arquivo.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" />
</head>
<body></body>
</html>Dentro do arquivo .css, a anatomia é:
Como colocar comentários em CSS:
/* Sou um comentário CSS */
Qual estilo será usado quando houver mais de um estilo especificado para um elemento HTML? Todos os estilos em uma página serão "cascateados" em uma nova folha de estilo "virtual" de acordo com as seguintes regras, onde o número um tem a prioridade mais alta:
- CSS inline (atributo dentro de um elemento HTML)
- Folhas de CSS externas e internas (na seção principal)
- CSS padrão do navegador
Portanto, um estilo embutido tem a prioridade mais alta e substituirá os estilos externos e internos e os padrões do navegador.
O box model nos permite adicionar uma borda ao redor dos elementos e definir o espaço entre os elementos.
- Conteúdo - O conteúdo da caixa, onde o texto e as imagens aparecem
- Preenchimento - Limpa uma área ao redor do conteúdo. O forro é transparente
- Borda - Uma borda que contorna o preenchimento e o conteúdo
- Margem - Limpa uma área fora da fronteira. A margem é transparente
320px (largura)
- 20px (padding esquerdo + direito)
- 10px (border esquerda + direita)
- 0px (margin esquerda + direita) = 350px
Ao usar a propriedade box-sizing: border-box auxilia para que largura e/ou altura internas não sejam somadas a largura e/ou altura do seu elemento final.
320px (largura)
- 20px (padding esquerdo + direito)
- 10px (border esquerda + direita)
- 0px (margin esquerda + direita) = 320px
p {
color: red;
font-family: arial;
font-size: 14px;
text-decoration: underline;
background-color: gray;
padding-bottom: 15px;
margin-top: 30px;
}
nav {
background-color: blue;
padding: 10px;
margin: 15px 0;
}
nav a {
text-decoration: none;
color: white;
padding-left: 19px;
padding-right: 19px;
border: 1px solid gray;
border-radius: 5px;
}As cores podem ser definidas para textos, backgrounds, borders, etc.
Por nome
CSS/HTML suporta 140 nomes de cores padrão:
RGB x HEX
rgb ( vermelho, verde , azul )
No RGB cada parâmetro (vermelho, verde e azul) define a intensidade da cor entre 0 e 255
#rrggbb
No HEX a estrutura rr (vermelho), gg (verde) e bb (azul) são valores hexadecimais entre 00 e ff (o mesmo que decimal 0-255)
Exemplo:
Opacidade
RGBA
rgba( vermelho, verde , azul, alfa ) O parâmetro alfa é um número entre 0,0 (totalmente transparente) e 1,0 (nada transparente)
A propriedade position especifica o tipo de método de posicionamento usado para um elemento.
Existem cinco valores de posição diferentes:
- static (posição padrão dos elementos)
- relative
- fixed
- absolute
- sticky
Os elementos são então posicionados usando as propriedades superior, inferior, esquerda e direita. No entanto, essas propriedades não funcionarão a menos que a propriedade position seja definida primeiro. Eles também funcionam de forma diferente dependendo do valor da posição.
Exemplos de position na prática
Macete de centralização:
Funciona apenas para elementos do tipo display: block
Defina um tamanho para seu elemento através da propriedade width e defina margin: 0 auto
Exemplo de centralização na prática
A propriedade float é usada para posicionar e formatar o conteúdo, por exemplo, deixar uma imagem flutuar à esquerda do texto em um container.
A propriedade float pode ter um dos seguintes valores:
- left - O elemento flutua à esquerda de seu contêiner
- right - O elemento flutua à direita de seu contêiner
- none - O elemento não flutua (será exibido exatamente onde ocorre no texto). Isso é padrão
- inherit - O elemento herda o valor float de seu pai
Seletores CSS são usados para "encontrar" (ou selecionar) os elementos HTML que você deseja estilizar.
Podemos dividir os seletores CSS em cinco categorias:
- Seletores simples (selecione elementos com base no nome, id, classe)
<!DOCTYPE html>
<html lang="pt-br">
<head>
<style>
section {
margin: 150px 0;
}
#contato {
padding: 10px;
}
.blue {
color: blue;
}
</style>
</head>
<body>
<h1>Exemplo seletores simples</h1>
<section id="contato">
<p class="blue">Selecione o elemento pelo nome da tag, classe ou id</p>
</section>
</body>
</html>- Seletores de combinação (selecione elementos com base em um relacionamento específico entre eles)
- seletor descendente (espaço)
- seletor filho (>)
- seletor irmão adjacente (+)
- seletor geral de irmãos (~)
<!DOCTYPE html>
<html lang="pt-br">
<head>
<style>
section#contato {
margin: 150px 0;
}
p.blue {
color: blue;
}
section + p {
color: violet;
}
section > p {
color: violet;
}
</style>
</head>
<body>
<h1>Exemplo seletores de combinação</h1>
<section id="contato">
<p class="blue">Selecione o elemento pelo nome da tag, classe ou id</p>
<p>Selecione elementos diferentes a depender da especificidade do seletor</p>
</section>
<p>Eu sou irmão da section</p>
</body>
</html>- Seletores de pseudo-classe (selecionar elementos com base em um determinado estado)
- Estilizar um elemento quando um usuário passa o mouse sobre ele
- Estilize links visitados e não visitados de maneira diferente
- Estilize um elemento quando ele estiver em foco
<!DOCTYPE html>
<html lang="pt-br">
<head>
<style>
section#contato {
margin: 150px 0;
}
p.blue {
color: blue;
}
p.blue:hover {
color: red;
}
</style>
</head>
<body>
<h1>Exemplo seletores de pseudo-classe</h1>
<section id="contato">
<p class="blue">Selecione o elemento pelo nome da tag, classe ou id</p>
<p>Selecione elementos diferentes a depender da especificidade do seletor</p>
</section>
</body>
</html>- Seletores de pseudo-elementos (selecione e estilize uma parte de um elemento)
<!DOCTYPE html>
<html lang="pt-br">
<head>
<style>
p.pseudo::first-letter {
color: green;
font-size: xx-large;
}
</style>
</head>
<body>
<h1>Exemplo seletores de pseudo-elemento</h1>
<section id="contato">
<p class="pseudo">Selecione o elemento pelo nome da tag, classe ou id</p>
<p>Selecione elementos diferentes a depender da especificidade do seletor</p>
</section>
</body>
</html>- Seletores de atributo (selecione elementos com base em um atributo ou valor de atributo)
<!DOCTYPE html>
<html lang="pt-br">
<head>
<style>
[title~="titulo"] {
color: green;
font-size: xx-large;
}
</style>
</head>
<body>
<h1>Exemplo seletores de pseudo-atributo</h1>
<section id="contato">
<p title="titulo">Selecione o elemento a partir de um atributo</p>
<input >
</section>
</body>
</html>Especificidade
Se houver duas ou mais regras CSS que apontam para o mesmo elemento, o seletor com o maior valor de especificidade "vencerá" e sua declaração de estilo será aplicada a esse elemento HTML.
Pense na especificidade como uma pontuação/classificação que determina qual declaração de estilo é aplicada a um elemento.
- Estilos embutidos - Exemplo:
<h1 style="color: pink;"> - IDs - Exemplo: #navbar
- Classes, pseudoclasses, seletores de atributos - Exemplo: .test, :hover, [href]
- Elementos e pseudoelementos - Exemplo: h1, :before
Leia mais sobre especificidade
Classes e ids são atributos que podem ser inseridos em qualquer tag dentro da . Eles são atributos de nomeação, sendo class muito usada para referência em CSS e id para Javascript (apesar de que há outras boas práticas no mercado atualmente). Uma diferença entre os dois é que podem haver várias classes com o mesmo valor, ao passo que ids devem ser únicos.
O CSS aceita transformações em 2D e 3D para gerar algumas animações através da propriedade transform
Com a propriedade CSS transform você pode usar os seguintes métodos de transformação 2D:
Com a propriedade CSS transform você pode usar os seguintes métodos de transformação 3D:
Animações feitas com CSS Puro
https://webdesign.tutsplus.com/articles/15-inspiring-examples-of-css-animation-on-codepen--cms-23937
https://blog.hubspot.com/website/css-animation-examples
Dá um crtl + f12 e vamos embora! O Devtools é uma ferramenta do navegador que permite a inspeção do código. Com ele você consegue verificar o html e css de qualquer página. Você pode ver as aplicações do código, copiar (sim!, é possivel), mas também ter como inspiração para a sua página. Ali também você pode fazer alterações para verificar como fica a aplicação na sua página e depois aplicar no seu código.
A leitura da documentação é essencial para o aprendizado de HTML e CSS. A documentação te auxilia a tirar dúvidas, corrigir bugs/erros e trazer novos elementos no seu código.
Ele ajuda a resetar configurações inicias de elementos que vem como padrão pelo navegadores. Isso nos auxilia na personalização e definição de box model de alguns elementos. Usamos o * como seletor, pois ele seleciona todos os elementos de um HTML, exemplo:
* {
margin: 0;
padding: 0;
border: none;
}A sigla BEM significa block, element, modifier, que são os três pilares do método BEM. É uma metodologia de criação de nomes para classes, tornando esse processo mais prático, lógico, e rápido. Ele facilita o entendimento da hierarquia e ação do código, criando um padrão, exemplo:
O nome do bloco e o nome do elemento são separados por dois underlines (__):
<form class= "search-form">
<input class="search-form__input">
<button class="search-form__button">Pesquisar</button>
</form>O modificador é separado do nome do bloco ou elemento por dois sublinhado (--):
<form class= "search-form">
<input class="search-form__input--error">
<button class="search-form__button">Pesquisar</button>
</form>.search-form__input--error {
border: 1px solid red;
}Saiba mais: Metodologia BEM
Utilizando o github pages é possível colocar seu projeto no ar com poucos cliques! Acesse as settings (configurações) do repositório e clique no menu lateral em pages (páginas), não esqueça de selecionar a branch main (ramo principal) para que ele "ache" seu projeto!
Obs: Lembrem-se o arquivo index.html do seu site deve estar na pasta raiz do seu repositório e o conteúdo na branch main para que funcione.