نقدم لكم أضخم مكتبة اكواد html للمبتدئين، حيث تعد مكتبة اكواد الإتش تي ميل هذه من أهم المراجع الضرورية لكل شخص، سواء كان مبتدئ أو محترف في مجال تعلم لغات البرمجة.
 |
| مكتبة اكواد html للمبتدئين |
إذا كنت تبحث عن اضخم مكتبة أكواد HTML جاهزة لمشروعك مع الشرح، يمكنك من خلال مكتبتنا هذه الحصول على أكواد للمنتديات و المواقع، بالإضافة إلى شرح كل كود وطريقة عمله على حدى.
مكتبة أكواد html جاهزة للمبتدئين مع الشرح
إذا كنت تبحث عن أضخم مكتبة اكواد الإتش تي ميل للمنتديات والمواقع، فأنت في المكان الصحيح.
في القائمة التالية، توجد افضل مجموعة من مكتبة اكواد html خاصة للمبتدئين مع الشرح، ومجموعة أخرى للمحترفين. وهي تعد من الأكواد الأساسية لتصميم صفحات ومواقع الويب.
- الأكواد الخاصة بالألوان
| Color | Color HEX | Color RGB |
| #000000 | rgb (0,0,0) | |
| #FF0000 | rgb (255,0,0) | |
| #00FF00 | rgb (0,255,0) | |
| #0000FF | rgb (0,0,255) | |
| #FFFF00 | rgb (255,255,0) | |
| #00FFFF | rgb (0,255,255) | |
| #FF00FF | grb (255,0,255) | |
| #C0C0C0 | rgb (192,192,192) | |
| #FFFFFF | rgb (255,255,255) |
مكتبة أكواد للمنتديات و المواقع
نقدم لكم هذه المكتبة المهمة لأكواد HTML المختلفة مع شرح كل واحد منها على حدى، وإن شاء الله سنحاول تحديثها كل ما أمكن، وننصح الجميع بوضع أي كود يقع في أيديهم ضمن التعليقات، وسنقوم بإضافته للمكتبة.
- اكواد النصوص العادية
- لعرض نص غامق يستخدم الوسم <b>.
- لعرض نص هام يستخدم الوسم <strong>.
- لعرض نص بارز يستخدم الوسم <em>.
- لعرض نص محدد يستخدم الوسم <mark>.
- لعرض النص بحجم صغير يستخدم الوسم <small>.
- لعرض نص محذوف يستخدم الوسم <del>.
- لعرض نص مدرج يستخدم الوسم <ins>.
- لعرض النص أسفل الخط يستخدم الوسم <sub>.
- لعرض النص فوق الخط يستخدم الوسم<sup>.
- أكواد نصوص احترافية
<p dir="rtl" align="right">اكتب هنا النص الذي سيظهر من اليمين إلى اليسار</p>
كود نص متحرك من الأسفل لأعلى
<marquee direction=”Up” scrollAmount=”2″> <BR><BR><FONT size=”6″><FONT COLOR=”red”>النص</FONT c></FONT s><BR><BR></marquee><BR><P><BR
كود نص متحرك من الأعلى لأسفل
<marquee direction=”Down” scrollAmount=”2″> <BR><BR><FONT size=”6″><FONT COLOR=”green”>النص</FONT c></FONT s><BR><BR></marquee><BR><P><BR>
كود نص ملون بلونين
<FONT size=”15″><TABLE STYLE=filter:GLOW(color=”brown”,strength=#+9)><FON T COLOR=”yellow”>النص<BR> <P> <BR></TABLE></FONT></FONT s>
كود تغيير خلفية الموقع
<DIV id=cdiv style=”BACKGROUND-COLOR: اللون”><BR>
كود عمل إطار للنص
<table border=”10″ width=”380″ id=”myexample” style=”border:5px solid green”><br><tr><br><td> النص للسطر الاول<br>النص للسطر الثانى<br><br></td><br></tr><br></table><br><script language=”JavaScript1.2″><br><!–<br>myexample.style.borderColor=”green”<br>}<br>setInterval(“flashit()”, 500)<br>//–><br></script><br><br>
كود لتشغيل أفلام الفلاش
<embed width=”550″ height=”500″ src=”رابط الموقع” type=”application/x-shockwave-flash”>
كود لعمل نص ملون مع ظلال
<div style=” width:100%;filter:shadow(color=green,strength=20);color:White;font:60pt”>النص</div>
كود رسالة وداع تظهر عند خروجك من الصفحة
<body onUnload=”window.alert(‘إلى اللقاء’)”>
كود إضافة ملف صوتي
<audio controls="controls"><source src="رابط المقطع الصوتي" type="audio/ogg"></audio>
كود لإدراج صفحة اتش تي ام ال في صفحة أخرى
<iframe name src="Adresse de la page cible.htlm"style="width:600px; height:150px;border-width:0px;border-color:#990033;border-style:solid;"scrolling="auto"></iframe>
كود إضافة صورة إلى صفحة الويب
<img src="رابط الصورة">
كود لعبة جاهز html
<table style="margin:0px; padding:0px; border:1px solid #000000;" align="center" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td style="padding-left:10px; height:15px; line-height:15px; background-color:#000000;"><a href="http://www.labpixies.com" style="font-family: Arial,Verdana; font-size:12px; font-weight:bold; text-align:left; text-decoration:none; color:#ffffff;">Gadget by LabPixies.com</a></td></tr><tr><td style="padding:10px;"><iframe allowtransparency="true" src="http://www.labpixies.com/campaigns/sudoku/sudoku.html" align="middle" frameborder="0" height="250" scrolling="no" width="200"> </iframe></td></tr></tbody></table>
كود html لموقع كامل
<!DOCTYPE HTML> <!-- Hyperspace by HTML5 UP html5up.net | @ajlkn Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) --> <html> <head> <title>Hyperspace by HTML5 UP</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <link rel="stylesheet" href="assets/css/main.css" /> <noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript> </head> <body class="is-preload"> <!-- Sidebar --> <section id="sidebar"> <div class="inner"> <nav> <ul> <li><a href="#intro">Welcome</a></li> <li><a href="#one">Who we are</a></li> <li><a href="#two">What we do</a></li> <li><a href="#three">Get in touch</a></li> </ul> </nav> </div> </section> <!-- Wrapper --> <div id="wrapper"> <!-- Intro --> <section id="intro" class="wrapper style1 fullscreen fade-up"> <div class="inner"> <h1>Hyperspace</h1> <p>Just another fine responsive site template designed by <a href="http://html5up.net">HTML5 UP</a><br /> and released for free under the <a href="http://html5up.net/license">Creative Commons</a>.</p> <ul class="actions"> <li><a href="#one" class="button scrolly">Learn more</a></li> </ul> </div> </section> <!-- One --> <section id="one" class="wrapper style2 spotlights"> <section> <a href="#" class="image"><img src="images/pic01.jpg" alt="" data-position="center center" /></a> <div class="content"> <div class="inner"> <h2>Sed ipsum dolor</h2> <p>Phasellus convallis elit id ullamcorper pulvinar. Duis aliquam turpis mauris, eu ultricies erat malesuada quis. Aliquam dapibus.</p> <ul class="actions"> <li><a href="generic.html" class="button">Learn more</a></li> </ul> </div> </div> </section> <section> <a href="#" class="image"><img src="images/pic02.jpg" alt="" data-position="top center" /></a> <div class="content"> <div class="inner"> <h2>Feugiat consequat</h2> <p>Phasellus convallis elit id ullamcorper pulvinar. Duis aliquam turpis mauris, eu ultricies erat malesuada quis. Aliquam dapibus.</p> <ul class="actions"> <li><a href="generic.html" class="button">Learn more</a></li> </ul> </div> </div> </section> <section> <a href="#" class="image"><img src="images/pic03.jpg" alt="" data-position="25% 25%" /></a> <div class="content"> <div class="inner"> <h2>Ultricies aliquam</h2> <p>Phasellus convallis elit id ullamcorper pulvinar. Duis aliquam turpis mauris, eu ultricies erat malesuada quis. Aliquam dapibus.</p> <ul class="actions"> <li><a href="generic.html" class="button">Learn more</a></li> </ul> </div> </div> </section> </section> <!-- Two --> <section id="two" class="wrapper style3 fade-up"> <div class="inner"> <h2>What we do</h2> <p>Phasellus convallis elit id ullamcorper pulvinar. Duis aliquam turpis mauris, eu ultricies erat malesuada quis. Aliquam dapibus, lacus eget hendrerit bibendum, urna est aliquam sem, sit amet imperdiet est velit quis lorem.</p> <div class="features"> <section> <span class="icon solid major fa-code"></span> <h3>Lorem ipsum amet</h3> <p>Phasellus convallis elit id ullam corper amet et pulvinar. Duis aliquam turpis mauris, sed ultricies erat dapibus.</p> </section> <section> <span class="icon solid major fa-lock"></span> <h3>Aliquam sed nullam</h3> <p>Phasellus convallis elit id ullam corper amet et pulvinar. Duis aliquam turpis mauris, sed ultricies erat dapibus.</p> </section> <section> <span class="icon solid major fa-cog"></span> <h3>Sed erat ullam corper</h3> <p>Phasellus convallis elit id ullam corper amet et pulvinar. Duis aliquam turpis mauris, sed ultricies erat dapibus.</p> </section> <section> <span class="icon solid major fa-desktop"></span> <h3>Veroeros quis lorem</h3> <p>Phasellus convallis elit id ullam corper amet et pulvinar. Duis aliquam turpis mauris, sed ultricies erat dapibus.</p> </section> <section> <span class="icon solid major fa-link"></span> <h3>Urna quis bibendum</h3> <p>Phasellus convallis elit id ullam corper amet et pulvinar. Duis aliquam turpis mauris, sed ultricies erat dapibus.</p> </section> <section> <span class="icon major fa-gem"></span> <h3>Aliquam urna dapibus</h3> <p>Phasellus convallis elit id ullam corper amet et pulvinar. Duis aliquam turpis mauris, sed ultricies erat dapibus.</p> </section> </div> <ul class="actions"> <li><a href="generic.html" class="button">Learn more</a></li> </ul> </div> </section> <!-- Three --> <section id="three" class="wrapper style1 fade-up"> <div class="inner"> <h2>Get in touch</h2> <p>Phasellus convallis elit id ullamcorper pulvinar. Duis aliquam turpis mauris, eu ultricies erat malesuada quis. Aliquam dapibus, lacus eget hendrerit bibendum, urna est aliquam sem, sit amet imperdiet est velit quis lorem.</p> <div class="split style1"> <section> <form method="post" action="#"> <div class="fields"> <div class="field half"> <label for="name">Name</label> <input type="text" name="name" id="name" /> </div> <div class="field half"> <label for="email">Email</label> <input type="text" name="email" id="email" /> </div> <div class="field"> <label for="message">Message</label> <textarea name="message" id="message" rows="5"></textarea> </div> </div> <ul class="actions"> <li><a href="" class="button submit">Send Message</a></li> </ul> </form> </section> <section> <ul class="contact"> <li> <h3>Address</h3> <span>12345 Somewhere Road #654<br /> Nashville, TN 00000-0000<br /> USA</span> </li> <li> <h3>Email</h3> <a href="#">user@untitled.tld</a> </li> <li> <h3>Phone</h3> <span>(000) 000-0000</span> </li> <li> <h3>Social</h3> <ul class="icons"> <li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li> <li><a href="#" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li> <li><a href="#" class="icon brands fa-github"><span class="label">GitHub</span></a></li> <li><a href="#" class="icon brands fa-instagram"><span class="label">Instagram</span></a></li> <li><a href="#" class="icon brands fa-linkedin-in"><span class="label">LinkedIn</span></a></li> </ul> </li> </ul> </section> </div> </div> </section> </div> <!-- Footer --> <footer id="footer" class="wrapper style1-alt"> <div class="inner"> <ul class="menu"> <li>© Untitled. All rights reserved.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li> </ul> </div> </footer> <!-- Scripts --> <script src="assets/js/jquery.min.js"></script> <script src="assets/js/jquery.scrollex.min.js"></script> <script src="assets/js/jquery.scrolly.min.js"></script> <script src="assets/js/browser.min.js"></script> <script src="assets/js/breakpoints.min.js"></script> <script src="assets/js/util.js"></script> <script src="assets/js/main.js"></script> </body> </html>
أضخم مكتبة اكواد html للمبتدئين
للحصول على المزيد من الأكواد البرمجية، يرجى زيارة موقع w3schools.com، فهو يعد أضخم مكتبة اكواد html، ومرجع أساسي للعديد من المبرمجين المبتدئين والمحترفين.
اكواد html اسلامية
كود المصحف الإلكتروني للمواقع و المدونات
<!-- Start Khadejah.net Electronic Code -->
<p align="center">
<a href ="#" onclick="window.open('http://www.khadejah.net/Quran/quran.php?site=منتديات الاسلام','fullen','width=400,height=500');" title="المصحف الإلكتروني"><img border='0' src='http://www.khadejah.net/Quran/quran.gif' width='150' height='150'></a>
</p>
<!-- End Khadejah.net Electronic Code -->كود مواعيد الصلاة
src="http://www.islamicfinder.org/prayer_service.php?country=egypt&city=cairo&state=&zipcode=&latitude=30.0500&longitude=31.2500&timezone=2&HanfiShafi=1&pmethod=2&fajrTwilight1=10&fajrTwilight2=10&ishaTwilight=10&ishaInterval=30&dhuhrInterval=1&maghribInterval=1&dayLight=0&page_background=&table_background=&table_lines=&text_color=&link_color=&prayerFajr=&prayerSunrise=&prayerDhuhr=&prayerAsr=&prayerMaghrib=&prayerIsha=〈=arabic"
يمكن للمستخدمين عمل معاينة أو مشاهدة حية لكيفية عمل الأكواد في صفحة الويب، بالإضافة إلى إمكانية نسخها، أو التعديل عليها.
وصلنا إلى النهاية، وكان هذا كل ما في جعبتنا حول مكتبة اكواد html للمبتدئين مع الشرح. نتمنى ان تكونوا قد استفدتم من محتوى الموضوع، ودمتم بأمان الله.
تعليق