المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : درس جديد || مقدمة في لغة الويب [HTML] ||



Miss ShyMaa
4-9-2014, 08:53 PM
\\ بسم الله الرحمن الرحيم //
السلام عليكم ورحمة الله وبركاته ~
حياكم الله جميعاً رواد مسومس الكرام
الموضوع عبارة عن مقدمة بسيطة جداً في لغة الويب (HTML)، كما يتضح من العنوان،
لذا فلننطلق D:



نبذة عن اللغة :
هي لغة توصيف النصوص التشعبية (Hyper Text Markup Language - HTML) ،
وهي لغة تستخدم في إنشاء وتصميم صفحات الويب، كما أنها من أقدم اللغات و أكثرها استخداماً.
كما أنها لغة تعتمد على ما يسمى بالوسوم (Tags) ، ولكل وسم بداية ونهاية
وبعض الوسوم لديها بداية فقط مثل وسم سطر جديد (Line Break - br).

مثال وسم الفقرات (Paragraphs - p) :



<p> Contents <\p>
Open Close
ويمثل (نهاية الوسم - المحتوى - بداية الوسم)



لمحة عن تاريخ اللغة :
كان لدى الفيزيائي تيم بيرنرز لي (Tim Berners-Lee) والذي كان يعمل في المنظمة الأوربية
للأبحاث النوية (The European Organization for Nuclear Research - CERN) حلماً
يتمثل في تمكين الباحثين في مناطق نائية من العالم من استخدام وتبادل الوثائق معاً.
وفي عام 1989 ، كتب تيم مذكرة يقترح فيها نظاماً نصياً تشعبياً معتمد على الانترنت
(An Internet-Based Hypertext System) ، وقام فيما بعد بكتابة برامج المزود أو الخادم
و المتصفح ، في أواخر عام 1990.


ننتقل إلى الجزء العملي D:
الهيكل الأساسي لصفحة الويب :




<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>


الشرح :
1- وسم التعريف بالصفحة (Declaration Tag) :



<!DOCTYPE html>


ويقصد بها تعريف المتصفح بماهية الصفحة المكتوبة وإصدار (HTML) الخاص بها
ولكن بالامكان تجاهلها، حيث لدى بعض المتصفحات القدرة على ذلك


2- وسم بداية الصفحة و نهايتها (Start and End of Page Tag) :



<html></html>


وهما يمثلان بداية الصفحة ونهايتها ويجب وضع كل ما تحويه الصفحة بينهما

3- وسم رأس الصفحة (Head Tag) :
وهو يمثل رأس الصفحة، ويستخدم مثلاً لوضع عنوان الصفحة فيه (Title Tag)




<head>
<title>Title of the document</title>
</head>


4- وسم جسد الصفحة (Body Tag) :
ويمثل جسد الصفحة الذي يتم وضع محتواها فيه




<body>
The content of the document......
</body>


تطبيق:
1- قم بعمل مستند نصي جديد باستخدام برنامج (Notepad)
و ضع فيه الكود الذي ترغب به، شرط ألا تخل بهيكل الصفحة الأساسي


مثال :




<!DOCTYPE html>
<html>
<head>
<title>Learn HTML</title>
</head>
<body>
<p>My First Page</p>
</body>
</html>


2- احفظ الملف بصيغة (HTML)، وستجد أنها ظهرت كصفحة ويب،
أيقونتها هي المتصفح الافتراضي لديك
وها قد أنشئت صفحتك الأولى الخاصة XD



كلمة أخيرة:
أرجو أن أكون قد وفقت في الطرح، ولا تبخلوا علي بآرائكم و تطبيقاتكم D:
ألقاكم على خير
في حفظ الباري ~

ms hagar ehab
9-9-2014, 01:29 AM
السلام عليكم ورحمة الله وبركاته .. >
صدييقتي العزيزة *^* 3>
والله انتي ترفعي الراس ماشا ءالله *^* ..
الشرححح سلسسسسس وبالرغم من اني بكرهه القراااءة بااااين هونتوني هونتووني سهل
وابداااااا مش ممل *^* ...
+ الإعجاز في الإنجاااز ارى تطبيق العبااارة راااائع في موضوعك قسم *^*

و ... بالمناسبة يعني ايه (وسم) 0.0 ؟؟؟؟؟
هطبق الدرس ان شاء الله بمجرد ما يعتقوا رقابنا مالإمتحانات ""(

دعواتك شوشو "")
وااااصليي ")

الـقائد
12-9-2014, 11:00 AM
وعليكُم السلام والرحمة والبركة،

أهلاً بكِ أُختي في قسم البرامج وجزاكِ اللـهُ خيراً على هذا الموضوع أولاً،

وعلى مُقدمة الدورة ثانياً، شرح جميل وسلس ومفهوم ماشاءَ اللـه،

أشكُرُكِ على بداية الدورة وأرجو أن تستمري بها إلى النهاية،

لو تُعلنين عنها سيكون جيداً وتطلُبي بعض التطبيق من الأعضاء حتى تعرفي من الذي يتابع ^^،

وإذا أردتي أي مُساعدة لا تترددي بمُراسلتي أو مُراسلة الأخ وحدين في أي وقت،

أُكرر شُكري لكِ ، وبالتوفيق في إكمال الدورة ^^.

Miss ShyMaa
12-9-2014, 12:55 PM
هاجر
ممتنة لحضورك D:
الوسم مرادف لكلمة tag - شي يوضع بين قوسين <> هكذا - أحد أساسيات اللغة
وطبقي على راحتك >> استثناء XD

القائد
وإياكم، لم أفعل شيئاً ..
أنا فضلت عدم تسميتها دورة تخوفاً من عدم التزامي بالطرح
وبالنسبة للتطبيق فأفضل عدم إلزام الأعضاء بشيء ..
و المجال مفتوح لمن أراد أن يطبق شيئاً أو يستفسر
شكراً لحضورك ..

LUAI
21-11-2014, 07:02 PM
و عليكم السلام وحمه الله و بركاته ..
مقدمه مهمة عن لغة الـ HTML ..
ساقوم بالتطبيق للمراجعة و منتظر دروس (مور ادفانس) ^^" ..
تشكراتي ..

جيلال - ساما
27-3-2015, 06:36 AM
السلام عليكم ورحمة الله وبركاته

كيفك إن شاء الله تمام ؟

موضوع رائع وشرح جميل

شاكر لك هذا الإبداع

مع السلامة