გამოიწერე YouTube-ის არხიyoutube logoგამოწერა

HTML-ის შესავალი, პირველი გაკვეთილი

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

Desktop-ზე გავაკეთოთ hello-world დირექტორია და ჩავაგდოთ ვიზუალ სტუდიო კოდში, შემდეგ შევქმნათ ახლი ფაილი და დავარქვათ index.html.

.html აღნიშნავს კონკრეტული ფაილის გაფართოებას, ანუ ტიპს.

<!DOCTYPE html> წარმოადგენს დოკუმენტის დეკლარაციას და ბრაუზერებს ეუბნება, რომ კონკრეტული დოკუმენტი არის HTML 5.0 ვერსიის.

HTML დოკუმენტი შედგება თეგებისგან რომლებსაც აქვთ გახსნის <html>  და დახურვის </html> თეგები.

რა არის <head> თეგი?

მოცემული თეგი წარმოადგენს ე.წ. მეტა ინფორმაციას ჩვენს დოკუმენტზე ასევე ამ თეგში იწერება დოკუმენტის სათაური, დამატებითი რესურსების თეგები მაგალითად CSS ფაილების მისამართები და ა.შ.

რა არის <body> თეგი?

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

რა არის <h1>...<h6> თეგები?

h ტიპის თეგები გამოიყენება სათაურებისთვის, ვიზუალურად მათში განსხვავებაა, რაც გულისხმობს შემდეგს: h1 თეგი არის ვიზუალურად ყველაზე დიდი ზომის და h6 პატარა.

გარდა ვიზუალური სხვაობისა h1 თეგი საძიებო სისტემებისთვის მეტად მნიშვნელოვანი თეგია h2-თან შედარებით და ა.შ.

რა არის <p> თეგი?

<p> თეგში წარმოდენილი უნდა იყოს ზოგადი ტექსტები, ისეთები, როგორებიცაა მაგალითად სტატიები და პროდუქციის ან რაიმეს ტექსტური აღწერები

რა არის <img> თეგი?

<img> თეგი მიეკუთვნება თეგებს, რომლებსაც არ აქვთ დახურვის </> თეგი, მაგრამ აქვს მინიმუმ 1 საჭირო ატრიბუტი რათა სწორად გამოჩნდეს ფოტო. <img src="./yourPhoto.jpg"> მოცემულ თეგში src="" წარმოადგენს ატრიბუტს, რომლშიც შენახული უნდა იყოს ფოტოს მდებარეობა.

<img> თეგს ასევე აქვს 1 რეკომენდირებული ატრიბუტი alt="", მოცმეულ ატრიბუტში ინახება ტექსტური ტიპის ინფორმაცია კონკრეტულ ფოტოზე, მაგალითად თუ ფოტოზე გამოსახულია მანქანა alt ატრიბუტში უნდა ეწეროს შემდეგნაირად <img src="./car.jpg" alt="მანქანის ფოტო">, alt ატრიბუტი ეხმარება საძიებო სისტემებს მიხვდეს, თუ რის შესახებაა კონკრეტული ფოტო.

რა არის <a> თეგი?

<a> თეგი წარმოადგენს ბმულს, ე.წ. ლინკს და გამოისახება შემდეგნაირად <a href="link">ბმულის დასახელება</a>

a თეგს აქვს 1 საჭირო ატრიბუტი href="" რომელშიც ინახება ბმულის მისამართი მაგალითად <a href="./detail.html">see more</a>. მოცემულ ბმულზე დაკლიკების შემთხვევაში ბრაუზერში გაიხსნება detail.html ფაილი.

თუ გვინდა ახლი ბმული გაიხსნას ბრაუზერის ახალ ჩანართში აუცილებელია a თეგში გამოვიტენოთ  target="_blank" ატრიბუტი

ვიდეოში გამოყენებული ღილაკების კომბინაციები

კომბინაცია ფუნქცია
command(ctrl)+s ფაილის შენახვა
command(ctrl)+r ბრაუზერის განახლება (დარეფრეშება)
alt+shift+down arrow ხაზის დაკოპირება და დაბლა ჩამოტანა
command(ctrl)+d ვიზუალ სტუდიო კოდში მონიშნული ტექსტის დამთხვევების პოვნა

კურსში შემავალი თემები

🔗 HTML

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

სხვა კატეგორიები

შეისწავლეთ ვებდეველოპმენტის ენები სრულიად უფასოდ, ისეთები როგორებიცაა Javascript, HTML, CSS და კიდევ სხვა მრავალი ენა

ბოლოს დაწერილი ბლოგები პროგრამირებაზე

ქვემოთ მოცემულია უახლესი 3 ბლოგი პროგრამირების თემატიკასთან დაკავშირებით