aula 1
112 pág.

aula 1


DisciplinaCálculo II24.521 materiais705.154 seguidores
Pré-visualização4 páginas
*
*
HTML / JavaScript
*
*
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.
*
*
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
*
*
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)
*
*
Serviços básicos da Internet
E-mail: correio eletrônico
FTP: transferência de arquivos
WWW: comunicação por meio de hipertexto
*
*
Modelo Cliente / Servidor
Mozilla Firefox
Internet Explorer
Opera
Konqueror
Safari
Chrome
Apache
Internet Information Server (IIS)
Cliente
Servidor
*
*
Modelo Cliente-Servidor
Cliente Web (web client) \uf0e0 é o programa responsável para exibição das páginas solicitas pelo usuário
Servidor Web (web server) \uf0e0 armazena e permite o acesso aos dados
*
*
Clientes Web
Browser (navegador ou paginador)
Exemplos:
Internet Explorer
Mozilla Firefox 
Opera
Safari
Konqueror
Chrome
*
*
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
*
*
Exemplo
http://www.policamp.edu.br/files_biblioteca/normalizacao_bibliografica.pdf
Onde:
http:// \uf0e0 protocolo usado
www.policamp.edu.br \uf0e0 nome do servidor
files_biblioteca \uf0e0 diretório dentro do servidor
normalizacao_bibliografica.pdf \uf0e0 nome do arquivo solicitado
*
*
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 
*
*
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.
*
*
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)
*
*
Protocolos
HTTP (Hypertext Transport Protocol)
FTP (File Transfer Protocol)
*
*
SGML e HTML
SGML (Standard Generalized Markup Language) que é uma linguagem usada para fazer documentos que possam ser lidos em diversas plataformas
HTML \uf0e0 é baseada na SGML
Não possui uma estrutura rígida e exata
Define a estrutura da página estabelecendo suas características
*
*
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
*
*
Linguagem HTML
A linguagem HTML é transportada pelo protocolo HTTP (HyperText Transfer Protocol) ou Protocolo de Transferência de Hypertexto
*
*
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
*
*
Estrutura básica de uma página HTML
<html>
<head>
</head>
<body>
</body>
</html>
Cabeçalho
Corpo
Documento HTML
*
*
Exemplo
<html>
<head>
<title>Primeira pagina</title>
</head>
<body>
<p>Primeiro Paragrafo
</body>
</html>
*
*
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=&quot;text&quot; VALUE=Campinas NAME=\u2018cidade\u2019 READONLY>
*
*
Exemplos de tags
<h1> ... </h1>
<br>
<p>
<h1 align=&quot;center&quot;> ... </h1>
nome do
atributo
*
*
Exemplos de editores HTML
Dreamweaver
FrontPage
NVU
Veja outros editores em:
http://baixaki.ig.com.br/categorias/cat125_1.htm
*
*
Comentários em HTML
<!-- [comentário] -->
*
*
Tags
<br> \uf0e0 faz a quebra de uma linha
<p> e </p> \uf0e0 parágrafo
<tag /> \uf0e0 tag única, sem lista de atributos
<tag p1=\u201cval1\u201d p2=\u201cval2\u201d /> \uf0e0 tag única, com lista de valores
<tag>texto</tag> \uf0e0 par de tags, sem lista de valores e conteúdo inserido entre elas
<tag p1=\u201cval1\u201d>texto</tag>\uf0e0 par de tags, sem lista de valores e conteúdo inserido entre elas
*
*
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>
*
*
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
*
*
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.
*
*
Tag <font>
Atributos:
size \uf0e0 tamanho da fonte
color \uf0e0define a cor da fonte do texto
face \uf0e0 é o nome da fonte que a tag vai apresentar
*
*
Atributos
Atributo		Exemplo	Proposta
size=&quot;número&quot; 		size=&quot;2&quot; 	Define o tamanho da fonte
size=&quot;+número &quot; 		size=&quot;+1&quot; 	Aumenta o tamanho da fonte
size=&quot;-número &quot; 		size=&quot;-1&quot; 	Diminui o tamanho da fonte
face=&quot;nome-da-face&quot; face=&quot;Times&quot; 	Define o nome da fonte
color=&quot;valor-da-cor&quot; 	color=&quot;#eeff00&quot; Define a cor da fonte
color=&quot;nome-da-cor&quot; 	color=&quot;red&quot; 	Define a cor da fonte
*
*
Padrões de Cores
Padrão de cores RGB (Red, Green, Blue)
Padrão de cores CMYK (Cyan, Magenta, Yellow, Black)
*
*
Algumas cores nomeadas
*
*
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)
*
*
Parágrafo
Tag <p>
<p align=&quot;[left|right|center|justify]&quot;> [texto] </p>
left \u2013 seleciona alinhamento a esquerda
right \u2013 seleciona alinhamento a direita
center \u2013 seleciona alinhamento ao centro
justify \u2013 justifica o texto do parágrafo
Exemplo
<p>Primeiro parágrafo</p>
*
*
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=&quot;5&quot; width=&quot;50%&quot; align=&quot;center&quot; noshade>
*
*
Listas
Listas de definição
Listas Ordenadas
Listas Não ordenadas
*
*
Listas \u2013 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
*
*
Lista de Definição \u2013 Exemplo
<dl>
<dt>
HTML
<dd>Hypertext Markup Language
<dt>XML
<dd> Extensible Markup Language
</dl>
Resultado
HTML
 Hypertext Markup Language
XML
 Extensible Markup Language
*
*
Listas - Ordenadas
Uso das tags <ol>
Exemplo:
<ol>
<li>primeiro