Programação para WEB I - IFSC Campus...
Transcript of 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/
Lara Popov Zambiasi Bazzi OberderferProgramação para WEB IProgramação para WEB I 2
Arquivo externo
● Dentro da tag head:
<link rel=”stylesheet” href=”estilo.css”>
Lara Popov Zambiasi Bazzi OberderferProgramação para WEB IProgramação para WEB I 3
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.
Lara Popov Zambiasi Bazzi OberderferProgramação para WEB IProgramação para WEB I 4
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”.
Lara Popov Zambiasi Bazzi OberderferProgramação para WEB IProgramação para WEB I 5
Exemplo de css
h1 {
font-family: serif;
}
h2 {
font-family: sans-serif;
}
p {
font-family: monospace;
}
Lara Popov Zambiasi Bazzi OberderferProgramação para WEB IProgramação para WEB I 6
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.
Lara Popov Zambiasi Bazzi OberderferProgramação para WEB IProgramação para WEB I 7
Continuando o exemplo...
body{
font-family: "Arial",
"Helvetica", sans-serif;
}
Lara Popov Zambiasi Bazzi OberderferProgramação para WEB IProgramação para WEB I 8
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)
Lara Popov Zambiasi Bazzi OberderferProgramação para WEB IProgramação para WEB I 9
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.
Lara Popov Zambiasi Bazzi OberderferProgramação para WEB IProgramação para WEB I 10
Continuando o exemplo...
p.normal {
font-variant:normal;
}
p.small {
font-variant:small-caps;
}
Lara Popov Zambiasi Bazzi OberderferProgramação para WEB IProgramação para WEB I 11
Continuando o exemplo...
<h1>Testando propriedades das fontes</h1>
<p class="normal">Aula de Desenvolvimento web</p>
<p class="small">Aula de Desenvolvimento web</p>
Lara Popov Zambiasi Bazzi OberderferProgramação para WEB IProgramação para WEB I 12
Alinhamento e Decoração do texto
● Text-align: especifica o alinhamento horizontal do texto em um elemento.
text-align: left|right|center|justify;
Lara Popov Zambiasi Bazzi OberderferProgramação para WEB IProgramação para WEB I 13
Continuando o exemplo...
p.direita{
text-align:right;
}
p.esquerda{
text-align:left;
}
p.centro{
text-align:center;
}
p.justificado{
text-align:justify;
}
Lara Popov Zambiasi Bazzi OberderferProgramação para WEB IProgramação para WEB I 14
Continuando o exemplo...
<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>
Lara Popov Zambiasi Bazzi OberderferProgramação para WEB IProgramação para WEB I 15
Continuando o exemplo...
Lara Popov Zambiasi Bazzi OberderferProgramação para WEB IProgramação para WEB I 16
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;
Lara Popov Zambiasi Bazzi OberderferProgramação para WEB IProgramação para WEB I 17
Continuando o exemplo...
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>
Lara Popov Zambiasi Bazzi OberderferProgramação para WEB IProgramação para WEB I 18
Continuando o exemplo...
Lara Popov Zambiasi Bazzi OberderferProgramação para WEB IProgramação para WEB I 19
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
Lara Popov Zambiasi Bazzi OberderferProgramação para WEB IProgramação para WEB I 20
Border-width
● Mais exemplos em:● http://www.w3schools.com/cssref/playit.
asp?filename=playcss_border-width&preval=medium
Lara Popov Zambiasi Bazzi OberderferProgramação para WEB IProgramação para WEB I 21
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
Lara Popov Zambiasi Bazzi OberderferProgramação para WEB IProgramação para WEB I 22
Border-style
● Mais exemplos em:● http://www.w3schools.com/cssref/playit.
asp?filename=playcss_border-style&preval=dotted
Lara Popov Zambiasi Bazzi OberderferProgramação para WEB IProgramação para WEB I 23
Border-color
● Mais exemplos em:● http://www.w3schools.com/cssref/playit.
asp?filename=playcss_border-color
Lara Popov Zambiasi Bazzi OberderferProgramação para WEB IProgramação para WEB I 24
Tabela de cores
● http://www.w3schools.com/html/html_colornames.asp
Lara Popov Zambiasi Bazzi OberderferProgramação para WEB IProgramação para WEB I 25
Lara Popov Zambiasi Bazzi OberderferProgramação para WEB IProgramação para WEB I 26
Margin, border, padding, content
marginborder
padding
conteúdo
Lara Popov Zambiasi Bazzi OberderferProgramação para WEB IProgramação para WEB I 27
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
Lara Popov Zambiasi Bazzi OberderferProgramação para WEB IProgramação para WEB I 28
Continuando o exemplo...
p{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
Lara Popov Zambiasi Bazzi OberderferProgramação para WEB IProgramação para WEB I 29
conteudo
padding
Borda
padding-top
padding-bottom
padding-rightpadding-left
Lara Popov Zambiasi Bazzi OberderferProgramação para WEB IProgramação para WEB I 30
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;
}
Lara Popov Zambiasi Bazzi OberderferProgramação para WEB IProgramação para WEB I 31
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
Lara Popov Zambiasi Bazzi OberderferProgramação para WEB IProgramação para WEB I 32
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.
Lara Popov Zambiasi Bazzi OberderferProgramação para WEB IProgramação para WEB I 33
Exercícios de Fixação
Lara Popov Zambiasi Bazzi OberderferProgramação para WEB IProgramação para WEB I 34
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.