Programação para Internet

Professor Pedro Ramires

1º Informática

Introdução a Web

• HTML é a sigla em inglês para HiperTextMarkup Language, que em português significalinguagem para marcação de hipertexto.

• Hipertexto pode ser resumido como todoconteúdo inserido em um documento para webe que tem como principal característica apossibilidade de se integrar a outrosdocumentos na web.

• O que torna possível a construção de hipertextosão os links, presentes nas páginas dos sitesque estamos acostumados a visitar quandoentramos na internet.

Versões

• HTML

• HTML +

• HTML 2.0

• HTML 3.0

• HTML 3.2

• HTML 4.0

• HTML 4.01

• HTML 5

Histórico

• A web foi inventada em 1922 por Sir Tim

Berners-Lee. Atualmente diretor do World

Wide Web Consortiun (W3C), pesquisador

senior do Laboratório da

Ciência da Computação

e Inteligência Artificial

do Instituto de

Tecnologia de Massachusetts (MIT).

Histórico

• Em meados dos anos 90, Tim Berners-

Lee trabalhava na Seção de Computação

da Organização Européia de Pesquisa

Nuclear, quando iniciou a pesquisa

visando descobrir um método para que os

cientistas do mundo inteiro

compartilhassem eletronicamente seus

textos e pesquisas, sendo criado o

rascunho da web.

Histórico

• Em 1990, Tim criou o protótipo de um

navegador para rodar em computadores

NeXT, uma companhia fundada em 1985

por Steve Jobs.

• Inicialmente o navegador foi chamado de

WorldWideWeb, posteriormente

renomeado para Nexus a fim de evitar a

confusão com a World Wide Web.

Histórico

• Tim acreditava que era possível interligar

hipertextos em computadores diferentes

usando links globais. Ele desenvolveu um

software pronto e um protocolo para

recuperar hipertextos, denominado HTTP.

• A marcação para hiperlinks conduzindo a

documentos que não estivessem em um

mesmo computador obviamente não

constavam nas normas padrões da época

(SGML), e foi inventada por Tim em 1990.

Histórico

• Tim em uma estação de trabalho NeXT,

nos laboratórios da CERN, mostrou o

embrião da World Wide Web, bem como a

primeira versão da linguagem HTML.

• A partir daí, a evolução cronológica da

Web deu continuação até o que a gente

vê hoje.

HTML

• HTML não é uma linguagem de

programação, e sim uma linguagem de

marcação. (programação ocorre

transformação da informação e marcação:

você marca o conteúdo, ou seja, significa

que sua especificação prescreve como o

dado estruturado será mostrado, porém

outras linguagens de marcação, tal como

XML, não possui semântica predefinida....)

HTML

• HTML é interpretado pelos navegadores

(internet explorer, firefox, google crome,

opera, safari...). Sites rodam em cima de

navegadores, é a forma que o usuário usa

para se comunicar. Grande problema quando

se fala em html, porque o código não é

compilado (delphi) e sim o código continua

sendo puramente texto e ele é transmitido

pela internet até o navegador de quem

acessa, e o navegador é quem vai

interpretar.

HTML

• O problema existe quando as marcas de

navegadores começam a inovar (muita

tecnologia) e às vezes os criadores de

sites não conseguem acompanhar o

padrão (normas do w3c) dos

navegadores. Então, geram-se os erros.

Como funciona uma página web

Como funciona uma página web

Como escreve o HTML?

• Todo documento HTML apresenta

etiquetas(TAGS), elementos entre

parênteses angulares (< e >); esses

elementos são os comandos de

formatação da linguagem. A maioria das

etiquetas tem sua correspondente de

fechamento:

<etiqueta>...</etiqueta>

Como escreve o HTML?

• Isso é necessário porque as etiquetas

servem para definir a formatação de uma

porção do documento, e assim marcamos

onde começa e termina o texto com a

formatação especificada por ela. Alguns

elementos são chamados “vazios”, pois

não marcam uma região de texto, apenas

inserem algum elemento (imagem, som,

link) no documento:

<etiqueta>

Como escreve o HTML?

• Uma etiqueta é formada por comandos,

atributos e valores. Os atributos modificam

os resultados padrões dos comandos e os

valores caracterizam essa mudança.

Exemplo

<HR color="red">

No qual:

• HR = comando que desenha uma barra

horizontal

• color = atributo que especifica a cor da

barra

• red = valor do atributo color, que é a cor

da barra que será desenhada

Para testar...

• Abra o bloco de notas;

• Digite o seguinte:

<HR color="blue">

<font color="blue"> O CRUZEIRO É O

MELHOR TIME DO MUNDO!!! </font>

<HR color="blue">

• Salve como exemplo1.html

• Abra-o para ver o resultado.

Desafio...

• Com base no exemplo anterior, escreva a

frase: “Ordem e progresso” , tanto na

parte de cima quanto na parte de baixo

faça as faixas com as cores da bandeira.

Antes de Prosseguir...

• TAG P:

• A tag ou etiqueta <p> é usada para definir

um parágrafo, para facilitar o aprendizado

digitem em um bloco de notas:

• Linha 01

• Linha 02

• Linha 03

Salve com o nome teste03.html

Antes de Prosseguir...

• Abra o exemplo anterior e a cada inicio de

linha coloque a tag <p> e no final de cada

linha coloque a tag de finalização </p>.

• Salve com o nome teste04.html e veja

como ficou

Desafio...

• Digite a seguinte poesia:

• Deixe-a com o mesmo

• formato

Desafio...

• Faça uma página onde contenha:

• Nome:

• Idade:

• E-mail:

• Experiência Profissional:

• Interesse Profissional:

• Meta para 2 anos: