Post on 17-Aug-2015
1
Apresentação da Disciplina
Aula Período Objetivos
4. HTML: conceitos e marcações (continuaçã
o)
14/09/2015 a 27/09/201
5
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
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!
AW1 – Aplicações para Web IHTML - 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.
AW1 – Aplicações para Web IHTML - 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
AW1 – Aplicações para Web IHTML - 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.
AW1 – Aplicações para Web IHTML - 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);
AW1 – Aplicações para Web IHTML - 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 deinstruções para a sua instalação, devem clicar no botão abaixo. Os demais alunos podem seguir em frente na aula, clicando naseta para a direita, abaixo.Instalar editor
MAX’s HTML
AW1 – Aplicações para Web IHTML - 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.
AW1 – Aplicações para Web IHTML - 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
AW1 – Aplicações para Web IHTML - 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 conteroutros elementos HTML dentro deles mesmos. Veja a imagem do exemplo anterior transformada em um link.
http://www.brasil.gov.br/logo.gif
AW1 – Aplicações para Web IHTML - 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 verticalmenteou 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 comoApresentado no próximo slide.
AW1 – Aplicações para Web IHTML - II
12
HTML: frames
<frameset> e <frame>
AW1 – Aplicações para Web IHTML - II
13Digitando 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
AW1 – Aplicações para Web IHTML - 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>!!!
AW1 – Aplicações para Web IHTML - 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).
AW1 – Aplicações para Web IHTML - 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 “*” foiinserido para substituir o ultimo atributo referente a terceira coluna.No exemplo (2) o dimensionamento feito em pixel’s (primeira janela com 180pixels de largura, a segunda com 250 pixels e a terceira janela com o restante da tela)
AW1 – Aplicações para Web IHTML - II
17Digitando 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.
AW1 – Aplicações para Web IHTML - II
18
HTML: frames<frameset> e <frame>
Normalmente, as janelas criadas em frameset têm todasas 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 atributoscrolling desativado:
<frame src = “c:/frame_b.html” scrolling = “no”>
*Outros atributos podem ser consultados na nossa apostila.
AW1 – Aplicações para Web IHTML - 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 comOutra, precisaremos alterar um desses documentos. Vamos alterar oDocumento 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.
AW1 – Aplicações para Web IHTML - II
20Digitando 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 peloBrowser assim: e depois de clicado:
antes de clicar no link CEFET-MG e depois de clicado
AW1 – Aplicações para Web IHTML - II
21Digitando 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.
AW1 – Aplicações para Web IHTML - II
22Digitando 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 emTópicos. HTML disponibiliza a tag de lista não ordenada <ul> e <li> para cada elemento desta lista.
AW1 – Aplicações para Web IHTML - II
23Digitando 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.
AW1 – Aplicações para Web IHTML - 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.
AW1 – Aplicações para Web IHTML - II
25Digitando 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>
AW1 – Aplicações para Web IHTML - II
26Digitando 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:
AW1 – Aplicações para Web IHTML - II
27Digitando 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.
AW1 – Aplicações para Web IHTML - 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 amareloR
G B
Que, neste exemplo, resulta na cor amarela. Para mais informaçõesvamos passar para a próxima aula (CSS) que tratará de formatações.
AW1 – Aplicações para Web IHTML - 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
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 !!
AW1 – Aplicações para Web IHTML - II
31
Terminamos aqui a última parte da aula de HTML.
Se você testou todos os codigos apresentados nestaaula, 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
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
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
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 IHTML - II
36
Entregue os documentos gerados peloTrabalho proposto
ao seu tutor.
Este trabalho será testado e avaliado.
Até a próxima aula. ;-)