Bu problemi genelde kolon tipin string ise alırsın. Eğer kanal_no kolon tipini int yaparsan order by doğru şekilde çalışacaktır. Eğer değiştirmeden durumu düzeltmek istersen şöyle deneyebilirsin

SELECT * FROM kanallar ORDER BY kanal_no + 0 ASC

Javascript'de History API diye aratarak sorduklarına cevap bulabilirsin. Bu API'deki state yönetimi sayesinde bunu yapabiliyorsun. Zamanında şöyle bir ders anlatmıştım belki işine yarar

https://www.youtube.com/watch?v=d6yBOnZ-S4A

HTML yapın şöyle olacak

<aside>
	SİDEBAR
</aside>
<main>
	<header>
		HEADER
	</header>
	<section class="content">
		İÇERİK ALANI
	</section>
	<footer>
		FOOTER
	</footer>
</main>

Ve temel olarak CSS kodların ise şöyle

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

html, body {
	height: 100%;
}

body {
	display: flex;
}

aside {
	width: 300px;
	min-width: 300px;
	background: #333;
	color: #fff;
}

main {
	flex: 1;
	display: flex;
	flex-direction: column;
}

main header {
	height: 50px;
	border-bottom: 1px solid #ddd;
	background: #f8f8f8;
	min-height: 50px;
}

main .content {
	flex: 1;
	padding: 20px;
	overflow: auto;
}

main footer {
	height: 50px;
	min-height: 50px;
	border-top: 1px solid #ddd;
	background: #f8f8f8;
}

sonuç mu? şuradan bakabilirsin
https://codepen.io/tayfunerbilen/pen/xxRWYOa

Evet yapabilirsin, en basit şekilde şöyle

$('li').each(function(){
	if ($('>ul', this).length){
		$('>a', this).addClass('altvar');
	}
});

iptorrens sitesi

Bir yazım formatı, her dilde çeviricisi mevcut. Amaç bir standart oluşturmak.
https://prototurk.com/makaleler/markdown-nedir-nasil-kullanilir

bunu aslında tab mantığında genel bir kod olarak yazmak daha doğru olur şöyle bir html kodun olsun;

<div data-tab>
    <nav data-tab-list>
        <ul>
            <li>
                <a href="#">Giriş yap</a>
            </li>
            <li>
                <a href="#">Kayıt ol</a>
            </li>
        </ul>
    </nav>
    <div class="tab-contents">
        <div data-tab-content>1. tab</div>
        <div data-tab-content>2. tab</div>
    </div>
</div>

Ve jquery kodların şöyle olacak;

const tabs = $('[data-tab]');
tabs.each(function(el){
    let tab = $('[data-tab-list] li', el),
        contents = $('[data-tab-content]', el);
    tab.filter(':first').addClass('active');
    contents.filter(':not(:first)').hide();
    tab.on('click', function(e) {
        e.preventDefault();
        tab.removeClass('active').filter(this).addClass('active');
        contents.hide().filter(':eq(' + $(this).index() + ')').fadeIn(300);
        // buradı removeClass().addClass() ile class eklemelide yapabilirsin sana kalmış
    });
});