Professional Documents
Culture Documents
HTML
HTML
HTML
შესავალი
HTML- ით თქვენ ვერ შეცვლით ეკრანს თქვენს HTML კოდში დამატებითი ადგილების ან
დამატებითი ხაზების დამატებით.
<hr> ტეგი ცარიელი ნიშანია, რაც ნიშნავს, რომ მას არ აქვს ბოლო ნიშანი. (ერთით ჩამოწევა
დაბლა)
<br> ნიშანი არის ცარიელი ნიშანი, რაც ნიშნავს, რომ მას არ აქვს ბოლო ნიშანი.
Href ატრიბუტი
<a> ტეგი განსაზღვრავს ჰიპერბმულს. Href ატრიბუტი განსაზღვრავს იმ გვერდის
URL- ს, სადაც მიდის ბმული:
<a href="https://www.w3schools.com">Visit W3Schools</a>
Src ატრიბუტი
<img> ტეგი გამოიყენება სურათის HTML გვერდზე ჩასასმელად. Src ატრიბუტი
განსაზღვრავს სურათის გზას, რომელიც გამოისახება:
<img src="img_girl.jpg">
შენიშვნები:
შენიშვნები: გარე სურათები შეიძლება დაცულ იქნას საავტორო უფლებებით. თუ
თქვენ არ მიიღებთ მისი გამოყენების ნებართვას, შეიძლება დაარღვიოთ საავტორო
უფლებების კანონები. გარდა ამისა, თქვენ ვერ აკონტროლებთ გარე სურათებს; ის
შეიძლება მოულოდნელად მოიხსნას ან შეიცვალოს.
რჩევა:
თითქმის ყოველთვის საუკეთესოა ნათესავი URL- ების გამოყენება. ისინი არ
დაირღვევა, თუ დომენს შეცვლით.
alt ატრიბუტი
Example: 2
იხილეთ, თუ რა მოხდება, თუ ჩვენ ვცდილობთ გამოვსახოთ არარსებული სურათი:
<img src="img_typo.jpg" alt="Girl with a jacket">
Example 2:
HTML ელემენტის სტილის დაყენება შეიძლება განხორციელდეს სტილის
ატრიბუტით.
HTML სტილის ატრიბუტს აქვს შემდეგი სინტაქსი: <tagname style="property:value;">
property არის css-ის თვისება; value არის CSS-ის მნიშვნელობა.
Fonts (შრიფტები)
CSS შრიფტის ოჯახის თვისება განსაზღვრავს შრიფტს, რომელიც გამოიყენება HTML
ელემენტისთვის:
Example:
თავის რეზიუმე:
გამოიყენეთ style ატრიბუტი HTML ელემენტების სტილისთვის
გამოიყენეთ background-color ფონის ფერისთვის
გამოიყენეთ color ტექსტური ფერებისათვის
გამოიყენეთ font-family ტექსტის შრიფტებისთვის
გამოიყენეთ font-size ტექსტის ზომისთვის
გამოიყენეთ text-align ტექსტის გასწორებისთვის
Example:
Good:
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
Bad:
<a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a>
რჩევა: <i> ნიშანს ხშირად იყენებენ ტექნიკური ტერმინის, სხვა ენის ფრაზის,
აზრის, გემის სახელის და ა.შ. Example:
გაითვალისწინეთ, რომ საწყის ტეგში არის ძახილის წერტილი (!), მაგრამ არა ბოლოში.
კომენტარებით შეგიძლიათ განათავსოთ შეტყობინებები და შეხსენებები თქვენს HTML
კოდში.
კომენტარები ასევე კარგია HTML- ის გამართვისთვის, რადგან შეცდომების მოსაძებნად
შეგიძლიათ კოდის HTML ხაზების კომენტარი ერთ ჯერზე გააკეთოთ. Example:
7 – HTML Colors (HTML ფერები)
HTML ფერები განსაზღვრულია წინასწარ განსაზღვრული ფერის სახელებით, ან RGB,
HEX, HSL, RGBA ან HSLA მნიშვნელობებით.
RGB – Red, Green, Blue; (ეს ნიშნავს, რომ არსებობს 256 x 256 x 256 = 16777216 შესაძლო ფერები!)
RGBA – Red, Green, Blue, Alpha;
HEX – Hexadecimal(თექვსმეტობითი) მითითებულია: #RRGGBB, სადაც RR (წითელი), GG (მწვანე) და BB
(ლურჯი) თექვსმეტობითი რიცხვები განსაზღვრავს ფერის კომპონენტებს.
HSL – Hue, Saturation, Lightness (ელფერი, გაჯერება, სიმსუბუქე)
HSLA – Hue, Saturation, Lightness, Alpha
შემდეგ სამ <div> ელემენტს აქვს ფონის ფერი მითითებული RGB, HEX და HSL
მნიშვნელობებით:
Example:
8 – HTML Styles – CSS (Cascading Style Sheets)
CSS ნიშნავს კასკადური სტილის ცხრილებს.
CSS ზოგავს ბევრ სამუშაოს. მას შეუძლია გააკონტროლოს ერთდროულად
მრავალი ვებ გვერდის განლაგება.
რა არის CSS?
Cascading Style Sheets (CSS) გამოიყენება ვებ – გვერდის განლაგების ფორმატისთვის.
CSS– ით თქვენ შეგიძლიათ აკონტროლოთ ფერი, შრიფტი, ტექსტის ზომა,
ელემენტებს შორის მანძილი, როგორ არის განლაგებული ელემენტები, ფონის
სურათები ან ფონის ფერები. უნდა გამოიყენოთ, სხვადასხვა
ჩვენებები სხვადასხვა მოწყობილობებისთვის და ეკრანის ზომებისთვის
გაცილებით მეტი!
CSS - ის გამოყენება
CSS შეიძლება დაემატოს HTML დოკუმენტებს 3 გზით:
(Inline) ხაზში - სტილის ატრიბუტის გამოყენებით HTML ელემენტებში
(Internal) შიდა - <head> განყოფილებაში <style> ელემენტის გამოყენებით
(External) გარე - <link> ელემენტის გამოყენებით გარე CSS ფაილთან
დასაკავშირებლად
Inline CSS
inline CSS გამოიყენება უნიკალური სტილის გამოყენებისთვის ერთ HTML
ელემენტზე.
inline CSS იყენებს HTML ელემენტის სტილის ატრიბუტს.
შემდეგი მაგალითი ადგენს <h1> ელემენტის ტექსტის ფერს ლურჯად, ხოლო <p>
ელემენტის ტექსტს ფერს წითლად:
Example:
Internal CSS
internal CSS გამოიყენება სტილის განსაზღვრისათვის ერთი HTML გვერდისთვის.
Internal CSS განისაზღვრება HTML გვერდის <head> განყოფილებაში, <style>
ელემენტში.
შემდეგი მაგალითი ადგენს ყველა <h1> ელემენტის (იმ გვერდზე) ტექსტის ფერს
ლურჯად, ხოლო ყველა <p> ელემენტის ტექსტის ფერს წითლად. გარდა ამისა,
გვერდი ნაჩვენები იქნება "ფხვნილისფერი" ფონის ფერით:
Example:
External CSS
external სტილის ფურცელი გამოიყენება სტილის განსაზღვრისათვის მრავალი
HTML გვერდისთვის.
external სტილის ფურცლის გამოსაყენებლად, დაამატეთ მას ბმული თითოეული
HTML გვერდის <head> განყოფილებაში:
გარე სტილის ფურცლის დაწერა შესაძლებელია ტექსტის ნებისმიერ
რედაქტორში. ფაილი არ უნდა შეიცავდეს HTML კოდს და უნდა იყოს შენახული
css გაფართოებით.
აი, როგორ გამოიყურება "styles.css" ფაილი:
Chapter Summary:
გამოიყენეთ HTML სტილის ატრიბუტი შიდა სტილისთვის
გამოიყენეთ HTML <style> ელემენტი შიდა CSS განსაზღვრისათვის
გამოიყენეთ HTML <link> ელემენტი, რომ მიმართოთ გარე CSS ფაილს
გამოიყენეთ HTML <head> ელემენტი <style> და <link> ელემენტების შესანახად
გამოიყენეთ CSS ფერის თვისება ტექსტის ფერებისთვის
გამოიყენეთ CSS font-family თვისება ტექსტის შრიფტებისთვის
გამოიყენეთ CSS შრიფტის ზომის თვისება ტექსტის ზომისთვის
გამოიყენეთ CSS სასაზღვრო თვისება საზღვრებისთვის
გამოიყენეთ CSS შევსების თვისება საზღვრის შიგნით სივრცისათვის
გამოიყენეთ CSS ზღვრის თვისება საზღვრის გარეთ სივრცისათვის
9 - HTML Links (HTML ლინკები)
Links are found in nearly all web pages. Links allow users to click their way from page to page.
რჩევა: ბმულები, რა თქმა უნდა, შეიძლება სტილიზებული იყოს CSS– ით, რომ მიიღოთ
სხვა სახე!
1. _Blank (ცარიელი) -ის გამოყენების ყველაზე გავრცელებული მიზეზი არის ის, რომ
ოფსითის ბმულები იხსნება ცალკეულ ჩანართში. ეს საშუალებას აძლევს
მომხმარებელს დააწკაპუნოს მითითებაზე და დაუბრუნდეს მას მოგვიანებით,
მიმდინარე გვერდის დატოვების გარეშე. ის უფრო დიდხანს ინარჩუნებს
ვიზიტორებს თქვენს საიტზე და აუმჯობესებს თქვენი მეტრიკის უმეტესობას:
გადახტომის მაჩვენებელი, კონვერტაცია, მონახულებული გვერდები.
განმარტება:
როდესაც ფოტოს დავკლიკავთ გადაგვაგდებს ლინკზე „html Tutorial -ის.
Default.asp ნიშნავს საიტის გვერდის მისამართს, ამ მომეტში www.w3schools.com ის;
Default.asp შემოკლებული ლინკია. ასე მაგალითად: