Scribd
Upload
30 views9 pages

HTML

Uploaded by

kkk511511
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
30 views9 pages

HTML

Uploaded by

kkk511511
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

 

 
 

 

 

 
 
 
 
 
 
HTML HyperText Markup Language HTML 




  Tags.



:><


: 

  .

HTML‫طريقة استخدامها ﻟﻐة‬

Hyper Text Markup LanguageHTML




HTMLHTML

 

  HTML: 

 PHP  JavaScript 

  

 

 .

html

.
.

.

.

DHTML.

.

.

Front Page. HTML 























:
<!DOCTYPE html>

<html>

<body>

</h1><h1>

</p><p>

</body>

</html>



 

</a><a href="https://www.esofttag.com">

 

</p><p>

 </p><p>

HTML‫الشكل العام لكود‬

، (Elements)‫ ﻣﻦ ﻋﻨاصﺮ‬HTML ‫تتألف أكواد صفحات الويب المكتوبة باستخدام‬


،‫ ويأخذ كل ﻋﻨصﺮ أحد شكليﻦ ﻋاﻣيﻦ‬،‫وقد يتم تضميﻦ ﻋﻨصﺮ ﻣا ضمﻦ ﻋﻨصﺮ آخﺮ‬
:‫هما‬
<Start Attribute=Value Attribute=Value ...>

Content </End>
‫حيث تمثل )‪ (Start‬وسم البداية‪ ،‬وتمثل )‪ (End‬وسم الﻨهاية أو وسم اﻹغﻼق‪ ،‬وتمثل‬
‫)‪(Content‬ﻣحتوى العﻨصﺮ )والذي قد يتضمﻦ بداخله ﻋﻨاصﺮ أخﺮى(‪ ،‬وتمثل‬
‫)‪(Attribute‬اسم إحدى خواص العﻨصﺮ‪ ،‬وتمثل )‪ (Value‬التي تليها القيمة‬
‫المسﻨدة لهذه الخاصية‪ ،‬وتشيﺮ الﻨقاط الثﻼثة )…( إلى إﻣكانية تحديد قيم ﻋدة خواص‬
‫للعﻨصﺮ الواحد‪.‬‬
‫ملحوظة ‪:‬اسم وسم الﻨهاية )‪ (End‬هو نفسه اسم وسم البداية )‪ (Start‬ﻣع وضع‬
‫البادئة‪ /‬قبله‪ .‬فإذا كانت ‪ Start‬هي‪ ، h1‬ستكون ‪ End/‬هي‪h1/.‬‬
‫الشكل الثاني‪:‬‬
‫>‪<Start Attribute=Value Attribute=Value ... /‬‬

‫>‪<Start Attribute=Value Attribute=Value ...‬‬ ‫أو‬


‫حيث تمثل الكلمات في هذا الشكل اﻷشياء نفسها التي تمثلها في الشكل اﻷول‪ .‬لكﻦ‬
‫ﻻحظ هﻨا ﻋدم وجود وسم نهاية للعﻨصﺮ الذي يكتب بهذا الشكل بخﻼف الشكل‬
‫السابق‪.‬‬
‫ملحوظة ‪:‬في الشكليﻦ السابقيﻦ‪ ،‬يمكﻦ أن يتم كتابة خاصية واحدة أو أكثﺮ‪ ،‬أو قد ﻻ‬
‫يتم كتابة أي خاصية‪ ،‬وتختلف الخصائص التي يمكﻦ كتابتها باختﻼف العﻨصﺮ‪.‬‬
‫لكﻦ توجد بعض الخصائص العاﻣة التي يمكﻦ كتابتها في جميع العﻨاصﺮ‪ ،‬كما أن‬
‫بعض الخصائص اختيارية وبعضها اﻵخﺮ إجباري‪ ،‬أي بعضها تتم كتابته ﻋﻨد‬
‫الحاجة‪ ،‬وبعضها اﻵخﺮ يجب كتابته كي يعمل العﻨصﺮ بشكل صحيح‪.‬‬

‫الشكل العام لكود‪CSS‬‬

‫فيما يخص أكواد ‪ CSS‬فإنها تكتب بﻨفس الطﺮيقة تما ًﻣا بغض الﻨظﺮ ﻋﻦ المكان الذي‬
‫تختار كتابتها فيه )سوا ًء في نفس ﻣستﻨد ‪ HTML‬أو في ﻣستﻨد آخﺮ(‪ ،‬لكﻦ الطﺮيقة‬
‫التي يتم باستخداﻣها تحديد أن هذا الكود هو ﻋبارة ﻋﻦ كود ‪ CSS‬للمتصفح تختلف‬
‫باختﻼف طﺮيقة كتابة كود‪ ، CSS‬وسﻨأتي ﻋلى شﺮح هذا ﻻحقًا‪.‬‬
‫تتألف أكواد لغة ‪ CSS‬ﻣﻦ القواﻋد )‪ (Rules‬وهي تقابل العﻨاصﺮ )‪ (Elements‬في‬
‫لغة‪ ، HTML‬ويكون شكل القاﻋدة في ‪ CSS‬كما يلي‪:‬‬
‫{ ‪Selector‬‬
‫;‪Property: Value‬‬

‫;‪Property: Value‬‬

‫‪...‬‬

‫}‬

‫حيث تﺮﻣز كلمة ‪ Selector‬هﻨا إلى ال ُمح ِدّد‪ ،‬أي يكتب ﻣكانها كلمة تبيﻦ ﻋلى أن ﻣا‬
‫سيكتب بعد بيﻦ القوسيﻦ }{ سيتم تطبيقه ﻋلى ﻋﻨصﺮ أو ﻣجموﻋة ﻋﻨاصﺮ ﻣحددة‬
‫ﻣوجودة في ﻣستﻨد الـ‪HTML.‬‬
‫توجد طﺮق ﻋدة لكتابة المحدد‪ .‬وتشيﺮ كلمة )‪ (Property‬إلى إحدى الخصائص في‬
‫‪ ،CSS‬وكلمة )‪ (Value‬إلى القيمة التي نقوم بإسﻨادها إلى الخاصية‪.‬‬
‫ﻻحظ أنه يتم الفصل بيﻦ الخاصية وقيمتها بﻨقطتيﻦ فوق بعضهما )‪ (:‬ويتم وضع‬
‫فاصلة ﻣﻨقوطة إنجليزية )؛( بعد كل قيمة ﻣﻦ قيم الخاصية‪ ،‬وتكتب الخاصية التالية‬
‫بعد الفاصلة المﻨقوطة‪.‬‬
‫إذا كﻨت تﺮيد البدء في تطويﺮ واجهات المستخدم ﻣﻦ خﻼل دورة تعليمية ﻣتكاﻣلة‪،‬‬
‫فيمكﻨك اقتﻨاء دورة تطوير واجهات المستخدم ﻓي أكاديمية حسوب التي توفﺮ ‪٥٤‬‬
‫ساﻋة تدريبية ﻣع توفيﺮ دﻋم وإرشادات في ﻣﻦ قبل فﺮيق ﻣختص يساﻋدك ﻣﻦ‬
‫البداية‪ ،‬وبﻨهاية الدورة تحصل ﻋلى شهادة ﻣعتمدة ﻣﻦ أكاديمية حسوب‪.‬‬

‫أمثلة وشرح وتعريف أكثر ﺑالشكل العام ﻷكواد‬


‫‪HTML‬و‪CSS‬‬
‫بﻨا ًء ﻋلى ﻣا سبق‪ ،‬يتكون ﻣستﻨد ‪ HTML‬ﻣﻦ ﻣجموﻋة ﻣﻦ العﻨاصﺮ )‪(Elements‬‬
‫بحسب ﻣا تحتاجه صفحة الويب‪ ،‬فليس بالضﺮورة أن تكون هذه العﻨاصﺮ هي نفسها‬
‫لكل الصفحات‪ ،‬وتتكون ورقة ‪ CSS‬ﻣﻦ ﻣجموﻋة ﻣﻦ القواﻋد )‪ (Rules‬حسب‬
‫الحاجة ‪.‬‬
‫يعد كل ﻣما يلي ﻣثال ﻋلى ﻋﻨاصﺮ في ﻣستﻨد‪HTML:‬‬
‫>‪<title>Page Title</title‬‬
‫>‪<p id=”prf”>My paragraph</p‬‬
‫>‪<h1>My Heading</h1‬‬
‫>‪<body><h1>My Heading</h1><p>My paragraph.</p></body‬‬

‫في اﻷﻣثلة السابقة الثﻼثة اﻷولى‪ ،‬الكلمات الملونة باللون اﻷزرق هو وسوم البداية‬
‫والﻨهاية للعﻨاصﺮ)‪ ، (Tags‬وكل ﻣﻦ )‪ (Page Title‬و )‪ (My paragraph‬و ‪(My‬‬
‫)‪Heading‬تمثل ﻣحتوى العﻨصﺮ‪(Content).‬‬
‫أﻣا في المثال اﻷخيﺮ‪ ،‬فلديﻨا ﻋﻨصﺮ بداخله ﻋﻨصﺮان‪ ،‬فما تم تلويﻨه‬
‫باللون اﻷزرق هما وسما البداية والﻨهاية للعﻨصﺮ الذي يضم العﻨصﺮيﻦ اﻵخﺮيﻦ‪،‬‬
‫والعﻨصﺮان اﻵخﺮان بمحتويهما ووسميهما )تم تلويﻦ أوسمة هذيﻦ العﻨصﺮيﻦ باللون‬
‫اﻷصفﺮ والزهﺮي( يشكﻼن ﻣحتوى العﻨصﺮ الذي يضمهما‪.‬‬
‫يقوم كل وسم بمهمة ﻣحددة وهي إدراج ﻋﻨصﺮ في الصفحة‪ ،‬فعلى سبيل المثال يقوم‬
‫الوسم ‪ p‬بإضافة فقﺮة إلى الصفحة‪ ،‬أي أن المحتوى المكتوب بيﻦ <‪>/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‬تبدأ‬
‫ﻋﻨصﺮا أو وس ًما إنما هو تصﺮيح )‪(Declaration‬‬
‫ً‬ ‫بالكلمة)‪ ، (Doctype‬وهذا ليس‬
‫يخبﺮ المتصفح أي إصدار ﻣﻦ ‪ HTML‬تم استخداﻣه لكتابة المستﻨد‪ ،‬ولكل إصدار‬
‫شكل ﻣحدد ﻣﻦ هذا التصﺮيح‪ .‬ﻋلى سبيل المثال التصﺮيح التالي يخبﺮ المتصفح أن‬
‫هذا المستﻨد ﻣكتوب بأكواد اﻹصدار الخاﻣس اﻷكثﺮ حداثة ﻣﻦ لغة‪HTML:‬‬
‫>‪<!DOCTYPE html‬‬

‫في حيﻦ أن هذا التصﺮيح يخبﺮه أن المستﻨد ﻣكتوب بإصدار‪HTML 4.01 Strict:‬‬
‫"‪<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN‬‬

‫>"‪"http://www.w3.org/TR/html4/strict.dtd‬‬

‫العنصر‪html‬‬

‫يعد العﻨصﺮ ‪ html‬هو العﻨصﺮ الجذر في المستﻨد‪ ،‬أي يجب أن يضم هذا العﻨصﺮ‬
‫جميع ﻋﻨاصﺮ ﻣستﻨد ‪ HTML‬اﻷخﺮى‪ ،‬ولهذا ستﻼحظ أن جميع صفحات ‪HTML‬‬
‫تكون ﻋلى هذا الشكل‪:‬‬
‫>‪<html‬‬

‫[جميع ﻋﻨﺎﺻﺮ ﻣﺴﺘﻨﺪ الـ ‪ HTML‬تكﺘب هﻨﺎ بين وسم البﺪاية ووسم الﻨهﺎية لﻠﻌﻨﺼﺮ‬
‫]‪html‬‬

‫>‪</html‬‬

You might also like