Scribd
Carregar
24 visualizações22 páginas

Aula 34 HTML 5 e Bootstrap - Components

Enviado por

Jolvani Morgan
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PPTX, PDF, TXT ou leia on-line no Scribd
24 visualizações22 páginas

Aula 34 HTML 5 e Bootstrap - Components

Enviado por

Jolvani Morgan
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PPTX, PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 22

http://getbootstrap.

com/components/

http://www.w3schools.com/
bootstrap/
bootstrap_ref_comp_glyphs.asp
• http://www.caelum.com.br/apostila-html-css-j
avascript/bootstrap-e-formularios-html5
/
• http://www.tekzoom.com.br/monstra-cms-
php-bootstrap/
Cores - 8
• O Curso de HTML5 está de volta com os códigos de cores utilizando o HTML5 e CSS3.
• Algumas tags e parâmetros foram descontinuadas do HTML4 para o HTML5, incluindo o FONT
COLOR e o BGCOLOR da tag BODY. A partir de agora, devemos utilizar o parâmetro STYLE de
qualquer tag e utilizar as configurações de background-color e color do CSS.
• A utilização de cores através de seus nomes (como red, green, blue, etc) é algo bastante
limitado. Por conta disso, vamos aprender nesse vídeo, como utilizar o código para cores RGB.
• Para o código de cores #60453E, por exemplo, temos as quantidades de vermelho/red (60),
verde/green (45) e azul/blue (3E). A junção desses códigos vai gerar uma cor única, em um
espectro que possui milhões de combinações. Cada valor é representado em base
hexadecimal.
• Outra maneira de utilizar cores em CSS é utilizando o modificador rgb(), passando as
quantidades de vermelho, verde e azul em valores representados na base decimal.
• Em HTML5 e CSS3, utilizando o rgba() nas CSS3, podemos ainda incluir a configuração do canal
alpha, que vai de 0 até 1.
• Em HTML5 e CSS3, também podemos criar cores utilizando a representação percentual de
Matiz (Hue), saturação (Saturation) e luminosidade (Brightness) utilizando a função hlsa() das
folhas de estilo.
• De maneira similar, temos também a função hlsa() para indicar também o canal alpha.
• Podemos também colocar imagens no fundo do site utilizando o parâmetro background e
utilizar a função url() do CSS para carregar uma imagem.
Projetando o Site – CORES 8
• Cores: Css3 rgba = cores rgb + a que representa a
transparência
• A = canal alfa
• Valores:
• 0e1

• 0 = totalmente transparente
• Valores: 0, 0.1, 0.2, 0.3 ... 1;
• 1 = sem transparência
Projetando o Site – CORES 8
• Representando as cores:

• + usando os Parâmetros
• Cores: Matiz, saturação, luminosidade.
– H-Hue S-Saturation B-Bright

• Porcentagem
Projetando o Site - CORES 8
• Representando as cores:

• + usando os Parâmetros
• Cores: Matiz, saturação, luminosidade.
– H-Hue S-Saturation B-Bright

• Porcentagem
Projetando o Site - CORES 8
• + usando os Parâmetros
• Cores: Matiz, saturação, luminosidade.
– H-Hue S-Saturation B-Bright

– Podemos aplicar o canal Alfa;


Imagens em HTML5 - 9
• Como inserir uma imagem em HTML5? Nessa aula, veremos como utilizar a tag IMG para
inserir fotos em um site feito em HTML5.
• Qual a diferença entre PNG e JPG? O formato PNG é ligeiramente maior, mas possibilitam
transparências. O formato JPEG é mais otimizado, pois suporta compressão sem uma perda
perceptível na qualidade visual.
• Utilizando os parâmetros WIDTH ou HEIGHT, você pode redimensionar uma imagem pelo
HTML. Porém, a melhor maneira de se diminuir o tamanho do arquivo é utilizar um editor de
imagens para realizar o redimensionamento.
• Outra coisa muito importante é utilizar a opção de “Exportar para Web” do seu editor de
imagem. Isso gera um arquivo menor ainda, mais otimizado para ser utilizado em sites
construídos com HTML5. Durante a aula, será mostrado como reduzir um arquivo de exemplo
em praticamente 300KB.
• Como carregar uma imagem em HTML5 que esteja em uma outra pasta?
• Novos parâmetros FIGURE e FIGCAPTION. O HTML5 ganhou um caráter semântico, e utilizar
legendas de imagens em HTML5 é um ótimo recurso para otimizar seu site para mecanismos
de busca, técnicas conhecidas como SEO.
• Aula do Curso de HTML5 criado pelo professor Gustavo Guanabara para o portal
CursoemVideo.com.
Imagens em HTML5 - 9
• Exemplo

• Png – transparente....
• Png > que jpg
• Não usaremos mais width=“300” para
diminuir o tamanho da imagem, e sim

• Trate as imagens com photoshop


Imagens em HTML5 - 9
• Adiciona-se a tag <figure>

• Dessa forma pode-se usar o caption, ou


seja legenda
– Não precisa ser um texto simples....
Imagens em HTML5 - 9
• Adiciona-se a tag <figure>

• Dessa forma pode-se usar o caption, ou


seja legenda
– Não precisa ser um texto simples....pode ser
composto
Imagens em HTML5 - 9
• Dessa forma pode-se usar o caption, ou
seja legenda
– Não precisa ser um texto simples....pode ser
composto
Formatando Imagens com CSS - 10
• Formatar imagens utilizando folhas de estilo CSS é algo muito simples e requer o conhecimento de alguns parâmetros
específicos em HTML5 e CSS3. Nessa aula, você verá como criar um efeito de transparência e animação com CSS em
uma legenda que vai flutuar sobre a foto, que também terá uma elegante borda simulando um retrato sobre a mesa.
• Estilos CSS em arquivos separados
Quando as formatações com folhas de estilo CSS começam a ficar grandes demais, o ideal é trabalhar com arquivos
CSS externos. Para isso, utilizamos a tag LINK com o parâmetro REL de valor STYLESHEET.
• Comentários em CSS
Para comentar pedaços de código em CSS, utilizamos os caracteres /* e logo após a descrição do comentário,
colocamos */
• Referenciando CLASS e ID
A diferença entre CLASS e ID dentro das CSS é na referência. Para usar o CLASS, utilizamos o caractere de ponto (.) e
para o ID, utilizaremos a cerquilha (#)
• Tamanho de objetos em CSS
Utilizando os parâmetros WIDTH (largura) e HEIGHT (altura), você pode modificar o tamanho de um objeto utilizando
CSS.
• Posição de objetos em CSS
Utilizando os parâmetros TOP (topo) e LEFT (esquerda)
• Utilizando o POSITION em CSS – Diferença entre RELATIVE e ABSOLUTE
Existem dois tipos de posicionamento para CSS: com o POSITION RELATIVE, ele terá a localização feita em relação à
sua posição atual. Para POSITION ABSOLUTE, ele terá a localização feita em relação a todo o conteúdo.
• CSS com BOX-SIZING com o parâmetro BORDER-BOX.
• Modificando opacidade com CSS utilizando o parâmetro OPACITY.
• Utilizando o HOVER em um objeto com CSS vai fazer com que uma formatação específica
• TRANSITION com CSS adiciona efeitos de transição ao modificar características visuais em um objeto.
Formatando Imagens com CSS - 10
• Adicionamos uma class...

Aumentar e diminuir o
navegador
Formatando Imagens com CSS - 10
• Adicione:
• Veja o que aconteceu – subiu ao topo...
Formatando Imagens com CSS - 10
• Formatar 1 2

• 4 Adicione...
Formatando Imagens com CSS - 10
• Complete com 5
Listas em HTML5 - 11
• Menus e listas em HTML5.
• Nessa aula, vamos aprender como criar um menu em HTML5 utilizando a nova
tag NAV.
• Além disso, veremos como criar listas em HTML5 utilizando as tags OL UL e LI.
• A tag OL (Ordered lists) vai criar uma lista ordenada. Utilizando os valores do
parâmetro TYPE, você pode criar uma lista ordenada numérica (1), alfabética
(a/A) ou em algarismos romanos (i/I). O parâmetro START da tag OL vai indicar
onde vai começar a contagem dos itens. O parâmetro START aceita apenas
valores numéricos, independente da maneira utilizada para numerar.
• A tag UL (Unordered lists) vai criar uma lista com demarcadores ou lista não-
ordenada. O parâmetro TYPE para OL suporta os valores CIRCLE, SQUARE ou
DISC. Para a tag UL, o parâmetro START simplesmente não funciona.
• Podemos também criar hierarquia com listas, utilizando tags OL e UL
aninhadas. No vídeo, nós veremos como criar um menu utilizando uma lista.
Listas em HTML5 - 11
• Tag <nav> ....
Menu com CSS3- 13
• http://www.siteparaempresas.com.br/
blog/?p=4354
Projetando o Site
• Uma mesma sessão pode ter vários artigos
• <section>
– <article>
– </article>
– <article>
– </article>
• </section>
Projetando o Site
• Uma mesma sessão pode ter vários artigos
• <section>
– <article>
– </article>
– <article>
– </article>
• </section>

Você também pode gostar