نبذة قصيرة عن لغة ال html:
تعد هذه اللغة بنتا لأم اللغات XML
المصنفة تحت اسم اللغات التشعبية ، النصية أو لا أدري ما أسميها لكثرت الترجمات
والتسميات العربية التي تحمل الاسم الإنجليزي Markup languages.
والمعني الصحيح أو تعريف هذه اللغة يكمن في فهم اسمها والوظيفة التي تأديها بدون
اطالة:
الأحرف الأولي ht التي تمثل اختصار للكلمتين أو الكلمة hypertext المقصود من خلالها الطريقة التي تنتقل بواسطتها خلال الشبكة من صفحة
إلي أخري بالضغط على نصوص أو كلمات ذات خاصية مميزة يطلق عليها اسم hyperlinks
تسمح لك بالذهاب أو الابحار لأي مكان في الانترنت بطريقة تشعبية لا تخضع لترتيب
واضح. ههه فلسفة....
حرف ال m اختصار كلمة Markup معني أو اختصار لما تقوم به وسوم هذه اللغة للنصوص المحتوات بداخلها لتعطيها معني خاص وتميزها عن باقي الصفحة؟؟؟
حرف ال L ببساطة هو اختصار لكلمة لغة الإنجليزية وباقي اللغات اللاتينية.
ان لم تفهم التعريف الأول (أقصد من خلال الأحرف) لابد أن تفهم الموجود في الأسطر القادمة أي أن
لغة الhtml بكل بساطة هي اللغة المستخدمة في انشاء صفحات الوب أو الانترنت
التي تراها في كل نافدة من نوافد متصفحك. تتميز هذه اللغة بطابعها السهل المتمثل
في مجموعة من الوسوم سهلة الحفظ والاستيعاب عند جميع الفئات. يحمل كل وسم من هذه
الوسوم معنا خاص يؤثر تأثيرا معينا على ما يحتويه من نصوص، جمل أو كلمات. فمثلا
وسم الرؤوس أو العناوين <h1> يخبر القارئ، محرك البحث، المتصفح أن النص الموجود داخل هذا الوسم
يمثل عنوان، اختصارا، وصفا شيئا ما يعطي نظرة عما يوجد في صفحتنا. وسم الصور <img>
يخبر المتصفح أو محرك البحث أن هذه صورة. ههه بسيط أليس كذلك.
بعد هذه النبدة القصيرة نبدأ بكتابة الهيكل الأساسي والذي تبني عليه أي صفحة أشتمل يمكنك رؤيتها على الشبكة:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<title>برموج</title>
</head>
<body>
</body>
</html>
هذا هو الشكل المتعارف عليه عند جميع المطورين والمصممين، بغض النظر عن بعض الاختلافات الطفيفة التي يمكنك ملاحظتها من صفحة إلي أخري.
بعد وضع الهيكل الرئيسي نقوم بملئه بالأقسام المذكورة سابقا كما هو موضح في الأسفل:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<title>برموج</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="outer-wrapper">
<div id="crosscolPages"/>
<ul>
<li><a href='#'>الرئيسية</a></li>
<li><a href='#'>من أنا؟</a></li>
</ul>
</div>
<div id="header">
<h1>برموج</h1>
<p>مدونة تهتم بلغات الرمجة</p>
</div>
<div id="crosscolLabels">
<ul>
<li><p>دروس</p></li>
<li><a href='#'>نصية</a></li>
<li><a href='#'>صوت وصورة</a></li>
<li><a href='#'>تطبيقية</a></li>
<li><a href='#'>الجديد</a></li>
</ul>
</div>
<div id="main-wrapper">
<div class="posts">
<h2>السلام عليكم ورحمةالله تعالي وبركاته</h2>
<p>السلام عليكم ورحمة الله تعالي وبركاته، إخواني الأعزاء أطل عليكم من نافدة أخري لقبتها برموجا
والتي أرجو الله أن يوفقني لأشبعها مما وهبني ورزقني من علم ومعرفة في علوم الحاسب</p>
<p>ربما يسأل من أطل عى عالم الحاسوب ورأي ما وصل إليه من تطور، السرعةالتي يتطور بها والتي
تفوق جميع العلوم الأخري. يظن أن القطار فاته لواكب هذه القافلة السريعة، فيعجز، يتذمر، تحبط
عزيمته ويبحث عن شيء يمكنه مواكبته أو اللحاق به سواء لجموده أو تطوره المتباطئ. لكنه (السائل؟)
مخطئ في حكمه، في عدوله، في قنوطه وانهزامه السريع أمام علم كان نتاج تحالف أمهات العلوم من
رياضيات، فيزياء وغيرهما (ههه). الحقيقة ياأخي يامن سأل هذا السؤال أو يسأله الآن أو تسأله أثناء
قرآئتك لهذه الكلمات، أوذ منك أن تعرف شيئا عن هذا العالم الجميل.</p>
</div>
<div class="posts">
<h2>السلام عليكم ورحمةالله تعالي وبركاته</h2>
<p>السلام عليكم ورحمة الله تعالي وبركاته، إخواني الأعزاء أطل عليكم من نافدة أخري لقبتها برموجا
والتي أرجو الله أن يوفقني لأشبعها مما وهبني ورزقني من علم ومعرفة في علوم الحاسب</p>
<p>ربما يسأل من أطل عى عالم الحاسوب ورأي ما وصل إليه من تطور، السرعةالتي يتطور بها والتي
تفوق جميع العلوم الأخري. يظن أن القطار فاته لواكب هذه القافلة السريعة، فيعجز، يتذمر، تحبط
عزيمته ويبحث عن شيء يمكنه مواكبته أو اللحاق به سواء لجموده أو تطوره المتباطئ. لكنه (السائل؟)
مخطئ في حكمه، في عدوله، في قنوطه وانهزامه السريع أمام علم كان نتاج تحالف أمهات العلوم من
رياضيات، فيزياء وغيرهما (ههه). الحقيقة ياأخي يامن سأل هذا السؤال أو يسأله الآن أو تسأله أثناء
قرآئتك لهذه الكلمات، أوذ منك أن تعرف شيئا عن هذا العالم الجميل.</p>
</div>
</div>
<div id="sidebar-wrapper">
<div id="search-bar">
<form>
<input type="text" name="word" placeholder="بحث متخصص" />
<input type="submit" value="بحث" />
</form>
</div>
<div id="most-readed-posts">
<h2 class="most-readed-titles">تخصيص قائمة في ال wpf</h2>
<h2 class="most-readed-titles">تخصيص زر في ال wpf</h2>
<h2 class="most-readed-titles">اصلاح مفتاح Usb باستعمال ال cmd</h2>
<h2 class="most-readed-titles">تخصيص نافدة في ال wpf</h2>
<h2 class="most-readed-titles">خدع مشهورة في تطوير المواقع</h2>
<h2 class="most-readed-titles">صنع برنامج بسيط بلغة السي</h2>
</div>
</div>
</div>
</body>
</html>
كان هذا قالب html قاعدي، رغم احتوائه بعض التوضيحات التي تساعدنا في تنسيق صفحتنا مثل التقسيمات بالوسم div والامتدادات id.
أرجو أن تبقوا معنا في المقالات القادمة المدرجة تحت عنوان هذا المقال. يتبع إن شاء الله...........
من فضلك شارك هذا الموضوع اذا اعجبك
