مدخل إلى لغة HTML





لغة HTML هي لغة برمجة المواقع الأولى و كل مواقع الانترنيت في العالم تقريبا مبنية أساسا على هذه اللغة

لغات برمجة الويب جاءت كي تسهل و تسرع تصفح المواقع فتخيلو مثلا انو المواقع مبنية بالصور الحقيقية فاننا لما نريد تصفحها نقوم بتحميل تلك الصور و الكتابات حتى نراها و ذلك سيستغرق وقت طويل جدا حتى تستطيع رؤية موقع واحد اما لغات البرمجة فهي مجرد اكواد لما تترجم في المتصفحات ( firefox او chrome ) تظهر لنا لهذا الشكل .
كمثال لنرى مثلا كود صفحة الفيسبوك  ( اضغط ctrl + u )
تظهر صفحة اكود هذا الموقع في هيكلته الحقيقية

ولقد صُـنِـعَـت هذه اللغة من قبل مخترع الويب (Tim Berners-Lee)، ثم طُـوِّرت من قبل منظمة (IETF)، والآن أصبحت منظمة الويب العالمية (W3C) هي الراعية لهذه اللغة والمسؤولة عنها.

مثال


<!DOCTYPE html>
<html>
<body>

 <h1>عنوان عريض</h1>

 <p>فقرة</p>

 </body>

                                                                                                                                            
</html>

كيفية الظهور :

عنوان عريض

فقرة .












شرح المثال :


  • DOCTYPE يمثل التعريف بالملف
  • النص بين <html> و </html > يمثل صفحة الويب
  • النص بين <body> و </body> يمثل الجزء الظاهر على صفحة الويب أو الجزء المرئي
  • النص بين <h1> و </h1> يمثل عنوان عريض
  • النص بين <p> و </p> يثل فقرة

التعريف <!DOCTYPE html> خاص بلغة HTML5 أي الاصدار الاخير للغة HTML

ماهي HTML ؟

HTML هي لغة برمجة من أجل بناء صفحات الويب و تصميم المواقع .
  • Hyper Text Markup Language ( لغة ترميز النصوص التشعبية )
  • HTML هي لغة توصيف النص
  • ملفات HTML تحتوي على وسوم HTML والنص العادي
  • صفحات HTML تسمى أيضا بصفحات الويب

وسوم HTML
رموز لغة HTML المستعملة تسمى بالوسوم "HTML tags" :
  • وسوم HTML هي الكلمات المفتاحية تحيط بها أقواس زاية بهذا الشكل <html>
  • وسوم HTML تأتي عادة في شكل أزواج بهذا الشكل <b> </b>
  • الوسم الأول <b> هو علامة بداية الكود و الثاني </b> هو علامة النهاية
  • يتم كتابة علامة النهاية مثل علامة البداية مع خط مائل قبل اسم الوسم
<الوسم>المحتوى</الوسم>

متصفحات الويب
الهدف من المتصفحات (مثل Google Chrome, Internet Explorer, Firefox, Safari ) هو قراءة ملفات HTML و اظهارهم كصفحات ويب
المتصفح لا يظهر الكود و الوسوم وإنما يستخدم الوسوم لمعرفة كيفية اظهار محتوى صفحة الويب

هيكل صفحة الويب
فيما يلي عرض لهيكلة صفحة HTML بسيطة :

اصدارات HTML
منذ الأيام الأولى من شبكة الإنترنت، وكانت هناك العديد من إصدارات HTML:
الاصدارالسنة
HTML1991
HTML+1993
HTML 2.01995
HTML 3.21997
HTML 4.011999
XHTML 1.02000
HTML52012
XHTML52013

التعريف <!DOCTYPE>

يساعد المتصفح على عرض صفحة الويب بشكل صحيح خاصة اذا كانت تستخدم وسوم جديدة فكما ذركنا سابقا فقد تطورت لغة HTML عبر السنين لنصل اخيرا الى الاصدار HTML5 و XHTML5
هناك العديد من صفحات الويب المختلفة على شبكة الإنترنت، ويمكن للمتصفح فقط عرض صفحة HTML بشكل صحيح بنسبة 100٪ إذا كان يعرف نوع HTML والنسخة المستخدمة.

بعض تعريفات لغة HTML

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


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

انتظرونا في درس قادم فقط على موقع تعلم المصدر الأول للتعلم

تعليقات

إرسال تعليق

المشاركات الشائعة من هذه المدونة

دليلك الى فحص الشبكات والسيرفرات عن طريق أداة Nmap

صورة
من المحتمل أن يكون Nmap أحد أشهر أدوات الفحص الأمني. Nmap عبارة عن أداة مسح مجانية ومفتوحة المصدر للشبكات تم إنشاؤها بواسطة Gordon Lyon. يتم استخدامه لفحص السيرفرات للمنافذ المفتوحة والخدمات قيد التشغيل. في هذا المقال، سيكون لديك فهم كبير لأوامر المسح المفيدة للغاية التي تنفذها Nmap. دعنا نغوص🙂 قبل أن نبدأ، يجب أن أذكر أنه لفهم كامل، تحتاج إلى بعض الأساسيات حول الشبكات، TCP / IP ونموذج OSI. سأستخدم Kali Linux على الجهاز المستهدف Metasploitable. التنصيب: من الواضح أنه قبل استخدام Nmap ، يجب عليك تثبيته أولاً. Centos yum install nmap Debian  apt-get install nmap Ubuntu sudo apt-get install nmap Windows  بالنسبة إلى Windows، ما عليك سوى الانتقال إلى موقع الويب وتنزيله وتثبيته مثل برنامج windows المعتاد. على الرابط: https://nmap.org/book/inst-windows.html الأوامر الأساسية: nmap 10.0.0.5 الأمر الأساسي هو أمر مباشر باستخدام الاداة. فقط اكتب nmap متبوعًا بعنوان IP الذي تريد مسحه. مسح بينغ nmap 10.0.2.0/24 استخدام ال...
قراءة المزيد

دورة HTML - الدرس الخامس ( الصور و الجداول )

صورة
<!DOCTYPE html> <html> <body><p> صورة<img src=" https://www.w3schools.com/html/smiley.gif " alt="Smiley face" width="32" height="32"></p><p> صورة متحركة : <img src=" https://www.w3schools.com/html/hackanm.gif " alt="Computer man" width="48" height="48"></p><p> كود وضع صورة متحركة هو نفسه كود وضع صورة ثابتة</p></body> </html> هنا كيفية ظهور الكود :صورة: صورة متحركة :  كود وضع صورة متحركة هو نفسه كود وضع صورة ثابتة صور HTML - وسم <img> :  في لغة ال HTML نعرف الصور عن طريق الوسم <img> هذا الوسم ليس لديه محتوى و ليس لديه وسم اغلاق كما في الوسوم الاخرى من أجل اظهار الصورة داخل الوسم نستعمل src و هي اختصار ل source و يكون داخلها رابط الصورة الصيغة الخاصة بالصور في لغة html :    <img src=" رابط الصورة " alt=" نص "> في رابط الصورة ممكن ...
قراءة المزيد

تعلم برمجة Pascal الدرس الثالث - المتغيرات و الثوابت

صورة
الدرس الثالث - المتغيرات و الثوابت ماهي المتغيرات؟ المتغيرات عباره عن اسماء تخزّن في ذاكرة الحاسوب . هذا الاسم يستخدم لتخزين المعلومات في الذاكره . يمكننا استخدام انواع مختلفه من المعلومات في المتغيرات , مثلاً الارقام و السلال و غيره . استخدام المتغيرات : يجب دائماً ان نعلن عن المتغيرات قبل استخدامها . نستخدم الكلمه الاساسيه var لعمل ذلك . دائماً يجب اختيار نوع البيانات للمتغير . وهذه هي انواع المتغيرات المختلفه . Byte : من 0 إلى 255 Word : من 0 إلى 65535 ShortInt : من -128 إلى 127 Integer : من -32768 إلى 32767 LongInt : من -4228250000 إلى 4228249000 Real : قيم النّقطة المتغيّرة Char : حرفاً واحداً String : فوق 255 حرف Boolean : true او false في هذا المثال سوف نتعرف على طريقة الاعلان عن متغير من نوع intger اسمه i : program Hello; begin   Write('Hello world'); end. لإعطاء قيمه للمتغير يتم استخدام عامل الاسناد := program Variables; var   i: Integer; be...
قراءة المزيد