html aula 1 parte 1
TRANSCRIPT
![Page 1: Html Aula 1 Parte 1](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558cfdc3d8b42a534b8b45d1/html5/thumbnails/1.jpg)
Técnicas de Programação
HTML, XHTML e CSSHTML, XHTML e CSSEduardo Mendes
![Page 2: Html Aula 1 Parte 1](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558cfdc3d8b42a534b8b45d1/html5/thumbnails/2.jpg)
Aula 1Parte IParte I
![Page 3: Html Aula 1 Parte 1](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558cfdc3d8b42a534b8b45d1/html5/thumbnails/3.jpg)
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>
![Page 4: Html Aula 1 Parte 1](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558cfdc3d8b42a534b8b45d1/html5/thumbnails/4.jpg)
... e o que o navegador gera...
![Page 5: Html Aula 1 Parte 1](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558cfdc3d8b42a534b8b45d1/html5/thumbnails/5.jpg)
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>
![Page 6: Html Aula 1 Parte 1](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558cfdc3d8b42a534b8b45d1/html5/thumbnails/6.jpg)
Criando uma página HTML
![Page 7: Html Aula 1 Parte 1](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558cfdc3d8b42a534b8b45d1/html5/thumbnails/7.jpg)
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
![Page 8: Html Aula 1 Parte 1](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558cfdc3d8b42a534b8b45d1/html5/thumbnails/8.jpg)
Criando uma página HTML
![Page 9: Html Aula 1 Parte 1](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558cfdc3d8b42a534b8b45d1/html5/thumbnails/9.jpg)
Salvando
![Page 10: Html Aula 1 Parte 1](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558cfdc3d8b42a534b8b45d1/html5/thumbnails/10.jpg)
Primeiro test drive!
![Page 11: Html Aula 1 Parte 1](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558cfdc3d8b42a534b8b45d1/html5/thumbnails/11.jpg)
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
![Page 12: Html Aula 1 Parte 1](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558cfdc3d8b42a534b8b45d1/html5/thumbnails/12.jpg)
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>
![Page 13: Html Aula 1 Parte 1](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558cfdc3d8b42a534b8b45d1/html5/thumbnails/13.jpg)
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>
![Page 14: Html Aula 1 Parte 1](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558cfdc3d8b42a534b8b45d1/html5/thumbnails/14.jpg)
Novo test drive
![Page 15: Html Aula 1 Parte 1](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558cfdc3d8b42a534b8b45d1/html5/thumbnails/15.jpg)
Entendendo as tags
<h1>Cafeteria Megasena</h1>
![Page 16: Html Aula 1 Parte 1](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558cfdc3d8b42a534b8b45d1/html5/thumbnails/16.jpg)
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>
![Page 17: Html Aula 1 Parte 1](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558cfdc3d8b42a534b8b45d1/html5/thumbnails/17.jpg)
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>
![Page 18: Html Aula 1 Parte 1](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558cfdc3d8b42a534b8b45d1/html5/thumbnails/18.jpg)
Site com estilo
![Page 19: Html Aula 1 Parte 1](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558cfdc3d8b42a534b8b45d1/html5/thumbnails/19.jpg)
Aula 1Parte IIParte II
![Page 20: Html Aula 1 Parte 1](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558cfdc3d8b42a534b8b45d1/html5/thumbnails/20.jpg)
HTML
![Page 21: Html Aula 1 Parte 1](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558cfdc3d8b42a534b8b45d1/html5/thumbnails/21.jpg)
<a>
<a href=“destino”>Elemento linkado</a>
![Page 22: Html Aula 1 Parte 1](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558cfdc3d8b42a534b8b45d1/html5/thumbnails/22.jpg)
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
![Page 23: Html Aula 1 Parte 1](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558cfdc3d8b42a534b8b45d1/html5/thumbnails/23.jpg)
O que o navegador fará?
![Page 24: Html Aula 1 Parte 1](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558cfdc3d8b42a534b8b45d1/html5/thumbnails/24.jpg)
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
![Page 25: Html Aula 1 Parte 1](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558cfdc3d8b42a534b8b45d1/html5/thumbnails/25.jpg)
Criando a nova versão do PHP Drinks
� Faça o download dos arquivos
![Page 26: Html Aula 1 Parte 1](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558cfdc3d8b42a534b8b45d1/html5/thumbnails/26.jpg)
<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>
![Page 27: Html Aula 1 Parte 1](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558cfdc3d8b42a534b8b45d1/html5/thumbnails/27.jpg)
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
![Page 28: Html Aula 1 Parte 1](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558cfdc3d8b42a534b8b45d1/html5/thumbnails/28.jpg)
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”>
![Page 29: Html Aula 1 Parte 1](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558cfdc3d8b42a534b8b45d1/html5/thumbnails/29.jpg)
Exemplo
� Como seria uma tag carro???
<carro>Meu carro Azul</carro>
<carro fabricante=“BMW” modelo=“Cooper”>
Meu Carro Azul
</car>
![Page 30: Html Aula 1 Parte 1](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558cfdc3d8b42a534b8b45d1/html5/thumbnails/30.jpg)
Organizando PHP Drinks
![Page 31: Html Aula 1 Parte 1](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558cfdc3d8b42a534b8b45d1/html5/thumbnails/31.jpg)
Dificuldades Técnicas
![Page 32: Html Aula 1 Parte 1](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558cfdc3d8b42a534b8b45d1/html5/thumbnails/32.jpg)
Criando links para uma subpasta
O que temos
Identificando o destinoIdentificando o destino
![Page 33: Html Aula 1 Parte 1](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558cfdc3d8b42a534b8b45d1/html5/thumbnails/33.jpg)
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>
![Page 34: Html Aula 1 Parte 1](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558cfdc3d8b42a534b8b45d1/html5/thumbnails/34.jpg)
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
![Page 35: Html Aula 1 Parte 1](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558cfdc3d8b42a534b8b45d1/html5/thumbnails/35.jpg)
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>
![Page 36: Html Aula 1 Parte 1](https://reader034.vdocuments.mx/reader034/viewer/2022052223/558cfdc3d8b42a534b8b45d1/html5/thumbnails/36.jpg)
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”/>