Curso I - Unidade 03 - Básico do HTML
Aula 15 a 19 - Criar primeira página HTML / Adicionar as
primeiras tags / Pré visualizar no navegador / Compreendendo
espaços vazios e comantários / Adicionar caracteres especiais.
Criação da estrutura básica HTML. Tags:
<!DOCTYPE html>: Sinataxe início HTML 5
<html lang="pt-BR>: Define o idioma principal da página (para tradutores).
<head>
<body>
Tags do <headt>:
<title> : Título na aba do navegador.
<meta charset="UTF-8">: Utilização de caracteres especiais (linguas latinas).
<p>: Parágrafo comum.
 : Adiciona espaços no texto htmls que não são ignorados.
<!-- comentário ->: Adiciona comentários ao documento.
Caracteres Especiais: euro: € - '&euro'; libra: £ - '£'; E comercial & '&'.
<!DOCTYPE html>: Sinataxe início HTML 5
<html lang="pt-BR>: Define o idioma principal da página (para tradutores).
<head>
<body>
Tags do <headt>:
<title> : Título na aba do navegador.
<meta charset="UTF-8">: Utilização de caracteres especiais (linguas latinas).
<p>: Parágrafo comum.
 : Adiciona espaços no texto htmls que não são ignorados.
<!-- comentário ->: Adiciona comentários ao documento.
Caracteres Especiais: euro: € - '&euro'; libra: £ - '£'; E comercial & '&'.
Curso I - Unidade 04 - Head do documento
Aula 20 a 25 - Explorando o head / Aplicar CSS ao documento /
Meta tag / Meta Refresh / Erros mais comuns da aula de Meta
Refresh
O <head> recebe os elementos title, base,
link, meta e style.
Tag <style> para criar estilos CSS no documento.
Tag <script> para adicionar scripts JS.
Utilização de diversas tags <meta> para SEO como author, keywords, description.
Utilização da tag <meta> com a propriedade http-equiv='refresh' content='tempo_para_refresh'
Explicação sobre erros comuns de execução de códigos.
Utilização do evento window.onload (não foi uma aula sobre o assunto).
Tag <style> para criar estilos CSS no documento.
Tag <script> para adicionar scripts JS.
Utilização de diversas tags <meta> para SEO como author, keywords, description.
Utilização da tag <meta> com a propriedade http-equiv='refresh' content='tempo_para_refresh'
Explicação sobre erros comuns de execução de códigos.
Utilização do evento window.onload (não foi uma aula sobre o assunto).
Curso I - Unidade 05 - Texto do documento
Aula 26 a 32- Adicionando Heading / Adicionando parágrafo / Line
Break / Usar uma marcação / Trabalhando com lista / Usar as tags
"i" e "em" / Usar as tags "b" e "strong"
Tags de título: <h1>, <h2>, <h3>, <h4>,
<h5>, <h6> e <hgroup> (?agrupa as tags
headers?).
Tags <p> e <br>
Tags <b>(bold), <i>(italico), <u>(sublinhado), <sub>(subscrito), <sup>(superescrito) e <s> (riscado).
Listas <ul>(não ordenada), <ol>(ordenada) , <li>(itens de lista) e <dl>(lista descritiva), <dt>(título da lista descritiva) e <dd>(itens da lista descritiva).
Nas listas ddo tipo <ul> e <ol> podemos alterar o tipo de marcador com o parametro type='square' (neste caso os tipo são mais restritos que pelo estilo list-style-type do CSS).
Com as novas opções semanticas utilizamos o <i> quando queremos nos referir para palavras em língua estrangeira, termos técnicos, etc. Já quanddo queremos uma enfase no texto utilizamos a tag <em>. Ambas tem o mesmo resultaddo de fonte.
O mesmo acontece com o <b> e <strong> senddo que o segundo é utilizado para chamarmos atenção sobre o termo, já o primeiro tem apenas a função de ddestacar o texto.
Tags <p> e <br>
Tags <b>(bold), <i>(italico), <u>(sublinhado), <sub>(subscrito), <sup>(superescrito) e <s> (riscado).
Listas <ul>(não ordenada), <ol>(ordenada) , <li>(itens de lista) e <dl>(lista descritiva), <dt>(título da lista descritiva) e <dd>(itens da lista descritiva).
Nas listas ddo tipo <ul> e <ol> podemos alterar o tipo de marcador com o parametro type='square' (neste caso os tipo são mais restritos que pelo estilo list-style-type do CSS).
Com as novas opções semanticas utilizamos o <i> quando queremos nos referir para palavras em língua estrangeira, termos técnicos, etc. Já quanddo queremos uma enfase no texto utilizamos a tag <em>. Ambas tem o mesmo resultaddo de fonte.
O mesmo acontece com o <b> e <strong> senddo que o segundo é utilizado para chamarmos atenção sobre o termo, já o primeiro tem apenas a função de ddestacar o texto.
Curso I - Unidade 06 - Como adicionar imagens
Aula 33 - Usando imagens / Alterando o alinhamento da imagem /
Alinhando imagem
Utilizando a tag <img src="imagem" alt=" "
width=" " height=" " title=" " >
Utilizando alguns estilos CSS inline com a tag <style>: float, margin-right, border, margin-bottom. No documento já estava setada a propriedade clear na tag seguinte a tag da imagem para limpar o float utilizado acima, mas não foi explicado.
Utilizando alguns estilos CSS inline com a tag <style>: float, margin-right, border, margin-bottom. No documento já estava setada a propriedade clear na tag seguinte a tag da imagem para limpar o float utilizado acima, mas não foi explicado.
Aula 35 - Alinhando imagem
Adicionando classes as tags e criando uma lista de estilos no
<head>. Aqui foi explicado a utilização do clear.
Aula 36 - Utilizar os elementos figure e figure caption
Utilizamos a tag <figure> para envolver as tags de imagem de
modo a permitir uma melhor semantica para as imagens. Junto com a
tag <figure> podemos utilizar a tag <figcaption> que
inclui uma legenda a imagem O texto da propriedade
title da imagem que foi demonstrado anteriormente é
apresentado quando passamos o mouse sobre a imagem (independente
da tag <figure>)
Curso I - Unidade 07 - Como adicionar links
Aula 37 a 38 - Criar um hiperlink / Compreender os links
relativos
Utilização da tag <a href=""> para links locais e externos e
utilização da propriedade
target="_blank".
Como navegar em diretórios para referencias de arquivos.
Como navegar em diretórios para referencias de arquivos.
Aula 39 - Criar um hiperlink para dentro da própria página
Criando links para elementos na página utilizando o
id e referencia com '#'.
Aula 40 - Criar um link para uma imagem
Envolver tag <img> com uma tag <a> para acessar um
link pela imagem.
Curso I - Unidade 08 - Como criar listas
Aula 41 a 42 - Criação de listas / Criação de sub-listas
Criando listas ordenadas e não ordenadas. Alterando o marcador de
listas com propriedade CSS
list-style-type e list-style-image.
Criando sub-listas.
Criando sub-listas.
Aula 43 - Criação de menu vertical com listas
Criação de um menu vertical a partir de uma lista. Aplicamos
diversas propriedades CSS como
margin, padding, width,
list-style, text-decoration,
background-color, color e
display: block para que cada item da lista se comporte
como um elemento em bloco permitindo a aparencia de menu.
Aula 44 - Criar um menu horizontal
Ajustando o CSS para converter o menu horizontal para vertical.
Para isso removemos o
display: block das tag <a> e passamos a definir um
display: inline-block para a <li>. No mais apenas
alguns ajustes de padding e um ajuste de
margin negativo para remover os espaçamentos entre as
<li>.
Curso I - Unidade 09 - Novos elementos estruturais do HTML5
Aula 45 a 51 - Elemento main / Elemento header / Elemento nav /
Elemento article / Elemento section / Elemento aside / Elemento
footer
Nesta aula vamos refatorar um página pre-existente utilizando as
novas tags disponíveis no HTML5.
A primeira alteração é substituir a <div id="principal"> pela tag <main>. Em seguida substituimos a <div id="topo"> pela tag <header>. A próxima é a <div id="navegacao"> pela tag <nav>. E por fim as divs <div id="artigo"> pela tag <article>, <div id="rodape"> pela tag <footer>. Temos ainda a tag <section> que é como a <div>, ou seja, uma tag de uso genérico para divisões da página. A tag <aside> pode ser utilizada para incluir citações no meio do texto ou ainda seções para outra notícias relacionadas ou para publicidade.
A primeira alteração é substituir a <div id="principal"> pela tag <main>. Em seguida substituimos a <div id="topo"> pela tag <header>. A próxima é a <div id="navegacao"> pela tag <nav>. E por fim as divs <div id="artigo"> pela tag <article>, <div id="rodape"> pela tag <footer>. Temos ainda a tag <section> que é como a <div>, ou seja, uma tag de uso genérico para divisões da página. A tag <aside> pode ser utilizada para incluir citações no meio do texto ou ainda seções para outra notícias relacionadas ou para publicidade.
Curso I - Unidade 10 - Estrutura e semantica
Aula 52 a 55 - Elemento small / Elemento address / Elemento
address para uso de número de telefone / Elemento mark
A tag do tipo <small> são utilizadas para
descrições pequenas e de pouca importancia para o conteudo como
termos legais, copyright. Para exibir o caractere de
copyright utilizamos ©. A tag
<address> serve para informações de contato como
endereço, telefone, link para um site, email, etc. Ela não pode
ser filha de uma tag do tipo headding (h1 a h6). Podemos combinar
a tag <address> com a tag de ancora
<a href="mailto:"> ou
<a href="tel:">.
Outra tag é a <mark> que faz um grifo colorido no texto como um marca texto.
Outra tag é a <mark> que faz um grifo colorido no texto como um marca texto.
Curso I - Unidade 11 - Projeto do curso
Aula 56 - Projeto numero 1a
Projeto numero 1b
No Projeto numero 1 fiz a estilização do meu jeito. No projeto
numero 2 a estilização já estava pronta bastanto aplicar as tags
necessárias.
Curso I - Unidade 12 - Tabelas
Aula 57 - Criando sua primeira tabela
As tabelas são formadas pelas tags
<table>(inicia a tabela), <tr>(linha
da tabela); e <td>(table data).
Pela sintaxe antiga podiamos colocar atributos na tag table da seguinte forma: <table width="200px" border="1"> porém isso não é mais utilizado (a recomendação é utilizar via CSS com propriedades como width, border, padding ). Outra tag de tablelas é a <th>(table head, ou título da tabela).
Pela sintaxe antiga podiamos colocar atributos na tag table da seguinte forma: <table width="200px" border="1"> porém isso não é mais utilizado (a recomendação é utilizar via CSS com propriedades como width, border, padding ). Outra tag de tablelas é a <th>(table head, ou título da tabela).
Aula 58 a 59 - Tabela semantica / Usando colgroup e col
Com a nova semantica do HTML5 passamos a utilizar as tags
<thead>, <tfoot> e
<tbody>(declarados nessa ordem). Temos ainda a tag
<caption> para o título da tabela.
Podemos aplicar cores intercaladas utilizando a pseudo-classe :nth-child(even) (ou 'odd').
Podemos fazer um agrupamento de colunas utilizando as tags <colgroup> e internamente a tag <col> sendo essa criada para cada coluna da tabela, ou seja se quisermos atuar sobre a terceira coluna precisamos criar 3 tags <col>
Podemos aplicar cores intercaladas utilizando a pseudo-classe :nth-child(even) (ou 'odd').
Podemos fazer um agrupamento de colunas utilizando as tags <colgroup> e internamente a tag <col> sendo essa criada para cada coluna da tabela, ou seja se quisermos atuar sobre a terceira coluna precisamos criar 3 tags <col>
Curso I - Unidade 13 - Formulários
Aula 60 - O que é formulário
Formulário é um espaço em um site ou aplicativo onde o usuário
interage com ele.
A sintaxe básica de um formulário além da tag possui dois atributos:
<form action=" " method=" ">,
Para o corpo do formulário utilizamos principalmente as tags <label for=" "> e <input type=" " id=" " name=" ">.
Entre os tipos do <input> estão text, password, submit, checkbox, radiobutton.
Outra tag para manipulação de dados é a <select> que cria um menu de opções com as tags <option value=" ">. As tags <option> permitem um atributo selected que define a opção padrão.
Outros tipos de input do HTML5 são: color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week.
E alguns atributos: required, placeholder, pattern, list, autofocus.
A sintaxe básica de um formulário além da tag possui dois atributos:
<form action=" " method=" ">,
Para o corpo do formulário utilizamos principalmente as tags <label for=" "> e <input type=" " id=" " name=" ">.
Entre os tipos do <input> estão text, password, submit, checkbox, radiobutton.
Outra tag para manipulação de dados é a <select> que cria um menu de opções com as tags <option value=" ">. As tags <option> permitem um atributo selected que define a opção padrão.
Outros tipos de input do HTML5 são: color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week.
E alguns atributos: required, placeholder, pattern, list, autofocus.
Aula 61 a 65 - Criação de um formulário simples / Adicionar os
novos input types como telefone, email e url / Adicionar os campos
requeridos / Adicionar um placeholder e um autofocus / Adicionar
um campo de número
Os métodos que podemos incluir como atributo da tag <form>
podem ser GET quando é um formulário que envia dados na
URL para uma pesquisa por exemplo (limitado a 255 caracteres), ou
POST quando enviamos os dados para o servidor por exemplo
em uma tela de login (sem limite de caracteres).
Para as tags do tipo <input> podemos incluir tags do tipo <label> que podem envolver o input ou recer um atributo for="name". Podemos incluir outro atributo size="n" onde 'n' é o número de caracteres e maxlength="n". O valor de maxlength é importante para limitar o número de caracteres em função do campo do banco de dados no back-end.
A tag <input type="submit" value="texto_do_botão"> tem a função de enviar o formulario para o endereço definido (no exemplo no campo action da tag <form>).
Entre os valores para o atributo type a partir do HTML5 temos por exemplo o email, tel e url que possuem características diferenciadas do tipo text padrão.
O atributo required pode ser incluido nas tags <input> e exigem que o campo seja preenchido, entretanto ele é mais comum no JS ou na aplicação no Back End.
Outro atributo bastante importante é o placeholder. Temos também no HTML5 o atributo autofocus que posiciona o cursor no campo definido ao carregar a página.
Outro novo tipo de <input> é o type: number que pode ter como parametros min e max (que definem o valor minimo e máximo do campo). Ele apresenta um campo com seletor para os valores. Podemos ainda incluir um parametro step que define qual o intervalo que será alterado ao clicar nos seletores do campo.
Para as tags do tipo <input> podemos incluir tags do tipo <label> que podem envolver o input ou recer um atributo for="name". Podemos incluir outro atributo size="n" onde 'n' é o número de caracteres e maxlength="n". O valor de maxlength é importante para limitar o número de caracteres em função do campo do banco de dados no back-end.
A tag <input type="submit" value="texto_do_botão"> tem a função de enviar o formulario para o endereço definido (no exemplo no campo action da tag <form>).
Entre os valores para o atributo type a partir do HTML5 temos por exemplo o email, tel e url que possuem características diferenciadas do tipo text padrão.
O atributo required pode ser incluido nas tags <input> e exigem que o campo seja preenchido, entretanto ele é mais comum no JS ou na aplicação no Back End.
Outro atributo bastante importante é o placeholder. Temos também no HTML5 o atributo autofocus que posiciona o cursor no campo definido ao carregar a página.
Outro novo tipo de <input> é o type: number que pode ter como parametros min e max (que definem o valor minimo e máximo do campo). Ele apresenta um campo com seletor para os valores. Podemos ainda incluir um parametro step que define qual o intervalo que será alterado ao clicar nos seletores do campo.
Aula 66 a 70 - Adicionar um campo datepicker / Adicionar um
datalist a um input text / Adicionar um type range / Adicionar um
type color / Adicionar um type search
Outro tipo incluido a partir do HTML5 é o
type:date que apresenta um pequeno calendário para a
seleção de datas (verificar compatibilidade com navegadores). Essa
solução também é implementável com o jQuery.
A tag <datalist> permite criarmos uma lista de opções para um campo do tipo input. Basta criarmos a tag mencionada e inserir os dados desejados em tags <option value='valor'>. Para encadear a lista a tag <input> utilizamos o atributo list='id_do_datalist'.
Outro tipo de input é o type= 'range' que cria um seletor em barra para um range de valores. Os valores aceitam atributos de min, max e step. Para mostrar os valores na tela é necessário a criação de códigos em JS para recuperar os valores do input.
O input type: 'color' permite selecionar cores em uma paleta com caixa de seleção. Finalmente o input type: 'search' tem a vantagem sobre o text apenas de ser mais semantico pois visualmente não traz nenhuma mudança.
A tag <datalist> permite criarmos uma lista de opções para um campo do tipo input. Basta criarmos a tag mencionada e inserir os dados desejados em tags <option value='valor'>. Para encadear a lista a tag <input> utilizamos o atributo list='id_do_datalist'.
Outro tipo de input é o type= 'range' que cria um seletor em barra para um range de valores. Os valores aceitam atributos de min, max e step. Para mostrar os valores na tela é necessário a criação de códigos em JS para recuperar os valores do input.
O input type: 'color' permite selecionar cores em uma paleta com caixa de seleção. Finalmente o input type: 'search' tem a vantagem sobre o text apenas de ser mais semantico pois visualmente não traz nenhuma mudança.
Curso II - Unidade 3 - Conceitos Básicos
Aula 81 - Como aplicar CSS no HTML
CSS incorporado através da tag <style> dentro do
<head> do HTML. Note que nos seletores o sinal de '+' indica
apenas a primeira ocorrencia após o primeiro seletor.
Aula 82 - CSS inline
Aplicando CSS inline. O CSS inline tem precedencia sobre os demais
pois é o último a ser interpretado pelo navegador.
Aula 83 a 84 - CSS externo / Propriedade de cascata.
Aplicando CSS externo e entendendo a ordem de execução das
propriedades.
Curso II - Unidade 4 - Fontes
Aula 86 a 87 - Formatando texto / Espaçamento entre letras e
palavras
Quando vamos alterar o tamanho das fontes em nosso documento
podemos dimensioná-las de forma absoluta ou relativa. Na forma
absoluta passamos o tamanho da fonte em
pixels(px) de modo que ela ficará fixa, independente do
tamanho da tela. Já quando utilizamos a forma relativa com
a unidade em a fonte se adapta ao tamanho da tela (cada
unidade em equivale a 100% do tamamanho relativo
da fonte, assim '3em' equivale a '300%').
Já para os estilos da fonte podemos utilizar o font-style que permite deixar o texto em itálico e o font-weight que determina o peso da fonte, lembrando que algumas tags (como as tags de título h1 a h6) já tem o weight bold por padrão, assim devemos alterar ou o valor ou para um peso menor.
Entre as propriedades de texto temos também o text-align que pode ser left, right, center e justify. Outra propriedade o line-height permite alterar a altura da linha, e a propriedade text-indent inclui um espaçamento no início do parágrafo.
A propriedade text-decoration que pode ter como parametro underline, overline, line-through e none e a propriedade text-transform que pode ser uppercase, lowercase e capitalize (todas as primeiras letras maiusculas).
Temos ainda duas propriedades letter-spacing que define o espaçamento entre letras e word-spacing que define o espaçamento entre palavras.
Já para os estilos da fonte podemos utilizar o font-style que permite deixar o texto em itálico e o font-weight que determina o peso da fonte, lembrando que algumas tags (como as tags de título h1 a h6) já tem o weight bold por padrão, assim devemos alterar ou o valor ou para um peso menor.
Entre as propriedades de texto temos também o text-align que pode ser left, right, center e justify. Outra propriedade o line-height permite alterar a altura da linha, e a propriedade text-indent inclui um espaçamento no início do parágrafo.
A propriedade text-decoration que pode ter como parametro underline, overline, line-through e none e a propriedade text-transform que pode ser uppercase, lowercase e capitalize (todas as primeiras letras maiusculas).
Temos ainda duas propriedades letter-spacing que define o espaçamento entre letras e word-spacing que define o espaçamento entre palavras.
Curso II - Unidade 5 - Conceitos básicos de CSS
Aula 88 a 95 - Cores / O que é Box Model / Margin e padding /
Border / Background / Sombra / Gradiente Linear / Gradiente Radial
Podemos definir as cores em CSS pelo nome, pelo valor
hexadecimal e pela notação rgb/rgba. O padrão
rgb permite a utilização em numeros de 0 a 255 ou em
percentual de 0 a 100%. Há ainda o padrão hsl/hsla mas é
menos utilizado.
Conceitos de box model e composição (content / padding / border / margin). Quanto ao position o Box Model pode ser absolute, relative, fixed ou static. E o float pode ser left, right, none ou inherit.
A margin é o tamanho externo do box e se soma ao tamanho do content, portanto o valor aplicado será adicionado na vertical ou na horizontal. O padding é a distancia interna do elemento.
O border fica entre o margin e o padding e tem tres propriedades style(solid, double, groove, ridge, inset, outset), width e color. Podemos aplicar ainda uma imagem utilizando a propriedade border-image.
O background tem várias propriedades entre elas: background-color, background-image, background-repeat, background-attachment, background-position, background-blend-mode, background-origin e blackground-clip. O background-image recebe como parametro o valor url('image'). Essa propriedade isolada irá repetir a imagem em toda a área. Para controlar isso utilizamos a propriedade background-repeat: no-repeat. Podemos repetir no eixo x com repeat-x. O background-position permite posicionar a imagem de background atravé de combinações. top posiciona acima e no centro, top right e top left acima em cada um dos lados (as posições left e right posicionam fora da área do background). As posições possíveis de combinação são: top, bottom, center, left e right. O background-atachment: fixed permite manter a imagem de fundo fixa em uma posição mesmo com o scroll da página.
O sombreamento pode ser aplicado com box-shadow ou text-shadow. O box-shadow recebe os seguintes valores:
+/-Xpx +-Ypx Zpx (Apx) #cor, onde X: posição esquerda/direita, Y: posição abaixo/acima, Z:blur(embaçamento) A: spread (distancia no eixo 'z' não é muito utilizado). Podemos ainda utilizar o parametro inset no início da expressão que faz com que a sobra fique interna no box. O text-shadow tem a mesma sintaxe que o box-shadow.
O gradiente pode ser incluido no background e pode ser: linear-gradient( to 'position', color1, color2). O position pode ser a combinação de top, right, bottom e left ou pode ser definido em graus 0deg, 90deg, 180deg e 270deg (o 0deg equivale ao top). Já o radial-gradient possue apenas as cores como parametro e podem ser duas ou mais.
Conceitos de box model e composição (content / padding / border / margin). Quanto ao position o Box Model pode ser absolute, relative, fixed ou static. E o float pode ser left, right, none ou inherit.
A margin é o tamanho externo do box e se soma ao tamanho do content, portanto o valor aplicado será adicionado na vertical ou na horizontal. O padding é a distancia interna do elemento.
O border fica entre o margin e o padding e tem tres propriedades style(solid, double, groove, ridge, inset, outset), width e color. Podemos aplicar ainda uma imagem utilizando a propriedade border-image.
O background tem várias propriedades entre elas: background-color, background-image, background-repeat, background-attachment, background-position, background-blend-mode, background-origin e blackground-clip. O background-image recebe como parametro o valor url('image'). Essa propriedade isolada irá repetir a imagem em toda a área. Para controlar isso utilizamos a propriedade background-repeat: no-repeat. Podemos repetir no eixo x com repeat-x. O background-position permite posicionar a imagem de background atravé de combinações. top posiciona acima e no centro, top right e top left acima em cada um dos lados (as posições left e right posicionam fora da área do background). As posições possíveis de combinação são: top, bottom, center, left e right. O background-atachment: fixed permite manter a imagem de fundo fixa em uma posição mesmo com o scroll da página.
O sombreamento pode ser aplicado com box-shadow ou text-shadow. O box-shadow recebe os seguintes valores:
+/-Xpx +-Ypx Zpx (Apx) #cor, onde X: posição esquerda/direita, Y: posição abaixo/acima, Z:blur(embaçamento) A: spread (distancia no eixo 'z' não é muito utilizado). Podemos ainda utilizar o parametro inset no início da expressão que faz com que a sobra fique interna no box. O text-shadow tem a mesma sintaxe que o box-shadow.
O gradiente pode ser incluido no background e pode ser: linear-gradient( to 'position', color1, color2). O position pode ser a combinação de top, right, bottom e left ou pode ser definido em graus 0deg, 90deg, 180deg e 270deg (o 0deg equivale ao top). Já o radial-gradient possue apenas as cores como parametro e podem ser duas ou mais.
Curso II - Unidade 6 - Page Layouts - Fundamentos
Aula 96 - Conceitos de CSS na prática
Entendendo o posicionamento básico com CSS. Utilizando
width, e aplicando a propriedade
margin: 0 auto para centralizar o elemento na tela.
Utilizando o seletor body para zerar as margens do documento.
Em seguida começamos o estudo sobre posicionamentos. Primeiro entendemos o calculo de width, padding e margin (soma de elementos no block). A seguir utilizamos o float para posicionar os elementos um ao lado do outro. Esse posicionamento quebra o fluxo e a <div> principal não envolve os elementos filhos. Para ajustar o fluxo podemos criar uma tag 'cega' com um estilo clear: both que limpa o fluxo do documento.
A técnica correta para limpar o fluxo é utilizando a pseudo-classe :after na tag que está envolvendo o float. A sintaxe é a seguite:
seletor_pai: after {
content: "";
display: table;
clear: both;
}
O display: table define uma caixa no nível do bloco. Essa sintaxe faz a limpeza do fluxo de forma mais 'elegante' porém utilizar tags cegas é mais fácil.
Utilizando o seletor body para zerar as margens do documento.
Em seguida começamos o estudo sobre posicionamentos. Primeiro entendemos o calculo de width, padding e margin (soma de elementos no block). A seguir utilizamos o float para posicionar os elementos um ao lado do outro. Esse posicionamento quebra o fluxo e a <div> principal não envolve os elementos filhos. Para ajustar o fluxo podemos criar uma tag 'cega' com um estilo clear: both que limpa o fluxo do documento.
A técnica correta para limpar o fluxo é utilizando a pseudo-classe :after na tag que está envolvendo o float. A sintaxe é a seguite:
seletor_pai: after {
content: "";
display: table;
clear: both;
}
O display: table define uma caixa no nível do bloco. Essa sintaxe faz a limpeza do fluxo de forma mais 'elegante' porém utilizar tags cegas é mais fácil.
Aula 97 a 98- Calculando larguras em EM / Calculando larguras em
percentual
A utilização de em para medidas equivale a dizer que,
tomando como base a medida herdada será aplicado xem em
relação a este valor. O mesmo ocorre com porcentagem, ou seja,
cada 1em equivale a 100%.
Quando trabalhamos com width podemos defini-lo em '%'. Nesse caso devemos sempre respeitar o percentual total descontando sempre os valores de margin e padding e observando os casos em que há a repetição dos valores (para direita e/ou esquerda).
Quando trabalhamos com width podemos defini-lo em '%'. Nesse caso devemos sempre respeitar o percentual total descontando sempre os valores de margin e padding e observando os casos em que há a repetição dos valores (para direita e/ou esquerda).
Aula 99 - Elementos Floats
Utilizando o float para posicionar elementos ao lado de
seu antecessor. A propriedade float faz com que os blocos
flutuam para o lado selecionado. Quando definimos a flutuação de
um elemento pode ocorrer dele sobrepor o outro que não esteja
seguindo o mesmo fluxo, ou ainda pode ocorrer a quebra de
elementos pai do elemento flutuante.
Aula 100 - Compreender o clear
Quando temos elementos flutuando, ao utilizar a propriedade
clear e definirmos um lado estamos definindo que não pode
haver nenhum elemento daquele lado do elemento que recebe a
propriedade.
Quando definimos um elemento a direita com o float: right e não limpamos o fluxo (limpamos apenas o fluxo da esquerda com o clear: left) mantemos o elemento a direita mesmo com o fluxo dos demais a esquerda.
Quando definimos um elemento a direita com o float: right e não limpamos o fluxo (limpamos apenas o fluxo da esquerda com o clear: left) mantemos o elemento a direita mesmo com o fluxo dos demais a esquerda.
*Não lembro porque estava utilizando uma numeração diferente mas aqui ajusto a numeração com as aulas
Aula 103* - Controlando elementos com overflow
Quando estouramos com os elementos filhos o tamanho do elemento
pai podemos ajustar o tamanho do pai utilizando a propriedade
overflow (neste exemplo funcionou tanto com
overflow: hidden quanto com overflow: auto
Aula 104 - Elementos com float inline
Nessa aula utilizamos o float: left para posicionar a
imagem no canto esquerdo da página e o texto, que inicialmente
estava abaixo dela, ao lado. Para acertar o texto da segunda seção
utilizamos o clear: both para limpar o fluxo da primeira
parte.
Outro ajuste feito utilizando o float:left foi para aumentar a primeira letra do texto e posicioná-la sendo envolvida pelo texto. Para isso utilizamos além do float uma forma de seleção com pseudo-classes que seleciona a primeira letra do primeiro parágrafo da seção. Essa pseudo-classe é p:first-of-type:first-letter.
Outro ajuste feito utilizando o float:left foi para aumentar a primeira letra do texto e posicioná-la sendo envolvida pelo texto. Para isso utilizamos além do float uma forma de seleção com pseudo-classes que seleciona a primeira letra do primeiro parágrafo da seção. Essa pseudo-classe é p:first-of-type:first-letter.
Aula 105 - Como criar um layout com 2 colunas
Para a criação de um layout de 2 colunas, primeiro utilizamos o
float: left apenas para o primeiro elemento. Nesse caso a
configuração de padding dos dois elementos deve ser igual ou ser
compensada no height do segundo elemento. Como não flutuamos o
elemento da direita aplicamos nele um
margin-left: 660px para posicionar o segundo elemento na
posição 600px + 20px + 20px +20px (elemento1, padding, padding,
margin real). Devemos limpar o fluxo no elemento final (que não
está flutuando).
No segundo exemplo utilizamos o float: left nos dois elementos, assim um flutua a esquerda do outro. Nesse caso devemos definir o width nos dois elementos e a propriedade margin-top não funciona no elemento de baixo. Desse modo devemos aplicar o margin nos dois elementos flutuantes.
O exemplo 3 fizemos o mesmo que no exemplo 2 porém utilizando o float: right no segundo elemento. Nesse caso não precisamos definir o margin-left pois ela se define pela diferença dos tamanhos dos elementos.
No segundo exemplo utilizamos o float: left nos dois elementos, assim um flutua a esquerda do outro. Nesse caso devemos definir o width nos dois elementos e a propriedade margin-top não funciona no elemento de baixo. Desse modo devemos aplicar o margin nos dois elementos flutuantes.
O exemplo 3 fizemos o mesmo que no exemplo 2 porém utilizando o float: right no segundo elemento. Nesse caso não precisamos definir o margin-left pois ela se define pela diferença dos tamanhos dos elementos.
Aula 106 - Como criar um layout com 3 colunas
Para criar 3 colunas fazemos o mesmo que para 2 mesclando as
propriedades. No caso flutuamos para a esquerda as colunas 1 e 2 e
para a direita a coluna 3. Entre as colunas 1 e 2 aplicamos um
margin-left e ao final aplicamos um
margin-bottom apenas na útima coluna (o recomendado é
aplicar nas 3 colunas para que a margem exista independente do
height da maior coluna que pode variar).
Note que nesses exemplos com float os tamanhos são todos calculados para valores fixos, desse modo esse tipo de configuração fica pouco responsiva. Podemos substituir as medidas por percentuais para fazer um design mais fluido mas mesmo assim os layouts com display: flex ou display: grid ainda são mais eficientes.
A segunda solução utilizou o float: left para a coluna da esquerda, o float: right para a coluna da direita e para posicionar a coluna central aplicamos a propriedade margin: 0 auto para centralizar o elemento entre as duas laterais.
A terceira solução separou os elementos em uma <section> com duas colunas e uma coluna <aside>. Desse modo aplicamos o float: left na <section> e o float: right no <aside> posicionando os dois elementos a esquerda e a direita respectivamente. em seguida flutuamos os elementos internos da <section> para a esquerda e a direita, sendo essa segunda flutuação interna na <section>
Note que nesses exemplos com float os tamanhos são todos calculados para valores fixos, desse modo esse tipo de configuração fica pouco responsiva. Podemos substituir as medidas por percentuais para fazer um design mais fluido mas mesmo assim os layouts com display: flex ou display: grid ainda são mais eficientes.
A segunda solução utilizou o float: left para a coluna da esquerda, o float: right para a coluna da direita e para posicionar a coluna central aplicamos a propriedade margin: 0 auto para centralizar o elemento entre as duas laterais.
A terceira solução separou os elementos em uma <section> com duas colunas e uma coluna <aside>. Desse modo aplicamos o float: left na <section> e o float: right no <aside> posicionando os dois elementos a esquerda e a direita respectivamente. em seguida flutuamos os elementos internos da <section> para a esquerda e a direita, sendo essa segunda flutuação interna na <section>
Aula 107 - Static Positioning
O posicionamento static (estático) é o posicionamento
natural dos elementos html.
Aula 108 - Relative Positioning
O posicionamento relative (relativo) permite que
utilizemos as propriedades top, left, right e bottom. Uma
vez definido o posicionamento como relative o elemento
passa a se sobrepor aos elementos com postion padrão.
Desse modo um elemento com o posicionamento relative se
sobrepõe aos outros elementos a menos que estes também tenham seu
posicionamento definidos como relative. Nesse tipo de
posicionamento podemos utilizar a propriedade
z-index para definir qual elemento tem prioridade de
sobreposição.
Aula 109 - Absolute Positioning
O position: absolute ignora todos os elementos pais que
não tenham um posicionamento definido. Dessa forma se o elemento
selecionado for o único com essa propriedade ele se posicionará
tomando como base o início da página. Se definirmos o elemento pai
também com um position diferente de static esse
elemento passará a ser a referencia para os valores do
position: absolute.
Aula 110 - Fixed Positioning
O position: fixed estabelece um posicionamento fixo para
o elemento que se sobrepõe a qualquer outro inclusive na rolagem
de tela.