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


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

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

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

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


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

HTML: imagens<img>


Imagens são conteúdos de arquivos gráficos do tipo .bmp, .jpg, .tiff, .png, etc


10

HTML: imagens<img> associado com <a>


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


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.


12

HTML: frames

<frameset> e <frame>


13Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9,

o resultado será o que se vê a direita.


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


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


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


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)





Vejamos, abaixo, um exemplo de Frame, utilizando particionamento Tanto na horizontal, quanto na vertical.


18


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.


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.




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




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




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

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.





Como mesclar células de uma tabela:





É possível inserir imagens em céluas de uma tabela.


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.


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


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


36

Entregue os documentos gerados peloTrabalho proposto

ao seu tutor.

Este trabalho será testado e avaliado.

Até a próxima aula. ;-)

Aula 4 - HTML

Internet

Transcript of Aula 4 - HTML