Aula 3 - HTML

1

Apresentação da Disciplina

Aula Período Objetivos

3. HTML: conceitos e marcações

31/08/2015 a 13/09/2015

Definir e conceituar a HTML; definir páginas e hiperlinks; apresentar as tags da linguagem; abordar a construção de títulos e formatar textos; apresentar a construção de formulários de recepção de dados

Aula 3: 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!

3

AW1 – Aplicações para Web IHTML - I

Recordando a aula passada: Formas de conexão:

Por fio: primeiro meio de transmissão utilizado e usavam modens do tipo: modem dial-Up, modem xDSL, modem a cabo e modem para transmissão em rede elétrica;

Por ondas: transferência de informação sem a utilização de cabos metálicos; conhecido também como wireless ou Wi-Fi; engloba diversos tipos de rádios, celulares, PDA’s, GPS, controle de portas, mouses e teclados, etc.

Equipamentos:

por usuário: linha telco(RJ11 e 45), cabo e celular, modem ou placa de rede;

por ISP: lbanda larga, modem a cabo, link satélite, WAN e LAN, roteadores, Switchs, fibras, óticas, etc.

Por PoP: roteadores de alta velocidade inteligando outros roteadores;

Serviços: www, correio, transmissão remota, comparitlhamento arquivo, etc.

4


O que veremos nesta aula:

Conceito de HTML Documentos HTML

Instalando um Editor HTML 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.

5


Iniciaremos a aula assistindo a um vídeo introdutório à HTML:

HTML: introdução, conceitos e definições

HTML Básico

http://etec.citis.com.br/mod/url/view.php?id=20647

6


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.

7


HTML: origem e evolução

• SGML – torna-se um padrão ISO em 1986 e deu origem a HTML

• HTML – 1992 Tim Berners-Lee criou a HTML• HTML+ - 1993• HTML2.0 – 1994• HTML3.2 – 1996• HTML4.0 – 1997• HTML4.1 – 1999• XHTML – 1999• XML – 2000• HTML5.0 2008 (mas ainda no “forno”)

Sir. Tim Berners-Lee

Fonte: tw.rpi.edu/launch/bern

ers-lee.html

8


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

9


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

http://www.max.rs/htmlbeauty/bsetup.exe

10


HTML básico:

Enfim, a partir daqui se inicia o conhecimento sobre a construção de páginas utilizando a linguagem de marcação HTML e suas respectivas tag’s. Você vai aprender sobre elas nos próximos tópicos.

11


HTML básico: a estruturaUm documento HTML completo é composto por uma série de tag’s que identificam basicamente duas seções documentais: 1-seção cabeçalho composta pela subseção de título do documento e pela subseção de configurações e a 2-seção de corpo do documento, onde deverá conter o conteúdo do documento ou página web, propriamente ditos.

Doc HTML

1a seção

2a seção

12


HTML básico: a estruturaAs tag’s que compoem a estrutura básica são:<HTML> </HTML> ………. Envolvem todo o documento HTML<HEAD> </HEAD> ………. Envolvem Título, Configurações e Scripts tais como JavaScript e PHP<BODY> </BODY> ………. Envolvem o corpo que deverá conter todas as outras tag’s HTML

Doc HTML

1a seção

2a seção

13


HTML básico: cabeçalho

<h1>, <h2>, … <h6>

Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9, o resultado será o que se vê a direita.

14


HTML básico: parágrafo

<p> </p>


15


HTML básico: quebra de linha

<br>


16


HTML básico: linha horizontal<hr>


17


HTML básico: comentários

<! - - - - >


18


HTML formatação:

A HTML disponibiliza algumas tag’s direcionadaspara a formatação de textos. Esta formatação define tanto a plasticidade de cada caractertextual, quanto seus diversos tipos.

19


HTML formatação: plasticidade<tt>, <i>, <b>, <big> e <small>

Formata caracteres textuais ou alfa-numéricos contidos em um documento. Os seus efeitos podem ser visualizados no exemplo a seguir.


20



HTML básico: tag’s de frases<em>, <strong>, <dfn>, <code>, <samp>,

<kbd>, <var> e <cite>

21



HTML básico: invertendo texto <bdo>

A tag <bdo> aceita um atributo “dir” que pode conter um dos dois valores: “ltr” (direita para esquerda) ou “rtl” (esquerda para direita).

22



HTML básico: inserindo e rejeitando texto

<ins> e <del>

23



HTML básico: texto pré-formatado<pre>

Textos formatados com esta tag é exibido em uma fonte de tamanho fixo

(geralmente Courier), e preserva os espaços e quebras de linha.

24



HTML básico: sobrescrito e subescrito

<sub> e <sup>

25


HTML formulários

Formulários têm o objetivo de interagir com o usuário, possibilitando manipulação de dados através do teclado

A HTML possui várias tag’s para manipulação de dados. Formu-lários podem conter elementos de entrada: campos de texto, checkboxes, botões de rádio, botão de envio de dados. Tambémpodem conter menus select, textarea, fieldset, legenda, e rótulo.

A tag <form> é usada para criar um formulário HTML para entrada do usuário, mas sozinha não produz absolutamente nada e para isto é necessário outras tags tal como a tag <input> e seus diversos tipo de entradas.

26



HTML formulários: entrada <input>text, checkbox, hiden, radio, image,

submit, reset e password

27


HTML formulários: entrada <input>

1-Esta linha faz a entrada de dados através de um campo do tipo texto2-Aqui o usuário deverá digitar uma senha cujo comprimento máximo é de 4 caracteres. Este campo tem o tipo de password e diferencia do tipo text, por não permitir que o que for digitado não possa ser visualizado.3-Nesta linha, o campo é do tipo file. Ele permite que o usuário informe o nome de um arquivo ou, caso pressione o botão “Selecionar arquivo”, uma janela do Explorer se abirá possibilitando que o usuário procure o arquivo através dos dispositivos e/ou pastas do sistema.4-É apenas uma linha de texto com uma quebra de linha <BR>5-É apenas uma linha de texto com uma quebra de linha <BR>6 e 7- São linhas que criam opções de caixa de texto para seleção de uma ou mais opções. Note-se que a linha (6) deverá ficar marcada por padrão.

Análise das linhas do formulário anterior:

28


8-Esta linha estabelece um campo oculto (hidden). Este tipo de campo, apensar de não ser visualizado pode ser utilizado para enviar dados para o servidor. 9-É apenas uma linha de texto com uma quebra de linha <BR>10,11 e 12- São linhas que criam opções de botão do tipo rádio para seleção de uma das opções. A linha (12) foi marcada previamente com padrão.13-Esta linha cria um botão como uma imagem a ser determinada pelo atributo src. Assim, a respectiva imagem torna-se um botão clicável.14-Nesta linha é criado um botão cuja finalidade é enviar todos os dados estabelecidos dentro das tag’s <form> e </form> para um servidor.15-Nesta linha é criado um botão de reset cuja finalidade, quando clicado, é limpar todos os outros campos do formulário.

HTML formulários: entrada <input>Continuação da análise das linhas do formulário anterior:

29


HTML formulários: entrada <input>

A tag <input> possui vários atributos que podem ser consultadosna tabela de atributos do tópico 3.5.1 – HTML: formulários <input>da nossa apostila de AW1.

30



HTML formulários: área de texto

<textarea>

*Consulte a tabela de atributos da tag <textarea> em nossa apostila.

31



HTML formulários: menu suspenso

<select>

32


Terminamos aqui a primeira 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. ;-)

HTML

33

Instalação do editor MAX’s HTML

Depois de concluído o download do arquivo de instalação, execute-o clicando duas vezes no mesmo. A caixa de diálogo abaixo ilustrada se abrirá.

Passo 1

34


Clique no botão NEXT para prosseguir com a instalação.Passo 2

Uma nova caixa se abrirá solicitando o aceite dos termos de utilização do software.Passo 3

35


Caso concorde com os termos propostos nesta caixa de diálogo, selecione a apção: “I accept agreement” (“Eu concordo”) e clique no botão NEXT paraprosseguir com a instalação..

Passo 4

Uma terceira caixa de diálogo se abrirá solicitando que seja informado o local onde deverá ser instalado o editor.

Passo 5

36


Caso deseje manter a sugestão de local da instalação do editor proposta pela

caixa de diálogo, pressione NEXT para prosseguir.

Passo 6

Outra caixa se abrirá sugerindo o local de instalação das configurações do software. Assim, pressione novamente NEXT e prossiga a instalação.

Passo 7

37


A próxima caixa solicitará a confirmação das tarefas adicionais a serem instaladas.

Se concordar, mantenha todas as caixas de seleção marcadas e pressione

novamente NEXT para prosseguir com a instalação.

Passo 8

38


Caso deseje manter a sugestão de local da instalação do editor proposta pela

caixa de diálogo, pressione NEXT para prosseguir.

Passo 9

39


Como ultima caixa de diálogo do processo de instalação do editor, a caixa anterior

resume sobre as opções escolhidas nas outras caixas. Caso todas as opções

estejam de acordo com as desejadas, finalize a operação de instalação pressionando o botão INSTALL.

Passo 10

40


Outras linguagens:

• VRML: Trata imagens 3D com movimento;• PERL: Utilizado como contadores, relógios,

listagens, formulários, etc.;• JAVA: Prática e segura é lida por qualquer browser

para criar animações, proteções, etc.;• JavaScript: Parecida com JAVA, porém pode ser

inserida através tag’s enquanto JAVA usa applets;• CGI: Acrónimo de Common Gateway Interface.

Utilizado na geração de páginas dinâmicas, permitindo a um navegador passar parâmetros para um programa alojado num servidor web.

Internet

Aula 3 - HTML