ÓZBEKISTAN RESPUBLIKASI JOQARI HÁM ORTA ARNAWLI BILIMLENDIRIW MINISTRLIGI ÁJINIYAZ ATINDAĠI NÓKIS MÁMLEKETLIK PEDAGOGIKALIQ INSTITUTI M.X.ALLAMBERGENOVA, A.J.KEŃESBAEV HTML TILINDE WEB-SAYT TAYARLAW Metodikalıq oqıw qollanba (5110700 – informatika oqıtıw metodikası tálim baġdarı hám kompyuterden paydalanıwshılar ushın) Nókis-2019
Html tilinde web-sayt tayarlaw Dúziwshiler: M.X.Allambergenova, A.J.Keńesbaev. Oqıw-metodikalıq qollanba web-sayttı jaratıw boyınsha ámeliy kónlikpelerdi rawajlandırıwġa arnalġan. Html tilinde web-saytlar tayarlaw ámeliy mısallarda kórsetilgen. Qollanba pedagogikalıq institutlardıń “Informatika oqıtıw metodikası” tálim baġdarı talabaları, magistrantlar hám de web-sayt jaratıwġa qızıġıwshılar ushın arnalġan. Sonıń menen birge bul metodikalıq oqıw qollanba barlıq kompyuterden paydalanıwshılar, oqıtıwshılarġa, ásirese joqarı hám orta arnawlı oqıw orınlarında informatika hám informaciyalıq texnologiyalar páninen, ulıwma bilimlendiriw mekteplerinde informatika páninen sabaq beretuġın oqıtıwshılarġa hámde talabalarġa paydalı boladı. A.Abdullaev Juwapı redaktor: - ekonomika ilimleriniń kandidatı, Nmpi informatika oqıtıw metodikası kafedrası docenti. Sh.Allamuratov Pikir bildiriwshiler: G.Kaypnazarova – f.-m.i.k, Al Xorazmiy atındaġı Tashkent informaciyalıq texnologiyalar universitetiniń Nókis filialı, informaciyalıq tálim texnologiyaları kafedrası baslıġı. – fizika-matematika ilimleriniń kandidatı, Nmpi matematika oqıtıw metodikası kafedrası docenti. Ájiniyaz atındaġı Nókis mámleketlik pedagogikalıq institutı Oqıw-metodikalıq keńesi (15-oktyabr 2018–jıl №2 sanlı bayanlama) májilisi qararı menen baspaġa usınıs etilgen. 2
Html tilinde web-sayt tayarlaw Kirisiw Màmleketimizde joqarı pikirlewge iye, intellektual hàr tàrepleme rawajlanġan shaxslardı tàrbiyalaw biziń tiykarġı maqsetimiz esaplanadı. Hàzirgi waqıtta zamanımızdıń tez pàt penen rawajlanıp baratırġanın esapqa alıp ilim-pànniń jànede rawajlanıwı hàm de keleshek àwladtı tàlimge qızıqtırıw ushın oqıw metodikalıq qurallarınıń jańa àwladın islep shıġıw aktual máselelerden esaplanadı. Jeke web-saytıńız bolıwın qàleysizbe? Onda bul metodikalıq qollanba siz ushın. Bul metodikalıq qollanbada siz web-sayt jaratıwdı nólden baslap úyrenesiz. Úyreniwińiz ushın kompyuter hàm internet haqqında azġana bilimge iye bolsańız jeterli. Sabaqlardı izbe-iz úyreniw arqalı ózińizdi web-betlerin jaratıw boyınsha ámeliy kónlikpeńizdi rawajlandırıp barasız. Bul metodikalıq qollanba júdà àpiwayı hàm túsinerli ámeliy mısallar járdeminde bayanlanġan. Metodikalıq ámeliy kórsetpelerdi dıqqat penen itibarlı bolıp aytılġanlardı àmelde qollap barsańız : Html teglerin úyrenesiz Jeke ámeliy kónlikpeńiz rawajlanadı Web-sayttı internetke jaylastırıwdı úyrenesiz Internet arqalı pul taba alıw kónikpesine iye bolasız Ózińizdiń atıńızdı dúnyaġa tanıtasız Shaxsiy web-saytqa iye bolasız Qısqasha pikir Búgingi kúnde internetten paydalanıwshı hàr bir insan óz web-saytı bolıwın qàleydi. Bizden kópshilik soraydı, “qalay óz web-saytımdı ashsam boladı” dep biz sayt jaratıwġa qızıġıwshı oqıwshılarġa rus, inglis tilindegi video sabaqlıq yàki .pdf formattaġı fayllardı usınıs etsek qızıġıwshılardı bul túrdegi metodikalıq qollanbalar qızıqtırmaydı yàki oqıwġa qıynaladı. Biz bulardı esapqa alġan halda web-sayt 3
Html tilinde web-sayt tayarlaw tayarlawdı ámeliy kórsetpeler járdeminde úyretiwdi maqset ettik. Sonlıqtan bul oqıw- metodikalıq qollanbada hàmme sabaq àmeliy túrde úyretip barıladı. Sayt tayarlawda kerek bolatuġın programmalıq hàm jumıs quralları. Notepad++ yàki bloknot dàstúri Internet browseri Mozilla Firefox yàki Opera mini, Google Chrome h.t.b. 4
Html tilinde web-sayt tayarlaw 5
Html tilinde web-sayt tayarlaw 1-sabaq. Html de islew hàm tiykarġı tegleri Html de web-sayt jaratıw ushın hesh qanday arnawlı dàstúr kerek bolmaydı. Bizge Windows operacion sistemasında notepad(блокнот)tıń ózi jeterli boladı. Блокнот dàstúrin iske túsiriw ushın: Пуск Все программы Стандартные Блокнот yàki tómedegi (1- súwret) tegi izbe-izlikti orınlaw arqalı iske túsiriw múmkin. 1-súwret Izbe-izlikti orınlap bloknottı ashamız. Nàtiyjede tómendegi jumıs maydanı payda boladı. (2-súwret) 6
Html tilinde web-sayt tayarlaw 2-súwret Bul ashılġan jumıs maydanına tómendegi kodlardı kiritemiz. <html> <head> <title>bas bet</title> </head> <body> Sàlem bul meniń birinshi web-saytım </body> </html> Endi bul kodtı web-bet kórinisinde saqlawımız kerek, bunıń ushın ctrl+s klavishaların birgelikte basıp, payda bolġan saqlaw maydanına index.html yàki index.htm kórinisinde saqlaymız. 7
Html tilinde web-sayt tayarlaw 3-súwret 4-súwret Saqlaġan fayldı browser yàki internet explorer de júkleymiz hàm nàtiyjede tómendegi kórinis browserde sàwlelenedi. 8
Html tilinde web-sayt tayarlaw 5-súwret Endi àmelde úyrengenlerimizdi teoriyada kóremiz. Túsindiriw: Biziń joqarıda úyrengen kodlarımız Html tilinde jazılġan. Qàlegen web-sayt óziniń Html kodına iye. (meyli ol wordpress yàki joomla bolsın). Html (hyper text markup language) - giper múrájetler menen islesiwshi til. Giper tekstti belgilew tili. Html tilindegi kodlar ashılıwshı hàm jabılıwshı tegler arasında jaylasadı. Mısalı <html> (ashılıwshı teg) </html> (jabılıwshı teg). Web-sayt tayarlawda jazılġan kodlar .htm yàki .html keńeytpesi menen saqlanadı. Html arqalı hàr qıylı elementlerdi (video, audio, foto h.t.b) web-saytqa jaylastırıw imkàniyatı bar. <html> - betti ashıw. Bul teg(descriptor) web-bettiń eń joqarısında jaylasadı. <head> - bettiń bas bólegi. <title> - sayt atı kiritiledi. </title> - sayt atı jabıladı. </head> - bettiń bas bólegin jabadı. <body> - sayttıń tiykarġı bólimi. </body> - sayttıń tiykarġı bólegi jabıladı. </html> - bet tolıq jabıladı. Bul kodlardıń eń tómengi bóleginde jaylasadı hàm juwmaqlanadı. Diqqat! Html tegleri arasında bos orın (probel) qalmawı kerek. 9
Html tilinde web-sayt tayarlaw < html > bul qàte. <html> bul durıs. <head><title>bas bet</title></head> - joqarıda kórinedi. 6-súwret <body> sàlem bul meniń birinshi web-saytım </body> - bul tegler arasına barlıq maġlıwmatlar jaylastırıladı. 7-súwret 10
Html tilinde web-sayt tayarlaw 2- sabaq. Saytımızġa tekst kiritemiz Bul sabaqta saytımızġa tekst kiritiwdi úyrenemiz. Web-saytta informaciyalardıń kópshiligi tekst kórinisinde uzatıladı. Tekstli maġlıwmatlardı browserge jaylastırıwdı úyrenemiz. Keyingi sabaqlarda shriftler menen islewdi kórip shıġamız. Demek bloknottı júklep tómendegi kodtı kiritemiz. <html> <head> <title> Bas bet </title> </head> <body> <h1>Web-sayt haqqında ulıwma túsinik</h1> <p>Internette maġlıwmatlar web-betlerde uzatıladı. Web-betlerdiń jıyındısı web-sayt dep ataladı. Web-sayt tiykarınan aralıqtan baylanıs jasaw, maġlıwmat almasıw ushın arnalġan. </p> <h2>Web-saytlar qanday tillerde jazıladı?</h2> Web-saytlar qaysı tilde jaratılġanına qaramastan óziniń Html kodına iye. Sayt tayarlaw ushın tiykarınan Html/css/js/php tillerinen paydalanıladı. </body> </html> Endi kiritken kodımızdı web-bet kórinisinde saqlaymız. Bloknottan файл=> сохранить как tı tańlaymız. Fayldi tekst.html keńeytpesi menen saqlaymız. Saqlanġan faylımızdı browserde ashamız. 11
Html tilinde web-sayt tayarlaw 8-súwret Túsindiriw: Joqarıdaġı tegler tiykarınan temalar atamasın qoyġan waqıtlarda paydalanıladı. <h1></h1> tegi aralıġına jazılġan tekstler eń úlken bolıp kórinedi. <h2></h2> tegi <h1> teginen kishirek kórinedi. Tómendegishe kórinedi: <h1> tekst </h1> <h2> tekst </h2> <h3> tekst </h3> <h4> tekst </h4> <h5> tekst </h5> <h6> tekst </h6> Web-betke kirgen paydalanıwshı birinshi bolıp sayt temasın kóredi. Sayt teması <h1></h1> yàki <h2></h2> tegleri menen kiritiledi. Joqarıda aytıp ótken jàne bir <p> tegi bar bolıp, bul taza qatardan baslaw degendi bildiredi(abzac). 12
Html tilinde web-sayt tayarlaw 3-sabaq. Saytımızda tekstti shıraylı etip jazıw hàm hàreketlendiriw Saytımızġa kirgen paydalanıwshınıń tez túsiniwi hàm qaysı termin qaysısına tiyisli ekenligin biliw ushın, saytımız tekstlerin shıraylı túsinerli etip jazıwımız kerek boladı. Màselen bir jerlerde qalıń qılıp, qıysaytıp, astın sızıp, ortaġa, shepke, ońġa, tómenge, joqarı tàrepke jaylastırıw kerek boladı. Biz sol teglerdi úyreniwdi baslaymız. <html> <head> <title>bas bet</title> </head> <body> <h1 align=\"center\">Kompyuter qurılmaları</h1> <p>Kompyuterdiń tiykarġı neshe qurılması bar? <b>3 túri bar. Bular <i>Monitor</i> <u>Sistema blogı</u> <i>Klaviyatura</i> <hr> <p align=\"right\">Bul tekst oń tàrepte kórinedi</p> <p align=\"center\"> Bul tekst ortada kórinedi </p> <p align=\"left\"> Bul tekst shep tàrepte kórinedi </p> </body> </html> Kiritken kodımızdı ctrl+s ti birgelikte basıp saqlaymız. Nàtiyjede tómendegi kórinis payda boladı: 13
Html tilinde web-sayt tayarlaw 9-súwret Túsindiriw: Kiritilgen teglerdi úyrenip shıġamız. <br> - taza qatardan baslaw ushın qollanıladı(enter – klavishasi wazıypası). <b> - (inglis-bold) qalıń(qoyıw) qılıp jazıw ushın qollanıladı. <u> - kiritilgen teksttiń astın sızadı. <i> - tekstti qıysaytıp jazıw ushın qallanıladı. <hr> - web-bette gorizantal sızıq túsiriw ushın qollanıladı. <p align=\"right\"> - tekst oń tàrepten kórinedi. <p align=\"center\"> - tekst ortada kórinedi. <p align=\"left\"> - tekst shep tàrepten kórinedi. Bul teglerdiń ayırımların birgelikte qollanıwġada boladı. Màselen <b><i>bul qalıń, qıysıq tekst</i></b> <u><b><i>bul qalıń, qıysıq, astı sızılġ an tekst</i></b></u> 14
Html tilinde web-sayt tayarlaw Tekstti hàreketlendiriw Web-saytta tekstti hàreketlendiriw ushın <marquee> ashılıwshı hàm jabılıwshı tegi isletiledi. Demek ámeliyatta tekserip kóremiz. Bunıń ushın bloknottı ashamız hàm de tekstti hàreketlendiremiz. <html> <head> <title>Bas bet</title> </head> <body> <marquee direction=behavior>bul tekst hàreketlenedi</marquee> </body> </html> Endi kiritken kodımızdı saqlaymız hàm browserde júklep kóremiz. 10-súwret 15
Html tilinde web-sayt tayarlaw Bul jerde súwret bolıp saqlanġannan keyin nàtiyjeni kóriw qıyınıraq, joqarıdaġı kodlardı kiritiw arqalı nàtiyjeni browserde kóriwge boladı. <marquee> tegin tómendegi parametrler menen birgelikte isletiwge boladı. <marquee behavior=alternate>bul jerde tekst</marquee> - tekstke shegara qoyıw ushın qollanıladı . Tekst browserden sırtqa shıġıp ketpeydi. <marquee direction=down>bul jerde tekst</marquee> - tekst joqarıdan tómenge qaray hàreketlenedi. <marquee direction=up>bul jerde tekst</marquee> - tekst tómennen joqarıġa qaray hàrekerlenedi 16
Html tilinde web-sayt tayarlaw 4-sabaq. Teksttiń kólemi, reńi hàm shriftin ornatıw Bul sabaqta biz <font> tegi menen tanısamız. <font> teginiń tiykarġı parametrleri bolġan color, size, face parametrlerinen paydalanıwdı úyrenemiz. Bul sabaqtı úyreniw arqalı uzatılıp atırġan informaciyanı paydalanıwshıġa anıq hàm sulıw kóriniste jetkerip beriwdi kórip ótemiz. Demek bloknottı júklep teksttiń reńin ózgertemiz. <html> <head> <title>bas bet</title> </head> <body> <font color=”green”>Bul jasıl reńli tekst</font> </body> </html> Endi kiritken kodımızdı saqlaymız hàm browserde júklep kóremiz. 11-súwret Túsindiriw: <font> - bul teksttiń shrift, kólemi hàm reńin ózgertiwshi teg. Color - <font> teginiń atributı esaplanıp àdette tekstke reń beriw ushın qollanıladı. 17
Html tilinde web-sayt tayarlaw “green” – bul jerge tekst reńi kiritiledi. (bul jerde biz tekst reńin green dep kirittik onıń tiykarġı Html degi kodı #008000 kórinisinde jazıladı) Màselen: <font color=”#008000”>bul jasıl reńli tekst</font> yàki tómendegi kóriniste jazıw mu’mkin. <font color=”red”>bul qizil reńli tekst</font> Reńlerge tiyisli kodlardı yadlap alıw shàrt emes reńlerdiń inglis tilindegi jazılıwın kiritiw jeterli. Tómende sayt tayarlawda kerek bolatuġın reńler kollekciyası. Ariseblue, aquamarine, bisque, blue, burlywood, chocolate, cornsilk, darkblue, darkgray, darkmagenta, darkorchid, darkseagreen, darkturquoise, deepskyblue, firebrick, fushsia, gold, green, hotpink, iwory, lavenderblue, rightblue, rightgoldenrodyellow, lightpink, righckyblue, lightyellow, rinen, mediumaquamarine, mediumpurple, mediumspringgreen, midnightblue, moccasin, oldlace, orange, palegoldenrod, palevioletred, peru, powderblue, rosybrown, salmon, seashell, skyblue, snow, tan, tomato, wheat, yellow, antiquewhite, azure, black, blueviolet, cadetblue, coral, crimson, darkcyan, darkgreen, darkoliuegreen, darkred, darkslateblue, darkviolet, dimgray, floralwhite, gainsboro, goldenrod, greenyellow, indianred, khaki, rawngreen, rightcoral, lightgreen, righcalamon, righclategray, rime, magenta, mediumblue, mediumseagreen, mediumturquoise, mintcream, navajowhite, olive, orangered, palegreen, papayawhip, pink, purple, roalblue, sandybrown, sienna, slateblue, springgreen, teal, turquoise, white, yellowgreen, aqua, beige, blanchedalmond, brown, chartreuse, cornflowerblue, cyan, darkgoldenrod, darkkhaki, darkorange, darksalmon, darkslategray, deeppink, dodgerblue, forestgreen, gxostwhite, gray, honeydew, indigo, lavander, lemonchiffon, rightcyan, lightgrey, lighceagreen, lighcteelblue, limegreen, maroon, mediumorchid, medium, slateblue, 18
Html tilinde web-sayt tayarlaw mediumvioletred, mistyrose, navy, olivedrab, orchid, paleturquoise, peachpuff, plum, red, saddlebrown, seagreen, silver, slategray, steelblue, thistle,violet, whitesmoke 12—súwret Tekst kólemin ózgertiwde <font size=”#”> teginen paydalanamız. Ámelde kóriw ushin tómendegi kodtı jazamız. Mısal: <html> <head> <title>tekst kólemi</title> </head> <body> <font size=\"1\">Bul jerde tekst jaylasadı</font><p> <font size=\"2\">Bul jerde tekst jaylasadı</font><p> <font size=\"3\">Bul jerde tekst jaylasadı</font><p> <font size=\"4\">Bul jerde tekst jaylasadı</font><p> <font size=\"5\">Bul jerde tekst jaylasadı</font><p> <font size=\"6\">Bul jerde tekst jaylasadı</font><p> 19
Html tilinde web-sayt tayarlaw <font size=\"7\">Bul jerde tekst jaylasadı</font><p> </body> </html> Kiritken kodımızdı browserde tekserip kóremiz. Tómendegi súwrette kórsetilgen. 13-súwret Tekst shriftin ózgertiwde <font face=”#”></font> teginen paydalanamız hàm shriftti jazamız.(joqarıdaġı “#” ornına tómendegi tillerden birin kiritemiz) Misal: <font face=\"calibri\"> bul tekst calibri shriftinda jazıladı </font> <font face=\"stencil \"> bul tekst stencil shriftinde jazılġan </font> <font face=\"calibri=\"2\" color=\"blue\"> bul jerde tekst jaylasadı </font> Túsindiriw: <font> - bul teksttiń shrift, kólemi hàm reńin ózgertiwshi teg. Face atributı shrift tilin tańlawda qollanıladı. 20
Html tilinde web-sayt tayarlaw “Calibri”- tekstti kiritilgen “Calibri” (bul jerge qàlegen tildi kiritiwińizge boladı) shriftında jazadı. 5-sabaq Web-bette fon reńin ózgertiw Web-saytlar fonı àdette aq reńde boladı. Sol fondı qàlegen reń menen almastırıwġa boladı. Hàm <body> tegi ishine jazıladı. <body bgcolor=”yellow”> tegi arqalı jaylastırıladı. Web-sayt fonına súwret jaylastırıw ushın <body bgcolor=”súwret_ati.jpg”> tegi arqalı kiritiledi. Demek àmeliyatta bul teglerden paydalanıp kóremiz. Bloknottı ashamız hàm de tómendegi kodlardı kiritemiz. <html> <head> <title>Bas bet</title> </head> <body bgcolor=\"yellow\"> fon reńi sari </body> </html> Kiritilgen kodtı saqlaymız hàm browserde tekserip kóremiz. 21
Html tilinde web-sayt tayarlaw 14-súwret 2-mısal <html> <head> <title>Bas bet</title> </head> <body bgcolor=\"green\"> <font color=yellow>fon reńi jasıl tekst bolsa sarı reńde</font> </body> </html> Kiritilgen kodtı saqlaymız hàm browserde júklep kóremiz. 22
Html tilinde web-sayt tayarlaw 15-súwret Dıqqat! Bul sabaqta úyrengen teglerińizdi islewdi rejelestirip qoyġan joybarġa maslastirġan halda jaylastırıp úyrengenlerińizdi àmelde orınlap kóriń! Web-bette Màmleketlik tàlim standartı (mts) boyınsha 3 túrli reńnen artıq reń isletilmewi kerek. Túsindiriw: Bgcolor atributın súwret qoyıwda qollanılġan waqıtta body teginiń atributı wazıypasın orınlaydı. Bgcolor-background color sóziniń qısqartılġan kórinisi hàm onı Html de qaytıp qollansańızda túsinedi. 6-sabaq Web-betke súwret jaylastırıw Web-sayt tayarlawda tiykarġı kerek bolatuġın nàrse bul saytqa súwret jaylastırıw bolıp esaplanadı. Sebebi kiritilgen tekstke say keliwshi súwretti saytqa jaylastırıw arqalı sayttıń dizaynın islep shıġamız. Súwretti web-saytqa jaylastırıw ushın <img src=”súwret.jpg”> teginen paydalanamız. Bul taq teg esaplanadı. Onıń qabıllawshı keńeytpeleri .jpg, .jpeg, .png, .bmp h.t.b formattaġı fayllar esaplanadı. Endi saytqa súwret jaylastırıw ushın Total Commander den sayt atlı papka jaratamız. Papka ishine qàlegen .jpg, .jpeg, .png, .bmp formattaġı súwretti jaylastıramız. Endi bloknottı júklep kodtı kiritiwdi baslaymız. 23
Html tilinde web-sayt tayarlaw <html> <head> <title>bas bet</title> </head> <body> <img src=\"web.jpg\" width=500px; height=400px;> </body> </html> Kiritken kodimizdi html kórinisinde saqlaymız hàmde browserde júklep kóremiz. 16- súwret Túsindiriw: Dıqqat! Web-betke súwret jaylastırıw waqtında .html keńeytpeli fayl janına (bir papkaġa) súwretti jaylastırıp qoyıń. Egerde súwret basqa papkada saqlansa, súwret 24
Html tilinde web-sayt tayarlaw adresin kiritiwińizge tuwra keledi. Barlıq waqıt fayl menen súwretti birgelikte alıp júriw kerek boladı yàki mánzildi kórsetiw lazım. Mısalı: images/súwret atı.jpg Eger papka fayl sırtında jaylasqan bolsa: ...\\papka\\fayl.index kórinisinde jazıladı. <img src=\"web.jpg\" width=500px; height=400px;> img src – bul jerde súwret kiritiw ushın qollanılatuġın tiykarġı birden-bir teg esaplanadı. “web.jpg” – súwret adresi hàm súwret atı saqlanadı. Width-“500px” – súwret eni uzınlıġın beredi.(bul jerde pixseldi qàlegenshe ózgertiw imkanı bar). Height=”400px” – súwrettiń vertical uzınlıġı. 7-sabaq Web-betke video jaylastırıw Web-betke video jaylastırıw ushın <video src=”video atı” controls> tegi isletiledi. Saytqa video maġlıwmatlar jaylastırıw arqalı sayttıń imkàniyatların bir qansha rawajlandırıw múmkin. Sebebi video arqalı insan maġlıwmattı ózlestiriw dàrejesi 80%ti qurawı ekspertlar tárepinen anıqlanġan. Aldınġı 5-sabaqtaġı siyaqlı video maġlıwmatlardı da .html keńeytpeli fayl janında saqlaw kerek yàki video jaylasqan mànzildi kiritiw kerek boladı. Web-betke video jaylastırıwdı baslaymız. <html> <html> <title>Bas bet</title> </head> <body> <video src=\"serebro.mp4\" controls width=\"280\" height=\"280\"> </body> </html> Kiritken kodımızdı saqlap, browserde júklep kóremiz. 25
Html tilinde web-sayt tayarlaw 17-súwret Endi qàlegen video maġlıwmattı web-betke jaylastıra alasız. Túsindiriw: <video src=\"serebro.mp4\" controls width=\"280\" height=\"280\"> Video src – web-betke video jaylastırıw tegi esaplanadı. ”#” – bul qos tırnaqsha ishine video adresi kiritiledi. Controls – atributı videonı web-bette sàwlelendiriw ushın qollanıladı. (qadaġalap turıw ushın) Width - “200px” – video eni uzınlıġın beredi. (bul jerde pixeldi qàlegenshe ózgertiw imkanı bar) Height=”200px” – videonıń vertikal uzınlıġı. 26
Html tilinde web-sayt tayarlaw 8-sabaq Web-betke muzıka jaylastırıw Web-betke muzikalı maġlıwmatlardı jaylastırıw <audio src=\"#\" controls> tegi jàrdeminde àmelge asırıladı. Demek web-betke muzika jaylastırıwdı baslaymız. Bunıń ushın bloknottı ashamız hàm tómendegi kodtı kiritemiz. <html> <head> <title>Bas bet</title> </head> <body> <audio src=\"adil.mp3\" controls> </body> </html> Kiritken kodımızdı saqlaymız hàm browserde nàtiyjeni tekserip kóremiz. 18-súwret 27
Html tilinde web-sayt tayarlaw 9-sabaq Web-betlerde freymlerden paydalanıw Freymlerdiń tiykarġı wazıypası bir web-bettiń ishinde bir neshe web-betlerdi birlestiriwden ibarat. Freymlerden paydalanıw ushın <frameset> teginen paydalanıladı. Demek freymlerden paydalanıwdı àmelde kórip shıġamiz. Bloknottı ashamız hàm tómendegi kodtı kiritemiz. <html> <head><title>shep freym.html</title></head> <body bgcolor=\"cyan\"> <h3>shep freym</h3> Bul freym ekinshi bolimde jaylasıwı kerek bolgan bazı bir maglıwmattı óz ishine aladı <a href=\"info_1.html\" target=\"rightframe\"> Birinshi bólimge ótiw (oń tarepten \"info_1.html\" faylın júkleymiz)</a> <br> <a href=\"info_2.html\" target=\"rightframe\"> ekinshi bólimge ótiw (oń tárepten \"info_2.html\" faylın júkleymiz)</a> </body> </html> Diqqat! Barlıq fayllardı bir papkada saqlań! Bolmasa kiritken kodlarımız web-bette kórsetpeydi. Bul faylımızdı shep freym.html dep saqlap qoyamız hám browserde júklep kóremiz. 28
Html tilinde web-sayt tayarlaw 19-súwret Endigi orınlaytuġın jumısımız, jàne bir neshe .html atlı fayllar payda etemiz. Demek basladıq. Bloknottı júklep tómendegi kodtı kiritemiz. <html> <head></head> <body bgcolor=\"lihhtgrey\"> <h3>oń freym</h3> \"info_1\" fayli<br/> Bul freym birinshi bólimde jaylasıwı kerek bolǵ an bazı bir maǵ lıwmattı óz ishine aladı. </body> </html> Bul kiritken kodımızdı info_1.html kórinisinde saqlaymız hám nàtiyjeni browserde júklep kóremiz. 29
Html tilinde web-sayt tayarlaw 20-súwret Endi freymlerden paydalanıw ushın jàne .html atlı fayl jaratamız. Bloknottı júklep tómendegi kodtı kiritemiz. <html> <head></head> <body bgcolor=\"snow\"> <center> <h1>Bul freymde bettiń joqarġı bólegi jaylasadı</h1> </center> </body> </html> Bul kiritken kodımızdı header.html kórinisinde saqlaymız hàm nàtiyjeni browserde júklep kóremiz. 30
Html tilinde web-sayt tayarlaw 21-súwret Endi freymlerden paydalanıw ushın jàne .html atlı fayl jaratamız. Bloknottı júklep tómendegi kodtı kiritemiz. <html> <head></head> <body bgcolor=\"snow\"> <center> <h3>Bul freymde bettiń tómengi bólegi jaylasadı</h3> </center> </body> </html> Bul kiritken kodımızdı footer.html kórinisinde saqlaymız hàm nàtiyjeni browserde júklep kóremiz. 31
Html tilinde web-sayt tayarlaw 22-súwret Payda etken fayllardı freymlerde biriktiriw ushın .html faylın jaratamız hàm bloknotqa tómendegi kodtı kiritemiz. <html> <head> <title>Freymler menen islew</title> </head> <frameset rows=”10%, 80%,*”> <frame src=”header.html” noresize scrolling=”no”> <frameset cols=”25%, 75%,*”> <frame src=”shep freym.html”> <frame src=”info_1.html” name=”rightframe”> </frameset> <frame src=”footer.html”> </frameset> <noframes> Siziń browserińiz freymdi kórsete almaydı </noframes> </html> 32
Html tilinde web-sayt tayarlaw 23-súwret Túsindiriw! <!-- rows qatarlar --> <!-- cols baġana --> Footer – bul fodval, yaġnıy sayttiń tómengi bólimi. Bul freymler tuwralı hàr bir browser ishinde túsinerli etip jazılġ an. 33
Html tilinde web-sayt tayarlaw 10-sabaq Markerlengen dizimler Markerlengen dizimlerden web-betlerde qatardı nomerlewde yáki qandayda bir belgiler qoyıw arqalı bir qatar izbe-izliklerdiń anıġıraq kóriniwi ushın qollanıladı. Demek àmeliyatta bir neshe mısallar kóremiz hàm tómendegi kodlardı bloknotqa kiritemiz. <html> <head> <title>Bas bet</title> </head> <body> <ul> <li>Keńesbaev Àdil</li> <li>Tilewbergenov Qàllibek</li> <li>Qoylıbaeva Náwbahar</li> </ul> </body> </html> Bul kiritken kodımızdı index.html kórinisinde saqlaymız hàm nàtiyjeni browserde júklep kóremiz. 34
Html tilinde web-sayt tayarlaw 24-súwret Endi <ol> tegi hàm onıń atributı menen tanısamız. <ol> <li>Keńesbaev A</li> <li>Orinbev A</li> <li>Qarabekov A</li> <ol> Nátiyje tómendegishe kórinedi. 25-súwret 35
Html tilinde web-sayt tayarlaw 11-sabaq Web-betke kesteler jaylastırıw Web-betke kesteler jaylastırıw ushın <table></table> tegi ishinde <tr></tr> hàm <td></td> atributları menen birgelikte isletiledi. Web-bette kesteden paydalanıwdı àmeliyatta kórip shıġamız. Bloknottı júklep tómendegi kodlardı kiritemiz. <html> <head> <title>tablica</title> </head> <body> <table border=\"1\"> <tr> <td>1-ketekshe</td> <td>2-ketekshe</td> <td>3-ketekshe</td> <td>4-ketekshe</td> </tr> </body> </html> Bul kiritilgen kesteli faylımızdı keste.html keńeytpesi menen saqlaymız hàm browserde júklep kóremiz. 36
Html tilinde web-sayt tayarlaw 27-súwret Túsindiriw: <table> - tablicalar sırtın qorshap turġan keste. <tr> - keste qatarı. <td> - keste baġanası. Ólshem beriw ushın! Kesteniń ólshemlerin beriw ushın. <table width=”40px” height=”35px”>tekst</table> Qatardıń ólshemin beriw ushın. <tr width=”35px”>tekst</tr> Keteksheniń ólshemin beriw ushın. <td width=”40px” height=”50px”>tekst</td> Kesteni web-bettiń oń, shep yàki ortasına jaylastırıw ushın! <table align=” right”>tekst</table> {oń tárepke jaylastırıw ushın} <table align=”center”>tekst</table> {ortaġa jaylastırıw ushın} <table align=”left”>tekst</table> {shep tárepke jaylastırıw ushın} 37
Html tilinde web-sayt tayarlaw Web-sayt tayarlawda hàzirgi waqıtta html5 tilinen keń paydalanıladı. Html5 tilinde tablica payda etiw ushın <div class=”#”>tekst</div> ashılıwshı hám jabılıwshı tegi isletiledi. 12-sabaq Html de formalar menen islew Web-betke formalardı jaylastırıw arqalı, web-sayt paydalanıwshıları ushın informaciyalardı kiritiw hàm kiritilgen maġlıwmatlardı keyinshellik paydalanıw ushın isletiledi. Formalar <form></form> tegleri arasında jaylasadı. Formalar túymeler, tekstli aynalar, jalġawlar hàm taġı basqalardan turadı. <html> <head> <title>Baylanıs</title> </head> <body> <form action=”213.230.91.135” method=”post”> <p> <fieldset> <legend>Shaxsıy maġlıwmat</legend> Familiyańız: <input name=\"personal_lastname\" type=\"text\" tabindex=\"1\"> Atińız: <input name=\"personal_lastname\" type=\"text\" tabindex=\"2\"> Mánzilińiz <input name=\"personal_lastname\" type=\"text\" tabindex=\"3\"> <fieldset> <legend>Jaqtırġan pánińiz?</legend> <input name=\"history_illness\" type=\"checkbox\" value=\"smallpox\" tabindex=\"20\">Infomatika <input name=\"history_illness\" type=\"checkbox\" value=\"smallpox\" tabindex=\"20\">Matematika 38
Html tilinde web-sayt tayarlaw <input name=\"history_illness\" type=\"checkbox\" value=\"smallpox\" tabindex=\"20\">Inglis tili <input name=\"history_illness\" type=\"checkbox\" value=\"smallpox\" tabindex=\"20\">Rus tili </fieldset> <fieldset> <legend>Bul metodikalıq qollanba haqqında pikirińiz</legend> Bul metodikalıq qollanbadan siz web-sayt haqqında túsinikke iye bola aldıńızba? <input name=\"medication_now\" type=\"radio\" value=\"yes\" tabindex=\"35\">awa <input name=\"medication_now\" type=\"radio\" value=\"no\" tabindex=\"35\">yaq <p>Sizge web-sayt kerek bolsa<a href=\"magistr.ndpi.uz\">[email protected]</a> mánziline xat jollan! </p> <texterea name=\"current_medication\" rows=\"10\" cols=\"50\" tabindex=\"40\"> <texterea> </fieldset> <input type=\"submit\" value=\"Xattı jónetiw\"> <input type=\"submit\" value=\"Biykarlaw\"> </p> </form> </body> </html> Endi kiritken kodımızdı baylanıs.html keńeytpesinde saqlaymız hàm browserde júklep kóremiz. 39
Html tilinde web-sayt tayarlaw 28-súwret Túsindiriw: <form>…</form> - blok elementi Atributları: Action = url (formalardı qayta islew ushın kórsetilgen url mànzil) Method = get | post (formadaġı maġlıwmattı jónetiw ushın http metodı) Name = cdata (scenariy ushın forma atı) Target = freym (nàtiyjelerdi payda etiw ushın freym) Onsubmit = scenariy (formanı jónetiw) Onreset = scenariy (formanı qaytadan ornatıw) <input> taq teg bolıp kiritiw degendi bilidiredi. Atributları: name = cdata (element atı) value = cdata (elementtiń baslanġısh bólegi) checked = checked (bayraqsha hàm jalġawshılardan paydalanıw) disabled = disabled (element toqtatılġan) tabindex = сон (tab túymesi menen barıw ushın tàrtip nomeri) 40
Html tilinde web-sayt tayarlaw <button></button> - tekstli element(knopka) Atributlari: Type = submit | reset | button (kiritiw túri) Name = cdata (element atı) Value = cdata (túymeniń baslanġısh mànisi) disabled = disabled (element toqtatılġan) <legend></legend> - tegi tema atın qoyıw ushın isletiledi. 13-sabaq Html de gipersiltemelerden paydalanıw Web-betten basqa bir web-betke, faylġa yáki dokumenttiń bir bólimine gipersilteme jollaw ushın <a href=”hújjet_mànzili”>hújjet ati</a> tegi isletiledi. Demek bloknottı júklep tómendegi kodtı kiritemiz. <html> <head> <title>Gipersilteme</title> </head> <body> Ziyonet.uz saytına kiriw ushın <a href=\"http:/ziyonet.uz\">bul jerge basıń</a> </body> </html> Kiritken kodımızdı gipersilteme.html keńeytpesi menen saqlaymız hàm browserde júkleymiz. 41
Html tilinde web-sayt tayarlaw 29-súwret Gipersilteme payda etiw ushın isletiletuġin tegler <a href=\"url\"></a> basqa bir web-hújjetke yáki hújjettiń bir bólegine gipersilteme payda etiw. <a href=\"mailto:email\"></a> elektron hàm jazıw ushın isletiletuġın dàstúrge gipersilteme beriw. <a name=\"name\"></a> hújjettiń tekst bólegine múràjààt etiw. <a href=\"#name\"></a> hújjettiń bir bólegine múrààjàt etiw. 42
Html tilinde web-sayt tayarlaw 14-sabaq Web-sayt tayarlaw Úyrengen bilimlerdi bekkemlew ushın shaxsıy web-sayt jaratamız. Demek tómendegi kodtı bloknot dástúrine kiritemiz. <html> <head> <title>bas bet</title> </head> <body> <table width=\"100%\" cellpadding= 1 cellspacing=0 border= 0px> <tr bgcolor = yellow> <td> <marquee behavior=alternate><h1>Meniń birinshi shaxsiy web-saytıma xosh keldińiz!</h1></marquee> </td> <td> <form name=\"login_form\" method=\"get\"> <input type=\"text\" placeholder=\"login\"> <input type=\"text\" placeholder=\"parol\"> <button>kiriw</button> </form> </td> </tr> </table> <!-- menu --> <table width = \"100%\" bgcolor = white cellpadding = 4 cellspacing = 4 border=0px> <tr> <td width = \"31%\"> <a href=\"ziyonet.uz\">bas bet</a></td> <td width = \"31%\"><a href=\"http:/google.com\">Men haqqımda</a></td> 43
Html tilinde web-sayt tayarlaw <td width = \"31%\"> <a href=\"http:/megasoft.uz\">Jańalıqlar</a></td> <td width = \"32%\"> <a href=\"http:/my.gov.uz\">Baylanıs</a></td> </tr> </table> <table width = \"100%\" height=\"100px\" bgcolor = white cellpadding = 4 cellspacing = 4 border=3px> <tr> <td><h2><font color=\"red\"> Shaxsıy web-sayt jaratıw arqalı siz</font></h2> <ul> <li>Óz bilimińizdi basqalarġa úyretesiz</li> <li>Internet arqalı úyde otırġan halda pul islep tabasız</li> <li>Sayttı rawajlandırıw ushın izlenesiz hàmde bilimlerińizdi jànede rawajlandırasız</li> <li>Óz hobbiyińiz boyınsha sayt jaratıp waqtıńızdı xosh ótkeresiz</li> <center><h2><p style=\"background-color:yellow\">Web-sayt tayarlaw ushın úyreniw kerek bolatuġın tiller, bular:</p></h2></center> <li>HTML</li> <li>CSS</li> <li>JAVASCRIPT</li> <li>PHP</li> </ul> </td> <td width=\"20%\"><img src=internet.jpg width=300px height=400px> </td> </tr> </table> <table width = \"100%\" bgcolor = silver cellpadding = 12 border =0> 44
Html tilinde web-sayt tayarlaw <tr> <td> <p >© Nókis màmleketlik pedagogika instituti.</p> <p>Pikir hàm usınıslarıńız bolsa <a href =\"mailto:[email protected]\"> [email protected]</a> mànziline xat jollań!</p> </td> </tr> </table> </body> </html> Kiritken kodımızdı browserde júklep kóremiz. 30-súwret 15-sabaq Web-sayttı internetke jaylastırıw 45
Html tilinde web-sayt tayarlaw Tayar bolġan web-sayttı internetke jaylastırıw ushın internet provayderinen paydalanıladı. Web-sayt ashıw ushın bizge xosting hàm domen kerek boladı. Xosting – internet provayder. (web-sayttı internette saqlawshı server) Domen –web-sayt atı. Mısalı (www.magistr.ndpi.uz) Biz web-sayttı internetke jaylastırıw ushın Qaraqalpaqstan Respublikasi Joqari Keńesi https://www.regname.uz saytınan paydalanamız. (basqa xostinglerden paydalansańız da boladı) Demek web-saytımızdı internetke jaylastırıw ushın tómendegi izbe-izlikti orınlaymız. Browserdi júklep https://www.regname.uz saytına kiremiz hàm tómendegi súwrette kórip turganıńızday web-bet ashıladı. Ashılġan web-bettiń joqarı bólimine electron pochta mànzili hàm paroli kiritiledi. 31-súwret Súwrette kórsetilgen izbe-izlikti orınlaw arqalı biz domen hàm xosting satıp alamız. 46
Html tilinde web-sayt tayarlaw 32-súwret Súwrette kórsetilgen túymeni basıp domen atın kiritemiz. 33-súwret 47
Html tilinde web-sayt tayarlaw Bul jerge domendi satıp alıw múddeti kórsetiledi hàm keyingi izbe-izlikti orınlaymız. 34-súwret Bul jerde domendi paydalanıw waqtı hàm bahası kórsetilgen. 48
Html tilinde web-sayt tayarlaw 35-súwret Bos ketekshelerge soralġan maġlıwmatlardı toltıramız hàm “далее” túymesin basamız. Domen satıp aldıq. Endi maġlıwmatlarımızdı serverge jaylastırıw ushın xosting satıp alamız. Demek xosting satıp alıwdı basladıq. 36-súwret 49
Html tilinde web-sayt tayarlaw Bul jerden xosting bólimine kiremiz. 37-súwret Súwrettegi túymege basamız hàm xosting bahası menen tanısamız. 38-súwret Bul jerden ózimizge keregin tańlap alamız. 50
Search
