Aula 1 linguagem html (1)

Linguagem HTML
Desenvolvimento de Aplicações Web
Bruno Tenório Ávila

Escopo
• Introdução;
• Formatação;
• Imagens;
• Links;
• Listas;
• Agrupamentos;
• Formulários;
• Tabelas;

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?filena
me=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>

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

<h1>Meu cabeçalho</h1>
<p>Meu primeiro parágrafo</p>
</body>
</html>

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;


<html>
<body>
HTML <b>não</b> é uma
<font color="red">linguagem</font> de
<b><font color="red">programação</font></b>
.
</body>
</html>

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

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>
<h2><a name=“c3”>Chapter 3</a></h2>

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;

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

Lista Não-Ordenada
• Lista não-ordenada é definida pela tag <ul>:
– <li> inicia um item;
– </li> termina um item;

Exemplo: Resultado Final:

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

Lista Ordenada
• Lista ordenada é definida pela tag <ol>:
– <li> inicia um item;
– </li> termina um item;

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

Lista Ordenada
• A tag <ol> tem o atributo type:
– define o tipo da enumeração;
– pode ser A, a, I, i

<ol type="a">
<li>Apples</li>
<li>Bananas</li>
</ol>

Exercícios
• Exercício 1:
– reproduzir a seguinte lista:

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

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>

Envio de Dados para o Servidor

DADOS VIA HTTP
Cliente Servidor
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:alguem@exemplo.com" 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;

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

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

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

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.

Aula 1 linguagem html (1)

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Aula 1 linguagem html (1)

Similar a Aula 1 linguagem html (1) (20)

Aula 1 linguagem html (1)