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

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

A ULA DE HTML BÁSICO. 2 Introdução Criando um documento HTML A ULA DE HTML BÁSICO Menu Iniciar > Programas > Acessórios > Bloco de notas; No Bloco de.

Apresentações semelhantes


Apresentação em tema: "A ULA DE HTML BÁSICO. 2 Introdução Criando um documento HTML A ULA DE HTML BÁSICO Menu Iniciar > Programas > Acessórios > Bloco de notas; No Bloco de."— Transcrição da apresentação:

1 A ULA DE HTML BÁSICO

2 2 Introdução Criando um documento HTML A ULA DE HTML BÁSICO Menu Iniciar > Programas > Acessórios > Bloco de notas; No Bloco de notas: Arquivo > Salvar como...; Alterar o tipo de arquivo para: Todos os arquivos; Salvar o arquivo com extensão.html;

3 3 Introdução Conceitos básicos sobre HTML A ULA DE HTML BÁSICO Sigla para HyperText Markup Language (Linguagem de Marcação de Hipertexto); HTML é a linguagem utilizada na comunicação entre o desenvolvedor de uma página WEB e o navegador (Internet Explorer, Mozilla Firefox, Safari,...); A HTML utiliza identificadores que são chamados de TAG. Essas TAGs indicam ao navegador o elemento a ser exibido; Cada TAG apresenta uma lista de atributos que podem definir as propriedades dos elementos como aparência, tamanho, posição, cores, fontes, etc. Sintaxe das TAGs As TAGs são palavras definidas, em inglês, e são escritas entre os sinais ;

4 4 Introdução Sintaxe das TAGs A ULA DE HTML BÁSICO As TAGs são palavras definidas, em inglês, e são escritas entre os sinais ; As TAGs devem ser abertas e fechadas para que o navegador saiba de onde e até onde está definido o elemento. Para se fechar uma TAG é utilizado o sinal /. Algumas poucas TAGs não necessitam ser fechadas, sendo recomendado a inserção do sinal / na TAG de abertura; Exemplos:... - TAG aberta e fechada; - TAG que não precisa ser fechada;

5 5 Introdução A ULA DE HTML BÁSICO Sintaxe das TAGs Os atributos de uma TAG são inseridos dentro da TAG de abertura e seus valores devem estar entre aspas simples ou dupla. Exemplos:...

6 6 TAGs fundamentais A ULA DE HTML BÁSICO e Usadas em toda página WEB, são a primeira e a última TAGs a serem inseridas num documento HTML. Entre elas fica escrita toda a página. e head (cabeça) é uma TAG de cabeçalho. Nela são inseridas as primeiras configurações da página a serem utilizadas durante a interpretação feita pelo navegador. Algumas dessas configurações são as folhas de estilo, CSS (Cascading Style Sheets), o título da página e scripts de execução; e title (título) é a TAG que define o título da página e fica inserida dentro de head.

7 7 TAGs fundamentais A ULA DE HTML BÁSICO e body (corpo) é a TAG onde ficam escritos todos os elementos visíveis da página: textos, links, imagens, formulários e etc. Principais atributos de bgcolor utilizado para definir a cor de fundo; as cores também podem ser representadas com codificação hexadecimal; o número de cores distintas disponíveis utilizando o sistema RGB (Reb-Green-Blue) de cores (sistema mais simples) supera 16mi. conjunto de cores: {blue, red, yellow, green,...}; background deve ser inserido o endereço da imagem. seleciona uma imagem para plano de fundo;

8 8 Na prática... A ULA DE HTML BÁSICO Exemplo 1 - código Este é o título Olá. Eu faço parte do corpo da página.

9 9 Na prática... A ULA DE HTML BÁSICO Exemplo 1 - página

10 10 Formatação de textos A ULA DE HTML BÁSICO Quebra de linha e parágrafo quebra de linha; e parágrafo. Principal atributo de align utilizado para alinhar um texto; caso não seja definido, o valor padrão é left. conjunto de valores: {center, left, right, justify};

11 11 Na prática... A ULA DE HTML BÁSICO Exemplo 2 - código Um parágrafo com quebra de linhas alinhado ao centro: "Quem crer pudera, tempo em fora, no meu verso, Se o vosso alto valor eu proclamasse nele? Então – e sabe-o o céu – como em tumba, ao inverso, Vossa vida aí oculto e o mais que em vós excele. Dissesse eu o que minha alma em vossos olhos sente, Vossas graças, fiel, todas enumerasse, E o futuro diria: Este poeta mente; Beleza assim não há da terra sobre a face".

12 12 Na prática... A ULA DE HTML BÁSICO Exemplo 2 - página

13 13 Formatação de textos A ULA DE HTML BÁSICO Títulos e título maior; e e título menor. Principal atributo align.

14 14 Na prática... A ULA DE HTML BÁSICO Exemplo 3 - código Título 1 (esquerda) Título 2 (esquerda) Título 3 (centro) Título 4 (centro) Título 5 (direita) Título 6 (direita)

15 15 Na prática... A ULA DE HTML BÁSICO Exemplo 3 - página

16 16 Formatação de textos A ULA DE HTML BÁSICO Formatações gerais e negrito; e itálico; e sublinhado; e riscado; e define propriedades da fonte como, tamanho, cor, fundo. Principais atributos de color mesmo conjunto de cores do atributo bgcolor; size conjunto de tamanhos: {1,..., 7}, sendo 1 o menor tamanho; utilizado para definir a cor da letra. utilizado para definir o tamanho do texto;

17 17 Na prática... A ULA DE HTML BÁSICO Exemplo 4 - código Formatações gerais: Negrito: texto Itálico: texto Sublinhado: texto Riscado: texto Vermelho tamanho 2 Azul tamanho 5

18 18 Na prática... A ULA DE HTML BÁSICO Exemplo 4 - página

19 19 Trabalhando com figuras A ULA DE HTML BÁSICO Inserção insere uma figura. Principais atributos src indica onde está a imagem; align; border define a espessura da borda; height define a altura; width define a largura.

20 20 Na prática... A ULA DE HTML BÁSICO Exemplo 5 - código

21 21 Na prática... A ULA DE HTML BÁSICO Exemplo 5 - página

22 22 Organização dos elementos A ULA DE HTML BÁSICO Listas e lista não-ordenada (Unordered List); e lista ordenada (Ordered List); e item da lista (List Item); Principal atributo das listas utilizado para definir o marcador a ser utilizado na lista; type a TAG ol utiliza apenas os valores {1, a, A, i, I}; a TAG ul utiliza apenas os valores {circle, disc, square}; deve ser utilizado dentro da ol ou da ul. a TAG li utiliza qualquer um dos tipos apresentados. conjunto de tipos: {1, a, A, i, I, circle, disc, square}; pode-se usar o type como none para que não mostre nenhum marcador.

23 23 Na prática... A ULA DE HTML BÁSICO Exemplo 6 - código Cores: Vermelho Verde Azul Símbolos Quadrado Triângulo Ponto

24 24 Na prática... A ULA DE HTML BÁSICO Exemplo 6 - página

25 25 Organização dos elementos A ULA DE HTML BÁSICO Tabelas e tabela; e linha da tabela (Table Row); e célula (Table Data Cell); Principais atributos de border, width, bgcolor, background. e célula cabeçalho (Table Header Cell). align, bgcolor; valign alinha o conteúdo do elemento verticalmente; Principais atributos de conjunto de valores: {bottom, middle, baseline, top}.

26 26 Organização dos elementos A ULA DE HTML BÁSICO Principais atributos de e align, valign, bgcolor, background; colspan define a quantidade de colunas ocupadas pela célula.

27 27 Na prática... A ULA DE HTML BÁSICO Exemplo 7 - código Dados Nome Sobrenome Idade Fernanda Diniz Santana 22

28 28 Na prática... A ULA DE HTML BÁSICO Exemplo 7 - página

29 29 Organização dos elementos A ULA DE HTML BÁSICO Atributos de espaçamento de cellspacing define o espaço entre as células de uma tabela; cellpadding define o espaço entre o conteúdo de uma célula e sua borda.

30 30 Na prática... A ULA DE HTML BÁSICO Exemplo 8 - código Célula 1 Célula 2 Célula 3 Célula 4

31 31 Na prática... A ULA DE HTML BÁSICO Exemplo 8 - página

32 32 Estruturação da página A ULA DE HTML BÁSICO Frames e define a disposição dos frames (quadros) na página; * Não pode ser usado junto com a tag body; e cria um frame; deve ser usado dentro da tag frameset. Principais atributos de border; cols define quantas colunas conterão frames, informando suas larguras respectivamente.

33 33 Estruturação da página A ULA DE HTML BÁSICO Principais atributos de src; name define um nome para o elemento; frameborder define se o frame terá borda ou não; conjunto de valores: {no, yes}; noresize matém fixo o tamanho do frame.

34 34 Na prática... A ULA DE HTML BÁSICO Exemplo 9 - código Título

35 35 Na prática... A ULA DE HTML BÁSICO Exemplo 9 – código de pagina1.html Título Página 1 Laranja

36 36 Na prática... A ULA DE HTML BÁSICO Exemplo 9 – código de pagina2.html Título Página 2 Azul

37 37 Na prática... A ULA DE HTML BÁSICO Exemplo 9 – código de pagina3.html Título Página 3 Amarelo

38 38 Na prática... A ULA DE HTML BÁSICO Exemplo 9 - página

39 39 Estruturação da página A ULA DE HTML BÁSICO Frames e tag que permite inserir frames dentro da tag body; Principais atributos de frameborder, height, name, src, width. uma vez que não se pode utilizar frameset junto com body deve-se usar iframe quando precisar inserir algum frame em body.

40 40 Na prática... A ULA DE HTML BÁSICO Exemplo 10 – código Fora do frame!

41 41 Na prática... A ULA DE HTML BÁSICO Exemplo 10 - página

42 42 Interatividade da página A ULA DE HTML BÁSICO Link e tag que permite inserir links ná página; com esta tag torna-se possível a navegação em uma página web. Principais atributos de href indica a página ou arquivo a ser aberto; target indica aonde a página ou arquivo deve ser aberto; conjunto de valores: {_self, _blank, *}.

43 43 Na prática... A ULA DE HTML BÁSICO Exemplo 11 – código Página 1 Página com link

44 44 Na prática... A ULA DE HTML BÁSICO Exemplo 11 – código de paginaLink.html Título Abrir página 3

45 45 Na prática... A ULA DE HTML BÁSICO Exemplo 11 - página


Carregar ppt "A ULA DE HTML BÁSICO. 2 Introdução Criando um documento HTML A ULA DE HTML BÁSICO Menu Iniciar > Programas > Acessórios > Bloco de notas; No Bloco de."

Apresentações semelhantes


Anúncios Google