ნაბიჯი 28 - პრაქტიკა.
ავიღოთ ერთ-ერთი უკვე განხილული ცხრილი:
ესეც მისი კოდი:
| |
|
|
<table cellspacing="5">
<tr>
<td height="35" bgcolor="#FFCC33" colspan="2"> <center>1x1</center> </td>
<td width="50" bgcolor="#336699" rowspan="2"> <center>1x2</center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> <center>2x1</center> </td>
<td width="50" bgcolor="#FFCC33"> <center>2x2</center> </td>
</tr>
</table>
|
ავიღოთ ეს კოდი და მასში ჩვენთვის უკვე კარგად ნაცნობი მაგალითი ჩავსვათ, ოღონდ ჯერ ფორმალობების დაწერა მოგვიწევს:
| |
|
|
<html>
<head>
<title>პირველი ნაბიჯები</title>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#000000" alink="#000000" vlink="#000000">
<table cellspacing="5">
<tr>
<td height="35" bgcolor="#FFCC33" colspan="2"> <center>1x1</center> </td>
<td width="50" bgcolor="#336699" rowspan="2"> <center>1x2</center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> <center>2x1</center> </td>
<td width="50" bgcolor="#FFCC33"> <center>2x2</center> </td>
</tr>
</table>
</body>
</html> (ვნახოთ)
|
დარწმუნებული ვარ, "ვნახოთ" ბმულზე დააწკაპუნეთ, თუმცა სანახავი ჯერ არაფერი იყო :) ალბათ ისიც შეამჩნიეთ, რომ ჩვენი მაგალითის ტექსტი ასეთ პატარა უჯრებში ულამაზო გამოჩნდება, ამიტომ გავადიდოთ უჯრები:
| |
|
|
<html>
<head>
<title>პირველი ნაბიჯები</title>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#000000" alink="#000000" vlink="#000000">
<table cellspacing="5" width="700">
<tr>
<td width="400" bgcolor="#FFCC33" colspan="2"> <center>1x1</center> </td>
<td width="300" bgcolor="#336699" rowspan="2"> <center>1x2</center> </td>
</tr>
<tr>
<td bgcolor="#336699"> <center>2x1</center> </td>
<td bgcolor="#FFCC33"> <center>2x2</center> </td>
</tr>
</table>
</body>
</html> (ვნახოთ)
|
მთელ ცხრილს 700 პიქსელის ზომა მივეცით. უჯრებს კი 400 და 300 პიქსელი. 400+300=700, ამიტომ ყველაფერი კარგადაა. რადგანაც მეორე სტრიქონის უჯრებს კონკრეტული სიგანე მითითებული არ აქვთ, ისინი მათთვის გამოყოფილ 400 პიქსელს თანაბრად გაიყოფენ. სიმაღლე არ მიგვითითებია, ამიტომ ცხრილი ავტომატურად კონტენტის შესაბამისად მოიქცევა.
ახლა ჩავსვათ ტექსტი და სილამაზისთვის ცხრილში cellspacing და cellpadding ატრიბუტები ჩავამატოთ. მთლიანად ცხრილს კი ცენტრირება გავუკეთოთ:
| |
|
|
<html>
<head>
<title>პირველი ნაბიჯები</title>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#000000" alink="#000000" vlink="#000000">
<center>
<table cellspacing="5" width="700" cellpadding="20">
<tr>
<td width="400" bgcolor="#FFCC33" colspan="2" valign="top">
<div align="center" style="FONT-FAMILY: verdana, geneva, arial, sans-serif; FONT-SIZE: 14px; LINE-HEIGHT: 18px">
<h3>მოგესალმებით!</h3><font color="#CC0000">ეს ჩემი პირველი ვებ-გვერდია!</font>
<br><br>
ეს სტატია განკუთვნილია დამწყები მომხმარებლებისთვის, რომლებიც ვერ ერკვევიან პროცესორების დასახელებებში, მათ მწარმოებლებში და გამოყენების სფეროებში. პრაქტიკულად ასეთი სტატია დიდი ხნის წინ უნდა დაწერილიყო, მაგრამ გარკვეული მიზეზების გამო ინტერნეტში ქვეყნდება პირველად. <b>სამწუხაროდ არცერთი კომპიუტერული რესურსი საწყის ეტაპებს დიდ ყურადღებას არ უთმობს</b>, რის გამოც ბევრ მომხმარებელს საკუთარი ძალებით და მიხვედრილობით უწევს გზის გაკვლევა საკმაოდ რთულ და დაქსაქსულ კომპიუტერულ ცხოვრებაში. რა თქმა უნდა 1-2 წლის თავზე სირთულეები ქრება, გარკვეული ცოდნა გროვდება და ყველაფერი მარტივდება, მაგრამ ხშირად პირველი არასწორი ნაბიჯები ბევრისთვის დიდი ხნის სინანულის ბრალია.
</div>
</td>
<td width="300" bgcolor="#336699" rowspan="2"> <center>1x2</center> </td>
</tr>
<tr>
<td bgcolor="#336699"> <center>2x1</center> </td>
<td bgcolor="#FFCC33"> <center>2x2</center> </td>
</tr>
</table>
</center>
</body>
</html>(ვნახოთ)
|
ალბათ ტექსტი იცანით :) და ისიც შეამჩნიეთ, რომ ტექსტი <div> ტეგის მეშვეობითაა ცენტრირებული და ერთი უცნობი ატრიბუტი style-იც აქვს დამატებული.
ამ ატრიბუტს ჩვენ ამ სახელმძღვანელოში არ შევისწავლით, თუმცა შემიძლია გითხრათ, რომ მისი მიმდინარე მნიშვნელობა ტექსტის სამართავად გამოყენებს და ამ მომენტში <font> ატრიბუტის ფუნქციას ითავსებს.
ჩავამატოთ ჩვენს ცხრილში ტექსტზე დართული სურათები:
| |
|
|
<html>
<head>
<META HTTP-EQUIV="Content-Type" Content="text/html; Charset=utf-8">
<title>პირველი ნაბიჯები</title>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#000000" alink="#000000" vlink="#000000">
<center>
<table cellspacing="5" width="700" cellpadding="20">
<tr>
<td width="400" bgcolor="#FFCC33" colspan="2" valign="top">
<div align="center" style="FONT-FAMILY: verdana, geneva, arial, sans-serif; FONT-SIZE: 14px; LINE-HEIGHT: 18px">
<h3>მოგესალმებით!</h3><font color="#CC0000">ეს ჩემი პირველი ვებ-გვერდია!</font>
<br><br>
ეს სტატია განკუთვნილია დამწყები მომხმარებლებისთვის, რომლებიც ვერ ერკვევიან პროცესორების დასახელებებში, მათ მწარმოებლებში და გამოყენების სფეროებში. პრაქტიკულად ასეთი სტატია დიდი ხნის წინ უნდა დაწერილიყო, მაგრამ გარკვეული მიზეზების გამო ინტერნეტში ქვეყნდება პირველად. <b>სამწუხაროდ არცერთი კომპიუტერული რესურსი საწყის ეტაპებს დიდ ყურადღებას არ უთმობს</b>, რის გამოც ბევრ მომხმარებელს საკუთარი ძალებით და მიხვედრილობით უწევს გზის გაკვლევა საკმაოდ რთულ და დაქსაქსულ კომპიუტერულ ცხოვრებაში. რა თქმა უნდა 1-2 წლის თავზე სირთულეები ქრება, გარკვეული ცოდნა გროვდება და ყველაფერი მარტივდება, მაგრამ ხშირად პირველი არასწორი ნაბიჯები ბევრისთვის დიდი ხნის სინანულის ბრალია.
</div>
</td>
<td width="300" bgcolor="#336699" rowspan="2" valign="top">
<div align="center" style="FONT-FAMILY: verdana, geneva, arial, sans-serif; FONT-SIZE: 14px; LINE-HEIGHT: 20px">
<img src="primtocodephoto.gif" alt="intel">
<br><br>
<img src="ptimtocodephoto2.gif" alt="AMD">
</div>
</td>
</tr>
<tr>
<td bgcolor="#336699"> <center>2x1</center> </td>
<td bgcolor="#FFCC33"> <center>2x2</center> </td>
</tr>
</table>
</center>
</body>
</html> (ვნახოთ)
|
ახლა მეორე სტრიქონის უჯრების ბმულებით შევსებაღა დაგვრჩა:
| |
|
|
<html>
<head>
<META HTTP-EQUIV="Content-Type" Content="text/html; Charset=utf-8">
<title>პირველი ნაბიჯები</title>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#000000" alink="#000000" vlink="#000000">
<center>
<table cellspacing="5" width="700" cellpadding="20">
<tr>
<td width="400" bgcolor="#FFCC33" colspan="2" valign="top">
<div align="center" style="FONT-FAMILY: verdana, geneva, arial, sans-serif; FONT-SIZE: 14px; LINE-HEIGHT: 18px">
<h3>მოგესალმებით!</h3><font color="#CC0000">ეს ჩემი პირველი ვებ-გვერდია!</font>
<br><br>
ეს სტატია განკუთვნილია დამწყები მომხმარებლებისთვის, რომლებიც ვერ ერკვევიან პროცესორების დასახელებებში, მათ მწარმოებლებში და გამოყენების სფეროებში. პრაქტიკულად ასეთი სტატია დიდი ხნის წინ უნდა დაწერილიყო, მაგრამ გარკვეული მიზეზების გამო ინტერნეტში ქვეყნდება პირველად. <b>სამწუხაროდ არცერთი კომპიუტერული რესურსი საწყის ეტაპებს დიდ ყურადღებას არ უთმობს</b>, რის გამოც ბევრ მომხმარებელს საკუთარი ძალებით და მიხვედრილობით უწევს გზის გაკვლევა საკმაოდ რთულ და დაქსაქსულ კომპიუტერულ ცხოვრებაში. რა თქმა უნდა 1-2 წლის თავზე სირთულეები ქრება, გარკვეული ცოდნა გროვდება და ყველაფერი მარტივდება, მაგრამ ხშირად პირველი არასწორი ნაბიჯები ბევრისთვის დიდი ხნის სინანულის ბრალია.
</div>
</td>
<td width="300" bgcolor="#336699" rowspan="2" valign="top">
<div align="center" style="FONT-FAMILY: verdana, geneva, arial, sans-serif; FONT-SIZE: 14px; LINE-HEIGHT: 20px">
<img src="primtocodephoto.gif" alt="intel">
<br><br>
<img src="ptimtocodephoto2.gif" alt="AMD">
</div>
</td>
</tr>
<tr>
<td bgcolor="#336699"> <center><a href="mailto:domen@posta.ge">მოგვწერეთ</a></center> </td>
<td bgcolor="#FFCC33"> <center><a href="#">ვნახოთ სურათები</a></center> </td>
</tr>
</table>
</center>
</body>
</html> (ვნახოთ)
|
მგონი ურიგო არ გამოვიდა.
პირველი ბმული უკე ნაცნობი ხერხით წერილის გამოგზავნას სთავაზობს მომხმარებელს და საჭიროცაა, მაგრამ მეორე ბმულს ამ შემთხვევაში თავისი ფუნქცია დაკარგული აქვს - სურათების სანახავად არც სხვა გვერდზე გადასვლა და არც შიდა ბმულია საჭირო, ყველაფერი ისედაც ჩანს. ასეთ ბმულებს კოდერები ხშირად იყენებენ საიტის მაკეტის შესაქმნელად, ანუ მაშინ, როცა ბმულისთვის საჭირო გვერდი ჯერ არ გვაქვს, მაგრამ მაინც გვინდა, რომ ბმული არსებობდეს. საჭირო გვერდის გაკეთების შემდეგ ბმულსაც ავამუშავებთ.
ცუდი ნამუშევარი არაა. ახლა უკვე მისი ინტერნეტში განთავსებაც თავისუფლად შეიძლება, თუ გავითვალისწინებთ იმას, რომ ზოგიერთ ცნობილ კომპანიებსაც კი უფრო ცუდი გაფორმების საიტები აქვთ :) თქვენ შეგიძლიათ კიდევ იმუშავოთ ამ გვერდზე, შეცვალოთ ან ჩაამატოთ რაიმე, მაგრამ ეს უკვე თქვენი ფანტაზიის საქმეა, ჩვენ კი შემდეგ თავზე გადავდივართ.
გილოცავთ! თქენ ეს თავიც დაამთავრეთ და შემდეგ ნაბიჯზე ფრეიმებს გაეცნობით. ასე რომ, წინ, წინ, წინ! :)
|
