Html Aula 1 Parte 1

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>


</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>


<p>

Você pode nos encontrar no

centro da Vila Web.

</p>

</body>

</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

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>


<p>O melhor café</p><p>O melhor café</p>







</body>

</html>

Novo test drive

Entendendo as tags


Adicionando estilo<html>

<head>

<title>Cafeteria Megasena</title>

</head>

<body>



<p>O melhor café</p>

<style type=“text/css”>

</style>







</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

<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>


<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>


<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”/>

Html Aula 1 Parte 1

Documents

Transcript of Html Aula 1 Parte 1