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
AW1 – Aplicações para Web IHTML - I
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
AW1 – Aplicações para Web IHTML - I
Iniciaremos a aula assistindo a um vídeo introdutório à HTML:
HTML: introdução, conceitos e definições
HTML Básico
6
AW1 – Aplicações para Web IHTML - I
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
AW1 – Aplicações para Web IHTML - I
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
AW1 – Aplicações para Web IHTML - I
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
AW1 – Aplicações para Web IHTML - I
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
10
AW1 – Aplicações para Web IHTML - I
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
AW1 – Aplicações para Web IHTML - I
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
AW1 – Aplicações para Web IHTML - I
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
AW1 – Aplicações para Web IHTML - I
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
AW1 – Aplicações para Web IHTML - I
HTML básico: parágrafo
<p> </p>
Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9, o resultado será o que se vê a direita.
15
AW1 – Aplicações para Web IHTML - I
HTML básico: quebra de linha
<br>
Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9, o resultado será o que se vê a direita.
16
AW1 – Aplicações para Web IHTML - I
HTML básico: linha horizontal<hr>
Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9, o resultado será o que se vê a direita.
17
AW1 – Aplicações para Web IHTML - I
HTML básico: comentários
<! - - - - >
Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9, o resultado será o que se vê a direita.
18
AW1 – Aplicações para Web IHTML - I
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
AW1 – Aplicações para Web IHTML - I
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.
Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9, o resultado será o que se vê a direita.
20
AW1 – Aplicações para Web IHTML - I
Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9, o resultado será o que se vê a direita.
HTML básico: tag’s de frases<em>, <strong>, <dfn>, <code>, <samp>,
<kbd>, <var> e <cite>
21
AW1 – Aplicações para Web IHTML - I
Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9, o resultado será o que se vê a direita.
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
AW1 – Aplicações para Web IHTML - I
Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9, o resultado será o que se vê a direita.
HTML básico: inserindo e rejeitando texto
<ins> e <del>
23
AW1 – Aplicações para Web IHTML - I
Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9, o resultado será o que se vê a direita.
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
AW1 – Aplicações para Web IHTML - I
Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9, o resultado será o que se vê a direita.
HTML básico: sobrescrito e subescrito
<sub> e <sup>
25
AW1 – Aplicações para Web IHTML - I
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
AW1 – Aplicações para Web IHTML - I
Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9, o resultado será o que se vê a direita.
HTML formulários: entrada <input>text, checkbox, hiden, radio, image,
submit, reset e password
27
AW1 – Aplicações para Web IHTML - I
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
AW1 – Aplicações para Web IHTML - I
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
AW1 – Aplicações para Web IHTML - I
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
AW1 – Aplicações para Web IHTML - I
Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9, o resultado será o que se vê a direita.
HTML formulários: área de texto
<textarea>
*Consulte a tabela de atributos da tag <textarea> em nossa apostila.
31
AW1 – Aplicações para Web IHTML - I
Digitando o código da esquerda no MAX’s Beauty++ e pressionando F9, o resultado será o que se vê a direita.
HTML formulários: menu suspenso
<select>
32
AW1 – Aplicações para Web IHTML - I
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
Instalação do editor MAX’s HTML
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
Instalação do editor MAX’s HTML
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
Instalação do editor MAX’s HTML
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
Instalação do editor MAX’s HTML
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
Instalação do editor MAX’s HTML
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
Instalação do editor MAX’s HTML
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
AW1 – Aplicações para Web IHTML - I
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.