HTML - الدرس الثالث التعامل مع الروابط Link

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

1 - إضافة رابط عادي الى صفحة الويب ... 
- الوسم <a href="http://My Site">Name of Link</a> يستخدم لصنع رابط في الصفحة وسيتم فتحه في نفس الصفحة .
<a href="https://tech-secu.blogspot.com">open in this page</a>

أما في حال وضع target="_blank" فإن الرابط سيتم فتحه في صفحة جديدة .
<a href="https://tech-secu.blogspot.com" target="_blank">open in another</a>

2 - إضافة رابط على شكل صورة الى صفحة الويب ...
- الوسم
<a href="http://My Site"><img src="MyPhoto.gif" ></a></p>
ويستخدم لإضافة رابط على شكل صورة بحيث ننتقل للرابط بمجرد الضغط على الصورة .
<a href="https://tech-secu.blogspot.com"><img src="http://im73.gulfup.com/xmjJEh.jpg" ></a></p>

- إذا كان حجم الصورة كبير جدا بحيث يغطي الصفحة وأردت التحكم بحجم الصورة يمكن اضافة width="42" height="42" حيث أن width هي العرض و width هي الطول .
- كما يمكن اضافة title="Hacker" لإظهار عنوان عند وضع الماوس فوق الصورة.
<a href="https://tech-secu.blogspot.com"><img src="http://im73.gulfup.com/xmjJEh.jpg" width="42" height="42" title="Hacker"></a></p>

3 - إضافة رابط بريد الكتروني - ايميل ...
- الوسم
<a href="mailto:someone@example.com?Subject=Hello%20Hacker" target="_top">
Send Mail</a>

ويضاف له Subject وهي للعنوان وكما نلاحظ نستخدم %20 بدلاً من المسافة لنتأكد من أن المتصفح سيفهمها ويتعمال معها على أنها مسافة .
<a href="mailto:khaledk98@yahoo.com?Subject=Hello%20Hacker" target="_top"><br /> Send Mail</a>

4 - إضافة رابط للإنتقال من سطر إلى سطر أخر داخل الصفحة ...
- الوسم
<a href="#C4">Go to line 2</a>
        line 1
<a id="C4">line 2</a>
وفي هذا الوسم سينتقل الرابط C4 عند الضغط عليه إلى السطر رقم 2 كما حددنا له في الكود .
مثال : في الكود التالي سنجعل الرابط ينتقل من الرابط في أول الصفحة الى السطر 17 في نهايتها :
<a href="#C4">Go to line 17</a><br /> <h2>line 1</h2><h2>line 2</h2><h2>line 3</h2><h2>line 4</h2><h2>line 5</h2><h2>line 6</h2><h2>line 7</h2><h2>line 8</h2><h2>line 9</h2><h2>line 10</h2><h2>line 11</h2><h2>line 14</h2><h2>line 15</h2><h2>line 16</h2><h2><a id="C4">line 17</a></h2>
و الان عند الضغط هنا سينتقل الرابط الى بسم الله الرحمن الرحيم في اعلى الصفحة

غير معرف

9/01/2014

اقرأ المزيد

HTML - الدرس الثاني التعامل مع الخطوط

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

التعامل مع الخطوط :
تنسيق الخط بشكل عريض مائل منخفض مرتفع ...

- الوسم <b>  </b> لجعل الخط عريض - bold .
- الوسم <strong>  </strong> جعل الخط يبدوا أقوى أو أكثر وضوحاً من الذي حوله .
- الوسم <i>  </i> لجعل الخط مائل - italic .
- الوسم <em>  </em> لجعل الخط مؤكد أو أكثر شدة - emphasized .
- الوسم <code>  </code> جعل الخط (كود) مخرجات كمبيوتر .
- الوسم  جعل الخط منخفض - subscript .
- الوسم  - جعل الخط مرتفع - superscript .
مثال :

<p><b>khaled bold</b></p>

<p><strong>khaled strong</strong></p>

<p><i>khaled italic</i></p>

<p><em>khaled emphasized</em></p>

<p><code>khaled computer output</code></p>

<p>khaled ^superscript text</p>

<p>khaled _subscript text</p>

السيطرة على الفواصل والأسطر والفراغات في الخط ...
- الوسم <pre> </pre> يمكنك من التحكم بالاسطر والفراغات والفواصل .
  لو أردنا كتابة معادلة رياضية أو كود على أكثر من سطر فإننا نستخدم هذا الوسم, مثال :

  <pre>

with pre

for i = 1 to 5

     print i

next i

</pre>

without pre

for i = 1 to 10

     print i

next i

كما نلاحظ في المثال السابق وضعنا كود بين الوسم <pre> </pre>  وظهر بشكل منسق أما الكود الثاني تم وضعه بدون الوسم وقد ظهر بشكل غير منسق وعلى سطر واحد فقط .

وضع خط تحت كلمة أو في منتصف الكلمة أو علامة تحديد ...

- الوسم <del>  </del> لوضع خط في منتصف الكلمة (يتوسط حذف) .

- الوسم <ins>  </ins> لوضع خط تحت الكلمة (تسطير) .

- الوسم <mark>  </mark> لوضع علامة او تحديد نص (تحديد) .

- الوسم <q>  </q> لوضع علامة اقتباس على النص "اقتباس" .
   مثال :

<p><del> khaled del </del></p>

<p><ins> khaled ins </ins></p>

<p><mark> khaled mark </mark></p>

<p><q> khaled quotation </q> </p>

إنشاء قوائم نصية ...
- الوسم <ol>  <‎/ol> لانشاء قوائم مع تعداد رقمي لكل قائمة بإضافة <LI> .
- الوسم <ul>  <‎/ul> لانشاء قوائم نقطية لكل قائمة بإضافة <LI> .
  مثال :

<ol> 

 <li> khaled </li>

 <li>Tech-Secu</li>

 <li>fb.h4cK3r5y573m</li>

</ol>

<ul> 

 <li>khaled </li>

 <li>Tech-Secu</li>

</ul>

- ويمكن تعديل التعداد الرقمي في الوسم <ol>  <‎/ol> الى أحرف انجليزية أو الى أحرف لاتينية بـ :
‎<ol type="i">‎ لصنع قائمة أحرف لاتينية صغيرة .
<ol type="I"> لصنع قائمة أحرف لاتينية كبيرة .
<ol type="a"> لصنع قائمة بتعداد أحرف انجليزية صغيرة .
<ol type="A"> لصنع قائمة بتععداد أحرف انجليزية كبيرة .
- ويمكن تعديل التعداد النقطي في الوسم <ul>  <‎/ul>  الى دوائر ,مربعات بوضع الوسم :
<ul type="circle"> لصنع قائمة نقطية بشكل دائرة .
<ul type="square"> لصنع قائمة نقطية بشكل مربع .
 مثال :

<ol type="i">
 <li> khaled </li>
 <li>Tech-Secu</li>
</ol>
<ol type="I">
 <li> khaled </li>
 <li>fb.h4cK3r5y573m</li>
</ol>
<ol type="a"> 
 <li> khaled </li>
 <li>Tech-Secu</li>
</ol>
<ol type="A"> 
 <li> khaled </li>
 <li>fb.h4cK3r5y573m</li>
</ol>
<ul type="circle">
 <li>khaled </li>
 <li>Tech-Secu</li>
</ul>
<ul type="square">
 <li>khaled </li>
 <li>fb.h4cK3r5y573m</li>
</ul>









أما لبدء تعداد نقطي من رقم اكبر من 1 مثلاً الرقم 5 نستخدم الوسم :
<ol start="5">
اذا اعجبك الدرس يمكن ببساطة حفظه على جهازك من متصفح جوجل كروم بالضغط 
على ctrl+p وسيتم حفظه على جهازك بصيغة pdf .

الدرس الثالث

غير معرف

8/29/2014

اقرأ المزيد

HTML - الدرس الأول للمبتدين

بسم الله الرحمن الرحيم
 
لغة ترميز النص الفائق (Hyper Text Markup Langauge) واختصارها HTML من أقدم اللغات وأوسعها استخداما في تصميم صفحات الويب .
وتستخدم الـ HTML مايعرف بالوسوم Tags لإصدار التعليمات إلى المتصفح، هذه الوسوم توضع بين علامتى أكبر من >  وأصغر من  <  التي تنقسم إلى نوعين :

- وسوم البداية كـ       <html> , <p> , <h1> , <body>  .
- وسوم النهاية كـ       <html> , </p> , </h1> , </body/> .

- الوسم <HTML> لبداية الصفحة و الوسم <‎/HTML> لنهاية الصفحة .
- الوسم <HEAD>  <HEAD/> لبداية المقطع الذي فيه معلومات تعريف الصفحة كالعنوان .
- الوسم <‎/TITLE> <TITLE> وهو لعنوان الصفحة .

- الوسم <BODY> <BODY/> وهو لإدراج نصوص وصور وجداول .. الصفحة .

ملاحظة : اثناء شرح الدروس يمكنك كتابة الاكواد في محرر Notepad الموجود في ويندوز وبعد ذلك حفظه بامتداد htm وفتحه بأي متصفح مثل فايرفوكس او جوجل كروم لتجريب الكود .

الأن لنقم بكتابة اول صفحة ويب باستخدام الوسوم السابقة ونقم بترتيبها من اول الصفحة الى اخرها :

<html>

<body>

<h1>my name is khaled</h1>

<p>my name is khaled</p>

</body>

</html>

وكما قلنا نحفظه بمستند نصي بامتداد htm وثم نقوم بفتحه بالمتصفح وسيكون على الشكل التالي :

نلاحظ في الصفحة أن الوسوم لم تظهر فيها أبداً, وكل ما ظهر هو ما بين الوسوم ونلاحظ أن الجملة الأولى جاءت اكبر من الجملة الثانية حيث أن :
<p/>    <p> و تستعمل لانشاء فقرة في الصفحة ووضعها في سطر خاص .
<h1/>  <h1> هذا الوسم كلما زاد الرقم فيه قل حجم الخط, مثال عليه :

<h1>my name is khaled 1</h1>

<h2>my name is khaled 2</h2>

<h3>my name is khaled 3</h3> 

- الوسم </b> سطر جديد .

- الوسم  <hr/> رسم خط أو سطر في الصفحة .

my name is </br> khaled

<hr/>

my name </br> is khaled

- الوسم  <ul><li>   </ul></li> كتابة نص ذات تعداد نقطي .

- الوسم  <ol><li>   </ol></li> كتابة نص ذات تعداد رقمي .

<ul><li> my name is khaled </ul></li>

<ol><li> my name is khaled </ol></li>

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

اذا اعجبك الدرس يمكن ببساطة حفظه على جهازك من متصفح جوجل كروم بالضغط 
على ctrl+p وسيتم حفظه على جهازك بصيغة pdf .

الدرس الثاني

غير معرف

8/28/2014

اقرأ المزيد