Post on 26-Jun-2015
Técnicas de Programação
HTML, XHTML e CSSHTML, XHTML e CSSEduardo Mendes
Aula 1Parte IParte I
O que você escreve...<html>
<head>
<title>PHP Drinks</title>
<head>
<body>
<h1>Bem-vindo ao PHP Drinks</h1>
<img src=“drinks.gif”/><img src=“drinks.gif”/>
<p>
Prove uma de nossas bebidas e relaxe ao som
de <em>Dance Dance</em>.
</p>
<h2>Localização</h2>
<p>
Você pode nos encontrar no centro da Vila Web.
</p>
</body>
</html>
... e o que o navegador gera...
Comparando<html>
<head>
<title>PHP Drinks</title>
</head>
<body>
<h1>Bem-vindo ao PHP Drinks</h1>
<img src=“drinks.gif”/>
<p>
Prove uma de nossas bebidas e
relaxe ao somde
<em>Dance Dance</em>.
</p>
<h2>Localização</h2>
<p>
Você pode nos encontrar no
centro da Vila Web.
</p>
</body>
</html>
Criando uma página HTML
Criando uma página HTML
� Criar um arquivo HTML usando um editor de texto
� Digitar o conteúdo do guardanapo
� Salvar como “index.html”
� Abrir o arquivo “index.html” em um navegador
Criando uma página HTML
Salvando
Primeiro test drive!
Adicionando os marcadoresCafeteria Megasena
Café expresso R$ 1,50
O melhor café
Cappucino R$ 3,50
O melhor Capuccino
Café com Leite R$ 2,00
O melhor Café com leite
Pingado R$ 1,50
O melhor pingado
Feito<h1>Cafeteria Megasena</h1>
<h2>Café expresso R$ 1,50</h2>
<p>O melhor café</p>
<h2>Cappucino R$ 3,50</h2>
<p>O melhor Capuccino</p>
<h2>Café com Leite R$ 2,00</h2>
<p>O melhor Café com leite</p>
<h2>Pingado R$ 1,50</h2>
<p>O melhor pingado</p>
Concluindo...<html>
<head>
<title>Cafeteria Megasena</title>
</head>
<body>
<h1>Cafeteria Megasena</h1>
<h2>Café expresso R$ 1,50</h2>
<p>O melhor café</p><p>O melhor café</p>
<h2>Cappucino R$ 3,50</h2>
<p>O melhor Capuccino</p>
<h2>Café com Leite R$ 2,00</h2>
<p>O melhor Café com leite</p>
<h2>Pingado R$ 1,50</h2>
<p>O melhor pingado</p>
</body>
</html>
Novo test drive
Entendendo as tags
<h1>Cafeteria Megasena</h1>
Adicionando estilo<html>
<head>
<title>Cafeteria Megasena</title>
</head>
<body>
<h1>Cafeteria Megasena</h1>
<h2>Café expresso R$ 1,50</h2>
<p>O melhor café</p>
<style type=“text/css”>
</style>
<h2>Cappucino R$ 3,50</h2>
<p>O melhor Capuccino</p>
<h2>Café com Leite R$ 2,00</h2>
<p>O melhor Café com leite</p>
<h2>Pingado R$ 1,50</h2>
<p>O melhor pingado</p>
</body>
</html>
Adicionando estilo
<style type="text/css">
body{
background-color: #d2b48c;
margin-left: 20%;margin-left: 20%;
margin-rigth:20%;
border: 1px dotted gray;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
</style>
Site com estilo
Aula 1Parte IIParte II
HTML
<a>
<a href=“destino”>Elemento linkado</a>
O que faremos???
� O texto que deve se tornar um “link” será colocado entre tags <a>
� Adicionaremos a informação HTML que informará para onde o link nos levará ao clicá-lo
O que o navegador fará?
Criando a nova versão do PHP Drinks
� As páginas “bebidas.html” e “instrucoes.html” já estão criadas
� http://www.fa7.edu.br/tecnicas/drinks.zip
� Editaremos a pagina “phpdrinks.html” adicionando o código necessário para ligá-la às adicionando o código necessário para ligá-la às paginas “bebidas.html” e “instrucoes.html”
� Realizar o teste
Criando a nova versão do PHP Drinks
� Faça o download dos arquivos
<html>
<head>
<title>PHP Drinks</title>
<head>
<body>
<h1>Bem-vindo ao Novo PHP Drinks</h1>
<img src="drinks.gif"/>
<p>
Prove uma de nossas <a href="bebidas.html">bebidas</a>
Edite phpdrinks.html
Prove uma de nossas <a href="bebidas.html">bebidas</a>
e relaxe ao som de <em>Dance Dance</em>.
</p>
<h2>Localização</h2>
<p>
Você pode nos encontrar no centro da Vila Web.
Para chegar aqui sigas as
<a href="instrucoes.html">instrucoes</a>.
</p>
</body>
<html>
Teste
� Salve phpdrinks.html e faça um test drive
� Abra a página phpdrinks.html em um navegador
� Clique no “link” para as bebidas e você será � Clique no “link” para as bebidas e você será direcionado para uma nova página
� Clique no botão retornar no navegador
� Clique no “link” para instruções e a página de instruções será exibida
Compreendendo os atributos
� Através dos atributos temos um modo de especificar informação adicional a uma tag.
<style type=“text/css”>
<a href=“teste.html”>
<img src=“foto.gif”>
Exemplo
� Como seria uma tag carro???
<carro>Meu carro Azul</carro>
<carro fabricante=“BMW” modelo=“Cooper”>
Meu Carro Azul
</car>
Organizando PHP Drinks
Dificuldades Técnicas
Criando links para uma subpasta
O que temos
Identificando o destinoIdentificando o destino
Criando links para uma subpasta
� Identicamos o caminho
Criar um valor para o atributo href para caminho identificado
bebidas/bebidas.html
<a href=“bebidas/bebidas.html”>bebidas</a>
O caminho de volta – Linkando para uma pasta acima
Queremos linkar de instrucoes.html para phpdrinks.html<a href=“phpdrinks.html”>Voltar</a>
Identificando o destinoIdentificando o destino
C r i a n d o l i n k s p a r a u m a p a s t a
acima� Identicamos o caminho
Criar um valor para o atributo href para caminho identificado
../phpdrinks.html
<a href=“../phpdrinks.html”>Voltar</a>
Corrigindo os links para as imagens
� Realize o mesmo para as imagens no caminho para a imagem:
<img src=“drinks.gif”/>
<img src=“imagens/drinks.gif”/>
<img src=“../imagens/red.jpg”/>