HTML სტრუქტურის შესავალი: ძირითადი ელემენტები და სინტაქსი

HTML სტრუქტურა გადამწყვეტ როლს თამაშობს ვებ გვერდების მშენებლობაში. ის განსაზღვრავს, თუ როგორ არის ორგანიზებული და ნაჩვენები შინაარსი ვებ გვერდზე. აქ არის შესავალი HTML-ის ძირითადი სტრუქტურის შესახებ:

1. `Doctype`

Doctype(დოკუმენტის ტიპის დეკლარაცია) განსაზღვრავს HTML ვერსიას, რომელსაც იყენებს ვებგვერდი. ის უნდა განთავსდეს HTML ფაილის დასაწყისში.

2. html ტეგი

html ტეგი არის ყველა HTML ფაილის ძირეული ელემენტი. ის მოიცავს ვებგვერდის მთელ შინაარსს.

3. `head` ტეგი

head tag შეიცავს ინფორმაციას ვებგვერდის შესახებ, რომელიც პირდაპირ არ არის ნაჩვენები ბრაუზერში. სწორედ აქ არის განსაზღვრული გვერდის სათაური, მეტა ტეგები, CSS და JavaScript ფაილების ბმულები და სხვა სხვა ელემენტები.

4. `body` ტეგი

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

5. ჩადგმული ტეგები

HTML იყენებს იერარქიულ სტრუქტურას გახსნისა და დახურვის ტეგებით. ბავშვის ტეგები მოთავსებულია მშობლის ტეგებში. მაგალითად, p ტეგი(აბზაცი) შეიძლება შეიცავდეს span ტეგებს(inline text), ძლიერ ტეგებს(bold text) და ბევრ სხვა ტეგს.

6. საერთო ტეგები

HTML უზრუნველყოფს ტეგების მთელ რიგს შინაარსის ფორმატირებისთვის და ჩვენებისთვის. მაგალითად, h1-h6 ტეგები(სათაურები), p ტეგი(აბზაცი), img ტეგი(სურათი), ტეგი(ბმული) და მრავალი სხვა.

აქ არის სრული HTML გვერდის სტრუქტურის მაგალითი:

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>My Webpage</title>  
    <link rel="stylesheet" href="styles.css">  
    <script src="script.js"></script>  
</head>  
<body>  
    <header>  
        <h1>Welcome to My Webpage</h1>  
        <nav>  
            <ul>  
                <li><a href="#">Home</a></li>  
                <li><a href="#">About</a></li>  
                <li><a href="#">Contact</a></li>  
            </ul>  
        </nav>  
    </header>  
    <main>  
        <section>  
            <h2>About Me</h2>  
            <p>I am a web developer passionate about creating amazing websites.</p>  
        </section>  
        <section>  
            <h2>My Projects</h2>  
            <ul>  
                <li><a href="#">Project 1</a></li>  
                <li><a href="#">Project 2</a></li>  
                <li><a href="#">Project 3</a></li>  
            </ul>  
        </section>  
    </main>  
    <footer>  
        <p>&copy; 2022 My Webpage. All rights reserved.</p>  
    </footer>  
</body>  
</html>

ზემოთ მოყვანილ მაგალითში გვაქვს სრული HTML გვერდი ძირითადი ელემენტებით, როგორიცაა doctype, html ტეგი, head ტეგი და body ტეგი. head განყოფილებაში ჩვენ განვსაზღვრავთ გვერდის სათაურს, გამოსაყენებელ CSS და JavaScript ფაილებს. სხეულის განყოფილება შეიცავს ელემენტებს, როგორიცაა სათაური, მთავარი და ქვედა კოლონტიტული ვებგვერდის შინაარსის საჩვენებლად.

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

წინა პოსტი

HTML-ისა და ძირითადი სინტაქსის შესავალი: დამწყებთათვის სახელმძღვანელო

შემდეგი პოსტი