Técnicas de programação HTML, CSS e XHTML
•
0 j'aime•870 vues
O documento discute técnicas de programação HTML, XHTML e CSS. Ele apresenta exemplos básicos de código HTML para criar uma página simples com título, imagem e texto. Também mostra como adicionar estilo à página usando CSS e como criar links internos entre páginas usando tags HTML.
Recommandé
Contenu connexe
En vedette
En vedette (20)
Similaire à Técnicas de programação HTML, CSS e XHTML
Similaire à Técnicas de programação HTML, CSS e XHTML (20)
Plus de Eduardo Mendes
Plus de Eduardo Mendes (20)
Técnicas de programação HTML, CSS e XHTML
- 1. Técnicas de Programação HTML, XHTML e CSSHTML, XHTML e CSS Eduardo Mendes
- 2. Aula 1 Parte IParte I
- 3. 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>
- 4. ... e o que o navegador gera...
- 5. 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>
- 6. Criando uma página HTML
- 7. 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
- 8. Criando uma página HTML
- 9. Salvando
- 11. 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
- 12. 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>
- 13. 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>
- 14. Novo test drive
- 15. Entendendo as tags <h1>Cafeteria Megasena</h1>
- 16. 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>
- 17. 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>
- 18. Site com estilo
- 19. Aula 1 Parte IIParte II
- 20. HTML
- 22. 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
- 23. O que o navegador fará?
- 24. 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 àsadicionando o código necessário para ligá-la às paginas “bebidas.html” e “instrucoes.html” Realizar o teste
- 25. Criando a nova versão do PHP Drinks Faça o download dos arquivos
- 26. <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>
- 27. 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
- 28. 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”>
- 29. Exemplo Como seria uma tag carro??? <carro>Meu carro Azul</carro> <carro fabricante=“BMW” modelo=“Cooper”> Meu Carro Azul </car>
- 32. Criando links para uma subpasta O que temos Identificando o destinoIdentificando o destino
- 33. 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>
- 34. 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
- 35. 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>
- 36. 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”/>