ط®ظ€ط§طµ طھظ€ط±ط§ظٹظ€ط¯ظ†طھ : ط¹ظ€ظ…ظ€ظ„ ط¨ظ€ط±ظˆظپظ€ط§ظٹظ€ظ„ ط¬ظ€ظ…ظ€ظٹظ„ ط¨ط§ظ„ظ€ HTML5


بسم الله الرحمن الرحيم

والصلاة والسلام على اشرف المرسلين

الـ HTML5 لغة معروفة

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

وهذا درس مفصل بسيط يساعد لعمل صفحة HTML5 بروفايل

النتيجة النهائية




قم بتحميل الملف فى المرفقات

وارفعه الى موقعك



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

رمز PHP:
<code style="white-space:nowrap"> <code> <!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 -->

<!--&#91;if lt IE 9&#93;>

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

<!&#91;endif&#93;-->

</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>
</code> </code>



والكل يعرف هناك عدد من العناصر الجديدة فى HTML 5




زى header بوسم h1
و section وهو الذى يحمل قوائم (يتم اضافة قوائم اخرى بjQuery

وغيرهم الكثيير

تابع هذا الكود code

رمز PHP:
<code style="white-space:nowrap"> <code> <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>
</code> </code>


وبــعــد ذلـــكـ يـــمـــكـــنـــك ان تضغ مــا تـــريــد مــن اكواد فى الملف

بالنسبة للصور المعروضة فى الملف

يمكنك ابدالها بصور اخرى ولكن يجب اولاً تعديلها فى ملف HTML 5

والسلام عليكم ورحمة الله وبركاته







الملفات المرفقة [TR]
portfolio.HeRo.Desgin Traidet.zip (219.0 كيلوبايت, عدد مرات المشاهدة 139 مرة) [/TR]



©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©