იმისთვის, რომ დავიწყოთ დეველპმენტი აუცილებელია შევქმნათ სამუშაო დირექტორია, რომელშიც გავაგრძელებთ შემდე მუშაობას და კოდის წერას.
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 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 | ვიზუალ სტუდიო კოდში მონიშნული ტექსტის დამთხვევების პოვნა |
შეისწავლეთ ვებდეველოპმენტის ენები სრულიად უფასოდ, ისეთები როგორებიცაა Javascript, HTML, CSS და კიდევ სხვა მრავალი ენა
ქვემოთ მოცემულია უახლესი 3 ბლოგი პროგრამირების თემატიკასთან დაკავშირებით