: تعلم برمجة المواقع :

بدأ الحديث منذ فترة عن ال HTML5 والـ CSS 3 لوصلوهم في نفس الوقت في الغالب وارتباطهم ببعض القوى. حتى الآن اغلب المتصفحات الحديثة تدعم هذه التطورات فايرفوكس واوبرا وكروم وسفارى. ولكن حتى الآن لم يتم دعم الـ HTML5 ولكن المستخدم والرسمي من W3C هو الـ HTML4. تحتوى الـ HTML5 على العديد من الوسوم الجديدة سوف نستعرض أهمها

1- <!DOCTYPE>

نوع الوثيقة ليست من ضمن الوسوم ولكن هي بداية لأي صفحة بهذه اللغة لتخبر المتصفح نوع الوثيقة

أصبحت في الـ HTML5

هكذا <!DOCTYPE html> مع ملاحظة أنها يجب كتابتها قبل بداية وثيقة الـ HTML.

<!DOCTYPE HTML>
<html>
<head>
<title>Page Title</title>
</head>

<body>
Page Content
</body>

</html>

أصبح في الـ HTML 5

2- <header>

هو أحد الوسومات الجديدة والجديدة فيه سهولة استخدامه أكثر من مرة فهو هيدر للصفحة وهيدر للعمود وهيدر للمقالة.

3- <nav>
معروفة بمنطقة القوائم أو التنقلات.

4- <section>

يستخدم لتعريف أقسام الصفحة على حسب الأنماط الخاصة بها فيمكن وضع سكشن للأخبار وسكشن الاتصال وهكذا.

5- <article>

يحتوى على أشكال مختلفة للنصوص في الصفحة فهو خاص للمقالات أو التدوينات الخاصة بالمدونات وخلافه.

6- <aside>
هو الخاص بالجانب سواء الأيمن أو الأيسر.

7- <footer>

ليس خاص بنهاية الصفحة ولكن كما استخدمنا الهيدر في أكثر من مكان نستطيع استخدام الذيل في أكثر من مكان هو ذيل للصفحة أو العمود أو المقالة وهكذا.

8- <Audio> <Video>

أصبح بالإمكان الآن وضع ملف صوت أو فيديو مباشرة في الصفحة فقط بهذا الوسم دون استخدام أي إضافات أخرى.

9- <canvas>

هذا الوسم من الأوسمة الجديدة، أصبح الآن بإمكانك إدخال لوحة رسومات في الصفحة بالحجم الذي تريده بكل سهولة لإنجاز أعمالك.

أولا المقصود بكلمة SEO هو Search Engine Optimization وهو عملية كبيرة يوجد لها العديد من الجوانب منها مطابقة الكود للمواصفات القياسية للويب,استعمال الـ meta keyword و description , وضع خريطة للموقع و أشياء آخرى, وتهدف هذه العملية الي رفع ترتيب الموقع في محركات البحث الشهيرة.

هي عملية تحسين نوعية أو حجم موقع على شبكة الإنترنت عن طريق تطبيق متطلبات محركات البحث المجانية ودون الحاجة إلي دفع مبالغ أو القيام بتسجيل إشتراك لدي محركات وذلك بغرض الظهور ضمن نتائح البحث علي هذه المحركات والحصول علي المزيد من الزوار.

محرك البحث كجوجل يعمل على النص أو الكلمة التى تدخلها ويجدها فى صفحات ولكن هناك الاف الصفحات بها نفس المعلومة فكيف ترتب ؟
هذاهو السيو وهو متغير بدرجة كبيرة لأنة مرتبط بمحركات البحث وبرامج البوت التى تستخدمها وهى فى تطور مستمر
وعموماً أثبتت الكثير من المواقع انة ليس بهذة الأهمية كتويتر وفيس بوك لا تسمح للبوت الخاص بمحركات البحث بالدخول لها اصلاً ومع ذالك فهى فى مراكذ متقدمة جداً عالمياً لأعتمادها على اخبار الناس بعضها وأرتباطهم بها وليس الدخول أليها عرضاً من البحث

من بين أجزاء هذه العملية استعمال SEF Urls وهو يعني Search Engine Friendly Urls حيث أن بعض محركات البحث لا تعرف التعامل مع الروابط التي تحتوي على ? و & مثل
h t t p :// w w w .yoursite.com/index.php?option=com_content&id=4&itemId=10

هنا يأتي دور برامج الـ SEF Urls و هناك أنواع كثيرة,أحدها مدمج في جملة و يقوم بتحويل الروابط الى الصورة كالآتية:
/h t t p :// w w w .yoursite.com/option,com_content/id,4/itemId,10

قد يبدو هذا كافيا و لكن هناك أنواع من برامج الـ SEF مثل الـ (OpenSEF,404_SEF) تقوم بما هو أكثر من ذلك فتصل بالرابط الى الصورة

h t t p :// w w w .yoursite.com/welcome.html
أو
h t t p :// w w w .yoursite.com/news.html

بالتأكيد الصورة الأخيرة هي الأفضل و يمكن أن تحسن ترتيب الموقع في محركات البحث.

بالنسبة للـ Dynamic page Title فهو يقوم بتغيير عنوان الصفحة ليعكس محتويات الصفحة , من المعروف ان هذا من أهم الأشياء التي تحدد ترتيب الصفحة

في محركات البحث.

فى هذا الموضوع سوف نتعرف على كيفية اضافة خاصية الكابتشا والتحقق فى برمجايتك للحماية وسوف نستخدام

سكربت مجاني و مفتوح المصدر

حمله من الموقع الرسمي

http://www.phpcaptcha.org/download/

بعد رفعه إلى موقعك أو سرفك المحلي

ستجد ملف example_form.php

كالاتى:

<? php

if (empty($_POST)) { ?>

< form method = "POST" >

Username:< br />

< input type = "text" name = "username" />< br />

Password:< br />

< input type = "text" name = "password" />< br />





< img src="/securimage_show.php?sid=<?php echo md5(uniqid(time())); ?>">< br />

< input type = "text" name = "code" />< br />



< input type = "submit" value = "Submit Form" />

</ form >



<?php

قم بتغيير الفورمز لاى شىء تريده على حسب برمجيتك انت

ثم فى الكود

echo "< center >Thanks, you entered the correct code.</ center>";

يمكنك عمل توجيه للفورم بعد التحقق للصفحة التى تريدها باستخدام دالة header

header('Location: http://www.example.com/');

مثال:

1-القائمة ستكون كما يلي

كود:
<ul class="tt-wrapper"> <li><a class="tt-google plus" href="#"><span>قوقل بلس</span></a></li> <li><a class="tt-twitter" href="#"><span>تويتر</span></a></li> <li><a class="tt-youcef-bijed" href="#"><span>مدونة بجاد</span></a></li> <li><a class="tt-facebook" href="#"><span>فيس بوك</span></a></li> <li><a class="tt- rss" href="#"><span>خلاصات rss</span></a></li> <li><a class="tt-youtube" href="#"><span>يوتيوب</span></a></li> </ul>

2-قائمة العناصر العائمة ستكون الى جهة اليسار وسيكون النمط كالتالي

كود:
.tt-wrapper li a{ display: block; width: 68px; height: 70px; margin: 0 2px; outline: none; background: transparent url(http://1.bp.blogspot.com/-TL6CzyoaG2...nman_icons.png) no-repeat top left; position: relative; }
3-كما يسكون لكل مرساة موقف مختلف عن خلفية صورة الخلفية

كود:
.tt-wrapper li .tt-google plus{ background-position: 0px 0px; } .tt-wrapper li .tt-twitter{ background-position: -68px 0px; } .tt-wrapper li .tt-youcef-bijed{ background-position: -136px 0px; } .tt-wrapper li .tt-facebook{ background-position: -204px 0px; } .tt-wrapper li .tt-rss{ background-position: -272px 0px; } .tt-wrapper li .tt-youtube{ background-position: -340px 0px; }; }

4-الان نعمل على تاثير الظهور من أعلى

كود:
.tt-wrapper li a span{ width: 100px; height: auto; line-height: 20px; padding: 10px; left: 50%; margin-left: -64px; font-family: 'Alegreya SC', Georgia, serif; font-weight: 400; font-style: italic; font-size: 14px; color: #719DAB; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); text-align: center; border: 4px solid #fff; background: rgba(255,255,255,0.3); text-indent: 0px; border-radius: 5px; position: absolute; pointer-events: none; bottom: 100px; opacity: 0; box-shadow: 1px 1px 2px rgba(0,0,0,0.1); transition: all 0.3s ease-in-out; }
5-الان نستخدم اسلوب العناصر الزائفة ونعمل ايضا على شفافية الحدود

اقتباس:
.tt-wrapper li a span:before,
.tt-wrapper li a span:after{
content: '';
position: absolute;
bottom: -15px;
left: 50%;
margin-left: -9px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid rgba(0,0,0,0.1);
}

-6الان نقوم بابعاد العنصر المستعار عن طريق البكسل وسنجعله ابيض مثل حدود التلميحات تماما
كود:
.tt-wrapper li a span:after{ bottom: -14px; margin-left: -10px; border-top: 10px solid #fff; }
7-ناتي الى تاثير الهوفر وسنجعل الSPAN يمتد من اعلى ويتلاشى في :
كود:
.tt-wrapper li a:hover span{ opacity: 0.9; bottom: 70px; }
وبهذا نحصل على هذه الاضافة الرائعة انا في هذا النموذج جعلت الاضافة شريط للمفضلات الاجتماعية وليس بالضرورة تعمل مثلي تستطيع ان تغير الايقونات لتجعلها شريط ادوات او قائمة تبويب لاعلى الصفحة

1- صمم الشعار الذي تريده مقاسه 16×16 بكسل.

2 - تسميه الصوره الي هذا الاسم بجانب الصيغهfavicon.ico

3- ارفع الصوره للمجلد الرائيسي نفتح برنامج ftp للمنتديVB أو موقعك

واخيرا ضع هذا الكود اعلي الهيدر

لوحه التحكم>بحث علي القوالب > header> أول قالب ضع هذا الكود

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

ترتيب الصفحة أو ما يعرف بـ "PageRank"يفضل ان يطلق عليه تصنيف بيج لان تلك التسمية راجعة إلى لارى بيج أحد مؤسسى جوجل والذي صمم تلك الخوارزمية التي تعطى ترتيبات ظهور الصفحات في بحث جوجل وشاركة أيضا سيرجى برين المؤسس الاخر للشركة هي نوع من خوارزميات تحليل الروابط التي تقيم وتنسب أوزان مرقمة إلى كل عنصر في مجموعة وصلات الويب الموجودة في الوثيقة أو الملف - كماهو موجود في صفحات الويب - وهي وسيلة لتقيم وقياس أهمية هذه الروابط لبعضها البعض. صمم هذا الخوارزم عن طريق مؤسسي شركة جوجل حينما كانوا طلبة في جامعة ستانفورد. الكلمة ذاتها "PageRank" هي علامة مسجلة لشركة جوجل

* كل قيمة أعلى في الـ PageRank يكون الوصول لها أصعب من سابقتها فالوصول إلى PR6 أصعب بأربع مرات من الوصول إلى PR5.
* إضافتك لصفحات جديدة لموقعك قد يقلل من قيمة صفحات أخرى ولكن هذا التقليل لإعطاء قيمة للصفحة الجديدة.
* الروابط الداخلية الفعالة في موقعك مهمة.
* يجب أن تكون صفحات موقعك مترابطة لتسهل على عنكبوت الأرشفة أرشفة جميع الصفحات.
* من الممكن أن يطرد موقعك من قوقل إذا قمت ببعض العمليات غير المسموح بها مثل النصوص المخفية أو إيهام محرك البحث بعرض محتويات مخصصة له فقط (cloaking) أو أي عملية تخالف أنظمة قوقل.
* جوجل لايحب الصفحات الممتلئة بالروابط الخارجية خصوصا تلك التي يوجد بها أكثر من 100 رابط.
* إذا كان هناك أكثر من رابط في نفس الصفحة يؤدون إلى صفحة واحدة فستعتبر هذه الروابط كلها كرابط واحد.
* الروابط ذات النصوص الجيدة والمرتبطة بمحتوى موقعك ستضمن لك الظهور في نتائج البحث المناسبة.
* ربما تخسر بعض من قيمة الـ PageRank لموقعك إذا فقدت بعض الروابط المهمة التي تؤدي إلى موقعك أو إذا نقصت قيمة الـ PageRank للصفحات المحتوية على هذه الروابط.
* الـ PageRank واحد من عوامل عديدة تستخدمها جوجل للتعرف على ترابط وأهمية الصفحات.
* الـ meta-tag لاتأثر على قيمة الـ PageRank لكن قد يستخدمها قوقل لتوصيف موقعك في نتائج البحث وستكون نافعة إذا كانت صفحات موقعك مليئة بالجرافيكس.
* الـ PageRank لايتم حسابه للموقع كاملاً بل يتم لكل صفحة على حدى.
* إذا كانت هناك صفحة سيئة ذات PageRank منخفض بها روابط تشير إلى صفحة أخرى فان هذه الصفحة لا تتأثر بها، لن يعاقبك جوجل لأن هناك صفحات سيئة تربط بك.
* إذا قمت بإضافة “nofollow” إلى عنصر rel في الرابط فلن يدخل هذا الرابط في حساب الـ PageRank.
* إذا كان هناك رابط من صفحة إلى نفسها فانه لايؤثر في قيمة الـ.PageRank
* الـ PageRank يعتمد على الروابط القادمة للصفحة ولكن ليس عليها فقط بل يعتمد على جودتها وترابطها.
* إذا كان لديك صفحة ولنقل أن قيمة الـ PageRank لها 7 ولم يكن في هذه الصفحة سوى رابط واحد فسيستفيد هذا الرابط بشكل كبير أما ان كان في هذه الصفحة 10 روابط فسيتم توزيع قيمة الـ PageRank بينهم.
* من الممكن أن يحذف موقعك من قوقل إذا كان يضع روابطا لمواقع المحذوفة لذلك تأكد دائما من المواقع التي تريد إضافتها لموقعك لصداقة محركات البحث وبالأخص قوقل صاحب الشعبية الأكبر بين مستخدمي الانترنت حول العالم.
* محرك البحث جوجل يعتبر الرابط من صفحة أ إلى الصفحة ب على أنه تصويت لصالح ب.
* إضافة موقعك في دليل DMOZ لايعطيك أي أفضلية في حساب الـ PageRank ماتحصل عليه من دليل DMOZ هو نفس مايمكن أن تحصل عليه من أي صفحة أخرى لها نفس القيمة لكن ميزة DMOZ هو أن بياناته تستخدم في الكثير من المواقع الأخرى.
* محتويات الصفحة لايتم أخذها بالاعتبار عند حساب الـPageRank
* .gov وغيرها من نطاق(انترنت)النطاقات الحكومية ليس لها أي ميزة خاصة في حساب الـ PageRank ويرجع ارتفاع قيمتها غالبا لأن الروابط المؤدية إليها كثيرة والروابط الخارجة منها لمواقع أخرى قليلة.
* تحاول غوغل ان تبنى مبدا الموضوعية في تحديد ال PageRank وذلك بان ال PageRank لموقع ما يجب أن يعكس شعبية ذلك الموقع. وحيث ان زياد الطلب علي موقع ما وزيادة عدد مشاهديه والذين وصلوا اليه عن طريق غوغل دلالة علي شعبية ذلك الموقع فان هذا أيضا يؤدي إلى زياده ال PageRank لهذا الموقع.
* هناك تقنية مدروسة لتحسين ال PageRank لموقع ما تسمى هذه التقنية Search Engine Optimization S.E.O تحاول هذه التقنية الاستفادة من قواعد غوغل في تحديد ال PageRank لتقوم بتحسين الموقع في نتائج البحث من خلال تنغيم عوامل معينة في الموقع مثل المحتوى والتركيب وكلمات البحث المناسبة للموضوع.

ولنبدأ الشرح باسم الله الرحمن الرحيم

اولا: تركيبة html الاساسية

index.html

كود بلغة HTML:

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>التطبيق الاول   </title>
        <link href="css/layout.css" rel="stylesheet" type="text/css" />
        <link href="css/slideshow.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <header>
            <h2>AHMED SWAILM</h2>
            <a href="http://www.mtwer.com/vb" class="stuts"><span>mtwer.com</span></a>
        </header>
        <div class="container" id="container">

            <!-- caps, non-existent items -->
            <span id="slide1" class="cap"></span>
            <span id="slide2" class="cap"></span>
            <span id="slide3" class="cap"></span>
            <span id="slide4" class="cap"></span>
            <span id="slide5" class="cap"></span>

            <ul class="slider">
                <!-- left arrow -->
                <li class="lArrow">
                    <a href="#slide5" class="a5"></a>
                    <a href="#slide4" class="a4"></a>
                    <a href="#slide3" class="a3"></a>
                    <a href="#slide2" class="a2"></a>
                    <a href="#slide1" class="a1"></a>
                </li>
                <!-- slides -->
                <li class="slides">
                    <img src="images/0.jpg" alt="" class="g0" />
                    <img src="images/1.jpg" alt="" class="g1" />
                    <img src="images/2.jpg" alt="" class="g2" />
                    <img src="images/3.jpg" alt="" class="g3" />
                    <img src="images/4.jpg" alt="" class="g4" />
                    <img src="images/5.jpg" alt="" class="g5" />
                </li>
                <!-- right arrow -->
                <li class="rArrow">
                    <a href="#slide5" class="a5"></a>
                    <a href="#slide4" class="a4"></a>
                    <a href="#slide3" class="a3"></a>
                    <a href="#slide2" class="a2"></a>
                    <a href="#slide1" class="a1"></a>
                </li>
                <!-- tracker -->
                <li class="track">
                    <a href="#slide1" class="tr1"></a>
                    <a href="#slide2" class="tr2"></a>
                    <a href="#slide3" class="tr3"></a>
                    <a href="#slide4" class="tr4"></a>
                    <a href="#slide5" class="tr5"></a>
                </li>
            </ul>

        </div>
    </body>
</html>

------
فى هذا الجزء استدعينا ملفات css3 للتنسيق والعرض التى سنعمل عليها

كود بلغة HTML:

 <link href="css/layout.css" rel="stylesheet" type="text/css" />
        <link href="css/slideshow.css" rel="stylesheet" type="text/css" />

اسهم التمرير لليمين ولليسار
ملاحظة عند اضافة صور جديد يجب اضافتها لاسهم التمرير ايضا

كود بلغة HTML:

<!-- left arrow -->
                <li class="lArrow">
                    <a href="#slide5" class="a5"></a>
                    <a href="#slide4" class="a4"></a>
                    <a href="#slide3" class="a3"></a>
                    <a href="#slide2" class="a2"></a>
                    <a href="#slide1" class="a1"></a>
                </li>
<!-- right arrow -->
                <li class="rArrow">
                    <a href="#slide5" class="a5"></a>
                    <a href="#slide4" class="a4"></a>
                    <a href="#slide3" class="a3"></a>
                    <a href="#slide2" class="a2"></a>
                    <a href="#slide1" class="a1"></a>
                </li>

وهذا جزء خاص بالصور التى سيتم عرضها وهى موجودة بمجلد images

كود بلغة HTML:

<li class="slides">
                    <img src="images/0.jpg" alt="" class="g0" />
                    <img src="images/1.jpg" alt="" class="g1" />
                    <img src="images/2.jpg" alt="" class="g2" />
                    <img src="images/3.jpg" alt="" class="g3" />
                    <img src="images/4.jpg" alt="" class="g4" />
                    <img src="images/5.jpg" alt="" class="g5" />
                </li>

وان شاء الله يكون هذا الكود سهل جدا للجميع

ثانيا : ملف css3

css/slideshow.css

كود:

span.cap {
    display:none;
}
ul.slider {
    margin:0 auto;
    height:455px;
    list-style:none;
    position:relative;
    width:706px;
}
ul.slider li {
    float:left;

    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;
}
ul.slider li.slides {
    border:1px solid #888;
    height:453px;
    overflow:hidden;
    position:relative;
    width:604px;
    z-index:10;

    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;
}
ul.slider li.slides img {
    display:block;
    left:50%;
    opacity:0; 
    position:absolute;
    top:0;

    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    transform: scale(0.5);

    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;
}
ul.slider li.slides img.g1,
ul.slider li.slides img.g2,
ul.slider li.slides img.g3,
ul.slider li.slides img.g4,
ul.slider li.slides img.g5 {
    margin-left:-302px
}
ul.slider li.lArrow,
ul.slider li.rArrow {
    background-color:#bbb;
    border:2px solid #888;
    height:451px;
    position:relative;
    width:48px;
    z-index:5;
}
ul.slider li.lArrow {
    border-radius:100px 0 0 100px;
    border-width:2px 0 2px 2px;
}
ul.slider li.rArrow {
    border-radius:0 100px 100px 0;
    border-width:2px 2px 2px 0;
}
ul.slider li.lArrow a,
ul.slider li.rArrow a {
    display:block;
    height:100%;
    left:0;
    position:absolute;
    top:0;
    width:50px;
}
ul.slider li.lArrow:hover {
    background-color:#eee;
    left:2px;
}
ul.slider li.rArrow:hover {
    background-color:#eee;
    left:-2px;
}
ul.slider li.track {
    background-color:rgba(255,255,255,0.3);
    clear:left;
    height:25px;
    margin-left:51px;
    margin-top:-25px;
    position:relative;
    text-align:center;
    width:604px;
    z-index:20;
}
ul.slider li.track a {
    background-color:#fff;
    display:inline-block;
    height:15px;
    margin:5px;
    width:10px;

    border-radius:5px;
    -moz-box-shadow:2px 1px 1px #000000;
    -ms-box-shadow:2px 1px 1px #000000;
    -webkit-box-shadow:2px 1px 1px #000000);
    -o-box-shadow:2px 1px 1px #000000;
    box-shadow:2px 1px 1px #000000;
}
ul.slider li.track a:hover {
    background-color:#0f0;
}
span#slide1:target ~ ul.slider li.slides .g1,
span#slide2:target ~ ul.slider li.slides .g2,
span#slide3:target ~ ul.slider li.slides .g3,
span#slide4:target ~ ul.slider li.slides .g4,
span#slide5:target ~ ul.slider li.slides .g5 {
    opacity:1;

    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
}
ul.slider li.slides .g0 {
    margin-left:-302px;
    opacity:1;

    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
}
span#slide1:target ~ ul.slider li.slides .g0,
span#slide2:target ~ ul.slider li.slides .g0,
span#slide3:target ~ ul.slider li.slides .g0,
span#slide4:target ~ ul.slider li.slides .g0,
span#slide5:target ~ ul.slider li.slides .g0 {
    opacity:0;

    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);
}
span#slide1:target ~ ul.slider li.track .tr1, 
span#slide2:target ~ ul.slider li.track .tr2, 
span#slide3:target ~ ul.slider li.track .tr3, 
span#slide4:target ~ ul.slider li.track .tr4, 
span#slide5:target ~ ul.slider li.track .tr5 {
    background-color:#f00;
}

span#slide1:target ~ ul.slider li.lArrow a,
span#slide1:target ~ ul.slider li.rArrow a {z-index:10}
span#slide1:target ~ ul.slider li.rArrow .a2 {z-index:100}
span#slide1:target ~ ul.slider li.lArrow .a8 {z-index:100}

span#slide2:target ~ ul.slider li.lArrow a,
span#slide2:target ~ ul.slider li.rArrow a {z-index:10}
span#slide2:target ~ ul.slider li.rArrow .a3 {z-index:100}
span#slide2:target ~ ul.slider li.lArrow .a1 {z-index:100}

span#slide3:target ~ ul.slider li.lArrow a,
span#slide3:target ~ ul.slider li.rArrow a {z-index:10}
span#slide3:target ~ ul.slider li.rArrow .a4 {z-index:100}
span#slide3:target ~ ul.slider li.lArrow .a2 {z-index:100}

span#slide4:target ~ ul.slider li.lArrow a,
span#slide4:target ~ ul.slider li.rArrow a {z-index:10}
span#slide4:target ~ ul.slider li.rArrow .a5 {z-index:100}
span#slide4:target ~ ul.slider li.lArrow .a3 {z-index:100}

span#slide5:target ~ ul.slider li.lArrow a,
span#slide5:target ~ ul.slider li.rArrow a {z-index:10}
span#slide5:target ~ ul.slider li.rArrow .a6 {z-index:100}
span#slide5:target ~ ul.slider li.lArrow .a4 {z-index:100}

نلاحظ نحن فى هذا الجزء

كود:

ul.slider {
    margin:0 auto;
    height:455px;
    list-style:none;
    position:relative;
    width:706px;
}

حددنا ارتفاع العرض =445
وكذلك عرضه =706
وموضعة = relative

وتلى ذلك وضع معايير الحركة واتجاهاتها

وضبط خلفية العارص ونوعها

: تعلم برمجة المواقع :

dimanche 28 octobre 2012

لمحة عن HTML5

تعرف على ال SEO

إضافة خاصية الكابتشا إلى موقعك

قائمة عمودية باستخدام اكواد css3

إضافة favicon إلى موقعك أو منتداك

تعرف علي البيج رانك PageRank

مستعرض صور رائع بال css3

Popular Posts

Translate

Nombre total de pages vues

Membres

dimanche 28 octobre 2012

Social Profiles

Popular Posts

Translate

Nombre total de pages vues

Membres