REFERAT KURS JUMISI / 4lab
.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 jaratıw.
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:
HTML tili menen derlik barlıq waqıt birgelikte islesiwshi jáne bir formal til CSS (Cascading Style Sheets) esaplanadı. Bul tiykarınan vet bet stili menen shuģınlanadı. Vet betti tek HTML gipertekstli til menen bezep bolmaydı. Sol sebepli usi CSS tili islep shıģilģan. Onıń eń ápiwayı sintaksisi tómendegishe:
.classAti {
stil-gilt-sozi: mánisi;
}
Bul kaskadli stiller menen islesiw ónimdarlıģın asırıw ushın biz stil.css fayl jaratamız hám onı veb bette html teg arqalı shaqırımız.
<link rel="stylesheet" type="text/css" href="css/stil.css">
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 index.html faylın jaratıp oģan HTML kodlardı jazamız:
stil.css fayl ishi:
body {
margin: 0;
background: #DEE1E6;
font-family: Calibri Light
}
.head {
width: 970px;
padding: 20px;
background: #142839;
margin: 0 auto;
}
.izlew {
width: 300px;
float: right;
}
.brand {
color: white;
font-size: 20px;
font-family: Calibri Light;
}
.izlewinput {
border: 1px solid #666;
padding: 5px;
border-radius: 5px;
outline: none;
}
.shep {
padding: 10px;
width: 690px;
}
.on {
padding: 10px;
width: 250px;
float: right;
}
.body {
margin: 0 auto;
width: 970px;
}
.post {
background: white;
padding: 10px;
margin: 10px;
box-shadow: 0px 0px 10px #666;
}
.loginbtn {
background: green;
border-radius: 5px;
color: white;
padding: 5px;
width: 50px;
border: 0px;
}
.cat {
text-decoration: none;
}
HTML fayl:
<!DOCTYPE html>
<html>
<head>
<title>Miymanxanalar</title>
<link rel="stylesheet" type="text/css" href="css/stil.css">
</head>
<body>
<div class = "head">
<span class = "brand">Miymanxana</span>
<div class = "izlew">
<form method="get">
<input type="text" class = "izlewinput" placeholder="Izlew..">
<input type="submit" class = "izlewinput" value="Izlew">
</form>
</div>
</div>
<div class = "body">
<div class = "on">
<form class = "post">
Saytqa kiriw
<p> <input class = "izlewinput" type="text" placeholder="Atińiz"> </p>
<p> <input class = "izlewinput" type="text" placeholder="Parol"> </p>
<p> Eslep qal <input type="checkbox"> </p>
<button class = "loginbtn">Kiriw</button>
</form>
<div class = "post">
<h4>Basqa miymanxanalar</h4>
<a class = "cat" href = "#">Uzbekistan</a> |
<a class = "cat" href = "#">Plaza</a> |
<a class = "cat" href = "#">Rahnamo</a> |
<a class = "cat" href = "#">Shifokor</a> |
<a class = "cat" href = "#">Burj-al-Arab</a> |
<a class = "cat" href = "#">Tashkent</a>
</div>
</div>
<div class = "shep">
<div class = "post">
<h3>Tashkent miymanxanasi</h3>
<small><em>Ortasha bahasi (1 kun) 150000 som</em></small>
<img src="img/tashkent.jpg" width="100%">
<h4 align="right"><a class = "cat" href = "#">miymanxana haqqinda</a></h4>
</div>
<hr>
<div class = "post">
<h3>Nukus miymanxanasi</h3>
<small><em>Ortasha bahasi (1 kun) 150000 som</em></small>
<img src="img/nukus.jpg" width="100%">
<h4 align="right"><a class = "cat" href = "#">miymanxana haqqinda</a></h4>
</div>
<hr>
</div>
</div>
</body>
</html>
Brauzerdegi kórinisi:
