Page 1 of 1

مقدمة و أساسيات HTML

Posted: 04 Apr 2017, 23:32:42
by mohamed123
Image

Hyper Text Markup Language
لغة HTML (لغة ترميز النص التشعبي) تستخدم في إنشاء وتصميم صفحات ومواقع الويب، وتعتبر هذه اللّغة من أقدم اللّغات وأوسعها استخداما في تصميم صفحات الويب وتصف بنية صفحات الويب , لكل عنصر خصائصه التي تتحكم في كيفية ظهوره .


يمكن استخدام المفكرة Notepad او برامج تحرير نصوص مخصصة للغات البرمجة مثل Notepad ++ وهي المفضلة لدي واستخدمها ولكن هناك برامج مثل Adobe Dreamweaver تكون متخصصة في كتابة الأكواد لعدة اسباب ومن اهمها انه اذا تم قطع التيار ولم تحفظ ما كنت كتبته فستجده كما هو عند فتح البرنامج .
يمكنك تحميل وتنصيب Notepad ++ من هنا : https://notepad-plus-plus.org/download/v7.3.3.html
Image

النافذة الأساسية :
Image


مثال 1 :

CodeColon Select All Code

<!DOCTYPE html>
<html>
<head>
<title>ABA HTML Basics</title>
</head>
<body>
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>

<p>First Paragraph.</p>

</body>
</html>


الشرح :
Image

<!DOCTYPE html>

يحدد ان الوثيقة من نوع HTML5
Image

ما هو HTML5 ؟
يختلف هذا الاصدار عن باقي اصدارات بأنه تم اصلاح بعض العيوب التي كانت في الاصدارات السابقة وانها تعتمد اعتماد اقل على المكونات Plugins الاضافية لوظائف معينة كما انها متوفرة على جميع الاجهزة وتكون بنفس الكفائة والتجربة النهائية .

<html> وسم البداية
</html> وسم النهاية

الهيكل الأساسي لصفحة الويب
<head> وسم البداية
</head> وسم النهاية

يحتوي على معلومات خاصة بالصفحة كالعنوان ووصف الصفحة
<title> وسم البداية
</title> وسم النهاية

المسئول عن العنوان في شريط المتصفح
<body> وسم البداية
</body> وسم النهاية

تضم محتويات الصفحة .
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>

تستخدم غالبا في العناوين وتختلف في احجامها من h1 الى h6

<p>First Paragraph.</p>

تحدد فقرة نصية
Image

يمكنك الأن حفظ الصفحة من File ثم Save أو بالضغط على CTRL + S ثم ادخل اسم الصفحة وانتبه على ان يكون الملف بصيغة .htm أو .html
Image

قم بفتح الصفحة المحفوظة بأي متصفح مثل : Google Chrome , Mozila Firefox , Opera , Safari , ect
Image

لاحظ احجام العناصر <h1> الى <h6> و العنصر <p> المسئول عن الفرقة النصية

مراجع :
https://www.w3schools.com/
https://ar.wikipedia.org/wiki/لغة_ترميز_النص_الفائق
http://www.makeuseof.com/tag/what-is-ht ... -explains/
http://www.khayma.com/hpinarabic/htutor01.html
https://notepad-plus-plus.org/

[/b]