Aplicaes para

Internet
 Material Terico
Conceitos Bsicos do HTML

Responsvel pelo Contedo:

Prof. Ms. Alexander Gobbato Paulino Albuquerque

Reviso Textual:
Profa. Ms. Ftima Furlan
 Conceitos Bsicos do HTML

Conceitos Bsicos de HTML

Introduo as Tags de HTML
Explicao do Conceito de Cliente/Servidor
Ferramentas disponveis

OBJETIVO DE APRENDIZADO
Conhecer:
Conceitos Bsicos de Internet e sua Histria;
Tecnologias atuais e emergentes para desenvolvimento de aplica-
es para Internet;
Conceitos bsicos da arquitetura cliente-servidor.
O que o HTML?
O W3C e suas especificaes
Estruturao e contedo
Corpo bsico
 Orientaes de estudo
Para que o contedo desta Disciplina seja bem
aproveitado e haja uma maior aplicabilidade na sua
formao acadmica e atuao profissional, siga
algumas recomendaes bsicas:
Conserve seu
material e local de
estudos sempre
organizados.
Aproveite as
Procure manter indicaes
contato com seus de Material
colegas e tutores Complementar.
para trocar ideias!
Determine um Isso amplia a
horrio fixo aprendizagem.
para estudar.

Mantenha o foco!
Evite se distrair com
as redes sociais.

Seja original!
Nunca plagie
trabalhos.

No se esquea
de se alimentar
Assim: e se manter
Organize seus estudos de maneira que passem a fazer parte hidratado.
da sua rotina. Por exemplo, voc poder determinar um dia e
horrio fixos como o seu momento do estudo.

Procure se alimentar e se hidratar quando for estudar, lembre-se de que uma

alimentao saudvel pode proporcionar melhor aproveitamento do estudo.

No material de cada Unidade, h leituras indicadas. Entre elas: artigos cientficos, livros, vdeos e
sites para aprofundar os conhecimentos adquiridos ao longo da Unidade. Alm disso, voc tambm
encontrar sugestes de contedo extra no item Material Complementar, que ampliaro sua
interpretao e auxiliaro no pleno entendimento dos temas abordados.

Aps o contato com o contedo proposto, participe dos debates mediados em fruns de discusso,
pois iro auxiliar a verificar o quanto voc absorveu de conhecimento, alm de propiciar o contato
com seus colegas e tutores, o que se apresenta como rico espao de troca de ideias e aprendizagem.
UNIDADE Conceitos Bsicos do HTML

Introduo
O que preciso saber para desenvolver aplicaes para a WEB?
Explor

Entender o funcionamento bsico da execuo dessa aplicao

Conhecer as linguagens que so executadas na mquina cliente (HTML, CSS, JavaScript)
Conhecer alguma linguagem que rode no servidor para aplicaes mais robustas (PHP,
ASPX, JSP, etc)
Saber trabalhar com banco de dados (MySQL, Oracle, SQLServer, etc)
Ter um pouco de criatividade para se trabalhar com os layouts das suas aplicaes
Explor

A Evoluo da WEB: https://goo.gl/F09OS

Ambiente Cliente/Servidor
Pensando nos elementos bsicos para fornecer informao atravs da Web, temos:
Cliente Servidor

Conexo

Servidor Web
Protocolo HTTP
Figura 1
Quando falamos em desenvolvimento web podemos ter duas vertentes, podemos
programar client side e/ou server side.

Client Side ou Lado Cliente so programas executados na mquina cliente, ou

seja, os browsers so os responsveis pela execuo/interpretao das linguagens.

Cliente

HTML, CSS, Javascript e XML

Figura 2

8
 Server Side ou Lado Servidor so programas e instrues executadas em
uma mquina servidor, necessrio um servidor, por exemplo, IIS da Microsoft,
GlassFish e Apache que suportem os tipos de linguagens utilizadas, como ASPX,
JSP e PHP. Essas linguagens so compiladas e gerados arquivos que somente os
computadores podem interpretar. No servidor ainda podemos ter os bancos de
dados que so softwares responsveis por todo armazenamento de informaes
em estrutura de tabelas e relacionadas entre si.

Servidor

PHP, JSP, ASPX e Banco de Dados

(MySQL, Oracle, SQLServer)

Figura 3

Ento em resumo, podemos trabalhar tanto com programaes cliente e/ou

programaes no servidor.

O que HTML?
O HTML (Hypertext Markup Language) conhecido como uma Linguagem de
Marcao de Hipertexto. O HTML uma linguagem que se prope em distribuir
informao globalmente e pode ser entendido por diversos meios de acesso, ele foi
desenvolvimento por Tim Bernes-Lee .
Um documento HTML um documento texto que pode ser produzido utilizando
qualquer editor de texto. O contedo HTML de uma pgina processado por um
Navegador (Internet Explorer, Chrome etc.)
O HTML define um conjunto de elementos para a marcao de uma pgina
Web: cabealho, pargrafo, lista, tabelas, entre outros. Cada elemento possui sua
funo especfica e so comumente chamados de tag (marca ou marcadores).

Ferramentas: Para testar nossos arquivos:

- Internet Explorer (ltima verso)
- Mozilla Firefox (ltima verso)
- Google Chrome (ltima verso)

Figura 4

9
9
UNIDADE Conceitos Bsicos do HTML

Para criar nossos cdigos podemos utilizar qualquer editor de texto puro ou
algumas ferramentas prprias para o desenvolvimento Web
Microsoft Expression Web 4 ou
Brackets ou
Bloco de notas ou
NetBeans ou
Notepad++

Brackets
Esta ferramenta gratuita (desenvolvida pela Adobe), para baixar acesse o link
http://brackets.io/ (existe uma verso portable)

Figura 5

Notepad ++
Esta ferramenta gratuita, para baixar acesse o link http://notepad-plus-plus.
org/ (existe uma verso portable)

Figura 6

10
Bloco de Notas
Ferramenta que j vem com o sistema Windows, muito simples de utilizar mas
no ajuda em nada a criao do cdigo.

Figura 7

Verses
A verso mais significativa para nossa realidade foi o HTML 4.01 que foi
publicado como uma recomendao do W3C em 1999.

HTML 5 - sua especificao comeou em 2008 e est praticamente finali-

zada, porm a W3C ainda est analisando algumas tags.
Explor

W3C Brasil: https://goo.gl/VHQ5n

Sobre a W3C
O Consrcio World Wide Web (W3C) um consrcio internacional no qual
organizaes filiadas, uma equipe em tempo integral e o pblico trabalham juntos
para desenvolver padres para a Web. Liderado pelo inventor da web Tim Berners-
Lee e o CEO Jeffrey Jaffe, o W3C tem como misso Conduzir a World Wide
Web para que atinja todo seu potencial, desenvolvendo protocolos e diretrizes que
garantam seu crescimento de longo prazo.
Explor

Para mais informaes, contate: https://goo.gl/5JL1jK

11
11
UNIDADE Conceitos Bsicos do HTML

Marcas (tags)
Todo documento HTML possui marcadores, conhecidos e chamados como tags
, que so palavras inseridas entre os parnteses angulares (< e >), esses marcadores
so os comandos de formatao da linguagem. Um elemento formado por um
nome de marcador (tag), atributos, valores e filhos.

Exemplo de elemento nico:

<hr />

Exemplo de elemento composto:

<a href=http://www.cruzeirodosul.edu.br/>Universidade Cruzeiro do Sul</a>

<a> o marcador de abertura

</a> o marcador de fechamento

href o atributo onde est definido para qual pgina ser direcionado ao
receber o evento do clique.

Estrutura Bsica de um Documento

A estrutura bsica de um documento HTML possui as seguintes informaes:

Figura 8

Os marcadores HTML no so case sensitive, o que isso quer dizer?

Quer dizer que tanto faz escrevermos em maiscula ou minscula que o navegador
ir entender; <HTML>, <Html>, <html> ou <HtMl>.

12
 Existem vrios marcadores, mas para se construir uma pgina essencial e
recomendado que as seguintes tags estejam inseridas no documento.

Os marcadores bsicos so:

<html>: define o incio de um documento HTML e indica ao navegador que
todo contedo posterior deve ser tratado como uma srie de cdigos HTML.

<head>: define o cabealho de um documento HTML, que traz informaes

sobre o documento que est sendo aberto.

<body>: define o contedo principal, o corpo do documento. Esta a par-

te do documento HTML que exibida no navegador. No corpo podem-se
definir atributos comuns a toda a pgina, como cor de fundo, margens, e
outras formataes.

Cabealho
<title>: define o ttulo da pgina, que exibido na barra de ttulo de qual-
quer navegador.
<style type=text/css>: define formatao, para isso se utilizada marcado-
res de estilos chamado de css ou folha de estio
<script type=text/javascript>: define programao de certas funes em
pgina com scripts.
<link>: define ligaes da pgina com outros arquivos.
<meta>: define propriedades da pgina, como codificao de caracteres,
descrio da pgina, autor etc.

Corpo
Dentro do corpo podemos encontrar outros vrios marcadores que iro estruturar
o documento, todo elemento que ser exibido no browser deve ser inserido na tag
<body> por exemplo, vejamos algumas tags.
<br />: quebra de linha.
<table>: cria uma tabela (linhas so criadas com <TR> e novas clulas
com <TD>, j os cabealhos das colunas so criados com os marcadores
<Thead><TH> e os rodaps com <TFooter><TR><TD>).
<div>: determina uma diviso na pgina a qual pode possuir variadas for-
mataes.
<img />: imagem.
<a>: hiper-ligao para um outro local, seja uma pgina, um e-mail ou
outro servio.
<textarea>: caixa de texto (com mais de uma linha); estas caixas de texto
so muito usadas em blogs, elas podem ser auto selecionveis e conter ou-
tros cdigos a serem distribudos.

13
13
UNIDADE Conceitos Bsicos do HTML

Estrutura de um Documento utilizando Tags do HTML5

Figura 9
<!DOCTYPE html>: Especifica quais so as regras para a linguagem de
marcao, para que os navegadores processem o contedo corretamente.
Nesse caso estamos informando que utilizaremos uma marcao para hmtl5

Observem que dentro das tags <head> temos as tags <title>, <meta>, <link>
e <script>

Figura 10
<title>: define o ttulo da pgina, que exibido na barra de ttulo de qual-
quer navegador.
<meta>: define propriedades da pgina, como codificao de caracteres,
descrio da pgina, autor etc. O atributo name=description e content
so utilizados para adicionarmos informaes pertinentes a pgina, essas
informaes podem ser utilizados pelos mecanismos de busca para ento
retornar o resultado de pesquisa. O atributo charset utilizado para a confi-
gurao de caractere, muitos pases no possuem caracteres especiais como
acento agudo, circunflexo. O UTF-8 trata justamente esses itens, ou seja, se
a sua pgina for acessada no Japo, os caracteres com acentos no sero
trocadas por outra letra qualquer.

14
 <link>: define ligaes da pgina com outros arquivos. Nesse caso, a pgina
html est fazendo um ligao com outra pgina de formatao de estrutura,
conhecida com css.
<script>: define programao de certas funes em pgina com scripts. No
caso desse exemplo, estamos fazendo uma chamado para um arquivo somente
com programao javascript que ser executada na pgina html do navegador.

Figura 11
<body>: todo elemento que ser exibido no browser deve ser inserido nessa tag.

<header>:O elemento <header>representa um continer para a introduo

de um contedo ou para um conjunto de itens de navegao, geralmente so
acompanhadas das tags <h1> ... <h6>.

<article>:A tag <article> especifica contedo independente e autnomo.

Um <article> deve fazer sentido por conta prpria e deve ser possvel distri-
bu-lo de forma independente do resto do site.

<footer>: A marca <footer> define um rodap para um documento ou seo.

15
15
UNIDADE Conceitos Bsicos do HTML

Quando abrimos uma pgina HTML em um navegador, o navegador ir interpretar as tags,

Explor
ou seja, ir fazer uma anlise sinttica, definindo como cada parte do texto ser apresentada.
Um problema comum no desenvolvimento de pginas HTML desde o seu surgimento e
outras tecnologias como CSS, a compatibilidade entre os navegadores, ou seja, uma
pgina desenvolvida em HTML5 pode rodar somente no Chrome, por exemplo, ou aparecer
de um jeito no Internet Explorer e de outro no Firefox, tambm temos que tomar cuidado
quando falamos em dispositivos ou sistemas diferentes, como visualizar nossa pgina em
um celular. Nem todos os aparelhos esto aptos a rodar os cdigos atuais.
Motores de renderizao o mecanismo utilizado pelos navegadores para processar o
cdigo das pginas web, os principais motores dos principais navegadores so:
Webkit ( o mais compatvel com HTML 5) Safari, Chrome
Gecko Firefox
Trident Internet Explorer
Devemos sempre procurar deixar nossos cdigos compatveis com esses motores para que
possamos atingir o maior nmero possvel de usurios.
O WebKit uma ferramenta utilizada nos navegadores Safari e Chrome. O WebKit um
motor de renderizao.
Gecko um motor de layout desenvolvido pelo Projeto Mozilla. Trata-se de um motor com
cdigo aberto utilizado em aplicaes construdas pela Mozilla Foundation e pela Mozilla
Corporation, como o navegador mundialmente conhecido Firefox e o SeaMonkey.

Vejam um exemplo de utilizao de motor de renderizao.

div{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;

height:50px;
width: 150px;
text-align:center;
background-color: green;
}

Observe que para cada browser devemos utilizar o renderizador para que o
efeito final seja o mesmo. Essa codificao deve ser feita utilizando o css, isso no
um tag html.

16
 Figura 12

Resultado no Internet Explorer

Figura 13

Resultado no Google Chrome

Figura 14

17
17
UNIDADE Conceitos Bsicos do HTML

Resultado no Firefox

Figura 15
Explor

Todo desenvolvedor web deve se preocupar com essa formatao a fim de garantir que o
resultado do site seja igual independente do browser

18
Material Complementar
Indicaes para saber mais sobre os assuntos abordados nesta Unidade:

Sites
HTML5 - Tutorial
https://goo.gl/N0ra
HTML5 - Training
https://goo.gl/vHV69g

Vdeos
HTML5
Curso de HTML (aula 1) Iniciantes / bsico - Introduo e estrutura do html
https://youtu.be/5YdekrQOskM

19
19
UNIDADE Conceitos Bsicos do HTML

Referncias
SILVA, M. S. Construindo sites com CSS e (X)HTML: sites controlados por
folhas de estilo em cascata. So Paulo: Novatec, 2008.

SILVA, M. S. HTML 5: a linguagem de marcao que revolucionou a web. So

Paulo: Novatec, 2011.

20