Slides 4 - HTML como Linguagem de Formatação WEB (Introdução ao HTML)

Profª. MSc. Cláudia

Licenciatura em Computação

HTML como Linguagem

de Formatação web.

Agenda



Histórico



Princípios básicos



Como Funciona uma Página?



Desafios?



Realidade



A Linguagem HTML

Agenda



Histórico



Princípios básicos



Como Funciona uma Página?



Desafios?



Realidade



A Linguagem HTML

Histórico



Em 1970 - 1980:



Surgimento da Internet, em plena Guerra Fria.

_{Criada com objetivos militares.}

 _{Para manter as comunicações das forças armadas}

norte-americanas em caso de possíveis ataques inimigos que viessem a destruir os meios convencionais de telecomunicações.



Foi um importante meio de comunicação

acadêmico.

Histórico



Em 1988:



_{A Internet surgiu no Brasil.}

 _{Para interligar as universidades do Brasil a instituições nos}

EUA.

•

_{Em 1989:}



O Ministério da Ciência e Tecnologia lança um projeto

pioneiro, a Rede Nacional de Ensino e Pesquisa (RNP).

Histórico

•

_{Em 1992:}



_{A Internet foi aberta ao público brasileiro.}



Em 1994:



Surgimento do Consórcio World Wide web – W3C

(

www.w3.org

), criado para promover abordagens

e interoperabilidade comuns para a Internet.

 _{Parte do trabalho do W3C, foi o desenvolvimento das}

Histórico

•

_{Em 1995:}



_{O governo resolveu abrir o backbone e fornecer}

conectividade aos provedores de acesso

comerciais.

•

_{Em 1997:}



Iniciou-se uma nova fase na Internet brasileira.

Histórico



Em 1998:



Surgimento do web Standards Project – WaSP

(

www.webstandards.org

).

 É um projeto que “luta” por padrões que reduzam o

custo e a complexidade do desenvolvimento, ao mesmo tempo que aumente a acessibilidade e viabilidade de todos os sites publicados na Internet.

•

_{Em 2000:}

Histórico

•

_{Em 2010:}



_{O comércio eletrônico no Brasil movimentou}

13,60 bilhões de dólares.

Fonte: Escola de Administração de Empresas de São Paulo da Fundação Getúlio (Wikipédia, 2010).

Agenda



Histórico



Princípios básicos



Como Funciona uma Página?



Desafios?



Realidade



A Linguagem HTML

Princípios básicos



Internet:



_{Atualmente é uma rede mundial, que envolve:}

 _{Milhares de pequenas redes de computadores.}  Milhões de computadores.

 Comerciais  Educacionais  Governamentais  Pessoais

Princípios básicos



TCP/IP:



Corresponde ao conjunto de protocolos

utilizados na troca de informações entre

computadores de diferentes arquiteturas

dentro da Internet.

 _{Ele está disponível para qualquer tipo de CPU e}

Princípios básicos



WWW (World Wide web):



Significa Rede Mundial (a grande rede de

computadores interligados no mundo todo).



Desenvolvida com o intuito de facilitar a

comunicação interna e externa.

 Resultado de um projeto que visava melhor

distribuição de informações a grupos de pesquisas (1989) por cientistas do CERN (Centro European Researche Nucleare) laboratório de física, Genebra -

Princípios básicos



web:



É o diminutivo para World Wide web.

 _{A palavra web é usada como sinônimo da própria}

Princípios básicos



Padrões web:



A organização W3C é responsável pela

padronização do HTML.



A especificação original do HTML foi

desenvolvida, no CERN.

Princípios básicos



Padrões web:



Benefícios:

 _{Reduzem o tamanho das páginas, para acelerar os}

downloads.

 _{Possibilitam o consumo de menos banda de Rede.}

 _{Aumentam a compatibilidade da aplicação de toda a}

riqueza decorativa CSS com o conteúdo HTML.

 Facilitam o re-design.

 _{Possibilitam ao usuário final, o controle do conteúdo}

Princípios básicos



Estrutura da Internet:

cabo ethernet linh

a t e le fô n ic a C O M P A R T I L H A D C O M P A R T I L H A D A Provedor

Princípios básicos



Estrutura da Internet:

Agenda



Histórico



Princípios básicos



Como Funciona uma Página?



Desafios?



Realidade



A Linguagem HTML

Como funciona uma página?

Como funciona uma página?

Como funciona uma página?



Hypertext:



Os documentos visualizados através dos

browsers são escritos em Hipertextos,

utilizando-se

uma

linguagem

especial

chamada

HTML

(HyperText

Markup

Language).

 _{Através do hipertexto “navega-se” por meio de}

elementos especiais chamados ‘links’, para outros documentos ou para partes do mesmo documento.

Como funciona uma página?



Hyperlinks ou Links:



É um ponto de acesso (ligação ou ancora).

 Para um local na mesma pasta de trabalho ou para

outro arquivo.

 _{É representado a partir:}

 _{De um texto colorido ou sublinhado.}  De uma figura.

 _{De um elemento gráfico.}

Como funciona uma página?



Home Page:



É um conjunto de páginas, documentos

disponíveis na web, interligados entre si.



O termo também é usado para designar a

página principal de um conjunto de

documentos web.

 _{Um conjunto de páginas também é chamado de}

Como funciona uma página?



Site:



Palavra em inglês que significa local, lugar.

 Na Internet, designa um conjunto de páginas que

representa uma pessoa, instituição ou empresa na rede.

Como funciona uma página?



Browsers (ou Navegadores da web):



Browsers são software que interpretam

arquivos HTML, formata-os em páginas e

exibe-os, a um usuário.

Como funciona uma página?



Protocolos:



É um conjunto de regras estabelecidas com o

objetivo de permitir a comunicação entre

computadores.



É um método de acesso a um documento ou

serviço através da Internet, como:

 _TCP/IP.

 _{File Transfer Protocol (FTP):}

 Protocolo que possibilita a transferência de arquivos de um

Como funciona uma página?



Protocolos:

Como funciona uma página?



URL (Uniform Resource Locator):



URL é uma sequência de caracteres que

fornece o endereço Internet de um site da

web, juntamente com um protocolo (HTTP ou

FTP).

 _{A parte inicial da URL (a que termina com os dois}

pontos) indica qual protocolo Internet está sendo usado.

Como funciona uma página?



URL (Uniform Resource Locator):

http://www.universidade.com.br/bsi/2011.html#l

ocal



http://

 Protocolo da Internet utilizado pelos computadores

ligados à web para comunicar-se entre si.



www.universidade.com.br

 _{Domínio, que são as categorias de endereços da}

Como funciona uma página?



URL (Uniform Resource Locator):

http://www.universidade.com.br/bsi/2011.html#l

ocal

 www

 _{Sigla de World Wide web, significa Rede Mundial.}

 _universidade

 _{Nome específico que pode conter uma ou mais palavras,}

separadas ou não, por hifens (ex.: informatica-educativa).

 _com

 _{Indica a natureza do Site.}

Como funciona uma página?



URL (Uniform Resource Locator):

http://www.universidade.com.br/bsi/2011.html#l

ocal



bsi

 Diretório (pasta) onde está localizado a página

(arquivo) 2011.html.



2011.html

 _{Nome da página escrita em HTML requerida}

(páginas da web geralmente tem terminação em .htm ou .html).

Agenda



Histórico



Princípios básicos



Como Funciona uma Página?



Desafios?



Realidade



A Linguagem HTML

Desafios?



Os navegadores serão capazes de

fornecer aplicações 3D com base em

interfaces de programação sem a

instalação de qualquer plug-in.



“É clicar, e pronto! Você se divertirá com um

Agenda



Histórico



Princípios básicos



Como Funciona uma Página?



Desafios?



Realidade



A Linguagem HTML

Realidade



Uma coisa é certa:



O navegador do ano 2015 vai ter um papel

muito mais importante no cotidiano do que

tem hoje.



E isso quer dizer muito. “Todos devem apoiar

a web”, diz Upson, que emenda “a web tem

milhões de usuários”.

Agenda



Histórico



Princípios básicos



Como Funciona uma Página?



Desafios?



Realidade



A Linguagem HTML

A Linguagem HTML



A Hypertext Markup Language não é

uma linguagem de programação, e sim,

uma linguagem especializada para a

formatação de texto.



O texto produzido fica entre símbolos

especiais (<>), denominados tags, que

indicam sua aparência:



Uma tag possui o seguinte formato:



_{<nome da tag>Texto de Exemplo</nome da}

A Linguagem HTML



O começo de uma página HTML, deve

ser:

<HTML>

<!-- na primeira linha do código -->

. . .

</HTML>

<!-- na ultima linha do código -->

 _{A barra (/) sinaliza o fechamento da tag HTML.}

A Linguagem HTML



Estrutura das tags:



_{É formada por:}



Entre o início o fechamento de uma tag:



Ficam os textos, parâmetros, atributos e até

outras tags que estabelecerão a uma página.



Se não ocorrer o fechamento correto das tags,

a página não irá ser mostrada.

A Linguagem HTML



Ao iniciar o documento, após a tag

<HTML>:



Deve-se incluir o cabeçalho.

<HEAD>

e

</HEAD>



Também deve ser acrescentado o título.

<TITLE>

e

</TITLE>

 Geralmente, o título não aparece na página,

A Linguagem HTML



Ainda

existem

também

a

tag

corresponde ao “corpo” do documento.

<BODY>

e

</BODY>



No corpo, são colocados todos os comandos

para apresentação de uma página HTML.

 _{Entre as tags do corpo, serão colocados todos os}

Agenda



Histórico



Princípios básicos



Como Funciona uma Página?



Desafios?



Realidade



A Linguagem HTML

Introdução ao desenvolvimento

HTML



Declaração do tipo de documento:

 Aconselha-se indicar na página HTML o tipo de documento, isto é, a referência à norma HTML utilizada.

 _{Esta serve para especificar o standard (padrão)} utilizado na codificação da página.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Introdução ao desenvolvimento

HTML

Introdução ao desenvolvimento

HTML



Exemplo1:

Documento simples em HTML:

<TITLE> Primeiro exemplo em HTML </TITLE>

</HEAD>

<BODY>



Espaços em branco são ignorados

quando o navegador “lê” (interpreta) o

código.



_{Assim o código anterior poderia ser reescrito}

da seguinte forma:

<HTML>

<HEAD>

<TITLE>

Primeiro exemplo

em HTML

</TITLE>

</HEAD>

<

Bem-vindo ao

Introdução ao

Introdução ao desenvolvimento

HTML



Vantagem?



Economia de espaço em disco.



Desvantagem?



É uma maneira confusa de programar.

Organize seus programas para

entendê-los!

Introdução ao desenvolvimento

HTML



Parágrafos:



A linguagem HTML considera os parágrafos

como blocos de texto.



Dentro de um parágrafo, os espaços,

tabulações e regressos contam como um só

um espaço.



A configuração da página por blocos de texto

é realizada através do par de tags

<p>

e

Introdução ao desenvolvimento

HTML



Exemplo2:

<TITLE> Segundo exemplo em HTML </TITLE> </HEAD>

<BODY>

<p>Professora: Cláudia Souza</p>

Introdução ao desenvolvimento

HTML



Algumas observações:



As tags obedecem a uma hierarquia.



A primeira a abrir é a última a fechar, e

vice-versa.

 _{<a> <b> <c> </a> </b> </c> ERRADO}

 É indiferente utilizar maiúsculas ou minúsculas nos tags.

Exercício

 _{Desenvolva uma Página com as seguintes informações:}

 _Nome  _Endereço  _Bairro  CEP  Cidade  _Estado  País  Telefone  _E-mail  _Curso  _Matrícula  Turma  _Ano

Exercício – Resposta 1

<HTML> <HEAD>

<TITLE> Exercício: Construção de páginas em HTML </TITLE> </HEAD>

<BODY>

<p>Nome: Fulano de Tal</p>

<p>Endereço: Tv. Rua Vila Casa, 123</p> <p>Bairro: Me Roba</p> <p>CEP: 66000-111</p> <p>Cidade: Belém</p> <p>Estado: Pará</p> <p>País: Brasil</p> <p>Telefone: 3223-3223</p> <p>E-mail: fulano@mail.com</p>

<p>Curso: Sistemas de Informação</p> <p>Matrícula: 012456789</p>

<p>Turma: SI3NA</p> <p>Ano: 2012</p>

Exercício – Resposta 2

<HTML> <HEAD>

<TITLE> Exercício: Construção de páginas em HTML </TITLE> </HEAD>

<BODY>

<p>Nome: Fulano de Tal

<br>Endereço: Tv. Rua Vila Casa, 123 <br>Bairro: Me Roba <br>CEP: 66000-111 <br>Cidade: Belém <br>Estado: Pará <br>aís: Brasil <br>Telefone: 3223-3223 <br>E-mail: fulano@mail.com

<br>Curso: Sistemas de Informação <br>Matrícula: 012456789

<br>Turma: SI3NA <br>Ano: 2012

Profª. MSc. Cláudia

Licenciatura em Computação

HTML como Linguagem

de Formatação web.