Web Sayt yaratish darslari 
noldan boshlab
 

 	HTML darslari ommabop tarzda
 	WebSite yaratish qadam- ba -qadam darslar.
 	WebSiteni internetga joylash
 	Shaxsiy Websayt qanday tayyorlanadi.
 	Tayyor namuna fayllar
 	WebSaytni bezatish




Email:leonardo73@rambler.ru 







Bu kitob kim uchun ?

Sizning web saytingiz bormi ? Agar javobingiz yoq bolsa, u holda siz oqiyotgan bu kitob aynan SIZ uchundir. 

Bu kitobim har kimga: yoshu qari, xullas 7 yoshdan 70 yoshgacha bolgan soglom fikrlaydigan har qanday odam uchun moljallangan. 
Siz hech bolmaganda Kompyuterni ochirib yoqishni bilsangiz boldi. Darslarni  oqib borish davomida anchagina malakangiz oshadi. Bu kitob keng ommaga moljallangan. Buni oqish uchun sizdan oliy matematikani bilish talab qilinmaydi. 
Bu darslikni har kim oson tushuna oladi.
Kitobni diqqat bilan oqib aytilganlarni amalda bajarsangiz:
Natijada:
?	HTML asosloarini organasiz
?	Web sayt yaratish siz uchun oson ishga aylanadi
?	Shaxsiy websaytga ega bolasiz
?	Ozingiz istagan malumotlarni internet olamiga joylashtirasiz
?	Maqolalaringizni dunyoning istalgan joyidan oqish mumkin boladi
?	Web Sayt orqali pul toppish usullari bilan tanishasiz
(Bularning bazilari kitobning 2-qismida yoziladi)


Muallifdan ikki ogiz gap
Mendan sorashadi: Qanday qilib web sayt ochsam boladi Mening javobim oddiy. Bir qancha rus tilidagi kitoblarni taklif etaman. Ammo bu kitoblar sizni teoriyalar , nazariyalar ormoniga adashtirib qo?yadi. Ularda amaliy namunalar kam uchraydi. Kompyuter texnologiyasiga oid deyarli barcha kitoblar rus, inglis va boshqa tillarda. Ozbek tilida bunday kitoblarni hali uchratmadim.
Yurtimizning viloyat hududlarida yashovchilar aksariyat rus tilini bilmaydilar. Ular kompyuter bilimlaridan xabarsiz qolishlari kerak emas. Shu maqsadda Ozimizning vatandoshlar uchun bu darslikni yozishga qaror qildim. Buni faqat boshlovchilar uchun yozmoqdaman. Darslarni hech narsani bilmaydigan odamlar ham oson organa oladi
Kitobda ortiqcha teoriya yoq, 90% amaliy (praktikada) korsatiladi. Haqiqattan ham: Praktikasiz teoriya olikdir. 
Maqsadim, oz bilimlarimni boshqalarga ham orgatib taraqqiyotga zarracha bolsa ham hissamni qoshish. Hadisda aytilganki ilmni avvali organish, song yod olish, song amal qilish, keyin uni boshqalarga orgatish 
Ozim ham internetning turli saytlaridan turli kitoblar va darsliklar yuklab olaman, men yuklab olgan darsliklarim uchun uning muallifiga pul tolagan emasman, chunki hozir millonlab saytlar bepul oquv qollanmalar bilan tola. Men ulardan kop foydali malumotlar yuklab olganman. Shuni hisobga olib bir narsani eslayman: Odam faqat istemolchi bolishi kerak emas, u yaratuvchi ham bolishi kerak.   Shu maqsadda ozimdan keyingilar ham ushbu bilimlardan foydalansin deb ishga kirishdim

Agar sizda ushbu kitob va undagi darslar yuzasidan savol bolsa ushbu emailga yuboring: leonardo73@rambler.ru maktubingiz sarlavhasini Web sayt yaratish kitobi bo?yicha deb nomlang

Diqqat: sizga taqdim etilayotgan darslar Websaytga matn yozish va uni bezatish haqida boladi. Agar boshlangich darslarni tashlab ketsangiz u holda keyingiz darslarni organish siz uchun juda qiyin kechadi. Hech shoshilmay har bir darsni diqqat bilan oqing va bajaring

1-DARS
Nimadan boshlaymiz ?
Biz avval praktika (amaliyot)da bajarib keyin esa uni tahlil qilib tushuntiramiz. Biz uchun amaliyot 1-orinda. 
	Siz Kompyuterni ishlatishni bilasiz. Kompyuteringizga Windows operatsion tizimi ornatilgan. Demak ishga kirishdik.  Bloknot (Notepad)ni ochamiz, Buning uchun
Start () => All programs( ) =.>  => Notepad () 

Bloknotni ushbu usulda ham ochish mumkin:
Sichqoncha tugmasini ong tomonini kompyuter ish stoliga bosasiz => New () => 
=> Notepad (). 
 



Yoki 2-usulda esa mana bunday (rasmga qarang)
  


Sizga birinchi usulni maslahat beramiz. 
Xullas Bloknot ochildi: (rasmga q.)
 









Endi bloknotga ushbu kodlarni yozamiz:
<html>
<head>
<title>Bosh sahifa</title>
</head>
<body>
Salom Hammaga Bu mening birinchi sahifam
</body>
</html>
Mana bu rasmga qarang (rasm) 
 

Endi buni Web sahifa korinishida saqlashimiz kerak. Buning uchun:
Bloknot oynasidagi File ()=> Save as ( ) ni bosamiz (rasmga q.)
 


Fayl nomini index.html deb nomlaymiz va Save ()  ni bosib kerakli joyga saqlaymiz
(rasmga q.)
 

Endi saqlangan faylimiz korinishi ozgardi. Fayl Korinishi internet fayli kabi boladi. 
Masalan menda Opera korinishida boldi.





Endi faylimizni ochamiz , Masalan mening Opera browserimda mana bunday korindi (rasm)
 

Eslatma ! Siz har doim internetga kirish uchun qaysidir Browserdan foydalanasiz Eng keng tarqalgan browserlar Internet Explorer, Opera, FireFox.

Endi sizga bajargan ishimizni tushintirib bersam.




Tushuntirish: 
Biz yuqorida yozgan kodimizni tushintiramiz, Siz yozgan kod html tilida yozilgan bolib kodning eng sodda korinishi edi.
Internetdagi barcha saytlar html tilida qilinadi. HTML bu (Hyper Text Marquee Language) Gipermatnni belgilash tili. Bu til WebSaytni yaratadigan til bolib Saytga turli elementlar (rasm matn, jadval,) joylaydi va ularni rangi korinishini belgilaydi. Xullas har qanday websayt html asosida tayyorlanadi.
Bu tilda yozilgan sahifa nomiga .html fayl kengaytmasi yoziladi masalan fayl_nomi.html  
HTML dagi kodlar < va >  belgilari oraligida yoziladi. Kodlarni nomini teg deb ataymiz
Html teglari deganda < va > belgilari orasidagi kod tushuniladi.
Html teglari avval ochiladi va yopiladi
<html> ochiladigan teg
</html> yopuvchi teg
<html> sahifani ochish. Bu kod web sahifani eng yuqori qismida yoziladi
<head> sahifani bosh qismi
<title> Sahifamiz sarlavhasi
Bu yerda saytimiz sarlavhasi yoziladi
</title> Sarlavha yopildi
</head> sahifani bosh qismi yopildi

<body> sahifani tana qismi ochildi
Bu yerda sahifani asosiy qismi (matn, rasm) qo?yiladi
</body> sahifani tana qismi yopildi
</html> sahifa butunlay yopildi. Bu kod eng pastki qismga yoziladi
Diqqat ! hech qachon teglar orsada bosh joy (probel) qolmasin. masalan < body >- bu xato !!!
 <body> - bu togri. 
Eslatma !Etibor bergan bolsangiz <title> va </title> orasidagi matn sahifani sarlavhasi boladi. Ushbu rasmda korsatilgan joyda korinadi. <title> bosh sahifa </title>
 
Sahifamizning qolgan barcha matn, rasm, knopka va boshqa elementlari <body> va </body> teglari orasiga joylanishi kerak.

Siz bloknotni web sahifa korinishda saqladingiz. Endi u html fayli ( web sahifa fayliga) aylandi. Agar siz saqlagan html faylingizga biror ozgartirish kiritmoqchi bolsangiz, buning uchun
Faylga sichqonchani ong tugmasi bilan bosing va bloknot orqali oching (rasmga q.)
 
Kerakli joyiga ozgartirish kiritgandan song File()=>Save() ni bosing

2-DARS
Saytimizga matn yozamiz
Hozircha bizning saytimiz matndan iborat boladi. Keyingiz darslarda esa rasm va boshqa elementlar qo?yishni organamiz.
Demak biz saytimizga matn va uning sarlavhasini yozamiz Hamda matnni qismlarga bolamiz. Yani abzats (pragraf)ga bolamiz

Bloknotni oching:
Mana bu kodni yozing:
<html>
<head>
<title>Mening saytim</title>
</head>
<body>

<h1>Mening sarlavham</h1>

Salom hammaga bu mening birinchi saytim, bu yerga turli istalgan matn yoziladi. istasangiz bu matnlarni o'zgartiring. Bu shunchaki tekshirish uchun yozilgan matn. Salom hammaga bu mening birinchi saytim, bu yerga turli istalgan matn yoziladi. istasangiz bu matnlarni o'zgartiring. Bu shunchaki tekshirish uchun yozilgan matn. Salom hammaga bu mening birinchi saytim,  bu yerga turli istalgan matn yoziladi. istasangiz bu matnlarni o'zgartiring. Bu  shunchaki tekshirish uchun yozilgan matn. 

<p>

Bu esa yangi qatordan boshlangan matn istasangiz buni o'zgartiring bu shunchaki tekshirish uchun yozilgan matn. Bu esa yangi qatordan boshlangan matn istasangiz buni o'zgartiring bu shunchaki tekshirish uchun yozilgan matn. Bu esa yangi qatordan boshlangan matn istasangiz buni o'zgartiring bu shunchaki tekshirish uchun yozilgan matn

<h2>Kichik sarlavha</h2>

Bu esa yangi qatordan boshlangan matn istasangiz buni o'zgartiring bu shunchaki tekshirish uchun yozilgan matn. Bu esa yangi qatordan boshlangan matn istasangiz buni o'zgartiring bu shunchaki tekshirish uchun yozilgan matn. Bu esa yangi qatordan boshlangan matn istasangiz buni o'zgartiring bu shunchaki tekshirish uchun yozilgan matn

</body>
</html>

Bloknotni Web sahifa korinishda saqlaymiz. 1-darsda aytilgandek Bloknot oynasidagi 
File ()=> Save as ( ) ni bosamiz
Faylga nom qo?yamiz va .(nuqta) html deb nomlaymiz. Masalan faylnomi.html 
Keyin kerakli joyga saqlash uchun Save ()  ni bosamiz. 
Saqlangan faylni ochamiz



Mana saytimiz korinishi: (rasmga q.)
 

Tushuntirish: 
Biz yuqorida bir nechta yangi teg (kod)lar yozdik. Ularni tushuntiramiz.
<h1> </h1> - oraligida yozilgan matn qalin va katta korinadi. Asosan sarlavha uchun ishlatiladi.
<h2> </h2> - bu ham yuqoridagidek bolib <h1> dan biroz kichik sarlavha korsatadi.
Mana bunday 
<H1>  </H1>
<H2>  </H2>
<H3>  </H3>
<H4>  </H4>
<H5>  </H5>
<H6>  </H6>
Saytingizga kirgan odam birinchi avval uning sarlavhasiga nazar soladi. Sarlavhani asosan <h1> yoki <h2> kattaligida qilgan maqul
Sahifadagi <p> degan tegi (kod desak ham boladi) ham mavjud
<p> Bu teg (kod) matnni yangi qatordan yozish uchun qoyiladi.





3-DARS
Saytimizga Chiroyli matn yozamiz
Matn yozish oson, muhimi uni chiroyli va tushunarli yozish kerak. Qanday qilib chiroyli yozamiz ?, Matndagi asosiy sozlar-ni qalin shriftda, sarlavhani katta harflarda va ortda yozish kerak. Bazan matnni ong yoki chap tarafga moslab yozish zarur boladi. Bazida kerakli gapni tagiga chizib yozish zarur boladi. Ushbu darsda biz ana shunday chiroyli matn yozishni organamiz

Men sizga namuna sifatida bitta matnni korsataman. 
Bloknotni oching. (bloknotni qanday ochilishi 1-darsda aytilgan edi)
Mana bularni yozing. (tayyor fayl ham mavjud. uni olish uchun ushbu kitob joylanan  arxiv faylining namuna papkasi ichidagi 3-dars nomli html faylini ochishingiz mumkin. Tayyor faylni ozgartirish uchun uni bloknot orqali ochib ozgartiring. Bu haqda 1-darsda batafsil aytilgan)
<html>
<head>
<title>Qadimgi olimlar</title>
</head>
<body>

<h1 align="center">Fanga hissa qo'shgan olimlar</h1>
<b>Olim kim ?</b>

<p align="center">
Olimlar atrofni, dunyoni, olamni va undagi narsalarni o'rganadi. Olimlar o'zlariga o'zlari savol beradilar va shu savollarga o'zlarining tajriba va kuzatishlari natijasida javob izlaydilar. olimlar turli xil sohalarda faoliyat yuritadilar, ammo shunday olimlar ham borki ular aynan bir sohani emas , balki turli sohalarni egallay oladi, ular serqirra yoki har tomonlama ijodkordir. 
</p>

<p>

<b>Qadimgi yunonistonda ilm-fan</b> <br>
<u>Olimlar hayotidan lavhalar</u> <br>
Qadimgi yunonlar ilmiy bilimlarni juda qadrlashgan. bu holat ularning avlodlarini ham hayratda qoldirgan. <br> 
Eng mashhur yunon olimlaridan biri <b>Arximed</b> bolgan, u jismlarning suzish qonunini kashf qilgan. Keyinchalik bu qonun uning nomi bilan <u>Arximed qonuni </u> deb ataldi. <br>
Pifagor (sharqda-Fisogurs nomi bilan atalgan) osha davrning eng yirik matemati, boshqacha aytganda geomatr bolgan va ozining teoremalarini kashf etdi, jumladan pifagor teoremasi yoki Pifagor jadvali  hozirgi kunda hammaga malim bolsa kerak.

<p>

<b><i>Bazi bir olimlarning ismlari</i></b><br>
Arximed, <br> 
Aristotel,<br> 
Pifagor ,<br> 
Platon, <br>
Suqrot <br>
<i>va boshqa yunon allomalari haqida </i>

<p align="right"><i>Muallif:</i> <b>V. Muslim</b> </p>
</body>
</html>
Bloknotni .html fayl korinishida saqlaymiz. Masalan fayl_nomi.html deymiz

Mana bu rasmda Web sahifani korinishini tomosha qiling: (rasm)
 


Tushuntirish: 

Biz yuqorida bir qancha sizga nomalum teglarni ishlatdik. Keling, endi ularni nima vazifa bajarishini korib chiqsak.
<h1 align="center">Sarlavhani Ortaga joylaydi </h1> bundan tashqari sarlavhani chap yoki ong tomonga ham joylash mumkin. Buning uchun align iborasi va = tenglik belgisi, undan song " " qoshtirnoq orasiga 
left yoki right yoki center iborasi yoziladi.
Masalan:
<h1 align="center"> Sarlavhani Ortaga joylaydi </h1>
<h1 align="left"> Sarlavhani chapga joylaydi </h1>
<h1 align="right"> Sarlavhani Ong tomonga joylaydi </h1>

Ushbu align iborasi odatda atribut deb ataladi. Buni kop teglar uchun qollash mumkin.
Bu atributni biz juda kop joylarda qollashimiz mumkin. Siz ushbu atributni yaxshilab esda saqlang. Chunki bu hali kop asqotadi. 
Demak align atributini 3xil xususiyati bor left, right, va center. 
align="center"
align="left"
align="right"
Masalan:
<p align="center"> Bu teglar orasidagi matn sahifa ortasiga joylanadi </p>
<p align="left"> Bu teglar orasidagi matn sahifa chap tomoniga joylanadi </p>
<p align="right"> Bu teglar orasidagi matn sahifa ong tomoniga joylanadi </p>


Matnni bazi joylarini qalin harflarda yozish uchun <b> tegidan foydalandik
Qiyshiq yozish uchun  <i> tegi ishlatiladi
Matnni tagiga chizish uchun <u> tegi ishlatiladi
Demak:
<b>Bu qalin matn </b>
<i>Bu qiyshiq matn </i>	
<u> Tagiga chizilgan matn </u>


Agar biror matnni ham qalin ham qiyshaygan qilmoqchi bolsangiz mana bunday tartibda bajariladi:
<b><i>Bu qalin va qiyshiq matn</i></b>

Agar matnni qalin hamda qiyshaygan va tagiga chizilgan qilmoqchi bolsak mana bunday boladi:
<b><i><u>Bu qalin va qiyshiq va tagi chizilgan matn </u></i></b>

Matnni bazi gapni yangi qatordan boshlash kerak boladi. Buning uchun <br> tegi ishlatiladi.
Buning <p> tegidan farqi shuki. <br> qator tashlamasdan yangi qatordan matnni boshlaydi
<p> esa mutlaqo yangi abzasdan boshlaydi .

Har qanday websaytga albatta matn yoziladi. Matn yozishda uni oquvchi uchun tushunarli yozish zarur. Yani har bir mavzuni alohida ajratib, sarlavhani kattaroq harflarda. Bazi joylarni kichikroq va hokazo usulda yozish kerak. Agar bunday qilmasangiz siz yozgan matnni oqish zerikarli boladi. 
Matnni kerakli joyini alohida ranglar bilan ajratib yozish ham mumkin. bu esa oquvchini oziga jalb etadi
Keyingi darsimiz esa aynan shu haqda. Web sahifamizdagi matnlarni chiroyli ranglarda yozish. 




























4-DARS
Qanday qilib matnni rangi, shrifti va hajmini ozgartirish mumkin ?
Biz yozadigan matnning shrifti va rangi va hajmini ozgartirish uchun <font> tegidan foydalanamiz.
Matnni rang bilan bezatish uchun color degan atribut ishlatiladi. <font> tegi ichiga color="rang_nomi" degan atribut yoziladi.

Keling, bitta namuna korsatsam:
Marhamat qilib bloknotni oching va mana bu kodlarni yozing: 

<html>
<head>
<title>Bosh sahifa</title>
</head>
<body>

<font color="red">Salom bu qizil matn</font>

</body>
</html>
Bloknotni Web sahifa korinishda saqlaymiz. 1-darsda aytilgandek Bloknot oynasidagi File ()=> Save as ( ) ni bosamiz
Faylga nom qoy?amiz va .(nuqta) html deb nomlaymiz. Masalan faylnomi.html 
Keyin kerakli joyga saqlash uchun Save ( )  ni bosamiz. 
Saqlangan faylni ochamiz.
Mana u bunday korinadi (rasm)
 

Matnni qanday ranglar bilan yozish mumkin ?. istalgan rangda yozish mumkin
Buning uchun color= dan song rang nomini yoki kodini kiritish kifoya
Har bir rangning oz nomi va kodi mavjud. Biz yuqorida yozgan qizil rang nomi red deb ataladi. Uning codi esa #FF0000 deb qabul qilingan
Istasangiz rangni nomi bilan yozing, istasangiz kod bilan belgilang

Masalan sizga qizil rangini kod bilan belgilashni korsataman:
<font color="#FF0000" >Salom bu qizil matn</font>
Bunda ham avvalgidek qizil rangli matn korinadi.


Ranglar nomi va kodi
Ozbakcha nomi	nomi 	kodi
Kok	blue	#0000FF
Qizil	red	#FF0000
Yashil	green 	#008000
Kulrang	gray	#808080
Oq	white	#FFFFFF
Sariq	yellow	#FFFF00
Yaltiroq	silver	#C0C0C0
Qora	black	#000000
Akva	aqua	#00FFFF
Toq yashil		#00CC00
Olov rang		#FF6600
Toq qizil		#990000
Binafsha		#3300FF
Toq kok		#000099
Jigarrang		#660000
		Va boshqalar
Sizga maslahatim ranglarni kodi bilan yozish afzal.

Sizga yana bitta namuna korsataman
Web sahifangiz sarlavhasini yashil rang bilan yozamiz
Bloknotni oching mana bu kodi yozing, keyin bloknotni fayl_nomi.html deb saqlang

<html>
<head>
<title>Bosh sahifa</title>
</head>
<body>
<h1><font color="#00CC00"> Mening Shaxsiy Sahifam </font></h1>
<font color="#990000">Xush kelibsiz sahifamga </font>
</body>
</html>
Endi saqlangan faylni oching
Bu menda mana bunday korindi (rasm)
 






Matn hajmi kattaligi
Yozuvnu hajmini belgilash uchun <font> tegiga size degan buyruqni (yani atributni) qoshamiz
Va = belgisidan keyin kerakli sonni yozamiz

Sizga mana tayyor namuna:
<font size="1"> Matn kattaligi mana bunday </font>
<font size="2"> Matn kattaligi mana bunday </font>
<font size="3"> Matn kattaligi mana bunday </font>
<font size="4"> Matn kattaligi mana bunday </font>
<font size="5"> Matn kattaligi mana bunday </font>
<font size="6"> Matn kattaligi mana bunday </font>
<font size="7"> Matn kattaligi mana bunday </font>


Matn shrifti qanday ozgartiriladi ?

Agarda siz shriftni tanlamasangiz web saytingizdagi yozuvlaringiz Times New roman shriftida yoziladi. Bu shriftni ozgartirish uchun <font> tegi ichiga face degan atributni qoshamiz va shrift nomini yozamiz
Masalan:
<font face="arial"> Bu matn arial shriftida yozildi </font>

Agar Verdana shriftida yozsak mana bunday
<font face="Verdana"> Bu matn verdana shriftida yozildi </font>

Mana bu matn esa Comic sans shriftida yozildi
<font face="Comic Sans MS"> Bu matn Comic sans shriftida yozildi </font>

Biror matn yozib uning shriftini va hajmini va rangini ozgartirsak boladi. Masalan Biror matn yozib uning shriftini arial, hajmini 5 va rangini qizil qilib belgilaymiz.
Mana bu quyidagicha boladi:
<font face="Arial" size="5" color="#CC0000"> Bu yerga matn yozamiz </font>














Endi amaliyotni boshlaymiz
Namuna sifatida Sizning shaxsiy malumotlaringiz yozilgan shaxsiy sayt  yaratamiz:
Marhamat qilib bloknotni oching va mana bu kodlarni yozing:  
<html>
<head>
<title>Bosh sahifa</title>
</head>
<body>

<h1 align="center"><font color="#0000FF">Xush kelibsiz mening Web Saytimga</font></h1>
<p align="center">Falonchaning shaxsiy web sahifasi</p>
<font face="Verdana" size="5" >Mening ismim Falonchaev Pismadoncha</font><br>

<font color="#990000">Bu saytda men o'zim haqimdagi malumotlarni yozaman,<br>
Bu mallumotlar faqat menga tegishli <br>
Marhamat men bilan tanishing.<br>
</font>

<p>
<i>Shaxsiy malumotlar</i>
<p>
<b>ism shrifim:</b> Falonchaev Pismadoncha<br>
<b>Tug'ilgan shahrim: </b>Ertaklar mamlakati<br>
<b>Tug'ilgan yilim: </b> milodiy 1950-yil<br>
<b>Millatim:</b> O'zbek, Tojik, Qozoq, Rus va hkz<br>
<b>Turar joyim :</b> Susambil<br>
<p>
<i>Men bilan bog'lanish</i>
<p>
<b>Telefon: </b> +12334 1234567<br>
<b>Website: </b> www.ijod.org <br>
<b>Fax:  </b>  +12334 1234567<br>
<b>Email: </b> leonardo73@rambler.ru <br>

</body>
</html>

Bloknotni html fayl holida saqlang. (Saqlash haqida 1-darsda batafsil aytilgan) Keyin esa ochib koring: 

(Tayyor faylni korish uchun ushbu kitob papkasining ichidagi namuna papkasi 4-dars nomli html faylni ochishingiz mumkin)















Menda mana bunday korindi. Sizda ham shunday bolishi kerak, Agar tori bajargan bolsangiz (rasmga q.)
 





Siz o??ylayotgandirsiz: Bu juda oddiy sayt-ku, qachon haqiqiy chiroyli websayt qilishni organaman.  deb. 
   Shoshilmang !!!, Hammasi shundan boshlanadi. Bu darslar sizga asosiy poydevor. Siz internetga kirganda koradigan chiroyli saytlar ham ana shu sizga orgatilayotgan qoidalar asosida qilingan. 
Darslarni qunt bilan oqisangiz. Siz ham ana shunday chiroyli rang-ba-rang haqiqiy websayt yarata oladigan darajaga erishasiz. 














5-DARS
Qanday qilib 
Web saytga rasm joylash mumkin ?
Websaytga rasm joylash bu eng muhim vazifalardan biri. Siz birorta saytni rasmsiz tasavvur qilib koring. Quruq tekstdan iborat saytni kim korgisi keladi.  Saytni jonlantirish uchun unga mos rasmni tanlay olish kerak.
Rasm uchun mana bu teg ishlatiladi. 
<img src="rasmnomi.jpg">
Bu sizga qandaydir galati sozga oxshayapti. Balkim qandaydir abrakadabra ekan deb oylayapsiz, shundaymi ? 
Keling sizga buni tushuntirishga harakat qilsam: <img> bu inglischa image- tasvir sozining qisqartmasi.
src -bu inglischa source yani resurs degani.
<img src=bu yerga rasm fayli va uni formati yoziladi> 
Rasmlar asosan jpg, gif, png, bmp formatlarda boladi. 

Endi amaliyotga otamiz:
Birorta .jpg formatdagi rasm tanlaymiz. Masalan men ushbu rasmimni tanladim.
Bu rasmni nomin samalyot deb nomladim, uning formati .jpg (rasmga q.)
 
demak samalyot.jpg rasmini web sahifamga qoy?ishim kerak

Ozimizning sevimli bloknotni ochamiz va mana buni yozamiz
<html>
<head>
<title>Bosh sahifa</title>
</head>
<body>
Salom bu mening samalyotimni rasmi<br>
<img src="samalyot.jpg">
</body>
</html>
Buni rasm.html deb nomlab kompyuterga saqlaymiz.
Endi samalyot.jpg rasmini shu sahifa  yani rasm.html turgan papkaga joylayman. Boshqacha aytganda, rasm.html va samalyot.jpg fayllari bitta joyda bolishi kerak. Yoki ikkovi ham ish stolida bolishi kerak.


Mana ular menda bunday turibdi (rasmga q.)
 

Endi rasm deb nomlangan web sahifamnizni ochamiz. 
Mana u (rasmga q.)
(tayyor faylni korish uchun namuna degan papkadagi rasm.html faylni oching)
 

Endi savol tugiladi: Agar rasm fayli boshqa papkda bolsa-chi? U holda biz osha rasm joylashgan manzilni korsatishimiz kerak. Masalan
Agarda samalyot.jpg fayli rasmlar degan papka ichida deylik.
Mana bu rasmdagidek (rasmga q.)
 

Bunda rasmni web sahifada korsatish uchun mana bunday yoziladi
<img src="rasmlar/samalyot.jpg">
Xullas, papka ichidagi faylga yonaltirish uchun ushbu / belgi qo?iladi 

UNUTMANG: rasm formati nomi katta yoki kichik harfda yozilganiga etibor bering. Masalan .jpg va .JPG bular sizni chalgitishi mumkin. iloji boricha rasm faylida ham va htmlda ham kichik harflar ishlating. Kop odamlar katta va kichik harflarni bir xil deb ishlatadi. Keyinchalik muammo kelib chiqadi. Sahifasidagi rasm korinmay qoladi.

Rasmni eni va bo?yini belgilash
Yuqoridagi samalyot rasmini web sahifamizda eni va bo?ini belgilaymiz. 
Buning uchun 2 xil atribut ishlatiladi
Width  eni
Height- bo?yi
<img src="rasm_nomi.jpg" width=" " height=" " >

Eni va bo?yi olchami pixelda hisobga olinadi. 
Masalan yuqoridagi rasm.html web sahifamizdagi samalyot rasmini ozgartiramiz
Uning eni 300 va boyi esa 100 pixel bolsin.

Mana tayyor ozgartirilgan kod. Bloknotni oching va buni yozib saqlang. 
<html>
<head>
<title>Bosh sahifa</title>
</head>
<body>
Salom bu mening samalyotimni rasmi<br>
<img src="samalyot.jpg" width="300" height="100">
</body>
</html>

Endi u mana bunday korinadi (rasmga q.)
 



Rasmni sahifani kerakli tomoniga joylash
Esingizda bolsa biz yuqorida 3-darsda align=" " atributi haqida gapirgan edik. Uning vazifasi kerakli. Uni biz rasmni joylashda ham ishlatsak boladi.
Masalan 
<img src="samalyot.jpg" align="right"> bunda rasm web saytni ong tomonida joylanadi.
<img src="samalyot.jpg" align="left"> sahifani chap tomoniga joylanadi
<img src="samalyot.jpg" align="middle">  Bunda matn rasmni ortasidan boshlanadi (bu muhim emas)

Rasmni chegarasi
Rasm atrofiga ramka chizish ham mumkin. Buning uhcun <img> tegi ichiga border= " " ni kiritish kifoya.
Masalan, qalinligi 5 pixel bolgan chegarani belgilamoqchi bolsak mana bunday yozamiz
<img src="samalyot.jpg" border="5"> 

Mana buning korinishi rasm atrofida qora ramka (rasmga q.)
 


Siz web saytingizda rasmning olchami, uni joylashi va chegarasini belgilamoqchi bolsangiz ularni ketma- ket <img> tegi orasiga yozishingiz kifoya.
Masalan:
<img src="samalyot.jpg" width="300" height="200" align="right" border="5">
Demak bunda, rasm eni 300 va b??oyi 200, rasm sahifani ong tomonida, chegara qalinligi 5 pixel.
















Siz bilan rasm joylashni ham organdik,
Endi ana shu bilimlarimizga tayanib bitta kichkina web sayt yaratamiz

Bu hozircha mening fantaziyam. Siz esa ozingiz fikrlab yangi qoshimchalar kiritib saytni yanada bezatishga harakat qiling.

Mana saytni tayyor kodi: (tayyor fayl namuna papkasining ichidagi 5-dars.html fayli)
Bloknotga bularni yozib bloknotni web sahifa korinishda saqlang. Unutmang
Faylga nom qo?ishda .html bolishi shart masalan index.html
<html>
<head>
<title>Bosh sahifa</title>
</head>
<body>
<p align="center"> <img src="rasm1.jpg" width="700" height="100"></p>
<h1 align="center">Xush kelibsiz mening  Web saytimga</h1>

<p align="center">
<font size="5" face="Verdana" color="#009900">Falonchev Pismadonchaning shaxsiy web sahifasi</font>
</p>
<p>
<img src="rasm2.jpg" align="left" width="200" height="250" border="6">
<font size="5" color="#990000">Men haqimda qisqacha</font><br>
<i>Men haqimdagi qisqacha malumot quyidagilar</i>
<p>
Men haqimda qisqacha matn yoziladi. Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst

</body>
</html>

















Sahifamiz mana bunday korinadi:
 

 Agar sizda tushunmovchilik yoki savol hosil bolsa Muallifdan sorashingiz mumkin, mana bu muallifning sayti
www.vosidiy.ijod.org  shaxsiy sayt
www.my.ijod.org  portfolio - bajarilgan ishlarim sayti.
Email. Leonardo73@rambler.ru




















6-DARS
Qanday qilib saytni bezatish mumkin ?
Shuncha paytgacha siz bilan oddiy saytlar yaratdik, ammo ular juda oddiy edi. Ularda fon ham yoq edi. Va boshqa birorta bezak ham yoq edi.
Mana endi yanada chiroyli sahifa yaratamiz:
Demak avval saytga fon qo?ishdan boshlaymiz

Sayt fon rangini belgilash
Sahifaning fon rangi odatda oq boladi. Uni siz ozingiz istagan rang bilan almashtirishingiz mumkin
Buning uchun <body> tegi ichiga bgcolor=" " buyruqini yozish kerak va qoshtirnoq orasiga esa kerakli rang kodini yozamiz

Misol keltiraman:
Bloknotni ochib mana bu kodni yozing va uni html fayl qilib saqlang. Html fayl qilib saqlashni avvalgi darslarda aytib otdim. Ha-deb takrorlash jonga tegdi.
<html>
<head>
<title>Bosh sahifa</title>
</head>
<body bgcolor="#9FD1F7">

Salom Bu sahifa foni ko'k rangda

</body>
</html>



Bunda web saytimiz mana bunday korinadi (rasmga q.)
 








Yana bitta namuna korsataman. Saytimizni foni toq rang va yozuvlar esa oq roang bolsin deylik
Mana tayyor kod:
<html>
<head>
<title>Bosh sahifa</title>
</head>
<body bgcolor="#006633">
<font color="#FFFFFF">Salom Bu sahifa foni to'q yashil rangda yozuv esa oq rangda</font>
</body>
</html>
Buning korinishi mana bunday (rasmga q.)
 





Web saytda Ajoyib chiziq chizish
Web saytingizda bazi tekstlarni chiziq bilan ajratishga togri keladi.
Buning uchun mana bu <hr> tegi ishlatiladi

Misol keltirsam
Mana bu kodni bloknotga yozib web sahifa qilib saqlang.
<html>
<head>
<title>Bosh sahifa</title>
</head>
<body>

Bu matn chiziqdan yuqorida
<hr>
Bu chiziqdan pastdagi matn

</body>
</html>





Bu mana bunday korinadi (rasmga q.)
 


Istasangiz bu chiziqning rangini uzunligini va qalinligini istagandek qilib belgilash mumin
Masalan 
<hr  size="5"> - bunda chiziq qalinligi 5 pixel boladi (istasangiz qoshtirnoq orasiga boshqa son yozing)
<hr  color="#003399"> bunda chiziq rangi toq kok boladi (istasangiz boshqa rang yozing)
<hr  width="500"> chiziq uzunligi 500 pixel  (istagandek uzunlikni belgilash mumkin)
<hr color="#003399" size="5" width="500"> Bunda esa chiziq kok va qalinligi 5 pixel, uzunligi esa 500 pixel boladi.
Bu chiziq odatda saytimizning ortasida korinadi. Istasangiz uni chap yoki ong tomonda joylashingiz mumkin.
Buning uchun 
align= "left" yoki align= "right"  ishlatiladi.

Masalan
<hr  size="5" width="600" align= "left"> chiziq chap tomonda 
<hr  size="5" width="600" align= "right"> chiziq ong tomonda
<hr  size="5" width="600" align= "center"> chiziq ortada

















Web sahifadagi matn va rasmlarni markazda joylshning yana bir usuli

Siz yodingizda bolsa matnni yoki boshqa elementlarni sahifani markaziga qoy?ish uchun ushbu 
<align= "center"> buyruqidan foydalangan edik
Buni yana bir usuli ham bor
<center> va </center> ana shu ikki teg orasiga qo?ilgan har qanday narsa (rasm, matn) saytingizni ortasida korinadi.
Masalan mana bu kodni tekshirib koring. (bloknotni ochish va saqlash haqida boshqa gapirmayman, buni ozingiz bilasiz)
<html>
<head>
<title>Bosh sahifa</title>
</head>
<body>

<center>
Assalomu alaykum <br>
Salom bu matn sahifani o'rtasida
</center>

</body>
</html>


Mana buning korinishi (rasmga q.)
 


















Amaliyot (praktika)
Endi shu paytgacha olgan bilimlarimizni ishga solib bitta chiroyliroq Sayt yaratamiz
Bloknotni ochib mana bu kodni yozing. Keyin esa har doimgidek fayl_nomi.html deb saqlang 
(Matndagi kerakli joylarni ozgartirishingiz mumkin.)

<html>
<head>
<title>Bosh sahifa</title>
</head>
<body bgcolor="#00CCFF">

<center>
<img src="tepasi.jpg" width="750" height="140">
<h1><font color="#990000" face="Verdana">Xush kelibsiz mening shaxsiy web saytimga </font></h1>
<h3>Falonchaev pismadonchaning shaxsiy web sahifasi </h3>
</center>

<hr color="#00FF00" size="4">
 <p align="center">
<font size="4" color="#000099">Bosh sahifa || Men haqimda || Mening ijodim Rasmlar || Men bilan bog'lanish </font>
 </p>
<hr width="500">
<h4 align="center">Men haqimda</h4>
<img src="chaptomon2.jpg" width="235" height="321" align="left">
<img src="chaptomon1.jpg" width="234" height="175" border="5" align="right">
<i>Bu yerda men haimda malumotlarni o'qishingiz mumkin marhamat</i><br>
Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
 Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
<p>
<b>Tashrifingiz uchun rahmat. Ko'rishguncha xayr</b>
<hr>
<p align="right">Tayyorlandi: <b> V. Muslim </b>tomonidan. <br>
email: leonardo73@rambler.ru</p>

</body>
</html>









Endi sytimizni ochib koramiz. Mana u qanday ajoyib qorinmoqda (rasmga q.)
Tayyor namuna faylni korish uchun: namuna papkasi ichidagi 6-dars nomli papkaga kiring
 

Siz faqat shu bilan cheklanib qolmasdan. Ozingiz mustaqil sayt qilishga harakat qiling. Ranglarni ozgartiring. Qoshimcha tekstlar qoshing va hokazo









7-DARS
Web saytni internetga joylash
Nihoyat, tayyor web sahifamizni hamma kora oliash uchun internetga joylash vaqti ham keldi. 
Endi sizni saytingizni dunyoning istalgan burchagidan korish mumkin. 
Sizga ushbu darsda saytingizni bepul yol bilan internetga joylashni korsataman. Nega bu bepul deb oy?layotgandirsiz... Ha, internetdagi kopchilik saytlar sizning saytingizni joylash uchun bepul joy beradi 
Web saytni internetga joylash uchun olinadigan joy hosting deb ataladi. Bu joy bir necha MB yoki GB bolishi mumkin.
Hosting sizning fayllaringizni internetda saqlovchi maxsus server kompyuterdir. Bunday Kompyuterlar kechayu kunduz ishlaydi. Bunday xizmatlarni asosan provayderlar bajaradi
Hosting xizmatlari aslida pullik. Ammo uning bepul turlari ham bor 
Pulli hosting va Bepul hosting orasida qanday farq bor ?  Pulli hostinglarni xizmati nimasi afzal ? degan savol hosil boladi
Bu savolga kitobning 2-qismidan javob olasiz(kitobni 2-qismini yuklab olish haqida ushbu kitobning xulosa qismida yozilgan)

Bizning saytimiz hozircha kompyuterda. Saytimiz nomini index deb nomlaymiz. Nimaga aynan index. ?
Diqqat qiling !!!
Siz internetga (aniqrogi hostingga) bir nechta sahifalar va rasmlar joylashtirasiz. Bunda hosting sizning saytingiz fayllarini saqlaydi. Saytingizga kimdir kirganda qaysi fayl korsatilishi kerak ?
Misol uchun sizning web saytingizda 10 ta sahifa 5 ta rasm mavjud. Bu fayllarga har xil nomlar qoy?ilgan deb faraz qilaylik. Saytingizga kimdir kirganda qaysi bir sahifa birinchi ochilishi kerak
Qani o?ylab koringchi  
Men sizga aytaman: qaysi faylning nomi index deb nomlangan bolsa ana shu  ochiladi 
Demak saytimizni internetga joylash uchun www.narod.ru ning bepul hosting xizmatidan foydalanamiz.
Buning uchun www.narod.ru saytiga kiramiz
Mana u (rasmga q.)
 
	
Keyin esa     tugmasini bosing. 

Mana bunday sahifa ochiladi: (rasmga q.)
 
Ro?xatdan otish uchun   tugmasini bosing.

Keyin mana bunday sahifa chiladi.(rasmga q.)

 
Siz ism, familiya va login yozasiz.
UNUTMANG, siz yozadigan Login saytingizni nomi boladi yani www.saytingiz_nomi.narod.ru 
Siz yozgan login faqat harflardan iborat bolishi shart. Bazida siz yozgan login qabul qilinmasligi mumkin. Buning sababi shu-ki. Osha loginni sizdan avvalgi biror odam olgan bolishi mumkin.

endi  tugmasini bosing




Mana bu oyna ochiladi. Bularni toldirib Roy?xatdan otish tugmasini bosing (rasmga q.)
 

Mana bunday oyna ochiladi. (rasmga q.) Rasmda korsatilgan qizil strelka bilan korsatilgan joyni bosing
 


Mana bunday oyna ochiladi. (rasmga q.). Bundagi  degan joyni bosing
 	
	
Keyin esa mana bu ochiladi.(rasmga q.) Bunda      tugmasini bosing
 


Mana bunday sahifa ochiladi. (rasmga q.) Korib turganingizdek 10 ta tugma Choose nomi bilan turibdi. Bunda Choose tugmasini bosib web sahifamiz faylni tanlaymiz. Bizning HTML sahifamiz nomi index  bolishi kerak. Agar boshqa rasmlar bolsa yana birorta boshqa choose tugmasini bosamiz va tanlab olamiz. Barcha kerakli fayllarni tanlab bolgach
  tugmasini bosamiz
 

Ana shunday qilib saytimiz ham internetga joylandi. Endi uni tekshirib koramiz.
www.sayt_nomi.narod.ru
saytimiz nomi royxatdan otayitganimizda yozilgan login nomi hisoblanadi. 

Mabodo sayt ishlamay qolsa. Also xafa bolmang. Balkim biror narsada xato qilgandirsiz. Agar haqiqatan hech bir xato qilmagan bolsangiz-u ammo sayt baribir ochilmasa 
Bunda boshqa sabab bor. Qanday sabab ?
Sabab shu-ki. Bazi hollarda hostingga joylangan fayl darrov ochilmasligi mumkin. Va bir necha muddatdan song albatta ochiladi. 
5 daqiqadan song ochib koring, unda ham ochilmasa, 1 soatdan song tekshiring, yana ochilmasa. Ertasi kuni ochib koring

Agar sizda savol yoki taklif bolsa ushbu e-mailga maktub yozing. 
Leonardo73@rambler.ru 






BUNI OQING
Siz shu paytgacha HTML bo?icha asosiy bilimlarni egalladingiz. Ammo bu hammasi emas. HTML dan organishingiz kerak bolgan bilimlar hali oldinda. Ularni organmay turib istagan web saytingizni yaratolmaysiz.

Balkim siz, internetdagi bazi saytlarni korib havasingiz kelar. Xavotir olmang. Biz bilan qolsangiz sizning Saytingiz ulardan ham chiroyli boladi. Organishni toxtatmang.
---------------