REFERAT KURS JUMISI / lab-4
.docx4-laboratoriyalıq jumıs
Tema: HTML gipertekstli tili járdeminde stillerdiń kaskadli kestelerin paydalanip veb-bet jaratiw.
Jumıstıń maqsetı: HTML gipertekstli tili járdeminde stillerdiń kaskadli kestelerin paydalanip veb-bet jaratiw.
Laboratoriya jumısın orınlaw tártibi:
HTML fayldı jaratıw hám kodların jazıw;
CSS fayldi jaratıw hám kodların jazıw;
Tayar web betti brauzer arqalı tekseriw;
Teoriyalıq bólim:
Kaskadli stiller kestesinen (Cascading Style Sheets- CSS) paydalanip, siz web-betlerińizge stil qollaniwińiz hám olarģa kerekli kórinis beriwińizge boladi.
CSS-tińislewi hȗjjet obyekt modeline(Document Object Model-DOM) tiykarlanadi.
Máseleniń qoyılıwı: Alinģan bilimlerden paydalanıp HTML gipertekstli tili járdeminde stillerdiń kaskadlı kestesinen (CSS ten) paydalanıp web-bet jaratıw.
Máseleniń sheshiliwi:
Dáslep rescss.html faylın jaratıp oģan HTML kodlardı jazamız:
HTML kodi:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="rescss.css">
</head>
<body background="fon.jpg">
<div class="a">
NUKUS AQSHAMI
</div>
<p align="right">
<button>Registraciya</button>
</p>
<div class="but">
<button>Menu</button>
<button>Awqatlar</button>
<button>Disertler</button>
<button>Zakaz</button>
<button>admin</button>
<button>Járdem</button>
</div>
<div class="ab">
<a href="">Palaw</a><br>
<a href="">gȗrtik</a> <br>
<a href="">Manti</a> <br>
<a href="">teftel</a> <br>
</div>
<div class="foto">
<font face="ALgerian">
Diserts
</font>
<img src="auqat.jpg" width="500px" height="150px">
</div>
<h2 style="background-color:gray; color:gold;"><pre>
Admin.Caller: <u>+99891 395 39 56</u> admin.e-mail:<u> d.biymuratov</u>
</pre>
</h2>
</body>
</html>
rescss.css faylın jaratip oģan CSS kodların jazamız:
CSS kodi:
.a {
font-family:Algerian;
color: Chocolate;
text-align:center;
font-size:60px;
}
.but {
display: block;
width: 900px;
margin: 0 auto;
}
.but>button {
border-radius:20px 10px 20px 10px;
margin:30px;
padding:5px 20px;
color:black;
background-color:gray;
}
.ab{
display:block;
background-color:rgb(255 200 120);
float:left;
margin:50px;
padding: 100px;
border-radius:10px 20px;
font-family:Matura MT Script Capitals;
font-size:30px;
border-style:double;
}
.reg{
display:block;
background-color:white;
float:right;
margin: 10px;
padding: 50px
border-radius:20px 10px;
}
.foto{
display:block;
background-color:rgb(255 200 120);
float:right;
margin:50px;
padding: 156px;
border-radius:10px 20px;
font-family:Matura MT Script Capitals;
font-size:30px;
border-style:double;
width:500px;
height:50px
}
Brauzerdegi kórinisi:
