6.html - master - Codeboy1/lab6

6.html
240 строк9 KB
Codeboy1
create: 1.html, 2.html, 3.html, 4.html, 5.html, 6.html, 7.html, 8.html, 9.html
01 апр 2026, 14:10
01 апр 2026, 14:10b887c38
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Внешние ссылки - оранжевый цвет</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 800px;
            margin: 50px auto;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        
        .container {
            background: white;
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        }
        
        h1 {
            color: #333;
            margin-bottom: 10px;
            font-size: 1.8rem;
            text-align: center;
        }
        
        .info {
            background: #f0f0f0;
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 25px;
            font-size: 0.9rem;
            color: #555;
            border-left: 4px solid #ff9800;
        }
        
        ul {
            list-style-type: none;
            padding: 0;
        }
        
        li {
            padding: 12px;
            margin: 8px 0;
            background: #f8f9fa;
            border-radius: 8px;
            transition: all 0.3s ease;
            border-left: 3px solid #ddd;
        }
        
        li:hover {
            transform: translateX(5px);
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        a {
            text-decoration: none;
            font-weight: 500;
            transition: all 0.2s ease;
        }
        
        a:hover {
            text-decoration: underline;
        }
        
        /* Стиль для обычных ссылок (не внешних) */
        a.internal {
            color: #4caf50;
        }
        
        a.internal:hover {
            color: #45a049;
        }
        
        .legend {
            margin-top: 25px;
            padding: 15px;
            background: #f0f0f0;
            border-radius: 10px;
            font-size: 0.9rem;
        }
        
        .legend-item {
            display: inline-block;
            margin-right: 20px;
        }
        
        .orange-box {
            display: inline-block;
            width: 20px;
            height: 20px;
            background-color: #ff9800;
            border-radius: 4px;
            margin-right: 5px;
            vertical-align: middle;
        }
        
        .green-box {
            display: inline-block;
            width: 20px;
            height: 20px;
            background-color: #4caf50;
            border-radius: 4px;
            margin-right: 5px;
            vertical-align: middle;
        }
        
        .rule {
            background: #fff3e0;
            padding: 10px;
            border-radius: 8px;
            margin-top: 15px;
            font-family: monospace;
            font-size: 0.85rem;
            border: 1px solid #ffcc80;
        }
        
        hr {
            margin: 20px 0;
            border: none;
            border-top: 2px solid #e0e0e0;
        }
        
        @media (max-width: 600px) {
            .container {
                padding: 20px;
            }
            
            li {
                padding: 8px;
                font-size: 0.9rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🔗 Определение внешних ссылок</h1>
        
        <div class="info">
            <strong>📌 Правила:</strong><br>
            Ссылка считается <strong>внешней</strong>, если:
            <ul style="margin: 10px 0 0 20px; padding-left: 0;">
                <li style="padding: 5px; margin: 0;">✓ Её href содержит <code>://</code></li>
                <li style="padding: 5px; margin: 0;">✓ Но НЕ начинается с <code>http://internal.com</code></li>
            </ul>
        </div>
        
        <a name="list" style="display: none;">the list</a>
        
        <ul>
            <li><a href="http://google.com">http://google.com</a> - внешняя ссылка</li>
            <li><a href="/tutorial">/tutorial.html</a> - внутренняя ссылка</li>
            <li><a href="local/path">local/path</a> - внутренняя ссылка</li>
            <li><a href="ftp://ftp.com/my.zip">ftp://ftp.com/my.zip</a> - внешняя ссылка (ftp)</li>
            <li><a href="http://nodejs.org">http://nodejs.org</a> - внешняя ссылка</li>
            <li><a href="http://internal.com/test">http://internal.com/test</a> - внутренняя ссылка (internal.com)</li>
        </ul>
        
        <div class="legend">
            <div class="legend-item">
                <span class="orange-box"></span>
                <strong>Внешние ссылки</strong> (оранжевый)
            </div>
            <div class="legend-item">
                <span class="green-box"></span>
                <strong>Внутренние ссылки</strong> (зеленый)
            </div>
        </div>
        
        <div class="rule">
            <strong>🔍 Логика определения:</strong><br>
            <code>href="http://google.com"</code> → содержит :// и НЕ начинается с http://internal.com → <span style="color: #ff9800;">ВНЕШНЯЯ (оранжевый)</span><br>
            <code>href="http://internal.com/test"</code> → содержит ://, НО начинается с http://internal.com → <span style="color: #4caf50;">ВНУТРЕННЯЯ (зеленый)</span><br>
            <code>href="/tutorial"</code> → не содержит :// → <span style="color: #4caf50;">ВНУТРЕННЯЯ (зеленый)</span>
        </div>
        
        <hr>
        
        <div style="text-align: center; font-size: 0.85rem; color: #777; margin-top: 20px;">
            ✅ Все внешние ссылки (кроме internal.com) выделены оранжевым цветом
        </div>
    </div>

    <script>
        // Функция для проверки, является ли ссылка внешней
        function isExternalLink(href) {
            // Проверяем, содержит ли href ://
            const containsProtocol = href.includes('://');
            
            // Проверяем, начинается ли ссылка с http://internal.com
            const isInternalCom = href.startsWith('http://internal.com');
            
            // Ссылка внешняя, если содержит :// и НЕ начинается с http://internal.com
            return containsProtocol && !isInternalCom;
        }
        
        // Получаем все ссылки на странице
        const allLinks = document.querySelectorAll('a');
        
        // Проходим по каждой ссылке
        allLinks.forEach(link => {
            const href = link.getAttribute('href');
            
            // Если href существует и ссылка является внешней
            if (href && isExternalLink(href)) {
                // Применяем оранжевый цвет
                link.style.color = 'orange';
                link.style.fontWeight = 'bold';
                
                // Добавляем дополнительный стиль для лучшей видимости
                link.style.textDecoration = 'underline';
                link.style.textDecorationColor = '#ff9800';
                
                // Можно добавить атрибут title для пояснения
                link.setAttribute('title', 'Внешняя ссылка');
            } else if (href) {
                // Для внутренних ссылок устанавливаем зеленый цвет
                link.style.color = '#4caf50';
                link.style.fontWeight = 'normal';
                link.setAttribute('title', 'Внутренняя ссылка');
            }
        });
        
        // Выводим информацию в консоль для отладки
        console.log('=== Анализ ссылок ===');
        allLinks.forEach(link => {
            const href = link.getAttribute('href');
            if (href) {
                const isExternal = isExternalLink(href);
                console.log(`${href} → ${isExternal ? 'ВНЕШНЯЯ (оранжевый)' : 'ВНУТРЕННЯЯ (зеленый)'}`);
            }
        });
    </script>
</body>
</html>