PROGRAMAÇÃO PARA WEB HTML Aula 1 – 26/01/2009 Instrutor:  Nelson Luis Rodrigues Pereira
O que é HTML? <ul><li>É a linguagem de marcação de hipertexto, ou seja, e a linguagem na qual são escritas as páginas da W...
O que são TAG’s? <ul><li>São marcas padrões que designam os comandos HTML a serem lidos pelo navegador ou Browser. </li></...
Representação de uma TAG HTML <ul><li><TAG atributos=”Valor do atributo”> texto </TAG> </li></ul><ul><li>EXEMPLO: </li></u...
Estrutura Básica do HTML <ul><li><HTML> </li></ul><ul><li><HEAD> </li></ul><ul><li><TITLE> Título da página </TITLE> </li>...
Tag’s estruturais <ul><li>HTML:  São usados para delimitar os comandos HTML, indicando o início e o fim de cada documento....
Níveis de cabeçalho <ul><li>Chama-se de cabeçalhos os níveis dos diversos tipos de tópicos textuais ( Título, Subtítulo, T...
Páragrafos <ul><li>Para delimitar parágrafos dentro do HTML usa-se a tag <P>, que é inserida no início do parágrafo e ence...
Parágrafos <ul><li>SINTAXE: </li></ul><ul><li><P align=”alinhamento”> texto do parágrafo</p> </li></ul><ul><li>Onde: </li>...
Fontes <ul><li>Permitir utilizar fontes com formatações diferentes em diversas partes do texto. </li></ul><ul><li>Possui t...
Fontes <ul><li>SINTAXE: </li></ul><ul><li><FONT size=”tamanho” face=”tipo” color=”cor”> Texto </FONT> </li></ul>
Estilos de texto
Listas <ul><li>Boa forma de organização de páginas na web. São chamadas também de tópicos ou de marcadores e numeração.  <...
Lista Não-numerada <ul><li>Lista que utiliza os tradicionais Marcadores ou “Bullets”. </li></ul><ul><li>SINTAXE: </li></ul...
Lista numerada <ul><li>Lista que utiliza números, letras maiúsculas. minúsculas ou algarismos romanos. </li></ul><ul><li>S...
Lista de definição <ul><li>Lista que utiliza de tópicos com suas definições. </li></ul><ul><li>SINTAXE: </li></ul><ul><ul>...
Links <ul><li>Antes de prosseguirmos com os links, precisamos entender como funciona a estrutura de diretórios na web. </l...
Links para o mesmo servidor <ul><li>Neste caso, usa-se a estrutura vista no slide anterior, visto que o servidor onde é o ...
Links para outros servidores <ul><li>Neste caso, basta usar o endereço Web do arquivo ou página de destino. </li></ul><ul>...
Links para download <ul><li>Possuem a mesma estrutura dos anteriores, podendo estar no mesmo servidor ou em servidores dif...
Âncoras <ul><li>São links dentro do mesmo arquivo HTML. Usados principalmente em aplicações de linguagens de programação, ...
Âncoras <ul><li>SINTAXE: </li></ul><ul><li>Origem: </li></ul><ul><li><a href=”#nome_da_ancora”> Jogar âncora </a> </li></u...
Links para email <ul><li>Utilizado para facilitar ao usuário um contato com o webmaster do site ou com a empresa que admin...
Prática <ul><li>1) Crie dois arquivos HTML com os nomes que quiser. EX: Exe01.html e Exe02.html . </li></ul><ul><li>2)Crie...
Imagens <ul><li>Imagens de um site são fator marcante na estética e no marketing deste. </li></ul><ul><li>Para inserir ima...
Imagens <ul><li>SINTAXE: </li></ul><ul><li><IMG src=”endereco_da_imagem” alt=”texto alternativo” border=”numero”  align=”a...
Prática <ul><li>Baixe uma imagem na internet e insira ela através do código. </li></ul><ul><li>Insira outra imagem como pa...
LAYERS <ul><li>Blocos são  tag's que delimitam áreas dentro da página onde podem  ser  inseridos textos,  tabelas,  imagen...
LAYERS <ul><li>DIV: </li></ul><ul><li>Tag  de  delimitação  de  bloco  que  promove  o  alinhamento horizontal a esquerda,...
Formulários <ul><li>Permite que o usuário interaja com o servidor através do envio de informações pertinentes. Aplicado qu...
Input <ul><li>SINTAXE: </li></ul><ul><li><INPUT type=”tipo de input”> </input> </li></ul><ul><li>Onde type pode ser: </li>...
Input <ul><li>TEXT:  Armazena dados informados pelo usuário. Possui os atributos NAME, SIZE(Tamanho de exibição) e MAXLENG...
Input <ul><li>RADIO:  Define uma caixa de seleção para o visitante marcar apenas uma que seja desejada. Para opções do mes...
Select <ul><li>Permite definir uma lista de opções com barra de rolagem ou fixa que podem ser selecionados pelo usuário. <...
Textarea <ul><li>Insere uma caixa de texto com um número pré-definido de linhas e colunas. </li></ul><ul><li>SINTAXE: </li...
Métodos de submissão de formulários <ul><li>Método GET: </li></ul><ul><ul><li>Os dados do formulários são enviados na URL ...
Próximos SlideShares
Carregando em…5
×

Aula1

722 visualizações

Publicada em

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
722
No SlideShare
0
A partir de incorporações
0
Número de incorporações
87
Ações
Compartilhamentos
0
Downloads
57
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Aula1

  1. 1. PROGRAMAÇÃO PARA WEB HTML Aula 1 – 26/01/2009 Instrutor: Nelson Luis Rodrigues Pereira
  2. 2. O que é HTML? <ul><li>É a linguagem de marcação de hipertexto, ou seja, e a linguagem na qual são escritas as páginas da Web, interpretada pelo navegador. </li></ul><ul><li>Hipertexto -> significa um texto não linear, com mais de uma dimensão. Através de ligações(links), o usuário pode pesquisar apenas os tópicos que lhe interessam e ignorar os que não lhe convém. </li></ul>
  3. 3. O que são TAG’s? <ul><li>São marcas padrões que designam os comandos HTML a serem lidos pelo navegador ou Browser. </li></ul><ul><li>Aparecem sempre delimitadas por um sinal. Ex: “<” e “>” ; “{“ e “}”; “[“ e “]”. </li></ul><ul><li>Algumas necessitam vim aos pares, sendo que uma indica o início do comando e a outra o final do comando. </li></ul><ul><ul><li>OBS: No HTML, algumas TAG's podem vim isoladas. Já no XHTML, elas devem sempre aparecerem em pares. </li></ul></ul>
  4. 4. Representação de uma TAG HTML <ul><li><TAG atributos=”Valor do atributo”> texto </TAG> </li></ul><ul><li>EXEMPLO: </li></ul><ul><li><FONT COLOR=”Blue”> Alô mundo </FONT> </li></ul>
  5. 5. Estrutura Básica do HTML <ul><li><HTML> </li></ul><ul><li><HEAD> </li></ul><ul><li><TITLE> Título da página </TITLE> </li></ul><ul><li></HEAD> </li></ul><ul><li><BODY> </li></ul><ul><li>Comandos – Corpo da página </li></ul><ul><li></BODY> </li></ul><ul><li></HTML> </li></ul>
  6. 6. Tag’s estruturais <ul><li>HTML: São usados para delimitar os comandos HTML, indicando o início e o fim de cada documento. </li></ul><ul><li>HEAD: Delimitam a seção do cabeçalho do documento, onde serão definidos o Título e algumas opções de página. </li></ul><ul><li>BODY: Nesta TAG ficam os elementos da página, ou o corpo da página. </li></ul>
  7. 7. Níveis de cabeçalho <ul><li>Chama-se de cabeçalhos os níveis dos diversos tipos de tópicos textuais ( Título, Subtítulo, Tópicos, Subtópicos). </li></ul><ul><li>No HTML, cabeçalhos são definidos pela tag <Hn>, onde o n é um número de 1 a 6 que determina o nível do texto. </li></ul><ul><li>Cada nível apresenta um tamanho de fonte diferente (do maior(1) para o menor(6)), onde o default é 3. </li></ul>
  8. 8. Páragrafos <ul><li>Para delimitar parágrafos dentro do HTML usa-se a tag <P>, que é inserida no início do parágrafo e encerra-se no final do parágrafo. </li></ul><ul><li>Quando ela é encerrada, insere-se uma linha em branco automaticamente para separar os páragrafos. </li></ul><ul><li>A tag <P> também é utilizada para fazer o alinhamento do parágrafo, através do atributo ALIGN. </li></ul><ul><li>O alinhamento pode ser a Esquerda, Direita e Centro. </li></ul>
  9. 9. Parágrafos <ul><li>SINTAXE: </li></ul><ul><li><P align=”alinhamento”> texto do parágrafo</p> </li></ul><ul><li>Onde: </li></ul><ul><ul><li>Alinhamento assume valor nesse caso de LEFT, RIGHT e CENTER. </li></ul></ul>
  10. 10. Fontes <ul><li>Permitir utilizar fontes com formatações diferentes em diversas partes do texto. </li></ul><ul><li>Possui três atributos: </li></ul><ul><ul><li>SIZE: Determina o tamanho da letra. Varia de 1(menor tamanho) à 7(maior tamanho). </li></ul></ul><ul><ul><li>FACE: Determina o tipo de letra. Caso o tipo informado não seja compatível, o navegador usará o default. </li></ul></ul><ul><ul><li>COLOR: Determina a cor da fonte, que pode ser dada através do nome ou do número Hexadecimal equivalente. </li></ul></ul>
  11. 11. Fontes <ul><li>SINTAXE: </li></ul><ul><li><FONT size=”tamanho” face=”tipo” color=”cor”> Texto </FONT> </li></ul>
  12. 12. Estilos de texto
  13. 13. Listas <ul><li>Boa forma de organização de páginas na web. São chamadas também de tópicos ou de marcadores e numeração. </li></ul><ul><li>Podem ser: </li></ul><ul><ul><li>Lista não-numerada </li></ul></ul><ul><ul><li>Lista numerada </li></ul></ul><ul><ul><li>Lista de descrição </li></ul></ul><ul><ul><li>Lista mista </li></ul></ul>
  14. 14. Lista Não-numerada <ul><li>Lista que utiliza os tradicionais Marcadores ou “Bullets”. </li></ul><ul><li>SINTAXE: </li></ul><ul><li><UL type=”formato do marcador”> </li></ul><ul><li><LI> Tópico 1 </li></ul><ul><li><LI> Tópico 2 </li></ul><ul><li></UL> </li></ul><ul><li>Onde TYPE pode receber os valores square, disc e circle. </li></ul>
  15. 15. Lista numerada <ul><li>Lista que utiliza números, letras maiúsculas. minúsculas ou algarismos romanos. </li></ul><ul><li>SINTAXE: </li></ul><ul><ul><li><OL type=”formato” start=”Valor incial”> </li></ul></ul><ul><ul><li><LI> Tópico 1 </li></ul></ul><ul><ul><li><LI> Tópico 2 </li></ul></ul><ul><ul><li><LI> Tópico 3 </li></ul></ul><ul><ul><li></OL> </li></ul></ul><ul><li>Onde TYPE pode receber os valores 1, A, a, I ou i. </li></ul>
  16. 16. Lista de definição <ul><li>Lista que utiliza de tópicos com suas definições. </li></ul><ul><li>SINTAXE: </li></ul><ul><ul><li><DL> </li></ul></ul><ul><ul><li><DT> Tópico 1 </li></ul></ul><ul><ul><li><DD> Descrição </li></ul></ul><ul><ul><li><DT> Tópico 2 </li></ul></ul><ul><ul><li><DD> Descrição </li></ul></ul><ul><ul><li></DL> </li></ul></ul>
  17. 17. Links <ul><li>Antes de prosseguirmos com os links, precisamos entender como funciona a estrutura de diretórios na web. </li></ul><ul><li>Todas as vezes que o arquivo a ser localizado está no mesmo diretório do arquivo HTML, basta só colocar o nome do arquivo com sua extensão. </li></ul><ul><li>Quando o arquivo está em um outro diretório acima do corrente, usa-se ../ para voltar a algum diretório acima e o caminho deste até o arquivo desejado. </li></ul><ul><li>Quando o arquivo esta no subdiretório do atual, basta utilizar o nome do caminho a partir do diretório atual. </li></ul>
  18. 18. Links para o mesmo servidor <ul><li>Neste caso, usa-se a estrutura vista no slide anterior, visto que o servidor onde é o hospedado o site apresenta uma estrutura dividida em diretórios. </li></ul><ul><li>SINTAXE: </li></ul><ul><li><a href=”Endereço de destino”> Texto do link </a> </li></ul><ul><li>EXEMPLO: </li></ul><ul><li><a href=”codigos/aula2.html”> Aula2 </a> </li></ul>
  19. 19. Links para outros servidores <ul><li>Neste caso, basta usar o endereço Web do arquivo ou página de destino. </li></ul><ul><li>SINTAXE: </li></ul><ul><li><a href=”http://endereco”> Texto do link </a> </li></ul><ul><li>EXEMPLO: </li></ul><ul><li><a href=”http://www.softeam.com.br”> Softeam </a> </li></ul>
  20. 20. Links para download <ul><li>Possuem a mesma estrutura dos anteriores, podendo estar no mesmo servidor ou em servidores diferentes. </li></ul><ul><li>Geralmente aplicados para Documentos, Apresentações, Arquivos Compactados e outros. </li></ul><ul><li>Quando clicado abre-se em uma tela de download. </li></ul>
  21. 21. Âncoras <ul><li>São links dentro do mesmo arquivo HTML. Usados principalmente em aplicações de linguagens de programação, criação de índices, o tradicional “Voltar ao Topo”. </li></ul><ul><li>Possuem duas estruturas bem definidas: a origem do link (o JOGAR), onde o usuário deve clicar, e o destino da âncora (o FIXAR), que será exibido na tela. </li></ul><ul><li>Nesta estrutura, deve-se usar a tag <A> tanto na origem como no destino, só que com estruturas diferentes. </li></ul>
  22. 22. Âncoras <ul><li>SINTAXE: </li></ul><ul><li>Origem: </li></ul><ul><li><a href=”#nome_da_ancora”> Jogar âncora </a> </li></ul><ul><li><a href=”#aula2”> Aula 2 </a> </li></ul><ul><li>Destino: </li></ul><ul><li><a name=”nome_da_ancora”> Fixar âncora </a> </li></ul><ul><li><a name=”aula2”> Aula 2 </a> </li></ul>
  23. 23. Links para email <ul><li>Utilizado para facilitar ao usuário um contato com o webmaster do site ou com a empresa que administra o site. </li></ul><ul><li>O tradicional “Fale Conosco”. Ao ser clicado, abre-se uma tela de envio de email do programa de gerenciamento de email que está instalado no computador do usuário. Ex: Outluock, Evolution, ThunderBird. </li></ul><ul><li>SINTAXE: </li></ul><ul><li><a mailto=”endereco_de_email”> Fale conosco </a> </li></ul>
  24. 24. Prática <ul><li>1) Crie dois arquivos HTML com os nomes que quiser. EX: Exe01.html e Exe02.html . </li></ul><ul><li>2)Crie um link no arquivo Exe01.html para o arquivo Exe02.html . </li></ul><ul><li>3)No arquivo Exe02 crie um link para http://www.softeam.com.br </li></ul><ul><li>4)Crie um link para o arquivo aula2.pdf. </li></ul><ul><li>5)Crie um link para o seu email. </li></ul><ul><li>6)Crie uma âncora para um trecho dentro da sua página. </li></ul>
  25. 25. Imagens <ul><li>Imagens de um site são fator marcante na estética e no marketing deste. </li></ul><ul><li>Para inserir imagens, usa-se os mesmos conceitos de link, mudando a tag e acrescentando-se alguns outros atributos. </li></ul><ul><li>ATRIBUTOS: </li></ul><ul><ul><li>SCR: Endereço da imagem. </li></ul></ul><ul><ul><li>WIDHT e HEIGTH: Largura e altura de exibição. </li></ul></ul><ul><ul><li>ALIGN: Alinhamento da imagem. </li></ul></ul><ul><ul><li>ALT: Texto alternativo caso a imagem não apareça. </li></ul></ul><ul><ul><li>BORDER: Tipo de borda da imagem. </li></ul></ul>
  26. 26. Imagens <ul><li>SINTAXE: </li></ul><ul><li><IMG src=”endereco_da_imagem” alt=”texto alternativo” border=”numero” align=”alinhamento”> </li></ul><ul><li>Para inserir uma imagem como pano de fundo, utilize o atributo background na tag body. </li></ul>
  27. 27. Prática <ul><li>Baixe uma imagem na internet e insira ela através do código. </li></ul><ul><li>Insira outra imagem como pano de fundo da página. </li></ul>
  28. 28. LAYERS <ul><li>Blocos são  tag's que delimitam áreas dentro da página onde podem  ser  inseridos textos,  tabelas,  imagens,  links  e formulários. </li></ul><ul><li>Blocos  são usados para  facilitar a atribuição de formatações diferentes para os diversos blocos. </li></ul><ul><li>Também são usados para a construção de layouts de página através de uma técnica chamada de tableless. </li></ul><ul><li>Promove uma melhor organização do código.  </li></ul>
  29. 29. LAYERS <ul><li>DIV: </li></ul><ul><li>Tag  de  delimitação  de  bloco  que  promove  o  alinhamento horizontal a esquerda, a direita, no centro e justificado daquilo que estiver alocado dentro do bloco. </li></ul><ul><li>Acrescenta­se uma linha antes de depois da tag div. </li></ul><ul><li><div align=”alinhamento”> Estrutura que estiver no bloco.  </li></ul><ul><li></div> </li></ul>
  30. 30. Formulários <ul><li>Permite que o usuário interaja com o servidor através do envio de informações pertinentes. Aplicado quando se usa uma linguagem de programação. </li></ul><ul><li>Usa-se a tag FORM para se delimitar formulário. Não se deve colocar formulários dentro de formulários. </li></ul><ul><li>Os elementos que formam os formulários são delimitados através de outras tags: TEXTAREA, SELECT e INPUT. </li></ul><ul><li>No formulário se determina o nome do arquivo ou biblioteca que fará uso do formulário(ACTION) e o método de submissão que será usado(METHOD). </li></ul>
  31. 31. Input <ul><li>SINTAXE: </li></ul><ul><li><INPUT type=”tipo de input”> </input> </li></ul><ul><li>Onde type pode ser: </li></ul><ul><ul><li>TEXT, PASSWORD, NAME, CHECKBOX, RADIO, HIDDEN, RESET e SUBMIT. </li></ul></ul>
  32. 32. Input <ul><li>TEXT: Armazena dados informados pelo usuário. Possui os atributos NAME, SIZE(Tamanho de exibição) e MAXLENGTH(Tamanho máximo). </li></ul><ul><li>PASSWORD: Usado para armazenar dados confidenciais e possui os mesmos atributos de TEXT. </li></ul><ul><li>CHECKBOX: Define uma caixa de seleção para o visitante marcar aquela desejada. Possui os atributos NAME e VALUE (Valor definido para a resposta). </li></ul>
  33. 33. Input <ul><li>RADIO: Define uma caixa de seleção para o visitante marcar apenas uma que seja desejada. Para opções do mesmo grupo devem ser apresentadas com o mesmo nome. Possui os mesmo atributos de CHECKBOX. </li></ul><ul><li>RESET: Botão que limpa os dados digitados no formulário. </li></ul><ul><li>SUBMIT: Botão que submete as informações do formulário ao servidor. </li></ul>
  34. 34. Select <ul><li>Permite definir uma lista de opções com barra de rolagem ou fixa que podem ser selecionados pelo usuário. </li></ul><ul><li>SINTAXE: </li></ul><ul><li><SELECT MULTIPLE NAME=”softwares”> </li></ul><ul><li><OPTION SELECTED VALUE=”adobe”>Adobe Photoshop </li></ul><ul><li><OPTION VALUE=”corel”>CorelDraw </li></ul><ul><li></SELECT> </li></ul><ul><li>Onde: </li></ul><ul><ul><li>OPTION: Item da lista; </li></ul></ul><ul><ul><li>MULTIPLE: Mantém a lista sempre aberta. </li></ul></ul><ul><ul><li>SELECTED: Indica qual o valor padrão da lista. </li></ul></ul><ul><ul><li>VALUE: Valor a ser retornado ao servidor. </li></ul></ul>
  35. 35. Textarea <ul><li>Insere uma caixa de texto com um número pré-definido de linhas e colunas. </li></ul><ul><li>SINTAXE: </li></ul><ul><li><TEXTAREA NAME=”comentarios” ROWS=”4” COLS=”40” VALUE=”comentarios”> Texto padrão – digite aqui seus comentários. </TEXTAREA> </li></ul><ul><li>Onde: </li></ul><ul><ul><li>NAME: obrigatório, pois define o nome dos dados inseridos </li></ul></ul><ul><ul><li>ROWS: número de linhas; </li></ul></ul><ul><ul><li>COLS: número de colunas; </li></ul></ul><ul><ul><li>VALUE: não é obrigatório, indica qual o texto será referenciado ao autor. </li></ul></ul>
  36. 36. Métodos de submissão de formulários <ul><li>Método GET: </li></ul><ul><ul><li>Os dados do formulários são enviados na URL da página de destino. </li></ul></ul><ul><li>Método POST: </li></ul><ul><ul><li>Os dados são enviados em um pacote separado ao que é enviado a URL. </li></ul></ul>

×