terça-feira, 28 de outubro de 2014

PROJETO FINAL

Faça uma página que contenha um caça-palavras, estilizando o espaço entre letras e demais configurações em CSS. Você pode utilizar configurações de tabela para organizar as linhas e colunas de seu jogo. Não é necessário que haja interatividade com o usuário, ou seja, essa página será estática.

É preciso conter um cabeçalho com as palavras que devem ser procuradas e um tema específico para isso. Você pode adicionar imagens, cores e espaçamentos estilizados.

ENTREGA: Você terá, a partir de agora, 48 horas para entrega de seu caça-palavras.
AVALIAÇÃO: Seu jogo será avaliado mediante interação com o professor e o produto final seguindo os quesitos:

  • Organização do código: indentação, comentários;
  • Visual: clareza dos elementos na tela;
  • Recursos CSS: elementos apresentados em aula 


EXEMPLO:


Bom trabalho!!!

AULA 6 - ESPAÇAMENTO ENTRE BORDA E CONTEÚDO

Para configurar o espaçamento entre uma borda e seu conteúdo utilizamos a propriedade padding:


Propriedade
Descrição
padding-top
Define o espaçamento superior
padding -right
Define o espaçamento direita
padding -bottom
Define o espaçamento inferior
padding -left
Define o espaçamento esquerda

Valores para as propriedades: largura medida em px, cm ou %.
Exemplo:
p {margin-top:1cm; margin-left:5cm; margin-right: 5cm;
text-align:justify;
border-width: thick; border-style:double; border-color: blue;
padding-top: 1cm; padding-left:1cm; padding-right: 1cm; padding-bottom:1cm;
}


Ou padding: 1cm 1cm 1cm 1cm;

AULA 5 - BORDAS COM CSS

Propriedades básicas para configurar bordas:

Propriedade
Descrição
Border-width
Espessura da borda
Border-style
Estilo da borda
Border-color
Cor da borda

Valores para as propriedades:
Border-width: thin,medium,thick, tamanho (2px,2cm,2pt).
Border-style:none,dotted(pontilhado),dashed(tracejada),solid(contínua),double(dupla),
groove(entalhada),ridge(ressalto),inset(baixo relevo),outset(alto relevo),tamanho (2px,2cm,2pt).

Border-color: hexadecimal, nome da cor.

Exemplo:
p {margin-top:1cm; margin-left:5cm; margin-right: 5cm;
text-align:justify;
border-width: medium; border-style:solid; border-color: blue;
  }

p {margin-top:1cm; margin-left:5cm; margin-right: 5cm;
text-align:justify;
border-width: thick; border-style:double; border-color: blue;
}

AULA 4 - MARGENS COM CSS

Com o CSS podemos controlar o espaçamento em volta dos elementos html com a propriedade margin.

Propriedade
Descrição
Margin-top
Define a margem superior
Margin-right
Define a margem direita
Margin-bottom
Define a margem inferior
Margin-left
Define a margem esquerda

Valores para as propriedades: largura medida em px, cm ou %.

Exemplo:
<html>
<head>
<style type="text/css">
  h1 {margin-top: 5cm; margin-left: 3cm;}
  h2 {margin-top: 1cm; margin-left: 4cm;}
p {margin-top:1cm; margin-left:5cm; margin-right: 5cm; text-align:justify;}
</style>
</head>
<body>
<h1> Título com margem superior de 5 cm e esquerda de 3 cm </h1>

<p>
Parágrafo com margem superior de 1 cm, margem esquerda de 5 cm e margem direita de 5 cm.Parágrafo com margem superior de 1cm, margem esquerda de 5 cm e margem direita de 5 cm.Parágrafo com margem superior de 1cm, margem esquerda de 5 cm e margem direita de 5cm.Parágrafo com margem superior de 1 cm, margem esquerda de 5 cm e margem direita de 5 cm. Parágrafo com margem superior de 1 cm, margem esquerda de 5 cm e margem direita de 5 cm.Parágrafo com margem superior de 1 cm, margem esquerda de 5 cm e margem direita de 5 cm.Parágrafo com margem superior de 1 cm, margem esquerda de 5 cm e margem direita de 5 cm.

</p>

<h2> Título com margem superior de 1 cm e esquerda de 4 cm </h2>
</body>
</html>


Salvar como ExMargens.html

AULA 3 - CSS PARA FONTE

Propriedades básicas para configurar fontes :

color
Cor da fonte
Font-family
Tipo de fonte
Font-size
Tamanho da fonte
Fonte-style
Estilo da fonte
Font- weight
negrito
Valores para as propriedades:
Color: código hexadecimal (#FFFFFF), nome da cor (red,blue...).
Font-family: Arial, Verdana ...
Font-size: small, medium, large, tamanho (12 pt, 12px, 12cm).
Font-style: normal, italic, oblique.
Font-weight: normal,bold,lighter, 100, 200,300 …  900.

Exemplo:
<html>
<head>
<style type=”text/css”>
H1 {color: #66FF00;
    Font-family: Adobe Hebrew;
    Font-size: large;
    Font-style:oblique;
    Font-weight: bold;
}
</style>
</head>
<body>
<h1> Título estilizado com CSS </h1>
<h2> Título não estilizado com CSS </h2>
</body>

</html>

sexta-feira, 24 de outubro de 2014

AULA 2 - CSS no HTML

Podemos incorporar regras CSS declarando-as no próprio documento HTML, fazendo com que o CSS defina estilos para essa única página. Esse procedimento é chamado CSS incorporado (interno). Para isso, as declarações CSS deverão estar dentro da tag HTML <head>  </head>, entre a tag <style>  </style>.

Exemplo:
<html>
<head>
<style type=”text/css”>
body {background-color:yellow;}
h1   {font-size:36pt;}
h2   {color:blue;}
p    {margin-left:50px;}
</style>
</head>

<body>

<h1>Título com 36 pt</h1>
<h2>Título em azul</h2>

<p>Esse parágrafo tem margem esquerda de 50px</p>

</body>
</html>


Digite o código acima no NotePad ++ e salvar como exemplo1.html

Altere a linguagem para HTML dentro do Notepad++

quinta-feira, 23 de outubro de 2014

AULA 1 - Fundamentos da Cascade Style Sheet (Folha de Estilo em Cascata)

O CSS - Cascading Style Sheet (Folha de Estilo em Cascata) é uma ferramenta utilizada para a construção da aparência de páginas web. Permite o uso de uma técnica diferente da convencional (html puro), possibilitando uma considerável redução de tempo no trabalho.

A intenção do HTML nunca foi a formatação de páginas web, mas sim a definição de seu conteúdo como no exemplo abaixo:

<h1>Isto é um cabeçalho</h1>
<p>Isto é um parágrafo</p>

Quando as tags como <font> foram adicionadas ao HTML, os desenvolvedores enfrentaram problemas para fazer a formatação de sites com muitas páginas, pois teriam que modificar tag por tag. Para resolver esse problema o CSS foi criado, pois ele define uma única vez um padrão de formatação que pode ser usado por todas as páginas de um site, sem necessidade de repetição. O CSS pode controlar fontes, cores, margens, linhas, alturas, larguras, imagens de fundo e posicionamentos.

SINTAXE BÁSICA

Seletor {propriedade: valor;}

Seletor: tag html afetada pelo estilo CSS. Ex: <p>,<h1> <body>etc.
Propriedade: atributo do elemento html ao qual será aplicado o estilo. Ex: font, color, background etc.

Valor: é a característica atribuída à propriedade. Ex: font tipo Verdana, cor vermelha etc.

Exemplo -> um seletor com uma propriedade
Body { background: #000000; }


Exemplo -> um seletor com mais de uma propriedade
h1{
color: blue;
font-size: 12px;
}

Exemplo -> vários seletores com as mesmas propriedades
H1, h2, h3, h4, h5, h6 {
Color: #FF0000;
}

Boas Vindas

Olá Pessoas,

Sejam bem vindos ao mini-curso "Web Design - Estilos com CSS" voltado aos alunos de Ensino Médio Integrado. As inscrições já foram realizadas com sucesso e a partir desse momento, podemos iniciar. Contudo, é importante lembrarmos de alguns pontos para que seu curso corra de maneira eficaz:

OBJETIVOS

  • Aprender os fundamentos dos estilos CSS;
  • Ampliar os conhecimentos de margens, espaçamentos e bordas em CSS
  • Relacionar os estilos com arquivos HTML;
  • Construir um projeto prático de um Caça-Palavras utilizando as habilidades aprendidas;
PRÉ-REQUISITOS
  • Conhecimento intermediário em HTML, abrangendo tags e suas propriedades;
  • Hábito do uso de ferramentas de edição de códigos;
  • Conceitos básicos em imagens digitais: formatos, edição e posicionamento;
Esse curso tem um perfil de Ensino à Distância, ou seja, através do blog e ferramentas do Google será possível realizar todas as tarefas. Ao final, você terá um produto final utilizando programação web estilizada. Para que possamos iniciar nossas aulas, é preciso:


  1. Criar uma conta no Google para que você possa receber as notificações das aulas.
  2.  Se familiarizar com o uso do disco virtual de compartilhamento Google Drive. Para mais informações acesse: Drive.
  3. Instalar o editor de códigos NotePad++.
Essas são as recomendações para iniciarmos nossos trabalhos. Aguardem mais instruções para começarmos as aulas. Até lá,

Abraços Pessoas!