SlideShare uma empresa Scribd logo
1 de 67
Baixar para ler offline
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?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>
  <!-- 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:                    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;


   Exemplo:                  Resultado Final:
   <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


   Exemplo:                  Resultado Final:
   <ol type="a">
    <li>Apples</li>
    <li>Bananas</li>
   </ol>
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

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

Mais conteúdo relacionado

Mais procurados

Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento webRodrigo Rodrigues
 
Curso de css3 unidade 1 - introdução ao css
Curso de css3   unidade 1 - introdução ao cssCurso de css3   unidade 1 - introdução ao css
Curso de css3 unidade 1 - introdução ao cssLéo Dias
 
Apresentação HTML e CSS
Apresentação HTML e CSSApresentação HTML e CSS
Apresentação HTML e CSSledsifes
 
Introdução a programação para a Internet
Introdução a programação para a InternetIntrodução a programação para a Internet
Introdução a programação para a InternetLeonardo Soares
 
Introdução a JavaScript
Introdução a JavaScriptIntrodução a JavaScript
Introdução a JavaScriptBruno Catão
 
Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScriptCarlos Eduardo Kadu
 
Introdução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento WebIntrodução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento WebAnderson Luís Furlan
 
Introdução ao desenvolvimento Web
Introdução ao desenvolvimento WebIntrodução ao desenvolvimento Web
Introdução ao desenvolvimento WebSérgio Souza Costa
 
Desenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScriptDesenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScriptFábio Flatschart
 

Mais procurados (20)

Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
 
Curso de css3 unidade 1 - introdução ao css
Curso de css3   unidade 1 - introdução ao cssCurso de css3   unidade 1 - introdução ao css
Curso de css3 unidade 1 - introdução ao css
 
Apresentação HTML e CSS
Apresentação HTML e CSSApresentação HTML e CSS
Apresentação HTML e CSS
 
Introdução a HTML5
Introdução a HTML5Introdução a HTML5
Introdução a HTML5
 
Introdução ao HTML e CSS
Introdução ao HTML e CSSIntrodução ao HTML e CSS
Introdução ao HTML e CSS
 
Introdução CSS
Introdução CSSIntrodução CSS
Introdução CSS
 
Introdução a programação para a Internet
Introdução a programação para a InternetIntrodução a programação para a Internet
Introdução a programação para a Internet
 
Introdução ao CSS
Introdução ao CSSIntrodução ao CSS
Introdução ao CSS
 
HTML Principios Básicos
HTML Principios BásicosHTML Principios Básicos
HTML Principios Básicos
 
Curso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTMLCurso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTML
 
Introdução ao HTML
Introdução ao HTMLIntrodução ao HTML
Introdução ao HTML
 
Aula02 - JavaScript
Aula02 - JavaScriptAula02 - JavaScript
Aula02 - JavaScript
 
Introdução a JavaScript
Introdução a JavaScriptIntrodução a JavaScript
Introdução a JavaScript
 
Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScript
 
Introdução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento WebIntrodução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento Web
 
CSS
CSSCSS
CSS
 
Introdução ao desenvolvimento Web
Introdução ao desenvolvimento WebIntrodução ao desenvolvimento Web
Introdução ao desenvolvimento Web
 
Javascript aula 01 - visão geral
Javascript   aula 01 - visão geralJavascript   aula 01 - visão geral
Javascript aula 01 - visão geral
 
Desenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScriptDesenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScript
 
Aula 02
Aula 02Aula 02
Aula 02
 

Semelhante a Aula 1 linguagem html (1)

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

HTML
HTMLHTML
HTML
 
Aula html5
Aula html5Aula html5
Aula html5
 
HTML + CSS
HTML + CSSHTML + CSS
HTML + CSS
 
Html - Aula 3
Html - Aula 3Html - Aula 3
Html - Aula 3
 
Introdução a Desenvolvimento Web
Introdução a Desenvolvimento WebIntrodução a Desenvolvimento Web
Introdução a Desenvolvimento Web
 
Php aula1
Php aula1Php aula1
Php aula1
 
Introdução de web
Introdução de webIntrodução de web
Introdução de web
 
Curso de Java (Parte 6) Introdução a Front-end
Curso de Java (Parte 6) Introdução a Front-endCurso de Java (Parte 6) Introdução a Front-end
Curso de Java (Parte 6) Introdução a Front-end
 
Html aula 1
Html aula 1Html aula 1
Html aula 1
 
Html5 workshop
Html5 workshopHtml5 workshop
Html5 workshop
 
HTML - HyperText Markup Language - Review
HTML - HyperText Markup Language - ReviewHTML - HyperText Markup Language - Review
HTML - HyperText Markup Language - Review
 
07 html formulários
07 html   formulários07 html   formulários
07 html formulários
 
Apresentação para aula de HTML básico
Apresentação para aula de HTML básicoApresentação para aula de HTML básico
Apresentação para aula de HTML básico
 
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
 
Curso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JSCurso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JS
 
Html, css, js, ajax
Html, css, js, ajaxHtml, css, js, ajax
Html, css, js, ajax
 
Introdução a HTML, CSS, JS, Ajax
Introdução a HTML, CSS, JS, AjaxIntrodução a HTML, CSS, JS, Ajax
Introdução a HTML, CSS, JS, Ajax
 
O que todos os developers devem saber sobre seo
O que todos os developers devem saber sobre seoO que todos os developers devem saber sobre seo
O que todos os developers devem saber sobre seo
 
Minicurso Web. Front-end e HTML5 (parte 2)
Minicurso Web. Front-end e HTML5 (parte 2)Minicurso Web. Front-end e HTML5 (parte 2)
Minicurso Web. Front-end e HTML5 (parte 2)
 
Tuturial Html
Tuturial HtmlTuturial Html
Tuturial Html
 

Aula 1 linguagem html (1)

  • 1. Linguagem HTML Desenvolvimento de Aplicações Web Bruno Tenório Ávila
  • 2. Escopo • Introdução; • Formatação; • Imagens; • Links; • Listas; • Agrupamentos; • Formulários; • Tabelas;
  • 4. 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);
  • 5. Editor HTML • Na Web: – http://www.w3schools.com/html/tryit.asp?filena me=tryhtml_intro • Editores: – Notepad, Ultraedit, Notepad++; • Editores Avançados: – Adobe Dreamweaver;
  • 6. 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=“...” />
  • 7. 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>
  • 8. 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;
  • 9. 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;
  • 10. Exercícios • Exercício 1: – alterar a cor de fundo e do texto da página do exemplo anterior;
  • 11. 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>
  • 13. 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
  • 14. 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 />
  • 15. 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;
  • 16. 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>
  • 17. 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>
  • 19. 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;
  • 20. Exercícios • Exercício 1: – fazer uma página com a logo do google;
  • 21. Resposta do Exercício 1 <html> <body> <img src="http://www.google.com.br/logos/ classicplus.png"> </body> </html>
  • 22. LINKS
  • 23. 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>
  • 24. 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>
  • 25. 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;
  • 26. 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>
  • 27. 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>
  • 29. 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>
  • 30. Lista Ordenada • Lista ordenada é definida pela tag <ol>: – <li> inicia um item; – </li> termina um item; Exemplo: Resultado Final: <ol> <li>Coffee</li> <li>Milk</li> </ol>
  • 31. Lista Ordenada • A tag <ol> tem o atributo type: – define o tipo da enumeração; – pode ser A, a, I, i Exemplo: Resultado Final: <ol type="a"> <li>Apples</li> <li>Bananas</li> </ol>
  • 32. Exercícios • Exercício 1: – reproduzir a seguinte lista:
  • 33. 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>
  • 35. 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;
  • 36. 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>
  • 37. 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>
  • 39. 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;
  • 40. 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
  • 41. 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>
  • 42. 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=“...” />
  • 43. 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>
  • 44. 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>
  • 45. 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>
  • 46. 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>
  • 47. 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>
  • 48. 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>
  • 49. 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>
  • 50. 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">
  • 51. 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;
  • 52. 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>
  • 53. 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>
  • 55. 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;
  • 56. Tabela • Partes de uma tabela: – <tr> inicia uma linha; – <td> inicia uma coluna; – <th> inicia um cabeçalho;
  • 57. 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>
  • 58. 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;
  • 59. 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);
  • 60. 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>
  • 61. 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>
  • 62. Exercícios • Exercício 2: – construir a seguinte tabela: (usar o atributo de TD chamado align=“center”)
  • 63. Exercícios • Exercício 3: – construir uma página com o seguinte layout: • cabeçalho em cima • menu à esquerda; • conteúdo à direita;
  • 65. Conclusões • Linguagem HTML: – utilizado para especificar a exibição dos elementos de uma página web; • Próxima aula: – linguagem CSS.
  • 66. Referências HTML • HTML 4.01 Specification – http://www.w3.org/TR/html4/ • W3Schools – http://www.w3schools.com/
  • 67. 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.