ملخصات HTML

Web Design
Html ‫ملخص‬
[HTML ‫]مذكرة عن‬

‫‪ HTML‬هي اختصار ل‬
‫‪Hypertext Markup Language‬‬
‫‪ Markup‬يعني لغه من لغات تصميم موقع الويب‬

‫ال ‪ Markup‬يحتوي على تاج نسميها نحن الوسوم‬
‫صفحة الويب تحتوي على تاج ونصوص وتاج وهو كالتالي‬
‫>‪<div></div‬‬
‫هذا يسمى تاج‬

‫منظمة ‪ w3‬العالمية تنصح بكتابة التاج صمول‬
‫‪ : Attributes‬السمات والصفات الخاصة بالعناصر‬
‫يوجد للغة ‪ Html‬عدةأصدارات أول أصدار ظهر لها عام ‪١٩٩١‬‬

‫وصدر لها اصدار " ‪" Xhtml‬‬
‫‪HTML5‬‬ ‫وأخر اصدار لها صدر سنة ‪ ٢٠١٢‬وهو‬

‫أحدث اصدار لها‪.‬‬
‫اﻷفضل دائما مراعاه التنسيق عند كتابة التاج‬
‫فﻼ يكون كل التاجات اسفل بعض بل ﻻبد من وضع مسافة لمعرفة بداية التاج‬
‫ونهايته وعدم التشتت‬
‫‪2‬‬ ‫مذكرة في لغة ‪ Html‬مجمعة من كورس الزيرو وترجمة موقع ‪w3‬‬

‫لكتابة كومنت‪ comment‬داخل ‪html‬‬
‫>‪<!-- #### --‬‬
‫في البداية ‪ :‬ﻻبد من حفظ الملف بصيغة ‪html‬‬
‫أوﻻ ‪<head>:‬‬
‫>‪<!DOCTYPE html‬‬
‫وهو النوع المعتمد كي يتعرف المتصفح على أكواد‪html5‬‬
‫>‪<meta‬‬
‫وانواعها كتيرة جدا ً‬
‫"‪<meta charset="utf-8‬‬
‫هذا الكود يحدد نوع الصفحة والترميز هو ترميز عالمي وهو يدعم اللغه‬
‫العربية واﻹنجليزيه بشكل سليم‬
‫>"‪<meta name="description" content=" ….‬‬
‫‪ description‬تقوم بوصف الموقع حيث يتم وضع كلمات أو نص تسهل‬
‫من عملية العثور على الموقع عند البحث عليه‬
‫مﻼحظة مهمة‪ :‬يوجد ‪ meta‬أخرى ‪ kywodes‬اتلغت من جوجل‬
‫>‪ :<title></title‬ويتم كتابة عنوان الصفحة بداخلة‬

‫>‪ : <style></style‬وتتم كتابة خصائص ‪ Css‬بداخله‬
‫>‪ :<link‬ويعبرهذا الكود عن مصدر خارجي سوف يتم ربطه بالصفحة‬
‫ومعظم اختصاصه يكون بملف ‪Css‬‬
‫>"‪<link rel="stylesht" hrf="style.css‬‬
‫حيث أن )‪(rel‬اختصار لي ‪relationship‬‬

‫الترتيب الصحيح ل عناصر >‪<head‬‬
‫ثانيا ‪Body:‬‬
‫‪Id & class‬‬
‫‪ : Id‬وهو يستخدم بمعرف واحد فقط في ‪ html‬وﻻ يجوز استخدامه أكثر‬
‫من مرة واحده أو تكراره ويجب أن يكون فريد من نوعه ‪.‬‬
‫يمكن استخدام قيمة المعرف بواسطة ‪ CSS‬و ‪ JavaScript‬لتنفيذ مهام‬
‫معينة لعنصر فريد بقيمة معرف محددة‪.‬‬
‫ويتم كتابته في ال ‪ Css‬مسبوقا بالهشتاج ‪#‬‬
‫‪ : Class‬وﻻبد عند اختيار اسم ال ‪ class‬أن يكون معبر عن محتوها‬

‫واستخدامه ويجوز استخدامه ﻷكتر من عنصر‬

‫اللينكات‬
‫أما تاج اللينك‬
‫>‪<a href="url">link text</a‬‬
‫‪The target Attribute‬‬

‫‪blank‬‬
‫إذا أردنا فتح اللينك في صفحة أخرى مع اﻷحتفاظ بصفحة الموقع مفتوحة‬
‫‪target=" blank‬‬
‫‪self‬‬
‫أما لو أردنا فتح الصفحة في نفس صفحة الموقع دون اﻹحتفاظ بها‬
‫‪ parent‬يفتح المستند المرتبط في اﻹطار اﻷصل‬
‫‪ top‬يفتح المستند المرتبط في النص الكامل للنافذة‬
‫إذا أردنا التنقل داخل صفحة الويب‬

‫فالجزء المراد الذهاب إليه نضيف له ‪id‬‬
‫مثال‪<div id="asdf"></div> /‬‬
‫ثم نقوم بعمل اللينك‬
‫>‪<a href="#asdf"> title </a‬‬

‫الصور ‪Images :‬‬
‫في ‪ ، HTML‬يتم تعريف الصور بالعﻼمة ‪<img>.‬‬
‫>"‪<img src="url‬‬
‫‪ :Src‬يمكن إضافة الصور من مصدر خارجي ‪ url‬أو مصدر داخلي‬
‫إذا أردنا عند الوقوف على الصورة يظهر النص‬
‫نضيف نص داخل الكوتيشن " ‪title="…..‬‬
‫إذا كانت الصور في فولدر يسبق ملف الويب‬

‫فعنهدها نكتب هذا الكود للعودة خطو للوراء‬
‫كي يظهر الصورة‬
‫‪../images.png‬‬
‫"‪alt="text‬‬
‫إذا تعذر على المتصفح العثور على صورة ‪ ،‬فسيعرض قيمة سمة ‪alt :‬‬

‫‪ :Lists‬القوائم‬
‫‪ :Unordered List‬هناك قوائم غير مرتبة‬

‫>‪<ul‬‬
‫>‪<li>Coffee</li‬‬
‫>‪<li>Tea</li‬‬
‫>‪<li>Milk</li‬‬
‫>‪</ul‬‬
‫‪ :Order List‬قوائم مرتبة‬

‫>‪<ul‬‬
‫>‪<ol>Coffee</ol‬‬
‫>‪<ol>Tea</ol‬‬
‫>‪<ol>Milk</ol‬‬
‫>‪</ul‬‬
‫يمكن تغير ارقام القوائم المرتبة‬
‫بإستخدام ‪ <ol type="1"> typs‬فإنه بإمكاننا تغير ترتيب القائمة‬

‫من ارقام لحروف كابتل أو صمول أو حروف رومانية صغيره أو كبيره‬
‫]"‪type="i" & type="A " & type="a " & type="1‬‬
‫" & " ‪[ type="I‬‬

‫مثال على حروف رومانية‬
‫يمكن كذلك جعل القائمة تبدأ من رقم معين بإستخدام ‪start‬‬
‫فقمنا بتحديد "‪ start"50‬كي تبدا القائمة في العد من رقم ‪ ٥٠‬فما فوق‪.‬‬
‫‪ :Desceiption List‬قائمة وصف‬
‫>‪<dl‬‬
‫>‪<dt>Coffee</dt‬‬
‫>‪<dd> black hot drink</dd‬‬
‫>‪<dt>Milk</dt‬‬
‫>‪<dd>white cold drink</dd‬‬
‫>‪</dl‬‬
‫>‪<dl></dl‬‬
‫>‪ <dt></dt‬وهي تمثل عنوان ال ‪ list‬التي سيتم وضع بيانات لها‬
‫>‪ <dd></dd‬وهي تمثل الوصف أو الخواص أو المميزات للعنصر في‬
‫ال‪list‬‬
‫مﻼحظة ‪:‬نستطيع عمل قائمة مرتبة داخل قائمة غير مرتبة والعكس عمل‬
‫قائمة غير مرتبة داخل القائمة المرتبة‬

‫استخدم ‪ float property CSS: left‬أو ‪ display: inline‬لعرض‬
‫قائمة أفقيًا‪.‬‬
‫‪display: block‬؛‬
‫تنسيق النصوص‬
‫‪ : Heading‬وتختصر ‪ h1‬حتى ‪H6‬‬
‫وهي لكتابة العناوين الرئيسية‬
‫>‪<H1></H1‬‬
‫‪:Paragraph‬‬
‫نستخدم التاج >‪ <p></p‬كتابة البرجراف‬
‫تستخدم >‪ Break Line <br‬لعمل مسافة بين النص‬
‫;‪ : &nbsp‬ﻹعطاء مسافة في نفس السطر‬
‫تاج >‪ <b‬ﻹعطاء سماكة للنص‬
‫>‪<b></b‬‬
‫وسم ‪ Italic Text‬مائل‬
‫>‪<i></i‬‬
‫نص صغير‬
‫>‪<small></small‬‬
‫وسم ‪strong‬‬
‫>‪<strong></strong‬‬
‫‪ strong‬و >‪ <b‬اﻷثنين يعطو سماكة ولكن ‪ strong‬أقوى من ال ‪b‬‬
‫ﻷنها وسم صحيح ومعبر عن معناه‬
‫وهي تعمل نص مائل‬
‫>‪<em></em‬‬
‫ومعناها هتغير معنى الجملة‬
‫اﻹقتباس‬
‫>‪<blockquote></blockquote‬‬
‫وأيضا‬
‫>‪<q></q‬‬
‫والفرق بينهما أن ‪ blockquote‬للنصوص الكبيرة‬
‫وال ‪ q‬للنصوص الصغير ويضعها المتصفح بين كوتشن " "‬
‫تاج لتمييز الكلمة بين النصوص أو البرجراف‬
‫>‪<mark></mark‬‬
‫إضافة جملة خطأ أو مشطوب عليها أو غير صحيحة‬
‫>‪<del></del‬‬
‫وعكسها أو تصحيح خطئها‬
‫>‪<ins></ins‬‬
‫كود يشبه اﻷس في الرياضيات‬
‫>‪ <sup></sup‬سوبر سكريبت‬
‫ويستسخدم في المسائل الرياضية أيضا ً‬
‫ﻹنزال الكلمة أو الحرف‬
‫>‪ <sub></sub‬الصب‬

‫‪ : Tables‬جدول‬
‫الوسم الخاص به >‪<table‬‬
‫ولجعل النص داخل الجدول في المنتصف‬

‫‪ : Table room‬الصف الخاص بالجدول‬
‫>‪<tr></tr‬‬
‫وكل ‪ tr‬يكون بداخلها ‪ td‬أو ‪ th‬وهي خاصة برأس الجدول‬
‫‪ : table data‬بيانات الجدول‬
‫>‪<td></td‬‬
‫‪ : Table heading‬رأس الجدول‬
‫>‪<th></th‬‬
‫وهي تعبر عن رأس الجدول الخاص بالبيانات‬
‫تكون في المنتصف دون أي تدخل من الخواص وتعطي سماكة للكلمة‬

‫‪ : Collapsed Borders‬لجعل ‪ border‬بخط واحد‪single‬‬
‫‪Adding Cell Padding‬‬

‫تحدد مساحة الخﻼيا المساحة بين محتوى الخلية وحدودها‬
‫‪Left-align Headings‬‬
‫بشكل افتراضي ‪ ،‬تكون عناوين الجدول غامقة ويتم توسيطها‪ .‬لمحاذاة عناوين‬
‫‪ CSS-align text‬الجدول ‪ ،‬استخدم خاصية‬

‫‪Adding Border Spacing‬‬
‫تباعد حدود يحدد المسافة بين الخﻼيا‬
‫‪.‬‬
‫>‪<caption‬‬
‫يتم وضعه بعد ‪ tabel‬مباشرة وهو لوصف الجدول‬
‫ويمكن وضعه أو ﻻ كما تريد‬
‫ونﻼحظ أنه يضع تلقائيا خارج ال‪ tabel‬وفي المنتصف‬

‫عندنا في الجدول راس وزيل وجسم كذلك‬
‫رأس الجدول‬
‫>‪<thead></ thead‬‬
‫وفي ‪ CSS‬تكتب‪ thead‬ونضيف الخلية فتكون‪thead‬‬
‫زيل الجدول‬
‫>‪<tfoot></ tfoot‬‬
‫نﻼحظ أننا يمكن كتابته فوق ‪ tbody‬ومع ذلك سوف يكون مكانه في أخر‬
‫الجدول‬
‫وفي ‪ CSS‬تكتب ‪ tfoot‬ونضيف الخلية فتكون‪tfoot td‬‬
‫جسم الجدول‬
‫>‪<tbody></tbody‬‬
‫وفي ‪ CSS‬تكتب ‪ tbody‬ونضيف الخلية فتكون‪tbody td‬‬

‫‪: Colspan‬‬
‫وتقوم بعمل دمج لﻸعمدة رأسيا ً‬
‫وتكتب في الخلية هكذا‬

‫>‪<thcolspan="2">ghgf>/th‬‬
‫‪: Rowspan‬‬
‫وتقوم بعمل الدمج عموديا ً عكس ‪colspan‬‬
‫وتكتب هكذا في ‪html‬‬
‫>‪<td rowspan="2">Text</td‬‬

‫في حالة اردنا تزويد عدد الخﻼيا المدمجة في الصفوف نكتبها منفرد في‬
‫خلية لوحدها كالتالي ‪:‬‬
‫نقوم بزيادة عدد الصفوف في ‪rowspan‬‬

‫‪Colgroup‬‬
‫وهي وسم تكتب لتنسيق أعمدة‬
‫الجدول في ‪Css‬‬
‫>‪<Colgroup></ Colgroup‬‬
‫>‪<colgroup‬‬
‫>‪<"col span="2" style="background-color:red‬‬
‫>‪<"col style="background-color:yellow‬‬
‫>‪<colgroup/‬‬
‫ومعنى هذا‬
‫أن أول عمودين لونهم بالون اﻷحمر‪ ،‬وأخر عمود لونه باللون اﻷصفر‬
‫مثال أخر‪/‬‬

‫نﻼحظ في هذا المثال أننا لم نستخدم ‪ span‬لتحديد عدد اﻷعمدة ولكن هو فرض أن‬
‫> ‪ <col style‬هي العمود اﻷول و>‪ <col style‬هي العمود الثاني وهكذا في‬
‫ترتيب عدد اﻷعمده وتنسيقها‪.‬‬
‫‪Form‬‬
‫‪:Form‬وهو النموذج‬
‫هي بيانات المستخدم التي يحتاجها الموقع‬
‫عناصر النموذج هي أنواع مختلفة من عناصر اﻹدخال ‪ ،‬مثل حقول النص ‪،‬‬
‫ومربعات اﻻختيار ‪ ،‬وأزرار اﻻختيار ‪ ،‬وأزرار اﻹرسال ‪ ،‬والمزيد‪.‬‬
‫>‪<form></form‬‬
‫وهي لها ‪Attribu‬‬
‫وأول خاصية هي ‪name‬‬
‫ونقوم بتعريف ‪ form‬بواسطة خاصية ال ‪name‬‬
‫‪The Action Attribute‬‬

‫تحدد السمة ‪ action‬اﻹجراء المراد تنفيذه عند إرسال النموذج‪.‬‬
‫عادة ً ‪ ،‬يتم إرسال بيانات النموذج إلى صفحة ويب على الخادم عندما يقوم المستخدم‬
‫بالنقر فوق الزر "إرسال‪".‬‬
‫في المثال أعﻼه ‪ ،‬يتم إرسال بيانات النموذج إلى صفحة على الخادم تسمى‬
‫‪"/action_page.php".‬تحتوي هذه الصفحة على نص برمجي من جانب‬
‫الخادم يتعامل مع بيانات النموذج‪:‬‬

‫‪The Target Attribute‬‬
‫تحدد السمة ‪ Target‬إذا كانت النتيجة المقدمة ستفتح في عﻼمة تبويب متصفح‬
‫جديدة أو إطار أو في النافذة الحالية‪.‬‬
‫القيمة اﻻفتراضية هي "‪ "_self‬والتي تعني أن النموذج سيتم إرساله في النافذة‬
‫الحالية‬
‫لجعل نتيجة النموذج مفتوحة في عﻼمة تبويب المتصفح الجديدة ‪ ،‬استخدم القيمة‪"_blank":‬‬
‫‪The Method Attribute‬‬

‫تحدد السمة ‪ method‬طريقة ‪ HTTP‬وهي )‪ (GET & POST‬التي سيتم‬
‫استخدامها عند إرسال بيانات النموذج‬
‫‪ : Get‬عند استخدام ‪ ، GET‬ستكون بيانات النموذج المرسلة مرئية في حقل عنوان الصفحة‬
‫وهي الطريقة اﻹفتراضية‪.‬‬
‫‪ : Post‬عند استخدام ‪ ، post‬ستكون بيانات النموذج المرسلة غير مرئية في حقل عنوان‬
‫الصفحة‬
‫‪ : Label‬الملصق أو التسمية لحقل اﻹدخال للذي اسفله‬

‫أنواع المدخ ت ‪Input Types :‬‬
‫‪ : type‬هو نوع الحقل‬ ‫>‪ <input‬هو حقل ادخال &‬
‫‪ : Text‬نص‬
‫>"‪ <input type="text‬حقل اﻹدخال نص‬
‫‪ : Password‬كلمة السر‬
‫>"‪ <input type="password‬وفيها يظهر الكﻼم نجوم ﻷنها‬
‫باسورد‬
‫‪ : Name‬اسم الحقل يجب أن يكون لكل حقل إدخال خاصية اسم ليتم‬
‫تقديمها‪.‬‬
‫إذا تم حذف سمة اﻻسم ‪ ،‬فلن يتم إرسال بيانات حقل اﻹدخال هذا على‬
‫اﻹطﻼق‪.‬‬
‫‪ : Maxlength‬أقصى عدد للحروف في الكتابة‪.‬‬
‫‪ : Value‬قيمة الحقل وممكن تكتب في البرمجة وتمسح من قبل المستخدم‬

‫ويكتب غيرها ‪.‬‬

‫‪ : Placeholder‬وهو يوضح ماذا تكتب في الحقل ويختفي عند الكتابة‬
‫في الحقل وهو جديد في ‪.html5‬‬
‫‪ : Checkbox‬وهي تستخدم عند تسجيل الدخول في الموقع ليتذكر‬

‫الموقع المستخدم وتستخدم في تحديد عدد من الخيارات‬
‫زرا ﻹرسال بيانات النموذج إلى معالج النموذج ‪.‬‬

‫‪ : Submit‬يحدد ً‬
‫ولتغير اسمها نستخدم ‪valu‬‬
‫‪ : Reset‬يعيد الحقول وكل النموذج للوضع ‪ default‬اﻷصلي‬

‫يحدد زر إعادة التعيين الذي سيؤدي إلى إعادة تعيين جميع قيم النماذج إلى‬
‫قيمها اﻻفتراضية‪.‬‬
‫>"‪<input type="reset‬‬
‫‪ : File‬وهي خاصية ‪ Choos file‬وهي اختيار المراف المرادة لرفعها‬
‫على النت‬

‫‪ : Button‬يحدد زر‬
‫في الغالب يستخدم مع ‪Javascript‬‬
‫‪ :Radio‬وهي لعرض اﻹختيارات في النموذج‬

‫تسمح أزرار اﻻختيار للمستخدم بتحديد واحد فقط من عدد محدود من الخيارات‬
‫‪ : Texetarea‬تحدد العﻼمة >‪ <textarea‬تحكم إدخال نص متعدد‬

‫اﻷسطر‪.‬‬
‫‪ :Rows‬عدد الصفوف التي تظهرفي ‪Text‬‬

‫‪ : Cols‬عرض اﻻسطر‬

‫‪: Readonly‬للقرأة فقط وﻻ يسمح بالتعديل عليها‬
‫‪ :Fieldset‬لعمل بوكس حول النص‬

‫‪ : Legend‬عنوان ال ‪Fieldset‬‬

‫‪Select‬‬
‫يتم استخدام عنصر >‪ <select‬ﻹنشاء قائمة منسدلة‪.‬‬
‫تحدد عﻼمات >‪ <option‬داخل العنصر >‪ <select‬الخيارات المتاحة‬
‫>‪<select name=" ***"Size="1"></select‬‬

‫يعتبر ‪ name‬من اللغه البرمجية التي تخاطب السيرفر‬
‫في القائمة‪ .‬ﻹعطاء خيارات لل ‪ select‬نضيف‬

‫>‪<option></option‬‬
‫‪ : Disabled‬لغلق وعدم التفعيل‬
‫‪ : Size‬لتحديد اﻷختيارات المشاهدة‬

‫ومعناها اظهر لي خيارين فقط والباقي‬
‫اظهره بالسكرول‬
‫‪ : Multiple‬وهو اﻷختيار المتعدد من ‪ select‬يعني تختار أكتر من خيار‬
‫في نفس الوقت‬

‫‪ : Name‬قائمة منسدلة تحتوى على سمة اسم‬
‫‪ : Required‬وهي تعني أنه مطلوب فﻼبد من‬
‫اﻷختيار‪ ،‬فعند عندم اﻷختيار تظهر هذه الرسالة‪.‬‬
‫‪ : Autofocus‬تركيز‬
‫وهو عند فتح الصفحة يتم التركيز على القائمة‬
‫‪ : From id‬هو ربط ال ‪ select‬غير مربوطة بـ ‪ form‬عن طريق‬

‫وضع ‪ id‬للـ ‪ form‬ثم استدعائه داخل ال ‪select‬‬
‫‪Option‬‬
‫‪ Option‬ياخذ نفس الخصائص أيضا ً‬

‫‪Optgroup‬‬
‫>‪<Optgroup></ Optgroup‬‬
‫وتستخدم لتنسيق ‪ option‬وتوصف مجموعة ‪ groub‬داخل ال ‪select‬‬
‫ويجمع الخيارات المتعددة تحت عنوان واحد‬
‫مﻼحظة ‪ :‬وكذلك نستطيع عمل ‪ disabled‬لـ ‪optgroup‬‬

‫الفرق بين ‪Checkbox & Radio‬‬
‫‪ :‬تسمح لك باﻷختيارالمتعدد‬ ‫‪Checkbox‬‬
‫‪ :‬تسمح لك باﻷختيار واحد فقط‬ ‫‪Radio‬‬

‫‪Ifarme‬‬
‫>‪<Ifarme><Ifarme‬‬
‫ﻹستدعاء صفحة أخرى داخل موقعك‬
‫‪Scrolling‬‬
‫وهي تخفي أو تظهر مؤشر الصعود والهبوط للصفحة‬
‫"‪ Scrolling="no‬في ‪ html‬تكتب‬
‫‪ Overflow:hidden‬تكتب في ‪CSS‬‬
‫للمزيد‬
‫‪h ps://www.w3schools.com/tags/tag_iframe.asp‬‬

‫مجموعة عﻼمات‬
‫;‪: &nbsp‬ﻹعطاء مسافة في نفس السطر‬
‫‪&non breaking space‬‬
‫;‪ :&Lt‬وتعطي عﻼمة <‬

‫;‪ :&gt‬وتعطي عﻼمة >‬
‫مجموعة عﻼمات أخرى‬

ملخصات HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

ملخصات HTML

Uploaded by

Copyright:

Available Formats

Web Design

[HTML ‫]مذكرة عن‬

‫‪Hypertext Markup Language‬‬

‫‪ Markup‬يعني لغه من لغات تصميم موقع الويب‬

‫هذا يسمى تاج‬

‫يوجد للغة ‪ Html‬عدةأصدارات أول أصدار ظهر لها عام ‪١٩٩١‬‬

‫‪HTML5‬‬ ‫وأخر اصدار لها صدر سنة ‪ ٢٠١٢‬وهو‬

‫‪2‬‬ ‫مذكرة في لغة ‪ Html‬مجمعة من كورس الزيرو وترجمة موقع ‪w3‬‬

‫>‪ :<title></title‬ويتم كتابة عنوان الصفحة بداخلة‬

‫‪3‬‬ ‫مذكرة في لغة ‪ Html‬مجمعة من كورس الزيرو وترجمة موقع ‪w3‬‬

‫‪ : Class‬وﻻبد عند اختيار اسم ال ‪ class‬أن يكون معبر عن محتوها‬

‫‪4‬‬ ‫مذكرة في لغة ‪ Html‬مجمعة من كورس الزيرو وترجمة موقع ‪w3‬‬

‫‪The target Attribute‬‬

‫‪ parent‬يفتح المستند المرتبط في اﻹطار اﻷصل‬

‫‪ top‬يفتح المستند المرتبط في النص الكامل للنافذة‬

‫إذا أردنا التنقل داخل صفحة الويب‬

‫‪5‬‬ ‫مذكرة في لغة ‪ Html‬مجمعة من كورس الزيرو وترجمة موقع ‪w3‬‬

‫إذا كانت الصور في فولدر يسبق ملف الويب‬

‫‪6‬‬ ‫مذكرة في لغة ‪ Html‬مجمعة من كورس الزيرو وترجمة موقع ‪w3‬‬

‫‪ :Unordered List‬هناك قوائم غير مرتبة‬

‫‪ :Order List‬قوائم مرتبة‬

‫بإستخدام ‪ <ol type="1"> typs‬فإنه بإمكاننا تغير ترتيب القائمة‬

‫‪7‬‬ ‫مذكرة في لغة ‪ Html‬مجمعة من كورس الزيرو وترجمة موقع ‪w3‬‬

‫يمكن كذلك جعل القائمة تبدأ من رقم معين بإستخدام ‪start‬‬

‫‪8‬‬ ‫مذكرة في لغة ‪ Html‬مجمعة من كورس الزيرو وترجمة موقع ‪w3‬‬

‫‪10‬‬ ‫مذكرة في لغة ‪ Html‬مجمعة من كورس الزيرو وترجمة موقع ‪w3‬‬

‫ولجعل النص داخل الجدول في المنتصف‬

‫‪11‬‬ ‫مذكرة في لغة ‪ Html‬مجمعة من كورس الزيرو وترجمة موقع ‪w3‬‬

‫‪Adding Cell Padding‬‬

‫‪12‬‬ ‫مذكرة في لغة ‪ Html‬مجمعة من كورس الزيرو وترجمة موقع ‪w3‬‬

‫‪13‬‬ ‫مذكرة في لغة ‪ Html‬مجمعة من كورس الزيرو وترجمة موقع ‪w3‬‬

‫‪14‬‬ ‫مذكرة في لغة ‪ Html‬مجمعة من كورس الزيرو وترجمة موقع ‪w3‬‬

‫وتكتب في الخلية هكذا‬

‫‪15‬‬ ‫مذكرة في لغة ‪ Html‬مجمعة من كورس الزيرو وترجمة موقع ‪w3‬‬

‫‪16‬‬ ‫مذكرة في لغة ‪ Html‬مجمعة من كورس الزيرو وترجمة موقع ‪w3‬‬

‫>‪<"col span="2" style="background-color:red‬‬

‫‪17‬‬ ‫مذكرة في لغة ‪ Html‬مجمعة من كورس الزيرو وترجمة موقع ‪w3‬‬

‫‪The Action Attribute‬‬

‫‪18‬‬ ‫مذكرة في لغة ‪ Html‬مجمعة من كورس الزيرو وترجمة موقع ‪w3‬‬

‫‪The Method Attribute‬‬

‫‪ : Label‬الملصق أو التسمية لحقل اﻹدخال للذي اسفله‬

‫‪19‬‬ ‫مذكرة في لغة ‪ Html‬مجمعة من كورس الزيرو وترجمة موقع ‪w3‬‬

‫‪ : Maxlength‬أقصى عدد للحروف في الكتابة‪.‬‬

‫‪ : Value‬قيمة الحقل وممكن تكتب في البرمجة وتمسح من قبل المستخدم‬

‫‪20‬‬ ‫مذكرة في لغة ‪ Html‬مجمعة من كورس الزيرو وترجمة موقع ‪w3‬‬

‫‪ : Checkbox‬وهي تستخدم عند تسجيل الدخول في الموقع ليتذكر‬

‫زرا ﻹرسال بيانات النموذج إلى معالج النموذج ‪.‬‬

‫‪ : Reset‬يعيد الحقول وكل النموذج للوضع ‪ default‬اﻷصلي‬

‫‪21‬‬ ‫مذكرة في لغة ‪ Html‬مجمعة من كورس الزيرو وترجمة موقع ‪w3‬‬

‫‪ :Radio‬وهي لعرض اﻹختيارات في النموذج‬

‫‪ : Texetarea‬تحدد العﻼمة >‪ <textarea‬تحكم إدخال نص متعدد‬

‫‪ :Rows‬عدد الصفوف التي تظهرفي ‪Text‬‬

‫‪22‬‬ ‫مذكرة في لغة ‪ Html‬مجمعة من كورس الزيرو وترجمة موقع ‪w3‬‬

‫‪ :Fieldset‬لعمل بوكس حول النص‬

‫‪23‬‬ ‫مذكرة في لغة ‪ Html‬مجمعة من كورس الزيرو وترجمة موقع ‪w3‬‬

‫>‪<select name=" ***"Size="1"></select‬‬

‫في القائمة‪ .‬ﻹعطاء خيارات لل ‪ select‬نضيف‬

‫‪ : Disabled‬لغلق وعدم التفعيل‬

‫‪ : Size‬لتحديد اﻷختيارات المشاهدة‬

‫‪24‬‬ ‫مذكرة في لغة ‪ Html‬مجمعة من كورس الزيرو وترجمة موقع ‪w3‬‬

‫‪ : From id‬هو ربط ال ‪ select‬غير مربوطة بـ ‪ form‬عن طريق‬

‫‪25‬‬ ‫مذكرة في لغة ‪ Html‬مجمعة من كورس الزيرو وترجمة موقع ‪w3‬‬

‫مﻼحظة ‪ :‬وكذلك نستطيع عمل ‪ disabled‬لـ ‪optgroup‬‬