CURSO

DESENVOLVIMENTO WEB
MDULO HTML

AUL
A

Introduo
Sobre o curso - o complexo mundo do front-end
"Ao a chave fundamental para todo sucesso"

Vivemos hoje numa era em que a Internet ocupa um espao cada vez
mais importante em nossas vidas pessoais e profissionais. O
surgimento constante de Aplicaes Web, para as mais diversas
finalidades, um sinal claro de que esse mercado est em franca
expanso e traz muitas oportunidades. Aplicaes corporativas,
comrcio eletrnico, redes sociais, filmes, msicas, notcias e tantas
outras reas esto presentes na Internet, fazendo do navegador
(o browser) o software mais utilizado de nossos computadores.
Esse curso pretende abordar o desenvolvimento de frontend (interfaces) para Aplicaes Web e Sites que acessamos por meio
do navegador de nossos computadores, utilizando padres atuais de
desenvolvimento e conhecendo a fundo suas caractersticas tcnicas.
Discutiremos as implementaes dessas tecnologias nos diferentes
navegadores, a adoo de frameworks que facilitam e aceleram
nosso trabalho, alm de dicas tcnicas que destacam um profissional
no mercado. HTML, CSS e JavaScript sero vistos em profundidade.
Alm do acesso por meio do navegador de nossos computadores,
hoje o acesso Internet a partir de dispositivos mveis representa um
grande avano da plataforma, mas tambm implica em um pouco
mais de ateno ao trabalho que um programador front-end tem que
realizar. No decorrer do curso, vamos conhecer algumas dessas
necessidades e como utilizar os recursos disponveis para atender
tambm a essa nova necessidade.

O curso e os exerccios
Esse um curso prtico que comea nos fundamentos de HTML e
CSS, incluindo tpicos relacionados s novidades das verses HTML5
e CSS3. Depois, abordada a linguagem de programao JavaScript,
para enriquecer nossas pginas com interaes e efeitos, tanto com
JavaScript puro quanto com a biblioteca jQuery, hoje padro de
mercado.
Os exerccios foram projetados para apresentar gradualmente ao
aluno quais so as tcnicas mais recomendadas e utilizadas quando

CURSO DESENVOLVIMENTO
WEB
HTML-CSS-JAVASCRIPT

CURSO
DESENVOLVIMENTO WEB
MDULO HTML

AUL
A

assumimos o papel do Programador front-end, quais so os

desafios mais comuns e quais so as tcnicas e padres
recomendados para atingirmos nosso objetivo, transformando
imagens estticas (os layouts) em cdigo que os navegadores
entendem e exibem como pginas da Web.
Os exerccios propostos so fundamentais para o acompanhamento
do curso, desde os mais iniciais, j que so incrementados no
decorrer das aulas. Igualmente importante a participao ativa nas
discusses e debates em sala de aula.
Bem vindo ao Curso Desenvolvimento Web da Escola Microplus.

CURSO DESENVOLVIMENTO
WEB
HTML-CSS-JAVASCRIPT

CURSO
DESENVOLVIMENTO WEB
MDULO HTML

AUL
A

Introduo a HTML e CSS

"Quanto mais nos elevamos, menores parecemos
aos olhos daqueles que no sabem voar."

1 Exibindo informaes na Web

A nica linguagem que o navegador consegue interpretar para a
exibio de contedo o HTML. Para iniciar a explorao do HTML,
vamos imaginar o seguinte caso: o navegador realizou uma
requisio e recebeu como corpo da resposta o seguinte contedo:
Mirror Fashion.
Bem-vindo Mirror Fashion, sua loja de roupas e acessrios.
Confira nossas promoes.
Receba informaes sobre nossos lanamentos por e-mail.
Navegue por todos nossos produtos em catlogo.
Compre sem sair de casa.
Para conhecer o comportamento dos navegadores quanto ao
contedo descrito antes, vamos reproduzir esse contedo em um
arquivo de texto comum, que pode ser criado com qualquer editor de
texto puro. Salve o arquivo como index.html e abra-o a partir do
navegador sua escolha.

Figura 1 - Criando o documento no Bloco de Notas

CURSO DESENVOLVIMENTO
WEB
HTML-CSS-JAVASCRIPT

CURSO
DESENVOLVIMENTO WEB
MDULO HTML

AUL
A

Figura 2 - Visualizando o documento no browser (navegador).

Parece que obtemos um resultado um pouco diferente do esperado,

no? Apesar de ser capaz de exibir texto puro em sua rea principal,
algumas regras devem ser seguidas caso desejemos que esse texto
seja exibido com alguma formatao, para facilitar a leitura pelo
usurio final.
Usando o resultado acima podemos concluir que o navegador por
padro:

Pode no exibir caracteres acentuados corretamente;

No exibe quebras de linha.

Para que possamos exibir as informaes desejadas com a

formatao, necessrio que cada trecho de texto tenha
uma marcao indicando qual o significado dele. Essa marcao
tambm influencia a maneira com que cada trecho do texto ser
exibido. A seguir listado o texto com uma marcao correta:

Figura 3 - Texto agora com as marcaes digitado no Bloco de Notas.

Reproduza o cdigo anterior em um novo arquivo de texto puro e

salve-o como index-2.html. No se preocupe com a sintaxe, vamos

CURSO DESENVOLVIMENTO
WEB
HTML-CSS-JAVASCRIPT

CURSO
DESENVOLVIMENTO WEB
MDULO HTML

AUL
A

conhecer detalhadamente cada caracterstica do HTML nos prximos

captulos. Abra o arquivo no navegador.

Figura 4 - Visualizando no navegador Internet Explorer.

Agora, o resultado exibido de maneira muito mais agradvel e

legvel. Para isso, tivemos que utilizar algumas marcaes do HTML.
Essas marcaes so chamadas de tags, e elas basicamente
do significado ao texto contido entre sua abertura e fechamento.
Apesar de estarem corretamente marcadas, as informaes no
apresentam nenhum atrativo esttico e, nessa deficincia do HTML,
reside o primeiro e maior desafio do programador front-end.
O HTML foi desenvolvido para exibio de documentos cientficos.
Para termos uma comparao, como se a Web fosse desenvolvida
para exibir monografias redigidas e formatadas pela Metodologia do
Trabalho Cientfico da ABNT. Porm, com o tempo e a evoluo da
Web e de seu potencial comercial, tornou-se necessria a exibio de
informaes com grande riqueza de elementos grficos e de
interao.
1. Sintaxe do HTML
O HTML um conjunto de tags responsveis pela marcao do
contedo de uma pgina no navegador. No cdigo que vimos antes,
as tags so os elementos a mais que escrevemos usando a
sintaxe <nomedatag>. Diversas tags so disponibilizadas pela
linguagem HTML e cada uma possui uma funcionalidade especfica.
No cdigo de antes, vimos por exemplo o uso da tag
representa o ttulo principal da pgina.

<h1>.

Ela

<h1>Mirror Fashion</h1>
Note a sintaxe. Uma tag definida com caracteres < e >, e seu nome
(H1 no caso). Muitas tags possuem contedo, como o texto do ttulo

CURSO DESENVOLVIMENTO
WEB
HTML-CSS-JAVASCRIPT

CURSO
DESENVOLVIMENTO WEB
MDULO HTML

AUL
A

("Mirror Fashion"). Nesse caso, para determinar onde o contedo

acaba, usamos uma tag de fechamento com a barra antes do
nome: </h1>.
Algumas tags podem receber atributos dentro de sua definio. So
parmetros usando a sintaxe de nome=valor. Para definir uma

<img> e,
imagem carregar, usamos o atributo src:
imagem, por exemplo, usamos a tag

para indicar qual

<img src="../imagens/casa_de_praia.jpg">
Repare que a tag img no possui contedo por si s. Nesses
casos, no necessrio usar uma tag de fechamento como antes
no h1.
2. Estrutura de um documento HTML
Um documento HTML vlido precisa seguir obrigatoriamente a
estrutura composta pelas tags <html>, <head> e <body> e a
instruo

<!DOCTYPE>. Vejamos cada uma delas:

A tag <html>
Na estrutura do nosso documento, antes de tudo, inserimos uma
tag <html>. Dentro dessa tag, necessrio declarar outras duas
tags: <head> e <body>. Essas duas tags so "irms", pois esto no
mesmo nvel hierrquico em relao sua tag "pai", que <html>.
<html>
<head></head>
<body></body>
</html>

A tag <head>
A tag <head> contm informaes sobre nosso documento que so de
interesse somente do navegador, e no dos visitantes do nosso site.
So informaes que no sero exibidas na rea do documento no
navegador.
A
especificao
obriga
a
presena
da
tag
de
contedo <title> dentro do nosso<head>, permitindo especificar
o ttulo do nosso documento, que normalmente ser exibido na barra
de ttulo da janela do navegador ou na aba do documento.
Outra configurao muito utilizada, principalmente em documentos
cujo contedo escrito em um idioma como o portugus, que tem

CURSO DESENVOLVIMENTO
WEB
HTML-CSS-JAVASCRIPT

CURSO
DESENVOLVIMENTO WEB
MDULO HTML

AUL
A

caracteres como acentos e cedilha, a configurao da codificao

de caracteres, chamado deencoding ou charset.
Podemos configurar qual codificao queremos utilizar em nosso
documento por meio da configurao de charset na tag <meta>.
Um dos valores mais comuns usados hoje em dia o UTF-8, tambm
chamado de Unicode. H outras possibilidades, como o latin1, muito
usado antigamente.
O UTF-8 a recomendao atual para encoding na Web por ser
amplamente suportada em navegadores e editores de cdigo, alm
de ser compatvel com praticamente todos os idiomas do mundo. o
que usaremos no curso.
<html>
<head>
<title>Mirror Fashion</title>
<meta charset="utf=8">
</head>
<body>
</body>
</html>

A tag <body>
A tag <body> contm o corpo do nosso documento, que exibido pelo
navegador em sua janela. necessrio que o <body> tenha ao menos
um elemento "filho", ou seja, uma ou mais tags HTML dentro dele.
<html>
<head>
<title>Mirror Fashion</title>
<meta charset="utf-8">
</head>
<body>
<h1>A Mirror Fashion</h1>
</body>
</html>
Nesse exemplo, usamos a tag

<h1>, que indica um ttulo.

CURSO DESENVOLVIMENTO
WEB
HTML-CSS-JAVASCRIPT

CURSO
DESENVOLVIMENTO WEB
MDULO HTML

AUL
A

A instruo DOCTYPE
O DOCTYPE no uma tag HTML, mas uma instruo especial. Ela
indica para o navegador qual verso do HTML deve ser utilizada
para renderizar a pgina. Utilizaremos <!DOCTYPE html>, que
indica para o navegador a utilizao da verso mais recente do HTML
- a verso 5, atualmente.
H muitos comandos complicados nessa parte de DOCTYPE que
eram usados em verses anteriores do HTML e do XHTML. Hoje em
dia, nada disso mais importante. O recomendado sempre usar a
ltima
verso
do
HTML,
usando
a
declarao
de DOCTYPE simples:
<!DOCTYPE html>
3. Tags HTML
O HTML composto de diversas tags, cada uma com sua funo e
significado. O HTML 5, ento, adicionou muitas novas tags, que
veremos ao longo do curso.
Nesse
momento,
vamos
focar
representam ttulos, pargrafo enfase.

em

tags

que

Ttulos
Quando queremos indicar que um texto um ttulo em nossa pgina,
utilizamos as tags de heading em sua marcao:
<h1>Mirror Fashion.</h1>
<h2>Bem-vindo Mirror Fashion, sua loja de roupas e
acessrios.</h2>
As tags de heading so tags de contedo e vo de
seguindo a ordem de importncia, sendo
mais importante, e

ttulo principal, o

<h6> o ttulo de menor importncia.

Utilizamos, por exemplo, a tag

pgina, e a tag
do documento.

<h1> o

<h1> a <h6>,

<h1> para

o nome, ttulo principal da

<h2> como subttulo ou como ttulo de sees dentro

A ordem de importncia, alm de influenciar no tamanho padro de

exibio do texto, tem impacto nas ferramentas que processam
HTML. As ferramentas de indexao de contedo para buscas, como o
Google, Bing ou Yahoo! levam em considerao essa ordem e
relevncia. Os navegadores especiais para acessibilidade tambm

CURSO DESENVOLVIMENTO
WEB
HTML-CSS-JAVASCRIPT

CURSO
DESENVOLVIMENTO WEB
MDULO HTML

AUL
A

interpretam o contedo dessas tags de maneira a diferenciar seu

contedo e facilitar a navegao do usurio pelo documento.

Pargrafos
Quando exibimos qualquer texto em nossa pgina, recomendado
que ele seja sempre contedo de alguma tag filha da tag <body>. A
marcao mais indicada para textos comuns a tag de pargrafo:
<p>Nenhum item na sacola de compras.</p>
Se voc tiver vrios pargrafos de texto, use vrias dessas
tags <p> para separ-los:
<p>Um pargrafo de texto.</p>
<p>Outro pargrafo de texto.</p>

CURSO DESENVOLVIMENTO
WEB
HTML-CSS-JAVASCRIPT

CURSO
DESENVOLVIMENTO WEB
MDULO HTML

AUL
A

Atividade
Crie a seguinte pgina web para exibir o seguinte contedo:

Minha 1 pgina Web

Nome e n
Escola Microplus Educao Profissional
Hoje os alunos da Escola Microplus do curso de Desenvolvimento Web iniciaram a
edio de pginas web, utilizando a programao HTML.
Desta forma, em breve eles sero:

Web Designers

10

CURSO DESENVOLVIMENTO
WEB
HTML-CSS-JAVASCRIPT