بالرغم من أن نظام ووردبريس يسهل عملية إنشاء وإدارة وتعديل مواقع الويب على الأشخاص العاديين الذين لا يملكون مهارات برمجية، إلا أنه من المحتمل جدًا أن يأتي يوم وتحتاج فيه لإجراء تعديلات بسيطة على بعض التعليمات البرمجية للواجهة الأمامية (Front-end) لموقع الووردبريس الخاص بك. عمل هذه التعديلات سيتطلب منك الإطلاع على شرح HTML و CSS ، لذلك من الضروري أن تتعرف على هاتين اللغتين إذا كان لديك موقع ووردبريس، أو إذا أردت إنشاء موقع باستخدامه. سنعرفك في هذه المقالة على أساسيات HTML و CSS، وعلى استخداماتهما، ونوضح لك طريقة عملهما، وكيفية كتابة التعليمات البرمجية (الأكواد) بواسطتهما، كما سنشرح الطرق الصحيحة لتعديل أكواد HTML وCSS في الووردبريس كي تتمكن من إجراء تعديلات على مظهر وشكل الموقع. محتويات المقالة مقدمة إلى لغة HTML ولغة CSS ما هي لغة HTML ولماذا تستخدم؟ ما هي لغة CSS ولماذا تستخدم؟ الشكل العام لأكواد صفحات HTML و CSS طريقة إنشاء ملفات HTML وCSS الشكل العام لكود HTML الشكل العام لكود CSS أمثلة وشرح وتعريف أكثر بالشكل العام لأكواد HTML وCSS أهم العناصر في لغة HTML العنصر html عناصر البيانات الوصفية عناصر تقسيم الصفحة عناصر العناوين عناصر القائمة عناصر الجدول عنصر الصورة عنصر p وعنصر span عنصر الارتباط التشعبي أين يمكن كتابة كود CSS الطريقة الأولى: الكتابة داخل الوسوم (Inline) الطريقة الثانية: الكتابة داخل الملف (Internal) الطريقة الثالثة: الكتابة في ملف خارجي (External) أهم خصائص CSS خصائص الألوان (Colors) خصائص الأبعاد (Dimension) الهوامش الخارجية (Margins)  والداخلية (Paddings) للعنصر  خصائص الحدود (Borders) التعليقات في HTML وCSS مثال على تطبيق بعض خصائص CSS على عناصر مستند HTML الاطلاع على أكواد HTML وCSS في ووردبريس وتعديلها إظهار كود صفحة أو مقالة وتعديله إدراج أكواد CSS مخصصة إظهار أكواد قالب ووردبريس مقدمة إلى لغة HTML ولغة CSS عندما تأخذ القرار للبدء في تعلم البرمجة فإن أول ما تبدأ به غالبًا هو تعلّم تطوير واجهات المستخدم وذلك لأن كلاً من HTML و CSS تعتبران تقنيتين أساسيتين لإنشاء مواقع الويب (الواجهات الأمامية للمواقع على وجه الخصوص)، حيث تهتم الأولى ببنية صفحة الويب وهيكلها، أي العناصر والمكونات التي توجد بها، في حين تهتم الثانية بتنسيق عناصر الصفحة وطريقة عرضها. ما هي لغة HTML ولماذا تستخدم؟ اسم لغة HTML هو اختصار للكلمات التالية ( H yper T ext M arkup L anguage) وتعني بالعربية ( لغة ترميز النص الفائق )، وبالتالي فإن لغة HTML هي لغة ترميز وصفية تستخدم لإنشاء صفحات الويب، ووصف وتحديد العناصر التي تحتويها هذه الصفحات من خلال ما يسمى بالوسوم (Tags) التي يقوم كل واحد منها إما بإضافة عنصر إلى الصفحة أو القيام بغرض آخر متعلق بأحد العناصر الموجودة فيها. على سبيل المثال إذا أردت بناء منزل في مساحة على الأرض فستحتاج إلى العديد من الأغراض لتقوم بعملية البناء، بما في ذلك مكونات الجدران المختلفة، وقضبان الحديد والإسمنت اللذين يستخدمان لبناء سقف المنزل والأعمدة، وما إلى ذلك، فإذا شبهنا المنزل بصفحة الويب المراد إنشاؤها، فإن لغة HTML هي ذلك الشخص الذي مهمته جلب الأغراض اللازمة لإنشاء المنزل ووضعها بترتيب صحيح فيه. ولتوضيح استخدام لغة الترميز HTML بشكل عملي، لنأخذ المثال البسيط التالي: لنفترض أنك تريد بناء صفحة ويب تتضمن 4 أقسام (قسم علوي يتضمن اسم الموقع وشعاره، وقسم سفلي يحتوي مجموعة من الروابط المهمة، وقسم في الوسط يتضمن مقالة وجدولًا، بالإضافة إلى قسم آخر بجانبه يتضمن قوائم متعددة). ستقوم بتحديد أقسام الصفحة وإضافة جميع العناصر لكل قسم منها بما في ذلك نص المقالة، ومحتوى الجدول، وبنود القوائم، والروابط المختلفة باستخدام أكواد لغة HTML المخصصة لذلك. ما هي لغة CSS ولماذا تستخدم؟ اسم لغة CSS هو اختصار للكلمات الثلاث التالية ( C ascading S tyle Sheets)، وتعني بالعربية (أوراق الأنماط المتتالية) ، وهي عبارة عن لغة تنسيق تستخدم لتنسيق العناصر التي تعرض على صفحة الويب وتحديد طرق وأشكال ظهورها والتصميم الذي ستظهر فيه في المستعرض، أي أنها تستخدم لتحديد ألوان وأبعاد العناصر، وعرض حدودها، كما تحدد مواضعها وكل الخصائص الأخرى المتعلقة بكيفية ظهورها على صفحة الويب. بالعودة إلى مثال بناء المنزل الذي أوردناه في الفقرة السابقة، فإذا كان المنزل هو صفحة ويب، فإن لغة CSS تستخدم لتحديد ألوان جدران المنزل، وأشكال الغرف ومساحاتها، وأماكنها ضمن مساحة المنزل، بالإضافة إلى أشكال الأغراض الموجودة في تلك الغرف وأماكن توضعها، وغير ذلك من الخصائص، أي يمكن تشبيهها بالتقنية التي يستخدمها المهندس المعماري ومهندس الديكور لتخطيط المنزل وتصميمه بالكامل. ولتوضيح استخدامات لغة CSS وما يمكن القيام به باستخدامها، إليك صورة توضح تأثير إضافة أكواد CSS على شكل صفحة HTML الرئيسية لموقع ووردبريس بالعربية، حيث يظهر في يمين الصورة الجزء العلوي من الصفحة الرئيسية لموقع ووردبريس بالعربية دون استخدام أكواد CSS (تم إظهار العناصر الموجودة في الصفحة باستخدام HTML)، في حين يظهر في الجزء الأيسر شكل الصفحة نفسها بعد إضافة أكواد تنسيق إليها لتعديل أشكال عناصرها وتجميلها باستخدام CSS. نلاحظ من خلال الصورة السابقة أهمية لغة CSS، فالصفحة الموجودة في القسم الأيمن والمكتوبة باستخدام لغة HTML فقط تفتقد للعناصر الجمالية وتبدو غير جذابة للزائر، وبالتالي فهي لا تشجع الزائر على تصفح الموقع والاطلاع على محتواه. في حين أن الصفحة الموجودة في القسم الأيسر، والتي تم إضافة أكواد CSS إليها لتجميل مظاهر عناصرها تبدو أجمل بكثير، وتدفع الزائر إلى تصفح محتوى الموقع والاطلاع عليه. إذًا نستنتج مما سبق أن كلاً من HTML وCSS هما تقنيتان متكاملتان ومهمتان لإنشاء صفحات الويب وإظهارها للمستخدم بشكل جميل وجذاب ومنظم. ولكل واحدة منهما وظيفة معينة، ولا يمكن بناء صفحة ويب احترافية باستخدام إحداهما دون الأخرى. من المهم أن نشير إلى وجود تقنيات برمجية أخرى أساسية لتصميم وإنشاء المواقع على ووردبريس لكننا لن نتطرق لها في مقالنا هذا وهي: لغة JavaScript: التي تستخدم لجعل صفحات الويب تفاعلية، أي لجعل عناصر الصفحة المختلفة تتصرف بناء على تفاعل المستخدم معها، كأن يصبح حجم الخط أكبر عندما يضع المستخدم مؤشر الفأرة فوقه مثلاً. لغة PHP: التي تستخدم لتطوير الواجهة الخلفية (Back-end) في ووردبريس وتمكنك من إنشاء وتعديل الإضافات والقوالب. حيث يتم تمكين كل شيء في الإضافات بواسطة كود PHP، كما أن كافة وظائف القالب تكون مكتوبة بلغة PHP. لذا فتعلمها يكسبك مهارة كبيرة في تطوير ووردبريس. الشكل العام لأكواد صفحات HTML و CSS إن التعليمات البرمجية لصفحات الويب المكتوبة باستخدام HTML وCSS لها شكل عام،وعندما تقوم بقراءة أكواد إحدى صفحات الويب ستلاحظ هذا الشكل غالبًا. كذلك توجد عدة أماكن يمكنك فيها كتابة أكواد CSS التي تحدد مختلف خصائص العناصر الموجودة في الصفحة، فقد تكتب ضمن المستند نفسه الذي تكتب فيه أكواد HTML والذي يسمى صفحة HTML أو مستند HTML) HTML Document) أو تكتب في مستند آخر منفصل ويتم ربط هذا المستند بصفحة HTML عبر كود مخصص كما سنتعلم لاحقًا. قبل أن نوضح الشكل العام لكود HTML وCSS تجدر الإشارة هنا إلى أن أكواد كل من اللغتين يمكن أن تكتب ضمن مستند عادي باستخدام أي برنامج لتعديل النصوص (المفكرة مثلًا)، لكن توجد برامج متقدمة تسهل كتابة الأكواد بشكل كبير، ويكون امتداد المستند الذي يكتب فيه كود HTML هو html. والمستند الذي يكتب فيه كود CSS هو css. وفي الفقرة التالية سنقدم لك شرحًا مصورًا لطريقة إنشاء ملفات HTML و CSS على حاسوبك الخاص الذي يعمل بنظام ويندوز من خلال تطبيق المفكرة. طريقة إنشاء ملفات HTML وCSS لإنشاء ملف HTML أو CSS اتبع الخطوات التالية: قم بإنشاء مستند نصي جديد في المسار الذي تريده (على سطح المكتب مثلًا) بالطريقة المعتادة، أي عبر النقر في مكان فارغ باستخدام زر الماوس الأيمن، ثم اختر الأمر (جديد) من القائمة المنبثقة التي تظهر، ثم انقر على خيار (مستند نص). سيطلب منك النظام كتابة اسم المستند، قم بكتابة الاسم الذي تريده، وغير امتداد الملف (ما هو مكتوب بعد النقطة) من (txt) إلى (html) كما توضح هذه الصورة سيظهر لك مربع حوار يسألك فيما إذا كنت تود فعلًا تغيير امتداد الملف (هو نفسه ملحق اسم الملف)، قم بالنقر على زر (نعم) سيتم تعديل اسم الملف وامتداده تبعًا لما أدخلته، وسيتعرف نظام ويندوز على هذا الملف على أنه مستند HTML (أي صفحة ويب). يمكنك الآن أن تقوم بفتح الملف باستخدام أحد متصفحات الإنترنت من أجل عرض صفحة HTML كما ستظهر للزائر في حال تم رفعها إلى موقع الويب. وفي حال أردت الدخول إلى كود HTML الخاص بالصفحة من أجل الاطلاع عليه أو تعديله، يمكنك القيام بذلك من خلال فتح المستند باستخدام محرر النصوص (المفكرة). بالطبع سيكون المستند فارغًا من الكود بعد إنشائه مباشرة، وسيعرض المتصفح صفحة فارغة عند استعراضه. لإنشاء ملف CSS، نفذ الخطوات السابقة نفسها مع كتابة css بدلًا من html كامتداد للملف. لكن انتبه لأن ملفات CSS هي ملفات تحدد خصائص العناصر الموجودة في مستند HTML مرافق، أي لا يمكن عرضها باستخدام المتصفح، لكن يتم ربطها بصفحة HTML عبر كود مخصص. وبالتالي عندما تقوم بفتح مستند HTML باستخدام المتصفح، يقوم المتصفح تلقائيًّا باستدعاء ملفات css ويطبق ما كتب فيها من خصائص على العناصر الموجودة في مستند HTML وهكذا يتم إظهار الصفحة بالطريقة التي حددتها باستخدام أكواد HTML وCSS معًا. الشكل العام لكود HTML تتألف أكواد صفحات الويب المكتوبة باستخدام HTML من عناصر (Elements)، وقد يتم تضمين عنصر ما ضمن عنصر آخر، ويأخذ كل عنصر أحد شكلين عامين، هما: Content Where (Start) represents the start tag, (End) represents the end or closing tag, (Content) represents the content of the element (which may include other elements within it), (Attribute) represents the name of one of the properties of the element, and (Value) that follows it represents the value assigned to this property, and the three dots (…) indicate the possibility of specifying the values ​​of several properties for one element. Note: The End tag name is the same as the Start tag name with the prefix / before it. If Start is h1, End will be h1/. Second form: or The words in this figure represent the same things as they represent in the first figure. But notice here that there is no end tag for the element that is written in this form, unlike the previous form. Note: In the previous two figures, one or more properties may be written, or none may be written, and the properties that can be written vary depending on the element. But there are some general properties that can be written in all elements, and some properties are optional and others are mandatory, that is, some are written when needed, and others must be written in order for the element to function correctly. The general form of CSS code: With regard to CSS code, it is written in exactly the same way regardless of where you choose to write it (whether in the same HTML document or in another document), but the method used to determine that this code is CSS code for the browser differs depending on the way the CSS code is written, and we will explain this later. CSS code consists of rules, which correspond to elements in HTML. The form of a rule in CSS is as follows: Selector { Property: Value; Property:Value; ... } Where the word Selector here symbolizes the selector, that is, a word is written in its place that indicates that what will be written after between the brackets {} will be applied to a specific element or group of elements present in the HTML document. There are several ways to write the determinant. The word (Property) refers to a property in CSS, and the word (Value) refers to the value that we assign to the property. Note that the property and its value are separated by two colons (:) and an English semicolon (;) is placed after each property value, and the next property is written after the semicolon. If you want to start developing user interfaces through an integrated educational course, you can purchase the user interface development course at Hassoub Academy, which provides 54 hours of training with support and guidance from a specialized team that helps you from the beginning, and at the end of the course you will obtain an accredited certificate from Hassoub Academy. Examples, explanation, and more definition of the general form of HTML and CSS codes. Based on the above, an HTML document consists of a set of elements (Elements) according to what the web page needs. These elements do not necessarily have to be the same for all pages, and a CSS sheet consists of a set of rules (Rules) as needed. Each of the following is an example of elements in an HTML document:

My paragraph

My Heading

My Heading

My paragraph.

In the first three examples, the words colored blue are the beginning and end tags of the elements, and Page Title, My Paragraph, and My Heading represent the content of the element. As for the last example, we have an element with two elements inside it, so what is colored in blue are the start and end tags of the element that contains the other two elements, and the other two elements with their contents and labels (the tags of these two elements are colored in yellow and pink) constitute the content of the element that contains them. Each tag performs a specific task, which is to insert an element on the page. For example, the p tag adds a paragraph to the page, meaning that the content written between >/p< و >p< تتم إضافته إلى الصفحة على أنه فقرة نصية،في حين يقوم الوسم h1 بإدراج عنوان في الصفحة، أي ما يوضع بين >h1< و >/h1< تتم إضافته إلى الصفحة على أنه عنوان. لاحظ في الصورة التالية كيف يعرض مستعرض الويب (جوجل كروم) العنصرين الثاني والثالث من الأمثلة الأربعة السابقة. سنشرح فيما بعد جميع الوسوم الهامة في لغة HTML، بما في ذلك أوسمة القوائم والجداول والصور والروابط التشعبية، وغير ذلك. وفيما يلي مثالان عن القواعد التي تتكون منها ملفات CSS: p {background-color:red; color:white;} h1 {background-color:green; color:red;} في المثالين السابقين، تقوم كل قاعدة من القاعدتين بتطبيق مجموعة من الخصائص على عناصر محددة في مستند HTML، فالقاعدة الأولى يتم تطبيقها على الفقرات الموجودة في الصفحة بسبب كتابة المحدد p في بدايتها، وهذا المحدد خاص بالفقرات في ملف HTML، أما القاعدة الثانية فيتم تطبيقها على العناوين h1، فقد تم وضع المحدد h1 في بدايتها. هناك خاصيتان مذكورتان في المثالين السابقين، الخاصية الأولى هي (background-color) وهي تحدد لون خلفية العنصر وقد أخذت هذه الخاصية في المثال الأول القيمة (red)، وبالتالي سيكون لون خلفية الفقرات في مستند HTML عندما يتم عرضه باستخدام المتصفح أحمر، وفي المثال الثاني أخذت الخاصية القيمة (green) ولهذا سيكون لون خلفية العناوين h1 أخضر. الخاصية الثانية المذكورة هي (color)، وهي تحدد لون النص في العنصر، وبالتالي سيكون لون نصوص الفقرات في مستند HTML أبيض لأن الخاصية أخذت القيمة (white) في المثال الأول، ولون نصوص العناوين h1 سيكون أحمر لأن الخاصية أخذت القيمة (red) في المثال الثاني. لاحظ كيف يظهر مستند HTML السابق عند عرضه في المتصفح بعد ربط ملف CSS الذي يحتوي المثالين السابقين به. تجدر الإشارة أيضًا إلى أنه توجد الكثير من الخصائص في CSS التي يمكن تطبيقها على عناصر HTML لتغيير خصائصها، وسنأتي على ذكر أهم هذه الخصائص فيما بعد. أهم العناصر في لغة HTML ذكرنا سابقًا أن صفحة HTML تتكون من عناصر، ويضم كل عنصر وسم بداية دائمًا، وفي كثير من الأحيان يضم وسم نهاية، والوسم هو الذي يحدد نوع العنصر الذي سيظهر للزائر في المتصفح، فإذا أردت إدراج عنصر الجدول في المستند، ستستخدم وسمًا (أو مجموعة وسوم) مختلفة عما إذا أردت إدراج عنصر القائمة. سنشرح في هذه الفقرة أهم العناصر الأساسية التي تمكنك من قراءة وفهم ملفات قوالب ووردبريس المبنية باستخدام HTML، لكننا سنذكر لك في نهاية هذه الفقرة مصدرًا يتضمن جميع عناصر وخصائص HTML وشرحًا مفصلًا وأمثلة عنها إذا أردت احتراف هذه اللغة بالكامل. لكن قبل شرح عناصر HTML، نود لفت الانتباه إلى أن مستندات HTML تبدأ بالكلمة (Doctype)، وهذا ليس عنصرًا أو وسمًا إنما هو تصريح (Declaration) يخبر المتصفح أي إصدار من HTML تم استخدامه لكتابة المستند، ولكل إصدار شكل محدد من هذا التصريح. على سبيل المثال التصريح التالي يخبر المتصفح أن هذا المستند مكتوب بأكواد الإصدار الخامس الأكثر حداثة من لغة HTML: While this declaration tells it that the document is written in HTML 4.01 Strict: The html element The html element is the root element in the document, meaning this element must include all the other elements of the HTML document, and that is why you will notice that all HTML pages are in this form: [All elements of the HTML document are written here between the start tag and the end tag of the html element] Metadata Elements These elements contain the document's metadata (i.e., their function is to identify it), including the document title, links to scripts, CSS file pages, and more. The following table shows the most important metadata element tags in HTML: The previous metadata elements are used within the HTML document, as in this example: Explanation and comment on the previous example: head acts as a container for other meta elements, as these tags are included within it. title is used to specify the page title that will appear in the tab in the browser, as the title is placed between the start and end tags. meta in order to specify different metadata for the page. Note that the meta element does not have an end tag, and the metadata value is specified by the content property of the tag, while the data type is specified by the name property. The charset property is used to specify the character encoding of a document. link is used to inform the browser that there is a format file written using CSS linked to this document, where the rel property is given the value stylesheet to specify that the external file linked to the HTML document is a format file, and the href property is given a value equal to the path or link of the linked file. Note that the link element does not have an end tag. style in order to write CSS code inside an html document, as the content written between the beginning and end tags of the style element is code written in the CSS language. Page division elements There are some elements in HTML that are used to divide the page and organize its content, and the most important of these elements are shown in the following table: Note: All previous elements have a start and end tag, because they represent specific sections on the page. This image shows what each of the previous elements represents on the page as they appear in the browser: In the previous image, we would like to draw your attention to the fact that all the elements within the rectangle that refers to a specific section are within the start and end tags assigned to that section. For example, all the elements within the rectangle that refers to the section footer are within the start and end tags of the >footer tag.< في كود الـ HTML. ملحوظة: يمثل العنصر body كامل الصفحة وهو يتضمن كامل الأقسام الأخرى للصفحة. وأحد الأمثلة عن الأقسام التي يمكن أن يتضمنها هو ذاك القسم العلوي في الصورة السابقة الذي يكون محتوى للوسم >header< وهو يضم بداخله كلًا من شعار الموقع، والقائمة العلوية، وأيقونات حسابات التواصل الاجتماعي، وزر البحث، والذي يظهر في الصورة التالية. الجدير بالذكر أيضًا أن هناك عنصرًا هامًا يسمى div وهذا العنصر يستخدم لاحتواء عناصر أخرى ويساعد على تقسيم الصفحة أيضًا. لا يمثل هذا العنصر قسمًا معينًا مثل رأس الصفحة أو ذيلها وما إلى ذلك، إنما يمكن استخدامه لتمثيل أي قسم من الصفحة وفي أي مكان، ويعد هذا العنصر من أكثر العناصر استخدامًا في أي صفحة ويب، لأنه يساعد على تنظيم البيانات وفصلها عن بعضها ويسهل عملية تنسيقها باستخدام لغة CSS. عناصر العناوين تستخدم عناصر العناوين في HTML لتحديد العناوين في الصفحة وإبراز الموضوعات المهمة فيها، حيث تستخدم لإدراج عنوان المقالة، والعناوين الفرعية وما إلى ذلك، وتعتبر العناوين في صفحة Html مهمة للزائر وكذلك لمحركات البحث، حيث تستخدمها محركات البحث لفهرسة صفحة الويب. توجد 6 عناصر خاصة بإدراج العناوين في HTML وجميعها لها وسم بداية ووسم نهاية، حيث يتم وضع العنوان النصي بين الوسمين كمحتوى للعنصر، وتأخذ جميع عناصر العناوين الشكل نفسه مع تبديل رقم الوسم الخاص بالعنوان. فمثلًا العنوان من الدرجة الأولى (العنوان الأساسي للمقالة مثلًا) له الوسم h1 والعنوان من الدرجة الثانية له الوسم h2.. والعنوان من الدرجة السادسة له الوسم h6، علمًا أن متصفح الويب يظهر العنوان ذو الرقم الأقل بخط أكبر من العنوان ذو الرقم الأصغر، فعلى سبيل المثال يظهر المتصفح الكود التالي كما توضح الصورة التي بعده:

H1 title

H2 title

H3 title

H4 heading

H5 title

H6 title

It should be noted that the font sizes of headings in an HTML document can be changed using CSS code using the font-size property. List Items Several types of lists can be inserted into a web page using HTML, the most important of which are (numbered list and unnumbered list). The tag of the numbered list item differs from that of the unnumbered list, but the tag of the list item items is the same in both cases. The following table explains the functions of the three main elements related to lists in HTML. To illustrate how to use the list in HTML, see the following code, then read the explanation below, then see how the browser displays it on the web page by default.

The largest country in the world by population

1. China
2. India
3. US
4. Indonesia

The most important social networking sites and applications

• Facebook
• Twitter
• Instagram
• WhatsApp

An explanation and comment on the previous code within the body element on the HTML page. We inserted a title (the largest countries in the world in terms of population) using the h2 element, then we included a numbered list after it, where we specified the beginning of the list with the start tag of the ol element, and its end using the end tag of the ol element, and we included each item in the list using the li element. In the same way we insert another heading using the element h2, and an unnumbered list using the element ul. The browser will show the previous code as in this image. It is worth noting that the shapes of the dotted list points can be changed to other shapes or even deleted using the CSS language, and the locations of the list items can also be changed and placed next to each other instead of their default arrangement, one item under the other. You can also change the way the numbered list is numbered. We would also like to point out that the HTML language supports adding another type of list called description lists, which are lists in which each item consists of a term and a description. The dl element is used to insert this type of list, and the dt and dd elements are used to insert its terms. The first of them is used to insert the term, and the second to insert its description. The description appears in a way that differs from the way the term appears. The following example explains how to use description lists in HTML, and how this type of list appears to the visitor. The following code inserts a description list consisting of 3 items, each of which consists of a term and a description for it. The image after the code shows how the browser displays this list.

The most popular drink in the world

Water

- A transparent substance that has no colour

Tea

- A drink made from tea leaves

Coffee

- A drink prepared from roasted coffee seeds

Explanation of the previous code: Within the body element, we used the h1 element to insert a first-class title, then we used the dl element to insert a description list, and within this element we included 6 elements, where we added the dt element, which adds a term, then the dd element, which adds a description to it, and we did this again twice more to add 3 items, each of which consists of a term and a description. The browser will show the previous code to the visitor, as in this image. Table elements In some types of websites and some pages in particular, it is preferable to include tables to organize data and make it easier to understand and display. There are special elements in HTML that allow a table to be inserted into web pages. Typically, several elements within a main table element are used to define a table's rows and cells and insert data into them. The following table describes the elements you may need to insert a table into an HTML document. To clarify table elements in HTML, here is the following code, which inserts a table with 3 columns and 4 rows, where the cells of the top row are title cells, and the rest of the cells are regular.

Ranking	the name	the age
1	Ahmed	25 years old
2	Sami	29 years old
3	Othman	21 years old

Explanation of the previous code within the body element in an HTML document. We inserted a table element to insert a table into the document, so we wrote the start and end tags for the element, and between the two tags we inserted 4 tr elements to insert 4 rows in the table, and within each element we added 3 th or td elements to insert row cells in order, so the browser translated the code for us into the result shown in the following image when the document was opened using it. Notice in the previous image that the table appeared on the web page without any cell borders, and its default direction is from left to right, which is not appropriate for the Arabic language. The problem of orientation of a table or almost any other element in HTML can be solved by assigning the rtl value to the dir property of the element itself, the element it contains, or the body element. In the previous code, assign the required value for the relevant property to the body element on the first line, so that the line becomes as follows: Then save the HTML document, reopen the page with your browser or refresh it and see how the orientation (and location) of the table changes. To solve the problem that the edges of the table and its cells do not appear on the HTML page, we use the CSS language. We create a CSS file and link it to the HTML document (we will explain how to do this later), then we put the following CSS code in it: table, th, td { border: 1px solid #ccc; } We save the changes made to the files, then refresh the page in the browser window, and we notice that the borders of the table and its cell borders have appeared. It is worth noting that there are many procedures that can be applied to tables in HTML documents, using HTML or CSS, but explaining them requires a separate article, so we will limit ourselves to the basic matters that we explained in this paragraph. The image element: Images are an essential component of web pages, and almost no website is devoid of images because of their many benefits, including clarifying ideas, condensing texts, and so on. That is why HTML provides the ability to easily insert images into web pages by using the img element, which only has a starting tag. In order for the img element to recognize the image you want to insert on the page, you must specify its path by using the (src) property, and you can also specify alternative text for the image by using the (alt) property. That is, the general form of the Insert Image element in the HTML document will be as follows: It should be noted that the image path must be specified correctly in order for it to appear on the web page when it is opened. If the image is not located in the correct path that was specified, the browser will not show the image, but rather will show its alternative text in its place. As an example of adding an image to an HTML document, here is the following code, which adds two images to the page, the first of which is present in the specified path, and the second of which is not: The following image shows how the browser displays the previous code to the visitor: We would like to draw attention to the fact that the width and height of the image can be changed by using the width and height properties within the img tag in HTML, and the dimensions can also be changed by using the same two properties for the image element in CSS. The p element and the span element The p element in HTML is used to insert a text paragraph on the page, where the paragraph text is placed between the start tag and the end tag of this element. This element is usually used many times on each page, especially if the page contains an article, and a space is added before and after the paragraph by default on the web page. As for the span element, it is just a container element, meaning that it is used to contain text or another element, and it is used for the purpose of grouping content or elements in order to facilitate their formatting using CSS, based on the class or id properties, as we will explain later. The span element is similar to the div element, but there is a difference between them. The span element is an inline element that reserves a width space appropriate to its size only, while a div is a block-level element that reserves the entire available width. It should be noted that the class and the id are two properties of HTML elements that help to format specific elements in the document using CSS. If, for example, you are using 5 h2 elements in the document, and you would like to perform some formatting on only one of these five elements in the document, you cannot do that by using the element name h2 because that will lead to the formatting being applied to all the h2 elements on the page. So to format a specific element or two or more h2 elements on the page, we use either the class or id property. There is a difference between these two properties, as you can give more than one element the same class to apply the same formatting to all of them with the same code, but you cannot give more than one element the same id. HTML elements are also divided - depending on how the browser inserts and displays the element on the page - into block-level elements and inline-level elements. Block-level elements start with a new line in the HTML page, meaning if there is an element above them, they start from below that element and not on the same line. Likewise, they take the full width available to them regardless of the amount of width taken by the elements within them, and a top and bottom margin is added to them, while inline-level elements do not start with a new line, and only take the necessary width depending on their content, and do not have a bottom or top margin. To clarify all of the information mentioned above in this paragraph about the p element, the span element, and the class and id properties, here is the following code as an example:

What is Adobe Dreamweaver?

What is Adobe Dreamweaver?

It is one of the best programs specialized in Create websitesIt allows and facilitates writing codes using many languages, including html, css, php, and others.

It is one of the best programs specialized in

Create websites

It allows and facilitates writing codes using many languages, including html, css, php, and others.

Explanation of the previous code: Within the head element, we used the style element, which allows us to write CSS code for the page elements within the file itself, that is, without the need to create a separate CSS file for formatting and linking the HTML document to it. Then, within the body element, we included two h1 heading elements, then two p-paragraph elements, and within the first paragraph element we included the phrase (creating websites) within the span element, while we included the same phrase within the second paragraph element, but within the div element, in order to show the difference between elements on the inline level and elements on the block level. We also gave the class property assigned to each of the (heading elements h1, the span element, and the div element) the value (colr) in order to perform formatting on all of them at once using CSS. We also assigned the value (bigheader) to the id property of the first title element, and the value (smallheader) to the id property of the second title element in order to perform formatting using CSS for each of them separately so that the modifications we make to one of them do not affect the other. As for the CSS code contained within the style element, it consists of 4 rules, each of which consists of a selector followed by brackets that include a set of properties and their values, but the selector differs in some cases from others. The selector in the first and second rules began with a hashtag sign (#) because it is followed by the id value of one of the HTML elements. As for the third rule, the selector was a hashtag, which is h1. As for the selector in the fourth rule, it began with a period (.), because it is followed by the class value of a group of HTML elements. is on the page. Here the usefulness of the class and id properties becomes clear, as well as the usefulness of the different forms of selectors. In the first rule, the formats (we mean the properties and their values) contained within the parentheses {} will be applied to the element whose id property value is (bigheader), that is, to the first heading in this example, and in the second rule, the formats will be applied to the element whose id value is (smallheader), that is, to the second heading. As for the third rule, formats will be applied to all h1 headings in the HTML document, and in the fourth rule, formats will be applied to all elements whose class property value is (colr), that is, to both the first and second headings, the span element located within the first paragraph, and the div element located within the second paragraph. As you can see from the previous example: There are rules that must be followed when writing a selector in CSS. If this selector is the name of an element (for example, h1), we write it as it is, and if it is a value for id, we write a hashtag (#) before it, and if it is a value for class, we write a period before it. This image shows what the CSS properties contained within the CSS rules in the previous code do: Watch what the browser shows when you open an HTML page that includes the previous code, and notice how the CSS formats were applied to the same elements that We have defined it: the hyperlink element. Hyperlinks are found in almost all web pages, and it is almost impossible to find a page devoid of links that take the user to another page when he clicks on the phrase or word that includes the link. This is why the HTML language provides the possibility of creating links very easily through the hyperlink element (a), where the text of the link that will appear to the visitor is placed as the content of the element a, that is, between the beginning and end tags of this element, while the link to which the user will be taken when clicking on this text is placed as the value of the property (href). For example, the following code inserts a paragraph into the web page, and when clicking on the phrase (WordPress in Arabic) in this paragraph, the user will be taken to the home page of the WordPress website in Arabic.

Longer site WordPress in Arabic The first Arab website in the world to professionally use the WordPress content management system

The browser will display the phrase (WordPress in Arabic) in a different way from the rest of the text in the paragraph, as it will have a line under it to alert the user that it includes a link that can be clicked. If you do not like the default appearance of it, you can format it as you want by giving it the id or class property and using the CSS language to change various aspects of its appearance. The browser will show the hyperlink by default, as shown in the following image: With this, we have finished explaining the most important elements in the HTML language, and we point out that there are many other elements that can be used in building the page, and they can be viewed and an overview of their uses in the Hassoub Encyclopedia. Where to write CSS code There are three ways in which HTML documents can be formatted using the CSS language, and these methods differ from each other in where to write CSS code. The first method: Writing inside tags (Inline) The CSS code is written within the HTML element itself, where the code is placed as a value for the style property of the element. In this case, there is no need to include the selector in the CSS code, because the browser will automatically know that the formats are specific to the same element in which the code is written. example:

The color of this title is green

The second method: Writing inside the file (Internal). The css code is written in the HTML file itself within the content of the style element, which is placed within the head element. This method requires writing the delimiter, where the CSS properties are placed in parentheses after the delimiter. example:

This title is red

The third method: Writing in an external file (External). The css code is written in a file separate from the HTML file. A file with the css extension is created and the necessary rules for formatting are written within it. Then the HTML file is linked to this file using the link element, which is placed within the head element. For example:

Blue vertebra

In this example, style.css is the path to the CSS file that includes the styling code. There is no need to write the full path if the file is located next to the HTML file (i.e. in the same folder), but it is sufficient to write the file name and its extension. The most important properties of CSS The CSS language includes hundreds of properties that allow us to format and modify various HTML elements on a web page. Each property sometimes takes one or several values. The types of values ​​that a CSS property can take vary. Some properties take numerical values, others take lengths, some take links (URLs), some take text values, some colors, or something else. Of course, we will not explain here all the CSS properties because that would require a whole book, but we will explain the properties that are commonly used in designing and formatting HTML documents. Color properties: There are two important properties related to colors in CSS, which are the color property and the background-color property. The following table shows the formatting that you perform on the element, and the values ​​that it can take. Dimension Properties Dimension properties in CSS define the dimensions of the element, that is, the width and height of the element, and also determine the maximum width and height that the element is allowed to have, and the minimum width and height that the element is allowed to have, and all of these properties related to the element’s dimensions are determined using 6 properties shown in the following table. The outer margins (Margins) and inner (Paddings) of the element There are two important properties related to margins in CSS, one of which specifies the outer margins of the element (margin), and the other specifies the inner margins (padding). The outer margin is the empty space between the element and another element next to it from the right, left, top, or bottom, while the inner margin is the space that is left empty between the borders of the element and the elements it contains within it. The margin and padding properties take more than one value at the same time, because they define the margins on all four sides, and their values are usually numbers in one pixel, and the property values are written next to each other, leaving a space between each value and the next value, as is clear in the following CSS code: div { margin: 50px 75px 100px 150px; padding: 50px 75px 100px 150px; } If four values ​​are given for either property, the first value will represent the top margin, the second the margin from the right, the third the margin from the bottom, and the fourth the margin from the left, that is, the outer and inner margin of the div element from the top in the previous code will be 50 pixels, from the right 75 pixels, from the bottom 100 pixels, and from the left 150 pixels. Note: The inner margins do not have to be equal to the outer margins of the element. You can specify the margin values as you wish, as they are independent of each other. Likewise, the two properties do not have to take 4 values, as they can be given 3 values, two values, or one value. In each case, the values represent a margin from a certain side. For example, if you give the property 3 values, the first value will represent the margin from the top, the second value will represent the margin from the right and left sides, and the third value will represent the margin. From the bottom side. It is worth noting that it is possible to use 4 properties to specify the external margins from the four sides instead of using one margin property, and the same applies to internal margins. The properties of the four external margins are: margin-top margin-right margin-bottom margin-left. As for the properties of the internal margins, they are the same as the previous properties, only we replace the word (margin) with the word (padding). Borders Properties There are a variety of properties in CSS that allow you to format various aspects of element borders in HTML, including the ability to specify the style, color, and thickness of the borders. The following table describes these properties: Note: Since the border property is a collection of the other properties in the table, this code: h2{ border: 2px solid red; } does the same job as this code: h2{ border-width: 2px; border-style: solid; border-color: red; } And here we have finished explaining the most important properties in CSS, We would like to inform you that what we have explained represents only a small portion of the many properties present in the language. There are many other properties that can be used to perform many actions related to formatting HTML elements, including making the corners of the element non-sharp (i.e. circular), adding a shadow to the element, formatting lines, changing the positions of elements, and many other formats that our article does not have room to mention. You can view all the features of the CSS language in addition to a detailed explanation of all of these properties and their uses through the CSS lessons at Hsoub Academy. Comments in HTML and CSS Comments in HTML and CSS are texts written in Arabic, English, or any other language within the HTML or CSS code, and their goal is to clarify and explain the code written under or next to them. They do not appear on the web page, as the browser ignores them. That is, comments are written only to make it easier for you or for any other person browsing the code, the process of understanding it, researching it, modifying it, and finding the line of code you want. In HTML, comments are written between -!< الذي يوضع في بداية التعليق و >– which is placed at the end of the comment, as the following HTML code shows:

The easiest programming languages ​​that you can learn within days

As you can notice here, the first line of the previous code is a comment that will not be displayed in the browser, while the next line is the code that adds the main article title in the HTML document. In CSS, comments are written between (*/) and (/*) as shown in the following CSS code: h1{ margin:auto; /* This property centers the address */ font-size:50px; /* This property sets the font size of the title to 50 pixels */ } An example of applying some CSS properties to the elements of an HTML document. Now that we have explained the most important HTML elements and the most important CSS properties, we will apply a practical example in which we use some HTML elements and CSS properties, in order to summarize all of the above and explain how the codes of the two languages are written and linked to each other. We will create a very simple HTML document of a page with a title, two paragraphs, an unnumbered list, and an image, and then we will format the page using CSS by entering the formatting code in the Internal method. The final page appearance after applying the modifications will be as follows: To create an HTML document that corresponds to the page shown in the previous image, you must follow the following steps: Create a blank HTML file in a folder of your choice on your computer in the manner we explained in the paragraph (How to create HTML and CSS files). Place the image you want to insert into your web page in the same folder where you created the HTML file. The image could be the same as the one on the web page shown in the previous image or another one. In this case, pay attention to the need to change the name of the image in the code to the new name. Open the HTML file using Notepad or any other text editing program. No text will appear in the file, i.e. Notepad will display a blank page with no writing. Copy and paste the following code into Notepad, then save the changes by pressing the (Ctrl+S) keys on the keyboard, or by clicking on the (Save) option from the (File) menu in the top menu bar. Note: The explanation of each piece of code is written next to or above it as a comment.

Introducing the most important languages ​​used in designing web pages

Web page design is a process through which we plan, add elements, organize and format to create documents that browsers can read and display in the form of web pages. Many languages ​​are used to create web pages, each of which has a specific function.

The most important languages ​​for creating web pages include:

• HTML language.
• CSS language
• javascript language

ملحوظة: إذا كان ترتيب كلمات التعليقات التي تشرح سطور الكود السابق غير صحيح بسبب مشاكل كتابة جمل عربية ضمن نص إنجليزي اتجاهه من اليسار إلى اليمين، قم بنسخ التعليق ولصقه في مستند نصي، واجعل اتجاه النص من اليمين إلى اليسار من أجل إظهار كلماته بالترتيب الصحيح وتسهيل قراءته وفهمه. الاطلاع على أكواد HTML وCSS في ووردبريس وتعديلها تُستخدم في ووردبريس 4 لغات بشكل أساسي يتم باستخدامها تصميم وبرمجة كامل موقع الويب (الواجهة الأمامية والخلفية للموقع)، وهذه اللغات هي HTML وCSS وPHP وJavaScript. بالرغم من أن ووردبريس يوفر إمكانية إنشاء مواقع ويب دون الحاجة إلى معرفة هذه اللغات، حيث يتم بشكل تلقائي إنشاء أكوادها، إلا أن إجراء تعديلات على موقعك الووردبريس يتطلب منك معرفة أساسيات هذه اللغات. في مقال اليوم ركزنا على شرح أساسيات كل من HTML وCSS، وفي هذه الفقرة سنتعرف على طريقة الاطلاع على أكوادهما في الموقع وتعديلها. اقرأ أيضًا : كيف يعمل نظام الووردبريس، وما مكوناته | شرح شامل للمبتدئين توجد طرق عدة تسمح لك بالتعامل مع أكواد موقع الووردبريس، وإضافة أكواد مخصصة إليه، وسنشرح هنا كيفية الاطلاع على الكود الخاص بصفحة أو مقالة ووردبريس من محرر المكونات، بالإضافة إلى كيفية إدراج أكواد CSS مخصصة، وكذلك كيفية الوصول إلى أكواد قالب ووردبريس موقعك للاطلاع عليها أو تعديلها (لكننا لا ننصحك بتعديل هذه الأكواد إذا لم تكن خبيرًا محترفًا في ووردبريس واللغات المستخدمة فيه). إظهار كود صفحة أو مقالة وتعديله لإظهار كود صفحة أو مقالة في ووردبريس ومن ثم تعديله إذا أدرت، قم بفتح الصفحة أو المقالة باستخدام محرر المكونات (Gutenberg). انقر على زر خيارات في صفحة محرر المكونات. يوجد زر خيارات عادة في أعلى اليمين أو اليسار حسب اللغة. من قسم (المحرر)، اختر (محرر الشفرة البرمجية) من خلال النقر عليها بالماوس. سيظهر لك الآن كود الصفحة أو المقالة، ويمكنك تعديله إذا أردت، وكذلك يمكنك إدراج أكواد CSS هنا لتنسيق العناصر بطريقة Inline. الجدير بالذكر أيضًا أنه يمكنك إدراج كود HTML في محرر المكونات دون الانتقال إلى وضع محرر الشفرة البرمجية، وذلك عبر استخدام مكون HTML مخصص (Custom HTML)، كما يمكنك تعديل كود HTML الخاص بمكون معين فقط دون الحاجة إلى الانتقال إلى وضع محرر الشفرة البرمجية من خلال النقر على تحرير كـ HTML من خيارات المكون. إدراج أكواد CSS مخصصة يوفر لك ووردبريس إمكانية إدراج أكواد CSS لتطبيق تنسيقات وتعديلات على مختلف العناصر في الموقع الإلكتروني. للقيام بذلك اتبع الخطوات التالية: في لوحة تحكم ووردبريس، ضع مؤشر الماوس على ( المظهر )، ثم انقر على خيار ( تخصيص ) من القائمة المنسدلة التي تظهر. ثم قم بالنقر على خيار (تنسيقات CSS إضافية). سيظهر لك مربع نصي يمكنك من كتابة أكواد CSS ضمنه لإجراء تعديلات على قالب ووردبريس الذي تستخدمه. قم مثلًا بإدراج الكود التالي المبين في الصورة الذي يحول لون خطوط جميع الفقرات في الموقع إلى اللون الأحمر، ثم قم بحفظ الكود عن طريق النقر على زر ( نشر ) بعدها عد للموقع من جديد وافتح إحدى صفحاته، وستلاحظ أنه تم تغيير لون الخط للون الأحمر كما حددت في الكود. اقرأ أيضًا: كيفية إضافة كود CSS مخصص في الووردبريس ملحوظة: يمكنك التراجع عن الإجراء ببساطة عن طريق حذف الكود الذي أضفته في حقل تنسيقات (CSS) إضافية، ثم النقر على زر (نشر) من جديد. إظهار أكواد قالب ووردبريس يتكون قالب ووردبريس من عدة صفحات، ويمكنك الاطلاع على جميع هذه الصفحات وتعديلها باستخدام (محرر القوالب) إذا كان لديك خبرة ممتازة في اللغات المستخدمة في تصميم القالب، وذلك من خلال اتباع الخطوات التالية: في لوحة تحكم ووردبريس، ضع مؤشر الماوس على ( المظهر ) ثم انقر على خيار ( محرر القوالب ). سيقوم الووردبريس بنقلك إلى محرر القوالب الذي يوفر لك إمكانية الاطلاع على مختلف ملفات القالب وتعديلها، بما ذلك ملف CSS الرئيسي الخاص بالقالب، لكن نذكرك بأن إجراء أي تعديلات هنا يجب أن يتم على يد خبير في الووردبريس ولغات تصميم المواقع، أو اعتمادًا على خطوات مفصلة من مصدر موثوق، مثل مواقع تعليم الووردبريس الموثوقة. اقرأ أيضًا: كيف تقوم بتطوير قالب ووردبريس وبهذا عزيزي القارئ نكون قد انتهينا من شرح أساسيات لغتي HTML و CSS اللتان تعدان اللغتين الأساسيتين في تصميم الواجهات الأمامية لمواقع الويب وإجراء تعديلات على مظهرها، وتعلمنا كيفية الوصول لأكوادهما في ووردبريس. وننوه في النهاية إلى أن قراءة هذه المقالة لا يجعلك مصمم مواقع ويب أو مطور ووردبريس محترفًا. حيث يتوجب عليك مطالعة الدروس الإضافية التي أوردنا روابطها في المصادر ضمن سياق المقالة، وتعلم أساسيات اللغات الأخرى المستخدمة في تطوير الووردبريس (javascript, php)، والاطلاع كذلك على مقالات ووردبريس التي ننشرها بشكل مستمر في موقعنا ووردبريس ب العربية .