1 / 113

HTML / JavaScript

HTML / JavaScript. V1.0. Introdução. HTML = HyperText Markup Language

selia
Download Presentation

HTML / JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 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. 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. 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. Serviços básicos da Internet • E-mail: correio eletrônico • FTP: transferência de arquivos • WWW: comunicação por meio de hipertexto

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

  7. Modelo Cliente-Servidor • Cliente Web (web client)  é o programa responsável para exibição das páginas solicitas pelo usuário • Servidor Web (web server) armazena e permite o acesso aos dados

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

  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. Exemplo • http://www.policamp.edu.br/files_biblioteca/normalizacao_bibliografica.pdf • Onde: http://  protocolo usado www.policamp.edu.br nome do servidor files_biblioteca  diretório dentro do servidor normalizacao_bibliografica.pdf nome do arquivo solicitado

  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 email em um servidor de Emails • news: um Newsgroup da UseNet • telnet: uma conexão Telnet • wais: um arquivo em um servidor WAIS

  12. Site (Web Site) ou Sítio • 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. Conceitos • Website: é uma ou mais páginas Web ligadas de uma forma significativa • Web server: é o computador real que armazena o website • Web pages: são os elementos individuais de um website, como uma página é para um livro. • Home page: em termos de publicação web, é o ponto de entrada ao resto de páginas em um website (é a página inicial ou mais importante)

  14. Protocolos • HTTP (Hypertext Transport Protocol) • FTP (File Transfer Protocol)

  15. 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

  16. 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

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

  18. 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

  19. Estrutura básica de uma página HTML <html> <head> </head> <body> </body> </html> Cabeçalho Documento HTML Corpo

  20. <html> <head> <title>Primeira pagina</title> </head> <body> <p>Primeiro Paragrafo </body> </html> Exemplo

  21. Tags e Atributos Tags (marcações) Tags são representadas entre os sinais < e > e finalizadas por </ > Atributos são características dos comandos representados pelas tags. Os atributos podem apresentar parâmetros Exemplo: <INPUT TYPE="text" VALUE=Campinas NAME=‘cidade’ READONLY>

  22. Exemplos de tags • <h1> ... </h1> • <br> • <p> • <h1 align="center"> ... </h1> nome do atributo

  23. Exemplos de editores HTML • Dreamweaver • FrontPage • NVU Veja outros editores em: http://baixaki.ig.com.br/categorias/cat125_1.htm

  24. Comentários em HTML • <!-- [comentário] -->

  25. Tags • <br>  faz a quebra de uma linha • <p> e </p>  parágrafo • <tag />  tag única, sem lista de atributos • <tag p1=“val1” p2=“val2” />  tag única, com lista de valores • <tag>texto</tag>  par de tags, sem lista de valores e conteúdo inserido entre elas • <tag p1=“val1”>texto</tag> par de tags, sem lista de valores e conteúdo inserido entre elas

  26. Cabeçalhos Cabeçalhos são definidos com as tags <h1> a <h6> <h1> defines o maior cabeçalho enquanto <h6> define o menor cabeçalho. • <h1>Este é um cabeçalho</h1> • <h2>Este é um cabeçalho</h2> • <h3>Este é um cabeçalho</h3> • <h4>Este é um cabeçalho</h4> • <h5>Este é um cabeçalho</h5> • <h6>Este é um cabeçalho</h6>

  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. 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. Tag <font> Atributos: size  tamanho da fonte color define a cor da fonte do texto face  é o nome da fonte que a tag vai apresentar

  30. Atributos Atributo Exemplo Proposta 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. Padrões de Cores • Padrão de cores RGB (Red, Green, Blue) • Padrão de cores CMYK (Cyan, Magenta, Yellow, Black)

  32. Algumas cores nomeadas

  33. Tags de estilos físicos • <b> (bold) negrito • <i> (italic) itálico • <tt> fonte de máquina de escrever (monoespaçada) • <u> (underline) sublinhado • <s> (strikethrough)

  34. Parágrafo • Tag <p> • <p align="[left|right|center|justify]"> [texto] </p> • left – seleciona alinhamento a esquerda • right – seleciona alinhamento a direita • center – seleciona alinhamento ao centro • justify – justifica o texto do parágrafo • Exemplo <p>Primeiro parágrafo</p>

  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 <hr> • Exemplo: <hr size="5" width="50%" align="center" noshade>

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

  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. <dl> <dt> HTML <dd>Hypertext Markup Language <dt>XML <dd> Extensible Markup Language </dl> Resultado HTML Hypertext Markup Language XML Extensible Markup Language Lista de Definição – Exemplo

  39. Uso das tags <ol> Exemplo: <ol> <li>primeiro <li>segundo <li>terceiro </ol> Resultado 1. primeiro 2. segundo 3. terceiro Listas - Ordenadas

  40. Uso das tags <ul> Exemplo: <ul> <li>primeiro <li>segundo <li>terceiro </ul> Resultado primeiro segundo terceiro Listas – Não ordenadas

  41. A tag <a> (Anchor) e o atributo href HTML usa a tag <a> (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:  <a href="url">Texto para ser exibido</a>

  42. A tag <a> (Anchor) e o atributo href A tag <a> é 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. A tag <a> (Anchor) e o atributo href Esta âncora define um link para página da Policamp: <a href="http://www.policamp.edu.br/">Policamp</a> A linha acima parecerá como a linha abaixo no browser: Policamp

  44. Links Os links tornam possível a navegação entre páginas. <a name="[nome]" href="[url]" title="[titulo]" target="[_blank | _self | _top | nome]" > [âncora] </a>

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

  46. Âncoras – links na mesma página • Âncoras são inseridas pelo atributo name da tag <a>. • Exemplo: <a href="#link1">link1</a><br> <a href="#link2">link2</a><br> <a name="link1">djshj asjhja ahdjka asdh <a name="link2">sjdkas asdhkj asjdh ash

  47. Imagens • <img>  inclui uma imagem em uma página HTML

  48. Atributos da tag <IMG> • 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. Exemplo • <img src="angry.gif" alt="Angry"/>

  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

More Related