شاهد الصوره واتبع الاكواد
نبدأ اولا لبرنامج الفرونت بيج : فتح صفحه جديده يجيك كذا
https://alsafrany.blogspot.com/search?q=%D8%A7%D9%84%D9%81%D8%B1%D9%88%D9%86%D8%AA
صوره
<html dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">
<title>صفحة جديدة 1</title>
</head>
<body>
</body>
</html>
التعديل لاكواد الفرونت بيج كثالي :
<!DOCTYPE html>
<html lang="en" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">
<title>صفحات هايف السفراني</title>
<script>
/*HaYeF 101 KuwaiT slider CSS*/
#slider {
list-style:none;
padding:0px;
}
.slider-container {
background:#fff;
width:80%;
height:150px;
padding:17px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
overflow:hidden;
margin:auto;
}
.newcon { width:80%; margin:auto; overflow:hidden}
#slider img {
width:200px;
height:125px;
margin:0px;
display:inline-block;
border: 1px solid #f5f5f5;
}
#slider li {
width:210px
}
/* HaYeF 101 KuwaiT CSS*/
</script>
<script src="js-jquery-latest.js"></script>
<script type="text/javascript" src="js-slider.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#slider').bxSlider({
ticker: true,
tickerSpeed: 5000,
tickerHover: true
});
});
</script>
</head>
<body>
<div class="newcon" style="width: 1321px; height: 1063px">
<!-- HaYeF 101 KuwaiT -->
<div class="slider-container">
<ul id="slider">
<li><a href='place link' title="place hover text" target="_blank"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1RDHBVjwgF5w4U_NarVlECVDjCiLFgYIGvJ08Fmg3Y7o-3NIdMzOIaIKSgy1Rd9XpsISGoH-o9A3XK8G_VOuSyvmfLnvqTN_TBR9gsnbsrRkj4M4wTEhidUUPd1GUrL2pFpPLiDE5lWh2/s61/Glitter-Adobe22.gif"/></a></li>
<li><a href='place link' title="place hover text" target="_blank"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm4QxBO1jhpFIek7vg3eS_kEZSb9wETpibBmyrEEG0ijfF1t906NZIscQESM4gsSY7LdmCiEaGYN65fwOVaSDl95h_weELaKl0TO7dcwvshrE5YDBgXiTQcdrVUQZImdHrqbr3ziDaLhMq/s60/Glitter-Adobe.gif"/></a></li>
<li><a href='place link' title="place hover text" target="_blank"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-LSAj1Y5CNafe4odmbQE0dA0l-KCvCX2SSZDvkM_3yLhT-sGKbZAVKVjXIwJ9fw9XKiYZefhN_cMA9dePKTCGxKIuaEVoafg8sL8Ko4N-3sNVXoVlIRZT_9eLE19iPjbYEcPzfLiZhfj5/s60/Glitter-Adobe8.gif"/></a></li>
<li><a href='place link' title="place hover text" target="_blank"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXuavx3Jlwu8igydzHflDme8TafhLZ6EuY5X6xObRMCDvYW7UDQukWl-0Jsv52m492ucSr8S-QKiphUijheJctrN7fkLFc-Zj3F9qeAzTENs7_BiFJskt3GbJdut2gDCbsAvJ4lp4mRiVW/s60/Glitter-Adobe48.gif"/></a></li>
</ul>
</div><!-- HaYeF 101 KuwaiT--></div>
</body>
</html>
المحتوي يحمل كتالي : htm -html - css - js
<!DOCTYPE html>
<html lang="en" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">
<title>صفحات هايف السفراني</title>
هنا محتوي CSS
هنا محتوي js
</head>
<body>
هنا محتوي htm
</body>
</html>
<!DOCTYPE html> لـ html
<html dir="rtl"> برمجه الفرونت بيج لـ htm
الافضل : htm
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1256">
اللغه العربيه
<html lang="en" >
اللغه الانجليزيه
=============================================
وشاهد الموقع بالكودين :
https://www.w3schools.com/js/js_htmldom_css.asp
ونتابع البقيه