REFERAT KURS JUMISI / 4lab-1
.docx4-laboratoriya jumisi
Tema:HTML gipertekstli tili jardeminde stillerdin’ kaskadli kestelerinen paydalanip web-bet jaratiw.
Jumistin’ orinlaniw ta’rtibi:
Teoriyaliq bo’lim:CSS stilleri boyinsha mag’lumat beriw.
A’meliy bo’lim:CSS tiykarinda web-bet jaratiw ma’selenin’ qoyiliwi.”Gu’ller” temasinda web-bet islep shig’iw.(CSSten paydalanip).
Teoriyaliq bo’lim
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. Yag’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 alg’an. CSS dıń tolıq forması 1997 jıl shólkemlesken bolıp, “WWW Consorcium” ida 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ıriwg’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 paydalang’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>
Maslenin’ qoyiliwi:Aling’an bilimlerden paydalanip HTML gipertekstli tili jardeminde vep-bet jaratiw.
Maslenin’ sheshiliwi:
Daslep index.html fayilin jaratip og’an HTML kodlardi jazamiz:
<!DOCTYPE html>
<html>
<head>
<title>Guller Du'nyasi'</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style4.css">
</head>
<body>
<div class="header">
<h1 id="sayt_ati">Gu'ller Du'nyasi'</h1><br>
<ul>
<li><a href="#">Xizmetler</a></li>
<li><a href="#">Jetkerip beriw</a></li>
<li><a href="#">Bizlerdin salon</a></li>
<li><a href="#">Baylanis</a></li>
<li><a href="#">Bizler haqqinda</a></li>
</ul>
</div>
<div class="right">
<a href="#">
<img src="images/main.jpg">
<h1>Usi'ni's etiletug'i'nlar</h1>
</a>
</div>
<div class="left">
<div class="block">
<a href="#">
<img src="images/n1.jpg">
<h3>Buket №1</h3>
</a>
</div>
<div class="block">
<a href="#">
<img src="images/n2.jpg">
<h3>Buket №2</h3>
</a>
</div>
<div class="block">
<a href="#">
<img src="images/n3.jpg">
<h3>Buket №3</h3>
</a>
</div>
<div class="block">
<a href="#">
<img src="images/n4.jpg">
<h3>Buket №4</h3>
</a>
</div>
</div>
<div class="footer">
<hr>
<div style="display: block; float: left; width: 20%">
<br>
<a href="#" style="text-decoration: none; color: white;">gullerdunyasi.uz</a>
</div>
<div style="display: block; float: left; width: 80%; text-align: right;">
<br>
<a href="#" style="text-decoration: none; color: white; margin: 0 50px 0 0;">Adres: TITU NF</a>
</div>
</div>
</body>
</html>
style.css fayilin jaratip og’an CSS kodlarin jazamiz:
body {
background: rgb(202,2,75);
color: white;
text-align: center;
}
.header {
display: block;
float: left;
width: 100%;
}
.header ul {
margin: 0 auto;
}
.header ul li {
list-style: none;
float: left;
width: 18%;
background: white;
padding: 10px 0;
border-radius: 5px;
margin: 2px;
}
.header ul li a {
text-decoration: none;
color: rgb(67,7,33);
}
.right {
display: block;
float: left;
background: white;
height: 600px;
margin: 20px 0px;
width: 100%;
border-radius: 10px;
}
.right img {
width: 90%;
height: 400px;
margin: 60px auto 20px;
border-radius: 7px;
}
.right a {
text-decoration: none;
color: rgb(67,7,33);
}
.left {
display: block;
float: left;
width: 100%;
background: yellow;
height: 400px;
border-radius: 5px;
}
.block {
display: block;
float: left;
width: 20%;
margin: 33px;
border-radius: 5px;
background: white;
height: 320px;
}
.block img {
width: 90%;
margin: 12px auto 0;
border-radius: 3px;
}
.footer {
display: block;
float: left;
width: 100%;
height: 100px;
}
Na’tiyje:
