المحرر موضوع: أساسيات في لغة html (زيارة 10118 مرات)

التواق للمعرفة

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

اخي الكريم السفير...

جزاك الله كل خير على هذه السلسلة الرائعة والمفيدة

في انتظار البقية ...

دمت بخير

السفير

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

أخي العزيز الاحيائي .. أخي العزيز التواق للمعرفة .. بارك الله فيكما وشكرا جزيلا لكما

'>

'>

======================

نتعرف الآن على ما يُسمى خصائص الوسوم : Attribute

من الممكن أن تتضمن الوسوم خصائصَ . هذه الخصائص تضفي معلومات جديدة لمستند ال html

في متصفحك .

مثال :

الوسم

نموذج كود

<body>

وهو الذي يعرف فحوى المستند .. يمكننا اضافة خاصية اللون له بحيث يُغير لون خلفية الصفحة .

فإذا أردنا تغييرها للّون الأحمر نكتب الأمر التالي :

نموذج كود

وbgcolor ترمز الى Back grond color أي لون الخلفية . وما بين " و " نضع

اللون المطلوب وهنا إخترنا الأحمر red .

دعونا نجرب المستند الذي جربناه في المثال الأول مع بعض التغييرات :

1. سنضيف له وسما جديدا يجعل الخط سميكا وهو الحرف b من bold وهو :

نموذج كود

2. نغير لون الخلفية بالكود المذكور أعلاه .

فيكون نص المستند كالتالي :

نموذج كود

<html>
<head>
<title>Title of page</title>
</head>
<body bgcolor="red">
السلام عليكم
مرحبا بكم في المنتديات العلمية
هيا نغير لون الخلفية
<b>هذا الوسم يجعل الخط سميكاً</b>
</body>
</html>

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

- خصائص الوسوم تأتي على الشكل التالي :

نموذج كود

name="value"

- خصائص الوسوم نضيفها لوسم البداية فقط .

- هل هنالك فارق بين "red" و 'red' ؟

كلاهما يعطي نفس النتيجة .. لكن في بعض الحالات يجب استخدام ' بدلا من " وذلك حينما

يتضمن الاقتباس نفسه إقتباساً آخرَ .

السفير

السلام عليكم

يمكننا تجربة لون آخر

'> :

مثلا blue بدلا من red

نموذج كود

تكون النتيجة كالتالي:

السفير

السلام عليكم

ونتعرف على المزيد من الوسوم التي تعرّف العناوين .. الفقرات والانتقال لسطر آخر .

===أذكّر أن بعض الأكواد تظهر معكوسة في المنتدى لكنها وقت النسخ واللصق تبقى كما هي
لكن طبعا يجب التمييز ===

* العناوين Headings :

يتم تعريف العنوان بواسطة الوسمين :

نموذج كود

بحيث يُضاف تلقائيا فراغ اضافي قبل وبعد العنوان .

وتكون على الشكل التالي بحيث أن h1 هو أكبر حجم وh6 الأصغر حجما :

نموذج كود

<h1>هذا عنوان</h1>
<h2>هذا عنوان</h2>
<h3>هذا عنوان</h3>
<h4>هذا عنوان</h4>
<h5>هذا عنوان</h5>
<h6>هذا عنوان</h6>

يمكننا كتابة الكود أعلاه وحفظه ( لا ننسى بصيغة html ) ثم نفتحه عبر المتصفح فيكون على الشكل التالي :

*الفقرات Paragraphs :

تُعرّف عن طريق الوسم :

نموذج كود

<p></p>

فيتم تلقائيا اضافة سطر فارغ قبل وبعد الفقرة .

فيكون شكل وسم الفقرة كالتالي :

نموذج كود

احفظوه في المفكرة وجربوه في المتصفح ...

* الانتقال لسطر آخر Line Breaks :

هذا الوسم يأتي منفردا :

نموذج كود

<br>

الهدف منه الانتقال لسطر آخر في نفس الفقرة .

نموذج كود

<p>هذه <br> فقرة<br>مع وسم الانتقال لسطر آخر</p>

وعند كتابة الكود في المفكرة notepad ثم فتحه عن طريق المتصفح سيبدو هكذا :

- بهذا نكون قد تعرفنا على وسوم العناوين , الفقرات والانتقال لسطر آخر .

نتعرف على المزيد في الردود القادمة إن شاء الله .

تحياتي للجميع

e.m.f

السلام عليكم:

مجرد اضافة :

يمكن جعل الخط مائل باضافة وسم i و تحته خط عن طريق وسم u

يبدو ان بعضا من الرموز هي نفسها التي يتعامل معها برنامج الوورد

و هذه محاولة مني في تطبيق الدروس السابقة

':cool:'

السفير

السلام عليكم

ممتاز عزيزي اي ام اف .. ما شاء الله .. كلها كم يوم ونشوف موقعك على الشبكة ':laugh:'

السفير

السلام عليكم

الصفحة التالية من موقع الدروس , بمثابة محرر بسيط للوسوم الأساسية لل html .

هنا

في المستطيل الأيسر كود ال html نكتب في المحتوى ما نريد .. ثم نضغط على الزر المُبين في

الصورة المرفقة .. فيظهر في المستطيل الأيمن ما سيظهر في المتصفح .

ونفس العملية تنطبق على الرابط التالي مع فرق أنه لعرض الفقرات :

هنا

الخالد

السلام عليكم
الأخ العزيز السفير
بارك الله فيك... جهد موفق وعمل رائع.
إلى الأمام دائماً.

تحياتي

المفيد

مشكوور
بارك الله فيك
تحياتي

السفير

السلام عليكم

أخي العزيز خالد .. وبارك فيك .. ألف شكر لك على المرور والرد .. جزاك الله كل خير .

أخي الكريم المفيد وبارك فيك .. شكرا جزيلا لك ودمتَ لنا .

================================

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

أكواد html الى النص العادي الذي سيظهر في المتصفح .. التطبيقات لوسوم تعلمناها وهي :

المزيد من الفقرات , عناوين , الانتقال لسطر آخر وتغيير لون الخلفية :

-المزيد من الفقرات

-الانتقال لسطر آخر line breaks

-عناوين headings

- وهنا محرر لتحويل وسوم تغيير لون الخلفية

=== نتعلم وسوم جديدة : إزاحة العنوان للمنتصف , القاعدة الأفقية والملاحظة المخفية ===

* إزاحة العنوان نحو المنتصف aligned to the center وكوده كالتالي :

نموذج كود

<html>
<body bgcolor="orange">

<h1 align="center">This is heading 1</h1>

<p>العنوان أعلاه أزيح لمنتصف الصفحة
العنوان أعلاه أزيح لمنتصف الصفحة
العنوان أعلاه أزيح لمنتصف الصفحة
العنوان أعلاه أزيح لمنتصف الصفحة</p>

</body>
</html>

لاحظوا أننا غيرنا لون الخلفية للّون البرتقالي .

فيكون الناتج لدينا في المتصفح كالآتي :

محرر لتحويل وسوم إزاحة العنوان للمنتصف

* القاعدة الأفقية لجعل السطور أفقية كما سنراها في المثال التاليhorizontal rule

نموذج كود

<hr>

والرابط التالي محرر لتطبيق أمثلة عليها :

horizontal rule

الكود هو ( وكالعادة نغير لون الخلفية للأصفر على سبيل التغيير )

نموذج كود

<html>
<body bgcolor="yellow">
<p>مثال لتوضيح القاعدة الأفقية</p>
<hr>
<p>هذه فقرة</p>
<hr>
<p>هذه فقرة</p>
<hr>
<p>هذه فقرة</p>
</body>
</html>

سيكون المستند في المتصفح على الشكل التالي :

*وسم الملاحظة المخفية hidden comment :

هي ملاحظات يمكن لمصمم الموقع أن يضعها لنفسه .. لكنها لن تظهر في المتصفح ووسم

الملاحظة المخفية كالتالي :

نموذج كود

يمكن تطبيق أمثلة على وسم الملاحظة هنا

- مهما وضعنا سطورا فارغة وفراغات بين الكلمات ف html سوف تحسبها كفراغ واحد .

لهذا لدينا عناصر الفقرات والانتقال لسطر آخر .

- في عنصر الفقرة يمكن التخلي عن وسم النهاية بحيث تظهر نفس النتيجة , لكننا لن نفعل هذا ,

لأن الاصدارات القادمة من html لن تُخول لنا هذا .

السفير

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

وقفة قصيرة لنتذكر معا ماذا درسّنا حتى الآن ..

- ما هي لغة html وما الفرق بينها وبين اللغات الأخرى وما الهدف منها .

- ماذا يلزمنا كي نبدأ بتعلم ال html من متصفح ومحرر نصوص .. الخ .

- كيف نحفظ ملف html وكيف نفتحه من المتصفح .

- المبنى الأساسي لمستند html .

- وسوم html وخصائصها وعناصر html .

وما تعلمناه من وسوم حتى الآن :

الخط السميك bold

الفقرات paragraphs

العناوين headings

الانتقال لسطر آخر line breaks

القاعدة الأفقية horizontal rule

الملاحظة المخفية hidden comment

إضافة للتغيير في خصائص الوسوم نفسها مثل : تغيير لون الخلفية وإزاحة العنوان للمنتصف .

أرجو أن يكون الشرح مفهوما وألا تكونوا قد أصبتم بالملل

يتبع إن شاء الله

'>

e.m.f

السلام عليكم:

':cool:'

السفير

السلام عليكم

شكرا لك عزيزي أبو مفيد .. بارك الله فيك وتطبيقات ممتازة .

========================

سنتناول الآن 5 أمثلة لأكواد html ثم نرى تطبيقها .. وخلال هذا نتعرف على وسوم جديدة :

*** مثال 1 ***

عرض النصوص بأشكال مختلفة وفيه وسوم للخط المشدد والمائل والكبير والصغير Text formatting :

نموذج كود

<html>
<body bgcolor="green">

<b>هذا خط سميك</b>

<br>

<strong>
نص مشدد
</strong>

<br>

<big>
المنتديات العلمية بنص كبير
</big>

<br>

<em>
نص مؤكد
</em>

<br>

<i>
خط مائل
</i>

<br>

<small>
خط صغير
</small>

<br>

</body>
</html>

- يمكن التدرب عليه في الرابط التالي :

نصوص بأشكال مختلفة

بعد حفظ الكود وفتحه في المتصفح تظهر النتيجة التالية :

السفير

*** مثال 2 ***

نص مع فراغات وسطر جديد line breaks and spaces :

نص مع أكثر من فراع إضافة لسطر جديد ..

نموذج كود

<html>
<body bgcolor="orange">

<pre>
هذا نص
داخل وسم يتيح لنا
أن نضع فراغين
ثم الانتقال لسطر جديد
</pre>

<p>الوسم المذكور أعلاه مفيد في عرض كود حاسب مثل </p>

<pre>
for i = 1 to 10
print i
next i
</pre>

</body>
</html>

- يمكن التطبيق في الرابط التالي :

فراغات وسطر جديد

عند فتح المستند في المتصفح يظهر لنا التالي :

السفير

*** مثال 3 ***

العنوان address :

لكتابة عنوان ما .

نموذج كود

<html>
<body bgcolor="yellow">

<address>
السفير<br>
ص ب 10000000<br>
قسم الحاسب<br>
المنتديات العلمية
</address>

</body>
</html>

- يمكن التدرب عليه في الرابط التالي :

عنوان address

في المتصفح سيظهر لنا المستند أعلاه كالتالي :