Este documento apresenta uma aula sobre HTML, com o objetivo de ensinar listas, imagens, frames, tabelas e cores em HTML. A aula ocorrerá de 14/09 a 27/09 e abordará tópicos como listas, imagens, frames, criação e manipulação de tabelas e cores em HTML.
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
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. 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. 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. 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. 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. 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. 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. 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. 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. 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. AW1 – Aplicações para Web I
HTML - II
12
HTML: frames
<frameset> e <frame>
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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
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. 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
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
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/
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. ;-)