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

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

1 HTML / JavaScript V1.0. 2 Introdução HTML = HyperText Markup Language HTML é a linguagem de marcação universal para Web. HTML permite que você formate.

Apresentações semelhantes


Apresentação em tema: "1 HTML / JavaScript V1.0. 2 Introdução HTML = HyperText Markup Language HTML é a linguagem de marcação universal para Web. HTML permite que você formate."— Transcrição da apresentação:

1 1 HTML / JavaScript V1.0

2 2 Introdução HTML = HyperText Markup Language HTML é a linguagem de marcação universal para Web. HTML permite que você formate texto, adicione gráficos, crie links, entradas de formulários, frames, tabelas, etc e salve tudo em uma arquivo texto que qualquer navegador pode ler e exibir. A chave do HTML são as tags que indicam qual conteúdo virá em seguida.

3 3 Conceitos Hipertexto: um documento hipertexto provê links visualmente claros a outros documentos e selecionando um link em um documento nos leva a outra documento Internet: é um sistema global de computadores em rede que permite comunicação entre usuários e transferência de arquivos entre quaisquer duas máquinas da rede

4 4 Conceitos Multimídia: combina várias tecnologias de apresentação num esforço de apelar aos vários sentidos quanto possível (vale-se de gráficos, sons, animações e vídeos para criar um completa e rica experiência computacional)

5 5 Serviços básicos da Internet correio eletrônico FTP: transferência de arquivos WWW: comunicação por meio de hipertexto

6 6 Modelo Cliente / Servidor BrowserServidor Web request response Mozilla Firefox Internet Explorer Opera Konqueror Safari Apache Internet Information Server (IIS) ClienteServidor

7 7 Modelo Cliente-Servidor Cliente Web é o programa responsável para exibição das páginas solicitas pelo usuário Servidor Web armazena e permite o acesso aos dados

8 8 Clientes Web Browser (navegador ou paginador) Exemplos: Internet Explorer Mozilla Firefox Opera Safari Konqueror

9 9 URL (Uniform Resource Locator) Permite que cada documento na Web possua uma endereço único que indica o nome do arquivo, diretório, nome do servidor e o protocolo usado para requisição do documento

10 10 Exemplo ormalizacao_bibliografica.pdf ormalizacao_bibliografica.pdf Onde: protocolo usado nome do servidor files_biblioteca diretório normalizacao_bibliografica.pdfnormalizacao_bibliografica.pdf nome do arquivo solicitado

11 11 Protocolos file: um arquivo no PC local ftp: um arquivo em um servidor FTP http: um arquivo em WWW gopher: um arquivo em um servidor Gopher mailto: um em um servidor de s news: um Newsgroup da UseNet telnet: uma conexão Telnet wais: um arquivo em um servidor WAIS

12 12 Site Um site WWW é um conjunto de páginas (com uso de hipertexto) relacionados organizadas hierarquicamente onde podemos encontrar informações do um assunto, empresa, etc.

13 13 Protocolos HTTP (Hypertext Transport Protocol) FTP (File Transfer Protocol)

14 14 SGML e HTML SGML (Standard Generalized Markup Language) que é uma linguagem usada para fazer documentos que possam ser lidos em diversas plataformas HTML é baseada na SGML Não possui uma estrutura rígida e exata Define a estrutura da página estabelecendo suas características

15 15 Linguagem HTML (Hypertext Markup Language) Define a estrutura de uma página estabelecendo seu título, texto, listas, subtítulos, localização de imagens, etc. É uma linguagem para criação e manipulação de textos, imagens e não necessita de grande conhecimentos teóricos e lógica de programação

16 16 Linguagem HTML A linguagem HTML é transportada pelo protocolo HTTP (HyperText Transfer Protocol) ou Protocolo de Transferência de Hypertexto

17 17 Linguagem HTML Uma página HTML pode ser criada com uso de qualquer editor de textos porém deve ter a extensão.html ou.htm

18 18 Estrutura básica de uma página HTML Cabeçalho Corpo Documento HTML

19 19 Exemplo Primeira pagina Primeiro Paragrafo

20 20 Tags e Atributos Tags (marcações) Tags são representadas entre os sinais e finalizadas por Atributos são características dos comandos representados pelas tags. Os atributos podem apresentar parâmetros Exemplo:

21 21 Exemplos de tags atributo

22 22 Comandos

23 23 Exemplos de editores HTML Dreamweaver FrontPage NVU Veja outros editores em:

24 24 Comentários em HTML

25 25 Tags faz a quebra de uma linha e parágrafo

26 26 Cabeçalhos Cabeçalhos são definidos com as tags a defines o maior cabeçalho enquanto define o menor cabeçalho. Este é um cabeçalho

27 27 Formatação de Textos Dois tipos de formatação: Lógica Física A idéia dessa separação é a independência entre especificação e apresentação

28 28 Formação Lógica e Física A formatação lógica acompanha o significado lógico do texto marcado. Sua apresentação varia em função do navegador usado podendo oferecer resultados distintos A formatação física especifica explicitamente o estilo que se quer o texto, como letras em itálico, negrito, sublinhado, etc.

29 29 Tag Atributos: size tamanho da fonte color define a cor da fonte do texto face é o nome da fonte que a tag vai apresentar

30 30 Atributos AtributoExemploProposta size="número" size="2" Define o tamanho da fonte size="+número " size="+1" Aumenta o tamanho da fonte size="-número " size="-1" Diminui o tamanho da fonte face="nome-da-face" face="Times" Define o nome da fonte color="valor-da-cor" color="#eeff00" Define a cor da fonte color="nome-da-cor" color="red" Define a cor da fonte

31 31 Padrões de Cores Padrão de cores RGB (Red, Green, Blue) Padrão de cores CMYK (Cyan, Magenta, Yellow, Black)

32 32 Algumas cores nomeadas BlackMarronGreenNavy SliverRedLimeBlue GrayPupleOliveTeal WhiteFuchsiaYellowAqua

33 33 Tags de estilos físicos (bold) negrito (italic) itálico (underline) sublinhado

34 34 Parágrafo Tag [texto] left – seleciona alinhamento a esquerda right – seleciona alinhamento a direita center – seleciona alinhamento ao centro justify – justifica o texto do parágrafo Exemplo Primeiro parágrafo

35 35 Linha Horizontal As linhas horizontais podem ser usadas para separar visualmente seções de uma página da web. Em HTML a separação é realizada por meio da tag Exemplo:

36 36 Listas Listas de definição Listas Ordenadas Listas Não ordenadas

37 37 Listas – de definição É usada para definir termos, criar textos explicativos, dicionários, entre outras funções. Uma lista de definição é composta de duas partes: termo definição

38 38 Lista de Definição – Exemplo HTML Hypertext Markup Language XML Extensible Markup Language Resultado HTML Hypertext Markup Language XML Extensible Markup Language

39 39 Listas - Ordenadas Uso das tags Exemplo: primeiro segundo terceiro Resultado 1. primeiro 2. segundo 3. terceiro

40 40 Listas – Não ordenadas Uso das tags Exemplo: primeiro segundo terceiro Resultado primeiro segundo terceiro

41 41 A tag (Anchor) e o atributo href HTML usa a tag (anchor) para criar um link para outro documento. Um anchor (âncora) pode apontar para qualquer recurso na Web: uma página HTML, uma imagem, uma trilha sonora, um clipe, etc. Sintaxe para criação de uma âncora: Texto para ser exibido

42 42 A tag (Anchor) e o atributo href A tag é usada para criar uma ligação (vínculo) ao link, O atributo href é usado para endereçar o documento ao qual o endereço está apontando, e as palavras entre o abre e fecha âncora será exibido como o hyperlink.

43 43 A tag (Anchor) e o atributo href Esta âncora define um link para página da Policamp: Policamp A linha acima parecerá como a linha abaixo no browser: PPolicamp

44 44 Links Os links tornam possível a navegação entre páginas. [âncora]

45 45 Atributos name: marca um indicador, isto é, uma região de um documento como destino de uma ligaçãoindicador href: indica a URL de destino da ligação do hipertexto title target: destino

46 46 Âncoras – links na mesma página Âncoras são inseridas pelo atributo name da tag. Exemplo: link1 link2 djshj asjhja ahdjka asdh sjdkas asdhkj asjdh ash

47 47 Imagens inclui uma imagem em uma página HTML

48 48 Atributos da tag SRC: URL da imagem que será exibida ALIGN: top | bottom | middle | left | right WIDTH: estabelece a largura da imagem HEIGHT: estabelece a altura da imagem VSPACE: controla o espaço acima e abaixo da imagem HSPACE: controla o espaço a esquerda e a direita da imagem BORDER: define a borda ao redor da imagem ALT: define uma descrição sucinta da imagem LOWSRC

49 49 Exemplo

50 50 Tabelas Uma tabela é composta por linhas e colunas que formam uma célula. Essas células podem conter textos, imagens e até mesmo outras tabelas

51 51 Tabelas - Tags Tags:... delimita uma tabela... delimita uma linha... delimita uma coluna

52 52 Tabelas – Tag

...
...">

53 53 Exemplo de Tabela linha 1, coluna 1 linha 1, coluna 2 linha 2, coluna 1 linha 2, coluna 2

54 54 Atributos da tag width: especifica a largura da tabela height: especifica a altura da tabela align: alinha a tabela (left|center|right) valign: alinhamento vertical da célula (top|bottom|middle) bgcolor: cor de fundo background cellpadding cellspacing

55 55 Atributos (2) border especifica a largura da borda (use o valor "0" para não exibir as bordas) bordercolor bordercolordark bordercolorlight

56 56 Atributos para mesclagem de células colspan --> permite mesclar colunas de uma determinada linha de uma tabela rowspan --> permite mesclar as linha de uma determinada coluna de uma tabela Sintaxe... conteúdo da célula onde n representa o número de colunas e m o número de linhas a serem mescladas

57 57 Áreas das tabelas define um table head ou cabeçalho da tabela define um table foot ou rodapé da tabela define um table body ou corpo da tabela

58 58 Título da tabela Tag caption Deve ser usado dentro da tag

59 59 Frames É uma divisão que cria um ambiente onde mais de uma página pode ser vista ao mesmo tempo É possível definir regiões fixas onde podemos colocar informações como o logo da empresa, um menu de navegação (por exemplo) e regiões onde são feitas as navegações

60 60 Frames Com frames é possível visualizar mais de um documento HTML na mesma janela do browser. Cada documento HTML é chamado um frame e cada frame é independente dos outros Desvantagens no uso de frames: o desenvolvedor Web deve manter o gerenciamento de mais de um documento HTML é difícil imprimir a página inteira

61 61 Frames TagDescrição Define um conjunto de frames Define uma sub-janela (um frame) Define uma sessão noframe para browsers que não suportam janelas Define um sub-janela inline (frame)

62 62 A tag Frameset A tag define como dividir uma janela em frames Cada frameset define um conjunto de linhas ou colunas O valor das linhas/colunas indicam a quantidade da área da tela que cada linha /coluna ira ocupar.

63 63 Frames - Tags Tag é usada para organizar múltiplas janelas Atributos: cols: define o número e tamanho das colunas em um frameset rows: define o número e tamanho das linhas em um frameset

64 64 A tag A tag define que documento HTML será alocado em cada frame No exemplo abaixo temos um frameset com duas colunas. A primeira coluna ocupara 25% da largura da janela do navegador e a segunda coluna ocupara 75% da largura. O documento HTML "frame_a.htm" é colocado na primeira coluna e o documento "frame_b.htm" is colocado na segunda coluna

65 65 Exemplo

66 66 Formulários Permite aos usuários entrar com dados e assim criar uma interatividade nas páginas HTML. O uso de formulário é muito usado quando tratamos de aplicações web.

67 67 Formulários Um formulário é uma área que contém elementos de formulários. Elementos de formulários são elementos que permitem ao usuário entrar com informações (como text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc) em um formulário. Um formulário é definido com o tag.

68 68 Formulários – Tag
...

69 69 Atributos do Form name: nome do formulário method: GET | POST GET dados enviados na URL da página (limite de aproximadamente 2000 bytes) POST dados enviados como variáveis de ambiente action: determina a URL do destino da ação enctype: determina o tipo de empacotamento que os dados serão submetidos (normalmente é string. Para envio de dados binários usa-se multipart/form-data

70 70 Método GET os dados inseridos em um formulário fazem parte da URL associada a consulta enviada ao servidor. as informações digitadas nesse modo são visualizados na barra de endereço do navegador

71 71 Método POST os dados inseridos em um formulário fazem parte do corpo da mensagem encaminhada ao servidor que suporta uma grande quantidade de dados. as informações digitadas nesse modo não são visualizados na barra de endereço do navegador

72 72 Entrada de dados através do formulários Entrada de dados Área de textos Lista

73 73 Tag A tag define o começo de uma campo de entrada onde o usuário pode entrar com dados

74 74 Tag - Atributos type – informa qual é o tipo do campo de entrada de dados name – informa qual é o nome do campo value – informa um valor padrão para o campo size – informa o tamanho do campo exibido na tela maxlength – informa o número máximo de caracteres que pode ser digitado no campo id

75 75 Atributo type text – entrada de texto (linha única) checkbox – caixa de múltiplas opções radio – caixa de opções simples submit – botão de envio button – botão de uso genérico reset – limpa todos os dados inseridos pelo usuário hidden – campo oculto image – botão imagem password – entrada de senha file – entrada de arquivos

76 76 Tag input

78 78 Password Usuario: Senha: Nota: O navegador exibe asteriscos ou bullets ao invés dos caracteres digitados com campo password.

79 79 Checkboxes (Caixa de Seleção) Eu tenho uma bicicleta: Eu tenho um carro: Eu tenho um avião:

80 80 Radio Button (botão de rádio) Qual é seu sexo ? Masculino Feminino

81 81 Button (Botão)

82 82 Submit (Botão de envio) Digite seu primeiro nome: Digite seu último nome: Se você clicar no botão "Enviar" você enviará sua entrada a uma nova página chamada "form_action.asp".

83 83 Área de texto (Caixa de texto de rolagem) Entre com seus comentários: