HTML




MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
Formatação de texto
   •   Cor
   •   Tags básicas
   •   Formatação de parágrafo
   •   Formatação de fonte




MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
CORES
   • Um recurso essencial no desenvolvimento
     de páginas para web são as cores.
   • As cores, se bem utilizadas, causam uma
     experiência excelente para o internauta
     que acessa sua página.
   • As cores tem a capacidade de despertar
     diferentes emoções e sensações em
     nossos cérebros (pesquisar sobre
     pscologia das cores).

MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
CORES
   • Para a criação de páginas web utilizamos
     o padrão de cores RGB
   • R – Red
   • G – Green
   • B – Blue
   • Sua utilização em HTML pode ser com
     seu nome em inglês ou seu valor
     hexadecimal.
MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
CORES
   • Valores em inglês:
      – Red
      – Green
      – Blue
   • Valores Hexadecimal:
      – #FF0000
      – #00FF00
      – #0000FF

MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
CORES
   • Utilizando os valores HEXADECIMAL
     temos um conjunto do # + 6 elementos:
   • #FF0000
   • Cada 2 elementos desse conjunto
     representa um valor RGB

   •#FF0000
MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
CORES
   • Cada elemento pode receber um valor
     que vai de 0(sem a cor) até F(a cor
     utilizada no máximo)
   • 0123456789ABCDEF
   • A vantagem de se utilizar dos valores
     hexadecimais é o alcance de tonalidades
     que dificilmente são representadas por
     palavras.

MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
Tags Básicas
 <b> Teste </b>                      Teste
 <i> Teste </i>                      Teste
 <s> Teste </s>                      Teste
 <u> Teste </u>                      Teste
 <b><i><u>Teste</u></i></b> Teste




MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
Formatação de Parágrafo
   • É utilizada através do conjunto de tags
     <hX> onde x vai de 1 até 6.
   • Formata o texto com tamanhos
     predefinidos e com uma quebra de linha
     automática após a finalização da tag:
          <h1> ... </h1>      <h2> ... </h2>
          <h3> ... </h3>      <h4> ... </h4>
          <h5> ... </h5>      <h6> ... </h6>


MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
Formatação de fonte
   • A tag para formatação de fonte é a <font>.
   • Ela possui parâmetros que nos permite
     alterar a cor, o tamanho e o tipo da fonte.
   • Esses parâmetros podem ser
     combinados.
   • <font color=“”>     cor em inglês ou sua
     codificação hexadecimal.
   • <font face=“”>     nome do tipo de fonte
   • <font size=“”>     tamanho de 1 à 7
MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
Formatação de fonte
   <font size=“3” color=“red”> Teste </font>   Teste
   <font color=“red” face=“comic sans ms”>
   Teste </font>                               Teste
   <font color=“green” face=“courier new”
   size=“7”> <b> Teste </b> </font>            Teste




MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
Exercícios
   Construa uma página da web onde serão
     desenvolvidos os exercícios abaixo
   • 1) Escreva a frase “Meu Brasil brasileiro” com
     cada palavra com um tipo e uma cor diferente.
   • 2) Escreva a frase “Um país de várias culturas,
     raças, povos, nações, um mundo dentro de um
     país, um país dentro de um mundo” utilizando
     negrito e itálico para destacar as palavras
     culturas / raças / povos / nações / mundo .

MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS

HTML - Cores Fontes Parágrafos

  • 1.
    HTML MICROCAMP AMERICANA –WEB DEVELOPER – HTML / CSS
  • 2.
    Formatação de texto • Cor • Tags básicas • Formatação de parágrafo • Formatação de fonte MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
  • 3.
    CORES • Um recurso essencial no desenvolvimento de páginas para web são as cores. • As cores, se bem utilizadas, causam uma experiência excelente para o internauta que acessa sua página. • As cores tem a capacidade de despertar diferentes emoções e sensações em nossos cérebros (pesquisar sobre pscologia das cores). MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
  • 4.
    CORES • Para a criação de páginas web utilizamos o padrão de cores RGB • R – Red • G – Green • B – Blue • Sua utilização em HTML pode ser com seu nome em inglês ou seu valor hexadecimal. MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
  • 5.
    CORES • Valores em inglês: – Red – Green – Blue • Valores Hexadecimal: – #FF0000 – #00FF00 – #0000FF MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
  • 6.
    CORES • Utilizando os valores HEXADECIMAL temos um conjunto do # + 6 elementos: • #FF0000 • Cada 2 elementos desse conjunto representa um valor RGB •#FF0000 MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
  • 7.
    CORES • Cada elemento pode receber um valor que vai de 0(sem a cor) até F(a cor utilizada no máximo) • 0123456789ABCDEF • A vantagem de se utilizar dos valores hexadecimais é o alcance de tonalidades que dificilmente são representadas por palavras. MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
  • 8.
    Tags Básicas <b>Teste </b> Teste <i> Teste </i> Teste <s> Teste </s> Teste <u> Teste </u> Teste <b><i><u>Teste</u></i></b> Teste MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
  • 9.
    Formatação de Parágrafo • É utilizada através do conjunto de tags <hX> onde x vai de 1 até 6. • Formata o texto com tamanhos predefinidos e com uma quebra de linha automática após a finalização da tag: <h1> ... </h1> <h2> ... </h2> <h3> ... </h3> <h4> ... </h4> <h5> ... </h5> <h6> ... </h6> MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
  • 10.
    Formatação de fonte • A tag para formatação de fonte é a <font>. • Ela possui parâmetros que nos permite alterar a cor, o tamanho e o tipo da fonte. • Esses parâmetros podem ser combinados. • <font color=“”> cor em inglês ou sua codificação hexadecimal. • <font face=“”> nome do tipo de fonte • <font size=“”> tamanho de 1 à 7 MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
  • 11.
    Formatação de fonte <font size=“3” color=“red”> Teste </font> Teste <font color=“red” face=“comic sans ms”> Teste </font> Teste <font color=“green” face=“courier new” size=“7”> <b> Teste </b> </font> Teste MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
  • 12.
    Exercícios Construa uma página da web onde serão desenvolvidos os exercícios abaixo • 1) Escreva a frase “Meu Brasil brasileiro” com cada palavra com um tipo e uma cor diferente. • 2) Escreva a frase “Um país de várias culturas, raças, povos, nações, um mundo dentro de um país, um país dentro de um mundo” utilizando negrito e itálico para destacar as palavras culturas / raças / povos / nações / mundo . MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS