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!

AW1 – Aplicações para Web I
HTML - I
3
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.

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

HTML - I
5
Iniciaremos a aula assistindo a um
vídeo introdutório à HTML:
HTML: introdução, conceitos e definições
HTML Básico

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

HTML - I
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/berne
rs-lee.html

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

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

HTML - I
11
HTML básico: a estrutura
Um 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

HTML - I
12
HTML básico: a estrutura
As 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

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

HTML - I
14
HTML básico: parágrafo
<p> </p>

HTML - I
15
HTML básico: quebra de linha
<br>

HTML - I
16
HTML básico: linha horizontal
<hr>

HTML - I
17
HTML básico: comentários
<! - - - - >

HTML - I
18
HTML formatação:
A HTML disponibiliza algumas tag’s direcionadas
para a formatação de textos. Esta formatação
define tanto a plasticidade de cada caracter
textual, quanto seus diversos tipos.

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

HTML - I
20
HTML básico: tag’s de frases
<em>, <strong>, <dfn>, <code>, <samp>,
<kbd>, <var> e <cite>

HTML - I
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).

HTML - I
22
HTML básico: inserindo e
rejeitando texto
<ins> e <del>

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

HTML - I
24
HTML básico: sobrescrito e subescrito
<sub> e <sup>

HTML - I
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ém
podem 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.

HTML - I
26
HTML formulários: entrada <input>
text, checkbox, hiden, radio, image,
submit, reset e password

HTML - I
27
1-Esta linha faz a entrada de dados através de um campo do tipo texto
2-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>
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:

HTML - I
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.
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.
Continuação da análise das linhas do formulário anterior:

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

HTML - I
30
HTML formulários: área de texto
<textarea>
*Consulte a tabela de atributos da tag <textarea> em nossa apostila.

HTML - I
31
HTML formulários: menu suspenso
<select>

HTML - I
32
Terminamos aqui a primeira 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. ;-)
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 para
prosseguir 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

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

Aula 3 - HTML

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Aula 3 - HTML

Aula 3 - HTML