1
Apresentação da Disciplina
Aula Período Objetivos
4. HTML:
conceitos e
marcações
(continuação)
14/09/2015 a
27/09/2015
A...
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 - II
3
Recordando a aula passada:
 Conceito de HTML: H yper T ext M arkup L anguage ou
l...
AW1 – Aplicações para Web I
HTML - II
4
O que veremos nesta aula:
 HTML: links
 HTML: inserindo e trabalhando com imagen...
AW1 – Aplicações para Web I
HTML - II
5
O que é HTML:O que é HTML:
• H yper T ext M arkup L anguage é uma meta linguagem c...
AW1 – Aplicações para Web I
HTML - II
6
Documentos HTML:
• descrevem páginas da web que são documentos HTML;
• estes docum...
AW1 – Aplicações para Web I
HTML - II
7
Você pode utilizar o editor de sua preferência, mas o editor que
vou utilizar em n...
AW1 – Aplicações para Web I
HTML - II
8
HTML: links
<a> e </a>
A utilização de links nas páginas HTML é uma prática indiss...
AW1 – Aplicações para Web I
HTML - II
9
HTML: imagens
<img>
Digitando o código da esquerda no MAX’s Beauty++ e pressionand...
AW1 – Aplicações para Web I
HTML - II
10
HTML: imagens
<img> associado com <a>
Digitando o código da esquerda no MAX’s Bea...
AW1 – Aplicações para Web I
HTML - II
11
HTML: frames
<frameset> e <frame>
<frameset> define um conjunto de quadros e trab...
AW1 – Aplicações para Web I
HTML - II
12
HTML: frames
<frameset> e <frame>
AW1 – Aplicações para Web I
HTML - II
13
Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9,
o resultado s...
AW1 – Aplicações para Web I
HTML - II
14
HTML: frames
<frameset> e <frame>
ATENÇÃO !!!
Devemos atentar para a colocação da...
AW1 – Aplicações para Web I
HTML - II
15
HTML: frames
<frameset> e <frame>
ATENÇÃO !!!
A criação de frames exige a definiç...
AW1 – Aplicações para Web I
HTML - II
16
HTML: frames
<frameset> e <frame>
ATENÇÃO !!!
Vejamos dois exemplos de dimensiona...
AW1 – Aplicações para Web I
HTML - II
17
Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9,
o resultado s...
AW1 – Aplicações para Web I
HTML - II
18
HTML: frames
<frameset> e <frame>
Normalmente, as janelas criadas em frameset têm...
AW1 – Aplicações para Web I
HTML - II
19
HTML: frame de navegação
<frameset> e <frame>
Lembra-se dos três documentos que c...
AW1 – Aplicações para Web I
HTML - II
20
Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9,
o resultado s...
AW1 – Aplicações para Web I
HTML - II
21
Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9,
o resultado s...
AW1 – Aplicações para Web I
HTML - II
22
Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9,
o resultado s...
AW1 – Aplicações para Web I
HTML - II
23
Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9,
o resultado s...
AW1 – Aplicações para Web I
HTML - II
24
HTML: tabela
<table> <tr>, <th> e <td>
 A marca <table> define uma tabela HTML.
...
AW1 – Aplicações para Web I
HTML - II
25
Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9,
o resultado s...
AW1 – Aplicações para Web I
HTML - II
26
Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9,
o resultado s...
AW1 – Aplicações para Web I
HTML - II
27
Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9,
o resultado s...
AW1 – Aplicações para Web I
HTML - II
28
HTML: cores
As cores em HTML são definidas usando uma notação hexadecimal
(HEX) p...
AW1 – Aplicações para Web I
HTML - II
29
Além dos conhecimentos adquiridos sobre tag’s
HTML, é importante considerar també...
30
Dicas básicas de WebDesigners
 Evite uso de animações, sons e videos. Só use estes recursos
se eles forem raelmente ne...
AW1 – Aplicações para Web I
HTML - II
31
Terminamos aqui a última parte da
aula de HTML.
Se você testou todos os codigos a...
32
Eis, abaixo, a tela principa. Ela foi dividida em três frames: cabeçalho, menu e corpo.
A opção [Home] é como se apesen...
33
Cada opção do item “Instituições” é um link que deve remeter para os seus respectivos sites:
CAPES: http://www.capes.go...
34
Eis, abaixo, um exemplo após seleção do link FAPEMIG.
35
Eis, abaixo, a tela após seleção do link “Cadastre-se”.
AW1 – Aplicações para Web I
HTML - II
36
Entregue os documentos gerados
peloTrabalho proposto
ao seu tutor.
Este trabalho ...
Próximos SlideShares
Carregando em…5
×

Aula 4 - HTML

287 visualizações

Publicada em

Aula 4 - HTML

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

Sem downloads
Visualizações
Visualizações totais
287
No SlideShare
0
A partir de incorporações
0
Número de incorporações
14
Ações
Compartilhamentos
0
Downloads
3
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Aula 4 - HTML

  1. 1. 1 Apresentação da Disciplina Aula Período Objetivos 4. HTML: conceitos e marcações (continuação) 14/09/2015 a 27/09/2015 Apresentar a técnica para elaboração de listas; abordar sobre a inserção de imagens e objetos multimídia.Abordar sobre a utilização da manipulação de tabelas; Instruir a construção de páginas com frames;. Aula 4: 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 - II 3 Recordando a aula passada:  Conceito de HTML: H yper T ext M arkup L anguage ou linguagem de tag’s utilizada para composição de páginas web.  Documentos HTML: arquivos contendo tag’s HTML cujo nome tem sufixo .htm ou .html. São interpretados e executados pelos browsers  Instalação do editor HTML denominado: MAX’s Beauty++ 2004  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.
  4. 4. AW1 – Aplicações para Web I HTML - II 4 O que veremos nesta aula:  HTML: links  HTML: inserindo e trabalhando com imagens  HTML: dividindo a tela em frames  como utilizar frames em linhas e colunas;  como aplicar navegação a frames;  HTML: criando listas  criando listas ordenadas;  criando lista não ordenadas;  criando listas de definição;  HTML: criando e manipulando tabelas  HTML: manipulando cores
  5. 5. AW1 – Aplicações para Web I HTML - II 5 O que é HTML: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.
  6. 6. AW1 – Aplicações para Web I HTML - II 6 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);
  7. 7. AW1 – Aplicações para Web I HTML - II 7 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
  8. 8. AW1 – Aplicações para Web I HTML - II 8 HTML: links <a> e </a> A utilização de links nas páginas HTML é uma prática indissociável da maioria dos documentos de hipertextos. (Vide atributos na apostila). Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9, o resultado será o que se vê a direita.
  9. 9. AW1 – Aplicações para Web I HTML - II 9 HTML: imagens <img> Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9, o resultado será o que se vê a direita. Imagens são conteúdos de arquivos gráficos do tipo .bmp, .jpg, .tiff, .png, etc
  10. 10. AW1 – Aplicações para Web I HTML - II 10 HTML: imagens <img> associado com <a> Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9, o resultado será o que se vê a direita. A maioria dos elementos HTML pode ser aninhada, ou seja, pode conter outros elementos HTML dentro deles mesmos. Veja a imagem do exemplo anterior transformada em um link. http://www.brasil.gov.br/logo.gif
  11. 11. AW1 – Aplicações para Web I HTML - II 11 HTML: frames <frameset> e <frame> <frameset> define um conjunto de quadros e trabalha com uma ou mais tag’s <frame> que é a tag que realmente define cada quadro da tela. Esses quadros podem ser dispostos horizontal ou verticalmente ou ambos. A tag <frame> define uma determinada janela (frame) dentro de um conjunto de quadros. Afim de exemplificar a utilização dessas tag’s, vamos criar três páginas ou documentos HTML bem simples, denominadas: frame_a.html, frame_b.html e frame_c.html, respectivamente, tal como Apresentado no próximo slide.
  12. 12. AW1 – Aplicações para Web I HTML - II 12 HTML: frames <frameset> e <frame>
  13. 13. AW1 – Aplicações para Web I HTML - II 13 Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9, o resultado será o que se vê a direita. HTML: frames <frameset> e <frame> 25% 50% 25% Criamos, abaixo, três frames dispostas em colunas, evocando os três documentos: frame_a.html, frame_b.html e frame_c.html
  14. 14. AW1 – Aplicações para Web I HTML - II 14 HTML: frames <frameset> e <frame> ATENÇÃO !!! Devemos atentar para a colocação das tag’s <frameset> e <frame>. Observe que os frames são criados fora da tag <BODY>!!!
  15. 15. AW1 – Aplicações para Web I HTML - II 15 HTML: frames <frameset> e <frame> ATENÇÃO !!! A criação de frames exige a definição de três caraterísticas: 1. Tipo de distribuição (horizontal ou vertical); 2. Quantidade de frames; 3. Tipo de medida (em fixels ou porcentagem).
  16. 16. AW1 – Aplicações para Web I HTML - II 16 HTML: frames <frameset> e <frame> ATENÇÃO !!! Vejamos dois exemplos de dimensionamento da tela: Exemplo (1): <frameset cols = “25%, 50%, *”> Exemplo (2); <frameset cols = "180, 250, *"> No exemplo (1), a divisão foi feita em porcentagem. Entretanto, o atributo “*” foi inserido para substituir o ultimo atributo referente a terceira coluna. No exemplo (2) o dimensionamento feito em pixel’s (primeira janela com 180 pixels de largura, a segunda com 250 pixels e a terceira janela com o restante da tela)
  17. 17. AW1 – Aplicações para Web I HTML - II 17 Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9, o resultado será o que se vê a direita. HTML: frames <frameset> e <frame> Vejamos, abaixo, um exemplo de Frame, utilizando particionamento Tanto na horizontal, quanto na vertical.
  18. 18. AW1 – Aplicações para Web I HTML - II 18 HTML: frames <frameset> e <frame> Normalmente, as janelas criadas em frameset têm todas as características e atributos ativados, como por exemplo: a característica de rolagem. Mas podemos alterar estas características ja definição destas janelas. No exemplo abaixo, a janela do frame_c.html é criado tendo o atributo scrolling desativado: <frame src = “c:/frame_b.html” scrolling = “no”> *Outros atributos podem ser consultados na nossa apostila.
  19. 19. AW1 – Aplicações para Web I HTML - II 19 HTML: frame de navegação <frameset> e <frame> Lembra-se dos três documentos que criamos nas ultimas transparências? Pois bem. Para verficarmos como fazer com que uma frame interaja com Outra, precisaremos alterar um desses documentos. Vamos alterar o Documento frame_a.html, conforme a ilustrução abaixo. Observe que inserimos uma lista de três links, como se fosse um menu de opções. Para isto utilizamos a tag âncora <a> com o atributo target, referenciando o frame “b”. **Lembremos que “b” é o valor do atributo name do frame_b.html.
  20. 20. AW1 – Aplicações para Web I HTML - II 20 Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9, o resultado será o que se vê a direita. HTML: frame de navegação <frameset> e <frame> A execução do código descrito no slite anterior será efetuada pelo Browser assim: e depois de clicado: antes de clicar no link CEFET-MG e depois de clicado
  21. 21. AW1 – Aplicações para Web I HTML - II 21 Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9, o resultado será o que se vê a direita. HTML: listas ordenadas < ol > e < li > As listas ordenadas são formas de se organizar informações em tópicos. HTML disponibiliza a tag de lista ordenada <ol> e <li> para cada elemento desta lista.
  22. 22. AW1 – Aplicações para Web I HTML - II 22 Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9, o resultado será o que se vê a direita. HTML: listas ordenadas < ul > e < li > As listas não ordenadas são formas de se organizar informações em Tópicos. HTML disponibiliza a tag de lista não ordenada <ul> e <li> para cada elemento desta lista.
  23. 23. AW1 – Aplicações para Web I HTML - II 23 Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9, o resultado será o que se vê a direita. HTML: listas de definição < dl >, < dt > e < dd > Lista de definição é uma lista de itens, com descrição de cada item. <dl> define essa lista e é usada em conjunto com <dt> e <dd>. <dt> define um título e é usada em conjunto com <dd> que é o item.
  24. 24. AW1 – Aplicações para Web I HTML - II 24 HTML: tabela <table> <tr>, <th> e <td>  A marca <table> define uma tabela HTML.  Uma tabela HTML consiste no agrupamento de células que podem ser criadas a partir das tag’s <tr> , <th> e <td> .  A tag <tr> define uma linha da tabela, a tag <th> (opcional) define um cabeçalho, e a tag <td> define uma célula.
  25. 25. AW1 – Aplicações para Web I HTML - II 25 Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9, o resultado será o que se vê a direita. HTML: tabela <table> <tr>, <th> e <td>
  26. 26. AW1 – Aplicações para Web I HTML - II 26 Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9, o resultado será o que se vê a direita. HTML: tabela <table> <tr>, <th> e <td> Como mesclar células de uma tabela:
  27. 27. AW1 – Aplicações para Web I HTML - II 27 Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9, o resultado será o que se vê a direita. HTML: tabela <table> <tr>, <th> e <td> É possível inserir imagens em céluas de uma tabela.
  28. 28. AW1 – Aplicações para Web I HTML - II 28 HTML: cores As cores em HTML são definidas usando uma notação hexadecimal (HEX) para a combinação de vermelho (Red), verde (Green), e os valores de cor azul (Blue) que representa o acrônimo RGB. O menor valor que pode ser dado é 0 (em HEX: 00) e o maior valor é 255 (em HEX: FF). A estrutura da composição de cores é: # FF FF 00 amarelo R G B Que, neste exemplo, resulta na cor amarela. Para mais informações vamos passar para a próxima aula (CSS) que tratará de formatações.
  29. 29. AW1 – Aplicações para Web I HTML - II 29 Além dos conhecimentos adquiridos sobre tag’s HTML, é importante considerar também algumas dicas que deverão deixar nossas páginas com aspecto mais profissional. HTML
  30. 30. 30 Dicas básicas de WebDesigners  Evite uso de animações, sons e videos. Só use estes recursos se eles forem raelmente necessários para o site.  Cuidado no uso de icones. Este devem ter um função bem clara e conhecida pelo usuario. Coloque legendas quando necessario.  Overload de informação. Evite colocar textos muito longos. “Web é leve”  Use Cores com Cuidado. Branco e preto ainda é um melhor opcao para texto. Menus e botes podem ser coloridos mas requerem que sejam facilmente visiveis.  Imagens leves Evite pop ups !!
  31. 31. AW1 – Aplicações para Web I HTML - II 31 Terminamos aqui a última 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. ;-) Como tabalho final do tópico HTML, o aluno deverá desenvolver todo o código que deve dar origem as páginas mostradas nos próximos slides. HTML
  32. 32. 32 Eis, abaixo, a tela principa. Ela foi dividida em três frames: cabeçalho, menu e corpo. A opção [Home] é como se apesenta a tela corpo e o logo do cabeçalho pode ser acessado pelo link: http://www.cefetmg.br/galerias/banner/logo-cefet.png
  33. 33. 33 Cada opção do item “Instituições” é um link que deve remeter para os seus respectivos sites: CAPES: http://www.capes.gov.br/ - FAPEMIG: http://www.fapemig.br/ CNPQ: http://www.cnpq.br/ - INEP: http://www.inep.gov.br/
  34. 34. 34 Eis, abaixo, um exemplo após seleção do link FAPEMIG.
  35. 35. 35 Eis, abaixo, a tela após seleção do link “Cadastre-se”.
  36. 36. AW1 – Aplicações para Web I HTML - II 36 Entregue os documentos gerados peloTrabalho proposto ao seu tutor. Este trabalho será testado e avaliado. Até a próxima aula. ;-)

×