PRA40DG2_Predavanje_03

Embed Size (px)

DESCRIPTION

e poslovanje web sajt html programiranje pravljenje sajta css

Citation preview

  • HTMLomoguavakontrolunadizgledomtekstainjegovogporavnanjanawebstranici.Naovompredavanjuvideetenekeosnoveporavnavanjaiformatiranjateksta,kaoinekenaprednijetrikove.

    UranijimverzijamaHTMLa,posebnimtagovimaseformatiraotekst.Naprimer,dabistetekstuinilimasnimslovimapostavilibistegaunutartagovai.Takoe,postojaojetagpomoukojegjemogaodaseodredispecifianfont,tj.familijafontova,veliinafontaidrugo.Ovakavsistemformatiranjajeradiosaasvimdobro,alijeguioHTMLjezik,jerjebilotekoraspoznatisadrajodkodakojimseonformatirao.Nakrajujeispalotodajelodizajnkoristititagovekakobiseopisaleinformacijenawebstranicamakaoispecifinostikakoseteinformacijeformatiraju.Reenjejebilodaseeliminiutagoviformatiranja,adaseumestonjihkoristiposebnatehnologijazaformatiranjewebstranica.OvatehnologijasenazivaCSSCascadingStyleSheets.Tehnologijazvuipomalozastraujue,aliuoptenijetekosnjomformatiratitekst.Ustvari,CSSomoguavadaseuradimnogoviesatekstomnegotobisteikadamoglipomoustarihtagova.Bezobziranaovo,ipaknisusvitagovieliminisani.Naprimer,tagoviiidaljesupodraniiuvelikojmerisekoristezaformatiranjeteksta,boldiitalik,respektivno.

  • Naranijimpredavanjima,kadasmouilikakodakreiramolinkkadrugimstranicama,naelismokakoatributiobezbeujudodatnuinformacijukojaseodnosinaHTMLtag.AtributisuspecijalnekodnereiunutarHTMLtagakojeodreujutaetajtagdaradi.Onisuveomaznaajni,akiunajprostijimwebstranicama.Naprimer,atributisekoristezaporavnanjeparagrafa.Kadasezaponeparagrafpomou,pomoustyleatributamoedaseodrediporavnanjeuzlevuilidesnumarginu,ilicentralnouodnosunastranicu.PrepojaveCSSpravilazastilove,HTMLseravnaospecijalnimtagom.Atributalignseponaaoveomaslinopravilustilatextstyle,alijeizbaenizXHTMLodstraneW3C.Meutim,tagidaljeradiuveinibrowsera,aligaipaktrebaizbegavati.

    Kadaelitedapostaviteravnanjezavieparagrafailinaslovaistovremeno,moetekoristitipravilostilatextalignunutartagadivision.Samtagdivizijeinjegovkrajusutinineradenita,toihmoeprikazatikaobeskorisnim.Meutim,akoukljuitepravilostilatextalignunutartaga,onpostajeitekakokoristan.Naprimer,svetopostaviteizmeuibiecentrirano.Topodrazumevatekst,pasuse,headinge,slikeisveostaletipoveinformacija.Takoe,poravnaeuzdesnumarginusvetosenaedoprvogtaga.

  • Numerisanalistasenazivajoirangiranalista.Onpoinjetagomizavravasa.Brojeviiprelomisekreirajuautomatskisvakimtagom,acelalistajeuvuena.Nenumerisanlistailibulletlistajenerangiranalista.Poinjetagomuzavravasa.Izgledakaoureena(rangirana)lista,alisatomrazlikomtoseumestobrojevapojavljujusimboliispredsvakestavke,tjnapoetkusvakogtaga."li"unutartagaznailistitem.Definicionalistasesastojiodterminainjihovogznaenja.Onapoinjesaizavravasa.Tagoznaavasvakitermin,doktagoznaavadefinicijusvakogtermina.Prelomiuvuenostseautomatskikreiraju.Rangirane(numerisane)listesuuvueneinapoetkusvakestavkeimajubrojilislovo.Nenumerisane(bullet)listesuuvueneinapoetkusvakestavkeimajusimbol(bullet).Definicionelistesuuvuenebezikakvogbrojailisimbolaispred.

  • Iakobitrebalozvaninokoristitidefinicionelistezadefinisanjetermina,mnogiwebautoriihkoristebilogdegdeeledauvukutekst.Upraksi,tekstmoetenajjednostavnijedauvu;etepostavljanjem:napoetku,inakraju.Meutim,boljipristupzauvlaenjetekstajestedasekoristitagkojitekstuvlaibezpretpostavkezadefinicijom.

    Rangiraneinerangiranelistemogudasekombinujujednaunutardruge,doproizvoljnihnivoa.Ulistinguprikazanomnaslajdu,konstruisanajelistasastavljenaodvienerangiranihlisti.Primetietedabrowserautomatskikoristirazliitisimbolzasvakiodtriprikazananivoa,toznatnoolakavaitanje.

    Naprethodnomslajdumoglisteprimetitidabrowseruobiajenokoristidisk(punkrui)zaprvinivoliste,krunicu(prazankrui)zadrugi,aispunjenikvadratizasveostalenivoe.Meutim,postojimogunostdaseeksplicitnoizaberesimbolzabilokojinivopomou,iliumesto.Takoe,simbolmoedasepromenisamozajednustavkupomoupravilastilaliststyletypeunutartaga.Naprimer,usledeojoznaciprikazaobiseprazankruiispredreiextraisuper,alipunkvadratiispredreispecijal:extrasuperspecial

  • Pravilostilaliststyletypetakoeradiikodnumerisanihlista,aliumestodasebirasimbolzabullet,birasetipbrojailislovakojeesepostavitiispredstavkiteliste.

    Kombinovanjenumerisanih,nenumerisanihidefinicionihlista,jednihunutardrugih,omoguavaorganizovanjeinajsloenijihinformacijanaveomaitljiviprivlaannain.

    Ovajlistingprikazujekombinovanuupotreburimskihbrojevi(liststyletype:upperroman),velikihslova(liststyletype:upperalpha)imalihslova(liststyletype:loweralpha),svezajednosaobinimbrojevimaujednojmultilevellisti.Naprethodnomslajdusevidikakotakvoformatiranjedoprinosijasnomrazumevanjusadrajaoveliste.

  • Oprobani,pravipristupzaprimenuboldiitalikaukljuujeupotrebutagovai.Zapodebljanaslovateksttrebapostavitiizmeutagovai,azakurzivizmeutagovai.IakoovoradidobroubrowserimaipodranojeXHTMLom,ovajpristupipaknijetolikofleksibilanimoankaopristupnovimpravilimastilovauCSSu.Takoe,moguejegrupisatijedantipformatiranjaunutardrugog.Naprimer,akonekiteksttrebadabudeiboldiitalik,ondatrebapoetisaizavritisa.Danebiunelizbunubrowseru,obaveznotrebazatvaratitagovepoobrnutomredosledu.Sledeislajdupravoilustrujeovajprimer!

    Reenje:

  • Akosekoristitradicionalnimetodpomoutagovai,isteonebuletlistemogudasekodirajuovimtagovimaumestopravilomstila.Popravilu,svetagoveformatiranjakojisejavljajuunutartrebalobizatvoritiprenegotosepostavikrajstavke.Savremenijipristupjedasekoristepravilastilaizvierazloga:fontweightmoedaimavrednostinormal,bold,bolderilighter,fontstylemoedaimavrednostinormal,italicioblique

    Alternativastilovima,kadajeupitanjuboldiitalik,jesutagovii.Uveinibrowseratagimaefekatsliantagu,doktagdelujekaotag.Ponekima,tagoviismatrajuseunapreenjemuodnosunaina,jeroniimplicirajudateksttrebadapoprimisamospecijalnonaglaavanje,umestodasediktiratanokakoesetakavefekatpostii.Drugimreima,browsernemoraobaveznodainterpretirakaopodebljantekst,nitikaokurziv.OvoinitodasuovadvatagapoeljnijauXHTMLu,jertekstudajusmisaouporedosanainomnakojieseonprikazati.Usvakomsluaju,svedoksujouvekpodranitagovii,tojetrenutnosluaj,nebitrebalodabudebilokakvihproblemadaseistikoriste.Poredtagova,,i,postojimnotvodrugihHTMLtagovakojiomoguavajuspecijalnoformatiranjeteksta.

  • Tagovi,iomoguavajuteknekuosnovnukontrolunaveliinomiizgledomteksta.Meutim,sigurnopostojesituacijeukojimajepotrebnaveakontrolanadveliinomiizgledomtekstanawebstranici.PreCSSa,stvarisuseodvijalenasledeinain.Kaotosevidinaslajdu,atributizabojuiveliinuunutartagaomoguavalisuizmenuizgledatekstabezvelikognapora.Iakojeovajpristupdobroradio,onjezamenjensamnogosuperiornijimpristupomzaformatiranjezahvaljujuiCSSstilovima.Danassekoriste:fontfamily,fontsize,color,...Naprimerusuprikazanidvasluaja.Uprvom,arialjezadatakkaoprimarnifont.Kadasezadajefamilijafonta,nebitnojedalisetopievelikimilimalimslovima,takodasearialneerazlikovatiodArialiliARIAL.Osimtoga,jednostrukinavodsekoristizareitimesromanzatotoizmeunjihpostojirazmak.Pravilastilafontasizeicolor,takoeseestokoristezakontroluveliineibojefonta.Pravilofontsizemoedasekoristizapodeavanjeveliinevrednostimasmall,mediumililarge,amoeinaegzaktnuvrednostizraenuutakama,kaotosu12ptili14pt.Bojamoedasepodesinanekupredefinisanubojukaotojewhite,black,blue,rediligreen,amoedasepodesiinaspecifnubojuprekonjenogheksadecimalnogkoda,naprimer#FFB499.Nasledeemslajdujeprikazanaprimenaovogstilanastranicisakoarkaima.

  • Tagkaotosemoevideti,koristisevieputakrozceokod.Ovajtagomoguavadasepostaviskupstilovanajedandeosadraja,toznaidamoeteizolovatipojedinereiilireeniceunutarparagrafa,nasuprotstilizacijecelogblokatekstakorienjemtagovaili.AkobrowserpronaefontpodnazivomVerdana,onebitikorien.Usuprotnom,traieArial.NaslicijeprikazanastranicasakorienimfontomTrebuchetMS.Ukolikonijedanodnavednihfontovanepostojiusistemu,browserekoristitidefaultfont(obinojetoTimesNewRoman).

    VeinafontovadanassadriposebneslovneznakezarazneEvropskejezike,izmeuostalogizanaeslovneznakebilolatininogiliirilinogpisma.Naprimer,akcentovanoureiCaf.Takoe,mogusenainekolikomatematikihsimbolaiznakovainterpunkcije.Svioviznacimogudaseumetnuusadrajwebstraniceunoenjemodgovarajuegkodaprikazanogutabeli.Proirenispisakkodovamoesenaionlinenaadresi:http://www.webstandards.org/learn/reference/charts/entities/named_entities/

  • HTMLiXHTMLkoristeposebankdpoznatkaoslovnientitetkojimseprikazujuznacikaoi.Slovnientitetiseuvekoznaavajusa&napoetkuisa;nakraju.Utabelisuprikazaninajeekorienislovniznaciisimboli,premdaHTMLpodravamnogovie.Naprimer,znakkopirajtailiznakregistrovanetrinemarkenjihprikazujetekodomiDabistekreiralisimbolneregistrovanetrinemarke(),moetekoristitisledeetagove:tmilitmzamanjuverziju.Premdasesimbolimoguzadavatiprekokodnogbroja,istotakosvakisimbolmoedaseodrediiprekosvogmnemonikogimena,tojeestolakezapamtiti.EvodvanainadanapieteCaf:CafilicafPrimerupotrebesimbolaukontekstuBritanskoghumora.

  • RanijejepokazanodasatagommoedasekreiralinkkadrugimHTMLstranicama.Uovomprimeru,tagkorienjezapozicioniranjenarazliitimdelovimajedneteisteHTMLstranice.OvoomoguavadaseHTMLdokumentprelominaviesekcija,atakoeotvaramogunostizradetabelesasadrajem,ukojojsusvestavkelinkovikaodreenimnaslovimaunutaristogdokumenta.Istotako,nakrajusvakesekcijemoesepostavitilinkkojikorisnikapozicioniranazad,navrhstranice.Poredtoga,linkmoedaotvoridrugustranicuidakorisnikaistovremenopostavinatanulokacijuunutartedrugestranice.Linkovinesluesamodameusobnopovezujudveiliviestranica.Linkmoedaseupotrebizamomentalnosastavljanjeislanjeemailporuka.Tagdobiojenazivodreianchor(sidro),toznaidalinksluikaovezakaodreenommestunawebstranici.Ovajtag,takoe,moedasekoristizaoznaavanjemestanastranicipremakojemkasnijemogudasepravelinkovi.Evokakosetoradi.Pozicijaseoznaiankorom

    alinkkatojpozicijipravisetagom

    VratisenaIndex.

    Simbol#znaidasere"top"odnosinapostojeiankor(poziciju)unutaristestranice,umestonadrugustranicu.KadakorisnikkliknenaVratisenaIndexwebbrowserprikazujesegmenttestranicesaankoromnasamomvrhuprozorabrowsera.Linkovanjekaankorimanijeogranienonatodamorajudabudunaistojstranici.Linkmoedasepravipremaankorukojisenalazinadrugojstranicitakotoseuadresiukucanazivdatoteketestranicepraenosa#,posleegaseukucanazivankora.Uprimerunaslajdu,kadakorisnikkliknemiemnareenicuTisiruan,prljavismrdi,alimiteipakvolimo.Otvoriesestranicasonnets.htmlibrowsersepostavljanapozicijugdesenalaziankorIDzaankoremoebitibilokakvaalfanumerikakombinacija,alijepreporukadaIDuvekponeslovom(uovomprimerupoinjerejusonnetpraenorednimbrojemsoneta.Simbol#jeobaveznoukljuitisamoulinku.Netrebadasekoristiuimenovanjuankorajerondalinkkatakvomankoruneeraditi.

  • Osimlinkovanjaizmeustranicaiizmeudelovastranicaidelovaistestranice,tagomoguavaslanjeemailanazadatuemailadresu.Ovojenajjednostavnijinaindaseomoguiposetiocudastupiukontaktsavama.Naravno,moetesamonavestisvojuemailadresukaotekstinadatisedaevasnekokontaktirati.Pritom,moedasedesidaposetilacpogrenoukucaemailadresuietonevolje.Meutim,posetiocimamoeteomoguitidavamgotovobezikakvognaporaaljuemailtakotokliknunalinkkojiotvaraprogramzaslanjeemailasaunapredukucanomvaomemailadresom.Takavlinkizgledaovako:Javitenamse.IliakotrebadasevidiVaaemailadresa:petar@petrovic.comOsimsamodaseotvoriprogamzaslanjeemailasaveunetomadresom,moetedodatnoolakatislanjeakounapredpopuniteiostalapoljaSubject(naslovporuke)iBody(teloporuke).Ovosedodavanjeatributasubjectibodyunutarmailtolinka.Atributiserazdvajajuodemailadresesasimbolomampersan(&)Primerprikazannaslajduposlaeemailsapopunjenim:adresomprimaoca(To:)[email protected],naslovomemail(Subject:)Kakopolozitiispitisadrajemporuke(Body):Kakonajlaksedapolozimispit?Dalideliteispitnapitanja?

    Jedanodnainkakospameriprikupljajuemailadresejestepomouprogramakojiautomatskipretraujuwebstranicezamailtolinkove.Pavaskaogromizvedranebabombardujumnogimemailovima.Evojedantrikkojievaszatitiodveinespamera.Naime,moetenekeslovneznakevaeemailadresedakodiratetoezbunitiscraperprograme.Naprimer,slovoeuemailadresimoetezamenitikodomeOnotojebitnojestedaebrowserinterpretiratiovajkdkaoslovoe,ikrajnjirezultatebitiistigledanosaaspektabrowsera.Meutim,automatizovaniprogramizasnimanjeemailadresapretraujusiroviHTMLkdivideeprilinozamrenuemailadresu.

  • NaranijempredavanjuprikazalismoupotrebljivostGoogleMapsikolikojetoefikasnokadaelitedapodeliteinformacijesadrugimaprekovaihwebstranica.DrugisajtkojisadriizuzetnodobarsadrajjeWikipedia,kojisenalazinaadresihttp://www.wikipedia.org/.Tojenekavrstaenciklopedijealijebesplatna.Jedinstvenajepotometosvakomoedajeureuje!Da,ljudikojimajestalodonekihtema,dajusvojdorpinosipratetetemekakobiobezbedilidasveinformacijebuduobjektivneiprecizne.NegovorimoosavrenostiWikipedije,alijejedanvrlouspeandrutvenieksperimentkojisepretvoriouvrlokoristanalat.PakakvevezeimaWikipedijasaHTMLiCSS?ImautometousvojimstranicamamoetepostavitilinkovekadetaljniminformacijanaWikipedijiinatajnainomoguiliposetiocudadoedomnotvakorisnihinformacija.UprimerujeprikazanokakosanaestraniceokoarkaimamoemosaznatinetovieoPredraguStojakoviuinjegovomangaovanjuuHornetsima.Kd%C4%87jespecijalankdpomoukojegseprikazujeslovouwebadresi.