AULA 01

Cláudio José Leite

 Bem vindo ao curso !

O curso tem por objetivo desenvolver habilidades

necessárias para o desenvolvimento e gerenciamento

de páginas Web, utilizando a linguagem de marcação

HTML.
 Conceitos

Inicialmente, vamos nos familiarizar com alguns termos

técnicos relacionados a Web.

 Internet

Rede mundial de computadores formada por um

conjunto de redes interligadas que permitem o acesso

e a troca de dados e informações.

 Intranet

Rede de computadores interna que utiliza protocolos da

Internet, porém, de uso exclusivo de um determinado

local, como, por exemplo, a rede de uma empresa, que

só pode ser acessada pelos seus utilizadores ou

colaboradores internos
 World Wide Web

Termo técnico utilizado para se referir a rede mundial

de computadores, mais especificamente ao conteúdo

virtual que é compartilhado na rede.

 Home Page

Termo utilizado para definir a página inicial, também

conhecida como página principal ou página de entrada

do portal eletrônico.

Normalmente é denominada como index.htm ou

default.htm
 Linguagem de Marcação

São utilizadas para definir formatos, maneiras de

exibição e padrões dentro de um documento qualquer.

Normalmente, não possuem qualquer estrutura de

controle como as linguagens de programação

tradicionais (comandos condicionais ou de repetição).

 Linguagem de Marcação

Servem basicamente para definir como um

determinado conteúdo será exibido na tela ou como os

dados devem ser estruturados ao trafegar entre os

diferentes módulos do sistema.

HTML (HyperText Markup Language)

HTML é uma Linguagem de Marcação ("Markup

Language") voltada para a estruturação e

apresentação visual de documentos acessado pelo

navegador ("browser"). É interpretada pela maioria dos

navegadores.
HTML (HyperText Markup Language)

É composta essencialmente por texto e tags que

delimitam ou agrupam os elementos da página.

Quando o navegador recebe o arquivo HTML, ele

interpreta as tags e atribui a formatação no conteúdo

antes de exibir na tela para o usuário.

HTML (HyperText Markup Language)

Criada em 1990, por Tim Berners-Lee, com a finalidade

de permitir o acesso e a troca de informações e a de

documentação de pesquisas na Web, o HTML deriva

da linguagem marcação SGML.

Cronologia das linguagens de marcação

SGML → HTML 1.0 → HTML xx → XML → HTML 4.01 → XHTML.
HTML (HyperText Markup Language)

No início, o HTML era padronizado pelo CERN e

a IETF, após 1995, o padrão passou a ser regularizado

pela W3C, consórcio formado por instituições

comerciais e educacionais, que tem por objetivo definir

os padrões para as respectivas áreas relacionadas à

Web.
HTML (HyperText Markup Language)

Desde seu surgimento sofreu várias revisões e

alterações na sua especificação.

 Desenvolvimento por camadas

Basicamente existem três separações no

desenvolvimento web (HTML, CSS e JavaScript). O

código HTML, é responsável por exibir o site, o CSS

trata da formatação das informações do site e o código

Javascript vai tratar das funcionalidades do site.

 Editores HTML

Existem diversos programas que permitem a criação de

páginas Web, desde editores de texto a editores

gráficos.
 Editores HTML

Páginas Web podem ser criadas e modificadas

utilizando editores profissionais, no entanto, basta um

editor de texto simples como o Notepad (PC) ou o

TextEdit (Mac), desde que o arquivo seja salvo com

extensão .HTML.
 Tags

São estruturas de linguagem de marcação composta

por instruções de estilo e/ou conteúdo, com marca de

início e de fim para que o navegador possa renderizar

as páginas Web. A versão HTML5, inclui cerca de 140

tags.
 Tags

Existem dois tipos de Tags, as que necessitam de

fechamento e as que não necessitam.

 Tags

Para as que necessitam de fechamento, é necessário

uma tag de abertura que demonstra onde seu efeito se

inicia e uma de fechamento que demonstra onde o

comando é finalizado.
 Estrutura básica

A estrutura básica de um documento HTML é composta

por três tags (html, head e body), deve estar presente

em todos os documentos, e seguir exatamente a

seguinte sequência.
 Estrutura básica

Simplificando, a estrutura de um documento HTML

pode ser entendida através de uma divisão de blocos

das tags essenciais, conforme a seguinte estrutura:

• Definição do documento (doctype)

• Cabeça (head)

• Corpo (body)
Estrutura básica
 Doctype - Definindo o documento

O doctype é uma instrução para o navegador e outros

programas que interpretarão o site, determinando o que

fazer para exibir o site da melhor forma possível.

O doctype é OBRIGATÓRIO e deve ser sempre a

PRIMEIRA LINHA do documento.

 Tag <html>

A tag <html> Conhecido como o elemento raiz, é

responsável por informar aos navegadores que todo

conteúdo posterior deve ser tratado como uma série de

códigos HTML.
 Tag <head>

Define o cabeçalho do documento HTML, contém as

informações sobre o documento e que não são

exibidas na tela (são dados, de uso e controle do

documento: vinculação com outros arquivos, aplicação

de lógica de programação de scripts e metadados).

 Tag <meta>

Contém as informações sobre página (codificação de

caracteres, descrição, autor, dimensões e

dimensionamento). Permite que os mecanismos de

busca obtenham informações sobre o documento, a fim

de classificá-lo.
Tag <meta>
 Tag < body>

Define o conteúdo principal do documento (local onde

serão declarados e identificados cabeçalhos, rodapé,

conteúdo principal), é a parte que será exibida no

navegador.
 Codificação de Caracteres

Armazena os símbolos em formato binário,

possibilitando a conversão de símbolos em código ou

código em símbolo. A codificação UTF-8 é

recomendada por ser amplamente suportada pelos

navegadores e editores de código.