Aula 1, 2 e 3

História da Internet
Introdução ao HTML 5

O Professor : Lucas Pazito

 História da Internet

Vocês irão Concordar comigo, que hoje vivemos hoje numa

era em que a Internet ocupa um espaço cada vez mais
importante em nossas vidas pessoais e profissionais. A cada
dia, surgem constantemente aplicações WEBS para as mais
diversas finalidades, e isto é um sinal claro de que esse
mercado está em franca expansão e traz muitas
oportunidades.
Aplicações corporativas, comércio eletrônico, redes sociais, filmes,
músicas, notícias, Jogos e tantas outras áreas estão presentes na
Internet, fazendo do navegador (o browser) o software mais
utilizado de nossos computadores.
 História da Internet

Mas Talvez você se Pergunte : Como Surgiu a Internet?

Vamos Assistir á um Vídeo: Após o Vídeo Todos Temos de
saber a resposta ás seguintes perguntas:
1-O que é a Internet ?
2-Como podemos Acessar á Internet?
3-De onde Surgiu a Internet ?
4-Como a Comunicação de Dados Evoluiu até Chegar
aos dias de Hoje?
 História da Internet

5-Em que ano Surgiu o ENIAC? Porque se pode

dizer que o ENIAC era um computador limitado?
6-O Surgimento da Internet está ligado á que
Empresa Americana? Qual era a ideia principal
desta empresa? Qual o nome da Rede que foi
criada por ela?
7-O que é um protocolo ?
8-Qual a função dos protocolos FTP E DNS?
 História da Internet

9-O que é um servidor WEB?

10-Explique : usuario @servidor
11-Explique como surgiu o protocolo TCP/IP. Qual
o seu principio de funcionamento.
12-Qual era a principal limitação do protocolo FTP?
Isto levou á necessidade da criação de que
protocolo?
13-O que é Hipertexto? Em que ano foi criado o
HTML? Quem é o criador? O que significa WWW?
História da Internet (Vídeo)
 Introdução ao HTML

HTML é a sigla para Hypertext Markup Language, que

em português quer dizer Linguagem de Marcação de
Hipertexto.
È uma linguagem de marcação usada para criar Páginas
Webs. Quando dizemos Páginas Webs estamos a nos
referir á SITES, SISTEMAS WEBS ou até mesmo
APLICATIVOS. Existe uma controvérsia muito grande
entre os programadores, se o HTML é ou não uma
linguagem de programação.
 Introdução ao HTML

A verdade é que com o HTML você não vai programar.

Você vai apenas Marcar o Texto. Por isto ela é uma
linguagem de Marcação e não de Programação.
O HTML não é uma Linguagem Turing Complete!!!
Alan Turing criou uma máquina teórica mínima que
permite fazer estas operações e passou-se considerar
que qualquer linguagem precisa ser capaz de fazer todas
as operações desta máquina universal, para ser
considerada uma linguagem de programação.
 Introdução ao HTML

As características da Máquina de Turing são:

• Fazer Cálculos
• Mudar Informações Guardadas em Algum tipo de
memória
• Tomar Decisões
• Mudar o Fluxo de Execução.
O HTML não cumpre com nenhum destes requisitos,
por isto não pode ser considerada como Linguagem
de programação.
 Introdução ao HTML

Foi criada pelo Físico Cientista Timothy John

Berners-Lee em 1990. Todos as especificações da
linguagem HTML são controladas por um Consórcio
chamado de W3C ( Word Wide Web Consortium).
Este consórcio controla todos os aspectos da
linguagem (os Padrões, as Novidades, etc).
Actualmente, o HTML se encontra na sua versão 5
que trouxe muito boas novidades.
 O que é preciso para escrever Código
em HTML 5?
Já foi dito que HTML não é uma Linguagem de Programação. Então,
você não vai precisar instalar um Compilador ou Interpretador ou um
IDE para escrever código HTML.
Para escrever documentos HTML não é necessário mais do que um editor
de texto simples e conhecimento dos códigos que compõem a linguagem. Os
códigos (conhecidos como tags) servem para indicar a função de cada
elemento da página Web. Os tags funcionam como comandos de formatação
de textos, formulários, links (ligações), imagens, tabelas, entre outros.
Esses Códigos são interpretados browsers (navegadores). Os Browsers
identificam as tags e apresentam a página conforme está especificada. Um
documento em HTML é um texto simples, que pode ser editado no Bloco de
Notas (Windows) ou Editor de Texto (Mac) e transformado em hipertexto.
 Características do HTML 5
• Documentos HTML são arquivos de texto escritos em
ASCII.

• O HTML não é CASE SENSITIVE, ou seja, não faz

diferença entre letras maiúsculas e minúsculas em
suas marcações.

• Nem todas as marcações e seus correspondentes

recursos são suportados por qualquer navegador.
Quando um cliente Web (navegador) não entende uma
marcação, ele simplesmente a ignora.
 Características do HTML 5
• Arquivos HTML podem possuir as extensões
`html' ou `htm’.

A primeira é normalmente utilizada em sistemas

UNIX e a segunda em sistemas Windows.

Os Browsers são capazes de exibir documentos

com ambas as extensões.
 BROWSERS ou NAVEGADORES
Browser ou navegador é um programa que permite o acesso e interpretação de arquivos
HTML, CSS, Javascript, entre outros. O primeiro browser foi criado em 1990 por Tim
Berners-Lee e chamava-se WorldWideWeb, tinha poucas funcionalidades e a maior parte
das informações eram textos.

De lá para cá muita coisa mudou e os browsers atuais são sofisticados

programas capazes de interpretar diversos tipos de documentos e ainda prover
recursos adicionais aos seus usuários.
 Para que servem os BROWSERS
Um navegador é um programa de computador que tem por finalidade
trabalhar com request e response ou pedido e resposta. Inicialmente
quando você digita o endereço de um site ou clica em um link qualquer, ele faz
uma requisição daquela página. Este pedido é enviado para o servidor onde o
site está hospedado e cabe a este responder com os arquivos que compõe a
página.De posse desses arquivos, o browser irá montar a página de acordo
com as instruções do arquivo HTML que ele recebeu e por fim mostrar para o
usuário a página solicitada
 Uma Página pode ser interpretada de
forma diferente por cada BROWSER?

Pode. Como explicado anteriormente, cada navegador irá montar a página

de acordo com o HTML que é único para todos os casos, mas a

interpretação do HTML e do arquivo de formatação CSS geralmente não

a mesma para todos os navegadores. Existem casos então que uma página

pode ser mostrada de forma diferente ou até funcionar de forma

ligeiramente diferente de acordo com o navegador.

 O que é preciso para escrever Código
em HTML 5?
Você só precisa de um Browser e de um Editor de Texto.
 Os 3 Pilares Básicos da Programação
WEB
Se HTML não é uma Linguagem de Programação, como é
possível ver sites que realizam cálculos, que trabalham com
memória?

A Verdade é que a WWW tem 3 Linguagens padrão que se

complementam, e acabam sendo os 3 pilares básicos da
programação WEB. O HTML em conjunto com
o CSS e JAVASCRIPT, formam as pedras principais para a
World Wide Web. Todos os navegadores atuais recebem
documentos em HTML que são processados, renderizados,e
apresentados como conteúdo online.
 TAGS ou Marcações HTML
A linguagem HTML pertence a uma classe de
linguagens de programação conhecida como `Tag
Languages', ou simplesmente Linguagem de
Marcação.

Neste tipo de linguagem, os comandos são escritos

em forma de marcações denominadas tags. De um
modo geral, as tags aparecem em pares,
delimitando o texto a ser formatado.
 TAGS ou Marcações HTML
A tag que abre o campo de atuação de um comando
pode ser identicada pelos sinais
<tag> enquanto a que encerra este campo de
atuação possui os sinais </tag>
Por exemplo:
<B> Linguagem </B> de Marcação.
A sintaxe acima determina que a marcação `B'
seja aplicado ao texto `Linguagem', mas não ao
texto ‘de Marcação'.
 TAGS ou Marcações HTML
Há exceções a esse funcionamento de paridade das
tags, onde a marcação <tag> não necessitará de
sua correspondente </tag>.

Veremos exemplos de ambos os tipos mais adiante.

Além do comando propriamente dito, uma tag pode
conter seus parâmetros.
 Parâmetros das TAGS
Parâmetros são recursos próprios de cada marcação,
que permitem que ele seja executado de diversas
formas.
Pode-se dizer que enquanto uma TAG diz ao Browser o
que fazer, seus parâmetros dizem a ele como fazer,
através de suas opções. Assim como cada comando
possui parâmetros especícos, cada parâmetro possui
opções especícas. Veja o exemplo:
<FONT SIZE="4“ COLOR="green"> Texto </FONT>
 Parâmetros das TAGS
No exemplo acima, `FONT' é o comando (TAG) e,
`SIZE' e `COLOR' são os parâmetros cujas opções
escolhidas pelo programador foram,
respectivamente, `4' e `green’.

Note que, ao contrário da marcação de abertura, a

marcação de fechamento de um comando não
precisa mencionar seus parâmetros.
 URL – Uniform Resource Locator
A abreviação URL corresponde à nomenclatura
Uniform Resource Locator (localizador universal de
recursos), utilizada pela Internet para indicar o
endereço de um documento.

Saber especicar corretamente uma URL é

imprescindível para utilizar adequadamente muitos
comandos da linguagem HTML.
 URL – Uniform Resource Locator
Uma URL deve conter três partes:

• O protocolo do documento
• O endereço do servidor e,
• Localização do arquivo.

Sintaxe: protocolo://servidor/nome do arquivo.

 URL – Uniform Resource Locator
protocolo - É o tipo de protocolo de comunicação
que deve ser usado.

servidor - É o nome do servidor que será acessado.

nome do arquivo - É o nome do documento que

será acessado.
 Alguns Tipos de Protocolos usados em
URL
HTTP - É um servidor da World Wide Web que contém documentos no
formato `HTTP' e que signica HyperText Transfer Protocol.
GOPHER - É um servidor composto por menus e diretórios com
informações sobre arquivos e dados.
FTP - É uma abreviação de File Transfer Protocol.
Telnet - Este protocolo inicia uma sessão para se conectar
remotamente a outro computador.
WAIS - Wide Area Indexed Server é um local onde documentos estão
disponíveis em formato especial de pesquisa.
File - Indica que o documento está no micro ou na rede local.
 Estrutura de uma Página Web Simples

<html>
<head>
Limite do Cabeçalho (aqui vai

Limite Principal do
</head> informação da página)

Programa
(o mais importante)
<body> Limite do Corpo do Programa
(aqui vai o Conteúdo da página)
</body>
</html>
 Estrutura de uma Página Web Simples

Se estivermos a usar a versão mais recente do HTML

que é a versão 5 precisamos informar isto ao navegador
usando a seguinte declaração: <!DOCTYPE html>

Um documento HTML tem basicamente duas secções:

Uma Seccção que vai carregar as INFORMAÇÕES da
página e outra que vai carregar o CONTEÚDO da Página.
As informações são declaradas dentro de <head> e o
conteúdo dentro de <body>
 Estrutura de uma Página Web Simples
O que vai na área <head> ?

Vão informações para ajudar o seu navegador a

entender informações de formatação da página, como
caracteres utilizados, título da página, língua do país
onde a página foi feita, versão da página ou linguagem,
locais onde os arquivos utilizados estão armazenados, e
muitas outras coisas
 Estrutura de uma Página Web Simples
O que vai na área <head> ?

Para adicionarmos título á nossa página dentro da área

<head> usamos a Tag <title> </title>

Para adicionarmos alguma meta informação na nossa página

usamos a tag <meta>. È nesta tag onde podemos declarar
a codificação de caracteres que o nosso site vai usar. Para
a codificação de caracteres da língua portuguesa, que
inclui acentos usamos o UTF-8 da seguinte forma: <meta
charset= “ UTF-8”>.
 Estrutura de uma Página Web Simples
O que vai na área <body> ?
!DOCTYPE html>

<html lang = “pt-br”>

<head>
<title> Minha Primeira Página HTML5 </title>
<meta charset= “UTF-8”>
</head>

<body>
Olá Mundo
</body>
</html>
 Estrutura de uma Página Web Simples
O elemento <html>
O código HTML é uma série de elementos em árvore onde
alguns elementos são filhos de outros e assim por diante.
O elemento principal dessa grande árvore é sempre a tag
<html>.
<html lang=”pt-br”>

O atributo LANG é necessário para que os user-agents saibam qual a

linguagem principal do documento.

Lembre-se que o atributo LANG não é restrito ao elemento HTML, ele

pode ser utilizado em qualquer outro elemento para indicar o idioma do
texto representado.