HTML არის სტანდარტული მარკაპ ენა რომელიც გამოიყენება ვებ გვერდების შესქმნელად
შესავალი HTML Introduction
HTML ტიპის ფაილებს აქვთ .html გაფართოება. გაფართოება მიანიშნებს ტექსტურ ედიტორს
ან ვებ ბრაუზერს მიხვდეს თუ რა ტიპის ფაილთან აქვს ურთიერთობა. ახალი html
ფაილის შექმნისას ის უნდა შევინახოთ შესაბამის ფორმატში.
მაგალითად:
main.html
ამ ფაილის გახსნისას ბრაუზერს ეცოდინება როგორ გამოიტანოს მასში მოთავსებული html კოდი.
[TOC]
თანამედროვე ინტეგრირებული გარემოების (IDLE) უმრავლესობას, როგორიც არის PyCharm, WebStorm Atom და ა.შ. აქვს ჩაშენებული საწყისი HTML-ის შაბლონი:
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body></body></html>
HTML-ის ელემენტი მოთავსებულია შესაბამის tag-ებში. მაგ: <title>Title</title>
მსგავსი ელემენტების თეგებს ვაერთიანებთ კომპონენტებში, კომპონენტის განმსაზღვრელ თეგებს შორის. მაგალითად
გვერდის ჰედერ ელემენტები მოთავსებულია <head> </head> თეგებს შორის.
head კომპონენტი ძირითადად ინახავს meta data-ს ვებ გვერზე, როგორიც არის CSS სტილთან კავშირი, ჯავასკრიპტთან კავშირი, ინფორმაცია ენკოდინგზე და ა.შ.
ძირითადი ფუნქციონალური HTML კოდი მოთავსდება <body> </body>
შესაბამისად საიტის ძირითადი კომპონენტები განისაზღვრება HTML ელემენტებით, ელემენტები კი აღიწერება შესაბამისი თაგებით .html ფაილში.
Div და Span გვეხმარება html კოდის პორციებად სეგმენტირებაში. როდესაც დავიწყებთ ელემენტების სტილის შექმნას CSS-ისა და Bootstrap-ის მეშვეობით, ხშირად გვექნება შემთხვევა როდესაც გარკვეული სტილის გამოყენება მხოლოდ კონკრეტული ელემენტების სეგმენტზე გვჭირდება. ასეთ დროს გამოვიყენებთ div და span გამყოფებს.
...
<divclass=""><h1>სათაური</h1><p>პარაგრაფი</p></div><p>პარაგრაფი div-ის გარეთ რომელიც <span>span თეგს შორის</span> მოვათავსეთ</p>
...<h1>ძირითადი სათაური</h1><!-- etc --><h6>Level-6 სათაური</h6>| თეგი | ელემენტი |
|---|---|
| h1 | მთავარი heading |
| h6 | ნაკლებად მნიშვნელოვანი heading |
<p>პარაგრაფი.<br/>
ახალი ხაზი.</p><p>ახალი პარაგრაფი.</p><hr/><p>ნახეთ ხაზი ზემოთ.</p>| თეგი | ელემენტი |
|---|---|
| p | პარაგრაფი |
| br | ახალი ხაზი |
| hr | ჰორიზონტალური ხაზი |
<em>Formatting</em> is <strong>important</strong> !
(a+b)<sup>2</sup> = a<sup>2</sup> + b<sup>2</sup> + 2ab| თეგი | ელემენტი |
|---|---|
| sub | subscript |
| sup | superscript |
| em | emphasize |
| strong | important |
| mark | highlighted |
| small | small |
| i | italic |
| b | bold |
ზოგ HTML ელემენტს გააჩნია ატრიბუტები, რომლითაც მათზე პირდაპირ შეიძლება მანიპულირება. ატრიბუტების გამოყენებით შეგვიზლია ელემენტს დავუმატოთ ისეთი ნაწილი, როგორიცაა ვებ ბმული ან სურათის მისამართი.
<ahref="url">ბმული</a><ahref="url" target=_blank>გახსენი ბმული ახალ ფანჯარაში</a><ahref="#comments">ბმული ელემენტზე id-ით კომენტარი</a><h2id="comments">კომენტარი</h2>| თეგი | ელემენტი |
|---|---|
| a | hyperlink |
<imgsrc="https://www.flixist.com/wp-content/uploads/ul/226276-midnightgospel1.jpg" alt="description" width="300" height="200" />| თეგი | ელემენტი |
|---|---|
| img | image |
| ატრიბუტი | აღწერა |
|---|---|
| src | მისამართი |
| alt | ტექსტი |
| width; height | სიგანე; სიმაღლე |
ვებ გვერდის ერთ-ერთი უმნიშვნელოვანეს ფუნქციონალია მომხმარებლისგან ინფორმაციის აღება. ინფორმაციის
ვებ გვერდის ინტერფეისიდან ამოღება ხდება html ფორმების გამოყენებით. ფორმის ასაწყობად ვიყენებთ
html თეგს <form>, რომელშიც შეგვიძლია მოვათავსოთ <input> ელემენტი.
ფორმის დასასრულს ვამატებთ submit ტიპის input-ს, რაც ავტომატურად ამაგრებს ღილაკს შევსებული ფორმის შესასრულებლად. იხილეთ html ფორმების მაგალითები:
<formaction="url" method="post"><fieldset><legend>რეგისტრაცია</legend><label>Login :<inputtype="text" name="login" /></label><br/><labelfor="pswd">Password :</label><inputtype="password" name="password" id="pswd" /><br/><inputtype="radio" name="sex" value="male" />Male<br/><inputtype="radio" name="sex" value="female" />Female<br/></fieldset><label>საყვარელი პოკემონი : <selectname="color"><option>Charizard </option><option>Gengar </option><option>Greninja </option></select></label><inputtype="checkbox" name="available" value="monday" />ორშაბათი<br/><inputtype="checkbox" name="available" value="tuesday" />სამშაბათი<br/><textareaname="comments" rows="10" cols="30" placeholder="კომენტარის სივრცე"><textarea/><inputtype="submit" value="ღილაკის ტექსტი"></form>| თეგი | ელემენტი |
|---|---|
| form | form |
| label | label for input |
| fieldset | group inputs together |
| legend | legend for fieldset |
| input type="text" | text input |
| input type="password" | password input |
| input type="radio" | radio button |
| input type="checkbox" | checkbox |
| input type="submit" | send form |
| select | drop-down list |
| option | drop-down list item |
| optgroup | group of drop-down list items |
| datalist | autocompletion list |
| textarea | large text input |
<ul><li>item</li><li>item</li><li>item</li></ul>| თეგი | ელემენტი |
|---|---|
| ul | unordered list |
| li | list item |
<ol><li>first</li><li>second</li><li>third</li></ol>| თეგი | ელემენტი |
|---|---|
| ol | ordered list |
| li | list item |
<table><tr><th>სათაური 1</th><th>სათაური 2</th></tr><tr><td>მწკრივი 1, სვეტი 1</td><td>მწკრივი 1, სვეტი 2</td></tr><tr><td>მწკრივი 2, სვეტი 1</td><td>მწკრივი 2, სვეტი 2</td></tr></table>| თეგი | ელემენტი |
|---|---|
| table | ცხრილი |
| tr | ცხრილის მწკრივი |
| th | ცხრილის დასახელება |
| td | ცხრილის უჯრა |