بكل سهولة صمم صفحتك باستخدام لغة HTML

  • ،
بكل سهولة صمم صفحتك باستخدام لغة HTML

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

بكل سهولة صمم صفحتك باستخدام لغة HTML

بكل سهولة صمم صفحتك باستخدام لغة HTML



لغة (HTML)
اختصار ( Hypertext Markup Language)
هى اللغة المستخدمة فى انشاء الصفحات على الانترنت ،وقد تم إصدار أول نسخة من الـ HTML عام 1991 و منذ ذلك الحين واللغة في تطور مستمر حتي صدرت أحدث نسخة و هي HTML5 عام 2012 و التي تحتوي علي العديد من المميزات و الخصائص الجديدة و المفيدة.

مميزات لغة HTML:


لهذه اللغة العديد من المميزات نذكر منها :
1- غير مرتبطة بنظام تشغيل معين وبالتالى فاننا نستطيغ اظار الصفحة المصممة على اى جهاز أيا كان نظام التشغيل الموجود به 
2- يتم تفسير الأوامر مباشرة من قبل المستعرض
3- لاتحتاج إلى أي برامج خاصة للتصميم بل يكفيك برنامج المفكرة الموجود مع نظام التشغيل Windows أو برنامج الدفتر.
4- سهلة التعلم حيث أنه يمكنك بعد درسين أن تقوم بتصميم صفحتك مع هذه اللغة.
5- إن تعلم هذه اللغة تمكنك من إجراء التعديلات التي تريدها على موقعك بكل يسر وسهولة.
6- إمكانية الكتابة باللغة العربية بسهولة.
7- إن معرفتك لوسوم لغة HTML تمكنك من إضافة أي نصوص برمجية بكل يسر إلى صفحتك. مثل نصوص الجافا JAVA البرمجية أو JAVA Script أو نصوص DHTML الهتمل الدنميكية .
8- كذلك تمكنك معرفتك لوسوم هذه اللغة من ترجمة النصوص البرمجية إلى اللغة العربية لكي تستخدمها في صفحاتك بلغتك.
9- تعطيك معرفتك لهذه اللغة تحكماً دقيقاً في خصائص وجزئيات صفحتك أكثر من أي برنامج تصميم صفحات آخر.
10- جميع برامج التصميم الجاهزة مبنية على أساس لغة HTML وهذه اللغة هي القاعدة لمثل هذه البرامج مثل برنامج Front Page والذي هو مبني كلياً على لغة HTML .

أساسيات الكتابة فى لغة HTML:

1- برنامج لكتابة الكود : لايتطلب كتابة ملف بلغة HTML أى برامج خاصة ولكن يحتاج الى برنامج محرر نصوص مثل برنامج الدفتر لكتابة الكود ويحفظ الملف name.htm
2- مستعرض الانترنت لعرض تصميم الصفحة ولايشطرط اتصالك بالانترنت 
3- الأوامر : تستخدم هذه اللغة أوام (tags) وهى مجموعة من التعليمات التى تتيح التحكم فى عرض النصوص والرسومات والجداول وتكتب بالصيغة التالية :
4- <TAG>بداية مايشير اليه الأمر 
Text هو النص الذى سيتأثر بالأمر 
<TAG/> نهاية تنفيذ تأثير الأمر 

أمثلة متعددة لتصميم صفحة معلومات : 

المثال الأول :

انشاء مستند : نفتح برنامج الدفتر أو المفكرة لكتابة الكود كتابة 

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>
<body/>
<html/>

ثم يحفظ الملف بامتداد HTML ويعرض باستخدام مستعرض الانترنت ويكون كالأتى 
My First Heading
My first paragraph.


المثال الثانى:
 الكود يستخدم لعرض أمثلة مختلفة لكتابة العنوان بأنماط مختلفة


This is heading 1 <!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
< h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
<body/> 
<html/> 

وعند عرض الملف فى صفحة المستعرض يكون كالآتى:

This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6

المثال الثالث :


كتابة الفقرات


<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>

التنفيذ :
.This is a paragraph
This is another paragraph

المثال الرابع:
لكتابة الروابط


<!DOCTYPE html>
<html>
<body>
<a href="https://www.bawbat.com">This is a link</a>
<body/>
<html/>

التنفيذ :

This is a link

المثال الخامس :
 ادراج صورة فى الصفحة :
<!DOCTYPE html>
<html>
<body>
<img src="html.jpg" alt="bawbat.com" width="104" height="142">
<body/>
<html/>




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


المثال السادس :
 لعمل ذرار فى الصفحة يستخدم لتنفيذ أو الانتقال الى صفحة أخرى أو الخروج من الصفحة

<!DOCTYPE html>
<html>
<body>
<button>Click me</button>
<body/>
<html/>

وعند التنفيذ :

www.bawbat.com/search?q=بكل سهولة صمم صفحتك باستخدام لغة HTML



المثال السابع:

 عمل قائمة وترقيم نقطى ورقمى :

<!DOCTYPE html>
<html>
<body>
<h2>An Unordered HTML List</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
<ul/> 
<h2>An Ordered HTML List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
<ol/> 

<body/>
<html/>
التنفيذ :

An Unordered HTML List

  • Coffee
  • Tea
  • Milk
An Ordered HTML List
1.     Coffee
2.     Tea
3.     Milk




رسالة ورؤية موقع بوابات كوم

موقع بوابات كوم يحتوى على كثير من المقالات والدروس في عدة مجالات كالعمل الحر والربح من الانترنت والمجالات التعليمية والصحية والرياضية وكذلك مجال شروحات البرمجة والكثير من التصنيفات المختلفة والتي تُغني من يريد انشاء موقع نموذجى رائد عن طرح الاستفسارات والاسئلة التي تتعلق بعالم الإنترنت كما يتميز موقع بوابات كوم أن له فريقً مهمته هي مراجعة كل المقالات المطروحة عليه ولا يتم نشر أي مقال في حالة كان مكررًا أو عديم الفائدة؛ لذلك أي مقال سوف تجده على موقع بوابات كوم سيقدم لك معلومات هامة كتبها مطورون بارعون في أعمالهم، وراجعها ورائهم فريقًا مميزا متخصصا.




شاهد ايضاً البرمجة التعليم
المزيد من البرمجة
المزيد من التعليم