Linguagem HTML
Desenvolvimento de Aplicações Web
Bruno Tenório Ávila
Escopo
• Introdução;
• Formatação;
• Imagens;
• Links;
• Listas;
• Agrupamentos;
• Formulários;
• Tabelas;
INTRODUÇÃO
HTML
• Hyper Text Markup Language:
– não é uma linguagem de programação;
– usa tags para descrever páginas;
• Documento HTML:
– formato texto, portanto pode ser feito em qualquer editor simples de texto;
– extensão .htm ou .html;
– visualizado no navegador (eg. firefox, ie, chrome);
Editor HTML
• Na Web:
– http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
• Editores:
– Notepad, Ultraedit, Notepad++;
• Editores Avançados:
– Adobe Dreamweaver;
Sintaxe HTML
• Tag:
<tag> ... </tag>
• Tag com atributos:
<tag atributo1=“...” atributo2=“...”> ... </tag>
• Tag sem marcador final:
<tag />
• Tag com atributos e sem marcador final:
<tag atributo1=“...” atributo2=“...” />
Estrutura de um Documento HTML
<html>
<head>
<title>Meu título</title>
</head>
<body>
<!-- Comentário -->
<h1>Meu cabeçalho</h1>
<p>Meu primeiro parágrafo</p>
</body>
</html>
Tag BODY
• A tag <body> refere-se ao corpo da página web;
• Possui os seguintes atributos:
– bgcolor: cor de fundo;
– text: cor do texto;
– link: cor dos links;
– alink: cor do link ativo;
– vlink: cor dos links visitados;
Cores
• Por nome em inglês: – red, green, blue, orange, black; <body bgcolor=“red”>
<h1>Fundo em vermelho</h1>
</body>
• Por valor em hexadecimal no formato RGB: • #FF0000 ou #F00 refere-se a cor vermelha;
• #AA0000 ou #A00 refere-se a cor vermelha com um tom mais escuro;
• #8F8F8F – quando os três componentes são iguais, a cor resultante é cinza;
Exercícios
• Exercício 1:
– alterar a cor de fundo e do texto da página do exemplo anterior;
Resposta do Exercício 1
<html>
<head>
<title>Meu título</title>
</head>
<body bgcolor="red" text="#0000DD">
<!-- Comentário -->
<h1>Meu cabeçalho</h1>
<p>Meu primeiro parágrafo</p>
</body>
</html>
FORMATAÇÃO
Formatação
• Negrito: <b>Estou em negrito</b>
• Itálico: <i>Estou em itálico</i>
• Fonte: <font face=“arial” size=“12”
color=“red”>Texto</font>
• Cores:
– pode ser em inglês: red, green, blue, orange, black;
– pode ser em RGB: #0000FF, #8f8f8f
Texto
• Cabeçalho: <h1>Título Principal</h1>
<h2>Subtítulo</h2>
• Parágrafo: <p>Isso é um parágrafo.</p>
• Linha de separação de texto: <hr />
• Quebra de linha de texto: <br />
Exercícios
• Exercício 1: – reproduzir a seguinte frase em HTML:
HTML não é uma linguagem de programação.
• Exercício 2: – fazer um título em negrito e verde;
– fazer um subtítulo em itálico e cinza;
– fazer um parágrafo com a fonte verdana com tamanho 9pt;
Resposta do Exercício 1
<html>
<body>
HTML <b>não</b> é uma
<font color="red">linguagem</font> de
<b><font color="red">programação</font></b>
.
</body>
</html>
Resposta do Exercício 2
<html>
<body>
<h1><b>
<font color="green">Título</font>
</b></h1>
<h2><i>
<font color="gray">Subtítulo</font>
</i></h2>
<p>
<font face="verdana" size="9">Parágrafo</font>
</p>
</body>
</html>
IMAGENS
Imagens
• Sintaxe: <img src=“logo.png” width=“50” border=“0” />
<img src=“http://www.google.com/logo.gif”
height=“50” alt=“Logo da Google”>
<img src=“logo.jpg”>
• Observação:
– não especificando a altura nem a largura, o navegador exibe-a com o tamanho original;
Exercícios
• Exercício 1:
– fazer uma página com a logo do google;
Resposta do Exercício 1
<html>
<body>
<img src="http://www.google.com.br/logos/
classicplus.png">
</body>
</html>
LINKS
Links
• Sintaxe:
<a href=“sobre.html”>Sobre a empresa</a>
<a href=“sobre.html” target="_blank">Sobre</a>
• Link para uma parte de uma página:
<a href="#c3“>clique aqui</a>
<a name=“c3”>outra parte</a>
Links
• Link para uma outra parte da mesma página:
<p><a href="#c3">See also Chapter 3.</a></p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2><a name=“c3”>Chapter 3</a></h2>
<p>This chapter explains ba bla bla</p>
Exercícios
• Exercício 1:
– abrir uma outra página web ao clicar em uma imagem;
• Exercício 2:
– fazer uma página web com três partes (texto mesmo);
– fazer um menu para navegar entre elas;
Resposta do Exercício 1
<html>
<body>
<a href="http://www.google.com/">
<img src="http://www.google.com.br/logos/
classicplus.png">
</a>
</body>
</html>
Resposta do Exercício 2
<html>
<body>
<a href="#p1">Parágrafo 1</a><br>
<a href="#p2">Parágrafo 2</a><br>
<a href="#p3">Parágrafo 3</a><br><br>
<p><a name="p1">A</a> Advocacia-Geral da União entrou com uma ação no
Judiciário, neste mês, pedindo ressarcimento do prejuízo que o MEC teve
na aplicação do Enem 2009. </p>
<p><a name="p2">Quando</a> a prova vazou, R$ 38 milhões já haviam sido
pagos ao consórcio responsável pela aplicação do exame, o Connasel.
Hoje o valor atualizado do prejuízo é de cerca de R$ 46 milhões. </p>
<p><a name="p3">O</a> MEC diz que esgotou todas as possibilidades de
cobranças administrativas ao consórcio. Procurado na noite de ontem, o
grupo disse que só se manifestaria hoje.</p>
</body>
</html>
LISTAS
Lista Não-Ordenada
• Lista não-ordenada é definida pela tag <ul>:
– <li> inicia um item;
– </li> termina um item;
Exemplo:
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
Resultado Final:
Lista Ordenada
• Lista ordenada é definida pela tag <ol>:
– <li> inicia um item;
– </li> termina um item;
Exemplo:
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
Resultado Final:
Lista Ordenada
• A tag <ol> tem o atributo type:
– define o tipo da enumeração;
– pode ser A, a, I, i
Exemplo:
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
</ol>
Resultado Final:
Exercícios
• Exercício 1:
– reproduzir a seguinte lista:
Resposta do Exercício 1
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
AGRUPAMENTO
Tag DIV
• Usado para definir uma divisão ou uma seção da página pelo agrupamento de um conjunto de elementos HTML;
• Extremamente utilizado para construir páginas;
• Trabalharemos mais com ele quando aprendermos a linguagem CSS;
• Atributos:
– id: identificador único no documento HTML;
– class: especifica um conjunto de classes CSS;
– style: especifica um conjunto de atributos CSS;
Tag DIV
• Exemplo:
<div id=“frases1”>
<b>Estou em negrito.</b>
<i>Estou em itálico.</i>
</div>
<div id=“frases2”>
<i><b>Estou em negrito e em itálico.</b></i>
</div>
Tag SPAN
• Similar à tag <div>, exceto que:
– o DIV quebra a linha, ou seja, dois elementos DIV aparecem um em baixo do outro;
– o SPAN não quebra a linha, ou seja, dois elementos SPAN aparecem um no lado do outro;
• Exemplo: <div>em cima</div>
<div>em baixo</div>
<span>esquerda</span>
<span>direita</span>
FORMULÁRIOS
Envio de Dados para o Servidor
Cliente Servidor DADOS VIA HTTP
USANDO O MÉTODO POST OU GET
• GET:
– os dados são codificados na URL;
– exemplo: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_span
• POST:
– os dados são codificados no corpo da mensagem HTTP;
Envio de Dados para o Servidor
GET /index.html?userid=joe&password=guessme HTTP/1.1 Host: www.mysite.com User-Agent: Mozilla/4.0 POST /login.jsp HTTP/1.1 Host: www.mysite.com User-Agent: Mozilla/4.0 Content-Length: 27 Content-Type: application/x-www-form-urlencoded
userid=joe&password=guessme
Formulários
• Um formulário é definido pela tag <form>:
– atributo action define a página que será solicitada;
– atributo method define o método {POST, GET} que será usado para enviar os dados do formulário;
– <input> define um controle de entrada de dados;
<form name="meuForm" action="cadastrar.jsp"
method="get">
<input name="..." type="..." />
</form>
Controles de Formulários – Botão
• Controle Botão é definido por <input type=“button” value=“...” />
• Para submeter os dados de um formulário: <input type=“submit” value=“...” />
• Para limpar os dados de um formulário: <input type=“reset” value=“...” />
Controles de Formulários – Botão
• Exemplo:
<form name="meuForm" action="cadastrar.php"
method="get">
<input type="submit" value="Submeter" />
<input type="reset" value="Limpe-me" />
<input type="button" value="Aperte-me" />
</form>
Controles de Formulários – Linha de Texto
• Controle Linha de Texto é definido por <input type=“text” name=“...” />
• Rótulo do controle é definido por
<label for=“...”>rótulo</label>
<form name="meuForm" action="cadastrar.php"
method="get">
<label for="cpf">CPF:</label>
<input type="text" name="cpf" />
<input type="submit" value="Submeter" />
</form>
Controles de Formulários – Senha
• Controle Senha é definido por <input type=“password” name=“...” />
<form name="login" action="login.php"
method="get">
<label for="cpf">CPF:</label>
<input type="text" name="cpf" />
<label for="senha">Senha:</label>
<input type="password" name="senha" />
<input type="submit" value="Entrar" />
</form>
Controles de Formulários – Radio
• Controle Radio é definido por <input type=“radio” name=“...” value=“...” />
<form name="login" action="selecionar.php"
method="get">
<input type="radio" name="tipo" value="CPF" />
<input type="radio" name="tipo" value="CNPJ" />
<input type="submit" value="Escolher" />
</form>
Controles de Formulários – Marcador
• Controle Marcador é definido por
<input type=“checkbox” name=“...” />
<form name="login" action="formatar.php"
method="get">
<input type="checkbox" name="vermelho“ />
Vermelho
<input type="checkbox" name="negrito" />
Negrito
<input type="submit" value="Formatar" />
</form>
Controles de Formulários – Seleção
• Controle Seleção é definido pela tag <select>:
– <option value=“...”> inicia uma opção;
<select name="carro">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Controles de Formulários – Texto
• Controle Texto é definido pela tag <textarea>:
– atributo rows e cols definem o número de linhas e colunas, respectivamente;
<textarea name="observacao" rows="10"
cols="30">
The cat was playing in the garden.
</textarea>
Exemplo – Enviar Email
<form action="mailto:[email protected]" method="post"
enctype="text/plain">
Nome:<br />
<input type="text" name="nome" value="seu nome" /><br />
E-mail:<br />
<input type="text" name="email" value="seu email" /><br />
Comentário:<br />
<textarea name="comentario" rows="10" cols="30" />seus
comentários</textarea>
<br /><br />
<input type="submit" value="Enviar">
<input type="reset" value="Limpar">
Exercícios
• Exercício 1:
– fazer um formulário para alunos com nome, matéria (selecionar de uma lista) e duas notas;
– colocar botão de Adicionar e Limpar;
• Exercício 2:
– fazer um formulário para clientes com CPF ou CNPJ, razão social e faturamento anual;
– colocar botão de Adicionar e Limpar;
Resposta do Exercício 1
<form name="aluno" action="adicionar_aluno.jsp" method="post">
<label for="nome">Nome:</label>
<input type="text" name="nome" />
<label for="materia">Matéria:</label>
<select name="materia">
<option name="des_web">Desenvolvimento Web</option>
<option name="emp">Empreendedorismo</option>
</select>
<label for="nota1">Nota 1:</label>
<input type="text" name="nota1" />
<label for="nota2">Nota 2:</label>
<input type="text" name="nota2" />
<input type="submit" value="Adicionar" />
<input type="reset" value="Limpar" />
</form>
Resposta do Exercício 2
<form name="cliente" action="adicionar_cliente.jsp" method="post">
<label for="razao">Razão Social:</label>
<input type="text" name="razao" /><br />
<input type="radio" name="cpf_ou_cnpj" value="cpf">CPF<br />
<input type="radio" name="cpf_ou_cnpj" value="cnpj">CNPJ<br />
<label for="faturamento">Faturamento Anual:</label>
<input type="text" name="faturamento" /><br>
<input type="submit" value="Adicionar" />
<input type="reset" value="Limpar" />
</form>
TABELAS
Tabela
• Uma tabela é definida com a tag <table> que tem os seguintes atributos:
– border: espessura da borda;
– cellpadding: espaçamento entre o texto e a borda da célula;
– cellspacing: espaçamento entre duas células;
– width e height: pode ser em número de pontos ou em porcentagem;
Tabela
• Partes de uma tabela:
– <tr> inicia uma linha;
– <td> inicia uma coluna;
– <th> inicia um cabeçalho;
Tabela
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Atributos de TR, TD e TH
• width e height: – pode ser em pontos ou em porcentagem; – exemplo:
• <td width=“50%”></td> significa que a célula terá 50% da largura total da tabela;
• align: – alinhamento do texto na horizontal; – pode ser: left, right, center;
• valign: – alinhamento do texto na vertical; – pode ser: top, middle, bottom;
• bgcolor: – cor de fundo;
Exercícios
• Exercício 1:
– fazer uma tabela com cabeçalho, três colunas e 8 linhas;
– intercalar as cores das linhas entre cinza claro e branco (usar o atributo de TR chamado bgcolor);
Atributos de TD
• colspan=número – indica o número de colunas que a célula será unida;
• Exemplo: <table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
Atributos de TD
• rowspan=número – indica o número de linhas que a célula será unida;
• Exemplo: <table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
Exercícios
• Exercício 2:
– construir a seguinte tabela:
(usar o atributo de TD chamado align=“center”)
Exercícios
• Exercício 3:
– construir uma página com o seguinte layout:
• cabeçalho em cima
• menu à esquerda;
• conteúdo à direita;
CONSIDERAÇÕES FINAIS
Conclusões
• Linguagem HTML:
– utilizado para especificar a exibição dos elementos de uma página web;
• Próxima aula:
– linguagem CSS.
Referências HTML
• HTML 4.01 Specification
– http://www.w3.org/TR/html4/
• W3Schools
– http://www.w3schools.com/
Lista para Próxima Aula
• 5 páginas web sobre a linguagem HTML:
– tem que ser codificados em HTML;
– tem que ter:
• título, tabelas, figuras, formatação;
– coloquem o seu nome em cada página web;
– trabalho individual;
– será utilizado para avaliação.
Top Related