رعاية وإدارة : الشريف عبد الله آل حسين
مجلة السادة الأشراف


« الإعلانات »



« آخـــر مشاركات الأنساب »
نسب قبيلة السماعنة ف... [ آخر الردود : نوح محمود - ]       »     انتقلة يو امة ولدة م... [ آخر الردود : شجاع الشنبري - ]       »     نسب عائلة قرة علي [ آخر الردود : غير مسجل - ]       »     من نشاطات ديوان السا... [ آخر الردود : البراهيم - ]       »     بحث تاريخي عن ينبع ا... [ آخر الردود : البراهيم - ]       »     لكل من يعرف [ آخر الردود : البراهيم - ]       »     السادة الحيادرة في ا... [ آخر الردود : البراهيم - ]       »     موضوع هام جدا [ آخر الردود : الدهسى - ]       »     شهر رمضان المبارك في... [ آخر الردود : هل من تلاف - ]       »     استفسااااار عن عائلة... [ آخر الردود : الشرررررررررررريف - ]       »    

« آخـــر الـــمـــشـــاركــــات »
         :: ربيعة الرأي من السلف الصالح (آخر رد :البراهيم)       :: سعيد بن المسيب .... من السلف الصالح (آخر رد :البراهيم)       :: إبـــن بـــاز وســارق الــغــاز (آخر رد :البراهيم)       :: تفسير الأية الكريمة ( انه من كيدكن ان كيدكن عظيم ) (آخر رد :المعتزة بإسلامها)       :: حقائق علمية عن يوم القيامة (آخر رد :المعتزة بإسلامها)       :: سرعة الذبابة (آخر رد :المعتزة بإسلامها)       :: ضياء الشمس ونور القمر (آخر رد :المعتزة بإسلامها)       :: وَقَالَتِ الْيَهُودُ عُزَيْرٌ ابْنُ اللّهِ (آخر رد :المعتزة بإسلامها)       :: نبى الله يحيى عليه السلام (آخر رد :المعتزة بإسلامها)       :: نبذه عن الامام بشر الحافي (آخر رد :المعتزة بإسلامها)      


العودة   منتدى السادة الأشراف > -:::: المنتديات الأدبية و الأستراحة و الاسرة والمجتمع ::::- > االقسم التقني والجرافيك

إضافة رد
 
LinkBack أدوات الموضوع انواع عرض الموضوع
قديم 16-10-09, 02:30 PM   #1 (permalink)

][::.عضو متميز.::][

 
الصورة الرمزية رحاب محمد
 
تاريخ التسجيل: May 2009
المشاركات: 3,947
Icon (17) مبادىء HTML

نبذة تاريخية حول لغة HTML
الـ HTML هي اختصار Hyper Text Markup Language أي لغة ترابط النصوص التشعبية , وهي التقنية الجوهر التي تتحكم بما سوف يعرضه المستعرض على الشاشة.
تم تصميم HTML في البدء لكي يتمكن العلماء من إنشاء مستندات نصية تحتوي على أوامر تنسيق أساسية تسمى (ترميز) وارتباطات إلى معلومات أخرى (تسمى نصوص تشعبية أو ارتباطات تشعبية) على سبيل المثال يمكن أن يحتوي مستند عن الهزات الأرضية على ارتباط إلى مستندات أخرى تتحدث عن الهزات الأرضية كتبها علماء آخرون.
لم يخطر على بال مخترعي HTML أن هذه التقنية ستبرهن عن فعالية وفائدة لدرجة أنها ستصبح السبب الرئيسي لنمو الوب.

أساسيات الوسوم (الأوامر) :
هي عبارة عن مجرد ملف نصي عادي يكتب في أي برنامج نصي (على سيبل المثال NotePad) ويحفظ بصيغة HTML أو HTM , ويحتوي هذا المستند على شفرات خاصة تسمى وسوم "أوامر" (Tags) توضع عادة حول كتل من النصوص , تلك الكتل والوسوم تسمى عناصر (Elements) ويفسر مستعرض الوب كإنترنت إكسبلورر او نيتسكيب تلك العناصر ليحدد كيفية عرضه على الشاشة. في معظم الأحيان, يملك كل عنصر في HTML وسم فتح ووسم أغلاق ويتألف وسم الفتح من إسم الوسم مع أشارتي أصغر من وأكبر من < و > . على سبيل المثال:
وسم فتح الخط العريض هو <B> ويكون وسم إغلاقه محصوراً بين الإشارات أيضاً ولكن في هذه الحالة توجد شرطة أمامية قبل إسم الوسم <B/>, ويوضع النص الذي سيتأثر بالوسم بين وسمي الفتح والإغلاق ... وعند قيام المستعرض بالتفسير سيظهر النص المكتوب بين الوسمين.

على سبيل المثال :

لكتابة الإنترنت للجميع بالخط العريض نجعلها بين وسمَيْ الفتح والاغلاق

<B/>الإنترنت للجميع<B>

** قبل كل شيء إفتح أي برنامج كتابة لديك على سبيل المثال برنامج المفكرة Notepad في ويندوز. واكتب الآتي :-

<HTML dir=rtl>
<HEAD>
<TITLE>صفحة إختبار</TITLE>
</HEAD>
<BODY>
مرحباً بكم في عالم الإنترنت
</BODY>
</HTML>

إحفظ الملف بأي إسم ولكن بصيغة html. مثلاً : index.htm أو index.html

وسوم HTML الحيوية :
الوسم الأول <HTML dir=rtl> يشير للمستعرض أنَّ المواد التي تليه يجب معالجتها باستعمال قواعد التركيب النحوي ..والبنيوي الذي تفرضه لغة HTML ، و dir=rtl تخبر المستعرض أن الكتابة ستكون من اليمين إلى اليسار.(كلغتنا الحبيبة).ويظهر وسم الإغلاق المناسب له كالتالي <HTML/> في نهاية الملف.

وسوم الترويسة :
يشير الوسمان .. <HEAD> و <HEAD/> إلى حدود منطقة الترويسة في الملف .. التي تحتوي على بنود لا تظهر على الصفحة بشكل مباشر ، وهي اختيارية .. رغم أن بعض العناصر تعمل فقط عند وضعها ضمنها .. TITLE هو أحد العناصر . يعرف الوسمان <TITLE> و <TITLE/> ما سيظهر في شريط عنوان المستعرض (الشريط الأزرق الموجود فوق شريط القوائم) ...انظر الى المستعرض الذي أمامك ترى شريط فوق في الاعلى يظهر عليه اسم البرنامج.إذاً سيكون إسم صفحتنا هو (صفحة إختبار).

وسوم الجسم :
المنطقة التالية المبينة في السرد محصورة بالوسمين <BODY> و <BODY/>. كما تتوقع هذه المنطقة تسمى جسم المستند وتحتوي على محتويات المستند - المواد المرئية على الصفحة. لذا فإن مثالنا يعرض النص (مرحباً بكم في عالم الإنترنت).

سيكون الناتج في المستعرض كالتالي:-

مرحباً بكم في عالم الإنترنت

وسوم تنسيق الأحرف :
إذا بين المثال السابق حدود اللغة HTML فإن الويب مضجرة جداً. لكن يمكنك أن تكون إبداعياً أكثر وتغيّر مظهر النص بواسطة وسوم الأحرف ، كما هو مبين في السرد التالي:-

<HTML dir="rtl">
<HEAD>
<TITLE>صفحة إختبار</TITLE>
</HEAD>
<BODY>
هذا يريك <B>نصاً عريضاً</B>
هذا يريك <I>نصاً مائلاً</I>
هذا يريك <U>خطاً تحت النص</U>
<FONT COLOR="blue">هذا يريك كيفية تغيير لون الخط</FONT>
<FONT SIZE="5">هذا يريك كيفية تغيير حجم الخط</FONT>
<FONT FACE="Tahoma">هذا يريك كيفية تغيير نوع الخط</FONT>

السطران الأولان في الجسم يحتويان على وسمي تنسيق أحرف أساسيين ، لجعل النص أسود عريضاً ومائلاً. في السطر الأول ، يحيط الوسمان <B> و <B/> بالكلمتين نصاً عريضاً وهاتين الكلمتين ستظهران سوداوان عريضتان في المستعرض. وفي السطر التالي يؤدي الوسمان <I> و <I/> إلى جعل الكلمتين نصاً مائلاً مائلة. هناك أيضاً عدة وسوم تنسيق أحرف أخرى ، كـ <U> للتسطير و <STRIKE> للشطب و <SUP> لرفع الأحرف.

يمكنك استعمال الوسم <FONT> لإعداد تنسيق نصي أكثر تعقيداً. يدعم هذا الوسم عدة سمات (attributes) متنوعة ، منها السمة COLOR و SIZE و FACE ، تحدد بالتفصيل كيفية عمله. هناك عدة وسوم أخرى تدعم السمات، وتسمى أحياناً بارامترات.

يبيّن الوسم <FONT> الأول كيفية استعمال السمة COLOR التي تتيح لك تغيير لون النص. تدعم السمة COLOR نطاقاً كبيراً من الألوان ، من AliceBlue إلى Khaki إلى YellowGreen. تدعم السمة COLOR أيضاً استعمال قيم RGB ثلاثية ستعشرية ، أي ما معناه أنه يمكنك تحديد الألوان بواسطة أرقام ستعشرية (0000FF# مثلاً ) لا تقلق إذا كانت هذه الطريقة غير مألوفة لديك. (يمكنك استخدام برنامج باينت شوب برو).

يتضمن الوسم <FONT> التالي السمة SIZE الذي يتيح لك تغيير الحجم النسبي للنص. يمكنك ضبط حجم النص على مقياس من 1 إلى 7 ، حيث الحجم 7 هو الأكبر. لا تتوافق هذه الأرقام مع أي حجم نقاط أو بكسلات محدد ، ونفس إعداد الحجم يمكنك أن يختلف مظهره في الأنظمة المختلفة يمكنك اكتساب مزيد من التحكم باستعمال مزيد من التحكم باستعمال أوراق الأنماط المتتالية.

يستعمل الوسم <FONT> الأخير السمة FACE لتغيير نوع خط النص. بشكل عام ، من الجيد استعمال الخط الإفتراضي لأنه من الصعب عادة التكهن بأنواع الخطوط المتوفرة في كمبيوتر المستخدم. هذا الأمر صحيح خصوصاً في الحالات التي يتمكن أن تتراوح فيها منصات عمل المستخدم من ويندوز إن تي على كمبيوتر شخصي إلى System 8 على ماكنتوش. بعض الخطوط المتوفرة عادة تتضمن Arial و Courier و Times و Vendana (يدعم إنترنت إكسبلورر 4 تقنية تدعى تضمين الخطوط ، تتيح شمل خطوط يستطيع المستخدمون تحميلها مع الصفحات).

سيكون الناتج في المستعرض كالتالي :-

هذا يريك نصاً عريضاً هذا يريك نصاً مائلاً هذا يريك خطاً تحت النص هذا يريك كيفية تغيير لون الخط هذا يريك كيفية تغيير حجم الخط هذا يريك كيفية تغيير نوع الخط

يمكن وسم واحد أن يكون له عدة سمات. مثلاً الإعداد التالي للوسم <FONT> ينتج نصاً أزرق كبير مكتوب بالخط Times.

<FONT SIZE="7" COLOR="blue" FACE="Tahoma">

يمكنك كتابة السمات في أي ترتيب تريده لتحقيق نفس النتيجة.

قد تتفاجأ بأن تعلم أن المستعرض يعالج أسطر HTML المستقلة في المثال السابق كأنها سطر متواصل من النص يلتف فقط عندما يصل إلى حافة إطاره. ولكن هناك وسوم تجعله يبدأ سطراً جديداً مثل <P> و <BR>. الوسم <P> إختصار Paragraph ، أي فقرة. وفي هذه الأثناء سيبدأ المستعرض بفقرة جديدة. والأمر <BR> يدرج فاصل أسطر. والفرق بين هذين الوسمين أن <BR> لا يدرج أي أسطر إضافية فارغة. لنبدأ بالمثال التالي لنبين لك الفرق بين هذين الوسمين:-

<HTML dir=rtl>
<HEAD>
<TITLE>صفحة إختبار</TITLE>
</HEAD>
<BODY>
مرحباً بكم في عالم الإنترنت
<BR>
لا يوجد فاصل أسطر إضافي أعلى هذا النص.
<P>
يوجد فاصل أسطر إضافي أعلى هذا النص.
</BODY>
</HTML>

سيكون الناتج في المستعرض كالتالي:-

مرحباً بكم في عالم الإنترنت
لا يوجد فاصل أسطر إضافي أعلى هذا النص.

يوجد فاصل أسطر إضافي أعلى هذا النص.


__________________
رحاب محمد غير متواجد حالياً   رد مع اقتباس
قديم 18-10-09, 06:54 AM   #2 (permalink)
مُشرفَة آلمَنتديات الأدبية

 
الصورة الرمزية همس الكلام
 
تاريخ التسجيل: Jul 2007
الدولة: المــديـنـــة المــنــــورة
المشاركات: 5,135
افتراضي

يسلمو غاليتي على طرحك الرائع موفقة
__________________
كود:
 
يابوي لو مرّن جديدات الأيام ... ماعاش من يسلـى بدونك وينساك
عقب الدلال أصبحت من عدّ الايتام ... ياكثر دمع العين مـن عقب فرقاك
حول الثمان اشهـور وأنا والاحلام ... أقابلك فيها واقبّل محياك
أحلام تنعش خاطري كل ماانام ... وان قمت!ما ألقا غير حزنك وذكراك 





كن لله كما يريد .... يكن لك فوق ماتريد
الكل يريدك لنفسه ... إلا الله يريدك لنفسك


جعل القلب اللي على الطيب رباني يدخل جنان الخلد ويقطف ثمرها
همس الكلام غير متواجد حالياً   رد مع اقتباس
قديم 19-10-09, 12:28 AM   #3 (permalink)

][::.عضو متميز.::][

 
الصورة الرمزية أم مهند
 
تاريخ التسجيل: Apr 2009
الدولة: الأسكنــ(مصر)ــــدرية
العمر: 29
المشاركات: 4,935
افتراضي



__________________

***سيف الدين***
أم مهند غير متواجد حالياً   رد مع اقتباس
قديم 20-10-09, 02:24 AM   #4 (permalink)

][::.عضو متميز.::][

 
الصورة الرمزية المسلم الصغير
 
تاريخ التسجيل: Apr 2009
المشاركات: 3,467
Icon (10)

مشكورة اختى على الطرح المميز

بارك الله فيكى

جزاكى الله كل خير
__________________
المسلم الصغير غير متواجد حالياً   رد مع اقتباس
قديم 19-06-10, 01:21 AM   #5 (permalink)

][::.عضو متميز.::][

 
الصورة الرمزية لولا
 
تاريخ التسجيل: Mar 2009
المشاركات: 9,534
افتراضي

بارك الله فيكى و جزاكى الله كل خير
لولا غير متواجد حالياً   رد مع اقتباس
قديم 20-06-10, 07:58 PM   #6 (permalink)

][::.عضو متميز.::][

 
الصورة الرمزية هنوف
 
تاريخ التسجيل: Dec 2009
المشاركات: 4,904
افتراضي

سلمت يمنااك يالغلا

مشكورة
__________________




الشريفة الهنوف
هنوف غير متواجد حالياً   رد مع اقتباس
قديم 13-09-10, 02:28 PM   #7 (permalink)

][::.عضو متميز.::][

 
الصورة الرمزية هبة الله
 
تاريخ التسجيل: May 2010
الدولة: مصر
العمر: 26
المشاركات: 6,150
افتراضي


الف الف شكر على المجهود الطيب
تعيش وتسلم الايادي
مجهود رائع يستحق التقدير
بارك الله بك
دمت برعاية الله وحفظه
كل احترامي
__________________
<جميع مواضيعى منقولة مالم أذكر غير ذلك>



يظل القلب يذكركم و تبقى النفس تشتاق فيا عجبا ً لصحبتكم لها في الروح أفاق

¨°o.O ( غنى & محبة & مرهفة &هبة الله) O.o°¨




هبة الله غير متواجد حالياً   رد مع اقتباس
قديم 30-01-12, 03:53 PM   #8 (permalink)

][::.عضو متميز.::][

 
الصورة الرمزية المعتزة بإسلامها
 
تاريخ التسجيل: Jun 2011
المشاركات: 5,370
افتراضي

بارك الله فيك يا اخى على البرنامج الاكثر من رائع

__________________

المعتزة بإسلامها غير متواجد حالياً   رد مع اقتباس
قديم 04-02-12, 11:55 AM   #9 (permalink)

][::.الأبحاث والتطوير.::][

 
الصورة الرمزية الأبحاث والتطوير
 
تاريخ التسجيل: Jul 2010
المشاركات: 49
Icon (12) شكرا على هذه المشاركة

أود شكركم على هذه المشاركة المفيدة لأعضاء المنتدى
وبوركت جهودكم
__________________
البحث و التطوير و الإبداع
يقــــودنــا للتميّــــز
الأبحاث والتطوير غير متواجد حالياً   رد مع اقتباس
إضافة رد

أدوات الموضوع
انواع عرض الموضوع

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة
Trackbacks are متاحة
Pingbacks are متاحة
Refbacks are متاحة