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

السفير

*** مثال 4 ***

إتجاه النص Text direction :

لتغيير اتجاه النص .

ملاحظة : نتعرف على المصطلح : bi-directional override واختصاره bdo

أي أن المتصفح فيه التحويل من اتجاه لآخر .

الكود :

نموذج كود

<html>
<body bgcolor="red">


إذا كان متصفحك يدعم تغيير الاتجاهات سيظهر السطر التالي لديك من اليمين لليسار رغم أنه بالانجليزية

<bdo dir="rtl">
Here is some right to left text
</bdo>

</body>
</html>

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

Text direction

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

السفير

***مثال 5 ***

الإقتباس quotation :

وفيه نوعان كما هو مبين بالمثال :

نموذج كود

<html>
<body bgcolor="yellow">

إليكم إقتباس طويل
<blockquote> .هذا اقتباس طويل . هذا اقتباس طويل. هذا اقتباس طويل . هذا اقتباس طويل . هذا اقتباس طويل
</blockquote>
إليكم إقتباس قصير 
<q>
هذا إقتباس قصير
</q>
<big>
مع عنصر الاقتباس الطويل يضيف المتصفح سطرا جديدا وهوامشَ . في عنصر الاقتباس القصير لا
</big>
</body>
</html>

- التطبيق في الرابط التالي :

الاقتباس quotation

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

السفير

السلام عليكم

أدعوكم لرؤية المزيد من التطبيقات هنا :

- عرض لأكواد الحاسب

- اختصارات

- محو واضافة نص

يمكننا رؤية أي صفحة نتصفحها في الانترنت على شكل أكواد html بواسطة اختيار الخيار view عرض

ومن ثم source المصدر وذلك من قائمة المتصفح .

وبالمناسبة هذه الطريقة تفيد في اقتباس صور أو روابط برامج من صفحات لا تتيح للزائر نقلها مباشرة

'> ..

لكن هذه الطريقة لا تنفع دائما .

تحياتي

السفير

السلام عليكم

=== HTML Character Entities

أو كيانات الاشارات في html . ===

بعض الاشارات لها معانٍ معينة في html مثل الاشارة أصغر من > لهذا عندما نقصد

الاشارة بمعناها المتعارف عليه وهو أصغر منه , لا يمكننا كتابتها بنفس الشكل .

* كيف نكتب هذه الاشارات ؟

تتكون هذه الكيانات من :

1. العلامة & ويُطلق عليها اسم ampersand .

2. اسم الكيان ( من حروف) , أو الاشارة # مع رقم الكيان .

3. فاصلة أو فارزة منقوطة وهي كالتالي ; ويُطلق عليها بالانجليزية اسم semicolon .

- كي تظهر لنا اشارة أصغر من بالشكل الذي نعرفه وبمعناه المتعارف عليه نكتب الكيان

التالي :

* فائدة كتابة الحروف بدلا من الأرقام هو أنها أسهل للتذكر .. لكن من سلبياتها أنه ليست

جميع المتصفحات تدعم كيانات الأسماء الجديدة بالحروف .

- رابط للتطبيق :

entities

قائمة بأشهر الكيانات :

وقائمة لكيانات أخرى :

لرؤية القائمة الكاملة لجميع الكيانات يمكن التوجه لهذا الرابط :

قائمة entities

تحياتي

'>

السفير

السلام عليكم

أنصحكم بتحميل البرنامج الموجود في الموضوع التالي فسيفيد من يرغب ببناء المواقع كثيرا :

هنا

في الردود القادمة نتعلم , ان شاء الله , كيفية وضع رابط في ال html ..

تحياتي

'>

السفير

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

نتعلم الآن كيفية إضافة رابط لمستند html

وسم إضافة الرابط يدعى anchor a أو المرساة a ووظيفته انشاء رابط .

والكود يكون على الشكل التالي :

كما تعلمنا من قبل أن هنالك خصائص للوسوم attributes وهنا نرى أن هنالك خاصية

للمرساة a وهي href والهدف منها ايصال الرابط لصفحة أخرى .

=== مثال ===

نموذج كود

<html>
<body bgcolor="yellow">


<a href="http://lexicons.ajeeb.com/">
إضغط هنا<a/> للوصول لموقع المعاجم العربية



<a href="http://www.alfda.com/">
إضغط هنا<a/> للوصول لموقع غزو الفضاء للأخ الفاضل سلامة الرفاعي


<body/>
<html/>

في المثال وضعنا رابطين لموقعين مختلفين هما موقع المعاجم العربية وموقع غزو الفضاء للأخ

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

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

أنشئ روابط Create hyperlinks

لم ننته بعد

'> فقد كان المثال على وضع رابط يوصلنا لموقع آخر في نفس صفحة المتصفح

في الردود القادمة نتعلم كيفية إنشاء رابط لموقع بحيث يفتح المتصفح صفحة جديدة ...

السفير

السلام عليكم

* لإنشاء رابط لصفحة جديدة نستخدم الخاصية :

نموذج كود

"target="_blank>

فيكون شكل الكود هكذا:

مثال :

نموذج كود

<html>
<body>


<a href="http://lexicons.ajeeb.com/"target="_blank">
إضغط هنا</a> للوصول لموقع المعاجم العربية


<body/>
<html/>

عند التطبيق يفتح المتصفح موقع المعاجم العربية في صفحة جديدة وليس بنفس الصفحة .

وأترك لكم تطبيق المثال السابق .

السفير

السلام عليكم

* إضافة رابط على شكل صورة :

يكون شكل الوسم هكذا :

وموقعه داخل المستند هكذا :

=== مثال ===

نموذج كود

<html>
<body bgcolor="orange">

يمكننا أيضا استخدام صورة كرابط,للوصول للمنتديات العلمية إضغط على الصورة
 
<a href="http://olom.f2web.net/ib3/ikonboard.cgi?#34;>
<img border="0" src="http://olom.f2web.net/ib3/iB_html/non-cgi/Skin/Default/images/logo.gif" width="200" height="120">
</a>


<body/>
<html/>

وهنا استخدمنا بانر المنتديات العلمية كرابط للمنتديات العلمية , فتظهر النتيجة كالتالي :

الآن عليكم تطبيق نفس المثال السابق مع إضافة خاصية فتح الموقع في صفحة جديدة

نموذج كود

target="_blank"

* ملحوظة : ماذا لو كان الحد BORDER في خاصية وسم الصورة كرابط لا يساوي 0 ؟

جربوا ':cool:'

ويمكن تطبيق المزيد من الأمثلة في الرابط التالي :

إضافة صورة كرابط

تحياتي

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

'>

السفير

السلام عليكم

وهذا رابط لتطبيق وسم لإنشاء رابط لايميل :

mail link

وهنا أيضا

السفير

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

ننتقل لموضوع جديد في ال html ألا وهو :

=== الإطارات frames ===

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

نموذج كود

ويكون على الشكل التالي :

- النسب المئوية أعلاه تحدد حجم الصفحة الذي سيحتله الموقع .

- نستبدل وسم body بوسم framest .

- وسم framest هو الذي يحوي وسم frame بداخله .

- وسم frame لإطار واحد ضمن صفحة تحوي عدة إطارات .

لو كتبنا مستند ال html التالي :

نموذج كود

بحيث اخترنا 3 إطارات لموقع المنتديات العلمية . وننتبه لخاصية rows داخل وسم framest

حيث أنها تحدد أن الصفحات تأتي على شكل أفقي .

عندما نفتح المستند بواسطة المتصفح , سيظهر لنا التالي :

* ماذا لو إستبدلنا rows ب cols بحيث تظهر الإطارات بشكل عمودي بدلا من أفقي ؟

سنكتب المستند هكذا :

نموذج كود

وبالتالي تكون النتيجة هكذا :

ظهرت الإطارات الثلاثة بشكل عمودي بدلا من أفقي .

* يمكننا التطبيق على الأمثلة أعلاه في الروابط التالية :

اطارات عمودية

إطارات أفقية

يتبع ..

'>

السفير

* يمكننا أيضا أن نضع إطارات عمودية وأفقية بنفس الصفحة :

نموذج كود

في المثال أعلاه إخترنا موقع google كإطار أفقي , وموقعي المنتديات العلمية ودروس ال

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

للتطبيق :

إطارات عمودية وأفقية

السفير

* إطار التصفح Navigation frame :

وهو عبارة عن إطار عادي إضافة لإطار يحوي روابط .

الكود يكون بالشكل التالي :

نموذج كود

ويظهر لنا كما هو بالصورة المرفقة .

ويمكن التطبيق عليه في الرابط التالي :

إطار التصفح

السفير

لا زلنا في الإطارات .. ومع وسم جديد هو وسم Inline frame

وظيفة هذا الوسم هو وضع رابط ومستند Html في نفس الصفحة .

الكود يكون كالتالي :

نموذج كود

<html>
<body bgcolor="yellow">

<iframe src="http://www.qurancomplex.org/IdIndex/default.asp?TabID=1&SubItemID=7&l=arb"></iframe>

بعض المتصفحات القديمة لا تدعم هذا الوسم
 لذلك قد لا يظهر !!

<body/>
<html/>

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

المفهرس لألفاظ القرآن الكريم ..

النتيجة نراها في الصورة المرفقة ..

وللتطبيق على هذا الوسم نتجه للرابط التالي :

وسم Inline

السفير

السلام عليكم

== نلخص ما تعلمناه عن الإطارات ==

- الإطارات هي فتح عدة مستندات أو مواقع في صفحة واحدة .

- وسمها هو framest والذي يحوي عدة إطارات .. ووسم frame هو لإطار واحد .

- تعلمنا الإطارات العمودية مع خاصية الوسم cols والأفقية مع خاصية الوسم rows .

- المزج بين إطارات عمودية وأفقية .

- إطار التصفح Navigation frame وهو فتح إطار عادي لموقع إضافة لروابط .

- إطار inline وهو فتح إطار لموقع + مستند html .

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

هنا

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

تحياتي

'>

bioComputer

ممتاز جدا استادى السفير .... فعلا ترجتمك رائعة .. بانتظار المزيد ان شاء الله ..