Asi Aulat04 Ficha

Aplicações e Serviços
de Internet
Linguagem HTML
1
Linguagem HTML
Conteúdo
– O que é HTML?
– Como trabalhar com o HTML?
– Estrutura de uma página Web
– Elementos HTML?
2
HTML Hypertext Markup Language
Versões:
•1994 - HTML 2.0 à IETF (RFC 1886)
•1996 - HTML 3.2
•1997 - HTML 4.0
•1999 - HTML 4.01
•2000 - XHTML 1.0
•2001 - XHTML 1.1
•2017 - HTML 5.1 (ideal versão de hoje)
AVISO: Browsers não implementam as padrões

perfeitamente!
METALINGUAGEM LINGUAGEM
HTML
SGML
XHTML
Subconjunto
XML MathML
WSDL
Código HTML: Texto ASCII

Pode ser criado com um editor de texto como o Notepad ou
com um editor de HTML como o FrontPage, ou ainda
usando um utilitário que converta um documento de um
processador de texto para HTML tal como o Microsoft Word.
HTTP Header é: Content-Type: text/html
AVISO: Não é aconselhável saltar diretamente para o uso duma

ferramenta 'WYSIWYG' para criar páginas HTML: primeiro,
deveremos estar a vontade com os fundamentos da linguagem.
Se não, poderemos criar páginas de baixa qualidade.
Ferramentas para criar páginas Web
• Ferramientas de
desenho gráfico Editores para refinar o
WYSIWYG código
– Macromedia
Dreamweaver
– Adobe Golive – EditPlus
– Microsoft FrontPage – TextPad
– Microsoft Visual – UltraEdit
Interdev
– Ultradev
Ver: www.shareware.com – NotePad!!
Tags (Marcas) HTML - I
Um documento HTML é constituído por elementos HTML
identificados por tags (marcas). O nome do tag vem entre os
sinais menor (<) e maior (>) e serve para fornecer informação
descritiva ao browser não sendo mostradas na página Web
resultante, ex: <title>Elton's Página Web</title>
Alguns tags são contentores possuindo uma marca de início e a

correspondente marca de fim , como <title> acima.
Outros elementos são vazias, e antigamente eram assim: <br>
Mas para conformar ao padrão XHTML, estas tags agora sempre

devem incluir o símbolo de ser vazio, ex: <br/>
Tags HTML - II
Certos tags HTML também podem ter atributos para
fornecer informação adicional expressa sob a forma
atributo=valor.
Exemplo: <img src=”imagens/imagem1”>
atributo à src
valor à imagens/imagem1
Por motivos históricos, quase todos os browsers aceitam
que os valores não sejam dentro de aspas (“), ou plicas (').
Mas agora o padrão XHTML exige que incluiem-se sempre
os valores dentro de aspas ou plicas.
Tags HTML - III
Certas tags podem conter outros tags, ex:
<p><b> Hello everyone! </b></p>
Certas tags só funcionam dentro de certos
outros, ex:
<head><title> My page </title></head>
Espaço em branco (espaços, tabs, e finais-de-
linha) entre, ou dentro de, tags, será
desconsiderado após o primeiro espaço.
Técnicas especiais são usadas quando
realmente queremos mostrar espaço ao
utilizador, ex:
<p><b> Hello everyone! </b></p>
Estrutura de uma página Web
<!DOCTYPE HTML PUBLIC "- //W3C//DTD HTML 4.0
Tipo de XHTML Transitional//EN">
<html> TAG
<head>
<title>
Cabeçalho Minha Página
</title>
</head>
<body>
Corpo nha nha nha
</body>
</html>
Comentários HTML
São incluídos entre  e podem estender-se por

várias linhas mas não devem conter um duplo hifen (--)
no corpo do comentário.
Cabeçalho de uma página Web

Elemento obrigatorio: TITLE
3 elementos opcionais: META, STYLE, SCRIPT
Elemento BODY
Os documentos HTML devem ter apenas um elemento

BODY excepto se são constituídos por frames.
O elemento BODY é muitas vezes usado sem atributos
(simplesmente <body>) mas pode opcionalmente conter os
atributos:
bgcolor à especificando a cor de fundo
background à imagem de fundo
text à a cor do texto normal, etc.
Color names and sRGB values
Black = "#000000" Green = "#008000"
Silver = "#C0C0C0" Lime = "#00FF00"
Gray = "#808080" Olive = "#808000"
White = "#FFFFFF" Yellow = "#FFFF00"
Maroon = "#800000" Navy = "#000080"
Red = "#FF0000" Blue = "#0000FF"
Purple = "#800080" Teal = "#008080"
Fuchsia = "#FF00FF" Aqua = "#00FFFF"
Exemplo 1
Elementos de nível de texto
Elemento b – bold Sintaxe: <b>... </b>
Elemento i – italic Sintaxe: <i>... </i>
Elemento u – underline Sintaxe: <u>... </u>
Elemento sub – subscript Sintaxe: <sub>... </sub>
Elemento sup – superscript Sintaxe: <sup>... </sup>
Elemento font Sintaxe: <font... >... </font>

Atributos: size 1..7, +n, -n
color cor (codigo, nome)
face nome de tipo.
Elemento br – line breakSintaxe: <br> (sem tag final)
Exemplo 2 Exemplo 3
Elementos de nível bloco de texto
Elemento h – heading Sintaxe: <h1... >... </h1>
<h2... >... </h2>
...
<h6... >... </h6>
Atributos: align (left, center, right)
Elemento p – paragraph Sintaxe: <p... >... </p>
Atributos: align (left, center,right,
justify)
Elemento pre – preformatted Sintaxe: <pre>... </pre>
paragraph
Elemento hr – horizontal rule Sintaxe: <hr... >... </hr>
Atributos: align (left, center, right)
size (em pixeis)
width (em pixeis, %)
Exemplo 4
noshade (sem sombra)
Acentuação e Caracteres especiales
Acentuação
• Primeiro o caracter “&”
• Seguido da letra qeu deverá ser acentuada.
• Coloque código do acento desejado
• Caracter “;”
Agudo Grave Circunflexo Til Trema Cedilha

&_acute; &_grave; &_circ; &_tilde; &_uml; &_cedil;
Ejemplos:
diário = diário
natação = natação
Caracteres especiales
& < > © “
& < > © &quote;
Listas
Listas ordenadas
Elemento ol – ordered list
Sintaxe: <ol... >... </ol>
Atributos: type 1, A, a, I (romana may), i (romana min)
start n (entero)
compact
Elemento li – list item especifica entradas
individuais.
Exemplo 5
Listas
Listas não ordenadas

Elemento ul – unordered list (bulleted list)
Sintaxe: <ul... >... </ul>
Atributos: type DISC (), CIRCLE (¡), SQUARE (¡)
compact
Elemento li – list item especifica entradas individuais,
Exemplo 6
Imagens
Elemento img – image

Sintaxe: <img ...> (sem tag final)
Atributos: src -localização do ficheiro de imagen
alt -descrição (tool tip)
width, height -tamanho para a imagen.
align -posição da imagem realtivamente à texto
border -largura do bordo
Formatos da imagen: gif, jpg
Exemplo 8
Hiperligações
Elemento a – anchor (âncoras)

Sintaxe: <a...>... </a>
Atributos: href, name, target
name: dá um nome a uma secção para que outros links se possam

referir a ela.
href: especifica o endereço que o browser deve visitar. O valor pode ser:
• Um URL absoluto.
• Um URL relativo.
• Um sinal # seguido de um nome de uma secção
• Um URL seguido do sinal # seguido de nome de secção
target: especifica onde o documento referenciado deve ser colocado, se
num frame particular, se numa nova janela do browser
Exemplo 9
Bibliografia
• World Wide Web Consortium – home page dos padrões.
http://www.w3.org/MarkUp/
• W3Schools – Learn HTML (Interativo)
http://www.w3schools.com/html/default.asp
• Criação de paginas na WWW con HTML e Java, Pedro
Coelho, FCA, 1996

Asi Aulat04 Ficha

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Asi Aulat04 Ficha

Enviado por

Direitos autorais:

Formatos disponíveis

Aplicações e Serviços

AVISO: Browsers não implementam as padrões

Código HTML: Texto ASCII

AVISO: Não é aconselhável saltar diretamente para o uso duma

Alguns tags são contentores possuindo uma marca de início e a

Outros elementos são vazias, e antigamente eram assim: <br>

Mas para conformar ao padrão XHTML, estas tags agora sempre

São incluídos entre  e podem estender-se por

Cabeçalho de uma página Web

Os documentos HTML devem ter apenas um elemento

Black = "#000000" Green = "#008000"

Silver = "#C0C0C0" Lime = "#00FF00"

Gray = "#808080" Olive = "#808000"

White = "#FFFFFF" Yellow = "#FFFF00"

Maroon = "#800000" Navy = "#000080"

Red = "#FF0000" Blue = "#0000FF"

Purple = "#800080" Teal = "#008080"

Fuchsia = "#FF00FF" Aqua = "#00FFFF"

Elemento font Sintaxe: <font... >... </font>

Elemento br – line breakSintaxe: <br> (sem tag final)

Agudo Grave Circunflexo Til Trema Cedilha

Listas não ordenadas

Elemento img – image

Elemento a – anchor (âncoras)

name: dá um nome a uma secção para que outros links se possam

Você também pode gostar