Internet e WEB

Sumário/Roteiro

▪ História da Internet
▪ Características da Web
▪ A Linguagem HTML
▪ A Linguagem XML
▪ Aplicações das Linguagens de Marcação
História da Internet
 História da Internet

Designado para desenvolver um sistema de

comunicações que pudesse manter a comunicação
Sputnik entre pontos finais mesmo durante estragos
URSS provocados por um ataque nuclear.

Paul Baran
1926 – 2011

ASCII
American Standard Code for Information Exchange

1958 1969
1957 1962 1963

ARPANET
- UCLA (Universidade da Califórnia – Los Angeles),
- SRI (Stanford Research Institute),
Advanced Research Projects Agency
- UCSB (Universidade da Califórnia – Santa Bárbara),
Mobilização de pesquisas para alcançar a
- Universidade de Utah
superioridade tecnológica militar em relação à
União Soviética
 História da Internet

Defense Advanced Research

Projects Agency

Primeira vez que se utiliza o termo

USENET
INTERNET, por Vint Cerf e Bob Kahn em Noticias e
artigo sobre TCP grupos de discussão
1971 1973 1975 1976
1972 1974 1979

15 Nós • Desenvolvimento do ETHERNET

• Utilização do TCP/IP na ARPANET
e-mail
• University College of London (Inglaterra)
• Royal Radas Establishment (Noruega)

• Inicio do desenvolvimento do protocolo TCP/IP

• Esboço do padrão ETHERNET
 História da Internet

Domain Name System (DNS)

Estabelece o sistema extensões .edu, .gov, .com, .mil,
.org, .net e .int para nomear sites e elimina a
necessidade de se utilizar números nas conexões.

• MILNET, (Instituições militares)

• ARPANET (trabalhos de pesquisas avançadas)

1981 1989
1983

BITNET
Rede remota criada a partir da ligação entre a Universidade da Cidade de
Nova Iorque e a Universidade Yale, que visava proporcionar um meio rápido e
barato de comunicação acadêmica. Fornecia serviços de e-mail e de
transferência de arquivos entre instituições educacionais e de pesquisa
Tim Berners-Lee
na América do Norte, na América do Sul, Europa e Japão. Chegou a alcançar
mais de 2 500 universidades e institutos de pesquisa em todo o mundo. Inicio do projeto
World Wide Web

Década de 1980: Consolidação do Termo

ARPANET → ARPA-INTERNET → INTERNET
 História da Internet

GOPHER
Protocolo de camada de aplicação TCP/IP projetado para distribuir,
pesquisar e recuperar documentos pela Internet.
O ecossistema Gopher é frequentemente considerado como o
antecessor da Web.

World Wide Web é apresentada

Jerry Yang
David Filo

1990 1993 1995

1991 1994 1998

Marc Andreesen
MP3
ARCHIE
Ferramenta para indexar arquivos FTP,
permitindo que as pessoas encontrem
arquivos específicos.

HTML
Tim Berners-Lee

LINUX
Linus Torvalds
Década de 1990: Privatização da Internet
 História da Internet

▪ A Internet é uma rede de redes de computadores que trocam

informações entre si;
▪ Esses computadores, independentemente do porte (micros ou
grandes), podem ser de qualquer tipo, arquitetura, marca ou modelo;
▪ Podem utilizar qualquer sistema operacional;
▪ Esses computadores estão interligados por linha comum de telefone,
linhas privadas de comunicação, canais de satélite, cabos submarinos
e outros meios de comunicação;
 História da Internet

https://www.internethalloffame.org/internet-
history/timeline
Características da
WEB
 Características da WEB

▪ Características da Web
▪ Unidades (fontes) de informação
▪ Páginas
▪ Padrão para especificação de páginas
▪ HTML (Hypertext Markup Language)
▪ Esquema de endereçamento
▪ URL (Universal Resource Locator)
▪ Protocolo comum
▪ HTTP (Hypertext Transfer Protocol)
 Características da WEB

URL

https://www.eca.usp.br/graduacao/biblioteconomia/index.htm
protocolo computador caminho arquivo
(servidor, host) (pasta, diretório

▪ arquivo acessado utilizando o protocolo https (http seguro)

▪ armazenado no computador chamado www.eca.usp.br
▪ “br” indica que este computador está localizado no Brasil
▪ No diretório/pasta /graduacao/biblioteconomia/ 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
 Características da WEB

▪ HTML = Hypertext Markup Language

▪ Conjunto fixo de marcações (tags);
▪ Janelas (frames), imagens e tabelas;
▪ Ligações (links) entre páginas Web.
 Características da WEB

HTML
<html>
<head>
<title>Página HTML</title>
</head>
<body>
Página HTML simples
</body>
</html>
Visualizar
 Características da WEB

<html>
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>

Visualizar
 Características da WEB

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.

Browser

Endereço ( URL )

Usuário (Cliente)
Página ( HTML)

Servidor
A linguagem HTML
 A linguagem 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 (navegadores) são softwares que interpretam e exibem as
páginas HTML:
▪ Mosaic
▪ Netscape
▪ Internet Explorer
▪ Chrome
▪ Firefox
 A linguagem HTML

tags

▪ São indicações (marcações) apresentadas entre os caracteres de

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

▪ <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 (browsers) 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;
 A linguagem HTML

tags

<html>
<head>
<title>meu primeiro HTML</title>
</head>
<body>
<h1>Esta é minha primeira página em HTML</h1>
</body>
</html>
 A linguagem HTML

tags
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
<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>
Visualizar
 A linguagem HTML

tags
textos

Estilo Sintaxe
Negrito <B> Texto </B>
Itálico <I> Texto </I>
Sublinhado <U> Texto </U>
Letreiro <MARQUEE > Texto </MARQUEE>

<html>
<head>
<title>Teste de Tags</title>
</head>
<body>
<h1>Teste de alguns tags em páginas HTML</h1>
<B> Negrito </B> <p>
<I> Itálico </I> <p>
<U> Sublinhado </U> <p>
<MARQUEE> Letreiro </MARQUEE> <p>
</body>
</html>

Visualizar
 A linguagem HTML

HTML
<html>
<head>
<title>O Mundo é Grande</title>
</head>
<body>
<b><font size="5" face="Arial">O Mundo é Grande</font></b></p>
O mundo é grande e cabe<br>
nesta janela sobre o mar.</p>
O mar é grande e cabe<br>
na cama e no colchão de amar.</p>
O amor é grande e cabe<br>
no breve espaço de beijar.</p>
<img border="0"
src="https://static.todamateria.com.br/upload/ca/rl/carlosdrummonddeandrade-0.jpg"
width="129" height="173"><p style="margin-top: 0">
<a href="Drummond">Carlos Drummond de Andrade</a>
</body>
</html>

Visualizar
A linguagem XML
 A linguagem XML

▪ A linguagem XML (Extensible Markup Language)

▪ Permite a criação de um número ilimitado de marcações (tags);
▪ Não possui recursos para descrever o aspecto visual das páginas Web;
▪ Permite estruturar e descrever informação.

HTML XML
<html> <microcomputador>
<body> <modelo>Pentium 4</modelo>
<font size="4">Micromputador</font>
<velocidade>1.5 GHz</velocidade>
<ul>
<li>Modelo: Pentium 4 <ram>256Mb de memória</ram>
<li>velocidade 1.5 GHz <monitor>17 polegadas</monitor>
<li>256MB de RAM <teclado>Sim</teclado>
<li>Monitor de 17 polegadas <mouse>Sim</mouse>
<li>Impressora HP Deskjet 930c <estabilizador>Sim</estabilizador>
</ul>
<impressora>Não</impressora>
</body>
</html> </microcomputador>

Visualizar Visualizar
 A linguagem XML

<?xml version='1.0' encoding='ISO-8859-1'?>

<microcomputador>
<modelo>Pentium 4</modelo>
<velocidade>3.4</velocidade>
<ram>256</ram>
<monitor>
<marca>Samsung</marca>
<modelo>SyncMaster 551v</modelo>
</monitor>
<impressora>
<marca>HP</marca>
<modelo>Deskejet 930c</modelo>
</impressora>
</microcomputador>

Visualizar
 A linguagem XML

esquemas

DTD (arquivo: “livro.dtd”)

<!ELEMENT livro (titulo,genero?,autor+,editora,ano)>
<!ELEMENT titulo (#PCDATA)>
<!ELEMENT genero (#PCDATA)>
<!ELEMENT autor (nome, dtnasc)>
<!ELEMENT nome (#PCDATA)>
<!ELEMENT dtnasc (#PCDATA)>
<!ELEMENT editora (#PCDATA)>
<!ELEMENT ano (#PCDATA)>

XML (arquivo: “livro.xml”)

<?xml version='1.0' encoding='ISO-8859-1'?>
<!DOCTYPE livro SYSTEM "livro.dtd">
<livro>
<titulo>A Rosa do Povo</titulo>
<genero>poesia</genero>
<autor>
<nome>Carlos Drummond de Andrade</nome>
<dtnasc>1902-10-31</dtnasc>
</autor>
<editora>José Olympio</editora>
<ano>1993</ano>
</livro>
 A linguagem XML

esquemas

XML Schema ( micro.xsd )

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:element name=“microcomputador">
<xs:complexType>
<xs:sequence>
<xs:element name=“modelo" type="xs:string"/>
<xs:element name=“velocidade" type="xs:numeric"/>
<xs:element name=“ram" type="xs:integer"/>
<xs:element name=“monitor" type="TMonitor"/> XML
<xs:element name=“impressora" type="TImpressora"/>
<?xml version='1.0' encoding='ISO-8859-1'?>
</xs:sequence> <microcomputador xmlns:xsi="http://www.usp.br/micro.xsd">
</xs:complexType> <modelo>Pentium 4</modelo>
</xs:element> <velocidade>3.4</velocidade>
<ram>256</ram>
<monitor>
<xs:complexType name="TMonitor">
<marca>Samsung</marca>
<xs:sequence> <modelo>SyncMaster 551v</modelo>
</monitor>
<xs:element name=“marca" type="xs:string"/>
<impressora>
<xs:element name=“modelo" type="xs:string"/>
<marca>HP</marca>
</xs:sequence> <modelo>Deskejet 930c</modelo>
</xs:complexType> </impressora>
</xs:schema> </microcomputador>
 A linguagem XML

▪ XSL (Extensible Stylesheet Language)

▪ Fornece uma “folha de estilo” poderosa e com uma sintaxe fácil para
expressar como os documentos XML serão apresentados
▪ Podem ser desenvolvidas várias folhas de estilo de maneira que o mesmo
documento XML pode ser apresentado de muitas formas diferentes.

▪ CSS (Cascading Style Sheets)

▪ Folha de Estilo em Cascatas;
▪ É um mecanismo para adicionar estilo (cores, fontes, espaçamento, etc.) a
um documento web.
 A linguagem XML

DTD
XML Schema

XSL1

Página XML XSL2

XSL3
Aplicações das
Linguagens de
Marcação
 MusicXML

<?xml version="1.1" encoding="UTF-8" standalone="no"?> <note>

<!DOCTYPE score-partwise PUBLIC <pitch>
"-//Recordare//DTD MusicXML 1.1 Partwise//EN" <step>C</step>
"http://www.musicxml.org/dtds/partwise.dtd"> <octave>4</octave>
<score-partwise> </pitch>
<part-list> <duration>4</duration>
<score-part id="P1"> <type>whole</type>
<part-name>Music</part-name> </note>
</score-part> </measure>
</part-list> </part>
<part id="P1"> </score-partwise>
<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>
 VRML
Virtual Reality Modeling Language

# Right Column
Transform {
translation 2.0 3.0 0.0
children Shape {
#VRML V2.0 utf8 appearance USE White
# The VRML 2.0 Sourcebook geometry Cylinder {
# Copyright (c) 1997 radius 0.3
# Andrea L. Ames, David R. Nadeau, and John L. Moreland height 6.0 }}},
# Archway span
Group { Transform {
children [ translation 0.0 6.05 0.0
# Ground children Shape {
Shape { appearance USE White
appearance DEF White Appearance { geometry Box {
material Material { } size 4.6 0.4 0.6}}}]}
}
geometry Box {
size 25.0 0.1 25.0 }},
# Left Column
Transform {
translation -2.0 3.0 0.0
children Shape {
appearance USE White
geometry Cylinder {
radius 0.3
height 6.0 }}},
 CML
Chemical Markup Language

<molecule>
<atomArray>
<atom id="a1" elementType="C" x3="-0.296900" y3="0.897900" z3="0.000000"/>
<atom id="a2" elementType="C" x3="-0.296900" y3="-0.612100" z3="0.000000"/>
<atom id="a3" elementType="C" x3="-1.627300" y3="1.656600" z3="0.000000"/>
<atom id="a4" elementType="C" x3="0.989600" y3="1.865500" z3="0.000000"/>
<atom id="a5" elementType="C" x3="-1.641900" y3="-1.378000" z3="0.000000"/>
<atom id="a6" elementType="C" x3="-2.957700" y3="0.886900" z3="0.000000"/>
<atom id="a7" elementType="C" x3="2.265000" y3="1.055500" z3="0.000000"/>
<atom id="a8" elementType="O" x3="0.007300" y3="3.067600" z3="0.000000"/>
<atom id="a9" elementType="C" x3="-2.965000" y3="-0.604700" z3="0.000000"/>
<atom id="a10" elementType="O" x3="-1.656600" y3="-2.932000" z3="0.000000"/>
<atom id="a11" elementType="N" x3="3.701700" y3="1.979100" z3="0.000000"/>
<atom id="a12" elementType="O" x3="-4.302700" y3="-1.363400" z3="0.000000"/>
<atom id="a13" elementType="C" x3="5.068700" y3="1.037200" z3="0.000000"/>
<atom id="a14" elementType="H" x3="2.144000" y3="2.884400" z3="0.000000"/>
</atomArray>
<bondArray>
<bond atomRefs2="a1 a2" order="1"/>
<bond atomRefs2="a1 a3" order="2"/>
<bond atomRefs2="a1 a4" order="1"/>
<bond atomRefs2="a2 a5" order="2"/>
Adrenalina <bond atomRefs2="a3 a6" order="1"/>
<bond atomRefs2="a4 a7" order="1"/>
<bond atomRefs2="a4 a8" order="1"/>
<bond atomRefs2="a5 a9" order="1"/>
<bond atomRefs2="a5 a10" order="1"/>
<bond atomRefs2="a7 a11" order="1"/>
<bond atomRefs2="a9 a12" order="1"/>
<bond atomRefs2="a11 a13" order="1"/>
<bond atomRefs2="a6 a9" order="2"/>
<bond atomRefs2="a4 a14" order="1"/>
</bondArray>
</molecule>
 MathML
Mathematical Markup Language

...
<msqrt>
<mrow>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mo>-</mo>
<mrow>
<math> <mn>4</mn>
<mrow> <mo>&InvisibleTimes;</mo>
<mi>x</mi> <mi>a</mi>
<mo>=</mo> <mo>&InvisibleTimes;</mo>
<mfrac> <mi>c</mi>
<mrow> </mrow>
<mrow> </mrow>
<mo>-</mo> </msqrt>
<mi>b</mi> </mrow>
</mrow> <mrow>
<mn>2</mn>
<mo>&PlusMinus;</mo> <mo>&InvisibleTimes;</mo>
... <mi>a</mi>
</mrow>
</mfrac>
</mrow>
</math>
MarcXML