Você está na página 1de 50

HTML

HTML
HTML (HyperText Markup Language) Adoptado como norma na WWW Derivada do SGML(Standard Generalized Markup Language) Utilizada para produzir documentos web

Desenvolvimento de pginas e criao de sites


HTML
Ficheiros de texto com tags e referncias para os vrios tipos de informao Podem ser criados num editor de texto bsico (notepad, vi, ...) Editores WYSIWYG (Frontpage, Dreamweaver, etc.) Saber utilizar as tags importante para adicionar facilidades que o editor no suporte ou para alterar documentos (tabelas, forms, frames, ...)
3

URLs
Uniform Resource Locators Cada recurso disponibilizado na Internet tem um endereo que pode ser codificado atravs de um URL
Documentos HTML, imagens, vdeo clips, programas, etc.

Constitudo por 3 partes:


Denominao do mecanismo utilizado para aceder ao recurso (esquema) Nome da mquina que contm o recurso Nome do recurso (caminho para o ficheiro)

Exemplos
http://www.w3.org/TR/REC-html40 mailto:joe@someplace.com

URLs relativos
No contm qualquer esquema de nomeao Caminho (path) refere-se a um recurso na mquina onde reside o documento corrente So resolvidos para URLs completos utilizando um URL base Base: http://www.acme.com/support/intro.html <A href=suppliers.html> Suppliers</A> Resultado: http://www.acme.com/support/suppliers.html Mesma base <IMG src=../icons/logo.gif alt=logo> Resultado: http://www.acme.com/ icons/logo.gif
5

Tags
Componente fundamental da estrutura Heads, tables, paragraphs e lists As tags so utilizadas para marcar os elementos de um documento HTML Start-tags:<H1>, End-tags:</H1> Alguns elementos podem incluir atributos ou seja informao adicional contida na start tag O HTML no case-sensitive: h algumas excepes quando se usam escape sequences Nem todas as tags so suportadas por todos os browsers: neste caso o browser ignora a tag
6

Documento Bsico
<html> <head> <title>A simple HTML Example</title> </head> <body> <h1> HTML is easy to learn</h1> <P>Welcome to the world of HTML. This is the first paragraph. While short it is still a paragraph!</P> <P>and this is the second paragraph.</P> </body> </html>

Tags obrigatrias Html Head Title Body

Resultado

Para ver o HTML de uma pgina seleccione view source no browser Podem-se criar ficheiros HTML com alguns tags e us-los depois como templates
8

Tags
HTML Informa o browser que o ficheiro contm informao codificada em HTML (obrigatrio) HEAD Identifica o cabealho do ficheiro Contm o ttulo TITLE Define o ttulo do documento Identifica o seu contedo num contexto global apresentado na barra de ttulo do browser tambm utilizado para identificar a pgina em motores de pesquisa (search engines) Identifica a pgina na lista de bookmarks.
9

Tags (cont.)
BODY
Segunda parte do documento (corpo) Define o contedo do documento, apresentado na rea de texto do browser

Headings

Seis nveis (H1, H2, H3, H4, H5, H6) So apresentados utilizando fontes maiores que o texto normal (ou em bold) O primeiro Heading a ser utilizado num documento deve ser <H1> Sintaxe: <Hn> Text of Heading </Hn> No se devem saltar nveis de Headings
10

Tags-Pargrafos <P>
Espaos em branco e enters (mesmo mais do que um) so comprimidos para um espao em branco na visualizao em browser (ver exemplo bsico) A largura das linhas depende do tamanho da janela que o browser tem disponvel no momento Uma nova linha imposta pelo uso do <P> Indentaes e linhas em branco so ignoradas Se no houver <P>, o ficheiro um nico pargrafo (com excepo de texto pr-formatado) </P> no obrigatria, Podem inserir-se atributos em <P> Pode ser alinhado ao centro e direita (por omisso alinhado esquerda)
E.g. <P ALIGN=CENTER>Welcome to the world of HTML.This is the first paragraph. While short it is still a paragraph!</P>

11

Pargrafos
<h1> HTML is easy to learn</h1> <P>Welcome to the world of HTML. This is the first paragraph. While short it is still a paragraph!</P><P>and this is the second paragraph.</P>

Tem o mesmo resultado que o primeiro exemplo

Para tornar o documento HTML mais legvel e facilitar a sua edio: Cada heading deve estar numa linha diferente Utilizar line breaks quando necessrio comear uma nova seco Usar linhas em branco para separar pargrafos

12

Listas no numeradas
Start-tag: <UL> Cada item start-tag: <LI> antes do item, no necessrio end-tag End-tag: </UL>
<ul> <li> apples <li> bananas <li> grapefruit </ul>

Cada elemento <LI> pode conter vrios pargrafos

13

Listas Numeradas (ordenadas)


Start-tag: <OL> Cada item start-tag: <LI> antes do item, no necessrio end-tag End-tag: </OL>
<ol> <li> apples <li> bananas <li> grapefruit </ol>

Cada elemento <LI> pode conter vrios pargrafos

14

Listas de definies
Start-tag: <DL> Start-tag Definition Term: <DT>, no necessrio endtag Start-tag Definition Definition: <DD>, no necessrio end-tag End-tag: </DL> <DT> e <DD> podem conter vrios pargrafos ou outras listas

15

Exemplo de lista de definies


<DL> <DT>NCSA <DD>NCSA, the National Center for SupercomputingApplication, is located on the campus of the University of Illinois at Urbana-Champaign. <DT>Cornell Theory Center <DD>CTC is located on the campus of Cornell University in Ithaca, New York </DL>

16

Listas encadeadas
<ul> <li> A few New England states: <ul> <li> Vermont <li> New Hampshire <li> Maine </ul> <li>Two MidWestern states: <ul> <li> Michigan <li> Indiana </ul> </ul>
17

Texto pr-formatado
<PRE> Os Espacos contidos no texto </PRE> so considerados assim como os enters

Resultado:
Os Espacos contidos no texto so considerados assim como os enters

18

Texto pr-formatado
<PRE> pode ser usada com o atributo width (opcional) que determina o nmero mximo de caracteres que cada linha dever ter dentro do <PRE> Podem usar-se hyperlinks dentro de seces <PRE>, mas deve evitar-se usar outros tags dentro das seces <PRE> Como <,> e & tm significados especiais no HTML, devem ser introduzidos atravs das suas sequncias de escape (&lt; &gt; &amp)
19

BLOCKQUOTE
<P>Omit Needless words </P> <BLOCKQUOTE> <P>Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts. </P> <P>..William Strunck, Jr., 1918</P> </BLOCKQUOTE >

20

Line breaks e linhas horizontais


<BR> Impe uma mudana de linha sem a incluso de uma linha em branco resultante de <P> <HR> (rgua) Produz uma linha horizontal do cuomprimento da janela do browser. Pode conter atributos size e width
<HR> National Center for SuperComputing Applications<BR> 605 East Springfield Avenue<BR> Champaign, Illinois 6180-5518<BR> <HR>

21

Formatao de caracteres
Estilos lgicos
Origem nos conceitos SGML: Contedo e apresentao so coisas diferentes Texto considerado segundo o seu significado
E.g. <H1> o Heading mais relevante, no interessa se apresentado como 24 pt Bold Times centered Se decidirmos modificar a apresentao de <H1> no temos de nos preocupar com os documentos que usam <H1> mais fcil manter a consistncia de contedo em documentos

22

Estilos lgicos
<DFN> Definio de palavra (no reconhecido em alguns browsers) <EM> nfase <CITE> Ttulos de livros, filmes,etc <CODE> Cdigo de computador <KBD> Introduo pelo teclado <SAMP> Sequncia de caracteres <STRONG> nfase mais forte <VAR> Elemento que dever ser substitudo por informao

23

Estilos lgicos (Exemplos)


<P> <dfn>NCSA</dfn> is a www browser </P> <EM> Consultants cannot reset your password unless you call the help line</EM> <p> <CITE>A Beginners Guide to HTML </CITE> <P> The <Code> stdio.h </code> header file</P> <P> Enter <kbd> password </kbd> to change your password </P> <P> <SAMP> Segmentation fault: Core dumped </SAMP> <P> <strong>Note: </strong>Always check you links <P> <code> rm </code> <var> filename </var> deletes the files <P>

24

Estilos lgicos (Resultado)

25

Formatao de caracteres
Estilos fsicos
Aparncia especfica de uma seco Se se pretende apresentar algo em itlico e no queremos que o browser o apresente de outra forma Consistncia na visualizao ser sempre apresentado da mesma forma <B> bold <I> Itlico <TT> typewriter
26

Sequncias de escape
Funes Apresentar caracteres especiais que so utilizados no HTML (e.g. <) Apresentar caracteres que no esto disponveis no cdigo ASCII simples So case sensitive
&lt; - sequncia de escape para < &gt;- sequncia para > &amp; - sequncia para & &agrave; - sequncia para &Eacute; - sequncia para &otilde; sequncia para
27

Hyperlinks
Ligar texto e/ou imagens a outro documento ou seco O texto ou imagem aparecem sublinhados e so apresentados com uma cor diferente quando contm um hypertext link ou hyperlink (hiperligao) Tag <A> - ncora
Comea com <A (com um espao depois do A) Especificar o documento a que se est a fazer ligao com o parmetro HREF=filename seguido por > Introduzir o texto que vai servir como link Introduzir a end-tag </A>

E.g.<A HREF=MainStats.html>Maine</A>

28

ncoras dentro de listas


<li> The <a href="reallybigindex.html">Really Big Index</a> lists all of the tutorials content pages. <li> <a href="information/announcelist.html">Get announcements</a> by signing up for our new mailing list. <li> <a href="information/resources.html">Online Resources</a> is a compilation of Java programming resources outside of the tutorial

29

Pgina resultado

30

Links relativos e absolutos


Links relativos especificam o caminho relativo desde o documento corrente.
<A HREF=AtlanticStates/NYStats.html>New York</A>

Mais eficientes no acesso ao servidor do que links absolutos Os documentos so mais facilmente reutilizveis
Todos armazenados nas mesmas directoria No h a necessidade de saber o nome da directoria onde vo ficar Manuteno local tambm mais fcil

Links absolutos devem ser utilizados quando se ligam documentos que no esto directamente relacionados

31

Links (cont.)
Links entre seces de documentos diferentes
Documento origem
In addition to the many state parks, Main is also home to <a href="target.html#ANP">Acadia National Park</a>

Documento destino
<a NAME="ANP"></a>Acadia National Park

Links entre seces do documento corrente


Tcnica a mesma, mas o nome do ficheiro destino omitido
32

Mailto
Facilita o enviou de e-mail para um dado endereo <A HREF=mailto:emailinfo@host> Name</A> Abre uma janela de e-mail configurada para enviar um e-mail para emailinfo@host

33

Incluso de imagens
Formatos comuns: GIF ou JPEG, PNG
<img SRC="helper.gif" height=134 width=481>

<img src=ImageName> onde ImageName o URL do ficheiro de Imagem A sintaxe do URL idntica usada no parmetro HREF da Tag <A> Tamanho da imagem
Parmetros height e width (altura e largura): o browser reserva o espao apropriado para as imagens
34

Alinhamento de imagens
<html> <head><title>imagens em HTML</title> </head> <body><img SRC="dukesign.GIF" height=104 width=130>Por omisso, texto a seguir a uma imagem aparece desta forma <p><img SRC="dukesign.GIF" height=104 width=130 align=Top>Se o valor do parametro align for top, ento o texto aparece da seguinte forma. de salientar que apenas a primeira linha de texto alinhada com a imagem, e o restante aparece por baixo da imagem. <p><img SRC="dukesign.GIF" height=104 width=130 align=center>Se o valor do parametro align for center, ento o texto aparece da seguinte forma. Mais uma vez apenas a primeira linha de texto alinhada com a imagem, e o restante aparece por baixo da imagem. <p align=center><img SRC="dukesign.GIF" height=104 width=130 ALT="Este o Duke"> </p> <p align=left>Se se pretender apresentar uma imagem sem texto, esta deve ser incluida dentro de um paragrafo vazio, onde se pode definir um alinhamento que servira nao para o texto mas para a imagem contida </p> </body> </html>

35

Alinhamento de imagens

36

Texto alternativo s imagens


Alguns terminais antigos no podiam mostrar imagens. possvel desactivar o carregamento de imagens, para tornar mais rpido o carregamento das pginas quando a ligao lenta. O HTML fornece um mecanismo para substituir as imagens por texto explicativo. O atributo ALT permite especificar o texto que ser mostrado em alternativa imagem
<img SRC="dukesign.GIF" height=104 width=130 ALT="Este o Duke">

37

Imagens que so hyperlinks


Combinao da tag <A> com <IMG>
<A HREF="target.html"><img SRC="dukesign.GIF" height=52 width=65 ALT="Este o Duke"> </A>

possvel retirar a border


<A HREF="target.html"><img SRC="dukesign.GIF" BORDER=0 height=52 width=65 ALT="Este o Duke"> </A>

Atributo pode ser usado para criar borders explcitos (mais largos)
<A HREF="target.html"><img SRC="dukesign.GIF" BORDER=6 height=52 width=65 ALT="Este o Duke"> </A>

38

Ligaes externas para imagens, sons e animaes


Pode ser til abrir uma imagem numa pgina separada quando o utilizador activa uma ligao <A HREF=MyImage.gif> link anchor</A> Exemplo: usar uma imagem pequena que serve de ligao para uma imagem maior <A HREF=LargerImage.gif><IMG SRC=Smallmage.gif></A> Usa-se a mesma sintaxe para estabelecer ligaes para sons e animaes externas.

39

Ligaes externas para imagens, sons e animaes


Alguns tipos de ficheiros comuns:
plain text HTML document GIF image JPEG image WAV sound file AIFF sounf file Quicktime movie MPEG movie .txt .html .gif .jpg .wav .aiff .mov .mpeg ou .mpg
40

Background
<Body Background=filename> O background (imagem de fundo) pode ser uma textura ou uma imagem normal importante que o texto seja visvel quando se usa uma imagem de background Imagem pequena Tiling

41

Cores
Definio das cores para fundo, texto e ligaes Atributos da Tag <Body>
BGCOLOR TEXT LINK

Exemplo:

<body BGColor="#000000" text="#FFFFFF LINK="#9690CC">

Cor definida por 3 sequncias de dois dgitos cada (RGB)


000000 - preto FF0000 - vermelho vivo 00FF00 - verde FFFFFF - branco Existem algumas cores pr-definidas, mas os cdigos so entendidos por todos os browsers
http://www.w3schools.com/Html/html_colornames.asp

Graphic RGB Calculator http://www.colorpro.com/info/tools/rgbcalc.htm

42

Tabelas
Antes do aparecimento da tag <Table>, as tabelas eram formatas utilizando <PRE> A tag <Table> utilizada de duas formas:
Para apresentar dados na forma de tabela Para controlar o aspecto visual das pginas

<Table> inclui:
Cabealhos para explicar o contedo das colunas e linhas Linhas de informao Clulas que incluem cada item

43

Tabelas
<table>...</table> definio de tabela em HTML
Border, Cols, Rows, Width (percentagem ou nmero de pixels)

<caption>...</caption> apresentao do ttulo da tabela (opcional) <tr>...</tr> especificao de uma linha da tabela (poder conter clulas) <th>...</th> definio de clulas ttulo (para colunas ou linhas completas)
Texto em bold e centrado por omisso Cada clula poder conter atributos

<td>...</td> definio de clulas de informao


Texto alinhado esquerda e centrado verticalmente Cada clula poder conter atributos
44

Atributos
Definidos para utilizao dentro das tags <th> e <td> As definies dadas dentro de <th> e <td> modificam as <tr> Atributos
ALIGN(LEFT, CENTER, RIGHT): alinhamento horizontal de uma clula VALIGN(TOP, MIDDLE, BOTTOM): alinhamento vertical de uma clula COLSPAN=n: nmero de colunas que uma clula ocupa ROWSPAN=n: nmero de linhas que uma clula ocupa NOWRAP: Retirar o wrap de linha dentro de uma clula

45

Exemplo de tabela
<table BORDER COLS=5 WIDTH="100%" > <caption>T&iacute;tulo da Tabela</caption> <tr><th>Coluna 1</th> <th>Coluna 2</th> <th>Coluna 3</th> <th>Coluna 4</th> <th>Coluna 5</th></tr> <tr><td>c&eacute;lula 1 coluna 1</td> <td>c&eacute;lula 1 coluna 2</td> <td>c&eacute;lula 1 coluna 3</td> <td>c&eacute;lula 1 coluna 4</td> <td>c&eacute;lula 1 coluna 5</td></tr> ... </table>

46

Exemplo de Tabela

A Tag <table> tem de conter a definio completa da tabela

Table

TH e TD em qualquer ordem Cada linha formatada independentemente das anteriores e das seguintes
47

Caption TR

Outro exemplo
<table BORDER COLS=3 WIDTH="100%" > <tr><th COLSPAN="3">Este texto vai ocupar toda a primeira linha da tabela.</th></tr> <tr><td>celula<img SRC="shoes3b.GIF"></td> <td>celula<img SRC="shoes3b.GIF"></td> <td>celula<img SRC="shoes3b.GIF"></td></tr> <tr><td>celula<img SRC="shoes3b.GIF"></td> <td>celula<img SRC="shoes3b.GIF"></td> <td>celula<img SRC="shoes3b.GIF"></td></tr> </table>

48

Frames
Permitem mostrar vrios documentos html de uma vez no browser prs e contras : http://www.criarweb.com/artigos/145.php A tag <frame> cria vrias zonas numa pgina web, em que
cada uma dessas zonas ocupada por um docuemnto html

Exemplo da utilizao de frames


<frameset cols="25%,75%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> </frameset>

43

IFrames
IFrames significa Inline frames Resolve alguns dos problemas do frame normal A tag <iframe> inclui o conteudo de um documento html dentro
do documetno em que definido, da se chamar inline

Exemplo da utilizao de iframes


<iframe src ="html_intro.asp" width="100%" height="300"> <p>Your browser does not support iframes.</p> </iframe>

43