REFERAT KURS JUMISI / 4-lab
.docx4- Laboratoriya jumısı
Tema: HTML gipertekstli tili járdeminde stillerdiń kaskadlı kestelerin paydalanıp web-bet jaratıw
Jumıstıń maqseti: HTML gipertekstli tili járdeminde stillerdiń kaskadlı kestelerin paydalanıp web-bet jaratıw
Laboratoriya jumısınıń orınlanıw tártibi
HTML fayldı jaratiw hám kodlarin jazıw
Tayar web betti brauzer arqali tekseriw
Teoriyaliq bólim:CSS boyinsha maģliwmat beriw.
CSS - (Cascading Style Sheets) Kaskadli stiller kompleksi bolıp tabıladı, stiller menen isley alatuǵın til. CSS elementlerdi ekranda, qaǵazda hám yamasa basqa medialarda kórinisin suwretleydi. CSS veb betlerge túr-túrli stiller beriw ushın isletiledi. Hámde bir waqittiń ózinde bir neshe veb betlerdi dizaynin ózgertiwi múmkin. Qandayda bir bir veb betti hár qıylı apparatlarda hár qıylı kórinisin da támiynleydi. CSS file. css formatı arqalı sırtqı yadta saqlap qoyıwımız hám kezi kelip veb bettiń HTML kodın ózgertirmesten, tek CSS fayldı ózgertiw arqalı veb betke tazadan kórinis beriwimiz múmkin. Yaģniy, HTML tek veb bettin’ kodların jazıw ushın isletiledi, HTML de da veb betke dizayn beriwge boladı, lekin uzaq processti talap etkeni sebepli, CSS bul wazıypanı óz moynına alģan.
CSS dıń tolıq forması 1997 jıl shólkemlesken bolıp, “WWW Consorcium” da qollap quwatlanǵan hám paydalanıwǵa usınıs etilgen. Dáslep, CSS kodların Netscape Navigator 4. 0 hám Internet Explorer 4. 0 brauzerleri tu’singen, házirgi kúnde CSS kodlardı qálegen brauzerler qollap quwatlay aladı.
CSS ti qosıwdın’ 3 turlı jolı ámelde bolıp, olar tómendegiler:
Sırtqı dizayn arqalı
Ishki dizayn arqalı
Ishki qatar arqalı
Sırtqı dizayn arqalı veb bettin’ kórinisin ápiwayıǵana bir fayldı ózgertiw arqalı ámelge asıriwģa boladi. Onıń ushın hár bir veb -bette sırtqı dizayn ushın " file link" elementi arqalı shaqırılǵan bolıwı kerek. <link> elementi <head> bóliminin’ ishinde júritiledi.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Ishki dizayn arqalı. Qandayda bir veb betke ayriqsha dizayn bermekshi bolsaq, ishki dizaynnan paydalanģanimiz qolay. Onıń ushın barlıq jazılatuǵın kodlar <style> elementin ishinde boladı, óz gezeginde <style>elementi <head> bo’limi ishinde boladı.
<head>
<style> body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } </style>
</head>
Ishki qatar arqalı biz veb -betdegi qandayda bir elementke ayriqsha kórinis beriw ushın isletemiz.
<h1 style="color:blue;margin-left:30px;">Bul zagolovok </h1>
Máseleniń qoyılıwı: Alinģan bilimlerden paydalanip HTML gipertekstli tili jardeminde stillerdin kaskadli kestesinen (CSS ten) paydalanip web bet jaratıw .
Máseleniń sheshiliwi:
<!DOCTYPE html>
<html>
<head>
<title> REAL MADRID </title>
<style type="text/css">
a {
text-decoration: none;
font-style: italic;
}
</style>
</head>
<body background = "img/real-bg.jpg">
<table width="100%" height = "100px">
<tr>
<td>
<p align="center"><font face = "Calibri Light" size = "60px" color = "white">Real Madrid</font></p>
</td>
<td>
<form>
<input type="text" name="search" placeholder="Izlew">
<button>OK</button>
</form>
</td>
<td>
<select>
<option>Karakalpak</option>
<option>English</option>
<option>Русский</option>
</select>
</td>
</tr>
</table>
<table bgcolor="white" width="100%" border = "5px" cellpadding="7" cellspacing="1">
<tr align="center">
<td>
<a href = "#">Klub</a>
</td>
<td>
<a href = "#">Komanda</a>
</td>
<td>
<a href = "#">Forum</a>
</td>
<td>
<a href = "#">Sayt haqqinda</a>
</td>
</tr>
</table>
<table width="100%">
<tr>
<td width="30%" height="40px" bgcolor="white">
Tan'lanģanlar
</td>
<td width="50%">
</td>
<td width="20%" bgcolor="white">
O'tken oyinlar
</td>
</tr>
<tr>
<td height="40px" bgcolor="gray" width="30%">
> <a href = "#">Florentino Peres Ispaniya futbol pederaciyasina o'z naraziliģin bildirdi</a></font><br>
> <a href = "#">Isko ha'm Solari ortasinda kelispewshilik ju'z bermekte </a><br>
> <a href = "#">Ekinshi el-clasiko sanesi ma'lim boldi</a><br>
> <a href = "#">Real Madrid aģasina Yuventus qiziqbaqta </a><br>
> <a href = "#">Real darwazabani Chempionshipģa joq aldi</a><br>
> <a href = "#">Real bir shart penen Iskoni Yuventusqa satadi</a><br>
</td>
<td width="50%">
<td width="20%" bgcolor="gray">
> <a href = "#"><font color="yellow">Real Betis 1-2 Real Madrid</a></font><br>
> <a href = "#"><font color="yellow">Selta 2-4 Real Madrid</a></font><br>
> <a href = "#"><font color="yellow">Real Madrid 0-0 Atletiko Madrid/a></font><br>
> <a href = "#"><font color="yellow">Real Madrid 4-1 Leganes</a></font><br>
> <a href = "#"><font color="yellow">Jirona 1-4 Real Madrid</a></font><br>
> <a href = "#"><font color="yellow">Real Madrid 2-0 Xetafe</a></font><br>
</td>
</tr>
<br />
<tr bgcolor="white" height="40px">
<td>Jan'aliqlar</td>
</tr>
<tr>
<td bgcolor="gray">
<p align="left">
<font color=white>
>Malaga jas oyinsgisi CHechu Martines Realģa ko'ship otti<br>
>Real Madrid Piatek transferin tezlestirmekshi<br>
>Real Madrid Citiydan Brahim Dias di satip aldi<br>
>Real Madriddin jane bir oshinshisi jaraqatlandi<br>
>Modrich: << VAR dizimi Realga ziyan keltirmekte>><br>
>Ronaldo jazda Yuventusti tarik itiwi mu'mkin<br>
>Brahim Dias: << Mende 3 variant bar edi: REAL REAL REAL<br>
>Beyldin' sapqa qaytiwi soziliwi mumkin<br>
</font>
</p>
</td>
</tr>
</table>
</body>
</html>
Brauzerdegi kórinisi:
