საბაზისო ელემენტები და ზოგადი პრინციპები

საბაზისო ელემენტებია რომლებიც განსაზღვრავენ HTML ფაილიტ ტიპს და ფორმატს და ვებ-გვერდის გაწყობის ზოგადი პრინციპები.

<html>

html არის უპირველესი ელემენტი რომელიც იწერება <html> da წარმოადგენს იმ ძირითად ტეგს სადაც მოთავსებულია სხვა ყვეა დანარჩენი ტეგი, რომელიც კონკრეტულ ერთ გვერდის შემადგენელი ნაწილი იქნება.

<dcotype>

დოკუმენტის ტიპის ასაღწერას გამოიყენება <!DOCTYPE html> რომელიც გამოიყენება <html> ტეგის გარეთ და განსაზღვრავს დოკუმენტის ტიპს. ამავე ტეგით განისაზღვრება დოკუმენტის ტიპის ვერსიაც, მაგალითად XHTML 1.1-ისთვის გამოვიყენებთ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<MarkupLanguage>

მარკირების ენა - იგივე სანიშნების ენა, რითაც გარკვეული ლოგიკით ხდება ინფორმაციის სტრუქტურიზირება. მაგალითად: <b>გამუქებული ტექსტი</b>.
HTML - Hypertext Markup Languages

<Inline>

HTML გვერდი იყოფა რამდენიმე ტიპის ელემენტებად, უხილავი, inline (პირდაპირი), block (ბლოკის ტიპი) და მათი კომპინირებული სხვა ტიპები. Inline ელემენტი არის ხილვადი ელემენტი, რომელიც ჩადგმულია მის გარშემო მყოფ ტეგებს შორის და იკავებს თავისუფალ ადგილს.
HTML სამაგალითო კოდი:
<span>1</span><span>2</span><span>3</span>


რეზულტატი:
123

<Block>

Block ტიპის ელემენტებია, როლებიც იკავებენ ოთხკუთხედის ფორმის სივრცეს შესაბამის ზომისას ან მთლიან ხაზისას.
HTML სამაგალითო კოდი:
<div>1</div><div>2</div><div>3</div>


რეზულტატი:
1
2
3

<Element>

თითოეული ტეგი წარმოადგენს ცალკეულ ობიექტს უხილავი ან ხილვადი (inline/block) ტიპებისას, რომელსაც გააჩნია ტეგის სახელი, უნიკალური იდენტიფიკატორი - მიმთითებელი, კლასი, საწყისი პარამეტრები, ატრიბუტები, სტილები, მეთოდები და თვისებები.

<SimpleCode>

HTML სამაგალითო კოდი:

<html>
<head>
	<title>Site Name</title>
</head>
<body>
<div>
	<span>testing</span><span>&nbsp;</span><span>Site</span>
</div>	
</body>
</html>



რეზულტატი:
testing Site

მეტამონაცემები

მონაცემები რითაც განისაზღვრება HTML გვერდის განზოგადებული კონტექსტი, ფარგლები, განსაზღვრებები, სკრიპტები, სტილები და აშ. მეტამონაცემების ტეგები გამოიყენება მხოლოდ <head> ტეგის შიგნით.

<head>

ტეგი <head> წარმოადგენს html-ის პირველ ბლოკს განკუთვნილს მეტამონაცემებისთვის და მხოლოდ მასში აიღწერება ყველა მეტა მონაცემი. ის ერთადერთია html ფაილში.

<base>

ტეგი <base> და გამოიყენება ვებ-გვერდის URL მისამართის განსასაზღვრავად

<meta>

ტეგი <meta> წარმოადგენს დანარჩენი მეტამონაცემები განსაზღვრისათვის, რომელიც ვერ განისაზღვრება სხვა მეტამონაცემების ტეგებიდან (<base>, <link>, <script>, <style> or <title>)

<style>

ტეგი <style> წარმოადგენს მიმდინარე html გვერდისთვის სტილების აღწერას დიზაინისთვის

<script>

ტეგი <script> გამოიყენება სკრიპტული კოდის ჩასაშენებლად

<title>

ტეგი <title> წარმოადგენს ვებ-ბრაუზერის ფანჯრის დასახელების მნიშვნელობას

შიგთავსის იგივე კონტენტი

გამოიყენება html გვერდის შემცველი ინფორმაციის მართვისთვის

<body>

ტეგი <body> წარმოადგენს HTML ფაილის html ტეგის მეორე ბლოკს head-ის შემდეგ, რომელშიც მოთავსებულია მთელი გვერდის კონტენტი. ის ერთადერთია html ფაილში.

<address>

ტეგი <address> გამოიყენება ავტორის მიერ, მისი ან/და მისი კომპანიის რეკვიზიტების განსათავსებლად

<article>

ტეგი <article> სტატიის შესადგენად, რომელიც გაამარტივებს გაზეთის, ბლოგების, სიახლეების ტიპის გვერდის აწყობას.

<header>

ტეგი <header> წარმოადგენს ჯგუფის თავაკს-ქუდს ან ნავიგაციისთვის სარეკლამო ფრაზას.

<h1, h2, h3, h4, h5, h6>

ტეგი <h1> გამოიყენება დოკუმენტების ან ტექსტური ინფორმაციაში შიდა დონეების განსასაზღვრავად.

<nav>

ტეგი <nav> გამოიყენება ნავიგაციის გასაუმჯობესებლად, მასში მოქცეულ გარე რესურსებთან ან საიტებთან ბმულებით ამარტივებს იმ ბმულების გამოკვეთას სადაც შესაძლოა გაგრძელდეს ძებნა.

<section>

ტეგი <section> გამოიყენება ერთი თემატური გაერთიანების შესაქმნელად

ტექსტების განლაგებასთან მუშაობა

გამოიყენება html გვერდში დატანილი ტექსტების განლაგებისთვის

<blockquote>

ტეგი <blockquote> გამოიყენება ციტატების გასაკეთებლად.

<dl>

ტეგი <dl> წარმოადგენს დიალოგის სტილში ტექსტის გამოსატანა, როგორებიც შეიძლება იყო: კითხვა-პასუხი, რაიმეს აღწერა, და აშ. მასში მონაწილეობს 2 ტეგი dl და dt.

<dt>

ტეგი <dt> გამოიყენება dl ტეგში პირველი პირის გამოსახატავად დიალოგის რეჟიმში, კითხვის გასაწერად კითხვა-პასუხის რეჟიმში და აშ.

<dd>

ტეგი <dd> გამოიყენება dl ტეგში მეორე პირის გამოსახატავად დიალოგის რეჟიმში, პასუხების გასაწერად კითხვა-პასუხის რეჟიმში და აშ.

<div>

ტეგი <div> წარმოადგენ ზოგად ტეგს, რომლითაც შესაძლებელია ძირითადი სტრუქტურის შემუშავება. ის არ არის დამოკიდებული რომელიმე ტეგზე. ის შეიძლება გამოვიყენეოთ სხვა ტეგების მაგივრად სტილის და დიზაინის შესაქმენლად, გარდა ისეთი ელემენტებისა რომლებსაც აქვთ სხვა აზრობრივი დანიშნულება (როგორებიც არის: article, nav, )

<figure>

ტეგი <figure> გამოიყენება სურათების, სქემების, გრაფიკული გამოხატულები და აშ. გაერთიანებისთვის.

<figcaption>

ტეგი <figcaption> გამოიყენება ფიგურის აღწერისთვის, დასახელებისთვის ან ტექსტურად გამოსახატავად

<hr>

ტეგი <hr> წარმოადგენს გამყოფი ხაზს

<ul>

ტეგი <ul> გამოიყენება ხისებური სიის, მენიუს, რაიმე სტრუქტური და მსგავსი საკითხების გადასაწყვეტად, li და ol-ელემენტების გასაერთიანებლად; მაგ: (<ul><li>1 ხაზი<ul><li>1.1. ხაზი</li></ul></li><li>2 ხაზი</li></ul>)

<li>

ტეგი <li> გამოიყენება სიების მართვისთვის. თვითოეული li ტეგი წარმოადგენს სიაში ერთ ჩანაწერს

<ol>

ტეგი <ol> გამოყოფილი სიების შესადგენად, სადაც თვითოეულ სტრიქონისთვის შესაძლებელი იქნება გადანომრვა, რგოლებით ან სიმბოლოებით გამოყოფა და აშ. რომელსაც განსაზღვრავს ატრიბუტი list-style-type.

<main>

ტეგი <main> გამოიყენება დოკუმენტის იგივე კონკრეტული ვებ-გვერდის ძირითადი ინფორმაციის გამოყოფისთვის, ისეთი ინფორმაციებიდან რომლებიც შესაზლოა სხვადასხვა გვერდებზე გამეორდეს. მენიუ, საავტორო უფელები, ერკლამები და აშ.

<p>

ტეგი <p> წარმოადგენს პარაგრაფს

<pre>

ტეგი <pre> ტექსტის პირდაპირი ფორმატით გამოსახვა, თეთრი ხაზების და სტრიქონების შენარჩუნებით.

ტექსტების ვიზუალიზაციასთან მუშაობა, პირდაპირი-ჩაშენებული საშუალებებით

გამოიყენება html გვერდში დატანილი ტექსტების ვიზუალიზაციისთვის პირდაპირი-ჩაშენებული ტეგების გამოყენებით

<a>

ტეგი <a> გამოიყენება ბმულების ასაწყობა, გარე ან შიდა გვერდის ელემენტებთან .

<abbr>

ტეგი <abbr> გამოიყენება აბრევიატურების გასაკეთებლად.

<b>

ტეგი <b> გამოიყენება ტექსტის გამუქებისთვის Bold.

<br>

ტეგი <br> გამოიყენება ახალ ხაზზე გადასასვლელად.

<cite>

ტეგი <cite> გამოიყენება ტექსტში ციტატის გასაკეთებლად.

<code>

ტეგი <code> გამოიყენება პროგრამული კოდის ეკრანზე გამოსატანად.

<data>

ტეგი <data> გამოიყენება კონტენტის კონვერტაციისთვის რაიმე ცვლადად. მაგალითად: <data value="2015-01-01">2015 წლის პირველი იანვარი</data>

<dfn>

ტეგი <dfn> გამოიყენება გამოყენებული ტერმინების განსაზღვრისათვის.

<em>

ტეგი <em> გამოხატვა Emphasized text.

<i>

ტეგი <i> გამოხატვა Italic text.

<mark>

ტეგი <mark> გამოიყენება მარკირებისთვის Mark.

<q>

ტეგი <q> გამოიყენება ციტირებისთვის Text for test.

<s>

ტეგი <s> გამოიყენება ტექსტზე ხაზის გადასმისთვის Text.

<samp>

ტეგი <samp> გამოიყენება ცალკეული სიმბოლოების გამოსატანად. Hello world.

<small>

ტეგი <small> გამოიყენება პარა ზომის ტექსტების გამოსატანას Text.

<span>

ტეგი <span> გამოიყენება ფრაზების გამოსახატავად.

<strong>

ტეგი <strong> გამოიყენება ტექსტების გასამუქებლად.

<sub>

ტეგი <sub> გამოიყენება ქვეტექსტების გამოყოფისთვის TEXT123.

<sup>

ტეგი <sup> გამოიყენება ხარისხის მაჩვენებლის გამოსახატავად 102.

<time>

ტეგი <time> გამოიყენება თარიღების გამოსაყოფად.

<u>

ტეგი <u> გამოიყენება ტექსტზე ქვეშ ხაზის გასმისთვის Text.

<var>

ტეგი <var> გამოიყენება ცვლადების ვიზუალიზაციისთვის Variable.

სურათები და მულტიმედია

გამოიყენება სურათებთან და მულტიმედიის ფაილებთან სამუშაოდ

<img>

ტეგი <img> გამოიყენება სურათის გამოსაჩენად.

<map>

ტეგი <map> გამოიყენება რაიმე სურათის ან გრაფიკული გამოსახულების შიგნით რეგიონების დასაყოფად, რომელზეც განხორციელდება გარკვეული ოპერაციები.

<area>

ტეგი <area> გამოიყენება map ელემენტის სიგნით რეგიონების მოსანიშნად.

<audio>

ტეგი <audio> გამოიყენება აუდიო ფაილების გასაშვებად.

<video>

ტეგი <video> გამოიყენება ვიდეო ფაილების გასაშვებად.

<track>

ტეგი <track> გამოიყენება ვიდეოზე მონაცემების დასადებად მაგალითი

ჩადგმული დანამატები (Embedded)

გამოიყენება ჩადგმული დანამატების გამოსაყენებლად.

<embed>

ტეგი <embed> გამოიყენება ინტერნეტ ბრაუზრის პლაგინების გამოსაყენებლად, როგორიც არის flash, adobe და აშ.

<iframe>

ტეგი <iframe> გამოიყენება ბრაუზერის ფანჯრის კოდში ჩადგმისთვის.

<object>

ტეგი <object> გამოიყენება გარე პროგრამული ობიექტის გამოსაძახებლად, როგორიც არის ActiveX კომპონენტი, პლაგინი და სხვა.

<param>

ტეგი <param> გამოიყენება ობიექტზე პარამეტრების გადასაცემად.

<source>

ტეგი <source> გამოიყენება პროგრამული ნაწილის ასარჩევად, რის გამოყენებითაც ბრაუზერი ახდენს სურათის, აუდიო და ვიდეო ფაილების დამუშავებას.

სკრიპტები

სკრიპტული პროგრამული ენების გამოყენება. როგორებიც არის javascript, vbscript და სხვა

<canvas>

ტეგი <canvas> გამოიყენება გრაფიკული დიზაინისთვის, ხატვისთვის ან რაიმე სურათის შესაქმნელად სკრიპტის და პირდაპირი გადასაცემი პარამეტრების გამოყენებით.

<script>

ტეგი <script> გამოიყენება სკრიპტული პროგრამული კოდის ჩასაშენებლად, საიდანაც შესრულდება სკრიპტული კოდი.

<noscript>

ტეგი <noscript> გამოიძახება მაშინ როდესაც ინტერნეტ ბრაუზერს არ გააჩნია სკრიპტული მხარდაჭერა ან არ აქვს უფლება.

კორექტირება

ტექსტების რედაქტირებისთვის, ვიზუალური ნაწილის წარმოსაჩენად.

<del>

ტეგი <del> გამოიყენება წასაშლელი ტექსტის მოსანიშნად {My favorite color is <del>blue</del> <ins>red</ins>!} და გამოჩნდება {My favorite color is blue red!}.

<ins>

ტეგი <ins> გამოიყენება ჩასამატებელი ტექსტის მოსანიშნად გრაფიკული დიზაინისთვის, {My favorite color is <del>blue</del> <ins>red</ins>!} და გამოჩნდება {My favorite color is blue red!}.

ცხრილები

ცხრილების დიზაინის და სტრუქტურის ელემენტი.

<table>

ტეგი <table> წარმოადგენს ცხრილის აღწერის ძირითად ელემენტს. მის ქვეშ არის მოქცეული სხვა დანარჩენი ცხრილის ელემენტები.

<tr>

ტეგი <tr> გამოიყენება თვითოეული სტრიქონის ჩანაწერისთვის.

<td>

ტეგი <td> განსაზღვრავს თვითოეული სვეტს.

<thead>

ტეგი <thead> წარმოადგენს ცხრილის ქუდს იგივე თავაკს.

<tbody>

ტეგი <tbody> წარმოადგენს ცხრილის ტანის სტრუქტურას.

<tfoot>

ტეგი <tfoot> წარმოადგენს ცხრილის ქვედა ხაზს-ცხრილის დაბოლოებას.

<caption>

ტეგი <caption> წარმოადგენს ცხრილის დასახელების განმსაზღვრელს.

<col>

ტეგი <col> გამოიყენება colgroup ტეგში და განსაზღვრავს სვეტების გამაერთიანებელ სტრუქტურას.

<colgroup>

ტეგი <colgroup> გამოიყენება სვეტების გაერთიანების სტრუქტურის განსასაზღვრად.

<th>

ტეგი <th> წარმოადგენს ქუდის, იგივე თავაკის სვეტების გამოყოფის საშუალებას. ის td-ს მაგივრობას წევს, განსხვავება აქვს მხოლოდ სტილში, რადგან ვიზუალურად იყოს განსხვავებული.

ფორმა

დანიშნულებაა მონაცემების შევსება უზრუნველყოს კლიენტის მხარეს და მათი გადაგზავნა განახორციელოს სერვერის მხარეს.

<form>

ტეგი <form> არის ფორმის მთავარი ელემენტი, რომლის საშუალებითაც განისაზღრვება გადასაგზავნი მონაცემების მისამართი, მეთოდი და რომელშიც თავს იყრის ფორმის ყველა სხვა ელემენტი.

<input>

ტეგი <input> წარმოადგენს ინფორმაციის შეყვანის ელემენტს. ის შეიძლება იყოს: text, checkbox, color, date, datetime, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, button, tel, time, url, week. და შესაძლოა კიდევ დაემატოს სხვა ფორმატები.

<datalist>

ტეგი <datalist> გამოიყენება ტექსტურ ველში წინასწარ განსაზღვრული მონაცემების მარტივის არჩევისთვის.

<label>

ტეგი <label> წარმოადგენს ელემენტის დასახელებას.

<textarea>

ტეგი <textarea> გამოიყენება ტექსტური მონაცემის შესაყვანად.

<button>

ტეგი <button> არის ღილაკი რაიმე ფუნქციის შესასრულებლად.

<fieldset>

ტეგი <fieldset> გამოიყენება რამდენიმე ელემენტის დასაჯგუფებლად.

<legend>

ტეგი <legend> გამოიყენება fieldset-ის შიგნით, დაჯგუფების დასახელებსი შესაქმნელად.

<select>

ტეგი <select> წარმოადგენს ჩამოსაშლელ-ასარჩევ ელემენტს.

<option>

ტეგი <option> გამოიყენება ჩამოსაშლელ-ასარჩევ ელემენტში(select) ჩანაწერის განსათავსებლად.

<optgroup>

ტეგი <optgroup> გამოიყენება ჩამოსაშლელ-ასარჩევ ელემენტში (select) ჩანაწერების დასაჯგუფებლად.

<meter>

ტეგი <meter> გამოიყენება სკალაური და წილადური რიცხვების შესაყვანად.

<output>

ტეგი <output> გამოიყენება რამდენიმე ელემენტიდან მათემატიკურად დაანგარიშებისთვის იხ. მაგალითი.

<progress>

ტეგი <progress> გამოიყენება პროცენტული მონაცემების ვიზუალიზაციისთვის.

input ელემენტი

შესაყვანი მონაცემები ტიპები.

<button>

<checkbox>

<color>

<date>

<datetime>

<datetime-local>

<email>

<file>

<hidden>

<image>

<month>

<number>

<password>

<radio>

<range>

<reset>

<submit>

<tel>

<text>

<time>

<url>

<week>

ასარჩევი ელემენტი

ასარჩევი ელემენტი რომლის დანიშნულებაც არის წინასწარ შეგდგენილი სიიდან აირჩიოს მნიშნველობა.

<select>

<select_group>

<fieldset>

ელემენტის ატრიბუტები

ელემენტის ხშირად გამოყენებული ატრიბუტები

<id>

ატრიბუტი <id> არის უნიკალური ID HTML ფაილში.

<name>

ატრიბუტი <name>-ით განისაზღვრება ელემენტის სახელი.

<style>

ატრიბუტი <style>-ით განისაზღვრება ელემენტის სტილი ელემენტები, რომელიც თავის მხრივ მოიცავს CSS ატრიბუტებს.

<alt>

ატრიბუტი <alt> არის მიმანიშნებელი ტექსტი ელემენტის.

<disabled>

ატრიბუტი <disabled> გამოიყენება ელემენტის დაბლოკვისთვის.

<href>

ატრიბუტი <href> არის ბმულის ჩანაწერი, რომელზეც უნდა მოხდეს გადამისამართება.

<src>

ატრიბუტი <src> არის ბმული ჩანაწერი, საიდანაც უნდა მოხდეს რესურსის აღება.

<value>

ატრიბუტი <value> წარმოადგენს ელემენტის მნიშნველობას.

<class>

ატრიბუტი <class> წარმოადგენს CSS სტილის კლასს-სახელს.

SEO - Search Engine Optimization, ძებნის სისტემის ოპტიმიზაციისთვის გამოყენებადი HTML ტეგები

SEO - Search Engine Optimization, ძებნის სისტემის ოპტიმიზაციისთვის გამოყენებადი HTML ტეგები

<META_Keyworkds>

ატრიბუტი <id> არის უნიკალური ID HTML ფაილში.

<title>

ატრიბუტი <name>-ით განისაზღვრება ელემენტის სახელი.