introduÇÃo À informÁtica edberto ferneda. internet e web histórico e características

INTRODUÇÃO À INTRODUÇÃO À INFORMÁTICAINFORMÁTICA

Edberto Ferneda

INTERNET E WEBINTERNET E WEBHistórico e Características

InternetInternet

1957 – Sputnik (primeiro satélite artificial) - URSS

1958 – ARPA (Advanced Research Projects Agency)◦ Mobilização de pesquisas (universitárias) para

alcançar a superioridade tecnológica militar em relação à União Soviética

1969 - ARPANET (Advanced Research Projects Agency)

Paul Baran e Donald Davies: construção de um sistema militar de comunicações capaz de sobreviver a um ataque nuclear.

His

tóric

o

InternetInternet

1969 – Os primeiros nós da rede◦ UCLA (Universidade da Califórnia – Los Angeles),

◦ SRI (Stanford Research Institute),

◦ UCSB (Universidade da Califórnia – Santa Bárbara),

◦ Universidade de Utah

1973 – Robert Kahn (ARPA) e Vint Cerf (Stanford)◦ Arquitetura básica Internet

1975 – 15 nós◦ Centros universitários

1978 – TCP TCP/IP 1983 – MilNET, Arpa-Internet 1990 – ArpaNET retirada de operação Década de 90 – privatização da Internet

His

tóric

o

InternetInternet

1990 – World Wide Web (www)◦ Tim Berners-Lee

Navegadores (browsers)◦ Mosaic (1993)◦ Netscape (1994)◦ Internet Explorer (1995)

1995 – Java (Sun Microsystems)◦ Applets

His

tóric

o

WEBWEB

Unidades de informação: páginas◦ Esquema de endereçamento: URL

(Universal Resource Locator)◦ Protocolo comum: HTTP (Hypertext

Transfer Protocol)◦ Padrão para especificação de páginas:

HTML (Hypertext Markup Language)

Car

acte

ríst

icas

WEBWEB

arquivo acessado utilizando o protocolo HTTP (http://) armazenado no computador chamado www.eca.usp.br

◦ “.br” indica que este computador está localizado no Brasil. No diretório (pasta) /graduaca/infogera/ deste

computador está localizado o arquivo com o nome index.htm.

A extensão “.htm” (ou .html) indica que se trata de um arquivo no formato HTML.

URL (Universal Resource Locator)

Car

acte

ríst

icas

WEBWEB

HTTP: protocolo de transferência de páginas Web.◦ Permite ao browser “conversar” com o servidor,

fazendo pedidos e recebendo respostas em forma de página Web, geralmente escritas em HTML.

Usuário

Endereço ( URL )

Página ( HTML)

Browser

Servidor

Car

acte

ríst

icas

WEBWEB

HTML (Hypertext Markup Language)◦ Conjunto fixo de marcações (tags)◦ Permite utilizar janelas (frames), imagens e

tabelas e ligações entre páginas Web.<html> <head> <title>O Mundo é Grande</title> </head> <body> <p style="margin-top: 0; margin-bottom: 10"> <b><img border="0" src="drumlyra.gif" align="left" width="122" height="190">O Mundo é Grande</b></p> <p style="margin-top: 0; margin-bottom: 0"> O mundo é grande e cabe<p style="margin-top: 0; margin-bottom: 5"> nesta janela sobre o mar.<p style="margin-top: 0; margin-bottom: 0"> O mar é grande e cabe<p style="margin-top: 0; margin-bottom: 5"> na cama e no colchão de amar.<p style="margin-top: 0; margin-bottom: 0"> O amor é grande e cabe<p style="margin-top: 0; margin-bottom: 0"> no breve espaço de beijar.<p> <b>Carlos Drummond<b> <a href=http://www.carlosdrummond.com.br>Home Page </body></html>

VisualizarCar

acte

ríst

icas

A LINGUAGEM HTMLA LINGUAGEM HTML

A linguagem HTMLA linguagem HTML

HTML - HyperText Markup Language◦ Linguagem de marcação◦ Divide o texto em várias partes, identificadas por

tags (etiquetas). nome do autor da página cabeçalho da página uma imagem uma tabela um link

Os browsers (ou navegadores) são softwares que interpretam e exibem as páginas HTML,◦ Mosaic◦ Netscape◦ Internet Explorer

HT

ML


Tags (marcação, etiqueta)◦ São indicações apresentadas entre os

caracteres de menor e maior ( < > ) que representam os elementos de uma página.

DIgitação de uma página HTML◦ Utilizar qualquer editor de texto◦ Gravar o arquivo com texto normal (ASCII)

“Somente texto” ou “Texto sem formatação” ou outro tipo de arquivo equivalente.

◦ Gravar o arquivo com extensão .htm ou .html

HT

ML


<HTML> </HTML>◦ Informa o inicio e o final de uma página escrita em

HTML;<HEAD> </HEAD>

◦ identificam o inicio e o término de uma área de descrições gerais da página tais como título, autor, etc.

◦ <TITLE> </TITLE> Responsável por exibir o titulo da página. Alguns navegadores

exibem o título da página no título da janela onde está o browser.

<BODY> </BODY>◦ É o corpo da página, onde estão as informações que se

deseja apresentar;

Tag

s


Estilo Sintaxe

Negrito <B> Texto </B>

Itálico <I> Texto <I>

Sublinhado <U> Texto </U>

Letreiro <MARQUEE > Texto </MARQUEE>

<html> <head> <title> Meu primeiro HTML </title> </head> <body> <h1>Esta é minha primeira página em HTML</h1> <B> Negrito </B> <p> <I> Itálico <I> <p> <U> Sublinhado </U> <p> <MARQUEE> Letreiro </MARQUEE> <p> </body></html>

VisualizarTag

s


Cabeçalhos◦ <H1> </H1> - tag de cabeçalho de nivel 1◦ Os números indicam o nível do cabeçalho (de H1 a

H6).◦ Quando apresentados, apresentam letras maiores e

em negrito, dependendo do nível

Visualizar

<html> <head> <title>Exemplo de cabeçalhos</title> </head> <body> <h1>Cabeçalho de nível 1</h1> <h2>Cabeçalho de nível 2</h2> <h3>Cabeçalho de nível 3</h3> <h4>Cabeçalho de nível 4</h4> <h5>Cabeçalho de nível 5</h5> <h6>Cabeçalho de nível 6</h6> </body></html>

Tag

s


Listas numeradas◦ <OL> <LI> <LI> ... </OL>

Listas com marcações◦ <UL> <LI> <LI> ... </UL>

<html> <head> <title>Receita de pão de queijo</title> </head> <body> <h1>Pão de Queijo</h1> <p>Aprenda esta receita nada mineira, mas que dá ótimos resultados: é rápida, fácil e tem um bom rendimento.</p> <h2>Ingredientes</h2> <ul> <li>uma e meia xícara de chá de polvilho azedo <li>uma xícara de chá de maizena <li>uma colher de chá de fermento em pó <li>meia xícara de chá de leite <li>meia xícara de chá de água <li>meia xícara de chá de óleo <li>uma e meia colher de chá de sal <li>um ovo <li>uma xícara de chá de queijo tipo Minas ralado </ul> <h2>Modo de preparo</h2> <ol> <li>Misture e peneire os ingredientes secos (menos o queijo). <li>Após peneirar, junte o queijo e misture bem, acrescente os demais ingredientes e amasse até obter uma massa lisa e uniforme; <li>Faça bolinhas e coloque numa assadeira untada e enfarinhada. <li>Leve ao fogo quente (200º C) por 25 minutos. </ol> </body></html>VisualizarT

ags


Permite a utilização de um conjunto restrito de marcações (tags)

Preocupação com o aspecto visual das páginas Web.

Não permite uma definição clara e precisa das informações contidas em uma página.

Res

umin

do

A LINGUAGEM XMLA LINGUAGEM XML

A linguagem XMLA linguagem XML<html> <body> <b><font size="4">Micromputador Pentium 4</font></b> <p>1.5 GHz,</p> <p>256MB de RAM,</p> <p>Monitor 17 polegadas,</p> <p>mouse, teclado, estabilizador.</p> </body></html>

<?xml version='1.0' encoding='ISO-8859-1'?><microcomputador> <modelo>Pentium 4</modelo> <velocidade>1.5 GHz</velocidade> <ram>256Mb de memória</ram> <monitor>17 polegadas</monitor> <teclado>Sim</teclaco> <mouse>Sim</mouse> <estabilizador>Sim</estabilizador> <impressora>Não</impressora></microcomputador>

HTML

XML

Visualizar

Visualizar

A linguagem XMLA linguagem XML

<?xml version='1.0' encoding='ISO-8859-1'?> <microcomputador> <modelo>Pentium 4</modelo> <velocidade>1.5 GHz</velocidade> <memória> <ram>256</ram> <cache>128</cache> <vídeo>64</vídeo> </memória> <monitor> <tamanho>17</tamanho> <marca>Sansung</marca> </monitor> <teclado>Sim</teclado> <mouse>Sim</mouse> <estabilizador> <KVA>2.5</KVA> <marca>SMS</marca> </estabilizador> <impressora> <tipo>LaserJet</tipo> <marca>HP</marca> </impressora> </microcomputador> Visualizar


<?xml version="1.1" encoding="UTF-8" standalone="no"?> <!DOCTYPE score-partwise PUBLIC "-//Recordare//DTD MusicXML 1.1 Partwise//EN" "http://www.musicxml.org/dtds/partwise.dtd"> <score-partwise> <part-list> <score-part id="P1"> <part-name>Music</part-name> </score-part> </part-list> <part id="P1"> <measure number="1"> <attributes> <divisions>1</divisions> <key> <fifths>0</fifths>

</key> <time> <beats>4</beats> <beat-type>4</beat-type> </time> <clef> <sign>G</sign> <line>2</line> </clef> </attributes> <note> <pitch> <step>C</step> <octave>4</octave> </pitch> <duration>4</duration> <type>whole</type> </note> </measure> </part> </score-partwise>

Mus

icX

ML

Visualizar


Permite a utilização de um número ilimitado de marcações

Permite a definição clara e precisa das informações contidas em uma página.

Não permite a definição do aspecto visual da página

Res

umin

do...

Texts

introduÇÃo À informÁtica edberto ferneda. internet e web histórico e características

Documents