como criar um site do zero

Desenvolvimento web

www.triway.com.br

ÍndiceIntrodução 3

Estrutura HTML 4

Elementos HTML 6

Tags e Elementos HTML 6

Elementos de parágrafos 9

Elemento head 8

Elementos de formatação 9

Atributos 16

Imagens 18

Links 20

Listas 21

Div 23

Tabelas 25

Meta tags 29

Comentários 30

Formulários 31

Introdução ao CSS 35

Seletores 35

Cores e Medidas 38

Linkando CSS ao HTML 41

Dicas 42

Comentários em CSS 43

Introdução ao JavaScript 47

Inserinso JavaScript 48

Variáveis 50

Operadores 51

If e Else 54

For e While 55

Funções 57

Desenvolvimento web

www.triway.com.br

OHTML sigla que significaHyperTextMarkupLanguage, é uma linguagemdemarcaçãodehipertexto,criadoporTimBenners-leeporvoltade1990,epassouporvári-asrevisõeseversões.HojeoHTMLseencontranaversão5ondeelesofreuváriasapri-moraçõesfacilitandoaindamaisavidadosdesenvolvedoresfront-end. OHTMLémantidopelaW3C-WorldWideWebConsortium,queéumconsórcioformadoporempresaseinstituiçõeseducacionais,fundadaem1994,ondeseuobjetivoé,estabelecerpadrõesparaváriasáreasedesenvolvimentoweb.Em1997ogrupolançouoHTML4,epraticamentejunto,poucosmesesdepois,foipublicadooXML1.Em1998foiiniciadoareescritadoHTMLemXML,oqueoriginouoXHTML1quefoilançadoem1999,eemMaiode2001foipublicadooXHTML1.1.

ComooHTMLficoubastantetempoestagnadosemnenhumtipodemelhoriaounovasversões,em2004foifundadaaWHATWG-WebHypertextApplicationTechnologyWorkingGroup-queeracompostapormembrosdoXForms,umgrupoquetrabalhavaemparalelocomaW3C,masvoltadaparaformuláriosemHTML.OWHATWGéogrupodetrabalhotecnológicodeaplicaçõesdehi-pertexto paraWeb.Trata-se de umgrupo livre, não oficial e decolaboraçãodosdesenvolvedoresdenavegadoresedeseusinter-essados.Masem2006TimBenners-leereconheceuograndefeitopelopessoaldaWHATWGeanunciouqueelesdeveriamtrabalharjuntosdeformaunificada,foiapartirdaíquecomeçouosprimei-rospassoparaoHTML5.

Introdução

| Módulo I

H T M L

Markup

Language

Introdução ao HTML

Linguagem de Marcação de Hipertexto

Desenvolvimento web

www.triway.com.br

Estrutura HTML

TododocumentoHTMLdeveconterasextensõeshtmlouhtm.Elepodeserescritoporqualquereditordetexto,comooblocodenotasporexemplo.ComojámencionadooHTML,nãoéumalinguagemdeprogramação,esimumlinguagemdemarcaçãodehipertexto. ParaescrevermosdocumentosHTMLusamoscomoferramentaIDE( Integrat-ed Development Environment ou Ambiente Integrado de Desenvolvimento),queéumprogramadecomputadorquereúnecaracterísticaseferramentasdeapoioaodesenvolvimentodesoftwarecomoobjetivodeagilizaresteprocesso.ExisteváriasIDE´smuitoboasnomercado,algumaspagaseoutrasdistribuídasgratuitamente.Nonossocur-soiremousaroNotepad ++. TododocumentoHTMLdeveobrigatoriamenteobedecerumpadrãodeestruturacomonaimagemabaixo,issosedeveparaquesejaexecutadocorretamentepelonavegador.

| Módulo I

Estrutura do HTML

IDE Integrated Development Environment

Ambiente Integrado de Desenvolvimento

Desenvolvimento web

www.triway.com.br

1 | <!doctype html>:OdoctypenãoéumatagHTML,eleéumainstruçãonecessáriaparaqueonavegadorsaibaquetipoeversãodedocumentoeledeveráexecutar.Odoc-typedeveserescritonaprimeiralinhadoseudocumentoHTMLeantesdataghtml.Emversõesanteriores,eranecessárioreferenciaroDTDdiretamentenocódigodoDoctype.ComoHTML5,areferênciaporqualDTDutilizaréresponsabilidadedoBrowser.

2 | html:estatagindicaquealicomeçaoHTML.OatributoLANGénecessárioparaqueosuser-agentssaibamqualalinguagemprincipaldodocumento. Lembre-sequeoatributoLANGnãoérestritoaoelementoHTML,elepodeseruti-lizadoemqualqueroutroelementoparaindicaroidiomadotextorepresentado.Todasasoutrastagseelementosdevemestardentrodestatag.

3 | head: OheadfuncionacomoocabeçalhododocumentoHTML.Énelequevocêin-serearquivosdefolhadeestilo(CSS),javascriptemetadados.Metadadossãoinformaçõessobreapáginaeoconteúdoalipublicado.Otítulodapáginaoudosite,éinseridodentrodesseelementousandooelemento<title>,queéescritocomatag<title> … </title>.

4 | body:EstatagéresponsávelpelocorpodapáginaHTML,ouseja,tudoqueestiverdentrodela,seráexibidonateladocomputador. EstaéaestruturabasedeumdocumentoHTML.Essaestruturadevesersemprerespeitada,issoevitadesuapáginanãoserexecutada,ouapresentarerrosnonavegador.

| Módulo I

Estrutura do HTML

1 – doctype 2 - html 3 - head 4 - body

Desenvolvimento web

www.triway.com.br

Tags e Elementos HTML

O que são TAGS?

E o que são Elementos?

Tag´s HTML

Tagssãorótulosusadosparainformaraonavegadorcomodeveserapresentadoowebsite.Todatagdeveserescritadentrode< e >.Existedoistiposdetag:asdeaberturadeumelemento:<nome da tag>,easdefechamento:</ nome da tag>. Semprequeumatagforaberta,eledeveserfechada,issomostraparaonavegadorondevocêqueraaquelaformataçãoouelementotermine.

Desenvolvimento web

www.triway.com.br

ElementossãocomponentesdeumarquivoHTML.ElementosemHTMLsãocompostosportags.

| Módulo II

Elementos HTML

<html>

Elementos

O que são TAGS?

E o que são Elementos?

Desenvolvimento web

www.triway.com.br

OElementohead,comomuitosdizem,éaparteinteligentedodocumentoHTML.Énele,queinserimos,arquivosexternoscomoCSSeJavaScript,Metadatas,queauxiliamosmotoresdebuscasaindexaremsuapágina,oTítulo,chavedecaracteresetc.Oelementoheadéformadopelataghead(<head> </head>),eeledeveserescritonotopododocu-mento,dentrodatag<html> </htm>. Comovimosemcapítulosanteriores,odocumentoHTMLpossuiumaestruturaprópriaequedeveserrigidamenteobedecida,entãoaformacorretadeseinseriroele-mentoheadécomonoexemploabaixo

<!doctype html><html lang=”pt-br”><head> <title>Meu site - Página Principal</title>...</head>…

NotequecomodissemosoelementoheadéoprimeiroelementoinseridodentrodoelementoHTML. Outra regramuito importante é do elemento title (<title> … </title>). Comoopróprionomemostra,eleéoresponsávelpelotítulodapágina,queéexibidonabarradonavegador.Esseelementodeveestarobrigatóriamentedentrodoelementohead.

Elemento head

| Módulo II

Elemento<head>

<!doctype html> <html lang=”pt-br”> <head> <title>Meu site - Página Principal</title> ... </head> …

Desenvolvimento web

www.triway.com.br

Elementos de parágrafos Parágrafossãomuitousadosemtextos,tantoempáginaswebcomoemdocu-mentosdetextoetc.Elesseparamassuntosedeixamostextosmaisorganizados.NoHTML,elepossuiamesmafunção.Umelementodeparágrafoéconstituídopelatag <p> … </p>.

Vejaumexemplo:<p> Este é um parágrafo.<p><p> Este é outro parágrafo.</p>

Parágrafos e Headers

<p> Essa marcação informa

um novo parágrafo

</p> Essa marcação informa o

término do parágrafo

Desenvolvimento web

www.triway.com.br

OResultadononavegadoéesse:

Notequeoresultadoécomoumparágrafodeumdocumentodetextocomum.Elesaltaumalinhaecomeçaooutroparágrafo.

| Módulo II

Desenvolvimento web

www.triway.com.br

Headers

Osheaderssãomaracadores,muitousadosemtítulosdepáginas,sãoescritoscomatag<h1> … </h1>evaidatag<h1>atéa<h6>.Essanumeraçãocorrespondeaoníveldeimportânciadotítulonapágina,ouseja,o <h1> éomaisimportantee<h6>éomenosimportante. Dica:Semprecoloqueotítulodapáginacomatag<h1>,poiscomoelesimbolizaotítulomaisimportante,osmecanismosdebuscaoindexacomoasuatalimportância.Use<h1>paratítulos,<h2>parasubtítulos,<h3>paranomesdeblocos(exemplo:menu).

Parágrafos e Headers

<h2>Este é um header</h2>

Este é um header

<h1>Este é um header</h1> Este é um header

Desenvolvimento web

www.triway.com.br

| Módulo II

Elementos de formatação NoHTMLexisteelementosdeformataçãodetexto,assimcomonosprogramasdeediçãodetexto,comooMicrosoftWord.Formataçãocomoitálico,negrito,textoàesquer-da,centralizado,justificado.Algumasdessasformataçõespodemserfeitasdeformamaissemânticapelocss,masiremosveralgunsdesseselementosparaquevocêconheçaumpoucomais.Itálico - <i> … </i>Paradeixarumapalavra,umafraseouumparágrafoemitálico,usamosoelemento<i> ... </i>.Exemplo:

<i> Este parágrafo esta em itálico </i>

Vejaoresultadononavegador.

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.

Desenvolvimento web

www.triway.com.br

Negrito - bold <b> … </b>

Parasefazeromesmocomnegritousa-seoelementoboldqueéescritocomastags<b> … </b>.Vejaoexemplo.

<b>Este parágrafo esta em Negrito.</b>

VejaoResultadononavegador.

Umoutroelementoquetemomesmoresultadodoelementoboldéoelementostrong<strong> ... </strong>.Exemplo.

<strong> Este parágrafo esta com o elemento strong. </strong>

Vejaumacomparação.

Notequeadiferençaenenhuma.GeralmentesedápropriedadesdiferentesparacadaelementodessenoCSS,diferenciandoumdooutro,visualmentefalando.

| Módulo II

Desenvolvimento web

www.triway.com.br

| Módulo II

span - <span> … </span>

Oelementospan<span> … </span>,visualmenteelenãoalteraemnadanapala-vraounotextoqueeleestamarcando,masgeralmenteusa-seeleparafazeralgumamar-caçãonotexto,comocorporexemplo.Elepodeserusadoparaagruparelementosparafinsdeestilo(usandoosatributosclassouid),ouparacompartilharvaloresdeatributoscomo lang.Eledeveserusadosomentequandonenhumoutroelementosemântico forapropriado.<span>émuitoparecidocomoelemento<div> ,entretando<div>éumelementodeníveldeblocoenquanto<span>éumelementoemlinha.

Vejaumexemplo.

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>

VejaoResultado.

Mais alguns elementos de formatação

Nohtml,existeaindamuitomaiselementosdemarcação/formataçãodetexto,ecomachegadadohtml5esseselementosaumentaramdenúmero.Vamoscitaralgunsparaquevocêfixenamente.Todoselesestãononossoguiadereferência.

em-<em> … <em> Funcionacomooitálico,eledáenfânseàalgumapartedotexto.

Desenvolvimento web

www.triway.com.br

| Módulo II

cite-<cite> … </cite>Muitousadoparacitações,comonomedeautores,músicas,filmes,frasedealguémetc.

pre-<pre> … </pre>Esteelementoéusadoparamostrarumblocodecódigo.

small-<small> … </small>Oelementosmalleleapresentaotextocomotamanhodafonteumpoucomenor.

Essessãoalgunselementosdohtml,vejaalistacompletanoguiadereferência.

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

ElementosemHTMLtêmatributos,quesãovaloresadicionaisqueconfiguramoselementosouajustamseucomportamentodeváriasmaneirasparacumpriroscritériosqueosusuáriosquerem. NoHTML existemmuitos atributos,mas iremos citar omais usados. Todos osatributosdevemseguiraseguintesintaxe: nome=”valor”,ondenomeéonomedoatribu-toseguidodosinaldeigual( =),evaloréovalordapropriedadedentrodeaspas,duplasousimples.

alt | Altenative text Oatributoalt, éusadoemelementosde imagem.Eleexibeumtextonocasodeocorreralgumerroeaimagemnãoforexibida.

title | Título ítuloébastanteusadoemdescriçõesdeelemento.Suafunçãoéexibirumtextoemformadecaixaquandosepassaomouseemcimadoelemento.

src | Url de arquivos EsteatributotemcomofunçãoinformaroendereçourldearquivoexternosqueserãoinseridosnodocumentoHTML,comoimagens,arquivosdeáudioevídeo,scriptsetc.

Atributos

Desenvolvimento web

www.triway.com.br

| Módulo II

rel | Relações entre links Oatributorelespecificaarelaçãoentreoobjetodedestinoparaoobjetolink.

language | Tipos de script Esteatributoéusadobasicamentequandose irá inserirumblocoouarquivodescriptnoHTML.Eleespecificaotipodescriptqueestasendoinserido.

lang | idioma do conteúdo Comojávimos,oatributolangéusadoparainformaroidiomadapáginahtml.Masesteatributonãoéexclusivodatag<html>.ElepodeserusadoemqualquertagoublocodoseudocumentoHTMLexercendoamesmafunção,deinformaroidiomadoconteúdodobloco,parágrafoetc.

id | Identificação de elementos únicos UmdosatributosquemaisseusaemdocumentosHTML.Esteatributoidentificaumelementocomumnomequevocêpodecriar.Écomovocêpegarumelementodocódi-goedarumnomeaele.Muitoútilpoiscomessaidentificação,vocêpodeformatá-lopeloCSS,criandoregrasparaaqueleespecificoelemento. class | Formatações mais amplas Oatributoclass,ébastanteusadoparaformataçãoemcssparaelementosquepos-suempropriedadesemcomum.

href | Linkando Ohrefserveexclusivamenteparalinkar.Elefazalinkagementrepáginas,arquivos,mídia,arquivoparadownloadetc.

height | Altura Oatributoheightéusadoquandoprecisamosespecificaralturadeelementos.Podeserdeparágrafos,blocos,imagensetc.

width | Largura Temamesmafuncionalidadedoheightmaseleéresponsávelpelalargura.

Essesãoosatributosmaisusados,quepraticamentevocêirásecansardeescrever,masoHTMLpossuimuitomaisatributosqueestánoguiadereferência.Nossoobjetivoaquiédeixarbemclarooqueéumatributoecomousá-lo.

Desenvolvimento web

www.triway.com.br

| Módulo II

Ousodeimagensnawebéessencial,tantoparadeixarumainformaçãomaisclaracomoparadeixarsuapáginamaisbonitaeatraente,afinal,umaimagemvalepormilpala-vras.ParainserirumaimagemnodocumentoHTMLusa-seatag <img />.umdiferencialqueessatagtemdasoutrastagséqueelaéabertaefechadanumatagsó.Vocênãousa<img> </img>esim<img />.

Paracriarumelementodeimageméprecisousaratag<img />maisoatributosrc,quecomovimosnocapítulopassadotemafunçãodeinseriraurldeumarquivoexterno.Vejaoexemplo:

Outrosatributospodemserusadosemimagenscomo id,class,heigth,width,alt e title.Oatributoaltéobrigatórioemimagenspoisalémdeauxiliarosmecanismosde

Imagens

Imagens

Desenvolvimento web

www.triway.com.br

buscacomooGoogleindexarsuaimagem,elemostraumatextoquandoessaimagemnãoestiverdisponívelparaexibição.Useoatributotitle,paraumabrevedescriçãodaimagem,issotambémajudaosrobôsdoGoogleewidtheheightpararedimesionaraimagem,aju-standoatelaeaotexto.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”/>

Osvaloresdosatributos width e height,podemserempixelsouemporcentagem.

Qualquerarquivodeimagempodeserinseridonodocumentohtmlcomo,jpg, png,gif,bmpetc.Paraevitarproblemascomaexibiçãodesuasimagens,ébomvocêsempreprestaratençãoempequenosdetalhesqueacarretamerrosdeexibição.

Nome do arquivo.

Nosendereçosdawebouurl,nãosãopermitidoscaracteresespeciais,acentosees-paços,comoç,~,´.Colocaressetipodecaracteresnosnomesdosarquivosirágerarerrodeexibição,ouseja,suaimagemnãoseráexibida.Semprecoloqueonomedosarquivoscomletrasminúsculasenolugarespaçocomohífen(-),eaextensãocorretadoarquivo (.jpg ou .jpeg).

Exemplo:<img src=”imagens/minha-imagem.jpg” />

Sempre use endereços reais.

Sempreprefira colocar endereços absolutosdas imagens, enãoanavegaçãoentreaspastas.

Exemplo<img src=”../images/minha-imagem.jpg” />

Confira o tamanho das imagens

Semprequevocênaveganainternet,quandovocêentranumsite,vocêprecisaes-peraroconteúdocarregar.Quandoseusaimagensmuitograndes,dealtaresoluçãoessessitesdemoramemuitopara carregar.Recorte as imagens,parao tamanhoquedesejaapresentarnatela,useimagensgrandesapenasquandorealmentefornecessário,comoumagaleriadeimagens.

| Módulo II

Desenvolvimento web

www.triway.com.br

Linkssãoâncorasouligaçõesentrepáginas,imagensarquivosetc.Umlinkéescritocomatag <a> </a>,epodereceberváriosatributos,comohref,alt,title,taregt,rel,id,class.Umlinkdeveseguiraseguintesintaxe.

Oatributohreféobrigatório,poiséelequevaiinformarparaondeolinkirádire-cionarousuário. OutrosatributoscomoideclasssãousadosparaaformataçãocomCSS.Umatribu-toqueémuitousadoemlinkséoatributotarget,queinformaonavegadorondeeledeveráabriroaurlinformadanoatributohref.Oatributotargetpossui5valores:_blank:Abreaurlemumanovajanela,guiaouaba._self:Abreaurlnamesmajanela,guiaouabaondefoiclicada._parent:Abreaurlnofamesetpai._top:Abreaurlnocorpointeirodajanela.framename:Abreaurlemumquadrochamado.

Exemplos:Esteexemplovaleparaosvalores_blank,_self,_parent,_top.<a href=”http://www.3way.com.br” target=”_blank” >Meu link</a>Esteexemplovaleparaoframename.<a href=”http://www.3way.com.br” target=”nomedoframe”>Meu link cno frame</a>

| Módulo II

Desenvolvimento web

www.triway.com.br

Listas

Ordenadas

Não ordenadas

Listas

Aslistasãobemúteisnohtml.Comelaspodemoslistardeformaorganizada,porexemplo,uma listade linksepáginas.As listas sãomuitousadaspara criarmenusdenavegação,tantonaverticalcomonahorizontal.Existemdoistiposdelistasasordenadaseasnãoordenadas,ondeumaordenaositensnumerando-aseaoutranão.

Listas Ordenadas Listasordenadassãoescritascomastags<ol> … </ol>,eseusitensdelistacomatag<li> … </li>.Exemplo:<ol> <li>Item 01</li> <li>Item 02</li> <li>Item 03</li></ol>Vejaoresultadononavegador

Vejaquefoicriadaumalistaordenadade1a3.

| Módulo II

Desenvolvimento web

www.triway.com.br

Listas não ordenadas Aslistasnãoordenadassegeamesmasemântica,porémelausaoutratag.Paralis-tasnãoordenadaséusadaatag<ul> … </ul>nolugar<ol> … </ol>.Ositemmantémamesmatag<li> … </li>.

Exemplo:<ul> <li>Item 01</li> <li>Item 02</li> <li>Item 03</li></ul>

Vejaoresultadononavegador

Aslistasdosdoistipospodemreceberosatributosideclass,eseusitenstambé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>

EssesatributossãoimportantesparaformatareestilizaroselementoscomoCSS.Veremosissomaisadiante.

| Módulo II

Desenvolvimento web

www.triway.com.br

| Módulo II

Elemento div

Blocos

Elemento Div

DivéumaseçãodeumapáginaHTML.Comoseumapáginativesseblocosecadablocofosseformadoporumadiv.Porexemplo,abarralateralesquerdaéumblocoforma-dopordiv.Oconteúdonocentrodapáginaficadentrodeumblocodeconteúdo.Abarralateraladireitatambéméumbloco.Podemosconcluirquecadapartedositeéumblocoequeparacriarmosumblocousamosdiv.Oelementodivéescritoéescritocomatag<div> … </div>epodereceberosatributosid e class.Vejaumexemplo:

<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>

Desenvolvimento web

www.triway.com.br

Vejaoresultadononavegador:

Comopodemosverdivéumbloco.Noexemploeleestaumemcimadooutro,poisaindanãofoiinseridanenhumaformataçãocomCSSnele,eporpadrãoadivocupaateladonavegadorcolocandoumblocosobreooutro.

Desenvolvimento web

www.triway.com.br

Amuitotempoatrás,ossiteseramfeitossobretabelas.Issoocorriaporqueaindanãoexistiaumamaneirade formatareestilizarpáginasHTML.Como lançamentodoXHTML4eoCSSessequadrofoimudadoeatéhojeusaexclusivamenteblocos(div)parasecriarumapáginaHTML,extinguindoastabelasdossites.Mesmocomessaevolução,astabelasaindaexistemnoHTML,ehojeelatemoutrafunçãoqueébastanteusada,princi-palmenteparaaexibiçãodetabelasdecadastros,produtosetc.

Astabelassãoescritascomatag<table> … </table>,eelapossuemlinhasecolu-nas.Aslinhassãoescritascomatag<tr> … </tr>eascolunascomatag<td> … </td>.Ascolunasficamdentrodaslinhas.Vejaumexemplodeestruturabásicadeumatabela.<table border=”1”> <tr> <td>coluna 01 - linha 01</td> <td>coluna 02 - linha 01</td> <td>coluna 03 - linha 01</td> </tr><tr> <td>coluna 01 - linha 02</td> <td>coluna 02 - linha 02</td> <td>coluna 03 - linha 02</td> </tr>

| Módulo II

Tabelas

Desenvolvimento web

www.triway.com.br

| Módulo II

<tr> <td>coluna 01 - linha 03</td> <td>coluna 02 - linha 03</td> </tr></table>Vejaoresultadononavegador.

Astabelaspodemreceberosatributosid,class,border,width,height,colspan,row-spantantonatabela(<table>),quantoemsuaslinhasecolunas(<tr>, <td>).* rowspan-especificaquantaslinhasacélulaserámesclada* colspan-especificaquantascolunasacélulaserámesclada

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

Astabelaspossuemcabeçalhos,nãoéobrigatório,masdeixasuatabelamaisorgan-izadaquandovocêinformaonomedascolunas. Parainserirumcabeçalhoemumatabela,usamosatag<thead> … </thead>,esuacolunasrecebemumanovatag <th></th>,mascontinuamdentrodeumalinha.Exemplo:<table> <thead> <tr> <th>Nome</th> <th>Endereço</th> <th>Telefone</th></tr></thead>…. Aoinserirumcabeçalhonatabela,vocêdeveinformarocorpodatabela.Paraissousamosatag<tbody> … </tbody>.Vejaumexemplodecomoumatabeladeveserescri-ta,deformasemântica.

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>

Vejaoresultadononavegador.

Desenvolvimento web

www.triway.com.br

| Módulo II

Metatags,sãotagsinseridanocabeçalhododocumentoHTMLcominformaçõesrel-acionadasaquelapágina,comoporexemplo,descriçãodoconteúdo,autor,palavraschaves,encodedecaracteres. Émuitoimportanteusarasmetatags,poiselasajudamemuitoaindexaçãodositenosmotoresdebuscacomoGoogle,Bingetc.Asmetatagssãoescritascomatag<meta>enãopossuitagdefechamento,ouseja,comovimos,oqueacontececomatagdeimagem(<img>),elaéfechadanamesmatagqueéaberta. Todametatagdeveterdoisatributosquesãoatributonameeoatributocontent.Oatributonameespecificaonomedametatag,comoautor,keywordquesãopalavraschaves,todasseparadasporvírgulaedescriptionqueéumadescriçãododocumento.Jáoatributocontenteleéresponsávelpeloconteúdomesmodatag.Porexemplo,nametatagqueoatributonameforautor(name=”author”)oatributocontentdeveconteronomedoautor(content=”JoséFelipe”).Assimcomotodasasinformaçõesqueestãonoelementohead,asmetatagsnãosãovistasnonavegador,ounosite,maspodemservistasnocódigofontedosite.Vejaumexemplo:

A meta tag charset

UmametatagdiferentequeéobrigatóriaemtododocumentoHTMLéametatagcharset.Elaéresponsáveldeinformaraonavegadorqualtabeladecaracteresusar.Sem-preuseautf-8,poisessatabelausacaracteresespeciaiseacentos.Exemplo.

Meta tags

Desenvolvimento web

www.triway.com.br

Comentário em HTML

Comentários

OscomentáriosemHTMLsãobastanteimportantesemuitousadoscomoidenti-ficadoresdeelementos.Ajudamuitosevocêusá-lospara informarquandocomeçaumelementoequandotermina,issoparaquevocênãosepercaemmeioàummontedetagseelementosparecidos.ParafazerumcomentárioemHTMLusamosaseguintesintaxe:

Regrabásicaeobrigatória:Abre-seumcomentáriocom.Lembrandoquedevehavertrêshífensnaaberturaedoisnofechamento.

Pode-seusarumcomentáriocommaisdeumalinha,usaracentos,ecaracteresespeciais.

Desenvolvimento web

www.triway.com.br

Formulários

| Módulo II

Formulários

Formuláriossãoumdoselementosmaisusadosnaweb.Depequenosformuláriosdecontatoaextensoscadastrosemlojasvirtuais.

Todoformulárioecompostopeloelementoform<form> </form>.Todososcam-posqueestãodentrodeleserãoenviadosparaoservidor.Paraqueoformuláriosejapro-cessado,osdadosdevemserenviadosaumscriptexterno,escritoporalgumalinguagemdeprogramaçãocomophp,asp,rubyetc.Parainformaroscriptqueirámanipularessesdados,usamosoatributoactionnoformulário.Exemplo.

A tag input Existemváriostiposdeinputs,ecadaumsecomportademaneiradiferente,oquediferenciacadaumdessesinputséoatributotype,quepodeserqualquerumdosabaixo:

•text - Criaumacaixadetextodeumalinha.•password - Criaumacaixadetextodeumalinhaescondendooscaracteresdigi-tados.

Desenvolvimento web

www.triway.com.br

•checkbox -Criaumacaixaqueassumedoisestados:checadoe“deschecado”.Emconjuntocomoatributonameépossívelquesecrieumgrupodecheckboxesnoqualumaoumaischeckboxessejam“checados”.•radio -Criaumacaixaqueassumedoisestados:checadoe“deschecado”.Emcon-juntocomoatributonameépossívelquesecrieumgrupoderadiosnoqualapenasumradioseja“checado”.•button -Criaumbotãoeatravésdoatributovaluedefinimosotextodobotão.•submit -Criaumbotãoparaoenviodo formulárioeatravésdoatributovaluedefinimosotextodobotão.•file-Criaumbotãoque,aoserclicado,abreumacaixadediálogoparaaescolhadeumarquivonocomputadordousuário.•reset -Criaumbotãoquedescarta todasasalterações feitasdentrodeum for-mulário.Atravésdoatributovaluedefinimosotextodobotão.•image - Criaumbotãoparaoenviodoformulárioedeveserutilizadoemconjuntocomoatributosrcparaqueumaimagemdefundosejautilizadanobotão.•hidden -Criaumelementoquenãoficavisívelparaousuário,porémpodeconterumvalorqueseráenviadopeloformulário.

| Módulo II

Formulários

<input /> • text • password • hidden • checkbox • radio • submit • button • image • file • reset

Desenvolvimento web

www.triway.com.br

Select

Oelementoselectoucomboboxcomomuitoschamam,permiteaousuárioescolherumaoumaisopçõesdeumalista.

Vejaoexemplo:

Nestecasovocêpodeescolherapenasumaopção.Paravocêpoderselecionarmaisdeumaopção,bastainseriroatributomultiple,assimagorapodemosselecionaváriasopções.

<select multiple=”multiple”> <option value=”Item 01”>Item 01</option> <option value=”Item 02”>Item 02</option> <option value=”Item 03”>Item 03</option> <option value=”Item 04”>Item 04</option></select>Outrapossibilidadequeoselecttepermiteésepararopçõesporgrupos.Exemplo:

Aslabelssãousadasparainformarnomedecampos,permitindoaousuáriosaberquaisdadosdevemserinformadosnaquelecampo.

| Módulo II

Desenvolvimento web

www.triway.com.br

| Módulo III

Exemplo:<label>Nome:</label><input type=”text” name=”nome” />

Textarea

Paraenviodeinformaçõesmaiores,frasesoutextosmaiores,usamosoelementodeáreadetextooutextarea.Diferentedoelementoinput,outextosimples,otextareadeveserfechadocomsuatagdefechamento.Exemplo:

Paraadequá-loaolayoutdasuapágina,vocêpodeconfigurarseutamanhonocss,ouajustarcomosatributoscolserows.Oatributocoléreferenteaonúmerodecolunas,oucaracter,eelealteraalarguradacaixadetexto.Jáoatributorowsserefereaonúmerodelinhasealterandoosvaloreselealteraocomprimentodacaixadetexto.Exemplo.

Desenvolvimento web

www.triway.com.br

| Módulo III

Introdução ao CSS

nome-arquivo.css

CSS (Cascading Style Sheets)oufolhasdeestiloemcascata,éumalinguagemdeestilousadaparaapresentaçãoeformataçãodepáginaweb.TododocumentoCSSdevesernaextensão.css.Oprincipalobjetivodousodocss,ésepararaformataçãodapáginadoseuconteúdo.Tododocumentocssdeveobedeceraseguintesintaxe:

seletor { propriedade: valor;}

Oseletoréoelementohtmlquevocêdesejaalteraroformato,ondeelepodeserespeci-ficadopeloelementoediferenciadoporumaclasse,id,tipoedehierarquia.Voumostraragoraalgunstipodeseletoresquevocêsirãousarfrequentementeemseusprojetos.

PropriedadessãoasconfiguraçõesqueirãoestilizaroelementoHTML.Todapropriedadedeveterumvaloreserfinalizadocomumpontoevirgula.

Desenvolvimento web

www.triway.com.br

Introdução ao CSS

Seletor{

Propriedade: Valor;}

Seletor UniversalOseletoruniversalselecionatodososelementosdeumdocumentoHTML.Exemplo.

* { margin: 0px; padding: 0px;}

Oexemploacimaéumatécnicamuitousadacomoresetdepropriedadespadrãodosnavegadores.Veremosissomelhormaisafrente.

Seletor de tipo Osseletoresdetipo,alteraaspropriedadesdetodososelementosquesãoformadospelamesmatag.Exemplo.

p{ color: red;}

Noexemploacima,todososparágrafos,independentedeclasseouidirãoserdecorvermelha.

Desenvolvimento web

www.triway.com.br

Seletores de classeNestecasotodososelementosquepossuíremamesmaclasseirãoteramesmaformatação,ouseja,todososelementosquepossuíremoatributoclass=””comomesmovalor.Exemplo.

div.minhaclass { color: blue;}

Seletores de idEssesseletoresfazemamesmafunçãodosseletoresdeclasse,sóqueseuatributoéid=””.Exemplo.

div#conteudo { color: black;}

Seletor de descendentesChamamosdeseletordedescendentesaseleçãodeumoumaiselementosfazendoousodeoutrosseletoresseparadosporespaços.Umespaçoindicaqueoselementosseleciona-dospeloseletoràsuadireitasãofilhosdiretosouindiretosdoselementosselecionadospeloseletoràsuaesquerda.Exemplo.

li a { color: red;}

Seletor de filhosChamamosdeseletordefilhosaseleçãodeumoumaiselementosfazendoousodeoutrosseletoresseparadospelocaractere>.Umcaractere>indicaqueoselementosseleciona-dospeloseletoràsuadireitasãofilhosdiretosdoselementosselecionadospeloseletoràsuaesquerda.Exemplo.

div.conteudo > a.link { color: red;}

Dica importante sobre id e classeComofoiexemplificadoacima,ideclassesãoatributosdiferentes.Asclassesemcss,sãorepre-sentadaspor.nomedaclasse(.)eaidpor#nomedaid(#).Amaneiramaiscertadeusarideclasseéusandoidparaelementosespecíficos,comoelemen-topai,ouseja,elementosemquesuaspropriedadesserãoexclusivasaele.Eusarclasseparaelementosdepropriedadesmaisamplas,ouquevocêprecisausá-lasváriasvezesemseusite.

Desenvolvimento web

www.triway.com.br

Propriedades importantes do CSS

Comomostramosanteriormente,paraalterarosestilosdeumelementoHTML,us-amospropriedadesparataltarefa.VamosmostraravocêsalgumasdaspropriedadesmaisusadasparaacriaçãodesitesepáginasHTMLestilizadas.

Cores e Medidas MuitoimportanteantesdevocêaprenderasvariaspropriedadesdoCSS,éprecisosabercomooCSStrataacoreseváriasmedidas,poismuitosvaloresdessaspropriedadessãoemmedidasecores.

Cores AscoresemCSSsãotratadaspraticamenteemduasformas.Essassãoasmaisus-adasesãoasquevocêiráusarsempre,quesãocoresemRGBouHezadecimal. Vocênãoprecisadecorarenemserumexpertemcódigodecores,poisosprópriosprogramasquesãousadoparaodesenhodolayoutcomoPhotoshop,Gimpentreoutros,tefornecemessescódigos,sejamemHexadecimalouRGB.Exemplo.EmHexadecimal.p { color: #000000;}

Introdução ao CSS

Hexadecimal #xxxxxx;

RGB rgb (xx, xx, xx);

Desenvolvimento web

www.triway.com.br

Introdução ao CSS

Medidas

in em cm

ex pt px

Em RGBp { color: rgb(0,0,0);}

MedidasAsmedidasemCSSsãorelativasaotamanhodaresoluçãodatela.Elapodemterosva-loresem;

in-polegada.cm-centímetro.mm-milímetro.em-tamanhorelativoaotamanhodefonteatualnodocumento.1eméigualaotamanhodafonteatual,2emodobrodotamanhodafonteatualeassimpordiante.ex -essaunidadeéigualàalturadaletra“x”minúsculadafonteatualdodocumento.pt-ponto(1ptéomesmoque1/72polegadas).px-pixels(umpontonateladocomputador).

ConfiraaumadescriçãodetalhadadaspropriedadesCSSemnossoguiadereferência.

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

Recapturandoosseletoresvistoacima.

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 documentosHTML,eissopodemosfazerde3maneiras.

Usando um arquivo externo Vocêpodecriarumarquivo.csselinka-loasuapáginaHTML,paraissodevemosinseri-loaoelementohead. Paraissousamosataglilnkcomoalgunsatributos.Vejaoexemplo.

Explicandoosatributos.

rel:significaotiporelacionamentodesselinkquenocasoéumafolhadeestilo(stylesheet).type:informaotipodearquivoqueestamoslinkandoaonossoHTML.href:Usadotambémemlinksdepágina,elemostraoendereçodoarquivo.media: Esseatributo informaaonavegadorparaqualdispositivodeve serusadoessearquivoCSS.Nestecaso,queovaloréall,eleseráusadoemtodososdispositivos,telasgrandes,celulares,impressão.

Desenvolvimento web

www.triway.com.br

Blocos de CSS VocêpodeinserirtambémemqualquerpartedodocumentoHTMLumblococompropriedadesdeCSSemcimadoblocoque.Essamaneiranãoémuitoboapoisdeixaseucódigoumpoucobagunçado.

VamosinserirumblocodeCSSagora.ParainserirumblocodecódigoCSSdevemosabriroelementodeCSScomatag<style>,einformaroatributotypecomosvaloresdetext/css.Exemplo.<style type=”text/css”> ...</style>

DentrodoelementoinserimososseletoresepropriedadesCSS.Outroexemplo.<style type=”text/css”>p { color: red;}</style>Comopodemosobservarasintaxecontinuaamesma.

Estilo dentro do Elemento OutraformadeinserirCSSdentrodeumelemento,éinseriroestilodentrodatagdeaberturadoelemento.EssatécnicaémuitousadoemeditoresWysiwyg.Exemplo.

Asintaxemudaumpoucomasabaseéamesma,easpropriedadessãoinseridasdentrodoatributostyle.

Dica importanteVocêpodeusar vários arquivosCSSna suapáginaHTML,porém tomecuidado comonomedeseletores,poisoqueprevalecesempreéoúltimo.Porexemplo,digamosquevocêtenhaumelementocomaclassechamadaconteudo,edentrodoprimeiroarquivoCSScomsuapropriedadesdefinidas,edigamosquenosegundoarquivoCSSvctambémtenhaesseseletorcomoutraspropriedades,oqueprevaleceseráodoúltimo.

DicaQuandovocêprecisarinserirblocodecódigoinsiradentrodoelementohead,assimvocêdeixaseucódigomaislimpoemaisorganizado.

Desenvolvimento web

www.triway.com.br

OscomentáriosemCSS,sãobastanteimportantes,poiscomonoHTMLelepermitequevocêpossadocumentartodooseucódigo.Umadicavaliosa,aprendaepegueocos-tumededocumentaroseucódigo,issoiráteajudarseumdia,muitotempodepoisvocêououtrapessoaprecisefazerumamanutenção.

OscomentáriosemCSSdevemsernaseguintesintaxe.

/* meu comentário em uma linha*/

/*Este é um comentáriocom 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 */

Desenvolvimento web

www.triway.com.br

CSS Docs - Padronizando seu código CSS OscomentáriosemCSSnãoexisteumapadronizaçãoespecifica.Bastaqueeleeste-jadentrodasintaxecorreta,elefunciona.VoumostraravocêsumapdronizaçãofeitapordoisdesenvolvedoresAlemãesqueestaconquistandováriosadeptos,oCSSDoc.OCSS-Docpossuiumasintaxesimples,masquefacilitamuitoadocumentaçãodoCSSedeixaseucódigobemorganizado.

Comentários em CSS

CSSDocs

http://cssdoc.net/

Desenvolvimento web

www.triway.com.br

Ele é constitupido basicamente em dois tipos de bloco de comentário. Um co-mentáriosdedescriçãodoCSSnotopododocuemento,eumblocoporsessãodoHTML.

Exemplo.

Comentários de Arquivo (File Comments) OFileCommentéutilizadocomodescriçãoprincipaldoarquivoCSS,apareceap-enasumaveznoarquivoedeveserescritonotopo.Geralmentenoscomentáriosdearqui-vosãodescritasinformaçõessobreafunçãodoarquivoealgunsmetadadoscomoautor,versão,etc.

Comentários de Seção (Section Comments) AbremseçõesemarquivosCSSepodemserutilizadosdiversasvezesparaestrutu-rarocódigoCSS.Osignificadode“seção”ébastanteamploedependedodesigner/desen-volvedor.AlgumasseçõescomunsemCSSsão:Reset,Layout,Tipografia,entreoutros.

Principais tags do CSSDoc OscomentáriosemCSSDocpodemfornecerdiversasinformaçõessobreosarquiv-osCSSetrechosespecíficosdecódigo.Algumastagsreferem-seapenasainformaçõesdoarquivoesãoinseridasemFileComments,masamaioriasãoutilizadasemSectionCom-ments.Exemplosdealgumasdastagsmaisutilizadassão:@autor:comentáriodearquivo,podeconteronomee/ouoe-maildoautordodocumento.@colordef:comentáriodearquivo,especificaacor(emhexaouRGB)epodetambémserfornecidoonomedacoresuautilizaçãoseguidodeponto-e-vírgula.@bugfix: comentáriodearquivoedeseção,apresentaumadescriçãoresumidasobreumtrechodecódigoparacorrigiralgumaincompatibilidadedenavegador.@css-for: comentáriodearquivoedeseção,usadoemconjuntocom@bugfixparaespe-cificarqualbrowserestárelacionadocomacorreçãofeita(Ex.:@css-forIE6).

Desenvolvimento web

www.triway.com.br

@section, @subsection e @subsubsection:comentáriosdeseção,para indicarasseçõesdeumcódigoCSSematé3níveis.Quandoutilizar@subsection,oblocodeco-mentáriotambémdevetambémconter@section,eomesmoparao@subsubsection,devecontera@subsectionea@section. VocêpodeconsultartodasastagsdoCSSDocemnossoguiadereferênciadoCSS-Docepodetambpmepesquisarmaissobreoassuntonadocumentaçãodosite.

Desenvolvimento web

www.triway.com.br

Introdução ao JavaScript

Client-side

Paraacriaçãodepáginaswebdinâmicas,usaremosJavaScript.OJavaScriptéumalinguagemclient-side,ouseja,elaéinterpretadapelonavegador.IremosaprenderumabasedeJavaScriptecomousarelaemnossosite,deixando-omaisdinâmicoeatraente.

Desenvolvimento web

www.triway.com.br

Introdução ao JavaScript

1 – Arquivo Externo

2 – Bloco de Código

Inserindo JavaScript a nossa página. ExisteduasmaneirasdevocêinserirJavaScriptnasuapáginaweb,umadelaséin-serindoumblocodecódigousandoatagscript,assimcomomostramosnoCSSanterior-mente.EsseblocopodeserinseridoemqualquerpartedodocumentoHTML,porémseucódigoficarámaisorganizadosevocêoinserirdentrodoelementohead.

Exemplo.<!doctype html><html lang=”pt-br”><head><meta charset=”utf-8” /><title>Aula de JavaScript</title><script> ….</script></head>…

Umaoutramaneira,eaqueeurecomendo,poisdeixaaestruturadoseusitemuitomaisorganizadaefácildemanusearéinserirumdocumentoJavaScriptexterno,usandooatributosrcnatag<script>.

Desenvolvimento web

www.triway.com.br

Exemplo.<!doctype html><html lang=”pt-br”><head><meta charset=”utf-8” /><title>Aula de JavaScript</title><script src=”url do arquivo javascipr”></script></head>…

Simplesnão.OseudocumentodeJavaScriptdeveconteraextensão.js.

Exemplo.meus-scripts.jsscripts.js.etc.

Desenvolvimento web

www.triway.com.br

Variáveis

var Nome da Variável = “valor”;

Váriávies, sãoumespaços localizadosnamemóriaqueusamosparaarmazenarumvalorouumaexpressão.ParadeclararmosumavariávelemJavascript,usamosaseguintesintaxe.

var nomedavariavel = “valor da variável”;

Exemplo.

var meunome = “Caio Vinicius“;

Asvariáveispodemsernúmeros,númeroscomcasasdecimais,textos,eboleanos(verdadeirooufalso).

Desenvolvimento web

www.triway.com.br

Matemáticos ou aritméticos: (+, -, *, /);

Atribuição (=, +=, -=, *=, /=, %=)

Lógico (&&, ||) Relacional (==, !=, <, <=, >, >=)

Operadores

Comoemtodalinguagemdeprogramação,osoperadoresservemparamanipularosdados.Podemosfazerdesdeoperaçõesmatemáticasacomparaçõesdedados.OJavaS-criptnosofereceváriostiposdeoperadores,seguealgunstipos:

Matemáticosouaritiméticos:(+,-,*,/);Atribuição(=,+=,-=,*=,/=,%=)Relacional(==,!=,<,<=,>,>=)Lógico(&&,||)

Operadores MatemáticosServempararealizaroperaçõesmatemáticas.Exemplo.

var dois = 1 + 1;var tres = 4- 1;var dez = 5 * 2;var cinco = 10 / 2;

Desenvolvimento web

www.triway.com.br

Operadores de AtribuiçãoServeparaatribuiralgumvalor.Existemseistiposdeoperadoresdeatribuição.

Simples=Incremental+=Decremental-=Multiplicativa*=Divisória/=Modular%=

Exemplo.

var valor = 1; // valor = 12 valor += 2; // valor = 33 valor -= 1; // valor = 24 valor *= 6; // valor = 125 valor /= 3; // valor = 46 valor %= 3; // valor = 1

Basicamenteosoperadoresdeatribuiçãonoseconomizaemescritadecódigos,jáqueessasmesmasfunçõespoderiamosescrevercomooperaçõesmatemáticas.

Operadores Relacionais Comoopróprionomediz,essesoperadoresfazemrelaçõesentrevariáveisouva-lores.Podemosfazerasseguintesrelaçõesdedados:

Igualdade==Diferença!=Menor<Menorouigual<=Maior>Maiorouigual>=

Exemplo.

var valor = 2;var t = false ;t = ( valor == 2); // t = truet = ( valor != 2); // t = falset = ( valor < 2); // t = falset = ( valor <= 2); // t = truet = ( valor > 1); // t = truet = ( valor >= 1); // t = true

Desenvolvimento web

www.triway.com.br

Operadores Lógicos Para verificarmos duas oumais condições aomesmo tempo usamos operadoreslógicos.OJavaScriptnosoferecedoistiposdeoperadoreslógicos,quesão:

“E”-&&“OU”-||

var valor = 30;var teste = false ;teste = valor < 40 && valor > 20; // teste = trueteste = valor < 40 && valor > 30; // teste = falseteste = valor > 30 || valor > 20; // teste = trueteste = valor > 30 || valor < 20; // teste = falseteste = valor < 50 && valor == 30; // teste = true

Estudebastanteoperadorespoiselessãoabaseparamuitosscriptsquevocêirãoescreveremsuavidadedesenvolvedor.

Desenvolvimento web

www.triway.com.br

If e else

if e else ifeesle(se,senão),sãocomandodedigamosverificação,ondeseumafunçãoforverdadeiroeleéexecutadoousenãonãoforoutrafunçãoéexcutada.Imaginamosqueumamigoseulhepedeumdinheiroemprestado,evocêpassapraeleaseguintecondição:

-Seeutiverodinheironobancoeulheempresto,massenãotivernãotemcomoteem-prestar.

Ébasicamenteissoqueoscomandosifeelsefazemsearespostadeifforverdadeiraeleexecutaaprimeiraação,senãoforverdadeiraeleexecutaasegundaaçã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.’);}

Desenvolvimento web

www.triway.com.br

For e while

Nome do Cliente

Nome do Cliente x 100

for e while Oscomandosforewhilesãobemúteisquandoprecisamosrepetiralgunscoman-dos.Imaginequeprecisemosexibirnatelaaseguintemensagem:

Olá,tenhaumbomdia!

imaginequetenhamosqueexibiressamensagemvintevezesnatela.Paranospoupardotrabalhodedigitaroucopiarecolarasvintevezes,podemosusarocomandowhile.Exemplo.

// aqui mostramos o numero de vezes que a mensagem foi exibidavar 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++;}

Desenvolvimento web

www.triway.com.br

Ocomandofor,fazomesmotrabalhodowhile,adiferençaéqueeledeverecebertrêsargumentos.

for ( var contador = 0; contador <= 100; contador ++) {document . writeln (’Olá, tenha um bom dia. ’);document . writeln (’<br/>’);}

EssaébaseparatrabalharcomJavaScript,esevocêtiveralgumanoçãodealgumanoçãodealgumaoutralinguagemdeprogramação,vocêvaiverquetudoissoquefalamosébasemuitaslinguagensdeprogramação.

Desenvolvimento web

www.triway.com.br

Introdução à funções

function nomeDaFuncao(){ document.writeln(‘Olá aluno!’); }

Funções UmafunçãoJavaScriptéumasequênciade instruçõesJavaScriptqueserãoexe-cutadasquandovocêchamá-laatravésdoseunome.

funçõesemJavaScriptdevemobedeceraseguintesintaxe:

function nomedafuncao(parametro) { ….}

Exemplo.

function mostraola() { document.writeln(‘Olá Mundo’);}

Paraqueafunçãosejaexecutadabastachama´laemalgumpontodapáginaHTMLcomoemumlinkporexemplo.

<a href=”javascript:mostraola()”>Mostrar Olá</a>

Desenvolvimento web

www.triway.com.br

AdquiraNossoCurso

NoCursoHTML,CSS,Javascriptvocêiráaprendernapráticacomodesenvolverumwebsitedozero.InicialmentevocêaprendesobreHTML,suastagsecomousá-las.DepoispassaporumaintroduçãoaoCSSqueéalinguagemdemarcaçãoecomointer-pretá-laeusá-la.NomódulodeJavaScriptvocêaprendeobásicoparausareentendercomofuncionaaousarbibliotecascomoJqueryporexemplo.Depoisdetodosessescon-hecimentosbásicosdas linguagens,partiremosparaamãonamassa,ondese iniciaoprocessodedesenvolvimentodositedozero.Comaulasinterativaseatrativasvocêiráaprenderdeformarápidacomocriarseuprimeirosite.

Matricule-se já!

como criar um site do zero

Internet

como criar um negócio do zero através das redes sociais

criar galeria de fotos - planejarbrasil.com.br · criar...

como criar uma startup do zero (por matt montenegro e...

ler escrever criar...

como criar e manter um site ou blog com o wordpress

manual do participante - como criar um site de sucesso final

pro/e wildfire 2 -...

1. criar blogue · 1. criar blogue entre em...

· no site powtoon.com e daniele almeida fieou com a...

criar meu web site

documento de atuação profissional - professor...

como criar um site em wordpress: passo a passo

[e-book] como criar e manter um site ou blog com o wordpress

zero - svensk byggtjänst · zero b30dg zero e30dg zero...

webinar pt/br - como criar um site (nov14)

criar site no webnode

criar logo para site e empresas

marketing para contadores: como criar um site melhor do que...

10 passos para criar um site de sucesso

e book - como criar um site