html - HTML چیست | بی‌آکادمی

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>استایل دهی Internal</title>
    <style>
        body {
            font-family: Tahoma;
            background-color: #f5f5f5;
            margin: 0;
            padding: 20px;
            text-align: center;
        }
        
        h1 {
            color: #2e86c1;
            border-bottom: 2px solid #3498db;
            padding-bottom: 10px;
        }
        
        p {
            color: #333;
            line-height: 1.6;
        }
        
        .box {
            background-color: white;
            padding: 15px;
            margin: 15px 0;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .note {
            background-color: #fef9e7;
            padding: 10px;
            border-radius: 5px;
            border-right: 4px solid #f1c40f;
        }
        
        .btn {
            background-color: #3498db;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin: 10px;
        }
    </style>
</head>
<body>
    <h1>استایل دهی Internal در HTML</h1>
    
    <p>در این روش استایل‌ها در بخش head صفحه و با استفاده از تگ style تعریف می‌شوند.</p>
    
    <div class="box">
        <h2>مزایای استایل دهی Internal</h2>
        <p>• استایل‌ها فقط روی همین صفحه اثر می‌گذارند</p>
        <p>• کد تمیزتر و منظم‌تری نسبت به استایل Inline داریم</p>
        <p>• نیازی به فایل خارجی جداگانه نداریم</p>
    </div>
    
    <div class="note">
        <p>برای دیدن کدهای استایل، به بخش head این صفحه مراجعه کنید.</p>
    </div>
    
    <button class="btn">دکمه نمونه</button>
    
    <p>همانطور که می‌بینید، استایل Internal به ما اجازه می‌دهد ظاهر کل صفحه را با کدهای متمرکز مدیریت کنیم.</p>
</body>
</html>

استایل دهی internal

مثال‌های آماده