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

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

Linguagem de Programação para WEB Introdução ao HTML.

Apresentações semelhantes


Apresentação em tema: "Linguagem de Programação para WEB Introdução ao HTML."— Transcrição da apresentação:

1 Linguagem de Programação para WEB Introdução ao HTML

2 Estrutura Básica Estrutura básica do HTML Nome da Página em HTML Aqui ficará o que será visível para todos.

3 Tags ou Etiquetas em HTML As etiquetas ou Tags em HTML não são sensíveis à caixa, portanto você poderá escrever tanto,,,. As etiquetas básicas do HTML, cuja presença é altamente recomendada nas páginas são: : define o início de um documento HTML e indicada ao navegador que todo conteúdo posterior deve ser tratado como uma série de códigos HTML; : define o cabeçalho de um documento HTML, que traz informações sobre o documento que está sendo aberto; : define o nome da página em HTML : define o conteúdo principal, o corpo do documento. Esta é a parte do documento HTML que é exibida no navegador. No corpo podem-se definir propriedades comuns a toda a página, como cor de fundo, margens, e outras formatações.

4 Listas Há vários tipos de listas de HTML, sendo estas as mais usadas e corretamente apresentadas pelos browsers: Estas listas são chamadas também “listas de Glossário”, uma vez que têm o formato: Definição Termo a ser definido Definição Termo a ser definido Que ficará: Definição Termo a ser definido Definição Termo a ser definido

5 Listas Listas não-numeradas São equivalentes às listas com marcadores do MS Word: Ítem de uma Lista Ítem de uma Lista

6 Listas Documentos Básicos Documentos avançados Formulários CGI Contadores Relógios Detalhes sobre imagens Documentos Básicos Documentos avançados ▫ Formulários  CGI ▫ Contadores ▫ Relógios Detalhes sobre imagens

7 Listas Uma lista pode ter marcadores diferentes, indicados através do atributo TYPE, que assume os valores CIRCLE, SQUARE E DISC (defaul):

8 Listas Listas numeradas São equivalentes às listas com marcadores do MS Word: Ítem de uma Lista 1.Ítem de um lista 2.Ítem de uma lista 3.Ítem de uma lista

9 Listas Listas numeradas Usando o atributo START você poderá definir o primeiro número de sua lista. artigo 1 artigo 2 artigo 1 artigo 2 3. artigo 1 4. artigo 2 5. artigo 1 6. artigo 2

10 Imagens Para adicionar uma imagem em sua página HTML utiliza-se a tag img. O atributo alt empregado nesta imagem indica a discrição da imagem. Caso o navegador por algum motivo não consiga carregar a imagem, por exemplo, por algum problema no servidor onde ela está hospedada, o texto desse atributo alt aparece. É sempre uma boa prática descrever imagens importantes em significado para o site. São três tipos de imagens que você pode inserir em sua página: - JPG/JPEG - GIF - PNG

11 Imagens Em geral, imagens GIF são ideais para gráficos e desenhos, e imagens JPEG, para fotografia. Existem duas razões para isso: 1º porque imagens GIF são constituídas por 265 cores e imagens JPG por milhões de cores. 2º porque imagnes GIF são mais bem otimizadas para imagens simples, ao passo que imagens JPEG são mais bem otimizadas para imagens complexas. Quanto melhor a compressão, menor o arquivo e mais rápido a página é carregada ao navegador. Tradicionalmente, os formatos GIF e JPEG têm sido mais empregados, mas ultimamente o formato PNG tem se tornado mais popular (notadamente, em detrimento do formato GIF). O formato PNG é melhor que JPEG e GIF devido aos milhões de cores e à efetiva compressão.

12 Imagens Você pode imprimir imagens que estão localizadas em outros diretórios, ou até mesmo em outros websites: Localizada em outro servidor Imagens podem ser links também:

13 Imagens O atributo alt é utilizado para mostram uma caixa pop-up, com o conteúdo do atributo alt, quando o usuário passa o mouse sobre a imagem. O atributo title pode ser usado para fornecer uma curta descrição da imagem

14 Imagens LARGURA E ALTURA DE UMA IMAGEM Os atributos width (Largura) e height (Altura) podem ser usados para definir, respectivamente, a largura e a altura da imagem. O valor adotado para medida é o pixel. Píxel é a unidade de medida usada para medir a resolução da tela (as resoluções de telas mais comuns são de 800x600 e 1024x768 pixels). Ao contrário de centímetros, pixel é uma unidade de medida relativa que depende da resolução da tela. Tela com grande resolução terão 25 pixels por 1 centímetro, enquanto que as de baixa resolução terão os mesmos 25 pixels, mas por, 1,5 cm de tela.

15 Tabelas As tabelas são usadas para apresentar “dados tabulares”, isto é: informações que deva ser apresentada em linhas e colunas, de forma lógica. Criar tabelas em HTML pode parecer complicado, mas se você acompanhar a explicação, passo a passo, verá que é bem simples. Célula 1 Célula 2 Célula 3 Célula 4 Célula 5 Célula 6 Célula 1Célula 2Célula 3 Célula 4Célula 5Célula 6

16 Tabelas começa uma tabela; termina uma tabela; significa “table row” – linha de tabela – começa e termina em uma linha horizontal da tabela. significa “table data” – dados da tabela – começa e termina em cada célula contida nas linhas da tabela.

17 Tabelas Atributos de tabela : O elemento delimita uma tabela e a espessura de sua borda. Ex: Width(largura) e Height (altura): Com estes atributos, você pode definir o tamanho que a tabela vai ocupar na tela. Eles podem ser em pixels ou em porcentagem. Um exemplo de tabela com valor de largura que ocupe 70% da tela (width=“75%”) linha1, coluna 1linha 1, coluna 2 linha 2, coluna 1linha 2, coluna 2

18 Tabelas É possível dividir colunas e linhas, através dos atributos COLSPAN (para colunas) e ROWSPAN (para linhas): Título Célula 1 Célula 2 Célula 3

19 Tabelas ROWSPAN (para linhas): Célula 1 Célula 2 Célula 3 Célula 1 Célula 2 Célula 3 Célula 1 Célula 2

20 Tag A tag div é amplamente utilizada. Essa tag não causa nenhuma diferença visual no código. Ela é considerada uma esécie de “caixa” imaginária em que você pode, através de scritp, aterar o conteúdo, ou o estilo, através de CSS (folha de estilo). Texto....

21 Formulários Formulário em HTML CADASTRO IF Nome: Endereço: Telefone:

22 Formulários Através de um formulário o usuário poderá interagir com o servidor, enviando dados que são processados e devolvidos. Por exemplo: O envio de dados como parâmetro para uma página PHP, que fica responsável em gravar os dados em um banco da dados. Elementos de Formulário Method: Define o método utilizado pelo servidor para receber os dados do formulário. O método pode ser: - POST: Método mais utilizado, transmite a informação do formulário imediatamente após a URL; - GET: anexa o conteúdo do formulário ao endereço da URL, por isso tem limitação de tamanho das informações.

23 Formulários ACTION: especifica o programa ou página do servidor que processará os dados do servidor. NAME: Define o nome do formulário. ALGUNS ELEMENTOS DE UM FORMULÁRIO Text: Áre de texto Password: texto protegido por senha Radio: botão com uma opção Checkbox: Botão com mais opções Reset: Limpa os campos Submit: Envia os dados do formulário Button: Botão File: Abre uma janela para selecionar arquivo.


Carregar ppt "Linguagem de Programação para WEB Introdução ao HTML."

Apresentações semelhantes


Anúncios Google