Html სწავლების მეთოდიკა მე–6 კლასში

HTML - სტრუქტურა
<html>
<head>
<title>
</title>
The Head
(თავი)

</head>
<body>

The Body
(ტანი)

</body>
</html>

HTML - სტრუქტურა

ტექსტების დაფორმატება

• სათაურის ტეგები:
• აბზაცი :

<h1>, <h2>, <h3>, <h4>,

< p >. . . </p>

• სტრიქონის გამოტოვება:
• ჰორიზონტალური ხაზი:

< br >
< hr >

<h5>, <h6>

ინდივიდუალური დავალება #1
(შეადგინეთ HTML-ზე, ეკრანზე გამოიტანეთ ტექსტი ქვემოთ
მოცემული ნიმუშის შესაბამისად)

<html>
<head>
<title>
HTML სწავლების მეთოდიკა
</title>
</head>
<body>
<h1> ინტერნეტი და HTML ენა </h1>
<h5>ნინო ჯამასპიშვილი </h5>
<hr>
ვებ–გვერდების შექმნისა და ერთმანეთთან
<br >დაკავშირების ბრძანებები დაახლოებით 30
წლის წინათ <br> ბრიტანელმა მეცნიერმა ტიმ
ბერნერს–ლიმ გამოიგონა.
</body>
</html>

ტეგის ატრიბუტები
• ფონის და ტექსტის ფერები

<body bgcolor=“ფერი” text=“ფერი” >

green

brown

red
yellow

blue

gray


ტეგებში ჩაამატეთ ატრიბუტები ისე, რომ მიიღოთ

• ვებ გვერდის ფონი - ყვითელი
• ტექსტის ფერი - ყავისფერი

<html>
<head>
<title>
HTML სწავლების მეთოდიკა
</title>
</head>
<body bgcolor="yellow" text="brown">
<h1> ინტერნეტი და HTML ენა </h1>
<h5>ნინო ჯამასპიშვილი </h5>
<hr>
ვებ–გვერდების შექმნისა და ერთმანეთთან
<br >დაკავშირების ბრძანებები დაახლოებით 30
წლის წინათ <br> ბრიტანელმა მეცნიერმა ტიმ
ბერნერს–ლიმ გამოიგონა.
</body>
</html>

ტეგის ატრიბუტები
• ტექსტის დასწორება

alignატრიბუტი და მისი პარამეტრები აბზაცისა და სათაურის
ტეგებში
<h1 align=“ატრიბუტი“> ... </h1>
<p align = “ატრიბუტი“ > … </p>

left

right

center

jastify

შრიფტის ტეგები
• შრიფტის ტეგი: <font> … </font>
• მუქი სიმბოლოები: <b> … </b>
• დახრილი სიმბოლოები <i> … </i>
• ქვეშხაზგასმული სიმბოლოები <u> … </u>

<font> ტეგის ატრიბუტები
<font ატრიბუტი > … </font>
• ზომა: size=“რიცხვი”
• ფერი color=“ფერი”


ტეგებში ჩაამატეთ ატრიბუტები ისე, რომ ვებ–გვერდში
ა) სათაური გადავიდეს ცენტრში, შრიფტის ფერი – წითელი;
ბ) ავტორის სახელი და გვარი გადავიდეს მარჯვნივ, შრიფტის ფერი
– მწვანე;
გ) გაივლოს ჰორიზონტალური ხაზი ავტორის გვარსა და ტექსტს
შორის;
გ) ტექსტი ერთ აბზაცად იყოს შეტანილი, ასევე თანაბრად იყოს
დაშორებული გვერდის საზღვრების მიმართ, ტექსტის ფერი –
შავი;
დ) ტექსტში სიტყვები “ვებ–გვერდი” იყოს ჩამუქებული, სიტყვები
“ტიმ ბერნერს ლი” დახრილი და ქვეშხაზგასმული.

<html>
<head><title>HTML სწავლების მეთოდიკა</title> </head>
<body bgcolor="yellow">
<h1 align="center"> <font color="red"> ინტერნეტი და HTML
ენა </font> </h1>
<h5 align="right"> <font color="green"> ნინო ჯამასპიშვილი
</h5>
<hr>
<p align=“center"> <font color="black">
<b> ვებ–გვერდების </b> შექმნისა და ერთმანეთთან
დაკავშირების ბრძანებები დაახლოებით 30 წლის წინათ
ბრიტანელმა მეცნიერმა
<i><u>ტიმ ბერნერს–ლიმ გამოიგონა<u><i></font>
</p>
</body>
</html>

სავარჯიშო 4

სავარჯიშოების საქაღალეში მონახეთ დოკუმენტი
სახელწოდებით “სავარჯიშო 4”, შეარჩიეთ
დავალების ნომრის შესაბამისი ტექსტი და
შეადგინეთ შესაბამისი HTML კოდი

გადანომრილი და მარკირებული სიები

• განომრილი სიის ტეგი:

<ol> … </ol>

• მარკირებული სიის ტეგი: <ul>
• სიის ელემენტები

… </ul>

<li> … </li>

სავარჯიშო 5.
შეადგიენთ პროგრამული კოდი, რომ მიიღოთ ქვემოთ მოცემული ტექსტი

საქართველოს კუთხეები
1. აფხაზეთი
2. აჭარა
3. გურია
4. იმერეთი
5. კახეთი
6. მცხეთა–მთიანეთი
7. რაჭა
8. სამეგრელო
9. სამცხე–ჯავახეთი
10. სვანეთი
11. ქვემო ქართლი
12. შიდა ქართლი

<html>
<head> <title> სავარჯიშო 5 </title> </head>
<body bgcolor="blue" text="yellow">
<h1 align="center"> საქართველოს კუთხეები </h1>
<ol>
<li> აფხაზეთი </li>
<li> აჭარა </li>
<li> გურია </li>
<li> იმერეთი </li>
<li> კახეთი </li>
<li> მცხეთა–მთიანეთი </li>
<li> რაჭა </li>
<li> სამეგრელო </li>
<li> სამცხე–ჯავახეთი </li>
<li> სვანეთი </li>
<li> ქვემო ქართლი </li>
<li> შიდა ქართლი </li>
</ol>
</body> </html>

სავარჯიშო 6.
შეადგიენთ პროგრამული კოდი, რომ მიიღოთ ქვემოთ მოცემული ტექსტი

საქართველოს დაცული ტერიტორიები / ნაკრძალები
•
•
•
•
•
•
•
•

ალგეთის დაცული ტერიტორია
გუმისთის დაცული ტერიტორია
ვაშლოვანის ნაკრძალი
კოლხეთის ნაკრძალი
ლაგოდეხის ნაკრძალი
ლიახვის ნაკრძალი
მარიამჯვრის ნაკრძალი
რიწის დაცული ტერიტორია

<html>
<head><title>სავარჯიშო 6</title></head>
<body bgcolor="green">
<font color="red">
<h1 align="center"> დაცული ტერიტორიები / ნაკრძალები </h1>
</font>
<font size="5" color="yellow">
<Ul>
<li>ალგეთის დაცული ტერიტორია </li> <br>
<li> გუმისთის ნაკრძალი </li> <br>
<li> ვაშლოვანის ნაკრძალი </li> <br>
<li> კოლხეთის ნაკრძალი </li> <br>
<li> ლაგოდეხის ნაკრძალი </li><br>
<li> ლიახვის ნაკრძალი </li><br>
<li> მარიამჯვრის ნაკრძალი </li><br>
<li> რიწის ნაკრძალი </li>
</font>
</Ul>
</body></html>


სავარჯიშოების საქაღალეში მონახეთ დოკუმენტი
სახელწოდებით “მარკირებული სიები”, შეადგინეთ
შესაბამისი HTML კოდი

დავალების პრეზენტაცია

სურათის ჩასმა ვებ–გვერდზე
ტეგი: <img>
ატრიბუტი: SRC=“სურათი.JPG”
width = “ “ სურათის სიგანე პიქსელებში
height = “ “ სურათის სიმაღლე პიქსელებში
border = “ “ სურათის გარშემო ჩარჩოს ზომა
პიქსელებში
შენიშვნა: სურათი ბრაუზერმა რომ გამოჩინოს, html ფაილი და
სურათი ერთ საქაღალდეში უნდა იყოს მოთავსებული.


სავარჯიშოების საქაღალდეში მონახეთ საქაღალდე
#8, გამოიყენეთ მასში მოთავსებული სურათი,
ჩასვით ის ვეგ–გვერდში ისე, როგროც ეს მომდევნო
სლაიდზეა წარმოდგენილი . . .

საქართველოს დაცული ტერიტორიები

•ალგეთის დაცული ტერიტორია
•გუმისთის ნაკრძალი
•ვაშლოვანის ნაკრძალი
•კოლხეთის ნაკრძალი
•ლაგოდეხის ნაკრძალი
•ლიახვის ნაკრძალი
•მარიამჯვრის ნაკრძალი
•რიწის ნაკრძალი

დავალება 8.

<html>
<head>
<title>
</title>
</head>
<body bgcolor="yellow" text="red">

<h1 align="center">საქართველოს
დაცული ტერიტორიებისა და
ნაკრძალების რუქა</h1>
<p align="center">
<img
src="ruka.jpg">
<font size="5">
<b>
<ul>
<font color="blue">
<li>ალგეთის დაცული ტერიტორია
</li>
</font>

<font color="green">
<li> გუმისთის ნაკრძალი </li>
</font>
<font color="brown">
<li> ვაშლოვანის ნაკრძალი </li>
</font>
<font color="gray">
<li> კოლხეთის ნაკრძალი </li>
</font>
<font color="red">
<li> ლაგოდეხის ნაკრძალი </li>
</font>
<font color="blue">
<li> ლიახვის ნაკრძალი </li>
</font>
<font color="green">
<li> მარიამჯვრის ნაკრძალი </li>
</font>
<font color="brown">
<li> რიწის ნაკრძალი </li>
</font>
</ul>
</b>
</font></body></html>

ცხრილის ჩასმა ვებ–გვერდზე

•

ცხრილის ტეგი:

<table>… </table>

• ატრიბუტი border=“რიცხვი” – ცხრილის საზღვრის ზომა

•

სტრიქონი :

•

სვეტი:

< tr >. . . </tr>

< td > … </td>

ცხრილის ჩასმა ვებ–გვერდზე

პირველი
სტრიქონი

მეორე
სტრიქონი


შეადგინეთ HTML კოდი ისე, რომ მიიღოთ შემდეგი
ცხრილი.

I
C

T

<html>
<head><title>სავარჯიშო 9</title></head>
<body text="red">
<p align="center">
<table border="2" width="300" height="300">
<tr>
<td width="100" bgcolor="blue"><p align="center"><font
size="7“>I</font> </td>
<td width="100"bgcolor="red"> </td>
<td width="100" bgcolor="blue"> </td>
<tr>
<td bgcolor="red"> </td>
<td bgcolor="blue"><p align="center"><font size="7"> C </font>
<td bgcolor="red"> </td>
</tr>
<tr>
<td bgcolor="blue"></td>
<td bgcolor="red"> <font> </td>
<td bgcolor="blue"><p align="center"><font size="7"> T </font>
</p></td>
</tr>
</table></p></body></html>

Html სწავლების მეთოდიკა მე–6 კლასში

Html სწავლების მეთოდიკა მე–6 კლასში

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Html სწავლების მეთოდიკა მე–6 კლასში