A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

Pedro Costa Introdução ao HTML 1 Curso de Jornalismo e Ciências da Comunicação Disciplina de Tecnologia dos Media Introdução ao HTML.

Apresentações semelhantes


Apresentação em tema: "Pedro Costa Introdução ao HTML 1 Curso de Jornalismo e Ciências da Comunicação Disciplina de Tecnologia dos Media Introdução ao HTML."— Transcrição da apresentação:

1 Pedro Costa Introdução ao HTML 1 Curso de Jornalismo e Ciências da Comunicação Disciplina de Tecnologia dos Media Introdução ao HTML

2 Pedro Costa Introdução ao HTML 2 Linguagem usada nas páginas da web Documentos escritos em ASCII- texto Cada página é um ficheiro que tem a extensão.htm ou.html O nome do ficheiro tem de ser em minúsculas, sem acentos e sem espaços. HTML

3 Pedro Costa Introdução ao HTML 3 Um elemento HTML é constituído preferencialmente por 3 partes Marca(tags) de inicio Conteúdo Marca(tags) de fim Marcas html

4 Pedro Costa Introdução ao HTML 4 Marca de inicio é composta por Marca de inicio Os atributos podem ser obrigatórios ou opcionais Usar sempre minúsculas na escrita das marcas

5 Pedro Costa Introdução ao HTML 5 Conteúdo é basicamente o texto que aparece nas páginas pode ser escrito em português, com maiúsculas, minúsculas, acentos e espaços Conteúdo

6 Pedro Costa Introdução ao HTML 6 A marca de fim serve exclusivamente para indicar que o fim do elemento que estamos a utilizar Usa-se o sinal / Por exemplo: Marca de fim

7 Pedro Costa Introdução ao HTML 7 Existem elementos HTML que só têm a primeira Marca de inicio Marcas

8 Pedro Costa Introdução ao HTML 8 Estrutura de uma página DOCTYPE – define a versão do HTML que estamos a trabalhar Por defeito pomos a última mais usada Definição de inicio e fim de uma página HTML - … Dentro da página temos duas secções: Cabeçalho: … Corpo ou Conteúdo: …

9 Pedro Costa Introdução ao HTML 9 Exemplo Primeira página

10 Pedro Costa Introdução ao HTML 10 Cabeçalho Tecnologia dos Media Titulo que aparece em cima - … As Metas dão informações das mais variadas espécies Tipo de conteúdos e de linguagem Autor Descrição da página Keywords

11 Pedro Costa Introdução ao HTML 11 Elementos do Corpo Paragrafo e quebra de linha Parágrafos: delimitam blocos de informação - … Quebra de linha: - Elemento que não precisa de marca do fim Exemplo: Em TM temos três áreas: Informática, Fotografia e Vídeo. A disciplina tem 11 horas semanais. Dividida em 6 para Informática e 2,5 para as restantes. Resultado Em TM temos três áreas: Informática, Fotografia e Vídeo. A disciplina tem 11 horas semanais. Dividida em 6 para Informática e 2,5 para as restantes.

12 Pedro Costa Introdução ao HTML 12 Elementos do Corpo Paragrafo e quebra de linha Exemplo: Para inserir um break num paragrafo, usa-se a marca br. Resultado Para inserir um break num paragrafo usa-se uma marca br.

13 Pedro Costa Introdução ao HTML 13 Elementos do Corpo Cabeçalhos Existem 6 níveis de cabeçalhos, desde o mais importante até ao menos. Exemplo: Mais importante 2º mais importante Último Resultado Mais Importante 2º mais importante Último

14 Pedro Costa Introdução ao HTML 14 Elementos do Corpo Cabeçalhos Exemplo: Este é o cabeçalho 1 Este cabeçalho está centrado em relação ao tamanho da página. Resultado Este é o cabeçalho 1 Este cabeçalho está centrado em relação ao tamanho de página

15 Pedro Costa Introdução ao HTML 15 Elementos do Corpo Formatação do texto Negrito ou bold - … Italico - … Sublinhado - … Exemplo: Em TM temos três áreas: Informática, Fotografia e Vídeo. A disciplina tem 11 horas semanais. Dividida em 6 para Informática e 2,5 para as restantes. Resultado Em TM temos três áreas: Informática, Fotografia e Vídeo. A disciplina tem 11 horas semanais. Dividida em 6 para Informática e 2,5 para as restantes.

16 Pedro Costa Introdução ao HTML 16 Elementos do Corpo Formatação do texto Exemplo: Este texto está em bold Este texto está em italico Este texto mais pequeno Resultado Este texto está em bold Este texto está em italico Este texto mais pequeno

17 Pedro Costa Introdução ao HTML 17 Elementos do Corpo Listas Numeradas Lista - … Elemento de uma lista … Exemplo: Informatica Fotografia Video Resultado 1.Informatica 2.Fotografia 3.Video

18 Pedro Costa Introdução ao HTML 18 Elementos do Corpo Listas Numeradas Exemplo: Lista numeradas: Maças Bananas Limões Laranjas Lista com letras: Maças Bananas Limões Laranjas Lista com letras minusculas: Maças Bananas Limões Laranjas RLista com numeros romanos: Maças Bananas Limões Laranjas Lista com numeros romanos minusculos: Maças Bananas Limões Laranjas

19 Pedro Costa Introdução ao HTML 19 Elementos do Corpo Listas não numeradas e sub listas Lista - … Elemento de uma lista … Exemplo: Informática Teórica Prática Fotografia Video Resultado Informática Teórica Prática Fotografia Vídeo

20 Pedro Costa Introdução ao HTML 20 Elementos do Corpo Listas não numeradas e sub listas Exemplo: Lista com discos: Maças Bananas Limões Laranjas Lista com circulos: Maças Bananas Limões Laranjas Lista com quadrados; Maças Bananas Limões Laranjas

21 Pedro Costa Introdução ao HTML 21 Elementos do Corpo Hiperligações Fazem a ligação a outros documentos … Exemplo: O site da disciplina Tm na área de informática é no moodle da feup Resultado O site da disciplina Tm na área de informática é moodle da feup

22 Pedro Costa Introdução ao HTML 22 Elementos do Corpo Hiperligações internas Quando queremos fazer ligações a outros ficheiros no mesmo sitio. Exemplo: Ligação de um ficheiro que está em w:\tm\ficheiro1.htm para um que está em w:\tm\ficheiro2.htm … Ligação de um ficheiro que está em w:\tm\ficheiro1.htm para um que está em w:\tm\teorica\ficheiro2.htm … Ligação de um ficheiro que está em w:\tm\ficheiro1.htm para um que está em w:\hj\ficheiro2.htm …

23 Pedro Costa Introdução ao HTML 23 Elementos do Corpo Hiperligações internas Exemplo: Este texto é um link para uma página chamada lastpage.htm. Este texto é um link para a página do google Resultado: Este textoEste texto é um link para uma página chamada lastpage.htm.. Este textoEste texto é um link para a página do google

24 Pedro Costa Introdução ao HTML 24 Elementos do Corpo Imagens Imagem - Exemplo: Resultado Ter em atenção que o caminho e o nome do ficheiro da imagem tem de ser escrito partindo do ponto de partida do documento Ou seja se a imagem estiver na directoria do documento HTML só se escreve o nome do ficheiro. Se estiver noutra directoria temos de seguir os mesmo cuidados que nas hiperligações Usar minúsculas, não usar acentos e espaços nos nomes das imagens

25 Pedro Costa Introdução ao HTML 25 Elementos do Corpo Imagens Exemplo: Uma imagem com o tamanho real: Uma imagem com 48 pixeis de comprimento e 48 pixeis de altura Uma imagem com 148 pixeis de comprimento e 48 pixeis de altura

26 Pedro Costa Introdução ao HTML 26 Elementos do Corpo Tabelas Muitas vezes é usada para estruturar a informação Tabela … Linha … Celula … Exemplo: Célula da 1ª linha e 1ª Coluna Célula da 1ª linha e 2ª Coluna Célula da 2ª linha e 1ª Coluna Célula da 2ª linha e 2ª Coluna Resultado Célula da 1ª linha e 1ª Coluna Célula da 1ª linha e 2ª Coluna Célula da 2ª linha e 1ª Coluna Célula da 2ª linha e 2ª Coluna

27 Pedro Costa Introdução ao HTML 27 Elementos do Corpo Tabelas Exemplo: Esta tabela tem legenda e borda de 6: Legenda Resultado Esta tabela tem legenda e borda de 6: Legenda

28 Pedro Costa Introdução ao HTML 28 Elementos do Corpo Tabelas Exemplo: Esta tabela tem fundo nas celulas primeira linha segunda linha Resultado Esta tabela tem fundo nas células primeiralinha segundalinha

29 Pedro Costa Introdução ao HTML 29 Estrutura dos elementos O elementos têm uma estrutura de encaixe hierárquico, mas não podem ser intercalados Paragrafo com texto tipo bold texto normal novamente Correcto Incorrecto Texto que não aparece correctamente

30 Pedro Costa Introdução ao HTML 30 Referencias HTML página de consultapágina de consulta W3C HTML Home PageW3C HTML Home Page, W3C Especificação da HyperText Markup Language 4.01Especificação da HyperText Markup Language 4.01, W3C Lista de elementos HTMLLista de elementos HTML, W3C Lista de atributos HTMLLista de atributos HTML, W3C HyperText Markup LanguageHyperText Markup Language, WaSP


Carregar ppt "Pedro Costa Introdução ao HTML 1 Curso de Jornalismo e Ciências da Comunicação Disciplina de Tecnologia dos Media Introdução ao HTML."

Apresentações semelhantes


Anúncios Google