1
Apresentação da Disciplina
Aula Período Objetivos
3. HTML:
conceitos e
marcações
31/08/2015 a
13/09/2015
Definir e conce...
2
ATENÇÃO!!!
Além da bibliografia recomentada, existe
também a
APOSTILA DA DISCIPLINA
que deverá ser a sua primeira fonte ...
AW1 – Aplicações para Web I
HTML - I
3
Recordando a aula passada:
 Formas de conexão:
Por fio: primeiro meio de transmis...
AW1 – Aplicações para Web I
HTML - I
4
O que veremos nesta aula:
 Conceito de HTML
 Documentos HTML
 Instalando um Edit...
AW1 – Aplicações para Web I
HTML - I
5
Iniciaremos a aula assistindo a um
vídeo introdutório à HTML:
HTML: introdução, con...
AW1 – Aplicações para Web I
HTML - I
6
O que é HTML:
• H yper T ext M arkup L anguage é uma meta linguagem com a
qual se d...
AW1 – Aplicações para Web I
HTML - I
7
HTML: origem e evolução
• SGML – torna-se um padrão ISO em 1986 e deu origem a HTML...
AW1 – Aplicações para Web I
HTML - I
8
Documentos HTML:
• descrevem páginas da web que são documentos HTML;
• estes docume...
AW1 – Aplicações para Web I
HTML - I
9
Você pode utilizar o editor de sua preferência, mas o editor que
vou utilizar em no...
AW1 – Aplicações para Web I
HTML - I
10
HTML básico:
Enfim, a partir daqui se inicia o conhecimento
sobre a construção de ...
AW1 – Aplicações para Web I
HTML - I
11
HTML básico: a estrutura
Um documento HTML completo é composto por uma série de ta...
AW1 – Aplicações para Web I
HTML - I
12
HTML básico: a estrutura
As tag’s que compoem a estrutura básica são:
<HTML> </HTM...
AW1 – Aplicações para Web I
HTML - I
13
HTML básico: cabeçalho
<h1>, <h2>, … <h6>
Digitando o código da esquerda no MAX’s ...
AW1 – Aplicações para Web I
HTML - I
14
HTML básico: parágrafo
<p> </p>
Digitando o código da esquerda no MAX’s Beauty++ e...
AW1 – Aplicações para Web I
HTML - I
15
HTML básico: quebra de linha
<br>
Digitando o código da esquerda no MAX’s Beauty++...
AW1 – Aplicações para Web I
HTML - I
16
HTML básico: linha horizontal
<hr>
Digitando o código da esquerda no MAX’s Beauty+...
AW1 – Aplicações para Web I
HTML - I
17
HTML básico: comentários
<! - - - - >
Digitando o código da esquerda no MAX’s Beau...
AW1 – Aplicações para Web I
HTML - I
18
HTML formatação:
A HTML disponibiliza algumas tag’s direcionadas
para a formatação...
AW1 – Aplicações para Web I
HTML - I
19
HTML formatação: plasticidade
<tt>, <i>, <b>, <big> e <small>
Formata caracteres t...
AW1 – Aplicações para Web I
HTML - I
20
Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9,
o resultado se...
AW1 – Aplicações para Web I
HTML - I
21
Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9,
o resultado se...
AW1 – Aplicações para Web I
HTML - I
22
Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9,
o resultado se...
AW1 – Aplicações para Web I
HTML - I
23
Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9,
o resultado se...
AW1 – Aplicações para Web I
HTML - I
24
Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9,
o resultado se...
AW1 – Aplicações para Web I
HTML - I
25
HTML formulários
Formulários têm o objetivo de interagir com o usuário,
possibilit...
AW1 – Aplicações para Web I
HTML - I
26
Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9,
o resultado se...
AW1 – Aplicações para Web I
HTML - I
27
HTML formulários: entrada <input>
1-Esta linha faz a entrada de dados através de u...
AW1 – Aplicações para Web I
HTML - I
28
8-Esta linha estabelece um campo oculto (hidden). Este tipo de campo,
apensar de n...
AW1 – Aplicações para Web I
HTML - I
29
HTML formulários: entrada <input>
A tag <input> possui vários atributos que podem ...
AW1 – Aplicações para Web I
HTML - I
30
Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9,
o resultado se...
AW1 – Aplicações para Web I
HTML - I
31
Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9,
o resultado se...
AW1 – Aplicações para Web I
HTML - I
32
Terminamos aqui a primeira parte da aula de HTML.
Se você testou todos os codigos ...
33
Instalação do editor MAX’s HTML
Depois de concluído o download do arquivo de instalação, execute-o clicando
duas vezes ...
34
Instalação do editor MAX’s HTML
Clique no botão NEXT para prosseguir com a instalação.
Passo 2
Uma nova caixa se abrirá...
35
Instalação do editor MAX’s HTML
Caso concorde com os termos propostos nesta caixa de diálogo, selecione a
apção: “I acc...
36
Instalação do editor MAX’s HTML
Caso deseje manter a sugestão de local da instalação do editor proposta pela
caixa de d...
37
Instalação do editor MAX’s HTML
A próxima caixa solicitará a confirmação das tarefas adicionais a serem instaladas.
Se ...
38
Instalação do editor MAX’s HTML
Caso deseje manter a sugestão de local da instalação do editor proposta pela
caixa de d...
39
Instalação do editor MAX’s HTML
Como ultima caixa de diálogo do processo de instalação do editor, a caixa anterior
resu...
AW1 – Aplicações para Web I
HTML - I
40
Outras linguagens:
• VRML: Trata imagens 3D com movimento;
• PERL: Utilizado como ...
Próximos SlideShares
Carregando em…5
×

Aula 3 - HTML

218 visualizações

Publicada em

HTML

Publicada em: Internet
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
218
No SlideShare
0
A partir de incorporações
0
Número de incorporações
24
Ações
Compartilhamentos
0
Downloads
4
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Aula 3 - HTML

  1. 1. 1 Apresentação da Disciplina Aula Período Objetivos 3. HTML: conceitos e marcações 31/08/2015 a 13/09/2015 Definir e conceituar a HTML; definir páginas e hiperlinks; apresentar as tags da linguagem; abordar a construção de títulos e formatar textos; apresentar a construção de formulários de recepção de dados Aula 3: HTML
  2. 2. 2 ATENÇÃO!!! Além da bibliografia recomentada, existe também a APOSTILA DA DISCIPLINA que deverá ser a sua primeira fonte de consulta. Ela norteará todas as nossas aulas. Esta apresentação e mais a apostila se complementam na abordagem de todo o conteúdo!
  3. 3. AW1 – Aplicações para Web I HTML - I 3 Recordando a aula passada:  Formas de conexão: Por fio: primeiro meio de transmissão utilizado e usavam modens do tipo: modem dial-Up, modem xDSL, modem a cabo e modem para transmissão em rede elétrica; Por ondas: transferência de informação sem a utilização de cabos metálicos; conhecido também como wireless ou Wi-Fi; engloba diversos tipos de rádios, celulares, PDA’s, GPS, controle de portas, mouses e teclados, etc.  Equipamentos: por usuário: linha telco(RJ11 e 45), cabo e celular, modem ou placa de rede; por ISP: lbanda larga, modem a cabo, link satélite, WAN e LAN, roteadores, Switchs, fibras, óticas, etc. Por PoP: roteadores de alta velocidade inteligando outros roteadores;  Serviços: www, correio, transmissão remota, comparitlhamento arquivo, etc.
  4. 4. AW1 – Aplicações para Web I HTML - I 4 O que veremos nesta aula:  Conceito de HTML  Documentos HTML  Instalando um Editor HTML  Tag’s HTML  Básico: cabeçalhos, parágrafos, quebra de linhas, linha horizontal, comentários;  Formatação: plasticidade no texto, frases, manipulação de texto;  Formulários: caixa de seleção, campo texto, menu suspenso, área de texto, botões de rádio, botão submit.
  5. 5. AW1 – Aplicações para Web I HTML - I 5 Iniciaremos a aula assistindo a um vídeo introdutório à HTML: HTML: introdução, conceitos e definições HTML Básico
  6. 6. AW1 – Aplicações para Web I HTML - I 6 O que é HTML: • H yper T ext M arkup L anguage é uma meta linguagem com a qual se definem as páginas web; • conjunto de etiquetas (tag’s ou marcas) que servem para definir a forma na qual se apresentará o texto e outros elementos da página; • fácil de aprender e de criar; • através de editores de texto simples ou do tipo WYSIWYG (What you See It What you Get); • documentos podem ser criados com as extensões .html ou htm; • Trabalha em conjunto com várias outras linguagens tais como PHP, JavaScript e ASP.
  7. 7. AW1 – Aplicações para Web I HTML - I 7 HTML: origem e evolução • SGML – torna-se um padrão ISO em 1986 e deu origem a HTML • HTML – 1992 Tim Berners-Lee criou a HTML • HTML+ - 1993 • HTML2.0 – 1994 • HTML3.2 – 1996 • HTML4.0 – 1997 • HTML4.1 – 1999 • XHTML – 1999 • XML – 2000 • HTML5.0 2008 (mas ainda no “forno”) Sir. Tim Berners-Lee Fonte: tw.rpi.edu/launch/berne rs-lee.html
  8. 8. AW1 – Aplicações para Web I HTML - I 8 Documentos HTML: • descrevem páginas da web que são documentos HTML; • estes documentos ou arquivos contêm tags HTML, imagens, vídeos e textos simples; • os arquivos HTML são nomeados com o sufixo .htm ou .html; • tais arquivos, quando submetidos aos browsers ou navegadores são interpretados e executados; • os documentos HTML podem ser criados e editados por qualquer editor de texto, desde que na forma de texto simples, sem qualquer formatação; • porém, existem editores especializados em documentos HTML (alguns pagos outros gratuitos);
  9. 9. AW1 – Aplicações para Web I HTML - I 9 Você pode utilizar o editor de sua preferência, mas o editor que vou utilizar em nossas aulas é o MAX's HTML Beauty++ 2004, que é gratuito e pode ser carregado atrvés do link: http://www.max.rs/htmlbeauty/bsetup.exe Documentos HTML: Para os alunos que desejarem utilizar este editor e precisam de instruções para a sua instalação, devem clicar no botão abaixo. Os demais alunos podem seguir em frente na aula, clicando na seta para a direita, abaixo. Instalar editor MAX’s HTML
  10. 10. AW1 – Aplicações para Web I HTML - I 10 HTML básico: Enfim, a partir daqui se inicia o conhecimento sobre a construção de páginas utilizando a linguagem de marcação HTML e suas respectivas tag’s. Você vai aprender sobre elas nos próximos tópicos.
  11. 11. AW1 – Aplicações para Web I HTML - I 11 HTML básico: a estrutura Um documento HTML completo é composto por uma série de tag’s que identificam basicamente duas seções documentais: 1-seção cabeçalho composta pela subseção de título do documento e pela subseção de configurações e a 2-seção de corpo do documento, onde deverá conter o conteúdo do documento ou página web, propriamente ditos. Doc HTML 1a seção 2a seção
  12. 12. AW1 – Aplicações para Web I HTML - I 12 HTML básico: a estrutura As tag’s que compoem a estrutura básica são: <HTML> </HTML> ………. Envolvem todo o documento HTML <HEAD> </HEAD> ………. Envolvem Título, Configurações e Scripts tais como JavaScript e PHP <BODY> </BODY> ………. Envolvem o corpo que deverá conter todas as outras tag’s HTML Doc HTML 1a seção 2a seção
  13. 13. AW1 – Aplicações para Web I HTML - I 13 HTML básico: cabeçalho <h1>, <h2>, … <h6> Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9, o resultado será o que se vê a direita.
  14. 14. AW1 – Aplicações para Web I HTML - I 14 HTML básico: parágrafo <p> </p> Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9, o resultado será o que se vê a direita.
  15. 15. AW1 – Aplicações para Web I HTML - I 15 HTML básico: quebra de linha <br> Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9, o resultado será o que se vê a direita.
  16. 16. AW1 – Aplicações para Web I HTML - I 16 HTML básico: linha horizontal <hr> Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9, o resultado será o que se vê a direita.
  17. 17. AW1 – Aplicações para Web I HTML - I 17 HTML básico: comentários <! - - - - > Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9, o resultado será o que se vê a direita.
  18. 18. AW1 – Aplicações para Web I HTML - I 18 HTML formatação: A HTML disponibiliza algumas tag’s direcionadas para a formatação de textos. Esta formatação define tanto a plasticidade de cada caracter textual, quanto seus diversos tipos.
  19. 19. AW1 – Aplicações para Web I HTML - I 19 HTML formatação: plasticidade <tt>, <i>, <b>, <big> e <small> Formata caracteres textuais ou alfa-numéricos contidos em um documento. Os seus efeitos podem ser visualizados no exemplo a seguir. Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9, o resultado será o que se vê a direita.
  20. 20. AW1 – Aplicações para Web I HTML - I 20 Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9, o resultado será o que se vê a direita. HTML básico: tag’s de frases <em>, <strong>, <dfn>, <code>, <samp>, <kbd>, <var> e <cite>
  21. 21. AW1 – Aplicações para Web I HTML - I 21 Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9, o resultado será o que se vê a direita. HTML básico: invertendo texto <bdo> A tag <bdo> aceita um atributo “dir” que pode conter um dos dois valores: “ltr” (direita para esquerda) ou “rtl” (esquerda para direita).
  22. 22. AW1 – Aplicações para Web I HTML - I 22 Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9, o resultado será o que se vê a direita. HTML básico: inserindo e rejeitando texto <ins> e <del>
  23. 23. AW1 – Aplicações para Web I HTML - I 23 Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9, o resultado será o que se vê a direita. HTML básico: texto pré-formatado <pre> Textos formatados com esta tag é exibido em uma fonte de tamanho fixo (geralmente Courier), e preserva os espaços e quebras de linha.
  24. 24. AW1 – Aplicações para Web I HTML - I 24 Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9, o resultado será o que se vê a direita. HTML básico: sobrescrito e subescrito <sub> e <sup>
  25. 25. AW1 – Aplicações para Web I HTML - I 25 HTML formulários Formulários têm o objetivo de interagir com o usuário, possibilitando manipulação de dados através do teclado A HTML possui várias tag’s para manipulação de dados. Formu- lários podem conter elementos de entrada: campos de texto, checkboxes, botões de rádio, botão de envio de dados. Também podem conter menus select, textarea, fieldset, legenda, e rótulo. A tag <form> é usada para criar um formulário HTML para entrada do usuário, mas sozinha não produz absolutamente nada e para isto é necessário outras tags tal como a tag <input> e seus diversos tipo de entradas.
  26. 26. AW1 – Aplicações para Web I HTML - I 26 Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9, o resultado será o que se vê a direita. HTML formulários: entrada <input> text, checkbox, hiden, radio, image, submit, reset e password
  27. 27. AW1 – Aplicações para Web I HTML - I 27 HTML formulários: entrada <input> 1-Esta linha faz a entrada de dados através de um campo do tipo texto 2-Aqui o usuário deverá digitar uma senha cujo comprimento máximo é de 4 caracteres. Este campo tem o tipo de password e diferencia do tipo text, por não permitir que o que for digitado não possa ser visualizado. 3-Nesta linha, o campo é do tipo file. Ele permite que o usuário informe o nome de um arquivo ou, caso pressione o botão “Selecionar arquivo”, uma janela do Explorer se abirá possibilitando que o usuário procure o arquivo através dos dispositivos e/ou pastas do sistema. 4-É apenas uma linha de texto com uma quebra de linha <BR> 5-É apenas uma linha de texto com uma quebra de linha <BR> 6 e 7- São linhas que criam opções de caixa de texto para seleção de uma ou mais opções. Note-se que a linha (6) deverá ficar marcada por padrão. Análise das linhas do formulário anterior:
  28. 28. AW1 – Aplicações para Web I HTML - I 28 8-Esta linha estabelece um campo oculto (hidden). Este tipo de campo, apensar de não ser visualizado pode ser utilizado para enviar dados para o servidor. 9-É apenas uma linha de texto com uma quebra de linha <BR> 10,11 e 12- São linhas que criam opções de botão do tipo rádio para seleção de uma das opções. A linha (12) foi marcada previamente com padrão. 13-Esta linha cria um botão como uma imagem a ser determinada pelo atributo src. Assim, a respectiva imagem torna-se um botão clicável. 14-Nesta linha é criado um botão cuja finalidade é enviar todos os dados estabelecidos dentro das tag’s <form> e </form> para um servidor. 15-Nesta linha é criado um botão de reset cuja finalidade, quando clicado, é limpar todos os outros campos do formulário. HTML formulários: entrada <input> Continuação da análise das linhas do formulário anterior:
  29. 29. AW1 – Aplicações para Web I HTML - I 29 HTML formulários: entrada <input> A tag <input> possui vários atributos que podem ser consultados na tabela de atributos do tópico 3.5.1 – HTML: formulários <input> da nossa apostila de AW1.
  30. 30. AW1 – Aplicações para Web I HTML - I 30 Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9, o resultado será o que se vê a direita. HTML formulários: área de texto <textarea> *Consulte a tabela de atributos da tag <textarea> em nossa apostila.
  31. 31. AW1 – Aplicações para Web I HTML - I 31 Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9, o resultado será o que se vê a direita. HTML formulários: menu suspenso <select>
  32. 32. AW1 – Aplicações para Web I HTML - I 32 Terminamos aqui a primeira parte da aula de HTML. Se você testou todos os codigos apresentados nesta aula, parabens!!! Por consequência, você fez toda a lista de exercícios proposta na apostila. ;-) HTML
  33. 33. 33 Instalação do editor MAX’s HTML Depois de concluído o download do arquivo de instalação, execute-o clicando duas vezes no mesmo. A caixa de diálogo abaixo ilustrada se abrirá. Passo 1
  34. 34. 34 Instalação do editor MAX’s HTML Clique no botão NEXT para prosseguir com a instalação. Passo 2 Uma nova caixa se abrirá solicitando o aceite dos termos de utilização do software. Passo 3
  35. 35. 35 Instalação do editor MAX’s HTML Caso concorde com os termos propostos nesta caixa de diálogo, selecione a apção: “I accept agreement” (“Eu concordo”) e clique no botão NEXT para prosseguir com a instalação.. Passo 4 Uma terceira caixa de diálogo se abrirá solicitando que seja informado o local onde deverá ser instalado o editor. Passo 5
  36. 36. 36 Instalação do editor MAX’s HTML Caso deseje manter a sugestão de local da instalação do editor proposta pela caixa de diálogo, pressione NEXT para prosseguir. Passo 6 Outra caixa se abrirá sugerindo o local de instalação das configurações do software. Assim, pressione novamente NEXT e prossiga a instalação. Passo 7
  37. 37. 37 Instalação do editor MAX’s HTML A próxima caixa solicitará a confirmação das tarefas adicionais a serem instaladas. Se concordar, mantenha todas as caixas de seleção marcadas e pressione novamente NEXT para prosseguir com a instalação. Passo 8
  38. 38. 38 Instalação do editor MAX’s HTML Caso deseje manter a sugestão de local da instalação do editor proposta pela caixa de diálogo, pressione NEXT para prosseguir. Passo 9
  39. 39. 39 Instalação do editor MAX’s HTML Como ultima caixa de diálogo do processo de instalação do editor, a caixa anterior resume sobre as opções escolhidas nas outras caixas. Caso todas as opções estejam de acordo com as desejadas, finalize a operação de instalação pressionando o botão INSTALL. Passo 10
  40. 40. AW1 – Aplicações para Web I HTML - I 40 Outras linguagens: • VRML: Trata imagens 3D com movimento; • PERL: Utilizado como contadores, relógios, listagens, formulários, etc.; • JAVA: Prática e segura é lida por qualquer browser para criar animações, proteções, etc.; • JavaScript: Parecida com JAVA, porém pode ser inserida através tag’s enquanto JAVA usa applets; • CGI: Acrónimo de Common Gateway Interface. Utilizado na geração de páginas dinâmicas, permitindo a um navegador passar parâmetros para um programa alojado num servidor web.

×