HTML HyperText Markup Language

(1)

Tecnologias para Web Design

HTML

HTML – HyperText Markup Language

ÿEstrutura documentos a serem apresentados por

agentes de usuários – ex. browsers

ÿO texto de um documento é incluído diretamente

no código HTML

ÿDefine âncoras e elos para a ligação entre documentos

ÿDefine outros conteúdos a serem incluídos no

documento

– Figuras, áudio, vídeo,Appletse outras tecnologias.

ÿDefine Scripts a serem interpretados pelo browser

(2)

ÿ ýüüû úùø÷ ö õôøóô ô ôø

<HTML> <HEAD>

<TITLE> Meu documento </TITLE> </HEAD> <BODY> Oi Pessoal! </BODY> </HTML> Exemplo de um documento HTML HTML – usos comuns

ÿEstruturação apenas (recomendado)

– Estrutura o documento: títulos, listas, parágrafos... – Os aspectos estéticos são determinados pelas CSS –

Folhas de Estilo em Cascata

ÿEstruturação e apresentação

– Usa-se elementos avançados da HTML para determinar os aspectos estéticos

ÿRecipiente de conteúdos

– Usa-se a HTML apenas como base para a inclusão de outras tecnologias.

(3)

HTML – estruturando documentos com TAGS

ÿA estrutura de um documento é definida por

elementos que são marcados por “TAGS”

ÿCada tag é escrita entre os sinais “<“e “>” – <TAG>

ÿAs tags são definidas a partir da SGML – Standard

Generalized Markup Language

ÿA sintaxe de uma HTML é definida num

documento SGML chamado DTD – Document

Type Definition

<TITLE> Título do documento </TITLE> </HEAD>

<BODY> texto </BODY> </HTML>

Estrutura Básica, Elementos e Tags

Tags Texto

(4)

Exemplo 1: Um documento HTML simples

ÿCabeçalho (Head)

– Título (Title)

ÿElementos do Corpo (Body)

– Cabeçalhos – Parágrafos

– Listas não-ordenadas (unordered list) – Destacando texto

– Outros elementos de marcação

Cabeçalho

ÿ<HEAD> ... </HEAD>

– Coloca-se o título do documento

– Coloca-se informações sobre o documento (autor, língua)

– Descreve-se elementos de Estilos <STYLE> – Descreve-se programa Script <SCRIPT>

(5)

Título

ÿ<TITLE> ... </TITLE>

– Deve ser curto e descrever o propósito do documento – É a maneira com o browser identifica para o usuário o

um documento

– Aparece na barra superior do browser, nosbookmarks,

nos menus de avançar e voltar, etc.

Corpo

ÿ<BODY> ... </BODY>

– É onde está colocada a parte do documento que será apresentada pelo browser

– Contém o conteúdo textual do documento

– Contém os elementos que estruturam o documento – Contém os elementos que incluem conteúdos de

imagens, sons, vídeo

(6)

ÿ ýüüû úùø÷ ö õôøóô ô ôø Cabeçalhos de texto ÿ<H1>... </H1> – <H2> ... </H2> ÿ... – <H6> ... </H6> ÿEstruturado em 6 níveis

ÿUtilizados em títulos principais e seções do texto do documento

ÿExiste um formato pré-definido

ÿPode ser alterado por atributos ou estilos

Parágrafos

ÿ<P> ... </P>

– Marca o início de um parágrafo

– A marcação de fim é opcional, um novo parágrafo ou um outro elemento de estruturação indicam o fim do parágrafo

– Espaços e “CRLF” não alteram o parágrafo – Pode ser alterado por atributos ou estilos

(7)

Listas

ÿListas não ordenadas <UL>

ÿListas ordenadas <OL>

ÿListas de definições <DL>

ÿAs listas podem ser aninhadas

Listas não-ordenadas <UL> <LI> <LI> ... </UL>

– Utiliza-se para listar tópicos

– O elemento de lista <LI> é necessário, mas não tem terminação

(8)

ÿ ýüüû úùø÷ ö õôøóô ô ôø Listas Ordenadas <OL> <LI> <LI> ... </OL>

– Utiliza-se para listar tópicos numerados – Pode-se aninhar lista

Elementos de destaque

ÿ<EM> ... </EM>

– Ênfase. Normalmente em itálico

ÿ<STRONG> ... </STRONG>

– Ênfase forte. Normalmente em negrito

ÿ Devem ser colocados no corpo delimitando o texto a ser

destacado

ÿ São elementos lógicos, ao invés de físicos como: <I>, para itálico, <B> para negrito e <TT> para fontetypewriter

(9)

Outros elementos de marcação

ÿ<HR>

– Desenha uma linha horizontal proporcional a área de exibição

ÿ<BR>

– Introduz uma quebra de linha sem inicial um novo parágrafo

ÿ 

– Força um espaço em branco no texto

Exemplo 2: Imagens e elos de hipertextos

ÿIncluindo imagens

– Alinhamento

– Imagens como links – Texto alternativo

ÿÂncoras e elos de hipertexto

– Definindo âncora origem com <A HREF...> – Definindo âncora destino com <A NAME ...>

(10)

Incluindo imagens

ÿ<IMG SRC=“nomearq”>

– “Nomearq” deve o nome do arquivo precedido ou não

dopathe da URI do servidor onde está o arquivo

ÿ<IMG SRC=“nomearq” ALIGN=“posição”>

– Posição pode sertop, middleou bottom

ÿ<IMG SRC=“nomearq” ALT=“[texto]”>

– O texto deve descrever sucintamente a imagem para os casos nos quais ela não puder ser exibida

Criando hipertexto com HTML

ÿUm dos objetivos da HTML é permitir a construção

de hipertextos

ÿHipertextos estruturam documentos em páginas,

âncoras e elos

ÿOs elos interligam as páginas

ÿUm elo é definido por uma âncora origem e uma

âncora destino

(11)

Elos e âncoras

ÿUm elo define a ligação entre um trecho de um

documento a um outro documento, ou trecho de outro documento

ÿElos são definidos por âncoras origem e destino

ÿA âncora origem é o trecho do documento exibido

que quando clicado “leva” ao documento destino

ÿA âncora destino é um arquivo completo ou o

início de um trecho do documento

Hipertexto Avaliação Objetivos Avaliação Bibliografia Avaliação Trecho da avaliação Trecho da avaliação Texto texto texto Âncora origem Âncora destino Elo (link)

(12)

Definindo âncoras e elos

ÿÂncoras e elos são definidos em documentos

HTML através das Tags e da URI

ÿÂncora origem

– <A HREF=“URI#destino”> nome_do_elo </A>

ÿÂncora destino

– <A NAME=“destino”>

Ligando trechos de documentos

ÿSímbolo #

– Usado no protocolo HTTP para referenciar trecho de um documento HTML.

ÿDocumento A tem a seguinte âncora origem

– <A

HEF=“http://www.dimap.ufrn.br/~jair/piws/home.html#avaliacao”> Avaliação </A> (novo!)

ÿDocumento B tem a seguinte âncora destino

– <A NAME=“avaliacao”> Avaliação </A>

ÿ No mesmo documento B é necessário apenas a origem

(13)

Tabelas

ÿO modelo de tabelas da HTML permite organizar

dados em linha e colunas

ÿOs dados podem ser texto, imagens, elos,

formulários, outras tabelas, etc.

ÿCada tabela pode ter uma legenda e um sumário

associada si

ÿTabelas não devem ser utilizadas para controlar o layout de páginas, embora isto seja uma prática constante

Elementos de uma tabela

ÿOs principais elementos que definem uma tabela

em HTML são tabela, linha e células

ÿQue são marcados pelas tags:

<TABLE>

(14)

Visualização dos elementos de uma tabela

Tabela, defina por <TABLE> ... </TABLE>

Linhas <TR>

Células <TD>

Cabeçalhos e dados de uma tabela

ÿ Existem dois tipos de células:

– Cabeçalho, que é marcado com a tag <TH> – Dado, que é marcado com a tag <TD>

ÿ São visualizados de forma distinta

(15)

Exemplo de cabeçalhos e dados

<TABLE> <TR><TH> l1h1 <TH> l1h2 <TH> l1h3 <TR> <TH>l2h1 <TD> l2d1 <TD> l2d2 <TR> <TH>l3h1 <TD> l3d1 <TD> l3d2 </TABLE> ÿþýü l2d1 l2d2 ÿüýü ÿüýþ ÿüý ÿýü l3d2 l3d2 Borda e espaçamentos

ÿ A borda, e o espaçamento inter- e intra-células podem ser

controlados pelos atributos, respectivamente:

ÿ <TABLE BORDER=“3” ÿ CELLSPACING=“10” ÿ CELLPADDING=“10”> ÿüýü ÿüýþ ÿüý ÿüýü ÿüýþ ÿüý ÿüýü ÿüýþ ÿüý Borda Espaçamento inter-células

(16)

Tamanho e alinhamento

ÿO tamanho da tabela e de cada célula pode ser

controlado pelo atributo width

ÿO valor deste atributo pode ser – Um valor absoluto em pixels

– Um valor percentual em relação à área de exibição do browser

– Um valor proporcional a outra células

ÿO alinhamento de cada célula deve ser definido

com o atributo align

Outros atributos

ÿUsando atributos ROWSPAN e COLSPAN

pode-se definir que uma célula estenda-pode-se por outras células

ÿCores de fundo podem ser definidas usando-se o

atributo BGCOLOR

ÿA acessibilidade pode ser melhorada usando-se o

(17)

Frames

ÿFrames (quadros) permitem múltiplas visões do

documento

ÿPodem ser janelas independentes ou sub-janelas

ÿCada visão pode ser controlada de maneira

independente pelo usuário

ÿUma visão pode conter, p.ex. um menu, outra um

banner e uma terceira um documento.

Especificando frames –1/3

ÿUm documento HTML comframes é chamado

frameset document

ÿNão possui corpo (BODY), apenas o cabeçalho

(HEAD) e o elemento FRAMESET

ÿSe o browser não tem capacidade de exibir

frames, é mostrado o conteúdo especificado pelo elemento NOFRAMES

(18)

ÿ ýüüû úùø÷ ö õôøóô ô ôø Especificando frames –2/3 ÿA estrutura de um frameset é <HEAD> ... </HEAD> <FRAMESET rows=“posicoes”> <FRAME src=“URI”> <FRAME src=“URI”> ... <NOFRAMES> ... </NOFRAMES> </FRAMESET> Especificando frames –3/3

ÿO elemento frameset deve especificar se a divisão será feita em linhas ou colunas

ÿOs valores dos atributos rows e cols podem ser

absolutos ou porcentagem

ÿPara cada linha ou coluna deve estar associado

um elemento FRAME

ÿEm cada elemento FRAME deve-se indicar a URI

do documento a ser exibido através do atributo

src=

(19)

Usando frames como menus

ÿPode-se usar um frame como menu que controla a

exibição de um outro frame.

ÿNo frame que contém os documentos a serem

exibidos:

ÿNo frame que contém o menu:

Controlando a aparência dos frames

ÿOs seguintes atributos controlam a aparência dos

frames:

– Frameborder = 1 ou 0 – Scrolling = auto, yes, no – noresize

– Marginwidth =pixels

(20)

Objetos, imagens e applets

ÿElemento OBJECT

ÿInclui imagens,applets e outros objetos em documentos HTML

ÿRecomendação do W3C na versão 4.01 da HTML

ÿO elemento APPLET deve ser evitado

Forma geral do elemento object

ÿNa descrição de um objeto a ser incluído deve especificar

– a URI do dado

– O tipoMIMEdo dado

Texto caso o browser não consiga exibir o dado. </OBJECT>

(21)

HTML

Outros elementos

BLOCKQUOTE e Q

ÿUtilizado para citações dentro do texto

ÿ<BLOCKQUOTE>texto </ BLOCKQUOTE> – Usado para citações longas que podem incluir

parágrafos

ÿ<Q> texto </Q>

(22)

Sobrescrito e Subscrito

ÿ<SUP> texto </SUP>

– O texto delimitado pelo marcadores aparece sobrescrito – E = mc<SUP>2</SUP>

ÿ<SUB> texto </SUB>

– O texto delimitado pelo marcadores aparece subscrito – H<SUB>2</SUB>O

Texto pré-formatado

ÿ<PRE> texto </PRE>

– Determina que o texto será exibido da forma como digitado

– Espaços em branco e quebras de linha são mantidos – É usado um fonte fixo

(23)

Descrição de programas de computador

ÿ<CODE> código </CODE>

– Permite apresentar um código fonte de um programa – Ignora os espaços e quebras de linha no código fonte

Marcando trechos retirados e inseridos

ÿ<DEL> texto </DEL>

– Utilizado para marcar um texto retirado com uma linha cortando o texto

ÿ<INS> texto </INS>

– Utilizado para marcar um texto inserido com sublinhado

ÿÉ o autor quem deve indicar o que retirou ou incluiu

(24)

ABBR

ÿPermite indicar a ocorrência de abreviações

<P>

<ABBR lang="fr" title="Société Nationale des Chemins de Fer"> SNCF

</ABBR>

Mapas de imagens

ÿPartes de uma imagem podem funcionar como

âncoras distintas

ÿPermite associar áreas de uma imagem com uma

determinada URI

<AREA SHAPE=“tipodaforma”> ...

</MAP>

(25)

Especificando áreas em um mapa de imagem

ÿA forma geral para especificar uma área e associar um elo é:

<AREA SHAPE=“forma básica” COORDS=“coordenadas” HREF=“URI”

ALT=“texto alternativo”>

ÿPode-se não associar o elo:

Especificando as formas básicas

ÿExistem três formas básica: retângulo, círculo, polígono

ÿDeve-se especificar a área indicando o tipo da forma e as respectivas coordenadas

– Rect: esq-x, topo-y, dir-x, base-y – Circle: centro-x, centro-y, raio – Poly: X1,X1, X2,Y2, ... Xn,Yn

(26)

HTML

Formulários

Formulários de entrada de dados em HTML

ÿIntrodução ÿControles ÿO elemento INPUT ÿO elemento BUTTON ÿO elemento SELECT ÿO elemento TEXTAREA

(27)

Introdução a formulários HTML

ÿUm formulário HTML é uma seção do corpo do

documento

ÿUm formulário é delimitado pelas tags <FORM> ... </FORM>

ÿPode conter texto, marcações e controles

ÿOs controles são utilizados para possibilitar

interação do usuário com web site

ÿExemplos de controles são:

– Botões, caixa de texto, menu, labels, etc.

Exemplo de um formulário HTML

<INPUT type=“text” name=“primnome”><BR> <INPUT type=“text” name=“sobrenome”><BR> <INPUT type=“radio” name=”sexo”

value=“M”>Masc

(28)

ÿ ýüüû úùø÷ ö õôøóô ô ôø Visualização do formulário Nome: Sobrenome: Masc Feminino

Enviar consulta Redefinir

O elemento FORM

ÿFunciona como recipiente de outros controles

ÿPode conter texto e outros elementos

ÿPode ser identificado através dos atributos id ou

name

ÿDeve ter associado uma ação através do atributo

action cujo valor é uma URI

ÿPermite especificar o método de submissão dos

dados através do atributo method que pode ser GET ou POST

(29)

Como funciona? – 1/3

ÿCada formulário, além de texto e de outros elementos HTML, contém um conjunto de controles que pertencem ao seu escopo

ÿCada controle possui um tipo, um nome, um

valor e outros atributos

ÿO tipo determina qual é o controle

ÿO nome é associado ao valor fornecido pelo

usuário durante o preenchimento do formulário

ÿCada formulário possui alguns elementos chaves

padronizados

ÿO atributo action associa o formulário com uma

URI onde deverá estar um programa

ÿEste programa deverá ser capaz de processar os

dados fornecidos através do formulário

ÿO controle submit é um botão que pode ser

(30)

ÿApós o elemento submit (botão) ter sido

pressionado o browser envia uma série de pares nome/valor com os dados fornecidos

ÿA submissão pode ser feita pelos métodos HTTP

GET ou POST

ÿNo método GET, os pares nome/valor são

enviados juntos com a URI

ÿNo método POST os pares nome/valor são

enviados no corpo da solicitação HTTP

Enviando dados pelo método POST

POST /cgi-bin/programa1 HTTP/1.0 Accept : text/plain Accept : apliation/x-html Accept : . . .

User-Agent: NSCA Mosaic for X Window System/2.4 Content-type application/x-www-form-urlencoded Content-length: 58

(31)

Enviando dados pelo método GET

GET /cgi-bin/programa1?prinnome=Jair&sobrenome=Leite... Accept : text/plain Accept : apliation/x-html Accept : . . .

User-Agent: NSCA Mosaic for X Window System/2.4 (uma linha contendo apenas CRLF)

Controles

ÿUsuários interagem com formulários através de

controles

ÿO nome de um controle é dado pelo atributo name

da respectiva tag HTML

ÿTipos de controles

– Buttons, checkboxes, radio buttons, menus, text input, file select, hidden controls

(32)

Valores de controles

ÿUm controle pode ter um valor inicial caso

especificado

ÿO valor fornecido pelo usuário é chamado valor

corrente de um controle

ÿScripts também modificam o valor corrente

ÿO valor corrente é enviado junto com o nome

quando o formulário é submetido

ÿO controle reset atribui o valor inicial a todos os controles

O elemento INPUT

ÿPermite especificar a maioria dos controles

ÿO tipo do controle é especificado pelo atributo

type e pode ser

ÿO atributo value permite definir o valor inicial

ÿO atributo name define o nome a ser associado ao

valor

ÿOutros atributos são específicos de um determinado controle

(33)

O elemento BUTTON

ÿUsado como o input, mas é mais flexível

ÿO botão pode ter um conteúdo específico que

pode ser texto ou imagem

ÿAlguns browsers oferecem uma visualização

melhor quando usa-se button

ÿForma geral

<BUTTON>texto e/ou <IMG ...></BUTTON>

O elemento SELECT

ÿDefine o controle menu

ÿPermite oferecer um conjunto de opções que o

usuário pode selecionar

ÿJunto com o select usa-se o elemento option e

optgroup

ÿO option determinar as opções do menu

ÿO optgroup agrupa opções relacionadas

ÿO atributo multiple permite que mais de uma

(34)

O elemento TEXTAREA

ÿDefine um controle para entrada de texto com

múltiplas linhas

ÿÉ necessário definir os atributos name, rows e

cols

ÿO valor inicial é colocado entra as tags

<TEXTAREA name=“nome” rows=“20” cols=“80”> texto inicial

</TEXTAREA>

O elemento LABEL

ÿPermite associar um rótulo a um controle

ÿO atributo for associa a um identificador (id) de um controle

<LABEL for=“id_idade”> Texto do rótulo

</LABEL>