Programação e Designer para WEB

Transcrição

1 Programação e Designer para WEB Html Xhtml CSS Prof. Rodrigo Rocha prof.rodrigorocha@yahoo.com

2 IIS C:\inetpub\www Apache \var\www Diretórios em servidor web Arquivos colocados nestes diretórios são lidos pela raiz do site: Exemplo: c:\inetpub\www\seila.html

3 Utilizando XHTML é simples, você é capaz de fazer tudo com algumas tags XHTML é ordenado e estruturado Existem milhares de tutoriais e referências disponíveis Sequindo os padrões, seu trabalho fica mais simples, consistente e confiável Independente de dispositivos Os usuários podem acessar através de diferentes equipamentos

4 Navegadores não são impressoras Atenção A página não tem tamanho fixo A página não tem comprimento Os usuários podem mudar o tamanho da letra Tamanho da tela pode ser de vários tamanhos Documento ajustável

5 Criado por Tim Berners-Lee do CERN HTML Padrão aberto World Wide Web Consortium ( História 1992 HTML first defined 1994 HTML Netscape specific non-standard HTML 1996 HTML 3.2, compromise version 1997 HTML 4.0, separates content from presentation 1998 XML standard for writing Web languages 2000 XHTML 1.0, XML compliant HTML 2002 XHTML Anunciada as especificações do HTML5

6 XHTML é uma versão modificada do HTML em conformidade com o padrão XML Separa conteúdo da apresentação Conteúdo: XHTML Apresentação: Cascading Style Sheets (CSS) Elementos adicionais podem ser definidos Todos os elementos devem estar entre tags Ex: <p>teste</p> XHTML Elementos vazios contém sua própria tag final Ex: <br /> Valores de atributos devem estar entre aspas Mais especificações:

7 XHTML

8 Exemplo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html> <head> <title> Titulo que aparece no navegador </title> </head> <body> <h1> Titulo interno da homepage</h1> <p> texto interno da homepage </p> </body> </html>

9 Hierarquia

10 Clausula DOCTYPE Declara a versão específica do HTML ou XHTML que será utilizada na página Usado pelo navegador para decidir como processar a página 3 Tipos Transitional Strict Mais flexível Permite uma navegação por browsers mais antigos ou que não suportam CSS. Mais rígido e permite um código mais limpo. Não são permitidos erros estruturais e de apresentação e o uso do CSS é obrigatório. FrameSet Usado para documentos que utilizam frames Primeira linha do arquivo

11 Exercício Criar uma página com o editor <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN " O uso do Strict encoraja a utilização de padrões na codificação Validadores marcarão erros lógicos no seus métodos Seu CSS trabalhará melhor e será mais previsível

12 Consistem em 3 partes Uma tag inicial, que pode conter atributos Conteúdo Tag final Exemplo <p id= nome >Primeiro teste de tag</p> Elementos Especificações da tag p (W3schools)

13 De ser sempre utilizado dentro da tag do elemento 3 Tipos de atributos Opcional: depende do tipo de elemento Padrão: id, class, title, style, dir, lang, xml:lang Atributos Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup Utilizados em scripts

14 Elementos vazio Alguns elementos não têm conteúdo, portanto não po <img src= photo.jpg /> <br /> <hr /> <link rel="stylesheet" type="text/css" href= main.css" /> Devido ao fato que o XHTML exige a tag de final para todos os elementos, os elementos vazios possuem o final nela mesma. (barra no final) <br />

15 Estrutura Estrutura básica <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <TITLE>Titulo do Documento</TITLE> <style type="text/css"> /* Estilos CSS */ </style></head> <BODY> texto, imagem, links,... </BODY> </HTML>

16 Tags <p> texto </p> Parágrafo de texto, ao final pula linha Podemos também alterar o alinhamento do texto <p style="text-align: left;"></p>texto à esquerda </p> <p style="text-align: right;"></p>texto à direita</p> <p style="text-align: justify;"></p>texto justificado</p> <p style="text-align: center;"></p>texto centralizado</p> <div> texto </div> Diferente do <p> ele não pula linha no parágrafo Usado para agrupar elementos que utilizem o mesmo estilo <br /> Quebra linha

17 Listas Lista não ordenada <UL> <LI>Item 1 <LI>Item 2 </UL> Lista Ordenada <OL> <LI>Item 1 <LI>Item 2 </UL>

18 Tags <hr /> Desenha uma linha separadora <center></center> Posiciona texto, imagens no centro Formatando textos <b>texto</b> ou <strong>texto</strong> Texto em negrito <i>texto</i> ou <em>texto</em> Texto em itálico <sup></sup> Texto sobescrito <sub></sub> Texto subscrito <delete></delete> Texto deletado

19 Tags Links <a href= pagina_que_vou.html >texto</a> A palavra texto é um link para pagina_que_vou.html <a href= pagina_que_vou.html ><img src= figura.jpg ></a> A imagem é um link para pagina_que_vou.html Tabela <table border= 1 > </table> Contrir tabelas com borda de 1pixel <tr></tr> Cria uma linha na tabela <td></td> Cria uma nova célula

20 Tags Tabela Linha - tag <tr></tr> Align Define o alinhamento horizontal (left, right ou center) Valign Define o alinhamento vertical (left, right ou center) Tabela Célula - tag <td></td> Colspan Mescla um certa quantidade de colunas rowspan Mescla um certa quantidade de linhas

21 Tabelas tag <table> </table> atributos Width Define a largura da tabela em pixels ou porcentagem de ocupação da tela (ex. 80%) Border Define o tamanho da borda da tabela Cellpadding Define a distância da borda até o texto Cellspacing Define o espaço entre as células Tags Tag <SPAN> Aplica um estilo (class/style) em um bloco html Inserindo Imagem <IMG SRC="imagem" ALT="descrição" WIDTH="largura" HEIGHT="altura">

22 Conteúdo e Formatação são partes separadas Conceito de CSS é separar conteúdo da apresentação CSS permite definir o estilo separadamente, e você pode aplicá-lo em conteúdos da página CSS A edição de conteúdo se torna mais fácil e a formatação se torna mais consistente Fácil de utilizar Versões CSS CSS1 CSS1 Dezembro1996 CSS2 Maio 1998 CSS3 Abril 2001 Ferramentas para trabalhar com CSS estão incorporadas nos editores HTML Melhora a manutenção e gerenciamento do site Funciona na maioria dos navegadores

23 CSS Estilo Seletor Propriedade Valor p { font-family: times; } Cuidado com a pontuação: A propriedade é seguida de (:) e o valor e acompanhado de ponto e vírgula

24 5 opções para ligar o CSS ao XHTML inline CSS usado para aplicar o estilo em uma determinada tag usando o atributo style Local <font style="font-size:24px; color:#fff; background-color:#006; textalign:center; >Teste</font> Embedded (Incorporado) CSS Usado para aplicar o estilo na página toda, utilizando o estilo na tag <head> <style>  a:hover{color:#00ff00; text-decoration:none;} a:active{color:#ff0000;} </style>

25 Local 5 opções para ligar o CSS ao XHTML CSS Externo Usado para aplicar o estilo no seu website inteiro, salvando o código CSS em um arquivo externo e utilizando a tag <link> da seção <head> Arquivo estilo.css body{ } font-family: Arial; font-size: 12px; p{ font-family: Verdana; } Link font-weight: normal; color: #0000FF; <html> <head> <title>minha Página com CSS Externo</title> <link href="/estilo.css" rel="stylesheet" type="text/css" /> </head> <body>

26 Local 5 opções para ligar o CSS ao XHTML Importado Parecido com o externo, mas utiliza o dentro da tag <style> ou arquivo CSS Atributos e Tags Usa os atributos class e id e as tags <span> e <div> para controlar o estilo Você pode ter um mesmo elemento sendo apresentado com estilo diferente Podemos utilizar classe (precedido de ponto) ou id (precedido de #) Exemplo: (CSS) #titulo { background-color: #ccc; padding: 1em }.textointerno{ color: red; font-weight: bold; } (Aplicando) <div id= titulo"> <h1>receita de Bolo</h1> <p>em desenvolvimento</p> <p class= textointerno">ate o final do ano sai</p> </div>

27 Modelo de caixa Margin Define as dimensões das margens Margin-top:20px; Margin-right:30px; Margin-bottom:5px; Margin-left:10px;

28 Modelo de caixa Padding Define as dimensões entre o conteúdo e a borda Padding-top:20px; Padding-right:30px; Padding-bottom:5px; Padding-left:10px;

29 Propriedade Fonts Font Propriedade Color Font-family Font-style Font-size Font-weight Função cor da fonte (pode ser Hexa, Rgb ou nome) Tipo da fonte: arial, courier Estilo do texto: italic, normal Tamanho do texto: 12px, 16px, 24px quanto mais escura a fonte é:normal, bold, bolder, lighter,

30 Text Text Propriedade Text-align Text-justify Text-align-last Min(Max)-font-size Vertical-align Text-indent Line-break Text-space Text-wrap White-space Text-spacing Valor alinhamento: start, end, left, center, justify auto, inter-word, inter-ideograph, kashida auto, start, end, center, justify, size 10pt, 20pt, etc auto, top, sub, super, central, middle, bottom length, percentage normal, strict (white space in text stream) normal, honor normal, none normal, pre, nowrap (character spacing) normal, length

31 Color CSS setando propriedade de cores Propriedade Função Color cor do texto: nome, hexa, RGB Background cor do fundo: nome, hexa,rgb Background-repeat efeito: repeat, repeat-x/y, no-repeat Opacity transparência: 0.0 fully transparent to 1.0 Color-profile modelo de cor: RGB, srgb, URL Rendering-intent perfil de cor: auto, perceptual, saturation

32 HTML - Exercício Criar um site de revenda de veículos, que mostre a foto do carro e seu valor. E agora, acabou de chegar mais carros???? Como atualizamos este site??? Contratamos um estagiário?!?!?!?!?!?