Vous êtes sur la page 1sur 41

Profa.

: Hosana Sorai

1
Conteúdo
 O Que é HTML (Hyper Text Markup
Language)
 Quais são as utilidades do HTML
 Sintaxe da Linguagem
 Estrutura Básica do HTML

2
O que é HTML
 Hyper Text MarkUp Language
(Linguagem de Marcação de
HiperTexto);
 Criado pelo programador Tim Berners
Lee em 1990;
 Utilizada para desenvolver páginas para
web, trabalha com diferentes objetos.

3
Quais as utilidades do HTML

 Cria páginas;
 Insere imagens, vídeos, elementos de
diversos tipos;
 Personaliza textos (tamanho, cores e
estilo de fontes);
 Interage com outras linguagens (PHP,
CSS, JavaScript, etc.).

4
Sintaxe do HTML
Você precisa de:
 Um editor de códigos/textos (Ex:
Notepad++);
 Um navegador (Ex: Google Chrome).
No editor cria-se tags, algumas precisam
de encerramento:
<b></b>

5
Estrutura básica do HTML
 <html> Cabeçalho
 <head>
 <title>Título da página</title>
 </head>
Corpo
 <body>
 Essa é a minha primeira página. <b>Esse
texto está em negrito.</b>
 </body>
 </html>

6
Salvando o código anterior como teste.html
e abrindo no navegador:

7
Cabeçalhos, parágrafos e quebras de linha
<html>
<head>
<title>Exemplos de texto com cabeçalho, parágrafos e quebras de linha</title>
</head>
<body>
<h1>Esse é um cabeçalho muito grande</h1>
<h2>Esse é um cabeçalho um pouco menor, mas bem grande ainda</h2>
<h3>Esse é um cabeçalho nem tão grande assim</h3>
<h4>Esse é um cabeçalho médio</h4>
<h5>Esse é um cabeçalho pequeno</h5>
<h6>Esse é um cabeçalho muito pequeno</h6>
<hr />
<p>Agora faremos um parágrafo. A tag &apos;&lt;hr /&gt;&apos; no c&oacute;digo serve para inserir
uma linha horizontal, você; pode vê-la acima.</p>
<p>Note que ao criarmos outro, temos uma linha branca adicionada entre eles</p>
Agora o texto está sendo escrito diretamente no corpo do documento, sem nenhuma formatação. <br
/>
Use a tag vazia &apos;&lt;br /&gt;&apos; para quebrar linhas (saltar linhas) sen&atilde;o o seu texto
vai ficar bem estranho.
<!-- Finalmente, esse é um comentário. O que você escrever aqui não será mostrado no documento
exibido pelo navegador, mas pode ajudar a entender o que você quer fazer com o código. -->
</body>
</html>
8
Tags Utilizadas
 <html></html> Tag principal da página html
 <head></head> Cabeçalho da página
 <title></title> Título da página
 <body></body> Corpo da página, onde é colocado o
conteúdo da página
 <h1></h1> Cria títulos com determinado
tamanho
 <p></p> Um parágrafo separado
 <b></b> Deixa o texto em negrito
 <!-- --> Comentário, não aparece na página
 <br /> Salta para a próxima linha
 <hr /> Uma linha horizontal em toda a página

9
Caracteres especiais utilizados
Alguns exemplo:
 '&eacute;', "é"
 '&ccedil;', "ç"
 '&apos;', "'"
 '&lt;', "<"
 '&gt;', ">"
 '&otilde;', "õ"
 '&ecirc;', "ê"
10
Salvando o código anterior como teste2.html
e abrindo no navegador:

11
Hyperlinks
Um outro recurso amplamente utilizado em HTMLs é o hyperlink.
Ele serve para ligar um documento à outro na Web.
Existem duas maneiras de usar hyperlinks nos seus documentos,
com textos ou com imagens. O texto aparecerá sublinhado e o
cursor do mouse ficará diferente ao passar por cima dele. As
imagens terão o mesmo efeito de mudança de cursor.

<a href="endereço para onde quer redirecionar">Texto/Imagem do


link</a>

Ex. Texto: <a href="http://www.google.com">Google</a>

Ex Imagem: <a href="http://www.google.com"><img border="0“


src="http://www.google.com.br/intl/pt-BR/logos/Logo_25wht.gif”
/></a>

12
Imagens
O navegador interpreta as imagens a partir da leitura da tag '<img />'. Essa tag tem
vários atributos e trataremos de alguns deles.

 Imagem que está no mesmo caminho do seu documento:


<img src="imagem.jpg" />

 Imagem que está na Internet, usando uma URL para encontrá-la:


<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/05/
Flag_of_Brazil.svg/60px-Flag_of_Brazil.svg.png" />

 O atributo 'alt' serve para dar um nome alternativo às imagens nas webpages:
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb
/0/05/Flag_of_Brazil.svg/60px-Flag_of_Brazil.svg.png" alt="bandeira do brasil" />

 As imagens também podem ser usadas como plano de fundo da sua página. Não
usamos img, pois o navegador já entenderá através do background:
<body background="imagem_de_fundo.jpg">

13
Imagens
Outro recurso que provavelmente será muito utilizado é o alinhamento das
imagens com relação ao texto. Você pode basicamente colocá-la acima,
no meio ou abaixo do texto.
 <p>
• <p>
Uma imagem
Uma imagem
<img src="imagem.gif" align="bottom" /><img src="imagem.gif" />
no texto no meio do texto
</p> </p>
 <p> • <p>
Uma imagem <img src="imagem.gif" />
<img src="imagem.gif" align="middle" />Uma imagem antes do texto
no texto </p>
</p> • <p>
 <p> Uma imagem depois do texto
Uma imagem <img src="imagem.gif" />
<img src="imagem.gif" align="top" /> </p>
no texto
</p>
14
Imagens
Colocar as imagens na direita ou esquerda do seu texto.
 <p>
<img src ="imagem.gif" align ="left">
Um par&aacute;grafo com uma imagem. O atributo
&apos;align&após; est&aacute; configurado para
&apos;left&apos; (esquerda). A imagem ficar&aacute;
&agrave; esquerda do texto;
</p>
 <p>
<img src ="imagem.gif" align ="right">
Um par&aacute;grafo com uma imagem. O atributo
&apos;align&após; est&aacute; configurado para
&apos;right&apos; (direita). A imagem ficar&aacute; &agrave;
direita do texto;
</p>

15
Imagens
Atributos que serão usados com bastante freqüência são os
responsáveis por redimensionar as imagens: altura (height) e
largura (width):

 <p>
<img src="imagem.gif"
width="20" height="20">
</p>
 <p>
<img src="imagem.gif"
width="45" height="45">
</p>
 <p>
<img src="imagem.gif“
width="70" height="70">
</p>

16
Imagens

17
Listas
São três tipos de Listas:

 Ordenadas – Enumera os elementos da lista


de forma ordenada;
 Não ordenadas - Coloca um marcador antes
de cada um de seus elementos;
 De definições – Não é uma lista de itens, é de
apenas termos e definições.

18
Listas
<p>Vamos definir algumas coisas abaixo.</p>
 <html>
<h4>Bebidas</h4>
 <head> <dl>
 <title>Alguns exemplos de listas</title> <dt>Café</dt>
 </head> <dd>Bebida quente e preta</dd>
 <body> <dt>Chá</dt>
<dd>Tem de várias cores e pode ser servido tanto quente como
 <p>Vejamos abaixo algumas listas e suas diferentes
gelado</dd>
 características.</p> <dt>Água</dt>
 <br /> <dd>Sem cor, e com certeza gelada! ;)</dd>
 <p>Primeiramente, uma lista não ordenada.</p> </dl>
 <h4>Frutas</h4> </body>
</html>
 <ul>
 <li>Maçã;</li>
 <li>Morango</li>
 <li>Laranja</li>
 <li>Limão</li>
 <li>Abacaxi</li>
 </ul>
 <br />
 <p>Veja agora uma lista ordenada.</p>
 <h4>Resultados finais do campeonato de Fórmula 1 de 1991.</h4>
 <ol>
 <li>Senna</li>
 <li>Mansell</li>
 <li>Patrese</li>
 <li>Berger</li>
 <li>Prost</li>
 <li>Piquet</li>
 </ol>
 <br />
19
Tags do exemplo - Listas
 <ul></ul> - Iniciar lista não ordenada;
 <ol></ol> - Iniciar lista ordenada;
 <li></li> - Antes de cada item das listas ordenadas e não
ordenadas;
 <dl></dl> - Iniciar lista de definição;
 <dt></dt> - Para cada item da lista de definição;
 <dt></dt> - Para a definição de cada item.
Para lista ordenada podemos usar também:
 <ol type="A">
 <ol type=“a">
 <ol type=“I">
 <ol type=“i">
Para lista não ordenada podemos usar:
 <ul type="disc“>
 <ul type="circle“>
 <ul type="square"> 20
Tags do exemplo - Listas
 <p>Uma lista aninhada para complicar um pouco</p>
 <h4>Bebidas e alguns de seus tipos</h4>
 <ul type="circle">
 <li>Café</li>
 <ul type="square">
 <li>com leite</li>
 <li>preto</li>
 <li>frappé</li>
 </ul>
 <li>Chá</li>
 <ul type="square">
 <li>mate</li>
 <li>erva doce</li>
 <li>camomila</li>
 </ul>
 <li>Água</li>
 <ul type="square">
 <li>com gás</li>
 <li>sem gás</li>
 </ul>
 </ul> 21
Exemplo - Listas

22
Tabelas com borda– Arquivo tabela.html
 <html>
 <head>
 <title>Uma página com tabelas</title>
 </head>
 <body>
 <table border="1">
 <tr>
 <th>Parte do computador</th>
 <th>O que ela faz</th>
 </tr>
 <tr>
 <td>Teclado</td>
 <td>Onde você digita</td>
 </tr>
 <tr>
 <td>Mouse</td>
 <td>Onde você mexe a seta</td>
 </tr>
 </table>
 </body>
 </html> 23
Tabelas sem borda– Arquivo tabelasemborda.html
 <html> <tr>
<td>Teclado</td>
 <head>
<td>Onde você digita</td>
 <title>Uma página com tabelas</title> </tr>
 </head> <tr>
 <body> <td>Mouse</td>
 <h4>A mesma tabela, sem bordas e com <td>Onde você mexe a seta</td>
legenda</h4> </tr>
<tr>
 <table border="0">
<td>Adesivo no monitor</td>
 <caption align="top"><i>Minha <td>&nbsp;</td> <!-- n&atilde;o faz nada
legenda</i></caption> :)-->
 <caption align="bottom"><i>Minha outra </table>
legenda, abaixo da tabela</i></caption> </body>
 <tr> </html>
 <th>Parte do computador</th>
 <th>O que ela faz</th>
 </tr>

24
Tabelas Uma coluna com várias linhas - Arquivo tabela3.html
 <html> </tr>
 <head> </table>
 <title>Uma página com tabelas</title> <br />
 </head> <h4>Telefone das mesmas pessoas que
acabei de inventar, formatando
 <body>
diferente</h4>
 <h4>Telefone de algumas pessoas que acabei <table border="1">
de inventar</h4> <tr>
 <table border="1"> <th>Nome</th>
 <tr> <td>Jo&atilde;o Frango</td>
 <th>Nome</th> <td>Valpano</td>
</tr>
 <th colspan="2">Telefone</th>
<tr>
 </tr> <th rowspan="2">Telefone</th>
 <tr> <td>33 2548 3549</td>
 <td>Jo&atilde;o Frango</td> <td>33 2544 3578</td>
 <td>33 2548 3549</td> </tr>
<tr>
 <td>33 2544 3578</td>
<td>44 2578 3258</td>
 </tr> <td>44 2566 5799</td>
 <tr> </tr>
 <td>Valpano</td> </table>
 <td>44 2578 3258</td> </body>
</html> 25
 <td>44 2566 5799</td>
Tabelas - Distância entre o texto e a coluna
 <html> <h4>Tabela com espa&ccedil;amento
 <head> entre texto e bordas</h4>
 <title>Uma página com tabelas</title> <table border="1" cellpadding="15">
<tr>
 </head> <td>1</td>
 <h4>Tabela sem espa&ccedil;amento entre <td>2</td>
texto e bordas</h4> </tr>
 <table border="1" cellpadding="0"> <tr>
 <tr> <td>3</td>
 <td>1</td> <td>4</td>
</tr>
 <td>2</td> </table>
 </tr> </body>
 <tr> </html>
 <td>3</td>
 <td>4</td>
 </tr>
 </table>
 <br />
26
Tabelas – Outros exemplos
 <html> <h4>Tabela com espa&ccedil;amento
 <head> entre c&eacute;lulas</h4>
 <body> <table border="1" cellspacing="15">
<tr>
 <h4>Tabela sem espa&ccedil;amento entre <td bgcolor="yellow">amarelo</td>
c&eacute;lulas</h4> <td bgcolor="red">vermelho<td>
 <table border="1" cellspacing="0" </tr>
bgcolor="yellow"> <tr>
 <tr> <td bgcolor="green">verde</td>
 <td>1</td> <td bgcolor="blue">azul</td>
 <td>2</td> </tr>
</table>
 </tr> </body>
 <tr> </html>
 <td>3</td>
 <td>4</td>
 </tr>
 </table>
 <br />

27
Tabelas – Outros exemplos
 <html> <tr>
 <head> <th rowspan="2">Telefone</th>
 <body> <td>33 2548 3549</td>
<td>33 2544 3578</td>
 <h4>Telefone das mesmas pessoas que </tr>
acabei de inventar, formatando <tr>
 diferente</h4> <td>44 2578 3258</td>
 <table border="1"> <td>44 2566 5799</td>
 <tr> </tr>
 <th>Nome</th> </table> </body>
</html>
 <td align="center">Jo&atilde;o Frango</td>
 <td align="center">Valpano</td>
 </tr>

28
Tags Utilizadas na Tabela
 </table></table> - Cria a tabela;
 <tr></tr> - Define a linha;
 </td></td> - Define a coluna;
 </th></th> - Cabeçalho da tabela;
 <caption align = “”></caption> - Coloca uma legenda na tabela e o atributo align
determina se aparecerá em cima ou em baixo;
 <i></i> - Deixa o texto em itálico;
 <b></b> - Deixa o texto em negrito.
 Atributos:
 Colspan – Estender a coluna
 Rowspan – Estender a linha
 Cellpadding – Distância entre o texto e a tabela
 Cellspacing – Distância entre uma célula e outra
 Background – Cor de fundo da tabela

29
Exemplos da Tabela

30
Frames
Com frames você pode inserir mais de um documento dentro da mesma tela do navegador.
Você pode fazer frames horizontais ou verticais, que determinarão a maneira como os
documentos serão exibidos. Cada documento HTML será chamado frame e cada
frame é independente do outro.

Pode definir o tamanho das páginas (frames) por porcentagem:


 <frameset cols="30%, 70%">
 <frame src="uma_pagina.html" />
 <frame src="outra_pagina.html" />
 </frameset>

Pode definir o tamanho das páginas (frames) por pixels:


 <frameset cols="200, 300" />

Pode definir o tamanho das páginas (frames) por restante da porcentagem:


 <frameset cols="20%, 20%, *" />

31
Exemplo de Frames – Arquivo frames.html
 <html>
 <head>
 <title>Vamos usar uns frames</title>
 </head>
 <frameset cols="20%, 80%">
 <frame src="uma_pagina.html" />
 <frame src="outra_pagina.html" />
 </frameset>
 <body>
 <noframes>O seu navegador não suporta frames!</noframes>
 </body>
 </html>

Exemplo: uma_pagina.html

 <html>
 <head>
 <title>Essa é uma página</title>
 </head>
 <body>
 Uma página qualquer! =)
 </body>
 </html> 32
Exemplo: outra_pagina.html
 <html>
 <head>
 <title>Essa &eacute; outra p&aacute;gina</title>
 </head>
 <frameset rows="100, *, 200">
 <frame src="oi.html" />
 <frame src="tudo_bem.html" />
 <frame src="tchau.html" />
 </frameset>
 <body>
 <noframes>O seu navegador n&atilde;o suporta frames!</noframes>
 </body>
 </html>
Exemplo: oi.html
 <html>
 <frameset cols="30%, 30%, *">
 <frame src="oi1.html" />
 <frame src="oi2.html" />
 <frame src="oi3.html" />
 </frameset>
 <body>
 <noframes>O seu navegador n&atilde;o suporta frames!</noframes>
 </body>
 </html> 33
Exemplo: oi1.html
 <html>
 <body bgcolor="red">
 <i>oi um</i> Exemplo: tchau.html
 </body> <html>
 </html> <strong>TCHAU! =D</strong>
</html>
Exemplo: oi2.html
 <html>
 <body bgcolor="turquoise">
 <i>oi dois</i> Tags Utilizadas:
 </body>
 </html> <strong> - Deixa o texto em negrito como <b>,
mas dá ênfase ao texto;
Exemplo: oi3.html <big> - Deixa o texto em tamanho maior na tela;
 <html> <noframes> - Para navegadores que não são
 <body bgcolor="cyan"> capazes de trabalhar com frames.
 <i>oi tr&ecirc;s</i>
Bgcolor – cor de fundo do frame.
 </body>
 </html>
Exemplo: tudo_bem.html
 <html>
 <big>Tudo bem?</big>
 </html> 34
Exemplo de Frames

35
Forms
Um form é uma área que contém elementos de formulário em um documento HTML. Esses
elementos são responsáveis por permitir que o usuário entre com informações (como
campos de texto, áreas de texto, menus, etc.) em um formulário. São definidos pela tag
'<form>'.

 <html>
 <head>
 <title>Estamos quase acabando, paciência com os forms</title>
 </head>
 <body>
 <p>Veja se isto te lembra algo em clientes de e-mail</p>
 <form>
 Login:<input type="text" name="login" /><br />
 Senha:<input type="password" name="password" />
 </form>
 </body>
 </html>

36
Forms
 <select name="servico">
 <option value="email">E-mail</option>
 <option value="agenda">Agenda</option>
 <option value="noticias">Not&iacute;cias</option>
 <option value="jogos">Jogos</option>
 </select>

Botões:
 <input type="radio" name="servico_botao" value="email" /> E-mail<br />
 <input type="radio" name="servico_botao" value="agenda" /> Agenda<br />
 <input type="radio" name="servico_botao" value="noticias" />
 Not&iacute;cias<br />
 <input type="radio" name="servico_botao" value="jogos" /> Jogos<br />

Caixa de Seleção:
 E-mail: <input type="checkbox" name="servico_cb" value="email" /><br />
 Agenda: <input type="checkbox" name="servico_cb" value="agenda" /><br />
 Not&iacute;cias: <input type="checkbox" name="servico_cb" value="noticias”/><br />
 Jogos: <input type="checkbox" name="servico_cb" value="jogos" /><br />
37
Forms
Outros botões:
 <input type="button" value="Oi, eu sou um botão“>

Caixa de Seleção:
 E-mail: <input type="checkbox" name="servico_cb" value="email" /><br />
 Agenda: <input type="checkbox" name="servico_cb" value="agenda" /><br />
 Notícias: <input type="checkbox" name="servico_cb" value="noticias”/><br />
 Jogos: <input type="checkbox" name="servico_cb" value="jogos" /><br />

Enviar e apagar:
 <input type="submit" value="Enviar" />
 <input type="reset" value="Apagar" />

Redireciona a outra página as informações fornecidas:


 <form name="entrada" action="pagina_redirecionada.html">

38
Tags usadas em forms
 <input> - Mostra no navegador os campos que serão inseridos pelos usuários;
 Type – Tipo de elementos. São eles:
 text: Usado quando você quer inserir caracteres, números e afins no formulário.
 password: Bem parecido com o 'text' mas sua entrada de dados não aparecerá
explicitamente para o usuário. Usada principalmente, como o próprio nome sugere,
para a entrada de senhas.
 radio: São os radio buttons, ou botões de opção. Elas permitem que o usuário seja
 capaz de escolher um elemento entre um número limitados deles.
 checkbox: As check boxes, ou caixas de seleção, têm uma finalidade parecida com
a dos botões, com a diferença de permitir que sejam selecionados mais de um
elementos.
 submit: O botão submit serve para enviar os dados.
 reset: O botão reset serve para apagar todas as entradas do formulário.
 <select> -
 <option> -

39
Exemplo de Forms

40
41

Vous aimerez peut-être aussi