المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : دروة برمجة المواقع لغة html


azizsoft
18-11-2012, 07:14 PM
http://img835.imageshack.us/img835/6807/21948207.png


وبعــــــــــــــــــــــ ــــــــــد

الاخوة مشرفي وأعضاء منتدى طريق الاحتراف

أهلا وسهلا ومرحبا بكم وأسعد الله أوقاتكم بطاعته ومحبته .




دروة لغة HTML

http://icons.iconarchive.com/icons/graphics-vibe/developer/256/html-icon.png



سنتكلم فى دورتنا الاولى عن لغة HTML ، من المؤكد انك سمعت عنها يوما ما وان لم تسمع عنها فقد سمعت الان! ، و سوف
تتعلمها ان شاء الله مع قليل من التركيز والارادة , لغة HTML تعتبر هى الخطوة الاولى بل نقطة البداية لجميع لغات الويب الاخرى
ان شاء الله ستكون دروتنا مختلف عن باقى الدورات ، لن نستخدم شعارات مثل لسنا الوحيدون ولكننا الافضل ، ولكن سنحرص
على ايصال المعلومة بصورة مباشرة ولذيذه سواء فى هذه الدورة او غيرها من الدورات وسنحرص ايضا على التركيز على ما سيفيدنا فى تصميم المواقع .

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


[1] مقدمة وبعض الاساسيات فى لغة HTML

سنتكلم فى هذا الفيديو عن الاتى

متطلبات الدورة ؟
ما هى لغة HTML ؟
كيف تكتب صفحات HTML ومما تتكون ؟
ما هى الأوسمة Tags ، و الخصائص Attributes ، والعناصر Elements ؟
كيف نضيف عنوان لصفحة HTML ؟


http://www.youtube.com/watch?v=Ct0wyyA_Xqw&feature=player_embedded

[2] المزيد من الاوسمة

سنتكلم فى هذا الفيديو عن المزيد من الاوسمة مثل

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

http://www.youtube.com/watch?v=6o_fhC-4c94



[3] القوائم ، الروابط ، الصور

سنتكلم فى هذا الفيديو عن

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

http://www.youtube.com/watch?v=9J0j7XeYa5I

[4] الجداول Tables

سنتكلم فى هذا الفيديو عن

اوسمة الجداول Tables .
اوسمة الصفوف Rows واوسمة الخلايا Data cells .
خصائص اضافية مثل rowspan و colspan .
اوسمة اضافية للتحكم بهيدر وفوتر ومحتوى الجدول .

http://www.youtube.com/watch?v=R2ivFHK-ZbU

[5] الفريمات والاى فريم Frames & Iframe

سوف نتكلم فى هذا الفيديو عن

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

http://www.youtube.com/watch?v=5qWx6Pq8RnU


[6] المزيد من الاوسمة

سنتكلم فى هذا الفيديو عن

الكلمات الوصفية والاوسمة الخاصه .
ما الفرق بين الوسم span & div .
ما الفرق بين الخاصية id & class .
أوسمة العنواين .


http://www.youtube.com/watch?v=kYAWpKtLC7o


[7] النماذج Forms

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

الجزء الاول من النماذج

http://www.youtube.com/watch?v=s1facVlbE9A


الجزء الثانى من النماذج

http://www.youtube.com/watch?v=2opySNggsAQ


[8] لغة xHTML

سنتكلم فى هذا الفيديو عن التالى

ما هى لغة XHTML ؟
كيف يمكن تطبيق XHTML ؟
كيف يمكن التاكد من التوافق مع المعايير القياسية ؟


http://www.youtube.com/watch?v=0Ssjp1Sv-5w


[9] مراجعة سريعة على لغة HTML

فى هذا الفيديو سيتم مراجعة سريعة على لغة HTML وعلى ما سبق دراسته فى صورة مجمعه وبسيطه.


http://www.youtube.com/watch?v=pQoi98Yo99M


ملاحظة : يوجد خطأ بالفيديو فى كتابة كود الميتا الكود الصحيح بالاسفل

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

[10] تجميعة مكتوبة تحتوى على اهم ما تم دراسته فى لغة HTML .


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ar" dir="rtl">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="وصف عن الموقع" />
<meta name="keywords" content="كلمات وصفية عن الموقع" />
<meta name="author" content="اسم مؤلف او مصمم الموقع" />

<title>عنوان الصفحة</title>
</head>

<body>

<!--وثيقة مجمعة للغة html -->

<p>I learn HTML in Trickat.com</p>
i have been learned HTML & XHTML <br /> i will learned css <hr />

<strong>trickat.com</strong>
<big>trickat.com</big>
<del>trickat.com</del>
<ins>trickat.com</ins>
<em>trickat.com</em>
<small>trickat.com</small>

<br />

<h1>دورة تعلم لغة html</h1>
<h2>دورة تعلم لغة html</h2>
<h3>دورة تعلم لغة html</h3>
<h4>دورة تعلم لغة html</h4>
<h5>دورة تعلم لغة html</h5>
<h6>دورة تعلم لغة html</h6>

<br />

<a href="http://google.com" target="_blank" title="هنا جوجل" >اضغط هنا لدخول جوجل</a>

<br />

<img src="trickat.png" alt="تركات" />

<br />

<ul>
<li>العنصر الاول</li>
<li>العنصر الثانى</li>
<li>العنصر الثالث</li>
</ul>

<br />

<ol>
<li>العنصر الاول</li>
<li>العنصر الثانى</li>
<li>العنصر الثالث</li>
</ol>

<br />

<table border="1" cellpadding="10" cellspacing="20">
<tr>
<th>السبت</th>
<th>الاحد</th>
</tr>
<tr>
<td>كرة قدم</td>
<td>سباحة</td>
</tr>
</table>

<br />

<table border="1" cellpadding="2" cellspacing="2">
<tr>
<th colspan="2">السبت</th>
</tr>
<tr>
<td>كرة قدم</td>
<td>سباحة</td>
</tr>
</table>

<br />

<table border="1" cellpadding="2" cellspacing="2">
<tr>
<th rowspan="2">السبت</th>
<th>الاحد</th>
</tr>
<tr>
<td>سباحة</td>
</tr>
</table>

<br />

<iframe src="http://google.com" width="500px" height="500px" frameborder="0" scrolling="no"></iframe>

<br />

<frameset cols="20%,80%">
<frame src="a.html" />
<frame src="b.html" noresize="noresize" />
</frameset>

<br />

<frameset rows="20%,80%">
<frame src="a.html" />
<frame src="b.html" noresize="noresize" />
</frameset>

<br />

<form action="signup.php" method="post/get">

<input type="text" name="name" value="your name" /><br />
<input type="password" /><br />
<input type="checkbox" checked="checked" /><br />
<input type="radio" checked="checked" /><br />
<input type="file" /><br />
<input type="image" src="trickat.gif"/><br />
<input type="submit" value="ارسال" /><br />
<input type="reset" /><br />
<input type="button" /><br />
<input type="hidden" /><br />

<br />

<select>
<optgroup label="دول عربية">
<option>مصر</option>
<option selected="selected">السعودية</option>
<option>الامارات</option>
</optgroup>

<optgroup label="دول اوربية">
<option>ايطاليا</option>
<option>المانيا</option>
<option>فرنسا</option>
</optgroup>
</select>

<br />

<textarea name="comments" rows="10" cols="30"></textarea>

<br />

<fieldset>
<legend>نموذج دخول</legend>
<label for="nn">الاسم:</label>
<input type="text" name="name" value="your name" id="nn" />

<br /><br />

<label for="ss">الباسورد:</label>
<input type="password" name="password" id="ss" />
</fieldset>

</form>

</body>
</html>



:abc_087:فهرس الدورة كاملة (http://www.abc4web.net/vb/showthread.php?p=217265#post217265) :abc_088:


أتمنى لكم الفائدة من هاته الدورة الرائعة


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


http://img138.imageshack.us/img138/8206/rabhi.gif

أبو يوسف
18-11-2012, 07:44 PM
جزاك الله خيرا اخانا شريف وبارك الله فيك

الصوت أظنه صوت ابي همام

الفيديو الرابع لا يظهر

الدرس السابع : [7] النماذج forms


الروابط تحتاج تعديل

abohmam
18-11-2012, 08:24 PM
بارك الله في جهودك أخى عزيز

دروس رائعة وقوية ماشاء الله

ان شاء الله تتم الفائدة منها ويستفيد من نشرها أكبر عدد ممكن ممن يحبون برمجة وتكويد القوالب والمواقع

جزاك الله خيرا ياطيب


الصوت أظنه صوت ابي همام


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

أبو فارس
19-11-2012, 03:53 PM
بارك الله فيكم :abc_152: وأكثر من امثالكم

المصمم
24-11-2012, 03:40 PM
شـكــ وبارك الله فيك ـــرا لك

لك مني أجمل تحية .