مطلوب تّعلم عمل صفحات ويب بتفاصيلها (( دروس خصوصيه ))

[ا بو سليمان]

مطلوب معلم  (خصوصي)  لعمل   وتعلم  صفحات ويب   بكامل تفاصيلها 

 

 

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

 

ولن نختلف على  الاتعاب ان شاء الله 

 

[ا بو سليمان]

لا زلنا ننتظر المعلم 

[ابو جودي]

ان شاء الله استطيع المساعده بما لدى من معلومات ☺

لا اريد اى اموال فقط لوجه الله عزوجل عسى الله ان ينفعنا بما علمنا ويجعله حجة لنا

يمكننا البدء والتعلم هنا من خلال هذا الموضوع حتى تعم الفائده للكل ان شاء الله

[ا بو سليمان]

شكرا لك   اخي الفاضل 

اسير الشروق

 

 

فلنبدا  من الاساس  الى  النهايه 

 

على بركة الله 

[عماراللهيبي]

ان شاء الله استطيع المساعده بما لدى من معلومات ☺

لا اريد اى اموال فقط لوجه الله عزوجل عسى الله ان ينفعنا بما علمنا ويجعله حجة لنا

يمكننا البدء والتعلم هنا من خلال هذا الموضوع حتى تعم الفائده للكل ان شاء الله

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

السلام عليكم 

استاذ محمد المحترم

لم اجد شئ هل غيرت رأيك ... وعسى المانع خير

[abedf]

السلام عليكم ...هذه أول مشاركه لي ضمن هذا المنتدى المحترم ...

الأخ عمار ...هنالك الكثير من المراجع المفيده لتعلم برمجة صفحات الويب ...ولكنى دائما انصح بالبدء بتعلم لغة الوسوم , و من راي المتواضع رابط الموقع ادناه مفيد جدا ..حيث انا شخصيا بدات رحلتي مع برمجيات الويب من خلاله قبل مايقارب 11 سنه  ...وكذلك يعرض الموقع دروسه بشكل بسيط و مختصره (ما قل و دل ) و مشكلة الموقع الوحبده انه باللغه الانجليزيه  : 

http://www.w3schools.com/html/default.asp

بالامكان اعتماد درسين بشكل يومي ....الدرس يستغرق من 10 الى 15 دقيقه لمطالعة التفاصيل , و 15 دقيقه للتدرب. 

بالتوفيق ان شاء الله.

 

تم تعديل سبتمبر 26, 2015 بواسطه abedf

[عماراللهيبي]

السلام عليكم ...هذه أول مشاركه لي ضمن هذا المنتدى المحترم ...

الأخ عمار ...هنالك الكثير من المراجع المفيده لتعلم برمجة صفحات الويب ...ولكنى دائما انصح بالبدء بتعلم لغة الوسوم , و من راي المتواضع رابط الموقع ادناه مفيد جدا ..حيث انا شخصيا بدات رحلتي مع برمجيات الويب من خلاله قبل مايقارب 11 سنه  ...وكذلك يعرض الموقع دروسه بشكل بسيط و مختصره (ما قل و دل ) و مشكلة الموقع الوحبده انه باللغه الانجليزيه  : 

http://www.w3schools.com/html/default.asp

بالامكان اعتماد درسين بشكل يومي ....الدرس يستغرق من 10 الى 15 دقيقه لمطالعة التفاصيل , و 15 دقيقه للتدرب. 

بالتوفيق ان شاء الله.

 

وعليكم السلام 

انكليزي !!!!!! 

اخي الفاضل لماذا لاتجرب ان تشرح لنا انت ماتعلمت .... 

[abedf]

السلام عليكم ...

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

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

#	عنوان الدرس	الوقت المتوقع لانجاز الدرس
1	الدرس الأول : مقدمة	15 دقيقه
2	الدرس الثاني : اساسيات  بناء صفحة ويب باستخدام الHTML5	15 دقيقه
3	الدرس الثالث : الوسوم الأساسية – الجزء الأول	15 دقيقه
4	الدرس الرابع : الوسوم الأساسية – الجزء الثاني	15 دقيقه
5	الدرس الخامس : تمرين – بناء صفحة شخصية	20 دقيقه
6	الدرس السادس : وسوم راس الصفحه	10 دقائق
7	الدرس السابع : وسوم الفقرات	10 دقائق
8	الدرس الثامن : وسوم الصور	10 دقائق
9	الدرس التاسع : وسوم التنسيق و الستايلات المباشره	15 دقائق
10	الدرس العاشر : تمرين – اكمال بناء الصفحة الشخصية	20 دقيقه
11	الدرس الحادي عشر : وسوم اضافيه – الجزء1	20 دقيقه
12	الدرس الثاني عشر : وسوم اضافية – الجزء2	20 دقيقه
13	الدرس الثالث عشر : تمرين - اكمال بناء الصفحة الشخصية	20 دقيقه

 

 

ساقوم بشرح الدرس الأول بالمشاركه التاليه مباشرة ان شاء الله.

 

 

 

الدرس الأول : مقدمة

 

المدة المتوقعه لانجاز الدرس : 15 دقيقه

 

من خلال هذه الدرس سيتم توضيح التالي :

 

1-      تعريف بلغة الوسوم HTML5

 

2-      الادوات المطلوبه لبناء صفحات الويب.

 

أولا : تعريف بلغة الوسومHTML5

بشكل عام لغة الوسوم HTML5 هي لغه تعتمد بشكل اساسي على وسوم او تاغات لبناء صفحات الويب ,حيث تسمح للمستخدم بعرض مواد ما من خلال شبكة الانترنت بشكل مقروء و سهل , حيث يقوم متصفح الانترنت (مثل الانترنت اكسبلورر أو جوجل كروم أو فايرفوكس) بترجمة هذه الوسوم الى نصوص و صور و اشكال مقروؤه بالشكل الذي نعرفه الان.

ما المقصود ب HTML  ؟

Hyper Text Markup Language

تعني بالعربيه لغة تنسيق (أو وصف) النصوص التشعبية.

 

 

ماذا تصف صفحة الويب ؟

تصف صفحة الويب باستخدام الHTML محتويات الصفحة من خلال الوسوم المختلفة التي تم استخدامها في بناء الصفحه , على سبيل المثال : قد تعرض صفحة ويب ما صورة شخصيه مع معلومات شخصيه على شكل فقره ما (سنقوم بتعلم بناء ذلك لاحقا ان شاء الله)

 

كيف أقوم بتصفح صفحات الويب ؟

يتم التصفح من خلال ما يعرف باسم متصفح الانترنت , و هنالك العديد من الاصدارات المتنوعه للمتصفح و من خلال العديد من الشركات , اشهرها هو :

Google Chrome ,FireFox , Internet Explorer

جوجل كروم , فايرفوكس , انترنت اكسبلورو

 

وصلات لتحميل المتصفحات على جهازك ؟

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

الوصله التاليه لتحميل جوجل كروم من الانترنت :

https://www.google.com/chrome/browser/desktop/

الوصله التاليه لتحميل فايرفوكس من الانترنت :

https://www.mozilla.org/en-US/firefox/new/

 

امتداد صفحة الويب  ؟

عند حفظ ملف الويب يكون امتدادها بشكل عام باحد التالي :

Htm

Html

مثال : MyPage.html

 

 

ثانيا : الادوات المطلوبه لبناء صفحات الويب

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

الادوات التي انصح باستخدامها و بشكل اساسي هي احد الادوات التاليه  :

1-      محرر النصوص Notepad:

لاداعي لتحميله و تنصيبه على الجهاز , لانه موجود تلقائيا , للوصول اليه اتبع الخطوات بالوصله التاليه  :

http://internet14arab.blogspot.ae/2014/09/notepad-7.html

ساقوم بالشرح باستخدم هذه الاده ان شاء الله.

 

2-      Note Plus

محرر يشبه Notepad  و لكن به بعض الاضافات المساعده , يمكن تحميل التطبيق من خلال الوصله التاليه :

https://notepad-plus-plus.org/download/v6.8.3.html

 

 

3-      Microsoft WebMatrix

من منتجات شركة مايكروسوفت.

 

4-      Microsoft FrontPage

منتج قديم من منتجات شركة مايكروسوفت , البعض ما زال يستخدم هذا المحرر و لكن البديل عنه هو المنتج بالنقطه3 , ساقوم بمشاركة وثيقة قمت باعدداها و محاضرتها سابقا تشرح هذه المنتج بعد الانتهاء من هذه الدروس ان شاء الله.

 

 

تم تعديل سبتمبر 27, 2015 بواسطه abedf

[عماراللهيبي]

الف شكر نرجو المزيد

بارك  الله فيك 

[ا بو سليمان]

بارك الله في الجهود   

[abedf]

السلام عليكم اخواني ...اليوم ساقوم باكمال الدرس الثاني ...متابعه ممتعه و مفيده ان شاء الله ...

 

الدرس الثاني : اساسيات  بناء صفحة ويب باستخدام الHTML

 

المدة المتوقعه لانجاز الدرس : 15 دقيقه

 

من خلال هذه الدرس سيتم توضيح التالي :

 

1-      تعريف الوسوم الرئيسه في HTML

 

2-      بناء صفحة ترحيبية.

 

 

 

أولا : تعريف الوسوم الرئيسه فيHTML

 

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

 

يجب التنويه الى ان الوسوم أو TAG بالاجليزيه تبدأ دائما بالقوس <>و تنتهي بقوس مثل </> كالتالي :

 

<P></P>

 

مكونات صفحة الويب الرئيسه :

 

1-      يجب ان تبدأ كل صفحة بالوسم  التالي المسؤول عن تعريف نوع الويب <!DOCTYPE html>

 

يوصع دايما اول سطر

 

2-      تكويد صفحة الويب تبدأ دائما بالوسم <html>

 

3-      تكويد صفحة الويب ينتهي  دائما بالوسم </html>

 

4-      معلومات راس الصفحه مثل العنوان توضع بين الوسم <header>….</header>

 

5-      مكونات الصفحه توضع دائما بين الوسم <body> .... .... </body>

 

يجب أن يتم استخدام هذه الوسوم الاساسيه في بناء أي صفحه من صفحات الويب ,التالي يبين المخطط الرئيسي لبناء صفحة الويب.

 

<!DOCTYPE html>
<html>
<head>
...وسوم راس الصفحه توضع هنا.....
</head>

<body>

...وسوم محتويات الصفحه توضع هنا.....

</body>
</html>

ثانيا : بناء صفحة ترحيبية

 

الان عزيزي القارىء لنقم بانشاء اول صفحة ويب بشكل سريع ,

 

1-      قم بفتح محرر النصوص Notepad  أو أي محرر تحب استعماله كما تم الذكر في الدرس السابق

 

 قم بطباعة التالي داخل محرر النصوص : 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>مثال بناء صفحة ويب اساسيه</title>
</head>

<body dir=”rtl”>
<h1>مثال بناء صفحة ويب اساسيه</h1>
</body>

</html>

 

 

1-      قم بحفظ الملف على سطح المكتب , قيم بتسميه الملف باسم Example.html   لاتنس ان امتداد الملف عند الحفظ يجب أن يكون .html

 

2-      قم بالنقر عالملف الذي حفظته Example.html  لاحظ انه يتم فتح الملف مباشرة باستخدام المتصفح الرئيس المعرف على جهازك.

 

3-      لابد أنك حصلت على نتيجه تشبه التالي :

 

مثال بناء صفحة ويب اساسيه

 

 

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

 

الوسم	ماذا يعني
<!DOCTYPE html>	تعريف بنوع الوثيقه
<html>	يعني البدأ بصفحة الHTML و دائما يجب ان يكون موجودات
<head>	تعريف البدأ براس الصفحه
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">	هو من وسوم تعريف محتويات و معلومات الصفحه  في عالم الويب , مهم في حالتنا لاننا نقوم بالبرمجه باللغه العربيه , حيث يقوم بتكويد الاحرف العربيه على المتصفحه.   استخدم هذا الوسم دائما
<title>مثال بناء صفحة ويب اساسيه</title>	وسم  يحتوي على عنوان للصفحه , حيث أن عنوان الصفحه في مثالنا هذا هو   مثال بناء صفحة ويب اساسيه
</head>	تعريف الانتهاء من  راس الصفحه
<body dir="rtl">	تعريف البدأ بمحتويات الصفحه.   لاحظ هنا اننا اضفنا الخاصيه dir="rtl" و هي مهمه في حالة التكويد باللعه العربيه و تعني ان الصفحه ستبدأ من اليمين للشمال حسب ما هو وارد في لغتنا العربيه.
<h1>مثال بناء صفحة ويب اساسيه</h1>	أي عباره تقع بين الوسم <h1></h1> هي عباره ترئيسيه تستخدم كعنوان لعرض نص في صفحات الويب.   وهي ليست اجباريه , و تم استخادمها بهذا المثال فقط لعرض نص في صفحة الويب هذه.
</body>	تعريف الانتهاء بمحتويات الصفحه.
</html>	يعني الانتهاء بصفحة الHTML و دائما يجب ان يكون موجودات

 

 

المرفق هو المثال الذي تم شرحه ...

ارجو ان تكون الفائدة قد عمت

 

 

 

 

 

 

 

 

 

Example1.zip

تم تعديل أكتوبر 8, 2015 بواسطه abedf

[عماراللهيبي]

السلام عليكم 

الف الف شكر ... نحن نتابع 

 

[BUT]

الف شكر لك اخى لكن وين تكملت الموضوع

 

[mennad sofiane]

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

المهم أعطيني المشكل وانا سوف أحلها هناك بعض المواقع مثل Modlle معليك الا تنصيبه وهو معروف جدا هناك بعض المرفقات الخفيفة في تعلم html 

انشاء موقع خاص بي.rar

[mennad sofiane]

مجموعة أكواد جاهزة html

بسم الله الرحمن الرحيمالسلام عليكم ورحمة الله وبركاته
اليوم جايب لكم مجموعة من الأكواد الجاهزة اللي راح تساعدكم في تصميم المواقع بلغة html وأروا أن يستفيد الجميع منها :-
أكواد الhtml

1. جعل الصورة او الكلمة او جملة تتحرك

<html>
<head>
<tilte>
<span lang="ar-sa">شبيه الريح 2002</span>
</title>
</head>
<body>
<marquee direction="right">هاااااااااااااي</marquee>
يمكن إضافة خلفية لكلمة او كبر خطها نوعها و يمكن تحريكها بأشكالم مختلفة
لوضع خلفية بلون <marquee background="red">جربه</marquee>
<marquee <font color="red" direction="right">ان شاء الله حلو</marquee>
ملاحظة يمكن كتابة جميع هؤلاء داخل الكود
<marquee <font color="red">باااااااااااااااي</marquee>
2.كود زرين للامام وللخلف
<form method="post">
<input type="button"value="للخلف" onClick="gotoHist(-1)">
<input type="button" value="للامام" onClick="gotoHist(1)">
</form>

 

3. رسالة تظهر للزائر عندما يدخل لصفحتك
<SCRIPT LANGUAGE="JavaScript">
<!--
window.alert("مرحبا بكم مع تحيات شبيه الريح 2002 بس ")
// -->
</SCRIPT>
 

4. كود طلب ترشيح للموقع
script language="JavaScript">
<!-- The JavaScript Source!! <a href="http://faam.8m.com.">
function vote () {
vote4alnadeem=window.open("http://www.arank.com/cgi-bin/rank/rankem.cgi?action=in&id=hamad999");

} function cancel () {}

if (confirm("هل ترشحنى لافضل مائه موقع عربى")) { vote();

} else cancel()
// --></script>

5. كود لعداد رائع تستطيع وضعه في جميع صفحات مع ضرورة تغيير العنوان في كل مرة

<img src="http://cgibin.erols.com/cgi-bin/Count.cgi?df=غير العنوان فى كل مره &ft=6&tr=N&dd=B&md=8">
6. كود الشريط المتحرك
<p align="center">
<marquee bgcolor="#FFFFFF" width="468">شبيه الريح 2002</marquee></p>
7. كود لإجبار المتصفح على عدم الاحتفاظ بصفحة مؤقتة و طلب الصفحة من الموقع فى كل مرة تزور فيها الصفحة.
<META http-equiv="Pragma" content="no-cache">
يتابع ... ::3::
 

8. ضع خدمة القاموس (انجليزى-عربى) (عربى-انجليزى) فى موقعك
<TABLE align=center cellSpacing=1 cellPadding=1 bgColor=#bbbbbb width=10% border=0>
<TD width=100% bgcolor=cccccc>
<FONT face='Verdana' color=#000000 size=2>Dictionary</font>
</td>
<TR>
<TD width=100% bgcolor=cccccc>
<Form Name='Search' method='POST' action='http://vbzoom.com/dictionary/index.php'>
<FONT face='Verdana' color=#000000 size=1>
<INPUT type='text' maxLength=50 size=20 name=FindWord>
<BR>
<input type=radio name=SearchMothod value=0 checked><B> Start Of Field </B>
<BR>
<input type=radio name=SearchMothod value=1><B> Any Part Of Field</B>
<BR>
<INPUT type=submit value='Find'>
</TD>
</form>
</TABLE>
9.كود جالب اخبار جريدة الجزائر

<iframe src="http://server1.الجزائر .com.sa/express/sitenews.asp?site=4852" width=250 height=25 frameborder=0 scrolling=no></iframe>
10. لتغيير لون شريط التمرير في صفحة موقعك

<STYLE>BODY {
SCROLLBAR-FACE-COLOR: #808080; SCROLLBAR-HIGHLIGHT-COLOR: #eabc5a; SCROLLBAR-SHADOW-COLOR: #eabc5a; SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; SCROLLBAR-ARROW-COLOR: #000000; SCROLLBAR-TRACK-COLOR: #c0c0c0; SCROLLBAR-DARKSHADOW-COLOR: #eabc5a
}
</STYLE>
11. اليوم والتاريخ بصفحتك

<script LANGUAGE="JavaScript">

<!-- This script and many more are available online from -->
<!-- The JavaScript Source!! http://javascriptsource.com -->

<!-- Begin
var day="";
var month="";
var myweekday="";
var year="";
mydate = new Date();
myday = mydate.getDay();
mymonth = mydate.getMonth();
myweekday= mydate.getDate();
weekday= myweekday;
myyear= mydate.getYear();
year = myyear
if(myday == 0)
day = " الأحد, "
else if(myday == 1)
day = " الأثنين, "
else if(myday == 2)
day = " الثلاثاء, "
else if(myday == 3)
day = " الاربعاء, "
else if(myday == 4)
day = " الخميس, "
else if(myday == 5)
day = " الجمعة, "
else if(myday == 6)
day = " السبت, "
if(mymonth == 0) {
month = "يناير "}
else if(mymonth ==1)
month = "فبراير "
else if(mymonth ==2)
month = "مارس "
else if(mymonth ==3)
month = "ابريل "
else if(mymonth ==4)
month = "مايو "
else if(mymonth ==5)
month = "يونيو "
else if(mymonth ==6)
month = "يوليو "
else if(mymonth ==7)
month = "اغسطس "
else if(mymonth ==
month = "سبتمبر "
else if(mymonth ==9)
month = "اكتوبر "
else if(mymonth ==10)
month = "نوفمبر "
else if(mymonth ==11)
month = "ديسمبر "


document.write("<b><font face=Arial size=3> " + day + " " + myweekday + " - " );
document.write(month + " - "+ year + "</font></b>");

// End -->
</script>

12.ارسل الموقع لصديق

<!-- TWO STEPS TO INSTALL EMAIL THIS PAGE:

1. Copy the coding into the HEAD of your HTML document
2. Add the last code into the BODY of your HTML document -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->

<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Ronnie T. Moore -->
<!-- Web Site: The JavaScript Source -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function initMail(form) {
text = "Check out this page: " + window.location;
form.message.value = "Hi" + form.sendto.value + " (" + form.to.value + "):\n\n"
+ text + "\n\nYour Friend,\n" + form.sendername.value + "(" + form.senderemail.value + ")";
return (form.to.value != "");
}
// End -->
</script>
</HEAD>

<!-- STEP TWO: Copy this code into the BODY of your HTML document -->

<BODY>

<center>
<form name=emailform method=post action="http://cgi.freedback.com/mail.pl" target="_new" onSubmit="return initMail(this);">
<input type=hidden name=subject value="** Check Out This Site! **">
<input type=hidden name=message value="">
<table>
<tr><td colspan=2 align=center><b><font color="#FF00FF">ارسل الموقع لصيق</font></b></td></tr>
<tr><td><font color="#FF00FF"><b>اسم صديقك</b></font><b><font color="#FF00FF">:</font></b></td><td>
<font color="#FF00FF"><b><input type=text name=sendto size="20"></b></font></td></tr>
<tr><td><b><font color="#FF00FF">بريد صديقك:</font></b></td><td>
<font color="#FF00FF"><b><input type=text name=to size="20"></b></font></td></tr>
<tr><td><b><font color="#FF00FF">اســــــــــمك:</font></b></td><td>
<font color="#FF00FF"><b><input type=text name=sendername size="20"></b></font></td></tr>
<tr><td><b><font color="#FF00FF">بــــــــــريدك:</font></b></td><td>
<font color="#FF00FF"><b><input type=text name=senderemail size="20"></b></font></td></tr>
<tr><td colspan=2 align=center><input type=submit value="Ok!"></td></tr>
</table>
</form>
</center>


<p><center>
<p><a href="http://www.geocities.com/reo2003_eg">موقع شبي الريح 2002</a></p>
</center><p>

<!-- Script Size: 1.63 KB -->
13.لمنع اعلانات النوافذ لمن يعاني من الاعلانات 

<!-- Start code //-->
<Script Language='Javascript'>
<!--
eval(unescape('%66%75%6E%63%74%69%6F%6E%20%6F%70%6 5%6E%20%28%29%20%7B%72%65%74%75%72%6E%20%74%72%75% 65%3B%7D'));
//-->
</Script>