majidi
عضو مجتهد
تعلم لغة الهتمل HTML
بسم الله الرحمن الرحيم ، الدرس هذا يعتبر من أهم الدروس اللتي سوف تدرسها بإذن الله وهو درس عن الوصلات التشعيبية .
فلولا الله ثم هي لما كانت الانترنت كما هي الآن . فلنبدأ الآن بالشرح :
عندما نريد وضع وصلة تشعيبية فيجب عليك وضع هذا الوسم :
<A HREF="http://www.www.net">العنوان <A/>
فلنبدأ بالتفصيل ، جزء من الوسم هو A HREF وهو يخبر المتصفح بأن الوصلة توجد في عالم الشبكة ، وأما الجزء ="http://www.www.net" فهو عنوان الموقع ( يجب أن يكون بين هذين القوسين " " ) ، وأما كلمة العنزان فهي الكلمة اللتي إذا ضغطتها تذهب للموقع، والوسم ينهي هذه الكلمة وإذا لم تضع هذا الوسم تصبح كل الصفحة وصلة واحدة تؤدي لنفس الموقع
.
ولكن ماذا لو أردت أن تضع وصلة لأحد الصفحات الموجودة في موقعك ؟؟
الجواب هو :
هكذا :
<A HREF="index.htm" >الصفحة الرئيسية لشبكة المصمم </A>
والنتيجة هي :
الصفحة الرئيسية للموقع
ولكن ماذا لو أردت وصلة تشعيبية لفقرة ما ??
ما عليك إلا الذهاب لأول كلمة موجودة في الفقرة التي تريد أن يذهب إليها الزائر ووضعها بين الوسمين <a name="www">أول كلمة موجودة في الفقرة فمثلاً تريد أن تضع وصلة لتشعيبية لبداية كلامنا عن الوصلات التشعيبية
الوصلات التشعيبية
السؤال التالي هو كيف استطعت صنع هذا يا مصمم ؟؟
اولاً اذهب إلى الكلمة التي تريد الزائر أن يذهب إليها وضعها بين الوسمين
<A name="b">الكلمة المراد للزائر الذهاب إليها
ثم اذهب لمكان وضع الوصلة التشعيبية واكتب الوسم التالي :
<A HREF="#b">الكلمة المراد للزائر أن يضغطها
مبروك استطعت أن تصنع وصلتك . ملاحظة :
تستطيع تغير الحرف b إلى أي كلمة تريدها ولكن يجب أن تتذكر هذه الكلمة .
يجب عليك قبل وضع الاسم وضع الشارة # للوصلة .
أهلاً بك إلى الدرس الثاني من دروس لغة الـHTML سوف أناقش في هذا الدرس موضوع مهم وهو كيفية حفظ
الملفات المكتوبة بلغة الـHTML .
حسناً فلنبدأ بالشرح إذا اردت حفظ ملف في لغة الـHTML احفظه بأي اسم تريده ولكن
يجب أن يكون امتداد هذا الاسم هو htm أوhtml ولا يوجد فرق في أي هذين الامتدادين ولكن كما ذكرت سابقاً يجب عليك أن تختار أحدهما وترفقه خلف الاسم الذي اخترته .
ملاحظة:
من الأفضل أن تقوم بإنشاء مجلد على القرص الصلب لكي تحفظ به ملفاتك لتسهل عملية استرجاعها أو تحديثها .
ربما لم تفهم ما ذكرت فلذلك سوف أدرج هذا الثال : لقد أنشئت مجلد باسم C:\htmfies وسميت الملف بـ
1st_file.htm وكتبت هذه الشفرة :
<HTML>
<HEAD>
<TITLE>
العنوان
<TITLE/>
<HEAD/>
<BODY>
الحمد لله كتبت صفحتي الأولى
<BODY/>
<HTML/>
إذا اردت رؤية النتيجة وكان متصفحك MS intrernet explorer اختر الأمر Open من القائمة FILE ثم حدد مسار الملف وهذا يتم بطريقتين ، الطريقة الأولى هي كتابة المسار والطريقة الثانية هي بالضغط على زر browse ثم تحديد الملف والضغط على Open .
----------------------------------------
أما إذا كان متصفحك Netscape Navigator اختر الأمر Opaen File من القائمة FILE ثم حدد المسار الذي يوجد به الملف ، أنا شخصياً حددت المسار التالي : C:\my ********s\&_temp1.htm
ماذا عنك أتوقع أنك حصلت على نفس النتيجة إذاً مبروك ( إذا لم تحصل على نفس النتيجة فأعد هذا الدرس ) .
قبل أن تذهب إلى الدرس التالي أريد أن أنبهك إلى بعض النقاط :
1- لافرق إذا كتبت الوسوم بالأحرف الكبيرة أو الأحرف الصغيرة .
2-لافرق إذا كتبت الوسوم متباعدة أو متقاربة ، يعني : تستطيع كتابة الملف السابق هكذا :
<HTML> <HEAD> <TITLE> المصمم <TITLE/> <HEAD/> <BODY>
الحمد لله كتبت صفحتي الأولى بفضل المصمم <BODY/> <HTML/>
او هكذا :
<HTML>
<HEAD>
<TITLE>
العنوان
<TITLE/>
<HEAD/>
<BODY>
الحمد لله كتبت صفحتي الأولى
<BODY/>
<HTML/>
لأن المتصفحات لا تأخذ بعين الاعتبار المسافات ولافراغات الزائدة ، فإذا اردت أن تبدأ سطر جديد عليك وضع
الوسم <br> وإذا اردت ادراج فراغ عليك وضع الوسم ;nbsp&
اهلاً بك إلى الدرس الثالث من دروس لغة الـHTML ، سوف أتكلم في هذا الدرس عن أهم أمور لغة الـHTML ألا وهي اهلاً بك إلى الدرس الثالث من دروس لغة الـHTML ، سوف أتكلم في هذا الدرس عن أهم أمور لغة الـHTML ألا وهي الألوان فبدون الألوان تصبح الصفحة باهتة وغير جميلة . هل تذكر الصفحة التي التي عملنها في الدرس الثاني ، كانت صفحة رمادية وخط بمقياس 3 ولونه أسود ، ما رأيك أن نغير خلفية الصفحة . فلنبدأ :
إذا اردت تغير خلفية الصفحة ما عليك إلا وضع هذا الوسم داخل الوسم < BODY >هكذا :
< "BODY BGCOLOR="008080 > وإذا اردت وضع الخلفية باللون الأحمر لوضعت الرقم FF0000 بدل من الرقم FFFFFF الذي يمثل الرقم الأبيض وهكذا . حسناً أنا أتوقع منك أن تسأل من أين جائت هذه الأرقام ، وكيف نستخرج اللون المناسب ؟
الجواب هو : أن كل رقم من هذه الأرقام هو مزيج من اللون الأزرق و الأخضر والأحمر . حيث يمثلان الرقمان الأولان على اليمين نسبة وجود اللون الأزرق ، والرقمين الذان في الوسط يمثلان نسبة وجود اللون الأخضر ، والرقمان الذان على اليسار يمثلان نسبة وجود اللون الأحمر .
إذاً :
أي لون هو مزيج وبنسبة معينة من هذه الألوان الثلاث
حيث تُمَكِنُكَ لغة الـHTML من وضع 16777216 لون في صفحتك . حسناً ولكن من أين جائت الرمز 000000 الذي يمثل اللون الأسود ؟
هي أرقام عادية مكتوبة بالنظام السداسي العشري ، فالرقم 255 بالنطام العشري يكافيء الرقم FF بالنظام السداسي العشري .
ولكن من الأفضل لك وضع الإشارة # قبل رقم اللون لأن بعض المتصفحات لا تتعرف على اللون إلى بوضع هذه الإشارة
ملاحظة : تستطيع كتابة الألوان الأساسية باستخدام أسماء هذه الألوان باللغة الانجليزية.
ولكن ماذا لو أردت إضافة صورة كخلفية للصفحة ؟؟؟؟
ما عليك إلى إضافة الوسم
< " BODY background="file:///C:\Program Files\my ********es\back.jpg>
...
< BODY/ >
أهلاً بك إلى هذا الدرس الذي يشرح كيفية تلوين الأزرار و الفراغات التي تكتب فيها المعلومات .
في الحقيقة هذه الفراغات لها استعمالات عديد في لغات عديدة ( مثل : PHP & ASP & PERL ...) وفي عدة مجالات كسجل الزوار والفورم البريدي ...
في الحقيقة هذا الدرس سهل جداً ، فإذا لم تفهم جزئ منه يرجى منك إخباري عن طريق الفورم البريدي ، وسوف أقوم بإرشادك إلى أخطائك إن شاء الله .
الكود :
<form name ="The-Form">
<input type="Text" style="color: #FFFFFF; background-color: #5D799A; border-width: 1; width=50">
<input type="Submit" name="submit" style="color: #FFFFFF; background-color: #5D799A; border-width: 1; border-style: 1">
</form>
هذا هو الكود الذي استعملته في المثال الموجود بالأعلى ، كما ترى الكود بسيط وسهل وغير معقد البتة .
الشرح :
ملاحظة :
يمكنك تغيير لون الفراغات و الأزرار بكل سهولة من خلال لغة الـCSS ( سوف تنطرق لهذه الطريقة في وقت آخر ).
نظرة تاريخية بسيطة للغة الـ HTML :
نشرت نتائج دراسة عن اللغات المستخدمة في الانترنت ، وياللعجب ، اتضح ان اكثر من 70% من المواقع تستعملها . لذا فقد وددت ان اوضح لك اخي الزائر ، بعض المعلومات التاريخية عن لغة الـHTML .
لقد تم تصميم لغة الـHTML الأولية في عام 1992 من قبل تم بارنرز لي -Tim Berners-Lee- وروبرت كاليو -Robert Caillau- . حيث قاما باشتقاق لغة الـHTML من لغة الـSGML .
ماهية لغة الـSGML ؟
الكلمة SGML هي اختصار للجملة Standardized General Markup Language التي معناها باللغة العربية (لغة الترميز المعممة البنيوية ) ، تم تطوير هذه اللغة في مختبارات شركة IBM العالمية سنة 1969 .
في الحقيقة ، تم تصميم الـHTML لتصميم المستندات لا لوصفها .
وطبعاً ، مع مرور الوقت ، كان من الواجب ان تكون هناك نسخ معدلة من الـHTML .
تواريخ مهمة :
1992
تصميم لغة الـHTML الاساسية .
1993
تصميم لغة الـHTML + والتي تعتبر تحسين بسيط للغة الـHTML الاساسية .
1994
تصميم لغة الـHTML النسخة الثانية
تصميم لغة الـHTML النسخة الثالثة
1996
دعم المتصفحانNetscape و Explorer للغة الـHTML .
تصميم لغة الـHTML النسخة رقم 3.2 .
1997
تصميم لغة الـHTML النسخة رقم 4 .
1999
تصميم لغة الـHTML النسخة رقم4,1 والتي تعتبر تحسين بسيط للغة الـHTML النسخة رقم 4 .
2000
تصميم لغة الـXHTML وهي تعتبر إلا حد ما دمج للغة الـHTML و الـXML .
كيفية وضع ملف فلاش على صفحة
- الأمر في غاية البساطة ، فقط قم بنسخ الكود التالي ، وتغيير الكلام الأحمر بخصائص ملغ الفلاش الذي تريد وضعه على صفحة :
<OBJECT WIDTH="ضع هنا عرض ملف الفلاش" HEIGHT="ضع هنا طول ملف الفلاش">
<PARAM NAME="MOVIE" VALUE="ضع هنا عنوان ملف الفلاش">
<EMBED SRC="ضع هنا عنوان ملف الفلاش">
</EMBED>
</OBJECT>
- انتهينا ، ولكن تذكر يجب عليك ان تقوم بوضع ملف الفلاش على الانترنت.:Upload:. قبل كتابة هذا الكود .
.
بسم الله الرحمن الرحيم ، الدرس هذا يعتبر من أهم الدروس اللتي سوف تدرسها بإذن الله وهو درس عن الوصلات التشعيبية .
فلولا الله ثم هي لما كانت الانترنت كما هي الآن . فلنبدأ الآن بالشرح :
عندما نريد وضع وصلة تشعيبية فيجب عليك وضع هذا الوسم :
<A HREF="http://www.www.net">العنوان <A/>
فلنبدأ بالتفصيل ، جزء من الوسم هو A HREF وهو يخبر المتصفح بأن الوصلة توجد في عالم الشبكة ، وأما الجزء ="http://www.www.net" فهو عنوان الموقع ( يجب أن يكون بين هذين القوسين " " ) ، وأما كلمة العنزان فهي الكلمة اللتي إذا ضغطتها تذهب للموقع، والوسم ينهي هذه الكلمة وإذا لم تضع هذا الوسم تصبح كل الصفحة وصلة واحدة تؤدي لنفس الموقع
.ولكن ماذا لو أردت أن تضع وصلة لأحد الصفحات الموجودة في موقعك ؟؟
الجواب هو :
هكذا :
<A HREF="index.htm" >الصفحة الرئيسية لشبكة المصمم </A>
والنتيجة هي :
الصفحة الرئيسية للموقع
ولكن ماذا لو أردت وصلة تشعيبية لفقرة ما ??
ما عليك إلا الذهاب لأول كلمة موجودة في الفقرة التي تريد أن يذهب إليها الزائر ووضعها بين الوسمين <a name="www">أول كلمة موجودة في الفقرة فمثلاً تريد أن تضع وصلة لتشعيبية لبداية كلامنا عن الوصلات التشعيبية
الوصلات التشعيبية
السؤال التالي هو كيف استطعت صنع هذا يا مصمم ؟؟
اولاً اذهب إلى الكلمة التي تريد الزائر أن يذهب إليها وضعها بين الوسمين
<A name="b">الكلمة المراد للزائر الذهاب إليها
ثم اذهب لمكان وضع الوصلة التشعيبية واكتب الوسم التالي :
<A HREF="#b">الكلمة المراد للزائر أن يضغطها
مبروك استطعت أن تصنع وصلتك . ملاحظة :
تستطيع تغير الحرف b إلى أي كلمة تريدها ولكن يجب أن تتذكر هذه الكلمة .
يجب عليك قبل وضع الاسم وضع الشارة # للوصلة .
أهلاً بك إلى الدرس الثاني من دروس لغة الـHTML سوف أناقش في هذا الدرس موضوع مهم وهو كيفية حفظ
الملفات المكتوبة بلغة الـHTML .
حسناً فلنبدأ بالشرح إذا اردت حفظ ملف في لغة الـHTML احفظه بأي اسم تريده ولكن
يجب أن يكون امتداد هذا الاسم هو htm أوhtml ولا يوجد فرق في أي هذين الامتدادين ولكن كما ذكرت سابقاً يجب عليك أن تختار أحدهما وترفقه خلف الاسم الذي اخترته .
ملاحظة:
من الأفضل أن تقوم بإنشاء مجلد على القرص الصلب لكي تحفظ به ملفاتك لتسهل عملية استرجاعها أو تحديثها .
ربما لم تفهم ما ذكرت فلذلك سوف أدرج هذا الثال : لقد أنشئت مجلد باسم C:\htmfies وسميت الملف بـ
1st_file.htm وكتبت هذه الشفرة :
<HTML>
<HEAD>
<TITLE>
العنوان
<TITLE/>
<HEAD/>
<BODY>
الحمد لله كتبت صفحتي الأولى
<BODY/>
<HTML/>
إذا اردت رؤية النتيجة وكان متصفحك MS intrernet explorer اختر الأمر Open من القائمة FILE ثم حدد مسار الملف وهذا يتم بطريقتين ، الطريقة الأولى هي كتابة المسار والطريقة الثانية هي بالضغط على زر browse ثم تحديد الملف والضغط على Open .
----------------------------------------
أما إذا كان متصفحك Netscape Navigator اختر الأمر Opaen File من القائمة FILE ثم حدد المسار الذي يوجد به الملف ، أنا شخصياً حددت المسار التالي : C:\my ********s\&_temp1.htm
ماذا عنك أتوقع أنك حصلت على نفس النتيجة إذاً مبروك ( إذا لم تحصل على نفس النتيجة فأعد هذا الدرس ) .
قبل أن تذهب إلى الدرس التالي أريد أن أنبهك إلى بعض النقاط :
1- لافرق إذا كتبت الوسوم بالأحرف الكبيرة أو الأحرف الصغيرة .
2-لافرق إذا كتبت الوسوم متباعدة أو متقاربة ، يعني : تستطيع كتابة الملف السابق هكذا :
<HTML> <HEAD> <TITLE> المصمم <TITLE/> <HEAD/> <BODY>
الحمد لله كتبت صفحتي الأولى بفضل المصمم <BODY/> <HTML/>
او هكذا :
<HTML>
<HEAD>
<TITLE>
العنوان
<TITLE/>
<HEAD/>
<BODY>
الحمد لله كتبت صفحتي الأولى
<BODY/>
<HTML/>
لأن المتصفحات لا تأخذ بعين الاعتبار المسافات ولافراغات الزائدة ، فإذا اردت أن تبدأ سطر جديد عليك وضع
الوسم <br> وإذا اردت ادراج فراغ عليك وضع الوسم ;nbsp&
اهلاً بك إلى الدرس الثالث من دروس لغة الـHTML ، سوف أتكلم في هذا الدرس عن أهم أمور لغة الـHTML ألا وهي اهلاً بك إلى الدرس الثالث من دروس لغة الـHTML ، سوف أتكلم في هذا الدرس عن أهم أمور لغة الـHTML ألا وهي الألوان فبدون الألوان تصبح الصفحة باهتة وغير جميلة . هل تذكر الصفحة التي التي عملنها في الدرس الثاني ، كانت صفحة رمادية وخط بمقياس 3 ولونه أسود ، ما رأيك أن نغير خلفية الصفحة . فلنبدأ :
إذا اردت تغير خلفية الصفحة ما عليك إلا وضع هذا الوسم داخل الوسم < BODY >هكذا :
< "BODY BGCOLOR="008080 > وإذا اردت وضع الخلفية باللون الأحمر لوضعت الرقم FF0000 بدل من الرقم FFFFFF الذي يمثل الرقم الأبيض وهكذا . حسناً أنا أتوقع منك أن تسأل من أين جائت هذه الأرقام ، وكيف نستخرج اللون المناسب ؟
الجواب هو : أن كل رقم من هذه الأرقام هو مزيج من اللون الأزرق و الأخضر والأحمر . حيث يمثلان الرقمان الأولان على اليمين نسبة وجود اللون الأزرق ، والرقمين الذان في الوسط يمثلان نسبة وجود اللون الأخضر ، والرقمان الذان على اليسار يمثلان نسبة وجود اللون الأحمر .
إذاً :
أي لون هو مزيج وبنسبة معينة من هذه الألوان الثلاث
حيث تُمَكِنُكَ لغة الـHTML من وضع 16777216 لون في صفحتك . حسناً ولكن من أين جائت الرمز 000000 الذي يمثل اللون الأسود ؟
هي أرقام عادية مكتوبة بالنظام السداسي العشري ، فالرقم 255 بالنطام العشري يكافيء الرقم FF بالنظام السداسي العشري .
ولكن من الأفضل لك وضع الإشارة # قبل رقم اللون لأن بعض المتصفحات لا تتعرف على اللون إلى بوضع هذه الإشارة
ملاحظة : تستطيع كتابة الألوان الأساسية باستخدام أسماء هذه الألوان باللغة الانجليزية.
ولكن ماذا لو أردت إضافة صورة كخلفية للصفحة ؟؟؟؟
ما عليك إلى إضافة الوسم
< " BODY background="file:///C:\Program Files\my ********es\back.jpg>
...
< BODY/ >
أهلاً بك إلى هذا الدرس الذي يشرح كيفية تلوين الأزرار و الفراغات التي تكتب فيها المعلومات .
في الحقيقة هذه الفراغات لها استعمالات عديد في لغات عديدة ( مثل : PHP & ASP & PERL ...) وفي عدة مجالات كسجل الزوار والفورم البريدي ...
في الحقيقة هذا الدرس سهل جداً ، فإذا لم تفهم جزئ منه يرجى منك إخباري عن طريق الفورم البريدي ، وسوف أقوم بإرشادك إلى أخطائك إن شاء الله .
الكود :
<form name ="The-Form">
<input type="Text" style="color: #FFFFFF; background-color: #5D799A; border-width: 1; width=50">
<input type="Submit" name="submit" style="color: #FFFFFF; background-color: #5D799A; border-width: 1; border-style: 1">
</form>
هذا هو الكود الذي استعملته في المثال الموجود بالأعلى ، كما ترى الكود بسيط وسهل وغير معقد البتة .
الشرح :
ملاحظة :
يمكنك تغيير لون الفراغات و الأزرار بكل سهولة من خلال لغة الـCSS ( سوف تنطرق لهذه الطريقة في وقت آخر ).
نظرة تاريخية بسيطة للغة الـ HTML :
نشرت نتائج دراسة عن اللغات المستخدمة في الانترنت ، وياللعجب ، اتضح ان اكثر من 70% من المواقع تستعملها . لذا فقد وددت ان اوضح لك اخي الزائر ، بعض المعلومات التاريخية عن لغة الـHTML .
لقد تم تصميم لغة الـHTML الأولية في عام 1992 من قبل تم بارنرز لي -Tim Berners-Lee- وروبرت كاليو -Robert Caillau- . حيث قاما باشتقاق لغة الـHTML من لغة الـSGML .
ماهية لغة الـSGML ؟
الكلمة SGML هي اختصار للجملة Standardized General Markup Language التي معناها باللغة العربية (لغة الترميز المعممة البنيوية ) ، تم تطوير هذه اللغة في مختبارات شركة IBM العالمية سنة 1969 .
في الحقيقة ، تم تصميم الـHTML لتصميم المستندات لا لوصفها .
وطبعاً ، مع مرور الوقت ، كان من الواجب ان تكون هناك نسخ معدلة من الـHTML .
تواريخ مهمة :
1992
تصميم لغة الـHTML الاساسية .
1993
تصميم لغة الـHTML + والتي تعتبر تحسين بسيط للغة الـHTML الاساسية .
1994
تصميم لغة الـHTML النسخة الثانية
تصميم لغة الـHTML النسخة الثالثة
1996
دعم المتصفحانNetscape و Explorer للغة الـHTML .
تصميم لغة الـHTML النسخة رقم 3.2 .
1997
تصميم لغة الـHTML النسخة رقم 4 .
1999
تصميم لغة الـHTML النسخة رقم4,1 والتي تعتبر تحسين بسيط للغة الـHTML النسخة رقم 4 .
2000
تصميم لغة الـXHTML وهي تعتبر إلا حد ما دمج للغة الـHTML و الـXML .
كيفية وضع ملف فلاش على صفحة
- الأمر في غاية البساطة ، فقط قم بنسخ الكود التالي ، وتغيير الكلام الأحمر بخصائص ملغ الفلاش الذي تريد وضعه على صفحة :
<OBJECT WIDTH="ضع هنا عرض ملف الفلاش" HEIGHT="ضع هنا طول ملف الفلاش">
<PARAM NAME="MOVIE" VALUE="ضع هنا عنوان ملف الفلاش">
<EMBED SRC="ضع هنا عنوان ملف الفلاش">
</EMBED>
</OBJECT>
- انتهينا ، ولكن تذكر يجب عليك ان تقوم بوضع ملف الفلاش على الانترنت.:Upload:. قبل كتابة هذا الكود .
.
