HTML HTML - 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 1 HTML exhtml01.html HTML Introdução, A.Barão, 2002 2 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> [HTML-C,00] exhtml01.html HTML Introdução, A.Barão, 2002 3 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 4 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 5 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 6 HTML Headings 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> Nível alto Nível baixo • Os browsers visualizam a informação respeitando o nível de subordinação dos headings. HTML Introdução, A.Barão, 2002 7 HTML exhtml02.html HTML Introdução, A.Barão, 2002 8 (…) 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> As linhas podem ser formatadas com alinhamento Ex: <H2 ALIGN= RIGHT LEFT CENTER exhtml02.html HTML Introdução, A.Barão, 2002 9 > HTML • 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º Interpretadas actualmente como listas não ordenadas • Lista “Menu” Lista estruturada não numerada • Lista de Directório Semelhante à Lista “Menu” mas orientada para elementos de nome curto HTML Introdução, A.Barão, 2002 10 HTML exhtml03.html HTML Introdução, A.Barão, 2002 11 HTML (…) <OL> <LI>Sessão 1 <LI>Sessão 2 <LI>Sessão 3 </OL> Lista Ordenada Ordered List List Item exhtml03.html HTML Introdução, A.Barão, 2002 12 HTML exhtml04.html HTML Introdução, A.Barão, 2002 13 HTML (…) <UL> <LI>Sessão 1 <LI>Sessão 2 <LI>Sessão 3 </UL> Lista Não Ordenada Unordered List List Item exhtml04.html HTML Introdução, A.Barão, 2002 14 HTML exhtml05.html HTML Introdução, A.Barão, 2002 15 HTML Lista “Definition” (…) <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 16 HTML exhtml06.html HTML Introdução, A.Barão, 2002 17 HTML Texto Pré-formatado (…) <PRE> Vannevar Bush As We May Think, The Atlantic Monthly, July 1945 </PRE> As posições relativas do texto são respeitadas. exhtml06.html HTML Introdução, A.Barão, 2002 18 HTML exhtml06.html HTML Introdução, A.Barão, 2002 19 HTML Texto Não Pré-formatado (…) <PR> Vannevar Bush As We May Think, The Atlantic Monthly, July 1945 </PR> As posições relativas do texto não são respeitadas. exhtml06.html HTML Introdução, A.Barão, 2002 20 HTML Formatação de Caracteres <B> <I> <U> <TT> <EM> <STRONG> <CITE> </B> </I> </U> </TT> </EM> </STRONG> </CITE> Bold Itálico Sublinhado Letra Fixa Ênfase Importante Citação HTML Introdução, A.Barão, 2002 21 HTML exhtml07.html HTML Introdução, A.Barão, 2002 22 HTML (…) Formatação de Caracteres <HR> <PR> <B>Vannevar Bush</B><BR> <B>As We May Think,</B> <I>The Atlantic Monthly,</I> <TT>July 1945</TT> </PR> <HR> exhtml07.html HTML Introdução, A.Barão, 2002 23 HTML Caracteres especiais Exemplo: < > & “ á À ç ê < > & " á À ç ê Após a utilização de um código deve ser colocado um ponto e vírgula. HTML Introdução, A.Barão, 2002 24 HTML (…) Caracteres especiais <Programação para a Web> exhtml08.html HTML Introdução, A.Barão, 2002 25 HTML exhtml08.html HTML Introdução, A.Barão, 2002 26 HTML 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 27 HTML exhtml09.html HTML Introdução, A.Barão, 2002 28 HTML (…) Imagens em documentos HTML <IMG SRC="piberica.gif"> <IMG SRC="piberica.gif" BORDER=4> <IMG SRC="piberica.gif" BORDER=8> O qualificador BORDER coloca uma linha delimitadora à volta da figura, com uma espessura controlada em pixels exhtml09.html HTML Introdução, A.Barão, 2002 29 HTML exhtml10.html HTML Introdução, A.Barão, 2002 30 HTML (…) Imagens em documentos 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> TOP MIDDLE BOTTOM LEFT RIGHT A posição relativa do texto em relação à imagem muda. exhtml10.html HTML Introdução, A.Barão, 2002 31 HTML exhtml11.html HTML Introdução, A.Barão, 2002 32 HTML (…) Imagens em documentos HTML <BODY BACKGROUND = "piberica.gif"> exhtml11.html HTML Introdução, A.Barão, 2002 33 HTML Imagens em documentos HTML Sobre as imagens… As imagens estão normalmente em formatos gráficos: *.GIF Graphic Interchange Format *.JPEG Joint Photographic Experts Group HTML Introdução, A.Barão, 2002 Exploração: Animated Interlaced Transparent 34 HTML exhtml12.html HTML Introdução, A.Barão, 2002 35 HTML (…) Cores em documentos HTML <BODY BGCOLOR = “#0000FF” TEXT=“#FFFFFF”> Tabela RGB recomendada R 00 33 66 99 CC FF G 00 33 66 99 CC FF B 00 33 66 99 CC FF red blue green exhtml12.html HTML Introdução, A.Barão, 2002 36 HTML exhtml13.html HTML Introdução, A.Barão, 2002 37 HTML (…) Fontes em documentos HTML <FONT FACE = "Arial" SIZE = "5" COLOR = "#FF0000">Texto Vermelho</FONT> Nome das fontes por ordem de preferência separadas por vírgulas Valor RGB 1a7 3=padrão ou +n -n em relação ao tamanho existente Texto alvo Ex: “Arial, Times New Roman, Courier” exhtml13.html HTML Introdução, A.Barão, 2002 38 HTML exhtml14.html HTML Introdução, A.Barão, 2002 39 HTML (…) Tabelas <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 exhtml14.html HTML Introdução, A.Barão, 2002 40 HTML exhtml15.html HTML Introdução, A.Barão, 2002 41 HTML (…) Tabelas (continuação) Tabela com moldura <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> exhtml15.html HTML Introdução, A.Barão, 2002 42 HTML exhtml16.html HTML Introdução, A.Barão, 2002 43 HTML (…) Tabelas (continuação) <TABLE BORDER WIDTH=50%> <CAPTION>Tabela</CAPTION> A tabela ocupa neste caso 50% da área cliente no ecrã <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> exhtml16.html HTML Introdução, A.Barão, 2002 44 HTML exhtml17.html HTML Introdução, A.Barão, 2002 45 HTML (…) Tabelas (continuação) <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 às marcas <TH> e <TD> e definem o tamanho das células em colunas e linhas respectivamente exhtml17.html HTML Introdução, A.Barão, 2002 46 HTML Hiperligações <A HREF = “(máquina)/(directório)/(documento HTML)”> (Texto do link) </A> [CPWWW,98] HTML Introdução, A.Barão, 2002 47 HTML links Exemplos <A HREF =“pagina05.html”>pag.cinco</A> <A HREF =“http://www.meteo.pt”>Meteorologia</A> Links internos Definição da marca da secção <A NAME = “(nome da marca)”></A> <A HREF=“#(nome da marca)”>(Texto do link)</A> HTML Introdução, A.Barão, 2002 link 48 HTML Links para páginas e serviços de outros protocolos Alguns exemplos • Enviar um mail <A HREF = “mailto:[email protected]”>nome da pessoa</A> <ADDRESS>Nome da Pessoa <A HREF = “mailto:[email protected]”>nome da pessoa</A> </ADDRESS> • Acesso a um servidor Ftp Endereço do autor, depois de </BODY> <A HREF = “ftp://ftp.eunet.pt”>Arquivo Ftp da Eunet</A> HTML Introdução, A.Barão, 2002 49 HTML Frames HTML Introdução, A.Barão, 2002 50 HTML Frames HTML Introdução, A.Barão, 2002 51 HTML Frames HTML Introdução, A.Barão, 2002 52 HTML (…) Frames <FRAMESET COLS="40%,*"> <FRAME SRC="menu.html" > <FRAME SRC="info.html" NAME="informacao"> </FRAMESET> exhtml18.html HTML Introdução, A.Barão, 2002 53 HTML (…) Frames <BODY> <A HREF="object.html" TARGET="informacao">Objectivos</A><BR> <A HREF="conteud.html" TARGET="informacao">Conteúdos</A><BR> </BODY> menu.html HTML Introdução, A.Barão, 2002 54 HTML (…) Frames <BODY> <PR> Seleccione um tópico </PR> </BODY> info.html HTML Introdução, A.Barão, 2002 55 HTML (…) Frames <PR> <UL> <LI>Apresentar a cadeira <LI>Compreender a Web, origens,... </UL> </PR> object.html HTML Introdução, A.Barão, 2002 56 HTML (…) Frames <PR> <UL> <LI>Web <LI>Hipertexto <LI>Hipermédia </UL> </PR> conteud.html HTML Introdução, A.Barão, 2002 57 Standards http://www.w3.org World Wide Web Consortium HTML Introdução, A.Barão, 2002 58
Download
