HTML Introdução, A.Barão, 20021 HTML HTML - Hypertext Markup Language Um programa HTML reside num ficheiro de texto simples (extensão: html ou htm) A linguagem.

Apresentação em tema: "HTML Introdução, A.Barão, 20021 HTML HTML - Hypertext Markup Language Um programa HTML reside num ficheiro de texto simples (extensão: html ou htm) A linguagem."— Transcrição da apresentação:

1 HTML Introdução, A.Barão, 20021 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...

2 HTML Introdução, A.Barão, 20022 HTML exhtml01.html

3 HTML Introdução, A.Barão, 20023 HTML Fundamentos de Programação para a Web Objectivos Sessão 1 Sessão 2 Sessão 3 exhtml01.html [HTML-C,00]

4 HTML Introdução, A.Barão, 20024 HTML Declara que o texto seguinte define uma página HTML que pode ser visualizada num Web browser. A tag termina a página. Define a área de cabeçalho (header) da página. A tag termina a zona de cabeçalho.

5 HTML Introdução, A.Barão, 20025 HTML Define o título da página que é visualizado na barra de título do browser. A tag 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. Delimita/caracteriza o conteúdo que será visualizado na página. A tag termina a zona de conteúdo.

6 HTML Introdução, A.Barão, 20026 HTML Marca o início de um parágrafo. termina o parágrafo. É opcional no entanto deve ser incluído para facilitar a interpretação do código por terceiros. Provoca uma mudança de linha sem adição de caracteres extra no código HTML Horizontal line/horizontal rule. Útil para representar secções na página. Utilizado para comentar o código. O browser ignora as descrições entre esta tag e. Ou

7 HTML Introdução, A.Barão, 20027 HTML Headings Uma página Web pode ter no máximo 6 níveis de headings Os browsers visualizam a informação respeitando o nível de subordinação dos headings. Nível alto Nível baixo

8 HTML Introdução, A.Barão, 20028 HTML exhtml02.html

9 HTML Introdução, A.Barão, 20029 HTML F.P. Web Objectivos Sessão 1 Apresentação da cadeira Compreender a Web exhtml02.html (…) As linhas podem ser formatadas com alinhamento Ex: RIGHT LEFT CENTER

10 HTML Introdução, A.Barão, 200210 HTML Apresentar a informação em forma 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 Interpretadas actualmente como listas não ordenadas

11 HTML Introdução, A.Barão, 200211 HTML exhtml03.html

12 HTML Introdução, A.Barão, 200212 Lista Ordenada HTML Ordered List Sessão 1 List Item Sessão 2 Sessão 3 exhtml03.html (…)

13 HTML Introdução, A.Barão, 200213 HTML exhtml04.html

14 HTML Introdução, A.Barão, 200214 Lista Não Ordenada HTML Unordered List Sessão 1 List Item Sessão 2 Sessão 3 exhtml04.html (…)

15 HTML Introdução, A.Barão, 200215 HTML exhtml05.html

16 HTML Introdução, A.Barão, 200216 Lista “Definition” HTML Definition List Sessão 1 Definition Term Apresentação da cadeira Definition Description Compreender a Web Sessão 2 Planear e desenhar uma Web Page Compreender o processo de concepção de um sistema hipertexto Respeitar questões e príncipios da concepção cognitiva de hiperdocumentos Conhecer a HTML exhtml05.html (…)

17 HTML Introdução, A.Barão, 200217 HTML exhtml06.html

18 HTML Introdução, A.Barão, 200218 Texto Pré-formatado HTML As posições relativas do Vannevar Bush texto são respeitadas. As We May Think, The Atlantic Monthly, July 1945 exhtml06.html (…)

19 HTML Introdução, A.Barão, 200219 HTML exhtml06.html

20 HTML Introdução, A.Barão, 200220 Texto Não Pré-formatado HTML As posições relativas do Vannevar Bush texto não são respeitadas. As We May Think, The Atlantic Monthly, July 1945 exhtml06.html (…)

21 HTML Introdução, A.Barão, 200221 HTML Formatação de Caracteres Bold Itálico Sublinhado Letra Fixa Ênfase Importante Citação

22 HTML Introdução, A.Barão, 200222 HTML exhtml07.html

23 HTML Introdução, A.Barão, 200223 HTML Formatação de Caracteres HTML exhtml07.html (…) Vannevar Bush As We May Think, The Atlantic Monthly, July 1945

24 HTML Introdução, A.Barão, 200224 HTML Caracteres especiais Exemplo: <>&“áÀçê<>&“áÀçê &lt &gt &amp &quot &aacute &Agrave &ccedil &ecirc Após a utilização de um código deve ser colocado um ponto e vírgula.

25 HTML Introdução, A.Barão, 200225 HTML Caracteres especiais HTML exhtml08.html (…) <Programação para a Web>

26 HTML Introdução, A.Barão, 200226 HTML exhtml08.html

27 HTML Introdução, A.Barão, 200227 HTML Imagens em documentos HTML ou num computador remoto:

28 HTML Introdução, A.Barão, 200228 HTML exhtml09.html

29 HTML Introdução, A.Barão, 200229 HTML Imagens em documentos HTML HTML exhtml09.html (…) O qualificador BORDER coloca uma linha delimitadora à volta da figura, com uma espessura controlada em pixels

30 HTML Introdução, A.Barão, 200230 HTML exhtml10.html

31 HTML Introdução, A.Barão, 200231 HTML Imagens em documentos HTML HTML exhtml10.html (…) Península Ibérica TOP MIDDLE BOTTOM LEFT RIGHT A posição relativa do texto em relação à imagem muda.

32 HTML Introdução, A.Barão, 200232 HTML exhtml11.html

33 HTML Introdução, A.Barão, 200233 HTML Imagens em documentos HTML HTML exhtml11.html (…)

34 HTML Introdução, A.Barão, 200234 HTML Imagens em documentos HTML HTML Sobre as imagens… As imagens estão normalmente em formatos gráficos: *.GIF Graphic Interchange Format *.JPEG Joint Photographic Experts Group Exploração: Animated Interlaced Transparent

35 HTML Introdução, A.Barão, 200235 HTML exhtml12.html

36 HTML Introdução, A.Barão, 200236 HTML Cores em documentos HTML HTML exhtml12.html (…) Tabela RGB recomendada R G B 00 00 00 33 33 33 66 66 66 99 99 99 CC CC CC FF FF FF red green blue componentes

37 HTML Introdução, A.Barão, 200237 HTML exhtml13.html

38 HTML Introdução, A.Barão, 200238 HTML Fontes em documentos HTML HTML exhtml13.html (…) Texto Vermelho Texto alvo Valor RGB Nome das fontes por ordem de preferência separadas por vírgulas Ex: “Arial, Times New Roman, Courier” 1 a 7 3=padrão ou +n -n em relação ao tamanho existente

39 HTML Introdução, A.Barão, 200239 HTML exhtml14.html

40 HTML Introdução, A.Barão, 200240 HTML Tabelas HTML exhtml14.html (…) Tabela Coluna 1 Coluna 2 Coluna 3 aaa bbb ccc Todas as linhas começam por para título da tabela por cada célula da tabela

41 HTML Introdução, A.Barão, 200241 HTML exhtml15.html

42 HTML Introdução, A.Barão, 200242 HTML Tabelas (continuação) HTML exhtml15.html (…) Tabela Coluna 1 Coluna 2 Coluna 3 aaa bbb ccc Tabela com moldura

43 HTML Introdução, A.Barão, 200243 HTML exhtml16.html

44 HTML Introdução, A.Barão, 200244 HTML Tabelas (continuação) HTML exhtml16.html (…) Tabela Coluna 1 Coluna 2 Coluna 3 aaa bbb ccc A tabela ocupa neste caso 50% da área cliente no ecrã

45 HTML Introdução, A.Barão, 200245 HTML exhtml17.html

46 HTML Introdução, A.Barão, 200246 HTML Tabelas (continuação) HTML exhtml17.html (…) FPW Sessão Planificação Objectivos Conteúdos 1 Apresentar a Cadeira A Web... Expectativas,Objectivos... Os qualificadores COLSPAN e ROWSPAN são aplicados às marcas e e definem o tamanho das células em colunas e linhas respectivamente

47 HTML Introdução, A.Barão, 200247 HTML Hiperligações (Texto do link) [CPWWW,98]

48 HTML Introdução, A.Barão, 200248 HTML links Exemplos pag.cinco Meteorologia Links internos (Texto do link) Definição da marca da secção link

49 HTML Introdução, A.Barão, 200249 HTML Links para páginas e serviços de outros protocolos Acesso a um servidor Ftp Arquivo Ftp da Eunet Enviar um mail nome da pessoa Alguns exemplos Nome da Pessoa nome da pessoa Endereço do autor, depois de

50 HTML Introdução, A.Barão, 200250 HTML Frames exhtml18.html

51 HTML Introdução, A.Barão, 200251 HTML Frames exhtml18.html

52 HTML Introdução, A.Barão, 200252 HTML Frames exhtml18.html

53 HTML Introdução, A.Barão, 200253 HTML Frames exhtml18.html (…)

54 HTML Introdução, A.Barão, 200254 HTML Frames menu.html (…) Objectivos Conteúdos

55 HTML Introdução, A.Barão, 200255 HTML Frames info.html (…) Seleccione um tópico

56 HTML Introdução, A.Barão, 200256 HTML Frames object.html (…) Apresentar a cadeira Compreender a Web, origens,...

57 HTML Introdução, A.Barão, 200257 HTML Frames conteud.html (…) Web Hipertexto Hipermédia

58 HTML Introdução, A.Barão, 200258 Standards http://www.w3.org World Wide Web Consortium