Baixado 58 vezes
Carregado porEduardo Mendes
Html Aula 1 Parte 1
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.
Html Aula 1 Parte 1
- 1. Técnicas de Programação HTML,XHTML e CSSHTML, XHTML e CSS Eduardo Mendes
- 2.
- 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 oque o navegador gera...
- 5. Comparando <html> <head> <title>PHP Drinks</title> </head> <body> <h1>Bem-vindo aoPHP 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.
- 7. Criando uma páginaHTML 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.
- 9.
- 10.
- 11. Adicionando os marcadoresCafeteriaMegasena 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é expressoR$ 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.
- 15. Entendendo as tags <h1>CafeteriaMegasena</h1>
- 16. Adicionando estilo<html> <head> <title>Cafeteria Megasena</title> </head> <body> <h1>CafeteriaMegasena</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.
- 19.
- 20.
- 21.
- 22. O que faremos??? Otexto 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 onavegador fará?
- 24. Criando a novaversã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 novaversão do PHP Drinks Faça o download dos arquivos
- 26. <html> <head> <title>PHP Drinks</title> <head> <body> <h1>Bem-vindo aoNovo 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 efaç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ésdos 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 umatag carro??? <carro>Meu carro Azul</carro> <carro fabricante=“BMW” modelo=“Cooper”> Meu Carro Azul </car>
- 30.
- 31.
- 32. Criando links parauma subpasta O que temos Identificando o destinoIdentificando o destino
- 33. Criando links parauma 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 devolta – 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 ia 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 linkspara 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”/>