Embed Size (px)
Citation preview
HTMLHyperTestMarkupLanguage
HTML - სტრუქტურა
The Head
( )თავი
The Body
( )ტანი
<html>
</html>
<head>
</head><body>
</body>
<title>
</title>
HTML - სტრუქტურა
<html><head>
<title>HTML სწავლების
მეთოდიკა</title>
</head><body></body>
</html>
ტექსტების დაფორმატება
• სათაურის ტეგები: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
• აბზაცი : < p >. . . </p>
• სტრიქონის გამოტოვება: < br >
• : ჰორიზონტალური ხაზი < hr >
#1ინდივიდუალური დავალება( შეადგინეთ HTML- , ზე ეკრანზე გამოიტანეთ ტექსტი ქვემოთ
)მოცემული ნიმუშის შესაბამისად
ინტერნეტი და HTML ენა ნინო ჯამასპიშვილი
– ვებ გვერდების შექმნისა და ერთმანეთთან 30 დაკავშირების ბრძანებები დაახლოებით
წლის წინათ ბრიტანელმა მეცნიერმა ტიმ– .ბერნერს ლიმ გამოიგონა
<html><head><title>HTML სწავლების მეთოდიკა</title></head><body><h1> ინტერნეტი და HTML ენა </h1><h5> ნინო ჯამასპიშვილი </h5><hr>
– ვებ გვერდების შექმნისა და ერთმანეთთან<br > დაკავშირების ბრძანებები დაახლოებით30 წლის წინათ <br> ბრიტანელმა მეცნიერმა
– .ტიმ ბერნერს ლიმ გამოიგონა</body></html>
ტეგის ატრიბუტები
• ფონის და ტექსტის ფერები
<body bgcolor=“ფერი” text=“ ” ფერი >
red
yellow
green
blue
brown
gray
• ვებ გვერდის ფონი - ყვითელი
• ტექსტის ფერი - ყავისფერი
#ინდივიდუალური დავალება 2
ტ , ეგებში ჩაამატეთ ატრიბუტები ისე რომ მიიღოთ
<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>
• : ზომა size=“რიცხვი”
• ფერი color=“ ”ფერი
<font> ტეგის ატრიბუტები
) ა , – ;სათაური გადავიდეს ცენტრში შრიფტის ფერი წითელი
) , ბ ავტორის სახელი და გვარი გადავიდეს მარჯვნივ შრიფტის – ;ფერი მწვანე
გ) გაივლოს ჰორიზონტალური ხაზი ავტორის გვარსა და ტექსტს;შორის
) გ , ტექსტი ერთ აბზაცად იყოს შეტანილი ასევე თანაბრად იყოს , –დაშორებული გვერდის საზღვრების მიმართ ტექსტის ფერი
;შავი
) “დ ტექსტში სიტყვები –ვებ გვერდი” , იყოს ჩამუქებული სიტყვები“ ტიმ ბერნერს ლი” დახრილი და ქვეშხაზგასმული.
#3ინდივიდუალური დავალება
ტ , –ეგებში ჩაამატეთ ატრიბუტები ისე რომ ვებ გვერდში
<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>
7 სავარჯიშო
სავარჯიშოების საქაღალეში მონახეთ დოკუმენტი სახელწოდებით “მ ”, არკირებული სიები
შეადგინეთ შესაბამისი HTML კოდი
დავალების პრეზენტაცია
–სურათის ჩასმა ვებ გვერდზე
: ტეგი <img>
: ატრიბუტი SRC=“ .სურათი JPG”
width = “ “ სურათის სიგანე პიქსელებში
height = “ “ სურათის სიმაღლე პიქსელებში
border = “ “ სურათის გარშემო ჩარჩოს ზომაპიქსელებში
:შენიშვნა , სურათი ბრაუზერმა რომ გამოჩინოს html ფაილი და . სურათი ერთ საქაღალდეში უნდა იყოს მოთავსებული!
8 სავარჯიშო
სავარჯიშოების საქაღალდეში მონახეთ #8, საქაღალდე გამოიყენეთ მასში მოთავსებული
, – , სურათი ჩასვით ის ვეგ გვერდში ისე როგროც . . .ეს მომდევნო სლაიდზეა წარმოდგენილი
8.დავალება საქართველოს დაცული ტერიტორიები
• ალგეთის დაცული ტერიტორია• გუმისთის ნაკრძალი• ვაშლოვანის ნაკრძალი• კოლხეთის ნაკრძალი• ლაგოდეხის ნაკრძალი• ლიახვის ნაკრძალი• მარიამჯვრის ნაკრძალი• რიწის ნაკრძალი
<html><head><title>
8სავარჯიშო</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>
–ცხრილის ჩასმა ვებ გვერდზე
<table> <tr> <td> … <td> <td> … <td> <td> … <td> </tr> <tr> <td> … <td> <td> … <td> <td> … <td> </tr>...<table>
პირველისტრიქონი
მეორესტრიქონი
9სავარჯიშო
შეადგინეთ HTML , კოდი ისე რომ მიიღოთ შემდეგი.ცხრილი
IC
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>
გმადლობთყურადრებისთვი
!ს
