لغة html

موضوع: لغة html الإثنين مارس 21, 2016 2:22 am

لغة ترميز النص الفائق

[th][ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط][/th]

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] و [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
مقارنة
- [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
- [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
- [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] for
  - [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
  - [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
  - [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
  - [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

هذا الصندوق:

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

الفيزيائي [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

شكل صفحة البرمجة
'لغة ترميز النص الفائق (إتش تي إم إل HTML)، هي [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] تستخدم في إنشاء [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]، وتعتبر هذه اللّغة من أقدم اللّغات وأوسعها استخداما في تصميم صفحات الويب. HTML هيكل صفحة الويب وتعطي متصفّح [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] وصفا لكيفيّة عرضه للمحتوياتها، فهي تعلمه بأنّ هذا عنوان رئيسي وتلك فقرة وغير ذلك الكثير. وتستخدم الـ HTML مايعرف بالوسوم ('tags') لإصدار التعليمات إلى المتصفّح، هذه الوسوم توضع بين علامتى أكبر من '>' وأصغر من '<' الّتي تنقسم إلى نوعين:

وسم البداية كـ ,
,
,
وسم النهاية كـ ,
, ,

بتجميع وسم البداية و وسم النهاية نحصل على عنصر HTML .
تبدأ أكواد HTML بالوسم

الكود:: <html>

، وتنتهى بالوسم

الكود:: </html>

.يقوم [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] بترجمة السطور البرمجيّة بلغة HTML إلى محتوى مرئي سهل القراءة لزوار الموقع.
عرفت لعدم [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] أو لترتيب بعض الخصائص؛لكلّ عنصر HTML خصائص تتحكّم في كيفيّة ظهوره. وذلك لكي تكون عمليّة تصميم المواقع عمليّة سهلة ولينة وبدون أي تعقيدات.HTML من اللّغات المدعومة بمعايير قياسيّة محددّه يفضّل الالتزام بها من قبل W3C فالإلتزام بمعايير الـ HTML أثناء تصميم المواقع يمنح الصفحة قابليّة أكثر للعرض والاستخدام على أنواع وإصدارات مختلفة من المتصفحات. من ناحية أخرى فإن HTML مركبة بشكل نحوي يدعى DOM ؛الّذي يحدّد معيارا للوصول والتلاعب بملفّات HTML ^{[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]}، عمليّة تصميم المواقع مع DOM تجعل صفحة الموقع تظهر وكأنّها شجرة من [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] .

محتويات

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
- [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
- [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
  - [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
  - [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
  - [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
  - [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
- [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
- [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
- [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
- [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
- [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
- [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
- [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
- [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
- [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

تاريخها

الأصول

في عام 1980، قام الفيزيائي Tim Berners-Lee والذي كان عاملا في المؤسسة الأوروبية للأبحا ث النويية [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] باقتراح واعداد نموذج بدئي لنظام يمكن باحثي [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] من استخدام ومشاركة المستندات. وفي عام 1989 قام بكتابة مذكرة^{[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]} يقترح فيها نظام نص فائق hypertext مبني على الإنترنت، وقام بوصف لغة HTML وبكتابة برامج المزود والمتصفح في أواخر عام 1990.
كان اول وصف للجمهور من الاتش تي ام ال وثيقة تسمى علامات الاتش تي ام ال ذكر لأول مرة على شبكة الانترنيت عن طريق بيرنرز لي في أواخر عام 1991. فهو يصف 18 من العناصر الأولى التي تتألف منها , نسبيا التصميم بسيط في الاتش تي ام ال بأستثناء علامة الارتباط التشعبي ,هذه تأثرت بقوة في (الاس جي ام ال كويد) ,اسست ال (الاس جي ام ال ) على شكل وثائق في منزل سيرن . أحد عشر من هذه العناصر لا تزال موجودة في الاتش تي ام ال .
لغة ترميز النص التشعبي هي لغة العلامات التي تستخدم متصفحات الويب لتفسير وتأليف النص والصور وغيرها من المواد في صفحات الويب المرئية أو المسموعة. يتم تعريف وترميز الخصائص الافتراضية لكل بند من الاتش تي ام ال في المتصفح ,وهذه الخصائص يمكن تغيرها او تحسينها بواسطة استخدام مصمم صفحة ويب اضافية من الاسي اس اس . تم العثور على العديد من عناصر النص في عام 1988 (اي اس او ) تقرير التقنية (تي ار 9537) تقنيات لاستخدام (الاس جي ام ال ) الذي يغطي بدوره ملامح اللغات تنسيق النص في وقت مبكر مثل تلك المستخدمة من قبل الأمر الجريان السطحي وضعت في 1960s في وقت مبكر ل CTSS (التوقيت متوافق نظام تقاسم ) نظام التشغيل : وقد استمدت هذه الأوامر التنسيق من الأوامر المستخدمة من قبل عمال التجميع على تنسيق المستندات يدويا . ومع ذلك، يستند مفهوم SGML من معمم العلامات على عناصر ( نطاقات متداخلة مع سمات المشروح ) بدلا من مجرد آثار الطباعة ، مع أيضا الفصل بين هيكل و العلامات ، وقد تم HTML انتقلت تدريجيا في هذا الاتجاه مع CSS . بيرنرز لي يعتبر تطبيق HTML من SGML تم تعريفه رسميا على هذا النحو من قبل فريق عمل هندسة الإنترنت (IETF ) مع منتصف عام 1993 نشر أول اقتراح ل مواصفات HTML : " لغة توصيف النص التشعبي (HTML ) " إنترنت مشروع من قبل بيرنرز لي و دان كونولي ، الذي تضمنت نوع الوثيقة SGML تعريف لتعريف النحوي.

أشهر التعليمات

أساسيات

تعلميات أساسية

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

CSS3 و HTML5نبدأ
بالتعليمة:

هذه التعلمية تستخدم للتعرف على أن الملف بصيغة 5HTML.

نعرف أن اللغة هي HTML بالوسم التالي الذي نغلقه بـ /

فتح وسم البداية
إغلاق وسم النهاية

الرأس والجسد

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

فتح
إغلاق

فقرة

لإضافة فقرة نستخدم الوسم الذي هو من الوسوم التي تفتح وتغلق (من دون فواصل ):
إضافة النص الذي نريده

الترويسات

الترويسات تستخدم غالباً للعناوين، فيما يلي طريقة كتابة الترويسات من الأكبر إلى الأصغر:

ترويسة 1

ترويسة 2

ترويسة 3

ترويسة 4

ترويسة 5

ترويسة 6

مثال عن الترويسة h2:

ترويسة 2

الصورة

هذه من الوسوم التلقائية الإغلاق (لاحظ إغلاقها) أما الـ src لوضع الرابط لمكان تواجد الصورة كالتالي:

الكود:: <img src="image.png" alt="وصف لصورتي"/>

الربط التشعبي

الكود:: <a href="https://www.google.com" title="google">اضغط هنا تذهب إلى جوجل</a>

القوائم غير المتسلسلة

الكود:: <ul>

<li>flower</li>

<li>الله أكبر</li>

<li>محمّد صلّى اللّه عليه و سلّم</li>

</ul>

القوائم المتسلسلة

الكود:: <ol>

<li>flower</li>

<li>زهرة</li>

<li>محمّد صلّى اللّه عليه و سلّم</li>

</ol>

التقسيم و التوزيع

الكود:: وسم البداية <div>

وسم النهاية </div>

نمط العناصر

الكود:: <style color="red" font-family="serief">

محمّد صلّى اللّه عليه و سلّم

</style>

الجداول

الكود:: <table border="1">

    <thead>

        <tr>

            <th>Month</th>

            <th>Savings</th>

        </tr>

    </thead>

    <tfoot>

        <tr>

            <td>Sum</td>

            <td>$180</td>

        </tr>

    </tfoot>

    <tbody>

        <tr>

            <td>January</td>

            <td>$100</td>

        </tr>

            <tr>

            <td>February</td>

            <td>$80</td>

        </tr>

    </tbody>

</table>

محرري WYSIWYG

هناك بعض محرري WYSIWYG ( ما تراه هو ما تحصل عليه ) الّذي يستخدم أن كل كما هو يظهر في ملف HTML.خدمين واجهة المستخدم الرسومية GUI التي غالباً تشبه [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط].
المحرر يعرض المستند بدلاً من إظهار الرموز لذلك المؤلفون لا يحتاجون أن يمتلكوا معرفة شاملة لـ HTML .محرري نمط WYSIWYG انتُقِدوا وذلك أساساً بسبب تدني جودة التعليمات البرمجية المنشأة وهناك أصوات دعت إلى تغيير نموذج WYSIWYG .محرري WYSIWYG لا يزال موضوع مثير للجدل لأنه هناك نظر لعيوبهم مثل:

تعتمد بشكل رئيسي على التصميم بدلاً من المعنى , وغالباً ما تستخدم العلامات التي لا تحمل المعنى المطلوب ولكن ببساطة نسخ تصميم.
غالباً ما تنتج رموز لا حاجة لها ومطولة للغاية التي تفشل في الاستفادة من الطبيعة المتتالية ل HTML & [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]Css.
غالباً تنتج علامات غير نحوية التي تسمى العلامات غير صحيحة دلالياً مثل للخط المائل.

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

انظر أيضاً

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

وصلات خارجية

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] (بالإنجليزيّة) تعلّم كيف تصنع موقع ويب, مجموعة من الدروس المجانيّة في كلّ تقنيّات تطوير الويب. علّم نفسك .
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] (بالعربي) موقع متخصص في مجال التصميم والبرمجة. عالم الجودة في الإنترنات .
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] (بالإنجليزيّة) تعلم البرمجية تفاعليّا، مجانا.

مراجع

[list=references]
[*][ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[*][ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] Tim Berners-Lee, "Information Management: A Proposal." CERN (March 1989, May 1990). [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[/list]

[th][ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]