Aula 4 - HTML

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

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

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.

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

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

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.

HTML - II
9
HTML: imagens
<img>
Imagens são conteúdos de arquivos gráficos do tipo .bmp, .jpg,
.tiff, .png, etc

HTML - II
10
HTML: imagens
<img> associado com <a>
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

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.

HTML - II
12
HTML: frames

HTML - II
13
HTML: frames
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

HTML - II
14
HTML: frames
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>!!!

HTML - II
15
HTML: frames
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).

HTML - II
16
HTML: frames
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)

HTML - II
17
HTML: frames
Vejamos, abaixo, um exemplo de Frame, utilizando
particionamento Tanto na horizontal, quanto na vertical.

HTML - II
18
HTML: frames
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.

HTML - II
19
HTML: frame de navegação
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.

HTML - II
20
HTML: frame de navegação
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

HTML - II
21
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.

HTML - II
22
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.

HTML - II
23
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.

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.

HTML - II
25
HTML: tabela

HTML - II
26
HTML: tabela
Como mesclar células de uma tabela:

HTML - II
27
HTML: tabela
É possível inserir imagens em céluas de uma tabela.

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.

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
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 !!

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

HTML - II
36
Entregue os documentos gerados
peloTrabalho proposto
ao seu tutor.
Este trabalho será testado e
avaliado.
Até a próxima aula. ;-)

Aula 4 - HTML

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Aula 4 - HTML

Aula 4 - HTML