FRONT: PROGRAMAÇÃO

HTML – CSS – JAVASCRIPT & BOOTSTRAP

 ISRAEL MARQUES CAJAI JÚNIOR
PROFESSOR

Israel é especialista em Engenharia Web e trabalha

com educação há 26 anos. Atuou no
desenvolvimento de sistemas para desktop,
migrando em seguida para a criação de aplicações
destinadas à Internet.
Na FIAP, é professor nos cursos de Sistemas de
Informação, Análise e Desenvolvimento de Sistemas
e Jogos Digitais para as disciplinas focadas em front
end.

profisrael.copi@fiap.com.br
AGENDA

1 AULA 1 CONTEÚDO – Baixando o Editor + Introdução HTML + CSS

2 AULA 2 CONTEÚDO – Containers + Box Model + Alinhamento +

Tabelas

AULA 3 CONTEÚDO – Bootstrap + Formulários

3

4 AULA 4 CONTEÚDO – JavaScript + Variáveis + Estruturas +

Objetos + DOM
AULA 2

CONTAINERS
Containers – entendendo o conceito de caixas

Box Model – como é formatado

Alinhamento – posicionando os containers

Tabelas – exibindo dados tabulares

CONTAINERS

ENTENDENDO O
CONCEITO DE CAIXAS
Tags HTML são caixas. Elas podem armazenar conteúdo, ter
tamanhos diferentes, estar ao lado ou abaixo de outra, e
podem, ainda, estar dentro de outras caixas.
Por padrão, as tags se comportam de duas formas diferentes:
ou ficam uma ao lado da outra (inline), ou ficam uma abaixo da
outra (block).
DIV:
A CAIXA QUE É UM SUPERCONTAINER

Com a ideia de caixa, fica fácil entender o conceito da tag

<div>
<div>. Ela é uma caixa (container) que armazena outras tags.
<h1>Web</h1>
Na maiorias das vezes, você colocará os conteúdos do site
em divs, assim será mais fácil realizar a formatação CSS e <div>
organizar o conteúdo da sua página.
<h2>Imagens</h2>
Divs armazenam qualquer tipo de conteúdo, inclusive outras
divs. <p>Lorem...</p>

Divs são elementos block e, por isso, sempre ocuparão toda </div>
a largura da linha onde estão posicionadas.
</div>
DIV:
DEFININDO A LARGURA E A ALTURA

A propriedade CSS width deve ser utilizada

div {
para definir a largura de uma div.

Já a propriedade CSS height deve ser utilizada width: 500px;

para definir a altura de uma div.
height: 500px;

}
DIV:
DEFININDO A LARGURA MÁXIMA E MÍNIMA

A propriedade CSS max-width define a

largura máxima que a div deve ter quando
div {
exibida no navegador. Por padrão, a div
ocupa todo o espaço da linha onde está max-width: 500px;
posicionada.
min-width: 200px;
Já a propriedade CSS min-width define a
largura mínima que a div pode ter quando }
exibida no navegador.
DIV:
DEFININDO A LARGURA MÁXIMA E MÍNIMA

A propriedade CSS max-height define a

div {
altura máxima que a div deve ter quando
exibida no navegador. max-height: 500px;
Já a propriedade CSS min-height define a
min-height: 200px;
altura mínima que a div pode ter quando
exibida no navegador. }
BOX
MODEL

COMO A CAIXA
É MONTADA
BOX MODEL

O Box Model define como as divs devem ser

montadas em nossa página.

Ele é composto de quatro elementos:

margin, border, padding e content.

Essas quatro propriedades, em conjunto

com a largura e a altura, definirão como
ficará o seu container no navegador.

Fonte: http://gavinlearnstocode.blogspot.com/2017/07/codecademy-9-week-8-days-5-7.html
BOX MODEL:
MARGIN

Define a margem externa da div, ou seja, o distanciamento que a div terá dos demais
elementos que formam a página. Possui os seguintes valores:

Top – margem superior.

Right – margem direita.

Bottom – margem inferior.

Left – margem esquerda.

BOX MODEL:
MARGIN

Podemos definir os valores de margem de quatro formas:

• Declarando um único valor: ele será usado pelas quatro margens.

• Declarando dois valores: o primeiro valor será usado pelas margens top e bottom, e o
segundo valor, para as margens right e left.

• Declarando três valores: o primeiro valor será usado pela margem top, o segundo valor será
usado pelas margens right e left e o terceiro valor será usado pela margem bottom.

• Declarando quatro valores: o primeiro valor será usado pela margem top, o segundo pela
margem right, o terceiro pela margem bottom e o quarto pela margem left. Esse sempre será o
padrão; para lembrar, faça uma referência ao sentido horário.
 div {

/* declaração com um único valor */

DECLARAÇÃO margin: 20px;

CSS MARGIN /* declaração com dois valores */

margin: 20px 40px;

/* declaração com três valores */

margin: 20px 40px 30px;

/* declaração com quatro valores */

margin: 20px 30px 40px 50px;

}
BOX MODEL:
BORDER

Define a borda (contorno) da div ou de qualquer outro elemento.

As bordas são opcionais e é muito comum encontrarmos elementos sem elas, inclusive as
divs.

Podemos aplicar as seguintes bordas:

Top – borda superior.

Right – borda direita.

Bottom – borda inferior.

Left – borda esquerda.

BOX MODEL:
BORDER

Para declararmos as bordas, podemos utilizar as seguintes propriedades:

Border-width: define a largura da borda. É muito comum encontrar o valor declarado em pixels,
mas pode receber outras medidas CSS válidas.

Border-color: define a cor que a borda terá. É comum encontrar a cor declarada em
hexadecimal, mas pode receber outros valores para cores válidas.

Border-style: define o estilo que a borda receberá. Possui as seguintes opções: solid, double,
dotted, dashed groove, ridge, inset e outset.
DECLARAÇÃO
CSS BORDER
div {

border: 5px solid #dc143c;

}
BOX MODEL:
PADDING

Define a margem interna (preenchimento) da

div, ou seja, é o distanciamento que o conteúdo
terá das bordas ou extremidades da div. div {
Segue o mesmo padrão das margens, tanto
padding; 10px;
para as propriedades existentes como para a
respectiva declaração de valores. }
BOX MODEL:
BOX-SIZING

Quando utilizamos a propriedade padding, o valor

que foi atribuído a ela será adicionado à largura
e/ou à altura do container, isso com certeza div {
prejudicará o posicionamento dos elementos
existentes na página. padding; 10px;

Para evitar possíveis transtornos, sempre que box-sizing: border-box;

usar padding, utilize a propriedade box-sizing
com o valor border-box. }

O box-sizing não permitirá que o valor usado seja

atribuído ao tamanho do container.
POSICIONANDO

ALINHANDO
OS CONTAINERS
POSICIONANDO
FLOAT

A propriedade float retira um elemento da sua posição original de

inserção no HTML, conhecido também como fluxo normal. Com essa
propriedade, o elemento é posicionado ao lado direito ou esquerdo do
div {
seu container.

Possui os seguintes valores válidos: float: left;

Right: indica que o elemento deve flutuar à direita do container.

}
Left: indica que o elemento deve flutuar à esquerda do container.

None: indica que o elemento não deve flutuar. Esse é o valor padrão.
POSICIONANDO
CLEAR

Quando usamos o float, às vezes acontece algo estranho: o elemento que

div {
estaria logo abaixo do container que recebeu a propriedade pode acabar
flutuando também se houver espaço suficiente para ele. float: left;
Para evitar isso, existe a propriedade clear, ela não permitirá esse tipo de
}
“herança” de flutuação. Possui os seguintes valores válidos:

Left: limpa a flutuação à esquerda. p{

Right: limpa a flutuação à direita. clear: both;

Both: limpa a flutuação tanto à esquerda quanto à direita }

POSICIONANDO
FLEXBOX

Flexbox é um conjunto de propriedades que possibilitarão o alinhamento dos containers,

permitindo assim a criação de layouts flexíveis.

A ideia é aplicarmos ao container principal propriedades flexíveis que possibilitem o

posicionamentos dos containers internos.

O Flexbox possui uma grande variedade de propriedades que nos ajudarão na criação do
layout de nossas páginas.
 POSICIONANDO
FLEXBOX

Fonte: https://www.pexels.com/pt-br/foto/aparelho-balcao-borrao-caderno-196644/
POSICIONANDO
DISPLAY: FLEX

Para usarmos o Flexbox, precisamos transformar

o elemento pai em um flex container, para isso
div {
aplicaremos nele a propriedade display com o
valor flex.
display: flex;
Por padrão, os filhos desse container ficarão
alinhados um ao lado do outro. }
Os elementos filhos serão definidos como flex
itens.
POSICIONANDO
FLEX-DIRECTION

Define a direção que os flex itens devem seguir no

container pai. Possui os seguintes valores válidos:

Row: os flex itens ficarão um ao lado do outro. .box{

Column: os flex itens ficarão um abaixo do outro.
flex-direction: row;
Row-reverse: os flex itens ficarão alinhados a partir da
direita do container pai. }
Column-reverse: os flex itens ficarão um abaixo do outro,
formando uma única coluna, mas em ordem inversa.
POSICIONANDO
FLEX-WRAP

Por padrão, o Flexbox deixará todos os flex itens em uma

mesma linha. A propriedade flex-wrap controla a quebra de
linhas quando necessário. Possui as seguintes opções:
.box{
Nowrap: não permitirá a quebra de linhas, esse é o valor
padrão e não precisará ser declarado. flex-wrap: wrap;
Wrap: permite a quebra de linhas quando os flex itens não
}
couberem na mesma linha do container.

Wrap-reverse: permite a quebra de linha iniciando o

posicionamento dos elementos da parte inferior para a parte
superior do container.
POSICIONANDO
JUSTIFY-CONTENT

Faz o alinhamento dos flex itens, Possui as seguintes opções:

Flex-start: alinhará os containers horizontalmente no início do elemento pai.

Flex-end: alinhará os containers horizontalmente no fim do elemento pai.

Center: centralizará horizontalmente os flex itens no elemento pai.

Space-between: iniciará o alinhamento horizontal dos containers pelas extremidades do

elemento pai.

Space-around: iniciará o alinhamento horizontal pelo centro do elemento pai.

POSICIONANDO
ALIGN-ITEMS

Faz o alinhamento vertical dos flex itens no container pai. Possui as

seguintes opções:

Flex-start: alinhará os containers verticalmente no início do

elemento pai. .box{
Flex-end: alinhará os containers verticalmente no fim do elemento
justify-content: center;
pai.

Center: alinhará os flex itens verticalmente. }

Stretch: deixará os flex itens com a mesma altura do elemento pai.

Baseline: a altura dos flex itens será definida pela quantidade de

conteúdo que eles receberem.
TABELAS

EXIBINDO DADOS
TABULARES
CRIANDO
TABELAS

Criar tabelas com HTML é uma tarefa muito fácil, pois existem tags para todos os elementos
que a compõem: títulos, linhas e colunas.

Tabelas são usadas para exibir dados de uma forma organizada e fácil para o usuário
entender o que eles representam.

A representação dos dados deve seguir uma organização que torne as informações bem
claras para o usuário. Não podemos deixar nenhum tipo de dúvida quanto ao dado
apresentado.
 CRIANDO
TABELAS

Fonte: https://www.pexels.com/pt-br/foto/acao-alternancia-apolice-aumento-210607/
TABELA
<TABLE>

Para criarmos nossas tabelas em HTML,

<table>
usamos a tag: <table></table>.

Dentro dela deverá ficar todo o conteúdo que Conteúdo da tabela…

formará a tabela.
Conteúdo da tabela…
Esse conteúdo deverá estar dentro das
linhas e de suas respectivas colunas. Conteúdo da tabela…

</table>
TABELA
<CAPTION>

A tag <caption> </caption> será usada para <table>

inserir o título da tabela.
<caption> Título da tabela
Esse título poderá ser utilizado para
</caption>
identificar o conjunto de dados que a tabela
representa. Conteúdo da tabela…

Conteúdo da tabela…

</table>
TABELA
<TR>
<table>
A tag <tr> </tr> será usada para a criação
<caption> Título da tabela
das linhas existentes na tabela.
</caption>
Dentro das linhas, serão inseridas as
colunas da tabela com os seus respectivos <tr> Linha da tabela...</tr>
conteúdos.
<tr> Linha da tabela...</tr>

<tr> Linha da tabela...</tr>

</table>
TABELA
<TD>
<table>

A tag <td> </td> será usada para a criação <caption> Título da tabela </caption>
das colunas existentes nas linhas da
<tr>
tabela.

Os dados deverão ficar armazenados <td> Conteúdo da coluna </td>

dentro da tag <td>.
<td> Conteúdo da coluna </td>

</tr>

</table>
TABELA
<TH>
<table>

A primeira linha de dados da tabela é <caption> Título da tabela </caption>

considerada uma das mais importantes,
<tr>
porque é nela que identificamos o conjunto
de informações que está armazenado em <th> Nome da coluna </th>
cada coluna.
<th> Nome da coluna </th>
Dessa forma, devemos substituir a tag <td>
pela tag <th>, a diferença visual é que isso </tr>

deixará o nome da coluna centralizado e em

</table>
negrito.
TABELA
<THEAD> <table>

<caption> Título da tabela </caption>

A tag <thead></thead> é usada para
identificar a primeira linha da tabela. <thead>

Em tabelas muito grandes, e que forem <tr>

impressas, essa linha sempre será repetida
<th> Nome da coluna </th>
no início de um nova página impressa,
facilitando assim a identificação dos dados <th> Nome da coluna </th>

ali exibidos. </tr>

</thead>

</table>
TABELA
<TBODY>
<table>
A tag <tbody></tbody> é usada para
<tbody>
armazenar todas as linhas de conteúdo
<tr>
existentes na tabela, representando assim o
corpo da tabela. <td> Conteúdo da coluna </td>

A ideia é organizar os dados agrupando-os <td> Conteúdo da coluna </td>

em uma área específica da tabela.
</tr>

</tbody>

</table>
TABELA
<TFOOT> <table>

A tag <tfoot></tfoot> é usada para <tfoot>

representar a linha de rodapé da sua tabela.
<tr>
Na maioria das vezes usamos o <tfoot>
como uma linha para alguma observação <td> Nota de rodapé </td>
sobre os dados: um comentário, marca de
</tr>
rodapé, algo nesse sentido.

Seu uso é opcional e você encontrará </tfoot>

tabelas sem esse elemento.
</table>
EXEMPLO DE BIBLIOGRAFIA

• CASTRO, Elizabeth; HYSLOP, Bruce. HTML5 e CSS3: Guia prático e visual. 2013.

• DUCKETT, Jon. HTML&CSS – Projete e construa websites. 2014.

• SANDERS, Bill. Smashing Html5. 2012.

• SILVA, Maurício Samy. HTML5 – A linguagem de marcação que revolucionou a Web. 2011.

• SILVA, Maurício Samy. CSS3: Desenvolva aplicações web profissionais com uso dos
poderosos recursos de estilização das CSS3. 2012.

• TERUEL, Evandro Carlos. HTML5 – Guia prático. 2011.

OBRIGADO
/icajai

Copyright © 2021 | Professor Israel Marques Cajai Júnior

Todos os direitos reservados. Reprodução ou divulgação total ou parcial deste documento, é
expressamente proibido sem consentimento formal, por escrito, do professor/autor.