HTML & CSS Tutorial - Part 1
jQuery javascript CSS HTML
وقد قدمنا نصحيه لاخواننا الراغبين فى تعلم البرمجه وتطوير انفسهم فى هذا المجال وهى اهميه الاعتماد على المواقع باللغه الانجليزيه...... حيث ان المواقع العربيه التى وجدتها فقيره جدا وهى تكرار ممل ومعلومات عامه ..... اليك مثال هو اختصار لما وجدته فى بعض المواقع العربيه .....
يبدا بتعريف عام باللغه ثم يتم ذكر الادوات التى نحتاجها و هى موجوده فى جميع اجهزه الكمبيوتر و هى ......
ـــ محرر اكواد مثل نوتباد notepad الموجود فى جميع الاجهزه وندوز .
ـــ برنامج تصفح .
.........
ويتم كتابه اول برنامج " اهلا ايها العالم " وهذا هو الكود الخاص به او يكون قريب من هذا..
<!DOCTYPE html>
<html>
<head>
<title> أ ول صفحه </title>
</head>
<body>
<p>اهلا ايها العالم </p>
</body>
</html>
واليك شرح مختصر لبعض الاوامر التى وردت فى المثال البرمجى ....
هذا الوسم يحدد نوع المستند
|
<! DOCTYPE>
|
وسم بداية ملف الاتش تى ام ال لابد ان تبدا به اى صفحة Html
|
<html>
|
هو وسم خاص برأس الصفحة ويحتوى على عنوان الموقع الذى يظهر فى تبويب الموقع
|
<head>
|
هذا الوسم خاص بعنوان الموقع والذى يظهر فى التبويب بالمتصفح ويوضع هذا الوسم داخل الوسم < head > ....
|
<title>
|
نهايه الوسم
|
</title>
|
نهايه الوسم
|
</head>
|
هذاا الوسم يحتوى على جميع محتويات الموقع لديك كما ذكرنا ان الموقع يتكون من راس وجسم لذ فهذا الوسم هو جسم الموقع وبه كل محتوياته
|
<body>
|
نهايه الوسم
|
</body>
|
نهايه الصفحه
|
</html>
|
ولكن هذا مثال مستهلك لا يفيد المتعلم فى شئ ...
ولكنى فى هذه التدوينه قمت بشئ ارى انه اكثر افاده ........................... ذهبت لاحد المواقع وهو موقع code.makery
هذا الموقع به من الدروس فى البرمجه وساقوم بترجمه درس فى كل تدوينه واحاول قدر جهدى الا تكون الترجمه حرفيه بل بالمعنى وكذلك ساضع رابط الدرس فى اول الترجمه حتى يمكن الرجوع للاصل وذلك لزياده الافاده.....
...الدرس الاول
HTML & CSS Tutorial - Part 1: Your First Website
رابط الدرس HTML & CSS Tutorial - Part 1: Your
======
دعونا نبدا لانشاء اول صفحه على النت
الادوات المطلوبه ..
اولا : محرر نصوص Editor
لإنشاء صفحات الويب، فإن محرر النص العادي مثل نوتباد notepad لنظام ويندوز يكون كافيا. ولكن هناك برامج متطوره يمكن أن تبسط عملك بشكل كبير .
وينصح كاتب الدرس باستخدام محرر نصوص حديث و يقترح كاتب الدروس محرر نصوص براكتس BracketS وهو محرر مجانى من شركه ادوبى adobe ىمكن تنزيله من هنا
يمكنك أن تستخدم أي محرّر نصوص تريده، ولكنّني في هذه الدرس سأُشير أحيانًا إلى بعض وظائف تطبيق براكتس Brackets
ثانيا : المتصفح browser
يتوجّب على موقعنا أن يعمل على جميع المتصفحات الرئيسية مثل
Internet Explorer, Firefox, Chrome and Safari
وينصح كاتب الدرس بالمتصفح كروم لأغراض التطوير والبرمجه وىملك كروم أدوات مفيدة للغاية لمطوّر الويب والتي سيستخدمها على نحو متكرّر. بالإضافة إلى ذلك، يدعم المحرر براكتس
-------------
بدايه العمل ...... انشاء مستند اتش تى ام ال
Creating an HTML Document
معنا محرر نصوص و مستعرض .... نبدا الان بأنشاء اول صفحه لنا لموقعنا على النت.
1- انشئ مجلد فى جهازك للمشروع و سمه بأى اسم وقد تم تسميته فى هذا المشروع Portfolio
2ـ افتح محرر النصوص براكتس او اى محرر نصوص اخر
3- اخترالامر open Folder من القائمه File... ثم ... open لفتح المجلد الذى انشأناه سابقا ثم نفتحه ..
4- كليك يمين تحت الفولدر ثم اختار ملف جديد و سميه أى اسم و تم تسميته index.html
5- الان لدينا ملف نصى فارغ اسمه
index.html
Viewing and Refreshing
العرض والتحديث
الان نملاء المستند بالمحتوى .. اكتب الاسطر الاتيه فى المستند
لعرض الصفحة ضمن المتصفّح، انقر الأيقونة التي تُشبه رمز الكهرباء في الطرف الأيمن من البرنامج المعاينة الحية سيُفتَح المتصفّح وسيُعرض المستند ضمنه، وفي حال أجريت أي تغيير جديد على مستند
فسترى نتيجة ذلك على المتصفّح مباشرةً، وهي في الحقيقة ميزة هامة وفعّالة
إذا لم تظهر الصفحة، اذهب إلى المكان الذي يوجد فيه الملف وافتحه مباشرةً باستخدام بأي متصفّح
تهانينا، لقد أنشأت موقعك الأوّل
HTML Elements
عنا صر HTML
الوسوم Tags
فى المثال السابق رأينا رموز وكلمات مكتوبه ضمن رمزى < > هذه الرموز تسمى وسوم ....
تتألف عناصر html عادةً ولكن ليس دائما من وسمين، وسم للفتح ووسم للإغلاق ..... في مثالنا السابق كان < html > هو وسم للفتح، أمّا < html/ > هو وسم للإغلاق حيث نلاحظ وجود سلاش شرطه مائله قبل اسم الوسم.
ي نص موجود بين وسمي الفتح والإغلاق يُعتبر محتوى لعنصرهذا. فمثلاً بالنسبة للوسمين < html > و < html/ > نُخبر متصفّح الويب عن بداية ونهاية مستند صفحة الويب الخاصة بنا
أمّا الوسم الثاني الذي صادفناه هو الوسم <body> يُحدّد هذا الوسم أنّ جميع المحتوى الواقع بين وسم الفتح <body> والإغلاق <body/> سيظهر بشكل مرئي للمستخدم في المنطقة الرئيسية من نافذة المتصفّح
السمات
Attributes
تعرّف السمات معلومات إضافية لعنصر والسمات هى جزء من وسم الفتح ويكون لها دائما اسم name و قيمه value و كمثال على السمات، دعنا ننظر إلى عنصر الخاص بالروابط. link وهو ربما من أهم العناصر على الإطلاق
يحتوى على سمه ولها قيمه والمتصفح يعرف ذلك ويعرض الرابط بالاعلى <a> العنصر
Basic Structure of an HTML Page
التركيبة الأساسية لصفحةالاتش تى ام ال
لقد رأينا عنصرين من عناصر وهما <html> <body> ولكن بنية صفحة html تتكوّن عادةً من المزيد من العناصر.... استبدل محتويات الملف بالكود الاتى
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web Portfolio of Marco</title>
</head>
<body>
<h1>Web Portfolio of Marco</h1>
<p>Write anything you want to tell the world.</p>
</body>
</html>
Explanations الشرح
ـــ دائما ضع الوسم <!DOCTYPE html> فهذا يخبر المتصفح عن نوع المستند
ــ يشير الوسم <html> الى بدايه المستند والوسم </html/> الى نهايته
ـــ يحتوي العنصر <head> على معلومات إضافية حول الصفحة. وعلى النقيض من العنصر < body> لا تظهر هذه المعلومات في الصفحه الرئيسية من المتصفح
ـ ضمن العنصر <meta> يجب أن يكون هناك مؤشرا حول الترميز إذا لم تقم بتحديد الترميز بعض الأحرف الخاصة قد لا يتم عرض بشكل صحيح. و قد تبين أن هذا العنصر لا يوجد لديه علامة إغلاق. هناك عدد قليل من العناصر من دون علامات إغلاق،و هي استثناء
ـ ضمن العنصر <meta> يجب أن يكون هناك مؤشرا حول الترميز إذا لم تقم بتحديد الترميز بعض الأحرف الخاصة قد لا يتم عرض بشكل صحيح. و قد تبين أن هذا العنصر لا يوجد لديه علامة إغلاق. هناك عدد قليل من العناصر من دون علامات إغلاق،و هي استثناء
ــ العنصر التالي <title>.....</title> يتم عرض العنوان في شريط العنوان في أعلى نافذة المتصفح
ــ يتم عرض كل شيء داخل العنصر <body> في المنطقة الرئيسية من المتصفح
تحدد العنوان الرئيسي. يمكن إنشاء العناوين الفرعية مع ...<h6>....<h2>.. < h1>
ــ النص بين <p>و </p> هو فقره برجراف
مع هذه العناصر الأساسية ... نحن مستعدون لتقديم موقعنا على الانترنت إلى مستوى جديد ولكن يجب ان نضيف صورة حتى تكون الصفحة الرئيسية لموقعنا أكثر إثارة للاهتمام
Inserting an Image
أضافه صوره
لإدراج صورة نستخدم عنصر <IMG> والمثال التالي إدراج صورة
<img src="marco.jpg" alt="Picture of me">
عنصر ..<IMG> .. لديها وسم افتتاح فقط و بدون وسم الإغلاق . وهو يحتوي على سمه ..Src. وسمة ....alt. تحدد سمة .src.. عنوان .URLs...، وهذا هو الموقع واسم الملف للصورة. السمة ...alt. هو "نص بديل"، الذي يصف مضمون الصورة. ويستخدم هذا النص عن طريق محركات البحث، وذلك فى حاله لسبب ما لم تعرض الصورة، وكذلك على سبيل المثال على قارئ الشاشة للمكفوفين
اخير ا ... ىجب ان نتاكد من العنوان عند اضافه الصور حيث ان العنوان يحدد مكان تواجد الصوره او الرابط .....
هذا هو الكود للملف قد اكتمل
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web Portfolio of Marco</title>
</head>
<body>
<h1>Web Portfolio of Marco</h1>
<h2>Welcome!</h2>
<p>Please have a look around. In the blog section I document</p>
my experiences in programming
You may also look at my web projects. Have Fun.</p><p>Thanks for stopping by.</p>
<img src=" http://f.top4top.net/p_338clm551.png">
<p>Marco :-)</p>
</body>
</html>
لاحظ رابط الصوره حيث اننا استخد منا الصوره بعد رفعها على احد مراكز رفع الصور حتى ىمكن استخدامها فى اى مكان ......
وهذه هى الصوره النهائيه التى ستظهر لنا عند فتح الملف بأى مستعرض .....
في الجزء التالي سوف تتعلم كيفية نشر موقع الويب الخاص بك على شبكة الانترنت.
الجزء الثانى ...... هنا
هذاالمقال مترجم عن مقال
Marco Jakob
ليست هناك تعليقات:
إرسال تعليق