• 0
ahmedsaoud31

بدايتك مع اللغة الهيكلية HTML

سؤال

الحمد لله والصلاة والسلام على رسول الله

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

هذا الدرس ضمن سلسة دروس الدورة التالية لتعلم لغة php

قائمة المطلحات الوارد ذكرها هنا :

tag : وسم

element : عنصر

attribute : خاصية

value : قيمة

سأذكر المصطلح بالعربية وتستطيع الرجوع لهذه القائمة لتعلم ما تدل عليه هذه الترجمة

المتصفح لا يرى أكواد PHP ولكنه يرى أكواد HTML وأكواد التنسيق CSS وأكواد لغة javaScript -يمكنك البدء في تعلمها بعد إنهاء هذه الدورة-

هذه اللغة بسيطة التركيب جداً وعند فهمك لكيفية تركيبها إذاً أنت تخطيت أهم جزء في تعلم لغة HTML والباقي تستطيع التعرف عليه عند الحاجة إليه .

ماهي مكونات هذه اللغة ؟

- ببساطة تتكون هذه اللغة من الثلاث علامات الأساسية التالية < و > و / ومجموعة وسوم

- الصورة العامة لأي وسم تأخذ الصورة التالية :

<tag>

</tag>

ويسمى الوسم <tag> وسم الفتح والوسم </tag> وسم الإغلاق

الآن نريد إنشاء صفحة ويب

ما عليك إلا أن تفتح أي محرر نصوص وتكتب التالي :

<html>

</html>

ويُعرف الوسم السابق html بوسم تعريف وثيقة HTML وعند فتح أي وسم يجب إغلاقه وهذا الوسم يحتوي بداخله جميع وسوم HTML الأخرى

ملاحظة : هناك وسوم لا تحتاج لوسم إغلاق لأنها لايمكن تضمين وسوم أخرى داخلها كوسم السطر الجديد <br>

وبعد هذا نحفظ الصفحة بإمتداد html بهذا أنت أنشأت صفحة ويب فارغة , تستطيع أن تفتحها بإستخدام أي من المتصفحات لديك

ملاحظة: لايهم الكتابة بالأحرف الإنجليزية الكبيرة أو الصغيرة في لغة HTML

كل وسم يمكن أن تكون له بعض الخصائص تختلف من وسم لأخر على سبيل المثال الوسم html له خاصية الـ dir وهي إتجاه الصفحة وتأخذ قيمتين إما "rtl" أي من اليمين إلى اليسار right to left أو

القيمة "ltr" أي من اليسار إلى اليمين left to right

ملاحظة : توضع القيمة بين علامتي إقتباس زوجية أو فردية

إذا أردنا كتابة صفحة ويب باللغة العربية فالأفضل أن يكون إتجاه الصفحة من اليمين إلى اليسار هكذا :

<html dir="rtl">

</html>

والآن نريد أن نكتب شيئ في الصفحة , وسم جسم الصفحة هو الوسم body فالآمن سنقوم بتضمين وسم الـ body داخل وسم الـ html وداخل وسم الـ body نكتب ما نريد هكذا :

<html dir="rtl">

<body>
بسم الله الرحمن الرحيم
</body>

</html>

ملاحظة : يتم تجاهل أي عدد من الأسطر أو المسافات الفارغة إلى مسافة فارغة واحدة

ملاحظة : من الأفضل تنسيق الكود الذي تكتبه ويفضل إستخدام ذر الـtab من لوحة المفاتيح لإزاحة محتويات الوسم للداخل لتوضيح أن هذه البيانات ضمن هذا الوسم -يمكنك تظليل النطقة المراد إزاحتها وتضعط على مفتاح الـ tab -

الآن إحفظ الملف وجرب هذا الكود على المتصفح ماذا ترى ؟

إذا كنت من مستخدمي متصفح IE ربما سيظهر النص عادي معك , ولكن مع باقي المتصفحات سيظهر النص بشكل غريب , نسأل ما هذه المشكلة ؟

ونجيبك أن هذه المشكلة من ترميز اللغة ولكي تظهر اللغة العربية بشكل جيد يجب عليك إستخدام إستخدام ترميز داعم للغة العربية كـ utf-8

فهناك وسم في لغة HTML يسمى وسم الرأس head وهو داخل وسم html وأعلى وسم الـ body ويتم تضمين محتويات ومعلومات الصفحة داخله

ما نحتاجه من هذا الوسم حالياً هو وسم تعريف ترميز الوثيقة ويدعى meta وهو وسم لا يحتاج وسم إغلاق

وعلى هذا يصبح الكود كالتالي :

<html dir="rtl">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>

<body>
بسم الله الرحمن الرحيم
</body>

</html>

ملاحظة: يجب أيضاً أن يتم حفظ الملف بترميز utf-8 إذا كنت من مستخدمي Linux فالإفتراضي هو الحفظ بهذا الترميز ولكن مستخدمي Windwos يحتاجون لحفظ الملف بترميز utf-8

ملاحظة: لحفظ الملف بهذا الترميز على windows من خلال notepad العادي إختر Save As ثم إختر من تبويب Encoding الترميز UTF-8 ولكن البيانات العربية في هذا الملف ستتلف ويجب عليك إعادة كتابتها من جديد ولتلاشي هذا إن كان لديك ملفات تخشى على ضياع بياناتها يرجى إستخدام برنامج notepad++ لعملية تحويل الترميز .

ولكن هناك تعديلات جديدة ووسوم جديدة تم إضافتها وتحسينات كثيرة تم إضافتها للغة الهيكلة HTML في نسختها الجديدة HTML5 فلتعريف وثيقة من نوع HTML5 يجب إضافة الكود التالي في بداية الوثيقة :

<!DOCTYPE HTML>

- وضمن هذه التعديلات تم تعديل وسم الـ meta وأصبح أقصر فقط عليك إعطاء قيمة الترميز التي تريد للخاصية charset وعلى هذا يصبح الكود التالي بهذا الشكل :

<!doctype html>
<html dir="rtl">

<head>
<meta charset="utf-8">
</head>

<body>
بسم الله الرحمن الرحيم
</body>

</html>

وهناك وسم أخر ضمن وسوم الـ head وهو وسم title وهو اسم الصفحة وهو ما تستخدمه للتفريق بين الصفحات إذا كنت تفتح أكثر من تبويب داخل المتصفح , وإن تركت هذا الوسم سيظهر مسار الملف به ويصبح الكود كالتالي :

<!doctype html>
<html dir="rtl">

<head>
<meta charset="utf-8">
<title>
صفحة للتجربة
</title>
</head>

<body>
بسم الله الرحمن الرحيم
</body>

</html>

والآن نريد أن نضيف بعض النصوص والتنسيقات لجسم الصفحة إذاً علينا الإنتقال لداخل وسم الـ body

هناك للعنواين 6 وسوم من h1 إلى h6 يختلفوا عن بعض في حجم الخط

ولدينا وسم الفقرة وهو p ووسم الخط font وكل وسم له خصائصة الخاصة -وهناك خصائص مشتركة طبعاً- ولكل خاصية قيم

بعد تعلمنا لغة التنسيق CSS لن نحتاج لهذه والوسوم

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

<body>
<h1> بسم الله الرحمن الرحيم </h1>
</body>

الآن إستخدم الخاصية align وهي تأخذ عدة قيم هي right و left و center و justify ونحن نريد توسيط محتوى هذا الوسم إذاً سنختار center ويكون الكود كالتالي :

<body>
<h1 align="center">
بسم الله الرحمن الرحيم
</h1>
</body>

والآن سنضع فقرة أسفل العنوان بإستخدام الوسم p وسأستخدم وسم br للنزول سطر جديد داخل الوسم نفسه والكود كامل كالتالي :

<!doctype html>
<html dir="rtl">

<head>
<meta charset="utf-8">
<title>
صفحة للتجربة
</title>
</head>

<body>
<h1 align="center">
بسم الله الرحمن الرحيم
</h1>
<p>
"اللَّهُ لا إِلَهَ إِلَّا هُوَ الْحَيُّ الْقَيُّومُ لا تَأْخُذُهُ سِنَةٌ وَلا نَوْمٌ لَهُ مَا فِي السَّمَوَاتِ وَمَا فِي الأَرْضِ مَنْ ذَا
الَّذِي يَشْفَعُ عِنْدَهُ إِلَّا بِإِذْنِهِ يَعْلَمُ مَا بَيْنَ أَيْدِيهِمْ وَمَا خَلْفَهُمْ وَلا يُحِيطُونَ بِشَيْءٍ مِنْ عِلْمِهِ
إِلَّا بِمَا شَاءَ وَسِعَ كُرْسِيُّهُ السَّمَوَاتِ وَالأَرْضَ وَلا يَئُودُهُ حِفْظُهُمَا وَهُوَ الْعَلِيُّ الْعَظِيمُ "
<br>
سورة البقرة الآية (255)
</p>
</body>

</html>

والتالي هو رابط تنزيل الملف النهائي

test.html

ملاحظة: العنصر في HTML يقصد به وسم الفتح ووسم الإغلاق وما يحويانه معاً , ولكن أنا إستخدم كلمة وسم إذا كانت بدون كلمة فتح أو إغلاق للدلالة على العنصر وما يحويه .

أرجوا أن تكون هيكلة لغة HTML وطريقة كتابتها وضحت للجميع , أهم شيئ هو أن تستطيع التفرقة بين الوسوم وخواصها وما القيم التي تأخذها كل خاصية عند إستخدامها مع وسم محدد .

والآن جاء دور بعض الروابط لكي تستطع أن تطبق أكثير وتتعمق فيما تم شرحه سابقاً :

أولاً: اللغة العربية :

http://www.khayma.co...c/htutor01.html

والتالي رابط تنزيل كتاب بالعربية

learn-HTML-ar.pdf

ثانيا: اللغة الإنجليزية :

http://www.w3schools.com/html

والتالي رابط كتاب جيد بالإنجليزية على موقع Google وبالرابط كتب أخرى مقترحة على نفس الصفحة

http://books.google....=on&redir_esc=y

والآن مع التمارين وإياكم واحد يأتي الدرس القادم بدون حل التمرينsmile.gif

- قم بإنشاء صفحتك الخاصة على ذوقك من خلال ما تم شرحة وإضافة ما تريد من الروابط المرفقة .

- لا تشغل نفسك كثيراً تعلمك لغة التنسيق CSS سيفيدك كثيراً وسيوفر عليك الكثير من إستخدام وسوم HTML وسنتحدث عنها سريعاً الدرس القادم بإذن الله تعالى .

دمتم في أمان الله

تم تعديل بواسطه ahmedsaoud31
7

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

14 إجابة على هذا السؤال .

  • 0

درس ممتاز ... جزاك الله خيرا أخي أحمد ...

أولا ..هذه وظيفتي :


<!doctype html>
<html dir="rtl">

<head>
<meta charset="utf-8">
<title>
وظيفة الدرس الأول
</title>
</head>

<body>
<h5 align="center">
السلام عليكم ورحمة الله وبركاته
</h5>
<h1 align="left" font="modern" color=#126578>
h1 align="left"
</h1>

<br>

<h2 align="right" font="modern" size=5>
h2 align="right"
</h2>

<p align="justify " font="Arial">
شكراً أستاذ أحمد :)
</p>

<br>

<h1 align="center" font="Andalus">
السلام عليكم
</h1>

ادخل إلى الرابط التالي لتعلم تصميم صفحات الانترنت بلغة HTML
<br>
http://www.khayma.com/hpinarabic/htutor01.html
<br><br>
<h3>
رابط الدرس
http://www.arabteam2000-forum.com/index.php?showtopic=273754
</h3>
</body>

</html>

ليست مرتبة .. ولكني سأعيد كتابتها غداً ... بعد التفكير ببعض الأفكار الجيدة ..(غدا ان شاء الله سأعيد تسليم الوظيفة .. بشكل أفضل )smile.gif

أهم شيء عند حفظ الملف يكون utf_8 وإلا لن تظهر الكتابة العربية ...

استفدت من الدرس كثيراً ... جزاك الله خيرا ... وبانتظار درس الCSS عند جهوزه ..

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

بالتوفيق أخي العزيز ..

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

1

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

السلام عليكم

مشاركة أكثر من رائعة ووننتظر الأروع منك عزيزي مصطفى ,

نسيت أن أقول أن وسم الخط واللون والحجم لم يعمل داخل وسم العنوان ... لماذا ؟
- سؤال جيد جداً , وأنت هنا تقصد خاصية الخط واللون والحجم وهذه الخواص تتبع الوسم font

التوضيح التالي يبين العلاقة :

 <tag attribute1="value" attribute2="value">

</tag>

ملاحظة : لكل وسم خواصه الخاصة وربما توجد خواص مشتركة بين كثير من الوسوم

من خواص وسم الـ font التالي :

color : اللون وقيمته إما اللون بالنظام السادس عشر أو اسم اللون بالإنجليزية

face : نوع الخط وقيمته اسم نوع الخط

size : حجم الخط وقيمته من 1 إلى 7

مثال :

<h1>
<font face="Tahoma" color="blue" size="1" align="center">
السلام عليكم ورحمة الله وبركاته
</font>
</h1>

- نلاحظ عدم تطبيق الخاصية align على هذا الوسم لأنها ليست من خواصه ونلاحظ أيضاً تجاهل حجم الخط الإفتراضي للوسم h1 وأخذ قيمة حجم الخط الجديد من خاصية الـ size لوسم الـ font

ملاحظة : هناك وسوم وخواص باسماء مشتركة كـ title فهو وسم كما عرفناه وأيضاً هو خاصية لبعض الوسوم

خاصية الـ title هي الجملة التعريفية التي تظهر عند الوقوف على الوسم بمؤشر الفارة مثال على هذا :

<h1 align="center">
<font face="Tahoma" color="blue" size="1" title="هذا وسم الخط">
السلام عليكم ورحمة الله وبركاته
</font>
</h1>
<h2 title="هذا وسم h2">
الفريق العربي للبرمجة
</h2>

ملاحظة : لغة HTML ليس لها مترجم على المتصفح وبالتالي هي تقبل أي شيئ يُكتب لها وأيضاً هناك ما يعرف بالمعايير القياسية أي المفترض أنها تعمل على جميع المتصفحات والموقع المنوط بهذا هو موقع الـ W3 على الرابط التالي .

ملاحظة : يجب عليك تجربة كودك على أكثر من متصفح لتضمن فاعليته , وهناك إضافة لمتصفح الـ Firefox وهي Agent User Switcher تمكنك من محاكاة باقي المتصفحات ومتصفحات الهواتف أيضاً .

ملاحظة : يفضل إستخدام أحد محررات النصوص الخاصة بلغة HTML للتدقيق والتكملة التلقائية للوسوم وخواصها .

مشاركة رائعة وننتظر منك المزيد وباقي المتابعين

1

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

درس رائع ...

تم تنفيذ التمرين .. في المرفقات ..

تقبل تحياتي :happy:

index.rar

1

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

السلام عليكم

تحياتي لك أخي bahbah كودك أكثر من رائع سلمت يداك

سأترك ترشيح الإجابات مفتوح لمن يريد المشاركة تبعاً

سيتم وضع الدرس الثاني بالمساء بإذن الله

تقبلوا تحياتي أساتذتنا الكرام

دمتم في أمان الله

تم تعديل بواسطه ahmedsaoud31
0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

كما وعدتك أخي أحمد بإعادة تسليم الوظيفة laugh.gif

قمت بقراءة أحد الكتب العربية المتوفرة بكثرة على النت .. لإعادة تنشيط الذاكرة ...وطبقت حوالي ربع الكتاب في هذا الكود :



<html>
<head>
<title>Lesson One</title>
</head>
<body bgcolor=9abcef>
<center>Hello World!</center>

<p align="left">Hello Egypt!</p> <br>

<p align="right">Hello Syria!</p> <br>

<center><h1><a href=#END>Goto The End Of The Page</a></h1></center>

<b>Hello Morroco!</b> <br>

<u>Hello Moritania!</u> <br>

<u><b><i>This </i>Is </b>a Test</u>

<p font size=26pt align="Center">Hello Mr.Ahmad</p>

<pre>This
Is <br>
<font color="145698">Pre TEST</font>
<hr>
! [email protected]$%%)(^*&_)__)</pre>

<center><strike>Strike</strike></center>

<a href="http://arabteam2000.com/index.php">
<img
src="http://www.arabteam2000-forum.com/public/style_images/clean/right.jpg"
align=center alt=ArabTeam2000>
ArabTeam
</img>
</a>
<br>

<a href="http://Google.com">Google</a>

<a href="http://Yahoo.com"><center>Yahoo<center></a>

<br>

<a href="http://w3schools.com"><font color="012345">Learn HTML</font></a>

<h1><a href="http://arabteam2000.com/index.php"><font size=30pt>ArabTEAM2000</font></a></h1>

<br><br><br>

<table border="1" width="400" hight="400">

<caption>Caption For The Table</caption>

<thead>
<tr bgcolor=987654>
<th>Table Head1</th>
<th>Table Head2</th>
</tr>
<!--Comment-->
</thead>

<tbody>
<tr bgcolor=123456>
<td><font color=014785>Table Data00</font></td>
<td>Table Data10</td>
</tr>
<tr>
<td>Table Data01</td>
<td bgcolor=888888>Table Data11</td>
</tr>
</tbody>

<tfoot>
<tr>
<th>Table Foot0</th>
<th>Table Foot1</th>
</tr>

</tfoot>

</table>

<br><br><br><br><br><br><br><br><br><br><br>

<a name=END>End Of Page</a>

</body>

</html>

وننتظر الدرس القادم ...جزاك الله خيراً ..

بالتوفيق ...

تم تعديل بواسطه مصطفى 36a2
2

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0
قمت بقراءة أحد الكتب العربية المتوفرة بكثرة على النت .. لإعادة تنشيط الذاكرة ...وطبقت حوالي ربع الكتاب في هذا الكود :
laugh.giflaugh.gif ربع الكتاب في كود واحد , ده دليل على إنك سخص غير عادي , تحياتي لك عزيزي مصطفى كود أكثر من رائع جمع الكثير الكثير مما لا يسعنا ذكره هنا

هذا ما كنا نريده

الدرس التالي على هذا الرابط

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

مهم جدا وهو ان معظم الخواص مثل خط ولون أصبحت من الماضي والآن جميع الخصائص يتم التحكم بها عن طريق الستايل لذلك أنصح بالإهتمام بهذه الخصائص فقط (بالنسبه للتصميم)

id

class

style

alt

title

هناك خصائص مهمه مثل

href

name

type

...

أما بالنسبه للوسوم فهناك وسوم جديده أرجو التطرق لها بهذه الدوره التي أتمنى أن تكون مرجع لمن يريد تحديث معلوماته القديمه وﻻ تكون لإسترجاع بيانات قديمه ... مثل وسم

header

artical

footer

menu

side

شكرا لك مقدما :)

تم تعديل بواسطه بسام العيساوي
2

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

السلام عليكم

تحياتي لك عزيزي بسَّام , الدورة في الأساس لـ PHP وهذا مدخل لمعرفة هيكلة لغة HTML وكيفية كتابتها للجدد و تم التنبيه على أن هناك وسوم جديدة مضافه دون الدخول في تفاصيل كثيرة , والدرس التالي أيضاً مدخل لـ CSS

بالنسبة لهذا الموضوع من يرى أي إضافة أو رابط أو كتاب سيفيد القارئ فضلاً يضعه هنا ونكون له من الشاكرين

دمتم في أمان الله

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

فيما يلي : مرجع (أظنه كامل ) لوسوم

htmlref.chmHTML4

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

فمن يستطيع رفع مرجع أرجو أن يكون بهذه الصيغة ..

أخي أحمد هل لديك مرجع مماثل لcss ... ( لدي واحد لphp سأرفعه في وقته )

بالتوفيق

والسلام عليكم

2

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

عذرا ...

The <dir> tag is not supported in HTML5. Use CSS instead.

2

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

قام أخي العزيز bahbah برفع المرجع التالي على سيرفر المنتدى ...جزاه الله كل خير

2134100.jpg

وجزاك الله خيرا أخي أحمد ... ثابر

شكرا جزيلا عزيزي bahbah

والله ولي التوفيق

تم تعديل بواسطه مصطفى 36a2
2

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

جميع الألوان التي لها أسماء ...

(مع الشكر الجزيل للأستاذ علي )

NamedColors.pdf

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

2

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

جزاك الله كل خير :) 

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

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

  • يستعرض القسم حالياً   0 members

    لا يوجد أعضاء مسجلين يشاهدون هذه الصفحة .