ლინკი ჰიპერბმული

• a ტეგი HTML კოდი ქმნის ჰიპერბმულს (ლინკს), რომელიც გადადის Google-ის მთავარ გვერდზე.
  
  

  <

  a

  href

  =

  "https://www.google.com"

  >

  განმარტება:

  • < a > - ქმნის ლინკს (ჰიპერბმულს).
  • href="https://www.google.com"
    - URL-მისამართი, რომელზეც გადადის ბმული (ამ შემთხვევაში, Google-ის გვერდი).
  • Google - ის ტექსტია, რომელიც გამოჩნდება ბმულად.

  ---

  როგორ იმუშავებს?

  • ბრაუზერში ეს გამოჩნდება ასე: - Google
  • როცა დააწკაპუნებ "Google"-ზე, გაიხსნება Google-ის მთავარი გვერდი.

  ---

  დამატებითი პარამეტრები:

  • ლინკის გახსნა ახალ ფანჯარაში:

    <

    a

    href

    =

    "https://www.google.com"

    target

    =

    "_blank"

    >

    Google

    <

    /

    a

    >
    
    target="_blank" - გახსნის ბმულს ახალ ფანჯარაში ან ჩანართში.

  • ლინკი ტელეფონის ნომერზე (დარეკვა):

    <a href="tel:+995599123456">დარეკვა</a>
                                

    კოპირება
    <

    a

    href

    =

    "tel:+995599123456"

    >

    დარეკვა

    <

    /

    a

    >

ლინკში (ჰიპერბმულში) ჩასმული სურათის ტეგი IMG

• ეს კოდი წარმოადგენს ჰიპერბმულს < a >, რომელშიც ჩასმულია სურათი < img > . როდესაც მომხმარებელი დააწკაპუნებს ამ სურათზე, ის გადამისამართდება Google-ის ვებსაიტზე.

  კოდის ანალიზი:

  <a href="https://www.google.com">
      <img src="https://emojiisland.com/cdn/shop/products/Flushed_Emoji_Icon_5e6ce936-4add-472b-96ba-9082998adcf7_large.png?v=1571606089" 
      alt="Emoji" style="width: 100px; height: 100px;">
  </a>
  
                      

  კოპირება
  <

  a

  href

  =

  "https://www.google.com"

  >

  <

  img

  src

  =

  "emoji link"

  alt

  =

  "Emoji"

  style

  =

  "width: 100px; height: 100px;"

  >

  <

  /

  a

  >

  ---

  რას აკეთებს ეს კოდი?

  • < a href="https://www.google.com"> ქმნის ლინკს Google-ის ვებსაიტზე.
  • < img > აჩვენებს სურათს
    • src="..." სურათის ბმული
    • alt="Emoji" ალტერნატიული ტექსტი (სურათი თუ არ ჩაიტვირთება, ეს ტექსტი გამოჩნდება).
    • style="width: 100px; height: 100px;" განსაზღვრავს სურათის ზომას (100x100px).
  • < /a > ხურავს ლინკს

ლინკის ახალ ფანჯარაში გახსნა

• როდესაც მომხმარებელი დააჭერს ემოჯის target="_blank" -ით ლინკი გაიხსნება ახალ ფანჯარაში

  მაგალითად:

  <a href="https://www.google.com" target="_blank">
      <img src="https://emojiisland.com/cdn/shop/products/Flushed_Emoji_Icon_5e6ce936-4add-472b-96ba-9082998adcf7_large.png?v=1571606089" 
      alt="Emoji" style="width: 100px; height: 100px;">
  </a>
  
                      

  კოპირება
  <

  a

  href

  =

  "https://www.google.com"

  target

  =

  "_blank"

  >

  <

  img

  src

  =

  "emoji link"

  alt

  =

  "Emoji"

  style

  =

  "width: 100px; height: 100px;"

  >

  <

  /

  a

  >

HTML ელემენტების სამ ძირითად ტიპს:

Block, Inline, Inline-block

• რა არის ბლოკური ელემენტი (Block Element)

  ეს არის ელემენტი რომელიც

  • ყოველთვის იწყება ახალი ხაზიდან
  • იკავებს მთელ სიგანეს
  • შეიძლება ჰქონდეს სხვა ელემენტებიც შიგნით

  მაგალითები:

  მაგალითები:

  <div> , <p> , <h1> , <section> , <ul> , <article> ,და სხვა.
  კოპირება
  <

  p

  >

  ეს არისდ აბზაცი

  <

  /

  p

  >

  <

  p

  >

  ეს არის მეორე აბზაცი

  <

  /

  p

  >

  შედეგი:

  თითო აბზაცი ახალი ხაზიდან ჩანს.

• რა არის ხაზოვანი ელემენტი (Inline Element)?

  ეს არის ელემენტი რომელიც:

  • არ იწყება ახალი ხაზიდან
  • იკავებს იმდენ ადგილს, რამდენიც შინაარსს სჭირდება
  • შიგნით ბლოკური ელემენტების ჩასმა არ შეიძლება

  მაგალითები:

  <div> , <a> , <strong> , <em> , <img>
  
  

  მაგალითი:

  
  
  კოპირება
  <

  p

  >

  ეს არის <span> ხაზოვანი </span> ტექსტი

  <

  /

  p

  >
  
  

  შედეგი: <span> ტექსტში ჩასმულია და არ იწყებს ახალ ხაზს.

• რა არის ხაზოვან-ბლოკური ელემენტი (Inline-Block Element)?

  ეს არის ელემენტი, რომელიც:

  • ერთ ხაზზე ჩანს სხვა ელემენტებთან ერთად
  • შეიძლება მისცე ზომა (width, height)
  • ბლოკივით იქცევა, მაგრამ ხაზოვნივით ჩანს

  მაგალითები:

  <input>, <button>, <img>, (ზოგჯერ), ან ნებისმიერი ელემენტი, რომელსაც display: inline-block მისცემ

  მაგალითი:

  <

  div

  style

  =

  "display: inline-block; width: 100px; height: 100px; background: lightblue;"

  >

  <

  /

  div

  >

  <

  div

  style

  =

  "display: inline-block; width: 100px; height: 100px; background: pink;"

  >

  <

  /

  div

  >

  შედეგი: ორივე კვადრატი ერთ ხაზზე იქნება.

ახალ ხაზზე გადასვლის ტეგი HTML-ში

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

  მაგალითი:

  კოპირება
  <

  p

  >

  
  აქ გადავა <br> მეორე ხაზზე

  <

  /

  p

  >

  
  

  როცა ეს ბრაზუსერში გამოჩნდება, იქნება ასე:

  აქ გადავა
  მეორე ხაზზე

3 ლექციის გაერთიანება 1 ფაილში

• დავალება:

  1. 3 ლექციის ფაილი + სურათი
  2. index.html -> მთავარი გვერდი
  3. მთავარ გვერდზე გავლინკოთ დანარჩენი 3 გვერდის ფაილი
  4. ყველა ფაილს ქონდეს სწორი title

ლექციის კოდი

გადმოწერა

კოდის ნახვა

ვებზე გადასვლა