3
Desenvolvimento web
www.triway.com.br
O HTML sigla que significa HyperText Markup Language, é uma linguagem de
marcação de hipertexto, criado por Tim Benners-lee por volta de 1990, e passou por vári-
as revisões e versões. Hoje o HTML se encontra na versão 5 onde ele sofreu várias apri-
morações facilitando ainda mais a vida dos desenvolvedores front-end.
O HTML é mantido pela W3C - World Wide Web Consortium ,que é um consórcio
formado por empresas e instituições educacionais, fundada em 1994, onde seu objetivo é,
estabelecer padrões para várias áreas e desenvolvimento web. Em 1997 o grupo lançou o
HTML 4, e praticamente junto, poucos meses depois, foi publicado o XML 1. Em 1998
foi iniciado a reescrita do HTML em XML, o que originou o XHTML 1 que foi lançado em
1999, e em Maio de 2001 foi publicado o XHTML 1.1.
Como o HTML ficou bastante tempo estagnado sem nenhum tipo
de melhoria ou novas versões, em 2004 foi fundada a WHATWG -
Web Hypertext Application Technology Working Group - que era
composta por membros do XForms, um grupo que trabalhava em
paralelo com a W3C, mas voltada para formulários em HTML. O
WHATWG é o grupo de trabalho tecnológico de aplicações de hi-
pertexto para Web. Trata-se de um grupo livre, não oficial e de
colaboração dos desenvolvedores de navegadores e de seus inter-
essados. Mas em 2006 Tim Benners-lee reconheceu o grande feito
pelo pessoal da WHATWG e anunciou que eles deveriam trabalhar
juntos de forma unificada, foi a partir daí que começou os primei-
ros passo para o HTML 5.
Introdução
| Módulo I
H
T
M
L
Hyper
Text
Markup
Language
Introdução ao HTML
Linguagem de Marcação de Hipertexto

4
Desenvolvimento web
www.triway.com.br
Estrutura HTML
Todo documento HTML deve conter as extensões html ou htm. Ele pode ser escrito por
qualquer editor de texto, como o bloco de notas por exemplo. Como já mencionado o HTML,
não é uma linguagem de programação, e sim um linguagem de marcação de hipertexto.
Para escrevermos documentos HTML usamos como ferramenta IDE ( Integrat-
ed Development Environment ou Ambiente Integrado de Desenvolvimento),
que é um programa de computador que reúne características e ferramentas de apoio ao
desenvolvimento de software com o objetivo de agilizar este processo. Existe várias IDE´s
muito boas no mercado, algumas pagas e outras distribuídas gratuitamente. No nosso cur-
so iremo usar o Notepad ++.
Todo documento HTML deve obrigatoriamente obedecer um padrão de estrutura
como na imagem abaixo, isso se deve para que seja executado corretamente pelo navegador.
| Módulo I
Estrutura do HTML
IDE
Integrated Development Environment
Ambiente Integrado de Desenvolvimento

5
Desenvolvimento web
www.triway.com.br
1 | <!doctype html> : O doctype não é uma tag HTML, ele é uma instrução necessária
para que o navegador saiba que tipo e versão de documento ele deverá executar. O doc-
type deve ser escrito na primeira linha do seu documento HTML e antes da tag html. Em
versões anteriores, era necessário referenciar o DTD diretamente no código do Doctype.
Com o HTML5, a referência por qual DTD utilizar é responsabilidade do Browser.
2 |html: esta tag indica que ali começa o HTML. O atributo LANG é necessário para que
os user-agents saibam qual a linguagem principal do documento.
Lembre-se que o atributo LANG não é restrito ao elemento HTML, ele pode ser uti-
lizado em qualquer outro elemento para indicar o idioma do texto representado. Todas as
outras tags e elementos devem estar dentro desta tag.
3 | head: O head funciona como o cabeçalho do documento HTML. É nele que você in-
sere arquivos de folha de estilo (CSS), javascript e metadados. Metadados são informações
sobre a página e o conteúdo ali publicado. O título da página ou do site, é inserido dentro
desse elemento usando o elemento <title>, que é escrito com a tag <title> … </title>.
4 | body: Esta tag é responsável pelo corpo da página HTML, ou seja, tudo que estiver
dentro dela, será exibido na tela do computador.
Esta é a estrutura base de um documento HTML. Essa estrutura deve ser sempre
respeitada, isso evita de sua página não ser executada, ou apresentar erros no navegador.
| Módulo I
Estrutura do HTML
1 – doctype
2 - html
3 - head
4 - body

6
Desenvolvimento web
www.triway.com.br
Tags e Elementos HTML
O que são TAGS?
E o que são Elementos?
Tag´s HTML
Tags e Elementos
HTML
Tags são rótulos usados para informar ao navegador como deve ser apresentado o
website. Toda tag deve ser escrita dentro de < e >. Existe dois tipos de tag: as de abertura
de um elemento: <nome da tag>, e as de fechamento: </ nome da tag>.
Sempre que uma tag for aberta, ele deve ser fechada, isso mostra para o navegador
onde você quer a aquela formatação ou elemento termine.

7
Desenvolvimento web
www.triway.com.br
Elementos são componentes de um arquivo HTML. Elementos em HTML são compostos
por tags.
| Módulo II
Elementos HTML
<html>
<html>
...
</html>
TAGS
Elementos
O que são TAGS?
E o que são Elementos?

8
Desenvolvimento web
www.triway.com.br
O Elemento head, como muitos dizem, é a parte inteligente do documento HTML. É
nele, que inserimos, arquivos externos como CSS e JavaScript, Metadatas, que auxiliam os
motores de buscas a indexarem sua página, o Título, chave de caracteres etc. O elemento
head é formado pela tag head (<head> </head>), e ele deve ser escrito no topo do docu-
mento, dentro da tag <html> </htm>.
Como vimos em capítulos anteriores, o documento HTML possui um a estrutura
própria e que deve ser rigidamente obedecida, então a forma correta de se inserir o ele-
mento head é como no exemplo a baixo
<!doctype html>
<html lang=”pt-br”>
<head>
<title>Meu site - Página Principal</title>
...
</head>
…
Note que como dissemos o elemento head é o primeiro elemento inserido dentro do
elemento HTML.
Outra regra muito importante é do elemento title (<title> … </title>). Como o
próprio nome mostra, ele é o responsável pelo título da página, que é exibido na barra do
navegador. Esse elemento deve estar obrigatória mente dentro do elemento head.
Elemento head
| Módulo II
Elemento<head>
<!doctype html>
<head>
<title>Meu site - Página
Principal</title>
...
</head>
…

9
Desenvolvimento web
www.triway.com.br
Elementos de parágrafos
Parágrafos são muito usados em textos, tanto em páginas web como em docu-
mentos de texto etc. Eles separam assuntos e deixam os textos mais organizados. No
HTML, ele possui a mesma função. Um elemento de parágrafo é constituído pela tag
<p> … </p>.
Veja um exemplo:
<p>
Este é um parágrafo.
<p>
<p>
Este é outro parágrafo.
</p>
Parágrafos e Headers
<p> ... </p>
<p>
Essa marcação informa
um novo parágrafo
</p>
Essa marcação informa o
término do parágrafo

10
Desenvolvimento web
www.triway.com.br
O Resultado no navegado é esse:
Note que o resultado é como um parágrafo de um documento de texto comum. Ele
salta uma linha e começa o outro parágrafo.
| Módulo II

11
Desenvolvimento web
www.triway.com.br
Headers
Os headers são maracadores, muito usados em títulos de páginas, são escritos com
a tag <h1> … </h1> e vai da tag <h1> até a <h6>. Essa numeração corresponde ao nível
de importância do título na página, ou seja, o <h1> é o mais importante e <h6> é o menos
importante.
Dica: Sempre coloque o título da página com a tag <h1>, pois como ele simboliza o
título mais importante, os mecanismos de busca o indexa como a sua tal importância.
Use <h1> para títulos, <h2> para subtítulos, <h3> para nomes de blocos (exemplo: menu).
Parágrafos e Headers
<h2>Este é um header</h2>
Este é um header
Este é um header
Este é um header
Este é um header
Este é um header
Este é um header

12
Desenvolvimento web
www.triway.com.br
| Módulo II
Elementos de formatação
No HTML existe elementos de formatação de texto, assim como nos programas de
edição de texto, como o Microsoft Word. Formatação como itálico, negrito, texto à esquer-
da, centralizado, justificado. Algumas dessas formatações podem ser feitas de forma mais
semântica pelo css, mas iremos ver alguns desses elementos para que você conheça um
pouco mais.
Itálico - <i> … </i> Para deixar uma palavra, uma frase ou um parágrafo em itálico,
usamos o elemento <i> ... </i>. Exemplo:
<i> Este parágrafo esta em itálico </i>
Veja o resultado no navegador.
Elementos de Marcação e Formatação
<p>
Sed ut perspiciatis unde <b>omnis iste</b> natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
<i>inventore</i> veritatis et quasi architecto beatae vitae dicta sunt
explicabo. Nemo enim ipsam <strong>voluptatem</strong> quia voluptas sit
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui
ratione voluptatem sequi nesciunt. <span style=“color:red”>Neque porro</span>
quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore
magnam aliquam quaerat voluptatem.
</p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,
qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non
numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
voluptatem.

13
Desenvolvimento web
www.triway.com.br
Negrito - bold <b> … </b>
Para se fazer o mesmo com negrito usa-se o elemento bold que é escrito com as tags <b>
… </b>. Veja o exemplo.
<b>Este parágrafo esta em Negrito.</b>
Veja o Resultado no navegador.
Um outro elemento que tem o mesmo resultado do elemento bold é o elemento strong
<strong> ... </strong>. Exemplo.
<strong> Este parágrafo esta com o elemento strong. </strong>
Veja uma comparação.
Note que a diferença e nenhuma. Geralmente se dá propriedades diferentes para
cada elemento desse no CSS, diferenciando um do outro, visualmente falando.
| Módulo II

14
Desenvolvimento web
www.triway.com.br
| Módulo II
span - <span> … </span>
O elemento span <span> … </span>, visualmente ele não altera em nada na pala-
vra ou no texto que ele esta marcando, mas geralmente usa-se ele para fazer alguma mar-
cação no texto, como cor por exemplo. Ele pode ser usado para agrupar elementos para
fins de estilo (usando os atributos class ou id ), ou para compartilhar valores de atributos
como lang. Ele deve ser usado somente quando nenhum outro elemento semântico for
apropriado. <span> é muito parecido com o elemento <div> , entretando <div> é um
elemento de nível de bloco enquanto <span> é um elemento em linha.
Veja um exemplo.
Sem nenhuma propriedade.
<span> Este parágrafo esta dentro de um span </span>
Com propriedade
<span style=”color:blue”> Este parágrafo esta dentro de um span com uma pro-
priedade</span>
Veja o Resultado.
Mais alguns elementos de formatação
No html, existe ainda muito mais elementos de marcação/formatação de texto, e
com a chegada do html 5 esses elementos aumentaram de número. Vamos citar alguns
para que você fixe na mente. Todos eles estão no nosso guia de referência.
em - <em> … <em>
Funciona como o itálico, ele dá enfânse à alguma parte do texto.

15
Desenvolvimento web
www.triway.com.br
| Módulo II
cite - <cite> … </cite>
Muito usado para citações, como nome de autores, músicas, filmes, frase de alguém etc.
pre - <pre> … </pre>
Este elemento é usado para mostrar um bloco de código.
small - <small> … </small>
O elemento small ele apresenta o texto com o tamanho da fonte um pouco menor.
Esses são alguns elementos do html, veja a lista completa no guia de referência.

16
Desenvolvimento web
www.triway.com.br
Atributos
<p style=“color:red;”>
Este é um parágrafo para a aula sobre atributos
</p>
Este é um parágrafo para a aula sobre atributos
Elementos em HTML têm atributos , que são valores adicionais que configuram
os elementos ou ajustam seu comportamento de várias maneiras para cumprir os critérios
que os usuários querem.
No HTML existem muitos atributos, mas iremos citar o mais usados. Todos os
atributos devem seguir a seguinte sintaxe: nome=”valor”, onde nome é o nome do atribu-
to seguido do sinal de igual ( = ), e valor é o valor da propriedade dentro de aspas, duplas
ou simples.
alt | Altenative text
O atributo alt, é usado em elementos de imagem. Ele exibe um texto no caso de
ocorrer algum erro e a imagem não for exibida.
title | Título
ítulo é bastante usado em descrições de elemento. Sua função é exibir um texto em
forma de caixa quando se passa o mouse em cima do elemento.
src | Url de arquivos
Este atributo tem como função informar o endereço url de arquivo externos que serão
inseridos no documento HTML, como imagens, arquivos de áudio e vídeo, scripts etc.
Atributos

17
Desenvolvimento web
www.triway.com.br
| Módulo II
rel | Relações entre links
O atributo rel especifica a relação entre o objeto de destino para o objeto link.
language | Tipos de script
Este atributo é usado basicamente quando se irá inserir um bloco ou arquivo de
script no HTML. Ele especifica o tipo de script que esta sendo inserido.
lang | idioma do conteúdo
Como já vimos, o atributo lang é usado para informar o idioma da página html. Mas
este atributo não é exclusivo da tag <html>. Ele pode ser usado em qualquer tag ou bloco
do seu documento HTML exercendo a mesma função, de informar o idioma do conteúdo
do bloco, parágrafo etc.
id | Identificação de elementos únicos
Um dos atributos que mais se usa em documentos HTML. Este atributo identifica
um elemento com um nome que você pode criar. É como você pegar um elemento do códi-
go e dar um nome a ele. Muito útil pois com essa identificação, você pode formatá-lo pelo
CSS, criando regras para aquele especifico elemento.
class | Formatações mais amplas
O atributo class, é bastante usado para formatação em css para elementos que pos-
suem propriedades em comum.
href | Linkando
O href serve exclusivamente para linkar. Ele faz a linkagem entre páginas, arquivos,
mídia, arquivo para download etc.
height | Altura
O atributo height é usado quando precisamos especificar altura de elementos. Pode
ser de parágrafos, blocos, imagens etc.
width | Largura
Tem a mesma funcionalidade do height mas ele é responsável pela largura.
Esse são os atributos mais usados, que praticamente você irá se cansar de escrever,
mas o HTML possui muito mais atributos que está no guia de referência. Nosso objetivo
aqui é deixar bem claro o que é um atributo e como usá-lo.

18
Desenvolvimento web
www.triway.com.br
| Módulo II
O uso de imagens na web é essencial, tanto para deixar uma informação mais clara
como para deixar sua página mais bonita e atraente, afinal, uma imagem vale por mil pala-
vras. Para inserir uma imagem no documento HTML usa-se a tag <img />. um diferencial
que essa tag tem das outras tags é que ela é aberta e fechada numa tag só. Você não usa
<img> </img> e sim <img />.
Para criar um elemento de imagem é preciso usar a tag <img /> mais o atributo src,
que como vimos no capítulo passado tem a função de inserir a url de um arquivo externo.
Veja o exemplo:
<img src=”/images/minha-imagem.jpg” />
Outros atributos podem ser usados em imagens como id, class, heigth, width, alt
e title. O atributo alt é obrigatório em imagens pois além de auxiliar os mecanismos de
Imagens
<img src=“url da image” />
Imagens

19
Desenvolvimento web
www.triway.com.br
busca como o Google indexar sua imagem, ele mostra uma texto quando essa imagem não
estiver disponível para exibição. Use o atributo title, para uma breve descrição da imagem,
isso também ajuda os robôs do Google e width e height para redimesionar a imagem, aju-
stando a tela e ao texto.
Exemplo:
<img src=”imagens/minha-imagem.jpg” alt=”Jogador fez o gol da vitória do time
tal” title=”gol do jogador que garantiu a vitória do time tal sobre o outro tima”
width=”150px” height=”160px” id=”image” class=”bordada”/>
Os valores dos atributos width e height, podem ser em pixels ou em porcentagem.
Qualquer arquivo de imagem pode ser inserido no documento html como, jpg, png,
gif, bmp etc. Para evitar problemas com a exibição de suas imagens, é bom você sempre
prestar atenção em pequenos detalhes que acarretam erros de exibição.
Nome do arquivo.
Nos endereços da web ou url, não são permitidos caracteres especiais, acentos e es-
paços, como ç, ~, ´. Colocar esse tipo de caracteres nos nomes dos arquivos irá gerar erro
de exibição, ou seja, sua imagem não será exibida. Sempre coloque o nome dos arquivos
com letras minúsculas e no lugar espaço como hífen (-), e a extensão correta do arquivo
(.jpg ou .jpeg).
Exemplo:
<img src=”imagens/minha-imagem.jpg” />
Sempre use endereços reais.
Sempre prefira colocar endereços absolutos das imagens, e não a navegação
entre as pastas.
Exemplo
<img src=”../images/minha-imagem.jpg” />
<img src=”http://www.meusite.com.br/imagens/minha-imagem.jpg” />
Confira o tamanho das imagens
Sempre que você navega na internet, quando você entra num site, você precisa es-
perar o conteúdo carregar. Quando se usa imagens muito grandes, de alta resolução esses
sites demoram e muito para carregar. Recorte as imagens, para o tamanho que deseja
apresentar na tela, use imagens grandes apenas quando realmente for necessário, como
uma galeria de imagens.
| Módulo II

20
Desenvolvimento web
www.triway.com.br
Links são âncoras ou ligações entre páginas, imagens arquivos etc. Um link é escrito
com a tag <a> </a>, e pode receber vários atributos, como href, alt, title, taregt, rel, id,
class. Um link deve seguir a seguinte sintaxe.
<a href=”endereço para onde vai o link”>Meu link</a>
O atributo href é obrigatório, pois é ele que vai informar para onde o link irá dire-
cionar o usuário.
Outros atributos como id e class são usados para a formatação com CSS. Um atribu-
to que é muito usado em links é o atributo target, que informa o navegador onde ele deverá
abrir o a url informada no atributo href.
O atributo target possui 5 valores :
_blank: Abre a url em uma nova janela, guia ou aba.
_self: Abre a url na mesma janela, guia ou aba onde foi clicada.
_parent: Abre a url no fameset pai.
_top: Abre a url no corpo inteiro da janela.
framename: Abre a url em um quadro chamado.
Exemplos:
Este exemplo vale para os valores _blank, _self, _parent, _top.
<a href=”http://www.3way.com.br” target=”_blank” >Meu link</a>
Este exemplo vale para o framename.
<a href=”http://www.3way.com.br” target=”nomedoframe”>Meu link cno frame</a>
Links
| Módulo II
Links
<a href=“url destino”>
Nome do link
</a>

21
Desenvolvimento web
www.triway.com.br
Listas
<ol>
<li>Item 01</li>
<li> Item 02</li>
...
</ol>
Ordenadas
<ul>
<li>Item 01</li>
<li> Item 02</li>
...
</ul>
Não ordenadas
Listas
As lista são bem úteis no html. Com elas podemos listar de forma organizada, por
exemplo, uma lista de links e páginas. As listas são muito usadas para criar menus de
navegação, tanto na vertical como na horizontal. Existem dois tipos de listas as ordenadas
e as não ordenadas, onde uma ordena os itens numerando-as e a outra não.
Listas Ordenadas
Listas ordenadas são escritas com as tags <ol> … </ol>, e seus itens de lista com a
tag <li> … </li>.
Exemplo:
<ol>
<li>Item 01</li>
<li>Item 02</li>
<li>Item 03</li>
</ol>
Veja o resultado no navegador
Veja que foi criada uma lista ordenada de 1 a 3.
| Módulo II

22
Desenvolvimento web
www.triway.com.br
Listas não ordenadas
As listas não ordenadas sege a mesma semântica, porém ela usa outra tag. Para lis-
tas não ordenadas é usada a tag <ul> … </ul> no lugar <ol> … </ol>. Os item mantém
a mesma tag <li> … </li>.
Exemplo:
<ul>
<li>Item 01</li>
<li>Item 02</li>
<li>Item 03</li>
</ul>
Veja o resultado no navegador
As listas dos dois tipos podem receber os atributos id e class, e seus itens também.
Exemplo:
<ul id=”menu” class=”azul”>
<li id=”home”>Item 01</li>
<li id=”sobre” class=”page”>Item 02</li>
<li id=”contato” class=”page”>Item 03</li>
</ul>
Esses atributos são importantes para formatar e estilizar os elementos com o CSS.
Veremos isso mais adiante.
| Módulo II

23
Desenvolvimento web
www.triway.com.br
| Módulo II
Elemento div
Blocos
Elemento Div
Div é uma seção de uma página HTML. Como se uma página tivesse blocos e cada
bloco fosse formado por uma div. Por exemplo, a barra lateral esquerda é um bloco forma-
do por div. O conteúdo no centro da página fica dentro de um bloco de conteúdo. A barra
lateral a direita também é um bloco. Podemos concluir que cada parte do site é um bloco e
que para criarmos um bloco usamos div. O elemento div é escrito é escrito com a tag <div>
… </div> e pode receber os atributos id e class. Veja um exemplo:
<div class=”barra-lateral” style=”border: 1px solid #ccc;”>
<ul>
<li><a href=”index.html”>Home</a></li>
<li><a href=”sobre.html”>Quem somos</a></li>
<li><a href=”contato.html”>Contato</a></li>
</ul>
</div>
<div class=”conteudo” style=”border: 1px solid #ccc;”>
<p>
Aqui fica o conteúdo da página.
</p>
</div>

24
Desenvolvimento web
www.triway.com.br
Veja o resultado no navegador:
Como podemos ver div é um bloco. No exemplo ele esta um em cima do outro, pois
ainda não foi inserida nenhuma formatação com CSS nele, e por padrão a div ocupa a tela
do navegador colocando um bloco sobre o outro.

25
Desenvolvimento web
www.triway.com.br
A muito tempo atrás, os sites eram feitos sobre tabelas. Isso ocorria porque ainda
não existia uma maneira de formatar e estilizar páginas HTML. Com o lançamento do
XHTML4 e o CSS esse quadro foi mudado e até hoje usa exclusivamente blocos (div) para
se criar uma página HTML, extinguindo as tabelas dos sites. Mesmo com essa evolução, as
tabelas ainda existem no HTML, e hoje ela tem outra função que é bastante usada, princi-
palmente para a exibição de tabelas de cadastros, produtos etc.
As tabelas são escritas com a tag <table> … </table>, e ela possuem linhas e colu-
nas. As linhas são escritas com a tag <tr> … </tr> e as colunas com a tag <td> … </td>.
As colunas ficam dentro das linhas. Veja um exemplo de estrutura básica de uma tabela.
<table border=”1”>
<tr>
<td>coluna 01 - linha 01</td>
</tr>
<tr>
</tr>
| Módulo II
Tabelas
Tabelas

26
Desenvolvimento web
www.triway.com.br
| Módulo II
<tr>
</tr>
</table>
As tabelas podem receber os atributos id, class, border, width, height, colspan, row-
span tanto na tabela (<table>), quanto em suas linhas e colunas (<tr>, <td>).
* rowspan - especifica quantas linhas a célula será mesclada
* colspan - especifica quantas colunas a célula será mesclada

27
Desenvolvimento web
www.triway.com.br
Tabelas
<table>
<thead>
<tr>
<th>Código</th>
<th>Descrição</th>
<th>Preço</th>
</tr>
</thead>
<tbody>
<tr>
<td>134</td>
<td>Produto 01</td>
<td>15,00</td>
</tr>
...
</tbody>
</table>
Cabeçalhos em Tabelas
As tabelas possuem cabeçalhos, não é obrigatório, mas deixa sua tabela mais organ-
izada quando você informa o nome das colunas.
Para inserir um cabeçalho em uma tabela, usamos a tag <thead> … </thead>, e
sua colunas recebem uma nova tag <th></th>, mas continuam dentro de uma linha.
Exemplo:
<table>
<thead>
<tr>
<th>Nome</th>
<th>Endereço</th>
<th>Telefone</th>
</tr>
</thead>
….
Ao inserir um cabeçalho na tabela, você deve informar o corpo da tabela. Para isso
usamos a tag <tbody> … </tbody>. Veja um exemplo de como uma tabela deve ser escri-
ta, de forma semântica.

28
Desenvolvimento web
www.triway.com.br
| Módulo II
<table border=”1”>
<thead>
<tr>
<th width=”250”>Nome</th>
<th width=”100”>Telefone</th>
<th width=”250”>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<th>João</th>
<th>3252-1141</th>
<th>joao@joao.com.br</th>
</tr>
<tr>
<th>José</th>
<th>9514-8521</th>
<th>jose@jose.com.br</th>
</tr>
<tr>
<th>Paulo</th>
<th>9585-7414</th>
<th>paulo@paulo.com.br</th>
</tr>
</tbody>
</table>

29
Desenvolvimento web
www.triway.com.br
| Módulo II
Meta tags, são tags inserida no cabeçalho do documento HTML com informações rel-
acionadas aquela página, como por exemplo, descrição do conteúdo, autor, palavras chaves,
encode de caracteres.
É muito importante usar as meta tags, pois elas ajudam e muito a indexação do site
nos motores de busca como Google, Bing etc. As meta tags são escritas com a tag <meta>
e não possui tag de fechamento, ou seja, como vimos, o que acontece com a tag de imagem
(<img>), ela é fechada na mesma tag que é aberta.
Toda meta tag deve ter dois atributos que são atributo name e o atributo content.
O atributo name especifica o nome da meta tag, como autor, keyword que são palavras
chaves, todas separadas por vírgula e description que é uma descrição do documento. Já o
atributo content ele é responsável pelo conteúdo mesmo da tag. Por exemplo, na meta tag
que o atributo name for autor (name=”author”) o atributo content deve conter o nome do
autor (content=”José Felipe”). Assim como todas as informações que estão no elemento
head, as meta tags não são vistas no navegador, ou no site, mas podem ser vistas no código
fonte do site. Veja um exemplo:
<meta charset=”utf-8” />
<meta name=”author” content=”3Way EAD” />
<meta name=”description” content=”Aula sobre meta tags HTML - 3Way EAD” />
<meta name=”keywords” content=”aula de meta tags, meta tags, html, 3way,
ead” />
A meta tag charset
Uma meta tag diferente que é obrigatória em todo documento HTML é a meta tag
charset. Ela é responsável de informar ao navegador qual tabela de caracteres usar. Sem-
pre use a utf-8, pois essa tabela usa caracteres especiais e acentos. Exemplo.
Meta tags

30
Desenvolvimento web
www.triway.com.br
Comentário em HTML

Comentários
Os comentários em HTML são bastante importantes e muito usados como identi-
ficadores de elementos. Ajuda muito se você usá-los para informar quando começa um
elemento e quando termina, isso para que você não se perca em meio à um monte de tags
e elementos parecidos.
Para fazer um comentário em HTML usamos a seguinte sintaxe:

Regra básica e obrigatória:
Abre-se um comentário com . Lembrando que deve haver três hífens
na abertura e dois no fechamento.
Pode-se usar um comentário com mais de uma linha, usar acentos, e caracteres especiais.

31
Desenvolvimento web
www.triway.com.br
Formulários
<form action=“php.php”>
...
</form>
| Módulo II
Formulários
Formulários são um dos elementos mais usados na web. De pequenos formulários
de contato a extensos cadastros em lojas virtuais.
Todo formulário e composto pelo elemento form <form> </form>. Todos os cam-
pos que estão dentro dele serão enviados para o servidor. Para que o formulário seja pro-
cessado, os dados devem ser enviados a um script externo, escrito por alguma linguagem
de programação como php, asp, ruby etc. Para informar o script que irá manipular esses
dados, usamos o atributo action no formulário. Exemplo.
<form action=”url do script”>
...
</form>
A tag input

Existem vários tipos de inputs, e cada um se comporta de maneira diferente, o que
diferencia cada um desses inputs é o atributo type, que pode ser qualquer um dos abaixo:
• text - Cria uma caixa de texto de uma linha.
• password - Cria uma caixa de texto de uma linha escondendo os caracteres digi-
tados.

32
Desenvolvimento web
www.triway.com.br
• checkbox - Cria uma caixa que assume dois estados: checado e “deschecado”. Em
conjunto com o atributo name é possível que se crie um grupo de checkboxes no
qual uma ou mais checkboxes sejam “checados”.
• radio - Cria uma caixa que assume dois estados: checado e “deschecado”. Em con-
junto com o atributo name é possível que se crie um grupo de radios no qual apenas
um radio seja “checado”.
• button - Cria um botão e através do atributo value definimos o texto do botão.
• submit - Cria um botão para o envio do formulário e através do atributo value
definimos o texto do botão.
• file - Cria um botão que, ao ser clicado, abre uma caixa de diálogo para a escolha de
um arquivo no computador do usuário.
• reset - Cria um botão que descarta todas as alterações feitas dentro de um for-
mulário. Através do atributo value definimos o texto do botão.
• image - Cria um botão para o envio do formulário e deve ser utilizado em conjunto
com o atributo src para que uma imagem de fundo seja utilizada no botão.
• hidden - Cria um elemento que não fica visível para o usuário, porém pode conter
um valor que será enviado pelo formulário.
| Módulo II
Formulários
<input /> • text
• password
• hidden
• checkbox
• radio
• submit
• button
• image
• file
• reset
<select>
<option>...</option>
</select>
<textarea cols=“20” rows=“5”>
</textarea>

33
Desenvolvimento web
www.triway.com.br
Select
O elemento select ou combobox como muitos chamam, permite ao usuário escolher
uma ou mais opções de uma lista.
Veja o exemplo:
<select>
<option value=”Item 01”>Item 01</option>
</select>
Neste caso você pode escolher apenas uma opção. Para você poder selecionar mais de
uma opção, basta inserir o atributo multiple, assim agora podemos seleciona várias opções.
<select multiple=”multiple”>
</select>
Outra possibilidade que o select te permite é separar opções por grupos. Exemplo:
<select multiple=”multiple”>
<optgroup label =” Grupo de Itens 01 “>
</optgroup>
<optgroup label =” Grupo de Itens 02 “>
</optgroup>
</select>
Label
As labels são usadas para informar nome de campos, permitindo ao usuário saber
quais dados devem ser informados naquele campo.
| Módulo II

34
Desenvolvimento web
www.triway.com.br
| Módulo III
Exemplo:
<label>Nome:</label>
<input type=”text” name=”nome” />
Textarea
Para envio de informações maiores, frases ou textos maiores, usamos o elemento de
área de texto ou textarea. Diferente do elemento input, ou texto simples, o textarea deve
ser fechado com sua tag de fechamento. Exemplo:
<textarea></textarea>

Para adequá-lo ao layout da sua página, você pode configurar seu tamanho no css,
ou ajustar com os atributos cols e rows. O atributo col é referente ao número de colunas,
ou caracter, e ele altera a largura da caixa de texto. Já o atributo rows se refere ao número
de linhas e alterando os valores ele altera o comprimento da caixa de texto. Exemplo.
<textarea cols=”25” rows=”10”></textarea>

35
Desenvolvimento web
www.triway.com.br
| Módulo III
Introdução ao CSS
nome-arquivo.css
CSS (Cascading Style Sheets) ou folhas de estilo em cascata, é uma linguagem de
estilo usada para apresentação e formatação de página web. Todo documento CSS deve ser
na extensão .css. O principal objetivo do uso do css, é separar a formatação da página do
seu conteúdo. Todo documento css deve obedecer a seguinte sintaxe:
seletor {
propriedade: valor;
}
O seletor é o elemento html que você deseja alterar o formato, onde ele pode ser especi-
ficado pelo elemento e diferenciado por uma classe, id, tipo e de hierarquia. Vou mostrar
agora alguns tipo de seletores que vocês irão usar frequentemente em seus projetos.
Propriedades são as configurações que irão estilizar o elemento HTML. Toda propriedade
deve ter um valor e ser finalizado com um ponto e virgula.

36
Desenvolvimento web
www.triway.com.br
Introdução ao CSS
Seletor{ Propriedade: Valor;}
Seletor Universal
O seletor universal seleciona todos os elementos de um documento HTML. Exemplo.
* {
margin: 0px;
padding: 0px;
}
O exemplo acima é uma técnica muito usada como reset de propriedades padrão
dos navegadores. Veremos isso melhor mais a frente.
Seletor de tipo
Os seletores de tipo, altera as propriedades de todos os elementos que são formados
pela mesma tag. Exemplo.
p{
color: red;
}
No exemplo acima, todos os parágrafos, independente de classe ou id irão ser
de cor vermelha.

37
Desenvolvimento web
www.triway.com.br
Seletores de classe
Neste caso todos os elementos que possuírem a mesma classe irão ter a mesma formatação,
ou seja, todos os elementos que possuírem o atributo class=”” com o mesmo valor. Exemplo.
div.minhaclass {
color: blue;
}
Seletores de id
Esses seletores fazem a mesma função dos seletores de classe, só que seu atributo é id=””.
Exemplo.
div#conteudo {
color: black;
}
Seletor de descendentes
Chamamos de seletor de descendentes a seleção de um ou mais elementos fazendo o uso
de outros seletores separados por espaços. Um espaço indica que os elementos seleciona-
dos pelo seletor à sua direita são filhos diretos ou indiretos dos elementos selecionados
pelo seletor à sua esquerda. Exemplo.
li a {
color: red;
}
Seletor de filhos
Chamamos de seletor de filhos a seleção de umou mais elementos fazendo o uso de outros
seletores separados pelo caractere >. Um caractere > indica que os elementos seleciona-
dos pelo seletor à sua direita são filhos diretos dos elementos selecionados pelo seletor à
sua esquerda. Exemplo.
div.conteudo > a.link {
color: red;
}
Dica importante sobre id e classe
Como foi exemplificado acima, id e classe são atributos diferentes. As classes em css, são repre-
sentadas por .nomedaclasse (.) e a id por #nomedaid (#).
A maneira mais certa de usar id e classe é usando id para elementos específicos, como elemen-
to pai, ou seja, elementos em que suas propriedades serão exclusivas a ele. E usar classe para
elementos de propriedades mais amplas, ou que você precisa usá-las várias vezes em seu site.

38
Desenvolvimento web
www.triway.com.br
Propriedades importantes do CSS
Como mostramos anteriormente, para alterar os estilos de um elemento HTML, us-
amos propriedades para tal tarefa. Vamos mostrar a vocês algumas das propriedades mais
usadas para a criação de sites e páginas HTML estilizadas.
Cores e Medidas
Muito importante antes de você aprender as varias propriedades do CSS, é preciso
saber como o CSS trata a cores e várias medidas, pois muitos valores dessas propriedades
são em medidas e cores.
Cores
As cores em CSS são tratadas praticamente em duas formas. Essas são as mais us-
adas e são as que você irá usar sempre, que são cores em RGB ou Hezadecimal.
Você não precisa decorar e nem ser um expert em código de cores, pois os próprios
programas que são usado para o desenho do layout como Photoshop, Gimp entre outros,
te fornecem esses códigos, sejam em Hexadecimal ou RGB. Exemplo.
Em Hexadecimal.
p {
color: #000000;
}
Introdução ao CSS
Hexadecimal
#xxxxxx;
RGB
rgb (xx, xx, xx);

39
Desenvolvimento web
www.triway.com.br
Introdução ao CSS
Medidas
in em cm
ex pt px
Em RGB
p {
color: rgb(0,0,0);
}
Medidas
As medidas em CSS são relativas ao tamanho da resolução da tela. Ela podem ter os va-
lores em;
in - polegada.
cm - centímetro.
mm- milímetro.
em - tamanho relativo ao tamanho de fonte atual no documento. 1em é igual ao tamanho
da fonte atual, 2em o dobro do tamanho da fonte atual e assimpor diante.
ex - essa unidade é igual à altura da letra “x”minúscula da fonte atual do documento.
pt - ponto (1pt é o mesmo que 1/72 polegadas).
px - pixels (umponto na tela do computador).
Confira a uma descrição detalhada das propriedades CSS em nosso guia de referência.

40
Desenvolvimento web
www.triway.com.br
Introdução ao CSS
Seletores
Seletor Universal
Seletor de tipo
Seletores de classe
Seletores de id
Seletor de descendentes
Seletor de filhos
Recapturando os seletores visto acima.

41
Desenvolvimento web
www.triway.com.br
Linkando CSS ao HTML
1 – Arquivo Externo
2 – Bloco de Código
Inserindo CSS ao HTML
Para estilizarmos nossa página HTML devemos vincular o CSS ao documentos
HTML, e isso podemos fazer de 3 maneiras.
Usando um arquivo externo
Você pode criar um arquivo .css e linka-lo a sua página HTML, para isso devemos
inseri-lo ao elemento head.
Para isso usamos a tag lilnk como alguns atributos. Veja o exemplo.
<link rel=”stylesheet” type=”text/css” href=”url do arquivo css” media=”all” />
Explicando os atributos.
rel: significa o tipo relacionamento desse link que no caso é uma folha de estilo (stylesheet).
type: informa o tipo de arquivo que estamos linkando ao nosso HTML.
href: Usado também em links de página, ele mostra o endereço do arquivo.
media: Esse atributo informa ao navegador para qual dispositivo deve ser usado esse
arquivo CSS. Neste caso, que o valor é all, ele será usado em todos os dispositivos, telas
grandes, celulares, impressão.

42
Desenvolvimento web
www.triway.com.br
Blocos de CSS
Você pode inserir também em qualquer parte do documento HTML um bloco com
propriedades de CSS em cima do bloco que . Essa maneira não é muito boa pois deixa seu
código um pouco bagunçado.
Vamos inserir um bloco de CSS agora. Para inserir um bloco de código CSS devemos
abrir o elemento de CSS com a tag <style>, e informar o atributo type com os valores de
text/css. Exemplo.
<style type=”text/css”>
...
</style>
Dentro do elemento inserimos os seletores e propriedades CSS. Outro exemplo.
<style type=”text/css”>
p {
color: red;
}
</style>
Como podemos observar a sintaxe continua a mesma.
Estilo dentro do Elemento
Outra forma de inserir CSS dentro de um elemento, é inserir o estilo dentro da tag
de abertura do elemento. Essa técnica é muito usado em editores Wysiwyg.
Exemplo.
<div style=”color:red;”>
...
</div>
A sintaxe muda um pouco mas a base é a mesma, e as propriedades são inseridas dentro
do atributo style.
Dica importante
Você pode usar vários arquivos CSS na sua página HTML, porém tome cuidado com o
nome de seletores, pois o que prevalece sempre é o último. Por exemplo, digamos que você
tenha um elemento com a classe chamada conteudo, e dentro do primeiro arquivo CSS
com sua propriedades definidas, e digamos que no segundo arquivo CSS vc também tenha
esse seletor com outras propriedades, o que prevalece será o do último.
Dica
Quando você precisar inserir bloco de código insira dentro do elemento head, assim você
deixa seu código mais limpo e mais organizado.

43
Desenvolvimento web
www.triway.com.br
Os comentários em CSS, são bastante importantes, pois como no HTML ele permite
que você possa documentar todo o seu código. Uma dica valiosa, aprenda e pegue o cos-
tume de documentar o seu código, isso irá te ajudar se um dia, muito tempo depois você
ou outra pessoa precise fazer uma manutenção.
Os comentários em CSS devem ser na seguinte sintaxe.
/* meu comentário em uma linha*/
/*
Este é um comentário
com mais de uma linha
*/
/**
* Este é um comentário
* com mais de um linha mais arrumadinho.
**/
Comentários em CSS
/* Comentário de uma linha */
/*
* Comentário com
* Mais de uma linha
*/

44
Desenvolvimento web
www.triway.com.br
CSS Docs - Padronizando seu código CSS
Os comentários em CSS não existe uma padronização especifica. Basta que ele este-
ja dentro da sintaxe correta, ele funciona. Vou mostrar a vocês uma pdronização feita por
dois desenvolvedores Alemães que esta conquistando vários adeptos, o CSSDoc. O CSS-
Doc possui uma sintaxe simples, mas que facilita muito a documentação do CSS e deixa
seu código bem organizado.
Comentários em CSS
CSSDocs
http://cssdoc.net/

45
Desenvolvimento web
www.triway.com.br
Ele é constitupido basicamente em dois tipos de bloco de comentário. Um co-
mentários de descrição do CSS no topo do docuemento, e um bloco por sessão do HTML.
Exemplo.
Comentários de Arquivo (File Comments)
O File Comment é utilizado como descrição principal do arquivo CSS, aparece ap-
enas uma vez no arquivo e deve ser escrito no topo. Geralmente nos comentários de arqui-
vo são descritas informações sobre a função do arquivo e alguns metadados como autor,
versão, etc.
Comentários de Seção (Section Comments)
Abrem seções em arquivos CSS e podem ser utilizados diversas vezes para estrutu-
rar o código CSS. O significado de “seção” é bastante amplo e depende do designer/desen-
volvedor. Algumas seções comuns em CSS são: Reset, Layout, Tipografia, entre outros.
Principais tags do CSSDoc
Os comentários em CSSDoc podem fornecer diversas informações sobre os arquiv-
os CSS e trechos específicos de código. Algumas tags referem-se apenas a informações do
arquivo e são inseridas em File Comments, mas a maioria são utilizadas em Section Com-
ments. Exemplos de algumas das tags mais utilizadas são:
@autor: comentário de arquivo, pode conter o nome e/ou o e-mail do autor do documento.
@colordef: comentário de arquivo, especifica a cor (em hexa ou RGB) e pode também ser
fornecido o nome da cor e sua utilização seguido de ponto-e-vírgula.
@bugfix: comentário de arquivo e de seção, apresenta uma descrição resumida sobre um
trecho de código para corrigir alguma incompatibilidade de navegador.
@css-for: comentário de arquivo e de seção, usado em conjunto com @bugfix para espe-
cificar qual browser está relacionado com a correção feita (Ex.: @css-for IE 6).

46
Desenvolvimento web
www.triway.com.br
@section, @subsection e @subsubsection: comentários de seção, para indicar as
seções de um código CSS em até 3 níveis. Quando utilizar @subsection, o bloco de co-
mentário também deve também conter @section, e o mesmo para o @subsubsection, deve
conter a @subsection e a @section.
Você pode consultar todas as tags do CSSDoc em nosso guia de referência do CSS-
Doc e pode tambpme pesquisar mais sobre o assunto na documentação do site.

47
Desenvolvimento web
www.triway.com.br
Introdução ao JavaScript
Client-side
Para a criação de páginas web dinâmicas, usaremos JavaScript. O JavaScript é uma
linguagem client-side, ou seja, ela é interpretada pelo navegador. Iremos aprender uma
base de JavaScript e como usar ela em nosso site, deixando - o mais dinâmico e atraente.

48
Desenvolvimento web
www.triway.com.br
Introdução ao JavaScript
1 – Arquivo Externo
2 – Bloco de Código
Inserindo JavaScript a nossa página.
Existe duas maneiras de você inserir JavaScript na sua página web, uma delas é in-
serindo um bloco de código usando a tag script, assim como mostramos no CSS anterior-
mente. Esse bloco pode ser inserido em qualquer parte do documento HTML, porém seu
código ficará mais organizado se você o inserir dentro do elemento head.
Exemplo.
<!doctype html>
<head>
<title>Aula de JavaScript</title>
<script>
….
</script>
</head>
…
Uma outra maneira, e a que eu recomendo, pois deixa a estrutura do seu site muito
mais organizada e fácil de manusear é inserir um documento JavaScript externo, usando
o atributo src na tag <script>.

49
Desenvolvimento web
www.triway.com.br
Exemplo.
<!doctype html>
<head>
<title>Aula de JavaScript</title>
<script src=”url do arquivo javascipr”></script>
</head>
…
Simples não. O seu documento de JavaScript deve conter a extensão .js.
Exemplo.
meus-scripts.js
scripts.js.
etc.

50
Desenvolvimento web
www.triway.com.br
Variáveis
var Nome da Variável= “valor”;
Váriávies, são um espaços localizados na memória que usamos para armazenar
um valor ou uma expressão. Para declararmos uma variável em Java script, usamos a
seguinte sintaxe.
var nomedavariavel = “valor da variável”;
Exemplo.
var meunome = “Caio Vinicius“;
As variáveis podem ser números, números com casas decimais, textos, e boleanos
(verdadeiro ou falso).

51
Desenvolvimento web
www.triway.com.br
Matemáticos ou
aritméticos: (+, -, *, /);
Atribuição (=, +=, -=, *=, /=, %=)
Lógico (&&, ||) Relacional (==, !=, <, <=, >, >=)
Operadores
Operadores
Como em toda linguagem de programação, os operadores servem para manipular
os dados. Podemos fazer desde operações matemáticas a comparações de dados. O JavaS-
cript nos oferece vários tipos de operadores, segue alguns tipos:
Matemáticos ou aritiméticos: (+, -, *, /);
Atribuição (=, +=, -=, *=, /=, %=)
Relacional (==, !=, <, <=, >, >=)
Lógico (&&, ||)
Operadores Matemáticos
Servem para realizar operações matemáticas. Exemplo.
var dois = 1 + 1;
var tres = 4- 1;
var dez = 5 * 2;
var cinco = 10 / 2;

52
Desenvolvimento web
www.triway.com.br
Operadores de Atribuição
Serve para atribuir algum valor. Existem seis tipos de operadores de atribuição.
Simples =
Incremental +=
Decremental -=
Multiplicativa *=
Divisória /=
Modular %=
Exemplo.
var valor = 1; // valor = 1
2 valor += 2; // valor = 3
3 valor -= 1; // valor = 2
4 valor *= 6; // valor = 12
5 valor /= 3; // valor = 4
6 valor %= 3; // valor = 1
Basicamente os operadores de atribuição nos economiza em escrita de códigos, já
que essas mesmas funções poderiamos escrever como operações matemáticas.
Operadores Relacionais
Como o próprio nome diz, esses operadores fazem relações entre variáveis ou va-
lores. Podemos fazer as seguintes relações de dados:
Igualdade ==
Diferença !=
Menor <
Menor ou igual <=
Maior >
Maior ou igual >=
Exemplo.
var valor = 2;
var t = false ;
t = ( valor == 2); // t = true
t = ( valor != 2); // t = false
t = ( valor < 2); // t = false
t = ( valor <= 2); // t = true
t = ( valor > 1); // t = true
t = ( valor >= 1); // t = true

53
Desenvolvimento web
www.triway.com.br
Operadores Lógicos
Para verificarmos duas ou mais condições ao mesmo tempo usamos operadores
lógicos. O JavaScript nos oferece dois tipos de operadores lógicos, que são:
“E” - &&
“OU” - ||
var valor = 30;
var teste = false ;
teste = valor < 40 && valor > 20; // teste = true
teste = valor < 40 && valor > 30; // teste = false
teste = valor > 30 || valor > 20; // teste = true
teste = valor > 30 || valor < 20; // teste = false
teste = valor < 50 && valor == 30; // teste = true
Estude bastante operadores pois eles são a base para muitos scripts que você irão escrever
em sua vida de desenvolvedor.

54
Desenvolvimento web
www.triway.com.br
If e else
if e else
if e esle ( se , senão), são comando de digamos verificação, onde se uma função for
verdadeiro ele é executado ou senão não for outra função é excutada. Imaginamos que um
amigo seu lhe pede um dinheiro emprestado, e você passa pra ele a seguinte condição:
- Se eu tiver o dinheiro no banco eu lhe empresto, mas se não tiver não tem como te em-
prestar.
É basicamente isso que os comandos if e else fazem se a resposta de if for verdadeira
ele executa a primeira ação, senão for verdadeira ele executa a segunda ação. Exemplo.
var dinheiro = 100;
var saldobanco = 110;
if(saldobanco <= dinheiro) {
document . writeln (’Posso te emprestar o dinheiro ’);
} else {
document . writeln (’Não posso te emprestar o dinheiro.’);
}

55
Desenvolvimento web
www.triway.com.br
For e while
Nome do
Cliente
Nome do
Cliente
x 100
for e while
Os comandos for e while são bem úteis quando precisamos repetir alguns coman-
dos. Imagine que precisemos exibir na tela a seguinte mensagem:
Olá, tenha um bom dia!
imagine que tenhamos que exibir essa mensagem vinte vezes na tela. Para nos poupar do
trabalho de digitar ou copiar e colar as vinte vezes, podemos usar o comando while.
Exemplo.
// aqui mostramos o numero de vezes que a mensagem foi exibida
var numimpressoes = 0;
// aqui mostramos o numero de vezes que a mensagem será exibida.
while(numimpressoes <= 10) {
document.writln(‘Olá, tenha um bom dia!’);
// aqui o operador ++ incremeta o código a quantidade de vezes que foi inrmada.
numimpressoes++;
}

56
Desenvolvimento web
www.triway.com.br
O comando for, faz o mesmo trabalho do while, a diferença é que ele deve receber
três argumentos.
for ( var contador = 0; contador <= 100; contador ++) {
document . writeln (’Olá, tenha um bom dia. ’);
document . writeln (’<br/>’);
}
Essa é base para trabalhar com JavaScript, e se você tiver alguma noção de alguma noção
de alguma outra linguagem de programação, você vai ver que tudo isso que falamos é base
muitas linguagens de programação.

57
Desenvolvimento web
www.triway.com.br
Introdução à funções
function nomeDaFuncao(){
document.writeln(‘Olá aluno!’);
}
Funções
Uma função JavaScript é uma sequência de instruções JavaScript que serão exe-
cutadas quando você chamá-la através do seu nome.
funções em JavaScript devem obedecer a seguinte sintaxe:
function nomedafuncao(parametro) {
….
}
Exemplo.
function mostraola() {
document.writeln(‘Olá Mundo’);
}
Para que a função seja executada basta chama´la em algum ponto da página HTML como
em um link por exemplo.
<a href=”javascript:mostraola()”>Mostrar Olá</a>

58
Desenvolvimento web
www.triway.com.br
Adquira Nosso Curso
No Curso HTML, CSS, Javascript você irá aprender na prática como desenvolver
um website do zero. Inicialmente você aprende sobre HTML, suas tags e como usá-las.
Depois passa por uma introdução ao CSS que é a linguagem de marcação e como inter-
pretá-la e usá-la. No módulo de JavaScript você aprende o básico para usar e entender
como funciona ao usar bibliotecas como Jquery por exemplo. Depois de todos esses con-
hecimentos básicos das linguagens, partiremos para a mão na massa, onde se inicia o
processo de desenvolvimento do site do zero. Com aulas interativas e atrativas você irá
aprender de forma rápida como criar seu primeiro site.
Matricule-se já!

Como Criar um Site do Zero

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (12)

Como Criar um Site do Zero