PROFESSORA MERRIS MOZER. Mestranda em Metodologias para o Ensino de Linguagens e suas Tecnologias

Tamanho: px

Começar a partir da página:

Download "PROFESSORA MERRIS MOZER. Mestranda em Metodologias para o Ensino de Linguagens e suas Tecnologias"

Sophia Osório Branco
6 Há anos
Visualizações:

1 PROFESSORA MERRIS MOZER Mestranda em Metodologias para o Ensino de Linguagens e suas Tecnologias

2 INTRODUÇÃO AO DESENVOLVIMENTO DE SISTEMAS WEB Aula 1 HTML

3 INTRODUÇÃO O que é HTML?

4 INTRODUÇÃO HTML ou Hypertext Markup Language Linguagem de marcação de textos Pode ser escrito em qualquer editor de texto. É uma linguagem de marcação de hipertexto e é usada para criar sites, e pode conter além de textos, imagens, animações vídeos e sons.

5 TAG A base de um documento HTML é um TAG. < > Exemplo: <html>

6 TAG - HTML O TAG principal do documento HTML é: <HTML> Abrindo TAG: <HTML> Fechando TAG: </HTML>

7 TAG HEAD e BODY Existem mais dois TAGs importantes que são: TAG <head> para cria o cabeçalho TAG <body> para criar o corpo do documento.

8 ESTRUTURA BÁSICA DE UM DOCUMENTO HTML <HTML> <head> </head> <body> </body> </HTML>

9 RELEMBRANDO

10 USANDO O BLOCO DE NOTAS Será utilizado o Bloco de Notas (NotePad), encontrado no Windows, para começarmos este estudo sobre HTML, assim possibilitará de uma forma bem simples o entendimento dos comandos básicos.

11 USANDO O BLOCO DE NOTAS

12 PROFESSORA MERRIS MOZER Mestranda em Metodologias para o Ensino de Linguagens e suas Tecnologias

13 INTRODUÇÃO AO DESENVOLVIMENTO DE SISTEMAS WEB Aula 2 Comandos de Formatação (Parte 1)

14 QUEBRA DE LINHA Quando necessitar somente de uma quebra de linha sem dar espaço entre as linhas, utilizar o TAG , por exemplo para demonstrar tópicos. O TAG não requer seu fechamento como as demais.

15 PARÁGRAFO Para que o documento tenha quebra de linha ao final do parágrafo, ou seja, que sejam separados utiliza-se o TAG ...

16 CABEÇALHO O TAG usado é denominado como <h1> conhecido como header1. Pode-se utilizar h1, h2, h3, h4, h5, h6. A numeração que acompanha a letra "h" indica o tamanho das fontes, a medida que o número cresce o tamanho das letras diminuem. Estes TAGs ficam definidos da seguinte forma: <h1>...</h1>

17 ATIVIDADE

18 PROFESSORA MERRIS MOZER Mestranda em Metodologias para o Ensino de Linguagens e suas Tecnologias

19 INTRODUÇÃO AO DESENVOLVIMENTO DE SISTEMAS WEB Aula 3 Comandos de Formatação (Parte 2)

20 MELHORANDO A APARÊNCIA DO DOC Para colocar a palavra em negrito "bold" usamos o TAG desta forma tudo que estiver entre o TAG ficará em negrito. Quando desejar destacar um determinado texto e formatá-lo para itálico, utiliza-se o TAG . Exemplo:

21 MELHORANDO A APARÊNCIA DO DOC negrito itálico sublinhado sobrescrito subscrito

22 ATIVIDADE!!

23 PROFESSORA MERRIS MOZER Mestranda em Metodologias para o Ensino de Linguagens e suas Tecnologias

24 INTRODUÇÃO AO DESENVOLVIMENTO DE SISTEMAS WEB Aula 4 Comandos de Formatação (Parte 3)

25 MELHORANDO A APARÊNCIA DO DOC <big> grande </big> pequeno <tt>... </tt> - letras com o mesmo espaço (largura)

26 CONTINUAÇÃO DA ATIVIDADE!!

27 ALINHAMENTO Todo cabeçalho/parágrafo poderá ser alinhado à: Esquerda Direita ou Centralizado Exemplo DE: ... PARA:... .

28 ATIVIDADE!!!

29 PROFESSORA MERRIS MOZER Mestranda em Metodologias para o Ensino de Linguagens e suas Tecnologias

30 INTRODUÇÃO AO DESENVOLVIMENTO DE SISTEMAS WEB Aula 5 Trabalhando com cores (Parte 1)

31 DEFININDO CORES Trabalhar com cores é uma tarefa muito fácil com HTML. Pode ser utilizado o nome das cores ou sua forma hexadecimal. Definindo cores para: plano de fundo fontes

32 COR - PLANO DE FUNDO Para alterar a cor de fundo do documento será configurado o parâmetro background no TAG "body Exemplo: DE: <body>...</body> PARA: <body bgcolor= red >...</body>

33 TAG BODY - COR DA FONTE Para alterar a cor da fonte de todo o TAG body utiliza-se o parâmetro text Exemplo: text = white <body bgcolor="silver text="white"

34 COR DA FONTE TAG para alterar a cor das letras do texto é a . Esta TAG é uma das mais importantes para a construção do documento HTML, pois com ela é possível formatar em uma única estrutura o tamanho da letra, o tipo da letra e a cor que se deseja atribuir para a fonte

35 ESTRUTURA DA TAG FONT Size = n Face = nome da fonte Color = cor

37 PROFESSORA MERRIS MOZER Mestranda em Metodologias para o Ensino de Linguagens e suas Tecnologias

38 INTRODUÇÃO AO DESENVOLVIMENTO DE SISTEMAS WEB Aula 6 Trabalhando com cores (Parte 2)

39 COR DA FONTE

40 PAINT E CALCULADORA

41 Atividade Monte os códigos de cores:

42 PROFESSORA MERRIS MOZER Mestranda em Metodologias para o Ensino de Linguagens e suas Tecnologias

43 INTRODUÇÃO AO DESENVOLVIMENTO DE SISTEMAS WEB Aula 7 IMAGEM

44 IMAGEM Comando básico para inclusão de imagens: <img src="imagens/logo.jpg"> Alinhando a imagem: <img src="imagens/logo.jpg"> <img src="imagens/logo.jpg">

45 IMAGEM

46 ABSOLUTO OU RELATIVO? Valor ABSOLUTO: <HTML> <head> <title>tabelas</title> </head> <body> <img src="imagens/ead1.jpg" width="200"> </body> </HTML>

47 ABSOLUTO OU RELATIVO? Valor RELATIVO: <HTML> <head> <title>tabelas</title> </head> <body> <img src="imagens/ead1.jpg" width="20%"> </body> </HTML>

48 PROFESSORA MERRIS MOZER Mestranda em Metodologias para o Ensino de Linguagens e suas Tecnologias

49 INTRODUÇÃO AO DESENVOLVIMENTO DE SISTEMAS WEB Aula 8 Link Âncora para outra página

Para isto é necessário criar uma âncora utilizando o TAG <a></a>,

50 LINK A internet é totalmente linkada, ou seja, quando o usuário clicar em um determinado texto deverá redirecionar para uma página. Para isto é necessário criar uma âncora utilizando o TAG <a></a>, assim: <a href=" </a> Hypertext reference a = anchor = âncora

51 LINK Pode-se criar: Uma âncora para outra página por um texto ou por uma imagem.

52 PROFESSORA MERRIS MOZER Mestranda em Metodologias para o Ensino de Linguagens e suas Tecnologias

53 INTRODUÇÃO AO DESENVOLVIMENTO DE SISTEMAS WEB Aula 9 Link Navegação dentro do mesmo documento

54 LINK Existem links que navegam dentro do documento principal, pois este pode ser extenso ou com muitos títulos. Para este tipo de programação será necessário criar áreas dentro do texto principal, estas áreas servem para mapear o documento. Assim, quando clicar no tópico, o cursor será posicionado diretamente na área correspondente.

55 LINK Pode-se criar: Navegação dentro do mesmo documento

56 PROFESSORA MERRIS MOZER Mestranda em Metodologias para o Ensino de Linguagens e suas Tecnologias

57 INTRODUÇÃO AO DESENVOLVIMENTO DE SISTEMAS WEB Aula 10 Áreas sensíveis - Quadrangular

58 ÁREAS SENSÍVEIS DA IMAGEM

59 ÁREAS SENSÍVEIS DA IMAGEM Serão utilizadas imagens mapeadas. Para o mapeamento é necessário criar um mapa e definir a área sensível da imagem. Criando o Mapa: <map name= img_ead ></map> Em seguida criar a área sensível.

60 IMAGEM

Documentos relacionados

LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON

LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON COMPONENTES: ROBSON EDMILSON O HTML (Hiper Text Mark-up Language) é uma linguagem de programação hipertexto. O HTML tem códigos para criar páginas na web. Estes códigos que definem o tipo de letra, qual