شرح عمل بروفايل رائع بواسطة HTML5 حصريا لترايدنت







                

بسم الله الرحمن الرحيم والصلاة والسلام على اشرف المرسلين الـ HTML5 لغة معروفة وقد قام الاخوان فى المعهد بشرحها شرحاً تفصيلاُ .. جزاهم الله خيراً وهذا درس بسيط يساعد لعمل صفحة HTML5 بروفايل

 النتيجة النهائية للتطبيق :

نتابع الصورة

 الشرح :

اولا يمكنك تحميل من الملف ورفعه الي موقعك من هنــا

أو من هنـا

الخطوة الاولى هى عمل ملف HTML5 جديد باسم index.html

رمز PHP:
<!DOCTYPE html> 

<
html> 

    <
head> 

        <
meta charset="utf-8" /> 

  

        <
title>Making a Beautiful HTML5 Portfolio Tutorialzine Demo</title> 

  

        <!-- 
Our CSS stylesheet file --> 

        <
link rel="stylesheet" href="assets/css/styles.css" /> 

  

        <!-- 
Enabling HTML5 tags for older IE browsers --> 

        <!--[if 
lt IE 9]> 

          <
script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 

        <![endif]--> 

    </head> 

  

    <body> 




        <header> 

            <h1>My Portfolio</h1> 

        </header> 

  

        <nav id="filter"> 

            <!-- The menu items will go here (generated by jQuery) --> 

        </nav> 

  

        <section id="container"> 

            <ul id="stage"> 

                <!-- Your portfolio items go here --> 

            </ul> 

        </section> 

  

        <footer> 

        </footer> 

  

        <!-- Including jQuery, the Quicksand plugin, and our own script.js --> 

  

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
39 
        <script src="assets/js/jquery.quicksand.js"></script> 

        <script src="assets/js/script.js"></script> 

  

    </body> 
43 
</html>

والكل يعرف هناك عدد من العناصر الجديدة فى HTML 5 زى header بوسم h1 و section وهو الذى يحمل قوائم (يتم اضافة قوائم اخرى بjQuery وغيرهم الكثيير تابع هذا الكود

رمز PHP:
<li data-tags="Print Design"> 

    <
img src="assets/img/shots/1.jpg" /> 

</
li> 

  
<
li data-tags="Logo Design,Print Design"> 

    <
img src="assets/img/shots/2.jpg" /> 

</
li> 

<
li data-tags="Web Design,Logo Design"> 

    <
img src="assets/img/shots/3.jpg" /> 

</
li 

وبعد ذلكـ يمكنك ان تضغ ما تـريـد مــن اكواد فى الملف بالنسبة للصور المعروضة فى الملف يمكنك ابدالها بصور اخرى ولكن يجب اولاً تعديلها فى ملف HTML 5


http://www.traidnt.net/vb/traidnt2184213