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;

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>



<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

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

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>

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:


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


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

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>


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

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.

Aula 1 linguagem html (1)

Documents

Transcript of Aula 1 linguagem html (1)