HyperText Markup Language (HTML) Desenho de Documentos na World Wide Web

Transcrição

1 Programação Na Web HyperText Markup Language (HTML) Desenho de Documentos na World Wide Web 1 António Gonçalves Agenda Introdução ao HTML Criar e publicar uma página Web Validar uma documento Elementos principais de um Documento HMTL Elementos do tipo Bloco Elementos do tipo Texto Criar links Hipertexto Adicionar Imagens a um Documento Construir Tabelas 2 Desenho de Documentos no World Wide Web

2 World Wide Web Definições World Wide Web Conjunto de computadores na Internet que suportam o protocolo HTTP Não é uma rede separada HTTP O protocolo HyperText Transfer Linguagem utilizada pelo cliente do WWW (i.e. Netscape, Internet Explorer) para pedir documentos de um servidor WWW (i.e. Programas que correm nos sites tais como amazon.com ou yahoo.com) HTML Linguagem HyperText Markup Linguagem utilizada para desenhar páginas da Web 3 Desenho de Documentos no World Wide Web Linguagem HyperText Markup Mistura de Texto e Marcas (Markup Tags) Marcas são envolvidas em <> (<H1>Introducao</H1>) O que descreve uma Marca? Aparência Layout Conteúdo (Não é garantida uma apresentação única) Alterações do HTML 3.2 para HTML 4.0 Molduras passam a ser standard Depreciação das Marcas de formatação (style sheets) Melhoramento do alinhamento de células e agrupamento em tabelas Introdução de eventos associados ao rato e ao teclado para quase todos os elementos Internacionalização 4 Desenho de Documentos no World Wide Web

3 Exemplo de HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <Title>Home Page for Lawrence M. Brown</Title> </HEAD> <BODY BGCOLOR="WHITE"> <H1 ALIGN="CENTER">Home Page for Lawrence M. Brown</H1> <HR> <IMG SRC="images/nswc.gif" WIDTH=300 HEIGHT=117 HSPACE=10 VSPACE=5 ALIGN="LEFT" ALT="NSWC Logo"> Senior Network Engineer<BR> <A HREF=" Naval Surface Warfare Center</A><BR> 9500 MacArthur Boulevard<BR> West Bethesda, Maryland, MD <BR> <I> </I> <A <I>Phone:</I> (301) <BR CLEAR="ALL"> <P> This is my personal home page. For more specific programming-related resources pages, please see:  </BODY> </HTML> 5 Desenho de Documentos no World Wide Web Criar e Publicar uma Página Web 1. Criar um documento HTML 2. Colocar o documento num directório publico (i.e. public_html or www) de um servidor HTTP Unix> cd Unix> chmod a+x. (Nota ".") Unix> mkdir public_html Unix> chmod a+x public_html 3. Aceder a página atraves de: I.e. Se o ficheiro for omitido, é assumido um nome por defeito ( normalmente index.html) I.e. refere-se ao ficheiro index.html no directorio hall/public_html 6 Desenho de Documentos no World Wide Web

4 Criar e Publicar uma Página Web (cont.) 4.Validar o Documento Verificar a sintaxe através de uma ferramenta de validação: O documento é validado para a versão indicada na Marca DOCTYPE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 7 Desenho de Documentos no World Wide Web Template de um Documento HTML 8 Desenho de Documentos no World Wide Web

5 Principais Elementos HTML 1.DOCTYPE 2.HTML 3.HEAD TITLE obrigatório Opcionais: BASE META BGSOUND SCRIPT, NOSCRIPT STYLE LINK 9 Desenho de Documentos no World Wide Web Principais Elementos HTML (Cont.) 4.Elemento BODY <BODY BGCOLOR="YELLOW"> Atributos Gerais do HTML BACKGROUND BGCOLOR TEXT LINK, VLINK, ALINK OnLoad, OnUnload, OnFocus, OnBlur 5.Como adicionar elementos na Marca BODY <BODY> Restante Elementos HTML </BODY> 10 Desenho de Documentos no World Wide Web

6 META Element Grava informação sobre o documento, Permite redireccionar o browser para uma página e permite definir o refrescamento da página NAME= autor" NAME="keywords" NAME= descrição" HTTP-EQUIV="refresh" 11 Desenho de Documentos no World Wide Web Exemplo: Elemento META <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>News Headlines</TITLE> <META HTTP-EQUIV="REFRESH" CONTENT="3600"> </HEAD> <BODY> <H1 ALIGN="CENTER">News Headlines</H1> <H2>National News</H2> Blah, blah, blah. <H2>International News</H2> Yadda, yadda, yadda. </BODY> </HTML> 12 Desenho de Documentos no World Wide Web

7 Elementos Nível Bloco Cabeçalhos H1... H6 ALIGN Secções de Texto Básicas P ALIGN PRE WIDTH ADDRESS BLOCKQUOTE 13 Desenho de Documentos no World Wide Web Elementos Nível Bloco, cont. Listas OL LI UL LI DL DT DD Tabelas e Formulários (mais tarde...) Misc. HR DIV CENTER MULTICOL (só Netscape) 14 Desenho de Documentos no World Wide Web

8 Cabeçalhos Tipos de Cabeçalhos <H1...>... </H1> <H2...>... </H2> <H3...>... </H3> <H4...>... </H4> <H5...>... </H5> <H6...>... </H6> Attributo: ALIGN Valor: LEFT (default), RIGHT, CENTER Marcas encadeadas Cabeçalhos e outros elementos do tipo bloco podem conter elementos do nível texto e elementos do tipo Bloco, o inverso não é possível 15 Desenho de Documentos no World Wide Web Exemplo: Cabeçalhos <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Document Headings</TITLE> </HEAD> <BODY> Samples of the six heading types: <H1>Level-1 (H1)</H1> <H2 ALIGN="CENTER">Level-2 (H2)</H2> <H3><U>Level-3 (H3)</U></H3> <H4 ALIGN="RIGHT">Level-4 (H4)</H4> <H5>Level-5 (H5)</H5> <H6>Level-6 (H6)</H6> </BODY> </HTML> 16 Desenho de Documentos no World Wide Web

9 Resultado 17 Desenho de Documentos no World Wide Web P Paragrafo Básico Atributos: ALIGN LEFT (defeito), RIGHT, CENTER. Tal como no cabeçalho. Espaços em branco são ignorados (usar <BR> para partir uma linha ) <P> Consecutivos não são interpretados como linhas em branco End Tag é Opcional: <BODY> <P> Paragraph 1 </P> <P> Paragraph 2 </P> <P> Paragraph 3 </P> </BODY> Totalmente especificado <BODY> Paragraph 1 <P> Paragraph 2 <P> Paragraph 3 </BODY> Equivalente com Marca implicita 18 Desenho de Documentos no World Wide Web

10 Paragrafos Pre-Formatados Elemento PRE <PRE>... </PRE> Atributos: WIDTH Medida em caracteres. Problema: Caracteres especiais <PRE> if (a<b) { dothis(); } else { dothat(); } </PRE> Caracter pretendido Em HTML < < > > & & " " Espaço em Branco 19 Desenho de Documentos no World Wide Web OL: Listas Ordenadas (Numéricamente) Elemento OL <OL> <LI> <LI>... </OL> Atributos: TYPE, START, COMPACT Entradas numa Lista: LI <LI...>... </LI> (Marca de Fecho é opcional) Atributos: (dentro de um OL) VALUE, TYPE Exemplo de lista: <OL> <LI>List Item One <LI>List Item Two <LI>List Item Three </OL> 20 Desenho de Documentos no World Wide Web

11 Encadeamento de Listas Ordenadas <OL TYPE="I"> <LI>Headings <LI>Basic Text Sections <LI>Lists <OL TYPE="A"> <LI>Ordered <OL TYPE="1"> <LI>The OL tag <OL TYPE="a"> <LI>TYPE <LI>START <LI>COMPACT </OL> <LI>The LI tag </OL> <LI>Unordered <OL TYPE="1"> <LI>The UL tag <LI>The LI tag </OL> <LI>Definition <OL TYPE="1"> <LI>The DL tag <LI>The DT tag <LI>The DD tag </OL> </OL> <LI>Miscellaneous 21 </OL> Desenho de Documentos no World Wide Web UL: Lista não Ordenada (Bulleted) Elemento UL <UL> <LI> <LI>... </UL> Atributos: TYPE, COMPACT TYPE pode ser DISC, CIRCLE, ou SQUARE Entradas numa Lista: LI (TYPE) TYPE pode ser DISC, CIRCLE, ou SQUARE A sample list: <UL> <LI>List Item One <LI>List Item Two <LI>List Item Three </UL> 22 Desenho de Documentos no World Wide Web

12 UL: Parametrização de Bullets <UL TYPE="DISC"> <LI>The UL tag <UL TYPE="CIRCLE"> <LI>TYPE <UL TYPE="SQUARE"> <LI>DISC <LI>CIRCLE <LI>SQUARE </UL> <LI>COMPACT </UL> <LI>The LI tag <UL TYPE="CIRCLE"> <LI>TYPE <UL TYPE="SQUARE"> <LI>DISC <LI>CIRCLE <LI>SQUARE </UL> <LI>VALUE </UL> </UL> 23 Desenho de Documentos no World Wide Web Elementos do tipo Texto Estilos Físicos B, I, TT, U, SUB, SUP, SMALL, BIG, STRIKE, S, BLINK FONT SIZE COLOR FACE BASEFONT SIZE Estilo Logico EM, STRONG, CODE, SAMP, KBD, DFN, VAR, CITE 24 Desenho de Documentos no World Wide Web

13 Elementos do tipo Texto (cont.) Links Hipertexto A HREF, NAME, TARGET,... Imagens IMG SRC (obrigatório), ALT, ALIGN, WIDTH, HEIGHT, HSPACE, VSPACE, BORDER, USEMAP, ISMAP Outros Elementos BR (quebra de linha) AREA (Mapas de imagens no cliente) APPLET (Java) Desenho de Documentos no World Wide Web Exemplo: Estilo Físico... <H1>Physical Character Styles</H1> <B>Bold</B><BR> <I>Italic</I><BR> <TT>Teletype (Monospaced)</TT><BR> <U>Underlined</U><BR> Subscripts: f<sub>0</sub> + f<sub>1</sub><br> Superscripts: x<sup>2</sup> + y<sup>2</sup><br> <SMALL>Smaller</SMALL><BR> <BIG>Bigger</BIG><BR> <STRIKE>Strike Through</STRIKE><BR> <B><I>Bold Italic</I></B><BR> <BIG><TT>Big Monospaced</TT></BIG><BR> <SMALL><I>Small Italic</I></SMALL><BR> <FONT COLOR="GRAY">Gray</FONT><BR> <DEL>Delete</DEL><BR> <INS>Insert</INS><BR> Desenho de Documentos no World Wide Web

14 Resultado 27 Desenho de Documentos no World Wide Web Estilo lógico... <H1>Logical Character Styles</H1> <EM>Emphasized</EM><BR> <STRONG>Strongly Emphasized</STRONG><BR> <CODE>Code</CODE><BR> <SAMP>Sample Output</SAMP><BR> <KBD>Keyboard Text</KBD><BR> <DFN>Definition</DFN><BR> <VAR>Variable</VAR><BR> <CITE>Citation</CITE><BR> <EM><CODE>Emphasized Code</CODE></EM><BR> <FONT COLOR="GRAY"><CITE>Gray Citation</CITE></FONT><BR> <ACRONYM TITLE="Java Development Kit">JDK Acronym</ACRONYM> Desenho de Documentos no World Wide Web

15 Resultado 29 Desenho de Documentos no World Wide Web Links Hipertexto Links podem conter imagens e outros elementos <A HREF= >... </A>) Link para URL absolutos Usa um URL completo, começa por Java é apresentado em <A HREF=" capitulo 2</A>. Link para URL Relativos Use o nome de um ficheiro ou caminho relativo para um ficheiro Interpretado relativamente ao local corrente Java é apresentado em <A HREF="capitulo2.html">Capitulo 2</A>. 30 Desenho de Documentos no World Wide Web

16 Hypertext Links (Cont.) Link para uma secção Usar o nome da secção (ver em baixo) precedida por # Imagens são apresentadas em <A HREF="#Section2">Section 2</A>. Link para uma secção num URL Usar URL absoluto ou relativo, seguido de #, seguido do nome da secção Images are discussed in <A HREF="chapter1.html#Section2"> Sec. 2 of Chap. 1</A>. Como identificar uma secção Usar <A NAME="..."> e não incluir o sinal # <H2><A NAME="Section2">Images</A></H2> 31 Desenho de Documentos no World Wide Web IMG: Embeber imagens Examplo <IMG SRC="SomeFile.gif" ALT="My Dog" WIDTH=400 HEIGHT=300> Atributos: SRC (obrigatorio) ALT ALIGN (see <BR CLEAR="ALL">) WIDTH, HEIGHT HSPACE, VSPACE BORDER USEMAP, ISMAP 32 Desenho de Documentos no World Wide Web

17 Exemplo: Alinhamento de Image <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD><TITLE>Image Alignment</TITLE></HEAD> <BODY> <H1 ALIGN="CENTER">Image Alignment</H1> <TABLE BORDER=1> <TR><TH>Alignment <TH>Result <TR><TH><CODE>LEFT</CODE> <TD><IMG SRC="rude-pc.gif" ALIGN="LEFT" ALT="Rude PC" WIDTH=54 HEIGHT=77> This positions the image at the left side, with text flowing around it on the right. <TR><TH><CODE>RIGHT</CODE> <TD><IMG SRC="rude-pc.gif" ALIGN="RIGHT" ALT="Rude PC" WIDTH=54 HEIGHT=77> This positions the image at the right side, with text flowing around it on the left.... </TABLE> </BODY> </HTML> 33 Desenho de Documentos no World Wide Web Resultado do alinhamento da imagem 34 Desenho de Documentos no World Wide Web

18 Tabelas Modelo <TABLE BORDER=1> <CAPTION>Table Caption</CAPTION> <TR><TH>Heading1</TH> <TH>Heading2</TH></TR> <TR><TD>Row1 Col1 Data</TD><TD>Row1 Col2 Data</TD></TR> <TR><TD>Row2 Col1 Data</TD><TD>Row2 Col2 Data</TD></TR> <TR><TD>Row3 Col1 Data</TD><TD>Row3 Col2 Data</TD></TR> </TABLE> 35 Desenho de Documentos no World Wide Web Atributos de uma TABELA ALIGN Alinhamento horizontal de uma tabela Valores possível são LEFT, RIGHT, e CENTER. LEFT é o valor por defeito BORDER Comprimento em pixels do bordo a volta de uma tabela O Bordo é adicional ao bordo a volta de cada célula (CELLSPACING). Valor por defeito é zero, Resulta em que o divisor 3D entre as células também seja não visível. CELLSPACING Introduz espaço em pixel entre células adjacentes. Desenhado como uma linha 3D se BORDER é diferente de zero, caso contrário é usado espaço com a mesma cor de fundo Valor por defeito é normalmente 3 36 Desenho de Documentos no World Wide Web

19 Atributos de uma TABELA (Cont.) CELLPADDING CELLPADDING determina o espaço vazio, em pixel, entre o bordo da célula e o seu conteúdo O valor por defeito é normalmente 1 WIDTH Indica o comprimento de uma tabela, quer em pixels (<TABLE WIDTH=250>) ou em percentagem relativa a janela do browser window (<TABLE WIDTH="75%">) BGCOLOR Indica a cor de fundo da tabela ( também usado em TR, TD, e TH) BORDERCOLOR, BORDERCOLORDARK, 37 Desenho de Documentos no World Wide Web Atributos de uma TABELA (Cont.) BACKGROUND Associa um imagem ao de uma tabela Pode ser obtido o mesmo efeito com CSS RULES Atributo do HTML 4.0 que diz quais as linha divisórias são visíveis Se o atributo for omitido todas as linhas são visíveis Valores possíveis são NONE, ROWS, COLS, e ALL FRAME Diz quais os bordos externos são desenhados Todos os bordos são desenhados se o atributo for omitido Valores possíveis são BORDER ou BOX (all), VOID (none), ABOVE (top), BELOW (bottom), HSIDES (top e bottom), VSIDES (left and right), LHS (left), and RHS (right) 38 Desenho de Documentos no World Wide Web

20 CELLSPACING Espaçamento entre as Células CELLSPACING="5" CELLSPACING="20" 39 Desenho de Documentos no World Wide Web CELLPADDING distância interna entre o texto e a borda das células CELLPADDING="5" CELLPADDING= 20" 40 Desenho de Documentos no World Wide Web

21 CAPTION Atributo ALIGN (Valores: TOP, BOTTOM) Uso Usar uma tabela sem bordo pode ser mais flexível do que o uso do atributo CAPTION. 41 Desenho de Documentos no World Wide Web TR: Linhas numa Tabela Row TR é usado para definir cada linha de uma tabela Cada linha pode incluir entradas do tipo TH e/ou TD ALIGN ALIGN (valores possíveis LEFT, RIGHT, e CENTER) é usado para o alinhamento horizontal em células VALIGN VALIGN (valores possíveis TOP, MIDDLE, ou BOTTOM) é usado para definir o alinhamento vertical das células BGCOLOR Define a cor da linha, redefine qualquer valor definido para a tabela pelo atributo BGCOLOR BORDERCOLOR, BORDERCOLORDARK, 42 Desenho de Documentos no World Wide Web

22 Celulas: TH e TD COLSPAN COLSPAN define uma entrada de uma célula que ocupa múltiplas colunas <TABLE BORDER=1> <TR><TH COLSPAN=2>Col 1&2 Heading <TH>Col3 Heading <TR><TD>Col1 Data <TD>Col2 Data <TD>Col3 Data </TABLE> 43 Desenho de Documentos no World Wide Web Celulas: TH e TD(Cont.) ROWSPAN ROWSPAN define uma entrada de uma célula que ocupa múltiplas linhas ALIGN LEFT, RIGHT, CENTER, JUSTIFY e CHAR. E.g., the following aligns entries on a decimal point <TD ALIGN="CHAR" CHAR="."> VALIGN TOP, BOTTOM, MIDDLE WIDTH, HEIGHT Valor só em pixels NOWRAP Deve ser utilizado com cuidado BGCOLOR, BACKGROUND O mesmo que para tabela ou TR 44 Desenho de Documentos no World Wide Web