programação para web i - ifsc campus...

Lara Popov Zambiasi Bazzi OberderferProgramação para WEB IProgramação para WEB I 1

Programação para WEB IProgramação para WEB I

HTML, CSS e JavaScript

Contato: <[email protected]>Site: http://professores.chapeco.ifsc.edu.br/lara/


Arquivo externo

● Dentro da tag head:

<link rel=”stylesheet” href=”estilo.css”>


Qual a dirença de charset=utf-8 e charset=iso-8859-1?

● O charset é utilizado para arrumar a acentuação do site. Se todo seu site for em uma linguagem estática (HTML, sem puxar dados de banco de dados), então deixe como charset=utf-8.

● UTF-8 (8-bit Unicode Transformation Format) é uma codificação de caracteres que implementa o padrão UNICODE utilizando uma quantidade variável de bytes (de 1 a 4). Esta se tornando o padrão para a representação e armazenamento de textos.

● Agora, se estiver utilizando PHP, ASP, Banco de Dados... daí sim é que terá problemas com o charset do site. Sempre tente deixá-lo como charset=utf-8. Neste caso, se os acentos ficarem todos errados, daí mude para o charset=iso-8859-1.


Propriedades Tipográficas e Fontes

● O padrão dos navegadores exibem texto em “serif”. As fontes mais conhecidas são “Times New Roman” e “Times”, estas são chamadas de fontes serifadas, pelos seus ornamentos em suas terminações.

● Podemos alterar a família de fontes para “sans-serif” (sem serifas), que contém: “Arial”e “Helvetica”.

● Podemos também utilizar as famílias: “monospace” como a “Courier”.


Exemplo de css

h1 {

font-family: serif;

}

h2 {

font-family: sans-serif;

}

p {

font-family: monospace;

}


Fonte padrão

● É possível, e muito comum, declararmos o nome de algumas fontes que gostaríamos de verificar se existem no computador, permitindo que tenhamos um controle melhor da forma como o conteúdo será exibido. Usamos para isso fontes “seguras” por serem bem populares.


Continuando o exemplo...

body{

font-family: "Arial",

"Helvetica", sans-serif;

}


Fontes, outras propriedades:

● Font-style, que podem ser:– Normal – font-style: normal;

– Itálico - font-style: italic;

– Oblíqua - font-style: oblique;

● Font-size (tamanho da fonte)


Fontes, outras propriedades:

● Font-variant, que podem ser:– Normal – estilo normal;

– Small-caps – estilo fonte pequena caps;

– initial – escolhe a opção default;

– Inherit – herda a mesma opção do elemento pai.



p.normal {

font-variant:normal;

}

p.small {

font-variant:small-caps;

}



<h1>Testando propriedades das fontes</h1>

<p class="normal">Aula de Desenvolvimento web</p>

<p class="small">Aula de Desenvolvimento web</p>


Alinhamento e Decoração do texto

● Text-align: especifica o alinhamento horizontal do texto em um elemento.

text-align: left|right|center|justify;



p.direita{

text-align:right;

}

p.esquerda{

text-align:left;

}

p.centro{

text-align:center;

}

p.justificado{

text-align:justify;

}



<h1>Testando propriedades de alinhamento</h1>

<p class="direita">Você já viu um site que não possui nenhuma imagem? E portal que não tenha publicidade? E menu, acessou algum site que não possua menu de navegação? Pensando nisso, darei sequência ao artigo anterior, quando mostrei como montar um layout responsivo.</p>

<p class="esquerda">Você já viu um site que não possui nenhuma imagem? E portal que não tenha publicidade? E menu, acessou algum site que não possua menu de navegação?</p>

<p class="centro">Pensando nisso, darei sequência ao artigo anterior, quando mostrei como montar um layout responsivo. Hoje vou mostrar como criar o menu, as imagens e a publicidade. Vamos começar vendo como trabalhar com imagens em um layout responsivo.</p>

<p class="justificado">Para definirmos qual o bloco de publicidade será exibido, nós trabalharemos com base na resolução de tela do usuário. Usaremos apenas CSS para criarmos a rotina lógica de exibição. Não é necessário nenhum Javascript para isso.</p>


Espaçamento dentro do texto

● tamanho da altura da linha:– line-height: 3px;

● tamanho da espaço entre cada linha:– letter-spacing: 3px;

● tamanho do espaço entre cada palavra:– word-spacing: 5px;

● tamanho da margem da primeira linha do texto:– text-indent: 30px;



p.espacamento{

line-height: 50px;

letter-spacing: 10px;

word-spacing: 5px;

text-indent: 30px;

}

<h1>Testando propriedades de espaçamento</h1>

<p class="espacamento">Você já viu um site que não possui nenhuma imagem?</p>


Bordas

● As propriedades que podem ser definidas, são (em ordem):

● border-width, border-style, e border-color

● Border-width: tamanho● Border-style: estilo● Border-color: cor


Border-width

● Mais exemplos em:● http://www.w3schools.com/cssref/playit.

asp?filename=playcss_border-width&preval=medium


Border-style

● None ou hidden - valor default● Dotted - pontilhada● Dashed - risquinhos● Solid - solida● Double - dupla● Groove- efeito 3D● ridge - efeito 3D● inset - efeito 3D● outset - efeito 3D


Border-style


asp?filename=playcss_border-style&preval=dotted


Border-color


asp?filename=playcss_border-color


Tabela de cores

● http://www.w3schools.com/html/html_colornames.asp


Margin, border, padding, content

marginborder

padding

conteúdo


PADDING

● A propriedade padding é utilizada para definir uma margem interna em alguns elementos (por margem interna entende-se a distânciaentre o limite do elemento, sua borda, e seu respectivo conteúdo) e tem as propriedades:– Padding-top– Padding-right– Padding-bottom– Padding-left



p{

width:220px;

padding:10px;

border:5px solid gray;

margin:0px;

}


conteudo

padding

Borda

padding-top

padding-bottom

padding-rightpadding-left


padding

● Se passados 4 valores, serão aplicados respectivamente, top, right, bottom e left, para facilitar, basta lembrar em sentido horário.

p {

padding: 10px 20px 15px 5px;

}


margin

● A propriedade margin é bem parecida com padding, exceto que ela adiciona espaço após o limite do elemento, ou seja, um espaçamento além do elemento em si e tem as propriedades:– margin-top– margin-right– margin-bottom

– margin-left


Margin e padding

● Há ainda uma maneira de permitir o navegador defina qual será a dimensão da propriedade padding ou margin conforme o espaço disponível na tela: definimos o valor AUTO para a margem ou o espaçameno que quisermos.


Exercícios de Fixação


Referências Bibliográficas

● Caelum Cursos. Desenvolvimento Web com HTML, CSS e JavaScript. Disponível em: https://www.caelum.com.br/. Acesso em: 21/05/2014.

programação para web i - ifsc campus...

Documents