View
149
Download
3
Category
Preview:
Citation preview
HTML Introdução, A.Barão, 2002 1
HTMLHTML - Hypertext Markup Language
• Um programa HTML reside num ficheiro de texto simples (extensão: html ou htm)
• A linguagem é simples de aprender
• Um programa HTML inclui uma série de tags colocadas no texto que se reflectem na página Web
• As tags são instruções que especificam que um determinado bloco de texto é um título, outro bloco deve ser visualizado a itálico, etc...
HTML Introdução, A.Barão, 2002 2
HTML
exhtml01.html
HTML Introdução, A.Barão, 2002 3
HTML
<HTML><HEAD><TITLE>Fundamentos de Programação para a Web</TITLE></HEAD><BODY><P>Objectivos</P><HR><P>Sessão 1<BR>Sessão 2<BR>Sessão 3<BR></P><HR></BODY></HTML>
exhtml01.html[HTML-C,00]
HTML Introdução, A.Barão, 2002 4
HTML
<HTML> Declara que o texto seguinte define uma página HTML que pode ser visualizada num Web browser. A tag </HTML> termina a página.
<HEAD> Define a área de cabeçalho (header) da página. A tag </HEAD> termina a zona de cabeçalho.
HTML Introdução, A.Barão, 2002 5
HTML
<TITLE> Define o título da página que é visualizado na barra de título do browser. A tag </TITLE> termina o título. Nota: usado pela Web em pesquisas e indexações, Em alguns browsers a descrição também serve para identificar a página quando se adiciona o endereço aos favoritos.
<BODY> Delimita/caracteriza o conteúdo que será visualizado na página. A tag </BODY> termina a zona de conteúdo.
HTML Introdução, A.Barão, 2002 6
HTML<P> Marca o início de um parágrafo. </P> termina o parágrafo. É opcional no entanto deve ser incluído para facilitar a interpretação do código por terceiros.
<BR> Provoca uma mudança de linha sem adição de caracteres extra no código HTML
<HR> Horizontal line/horizontal rule. Útil para representar secções na página.
<COMMENT> Utilizado para comentar o código. O browser ignora as descrições entre esta tag e </COMMENT> . Ou <!-- e - ->
HTML Introdução, A.Barão, 2002 7
HTMLHeadings
Uma página Web pode ter no máximo 6 níveis de headings
<H1> </H1> <H2> </H2><H3> </H3><H4> </H4><H5> </H5><H6> </H6>
• Os browsers visualizam a informação respeitando o nível de subordinação dos headings.
Nível alto
Nível baixo
HTML Introdução, A.Barão, 2002 8
HTML
exhtml02.html
HTML Introdução, A.Barão, 2002 9
HTML<HTML><HEAD><TITLE>F.P. Web</TITLE></HEAD><BODY><H1><P>Objectivos</P></H1><HR><H2><P>Sessão 1<BR></H2><H3>Apresentação da cadeira<BR>Compreender a Web</H3></P><HR></BODY></HTML>
exhtml02.html
(…)
As linhas podemser formatadascom alinhamento
Ex:
<H2 ALIGN= >
RIGHTLEFT
CENTER
HTML Introdução, A.Barão, 2002 10
HTML
Apresentar a in
formação
em form
a de lista
• Lista Ordenada Os elementos ficam numerados
• Lista Não Ordenada Os elementos ficam marcados
• Lista “Definition” Os elementos são compostos por dois itens,
o 2º fica identado em relação ao 1º
• Lista “Menu” Lista estruturada não numerada
• Lista de Directório Semelhante à Lista “Menu” mas
orientada para elementos de nome curto
Interpretadasactualmentecomo listas
não ordenadas
HTML Introdução, A.Barão, 2002 11
HTML
exhtml03.html
HTML Introdução, A.Barão, 2002 12
Lista Ordenada
HTML
<OL> Ordered List<LI>Sessão 1 List Item<LI>Sessão 2<LI>Sessão 3</OL>
exhtml03.html
(…)
HTML Introdução, A.Barão, 2002 13
HTML
exhtml04.html
HTML Introdução, A.Barão, 2002 14
Lista Não Ordenada
HTML
<UL> Unordered List<LI>Sessão 1 List Item<LI>Sessão 2<LI>Sessão 3</UL>
exhtml04.html
(…)
HTML Introdução, A.Barão, 2002 15
HTML
exhtml05.html
HTML Introdução, A.Barão, 2002 16
Lista “Definition”HTML
<DL> Definition List <DT>Sessão 1 Definition Term<DD>Apresentação da cadeira Definition Description<DD>Compreender a Web<DT>Sessão 2<DD>Planear e desenhar uma Web Page<DD>Compreender o processo de concepção de um sistema hipertexto<DD>Respeitar questões e príncipios da concepção cognitiva de hiperdocumentos<P><DD>Conhecer a HTML</P></DL>
exhtml05.html
(…)
HTML Introdução, A.Barão, 2002 17
HTML
exhtml06.html
HTML Introdução, A.Barão, 2002 18
Texto Pré-formatadoHTML
<PRE> As posições relativas do Vannevar Bush texto são respeitadas. As We May Think, The Atlantic Monthly, July 1945</PRE>
exhtml06.html
(…)
HTML Introdução, A.Barão, 2002 19
HTML
exhtml06.html
HTML Introdução, A.Barão, 2002 20
Texto Não Pré-formatadoHTML
<PR> As posições relativas do Vannevar Bush texto não são respeitadas. As We May Think, The Atlantic Monthly, July 1945</PR>
exhtml06.html
(…)
HTML Introdução, A.Barão, 2002 21
HTML
Formatação de Caracteres
<B><I><U><TT><EM><STRONG><CITE>
</B></I></U></TT></EM></STRONG></CITE>
BoldItálicoSublinhadoLetra FixaÊnfaseImportanteCitação
HTML Introdução, A.Barão, 2002 22
HTMLHTML
exhtml07.html
HTML Introdução, A.Barão, 2002 23
HTMLFormatação de Caracteres
HTML
exhtml07.html
(…)
<HR><PR><B>Vannevar Bush</B><BR><B>As We May Think,</B><I>The Atlantic Monthly,</I><TT>July 1945</TT></PR><HR>
HTML Introdução, A.Barão, 2002 24
HTMLHTMLCaracteres especiaisExemplo:
<>&“áÀçê
<>&"áÀçê
Após a utilização de umcódigo deve ser colocadoum ponto e vírgula.
HTML Introdução, A.Barão, 2002 25
HTMLHTMLCaracteres especiais
HTMLHTML
exhtml08.html
(…)
<Programação para a Web>
HTML Introdução, A.Barão, 2002 26
HTMLHTMLHTMLHTML
exhtml08.html
HTML Introdução, A.Barão, 2002 27
HTMLHTMLHTMLHTML
Imagens em documentos HTML
<IMG SRC=“(directório)/ficheiro”>
ou num computador remoto:
<IMG SRC=“http://www.empresa.com/directório/ficheiro”>
HTML Introdução, A.Barão, 2002 28
HTMLHTMLHTMLHTMLHTMLHTMLHTMLHTML
exhtml09.html
HTML Introdução, A.Barão, 2002 29
HTMLHTMLHTMLHTMLHTMLHTMLImagens em documentos HTML
HTMLHTML
exhtml09.html
(…)
<IMG SRC="piberica.gif">
<IMG SRC="piberica.gif" BORDER=4>
<IMG SRC="piberica.gif" BORDER=8>
O qualificadorBORDER colocauma linhadelimitadoraà volta da figura,com uma espessuracontroladaem pixels
HTML Introdução, A.Barão, 2002 30
HTMLHTMLHTMLHTMLHTMLHTMLHTMLHTML
exhtml10.html
HTML Introdução, A.Barão, 2002 31
HTMLHTMLHTMLHTMLHTMLHTMLImagens em documentos HTML
HTMLHTML
exhtml10.html
(…)
<IMG ALIGN = TOP SRC="piberica.gif">Península Ibérica<BR><IMG ALIGN = MIDDLE SRC="piberica.gif">Península Ibérica<BR><IMG ALIGN = BOTTOM SRC="piberica.gif">Península Ibérica<BR>
TOPMIDDLE
BOTTOMLEFT
RIGHT
A posição relativa do texto em relaçãoà imagem muda.
HTML Introdução, A.Barão, 2002 32
HTMLHTMLHTMLHTMLHTMLHTMLHTMLHTML
exhtml11.html
HTML Introdução, A.Barão, 2002 33
HTMLHTMLHTMLHTMLHTMLHTMLImagens em documentos HTML
HTMLHTML
exhtml11.html
(…)
<BODY BACKGROUND = "piberica.gif">
HTML Introdução, A.Barão, 2002 34
HTMLHTMLHTMLHTMLHTMLHTMLImagens em documentos HTML
HTMLHTML
Sobre as imagens…
As imagens estão normalmente em formatos gráficos:
*.GIF Graphic Interchange Format
*.JPEG Joint Photographic Experts Group
Exploração:AnimatedInterlacedTransparent
HTML Introdução, A.Barão, 2002 35
HTMLHTMLHTMLHTMLHTMLHTMLHTMLHTML
exhtml12.html
HTML Introdução, A.Barão, 2002 36
HTMLHTMLHTMLHTMLHTMLHTMLCores em documentos HTML
HTMLHTML
exhtml12.html
(…)
<BODY BGCOLOR = “#0000FF” TEXT=“#FFFFFF”>
Tabela RGB recomendada
R G B00 00 0033 33 3366 66 6699 99 99CC CC CCFF FF FF
red
greenblue
componentes
HTML Introdução, A.Barão, 2002 37
HTMLHTMLHTMLHTMLHTMLHTMLHTMLHTML
exhtml13.html
HTML Introdução, A.Barão, 2002 38
HTMLHTMLHTMLHTMLHTMLHTMLFontes em documentos HTML
HTMLHTML
exhtml13.html
(…)
<FONT FACE = "Arial" SIZE = "5" COLOR = "#FF0000">Texto Vermelho</FONT>
Texto alvo
Valor RGB
Nome das fontes porordem de preferênciaseparadas por vírgulas
Ex: “Arial, Times New Roman, Courier”
1 a 73=padrãoou +n -n em relação aotamanho existente
HTML Introdução, A.Barão, 2002 39
HTMLHTMLHTMLHTMLHTMLHTMLHTMLHTML
exhtml14.html
HTML Introdução, A.Barão, 2002 40
HTMLHTMLHTMLHTMLHTMLHTMLTabelas
HTMLHTML
exhtml14.html
(…)
<TABLE>
<CAPTION>Tabela</CAPTION>
<TR><TH>Coluna 1<TH>Coluna 2<TH>Coluna 3</TR>
<TR><TD>aaa<TD>bbb<TD>ccc</TR>
<TR><TD>aaa<TD>bbb<TD>ccc</TR>
<TR><TD>aaa<TD>bbb<TD>ccc</TR>
</TABLE>
Todas as linhas começam por <TR><TH> para título da tabela<TD> por cada célula da tabela
HTML Introdução, A.Barão, 2002 41
HTMLHTMLHTMLHTMLHTMLHTMLHTMLHTML
exhtml15.html
HTML Introdução, A.Barão, 2002 42
HTMLHTMLHTMLHTMLHTMLHTMLTabelas (continuação)
HTMLHTML
exhtml15.html
(…)
<TABLE BORDER>
<CAPTION>Tabela</CAPTION>
<TR><TH>Coluna 1<TH>Coluna 2<TH>Coluna 3</TR>
<TR><TD>aaa<TD>bbb<TD>ccc</TR>
<TR><TD>aaa<TD>bbb<TD>ccc</TR>
<TR><TD>aaa<TD>bbb<TD>ccc</TR>
</TABLE>
Tabela commoldura
HTML Introdução, A.Barão, 2002 43
HTMLHTMLHTMLHTMLHTMLHTMLHTMLHTML
exhtml16.html
HTML Introdução, A.Barão, 2002 44
HTMLHTMLHTMLHTMLHTMLHTMLTabelas (continuação)
HTMLHTML
exhtml16.html
(…)
<TABLE BORDER WIDTH=50%>
<CAPTION>Tabela</CAPTION>
<TR><TH>Coluna 1<TH>Coluna 2<TH>Coluna 3</TR>
<TR><TD>aaa<TD>bbb<TD>ccc</TR>
<TR><TD>aaa<TD>bbb<TD>ccc</TR>
<TR><TD>aaa<TD>bbb<TD>ccc</TR>
</TABLE>
A tabela ocupaneste caso 50%da área clienteno ecrã
HTML Introdução, A.Barão, 2002 45
HTMLHTMLHTMLHTMLHTMLHTMLHTMLHTML
exhtml17.html
HTML Introdução, A.Barão, 2002 46
HTMLHTMLHTMLHTMLHTMLHTMLTabelas (continuação)
HTMLHTML
exhtml17.html
(…)
<TABLE BORDER WIDTH=80%>
<CAPTION>FPW</CAPTION>
<TR><TH ROWSPAN=2>Sessão<TH COLSPAN=2>Planificação</TR>
<TR><TH>Objectivos<TH>Conteúdos</TR>
<TR><TD>1<TD>Apresentar a Cadeira<BR>A Web...<TD>Expectativas,Objectivos...</TR>
</TABLE>
Os qualificadores COLSPAN e ROWSPAN são aplicados àsmarcas <TH> e <TD> e definem o tamanho das células emcolunas e linhas respectivamente
HTML Introdução, A.Barão, 2002 47
HTMLHTMLHTMLHTMLHTMLHTMLHTMLHTML
Hiperligações
<A HREF = “(máquina)/(directório)/(documento HTML)”>(Texto do link) </A>
[CPWWW,98]
HTML Introdução, A.Barão, 2002 48
HTMLHTMLHTMLHTMLHTMLHTMLHTMLHTML
links
Exemplos
<A HREF =“pagina05.html”>pag.cinco</A>
<A HREF =“http://www.meteo.pt”>Meteorologia</A>
Links internos
<A NAME = “(nome da marca)”></A><A HREF=“#(nome da marca)”>(Texto do link)</A>
Definição da marca da secção
link
HTML Introdução, A.Barão, 2002 49
HTMLHTMLHTMLHTMLHTMLHTMLHTMLHTML
Links para páginas e serviços de outros protocolos
• Acesso a um servidor Ftp
<A HREF = “ftp://ftp.eunet.pt”>Arquivo Ftp da Eunet</A>
• Enviar um mail
<A HREF = “mailto:pessoa@mail.pt”>nome da pessoa</A>
Alguns exemplos
<ADDRESS>Nome da Pessoa<A HREF = “mailto:pessoa@mail.pt”>nome da pessoa</A></ADDRESS> Endereço do
autor, depoisde </BODY>
HTML Introdução, A.Barão, 2002 50
HTMLHTMLHTMLHTMLHTMLHTMLHTMLHTML
Frames
ex h
tml1
8.h t
ml
HTML Introdução, A.Barão, 2002 51
HTMLHTMLHTMLHTMLHTMLHTMLHTMLHTML
Frames
ex h
tml1
8.h t
ml
HTML Introdução, A.Barão, 2002 52
HTMLHTMLHTMLHTMLHTMLHTMLHTMLHTML
Frames
ex h
tml1
8.h t
ml
HTML Introdução, A.Barão, 2002 53
HTMLHTMLHTMLHTMLHTMLHTMLHTMLHTML
Frames
exhtml18.html
<FRAMESET COLS="40%,*">
<FRAME SRC="menu.html" >
<FRAME SRC="info.html" NAME="informacao">
</FRAMESET>
(…)
HTML Introdução, A.Barão, 2002 54
HTMLHTMLHTMLHTMLHTMLHTMLHTMLHTML
Frames
menu.html
(…)
<BODY>
<A HREF="object.html" TARGET="informacao">Objectivos</A><BR>
<A HREF="conteud.html" TARGET="informacao">Conteúdos</A><BR>
</BODY>
HTML Introdução, A.Barão, 2002 55
HTMLHTMLHTMLHTMLHTMLHTMLHTMLHTML
Frames
info.html
(…)
<BODY><PR>Seleccione um tópico</PR></BODY>
HTML Introdução, A.Barão, 2002 56
HTMLHTMLHTMLHTMLHTMLHTMLHTMLHTML
Frames
object.html
(…)
<PR><UL><LI>Apresentar a cadeira <LI>Compreender a Web, origens,...</UL></PR>
HTML Introdução, A.Barão, 2002 57
HTMLHTMLHTMLHTMLHTMLHTMLHTMLHTML
Frames
conteud.html
(…)
<PR><UL><LI>Web<LI>Hipertexto<LI>Hipermédia</UL></PR>
HTML Introdução, A.Barão, 2002 58
Standards
http://www.w3.org
World Wide Web Consortium
Recommended