قواعد لغة html لتصميم صفحات الانترنت

الخميس أغسطس 20, 2009 8:02 am

مجموعة من أكواد Html

يسعدني أن أقدم لكم مجموعة من أكود في لغة html للمبتدئين

1-كيف تبدأ
اولا عليك بفتحبرنامج Notepad وتقوم بكتابة الأكواد وخلافه ولما تقوم بالحفظ غير امتداد النص من txt إلي htm

2-الكود الرئيسي للصفحة

<br />هنا يتم وضععنوان الصفحة الذي يظهر في أقصي يسارالصفحة<br /><‎/TITLE><br /><‎/HEAD><br /><BODY><br />هنا يتم وضعالنصوص والاكود وباقي ما سيتم عرضه فى الصفحة انشاء الله <br /><‎/BODY><br /><‎/HTML> <br /><br /><br /><br />1- بالنسبة للكود اللغة العربية<br /><br />ويتم وضع هذا الكود فى أولالصفحة<br /><br /><br /><META **********="Content-Type" CONTENT="text/html; charset=windows-1256"> <br /><br /><br /><br />2- بالنسبة لكودالخط<br /><br /><br /><FONT FACE ="ArialL" SIZE="4 COLOR="#FF33003"><br /><br />هذاالكود سيظهر نوع الخط ولون الخط وحجمه <br /><br /><‎/FONT> <br /><br /><br /><br /><br />FACEهنا يتم تحديد نوعالخط<br />SIZEهنا يتم تحديد حجم الخط<br />COLORهنا يتم تحديد لون الخط<br /><br /><br /><br />بالنسبة لأكوادالألوان فعليك باستخدام هذا البرنامج وسيقوم بعرض اكواد الألوان واختيارها وعليك انتقوم باكتشافهللتحــــــــــميل البرنامج<br />وهناك كود يستخدم للصفحةكلها وهو<br /><br /><br /><BASEFONT Name="Arial" COLOR="#FF0000" SIZE="5">‎ <br /><br /><br /><br />وبدراسة هذا المثال نستنتج أنه يقوم بتعديل الخط الافتراضيللصفحة بحيث يصبح نوعه Arial وحجمه 5 ولونه أحمر. وبالتالي فإن كل النصوص المكتوبةفي تلك الصفحة سيطبق عليها هذا النمط من الخط. ما لم نقم طبعا باستخدام الكود <Font> ... </‎Font> لتعديلها والتحكم بمظهرها كما فعلنا في الأمثلةالسابقة، فهي أكثر تحديداً وأكثر مرونة من الكود<BASEFONT><br /><br />هناك أكوادخاصة تستخدم لتمييز العناوين Headings في صفحات الإنترنت وهي: <br /><br /><br /><Hn> ... <‎/Hn><br /><br />وحرف n هو رقم بين 1-6 يمثل مستوىالعنوان.<br /><br /><br /><H1> Heading 1 <‎/H1><br /><H2> Heading 2 <‎/H2><br /><H3> Heading 3 <‎/H3><br /><H4> Heading 4 <‎/H4><br /><H5> Heading 5 <‎/H5><br /><H6> Heading 6 <‎/H6><br /><br /><br /><br />3- بالنسبة لمحاذاة الفقرات والاسطر<br /><br /><br /><P Align="left"> This is a left-aligned paragraph <‎/P> <br /><br /><br /><br /><P> ... <‎/P>بفتح الفقرة وغلقها <br /><br />ALIGN تحدد محاذاة الفقرة وهي تأخذ القيمLeft, Center, Right<br /><br />أما لنهاية الاسطر فعليك استخدام هذا الكود<BR>في نهاية السطر فقط <br /><br />الكود‎ ‎يقوم بإضافة الفراغات، ويجب تكرار كتابته بنفسعدد الفراغات المطلوب.<br /><br />كذلك لتوسيط الفقرات أو الكائنات بشكل عام في الصفحةنستطيع استخدام الكود <CENTER> ... </CENTER> <br /><br /><br />4- بالنسبة للصور<br /><br />اولا عليكتحديد مسار الصورة ثم واضعها فى هذا الكود بهذا الشكل<br /><br /><br /><IMG SRC="https://2img.net/h/www.geocities.com/my_pro_files/013.gif" HEIGHT="70" WIDTH="120" ALT="بسم الله الرحمن الرحيم" ALIGN="BOTTOM" VSPACE="20" HSPACE="20" BORDER="5">‎ <br /><br /><br /><br />SRC="http://www.geocities.com/my_pro_files/013.gif" هنا يتم وضعمسار الصورة<br /><br />HEIGHT, WIDTH متبوعة بأرقام تمثل الإرتفاع والعرض المطلوبين ( واذا اردت عرض الصورة كما هي عليك بعدم وضع اي رقم او حذفها )<br /><br />الخاصيةالتالية التي تستخدم مع <IMG> هي ALT وفيها نحدد نصاً بديلاً يظهر مكانالصورة. وهذا النص يلاحظ خصوصاً عندما يكون خيار "إظهار الصور تلقائياً" غير فعالفي المتصفح. كما تستطيع ملاحظته في الفترة التي تسبق تحميل الصور وخاصة في المواقعبطيئة التحميل<br /><br />ونستخدم الخاصية ALIGN لتحديد محاذاة الصورة مع النص المرافقلها أو لنقل بعبارة أخرى: تحديد موقع النص الذي يليها بالنسبة لها وهي تأخذ القيم: BOTTOM, TOP, MIDDLE, LEFT, RIGHT <br /><br />VSPACE: لتحديد المسافة العمودية الفاصلةبين النص والحافتين العليا والسفلى للصورة.<br />HSPACE: لتحديد المسافة الأفقيةالفاصلة بين النص والحافتين اليمنى واليسرى للصورة.<br /><br />الخاصية الاخيرة هي BORDER ووظيفتها إضافة إطار حول الصور والتحكم بسُمكِه<br /><br /></div></strong></span></div></div><div class="edited-message"></div></div><div class="fa_like_div"><button class="rep-button " data-href="" data-href-rm=""><i class="ion-thumbsup"></i><span>أعجبني</span><span class="rep-nb" style="display:none;"></span></button><button class="rep-button " data-href="" data-href-rm=""><i class="ion-thumbsdown"></i><span>لم يعجبني</span><span class="rep-nb" style="display:none;"></span></button><p class="fa_like_list" style="display: none;"></p></div></div><a name="bottomtitle"></a><div class="quick-nav-topics bottom"><a href="#top"><img src="https://2img.net/i/fa/modernbb/arrow_up.gif" alt="الرجوع الى أعلى الصفحة" loading="lazy" /></a></div><div class="topic-actions bottom"><div class="topic-actions-buttons"><a href="/login?redirect=%2Fpost%3Ft%3D13%26amp%3Bmode%3Dreply" title="قم بتسجيل الدخول للرد" class="login-for button1"><img src="https://2img.net/i/fa/modernbb/icon_logout.png" alt="قم بتسجيل الدخول للرد"/>قم بتسجيل الدخول للرد</a></div></div><div class="block" id="ptrafic_close" style="display: none;"><div class="h3"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><i class="ion-ios-plus-outline"></i></a>مواضيع مماثلة</div></div><div class="block" id="ptrafic_open" style="display:'';"><div class="h3"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><i class="ion-ios-minus-outline"></i></a>مواضيع مماثلة</div><ul class="ptrafic"><li><a href="/viewtopic?t=118&topic_name" title="قبل البدء بممارسة الرياضة.. قواعد هامة"><i class="ion-ios-chatbubble-outline"></i>قبل البدء بممارسة الرياضة.. قواعد هامة</a></li></ul></div><a name="quickreply"></a><form action="/viewforum" method="get" onsubmit="if(document.jumpbox.f.value == -1){return false;}"><fieldset class="jumpbox"><label>انتقل الى:</label><select name="selected_id" onchange="if(this.options[this.selectedIndex].value != -1){ forms['jumpbox'].submit() }"><option value="-1">اختر منتدى</option><option value="-1"></option><option value="-1">|</option><option correctif="yes" value="c1">|--المجلس العام</option><option correctif="yes" value="f7">| |--قعدةعجايز وهرجه</option><option correctif="yes" value="f1">| |--قعدة التعارف والضيوف الجدد</option><option correctif="yes" value="f3">| |--قعدة الاقتراحات والشكاوي</option><option value="-1">| </option><option correctif="yes" value="c2">|--المجلس الثقافي</option><option correctif="yes" value="f4">| |--قعدة سياسه</option><option correctif="yes" value="f6">| |--قعدة ادب وفلسفه</option><option value="-1">| </option><option correctif="yes" value="c6">|--المجلس الاعلامي</option><option correctif="yes" value="f5">| |--قعدة اخر الاخبار المحليه والعالمية</option><option correctif="yes" value="f9">| |--قعدة اخبار رياضه</option><option correctif="yes" value="f19">| |--قعدة اخبار الفن</option><option value="-1">| </option><option correctif="yes" value="c4">|--المجلس الاسلامي</option><option correctif="yes" value="f15">| |--قعدة روحانية</option><option value="-1">| </option><option correctif="yes" value="c7">|--المجلس الاردني</option><option correctif="yes" value="f12">| |--قعدة اردنيه وطنيه</option><option correctif="yes" value="f10">| |--قعدة عشاير اردينه وعربيه</option><option value="-1">| </option><option correctif="yes" value="c3">|--المجلس الاجتماعي</option><option correctif="yes" value="f13">| |--قعدة نسوان</option><option correctif="yes" value="f17">| |--قعدة هموم الناس</option><option value="-1">| </option><option correctif="yes" value="c5">|--المجلس العلمي</option><option correctif="yes" value="f11">| |--قعدة تكنلوجيا</option><option correctif="yes" value="f18">| |--قعده ثقافه علمية</option><option correctif="yes" value="f14">| |--قعدة الصحة العامة</option><option correctif="yes" value="f16">| |--قعدة صحه نفسية وبناء الذات</option><option value="-1">| </option><option correctif="yes" value="c8">|--المجلس الترفيهي</option><option correctif="yes" value="f8"> |--قعدة ضحك وتصهون</option><option correctif="yes" value="f20"> |--قعدة الفيديو والصور</option></select><input type="hidden" name="tid" value="691d9169966dd6e5e9800998ecf8427e" /><input class="button2" type="submit" value="انتقل الى" /></fieldset></form><div class="block"><div class="h3"><strong>صلاحيات هذا المنتدى:</strong></div><strong>لاتستطيع</strong> الرد على المواضيع في هذا المنتدى<br /></div><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/github-gist.min.css"><script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/languages/go.min.js"></script><script>$(document).ready(function() {$('pre, code').each(function(i, block) {hljs.highlightBlock(block);});$('.post').each(function() {if($(this).find('.postprofile-avatar').html() !== undefined) {if (!$(this).find('.postprofile-avatar').html().length) {$(this).find('.postprofile-rank').css('border-bottom', 'none');$(this).find('.postprofile > dl > dt').css('min-height', $(this).find('.post-head').innerHeight());}}});let post_menus= document.getElementsByClassName('post-menu');Array.prototype.forEach.call(post_menus,function(post_menu) {post_menu.addEventListener('click', function (e) {if (e.target.classList.contains('expanded')){e.target.innerHTML='+';e.target.classList.remove('expanded');}else{let exp_menus = document.querySelectorAll('.post-menu.expanded');Array.prototype.forEach.call(exp_menus,function(exp_menu) {exp_menu.innerHTML='+';exp_menu.classList.remove('expanded');});e.target.innerHTML='-';e.target.classList.add('expanded');}});});document.onclick = function(e){if ($(e.target).parents('.menu-wrap').length==0) {let exp_menus = document.querySelectorAll('.post-menu.expanded');Array.prototype.forEach.call(exp_menus,function(exp_menu) {exp_menu.innerHTML='+';exp_menu.classList.remove('expanded');});}};});</script><div id="ab9b4bca1" style="clear:both;"><div align="center"><div> <div id="taboola-below-desktop-forum-thumbnails" style="max-width:1000px; background-color: #fffd"></div> <script type="text/javascript"> window._taboola = window._taboola || []; _taboola.push({ mode: 'thumbnails-desktop-a', container: 'taboola-below-desktop-forum-thumbnails', placement: 'Below Desktop Forum Thumbnails', target_type: 'mix' }); </script></div></div></div><div style="height:3px"></div></div></div></div></div><div id="emptyidright"></div></div></div></div></div></div></div></div></div><div class="statistics"><div class="wrap"><div class="statistics-item"></div><div class="statistics-item"></div><div class="statistics-item"></div></div></div><div id="page-footer"><div class="wrap"><ul class="footerbar-system"><li class="footer-home"><a class="icon-home" href="/forum" accesskey="h"><i class="ion-ios-home"></i>الرئيسية</a></li><li class="rightside"><span class="gensmall">©</span><a href="https://www.ahlamontada.com/phpbb" target="_blank">phpBB</a> | <strong><a href="http://www.xn--ggblabomu0b9kceef2bt.com" target="_blank">انشئ منتدى</a></strong> | <a name="bottom" href="https://help.ahlamontada.com/" target="_blank">منتدى مجاني للدعم و المساعدة</a> | <a href="/abuse?page=%2Ft13-topic&report=1" rel="nofollow">التبليغ عن محتوى مخالف</a> | <strong><a href="/latest" target="_blank">آخر المواضيع</a></strong></li></ul></div><div class="copyright"><div class="wrap"><div class="copyright-body"></div></div></div></div><script type="text/javascript">//<![CDATA[ $(document).ready(function() {$(window).scroll(function() {var header_top = $('#headerbar-top');if (header_top.hasClass('w-toolbar')) {if ($(window).scrollTop() >= 42) {header_top.addClass('is-sticky');} else {header_top.removeClass('is-sticky');}} else {if ($(window).scrollTop() >= 1) {header_top.addClass('is-sticky');} else {header_top.removeClass('is-sticky');}}});});//]]></script><div id="fb-root"></div><script type="text/javascript">$(document).ready( function() {$('div.fb-login-button, span.fb-login-button').attr({"data-scope": "public_profile email","data-max-rows": "1","data-size": "large","data-show-faces": "false","data-auto-logout-link": "false"});$('div.fb-login-button, span.fb-login-button').each(function() {if(typeof $(this).attr('onlogin') == typeof undefined || $(this).attr('onlogin') === false) {$(this).attr('onlogin', 'onLoginFB');}if($(this).html() == '') {$(this).html('Facebook');}});FB.init({"appId" : "116488611747915","cookie" : 1,"xfbml" : 1,"oauth" : 1,"version" : "v4.0"});(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = "https://connect.facebook.net/ar_AR/sdk.js";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));});function onLoginFB() {window.location.replace('/facebook_connect.php')}</script><script type="text/javascript">$(document).ready( function() {$('div.ti-connect, span.ti-connect').attr({"data-loc": "https://connect.topicit.net/","data-login": "https://shtayat.yoo7.com/topicit/index.php/connect","data-version": "1","data-lang": "ar"});(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = "https://connect.topicit.net/scripts/connect.js";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'topicit-connect'));});</script><script type="text/javascript">//<![CDATA[ fa_endpage();//]]></script><script type="text/javascript"> var vglnk = { key: '74bad24252620514d1244cfba01f2ee2' }; (function(d, t) { var s = d.createElement(t); s.type = 'text/javascript'; s.async = true; s.src = '//cdn.viglink.com/api/vglnk.js'; var r = d.getElementsByTagName(t)[0]; r.parentNode.insertBefore(s, r); }(document, 'script')); </script> <script type="text/javascript">window._taboola = window._taboola || []; _taboola.push({flush: true});</script></body></html>