كيفية انشاء موقع بواسطة لغة html خطوة بخطوة- للمبتئين- الدرس الرابع
السلام عليكم احبتي ورحمة الله وبركاتة , واهلاً وسهلاً بكم في مدونة منوعات .
اليوم سوف نكمل سلسلة لغة html لانشاء موقع
الدرس الرابع من دورة تعلم لغة html :
نبدأ على بركة الله نفتح الملف الذي قمنا بحفظه بصيغة .html لكي نكمل انشاء الموقع .
مراجعة سريعة ماتعلمناه في الدروس الماضية
تعلمنا ان صفحة html تحتوي من رأس (head) و المتن (body) اللذان يحتويان على وسمي البداية والاغلاق , وتعلمنا ايضاً نضع عنوان في جزء (head) بين وسمي البداية والاغلاق لوسم title)) , لكي يظهر في المتصفح عن ارشفة الموقع وظهورة في محرك البحث.
في جسم او متن الصفحة اكتب محتويات صفحتك , وانت تعرف بعض اهم العناصر :
<p>Is used for paragraphs.</p>
<em>Emphasis text.</b>
<h1>Heading</h1>
<h2>Subhead</h2>
<h3>Sub-subhead</h3>
ملاحضة
ان الطريقة الوحيدة لتعلم لغة html هوه بلتجربه و الخطأ كي تتعلم من اخطائك , حاول ان تكرر العمليلة اكثر من مرة حتا تتقنها بصورة صحيحة , ولا داعي للقلق لا يمكنك تدمير حاسوبك او شبكتك من خلال الاخفاق في التجربة , هذه احسن طرية لتعلم .
لا تستطيع تعلم لغة html فقط من خلال الامثل , بل يجب عليك ان تعمل بيدك بشكل عملي حتى تكون الامور واضحة وسهلة وتعلمها بصورة صحيحة لذالك يجب عليك ان تقوم بأختبار نفسك ماتعلمته في الدروس السابقة .
جرب انشاء صفحات بنفسك .اليك مثال
<html>
<head>
<title>My website</title>
</head>
<body>
<h1>A Heading</h1>
<p>text, text text, text</p>
<h2>Subhead</h2>
<p>text, text text, text</p>
</body>
</html>
الان لنتعلم اشياء جديدة هنالك سبعة اشياء يجب عليك معرفتها , اشياءبسيطة :
عندما وضعنا النص بين وسم em >> </em> البداية والاغلاق لتأكيد النص , ويمكنك ان تستخدم تأكيد قوى بحيث يصبح النص بلون غامق , ضع النص بين وسمي البداية والغلق لوسم <strong> النص </strong>
<strong>This should be stronger emphasis.</strong>
سوف يظهر بلون غامق
This should be stronger emphasis.
و لظهور نص بشكل اقل يطريقة مماثل لكن ضع بدل strong ضع small
< small >This should be stronger emphasis.</ small >
سيظهر على النحو التالي
This should be stronger emphasis.
سؤال مهم يتسائل عنه البعض وهو هل بأمكاننا ان نستخدم اكثر من عنصر في نفس الوقت ؟
الجواب : نعم يمكننا ان نستخدم عدة عناصر في نفس الوقت , ولكي نتجنب تداخل العناصر عندك يمكن توضيحها في المثال الاتي :
لتأكيد نص صغير الحجم يجب كتابة الوسوم على النو التالي :
<em> <small>Emphasised small text</small> </em>
وليس بهذه الطريقة :
<em> <small>Emphasise small text </em> </small>
ذكرنا في الدروس السابقة ان هنالك وسوم تستخدم كبداية واغلاق في نفس الوقت <br /> , هذه الوسوم تسمى عناصر فارغة , وهي عناصر غير مرتبطة بلنص بأي طريقة , هي معزولة , كما في المثال الاتي :
Some text<br /> and some more text in a new
Line
سوف يكون النص على النحو الاتي :
Some text
and some more text in a new line
لاحظ ان الوسم كتب بطريقة يختصر فيها وسم البداية والاغلاق في نفس الوقت بوضع مسافة وشرطة امامية في نهاية ,
عنصر اخر مشابة له ايضاً يحوي على وسم البداية والاغلاق في نفس الوقت وهو <hr /> الذي يقوم برسم خط افقي hr )) تعني horizontal rule كما في المثال الاتي :
<hr />
سيظهر الخط بهذا الشكل :
(ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ)
هناك ايظاً عناصر اخرى تحتاج ال وسمي البداية والاغلاق كلاً على حدى – من هذه العناصر , ul,ol,li شنعرف عليهم الان .
ul - هو اختصار لكلمة unordered list )) هوه عنصر يقوم بوضع نقاط لكل بند في القائمة . و ol هو اختصار لكلمة (ordered list ) هو عنصر يستخدم لو ضع ارقام للبنود . اما li في تستخدم مع ul و ol لوضع البنود .
مثال :1
<ul>
<li>A list item</li>
<li>Another list item</li>
</ul>
سوف يظهر على النحو الاتي :
A list item •
Another list item •
مثال 2
<ol>
<li>First list item</li>
<li>Second list item</li>
</ol>
سوف يضهر على النحو الاتي :
First list item .1
Second list item .2
قم بتجربة ما تعلمته في هذا الدرس بنفسك دون الرجوع الى الامثلة .
هذا كل مالدينا لهذا الرس نلقاكم في درس اخر واكثر متعة تابعونا . وصل الله على سيدنا ونبينا محمد واله وصحبة اجمعبن .
تعليقات
إرسال تعليق