يبدأ إنشاء صفحات الويب بـ HTML. يأتي تجميلها وجعلها تفاعلية في وقت لاحق. ولكن لبدء إنشاء مواقع ثابتة ثابتة ، تحتاج إلى فهم HTML. (هل تريد مقدمة سريعة لهذه اللغة الترميزية؟ اقرأ الأسئلة الشائعة حول HTML.)

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

تغطي ورقة الغش العلامات والسمات لتنظيم صفحات الويب وتنسيق النص وإضافة النماذج والصور والقوائم والروابط والجداول. ويتضمن أيضًا العلامات التي تم تقديمها في أكواد HTML5 و HTML للأحرف الخاصة الشائعة الاستخدام.

تحميل مجاني: تتوفر ورقة الغش هذه كملف PDF للتحميل من شريكنا في التوزيع ، TradePub. سيكون عليك إكمال نموذج قصير للوصول إليه للمرة الأولى فقط. تحميل ورقة الملاحظات الأساسية لـ HTML Essentials.

ورقة الملاحظات الأساسية لـ HTML Essentials

instagram viewer
... ... ... ... ...
الاختصار عمل
العلامات الأساسية
... العلامة الأولى والأخيرة لمستند HTML. تقع جميع العلامات الأخرى بين علامتي الفتح والإغلاق.
... يحدد مجموعة البيانات الأولية للوثيقة.
... يصف عنوان الصفحة ويظهر في شريط عنوان المتصفح.
... يتضمن كل المحتوى الذي سيتم عرضه على صفحة الويب.
معلومات المستند
يذكر عنوان URL الأساسي وجميع الروابط النسبية للمستند.
للحصول على معلومات إضافية حول الصفحة مثل المؤلف وتاريخ النشر وما إلى ذلك.
روابط لعناصر خارجية مثل أوراق الأنماط.
يحتوي على معلومات نمط المستند مثل CSS (أوراق الأنماط المتتالية).
يحتوي على روابط لنصوص خارجية.
تنسيق النص
... أو
...
يجعل النص غامق.
... مائل النص ويجعله غامق.
... مائل النص ولكن لا يجعله غامق.
... نص يتوسطه خط.
... يستشهد مؤلف الاقتباس.
... تصنيف جزء محذوف من النص.
... يعرض القسم الذي تم إدراجه في المحتوى.
...
لعرض الاقتباسات. كثيرا ما تستخدم مع بطاقة شعار.
... لعروض أسعار أقصر.
... للاختصارات والأشكال الكاملة.
...
يحدد تفاصيل الاتصال.
... للتعريفات.
... لمقتطفات الشفرة.
... لكتابة الاشتراكات
... لكتابة الكتابة الفوقية.
... لتقليل حجم النص ووضع علامة على المعلومات المتكررة في HTML5.
هيكل الوثيقة
... مستويات مختلفة من العناوين. H1 هو الأكبر و H6 هو الأصغر.
...

لتقسيم المحتوى إلى كتل.
... يتضمن عناصر مضمنة ، مثل صورة وأيقونة ورمز تعبيري ، دون إتلاف تنسيق الصفحة.

...

يحتوي على نص عادي.

ينشئ خطًا جديدًا.

رسم شريط أفقي لإظهار نهاية القسم.
القوائم
    ...
للحصول على قائمة العناصر المطلوبة.
    ...
للحصول على قائمة غير مرتبة من العناصر.
  • ...
  • للعناصر الفردية في قائمة.
    ...
    قائمة العناصر ذات التعاريف.
    ...
    تعريف مصطلح واحد يتماشى مع محتوى الجسم.
    ...
    وصف المصطلح المحدد.
    الروابط
    ... علامة مرساة للارتباطات التشعبية.
    ... علامة لربط عناوين البريد الإلكتروني.
    ... علامة مرساة لإدراج أرقام الاتصال.
    ... علامة ربط للربط بجزء آخر من نفس الصفحة.
    ... للانتقال إلى قسم div في صفحة الويب. (اختلاف العلامة أعلاه)
    صور

    لعرض ملفات الصور.
    سمات بطاقة شعار
    src = ”url” رابط المسار المصدر للصورة.
    alt = "text" يتم عرض النص عند تمرير الماوس فوق الصورة.
    الارتفاع = "" ارتفاع الصورة بالبكسل أو النسب المئوية.
    العرض = "" عرض الصورة بالبكسل أو النسب المئوية.
    محاذاة = "" المحاذاة النسبية للصورة على الصفحة.
    الحد = "" سمك حدود الصورة.
    ... رابط لخريطة قابلة للنقر.
    ...
    اسم صورة الخريطة.
    منطقة الصورة لخريطة الصورة.
    سمات بطاقة شعار
    الشكل = "" شكل منطقة الصورة.
    coords = "” إحداثيات منطقة صورة الخريطة.
    نماذج
    ...
    علامة الأصل لنموذج HTML.
    سمات
    بطاقة شعار
    action = ”url” عنوان URL حيث يتم إرسال بيانات النموذج.
    الطريقة = "" يحدد بروتوكول تقديم النموذج (POST أو GET).
    enctype = "” مخطط تشفير البيانات لتقديم الطلبات.
    الإكمال التلقائي لتحديد ما إذا كان الإكمال التلقائي للنموذج قيد التشغيل أو إيقاف التشغيل.
    نوفاليدات يحدد ما إذا كان يجب التحقق من صحة النموذج قبل الإرسال.
    قبول المحارف يحدد ترميز الأحرف لعمليات إرسال النموذج.
    استهداف يوضح مكان عرض استجابة إرسال النموذج.
    ...
    المجموعات المتعلقة بالمجموعات في النموذج /
    يحدد ما يجب على المستخدم إدخاله في كل حقل نموذج.
    ... تسمية توضيحية لعنصر مجموعة الحقول.
    يحدد نوع الإدخال الذي يجب أخذه من المستخدم.
    سمات بطاقة شعار
    اكتب = "” يحدد نوع الإدخال (النص والتواريخ وكلمة المرور).
    name = "" يحدد اسم حقل الإدخال.
    القيمة = "” يحدد القيمة في مجال الادخال.
    الحجم = "" يضبط عدد الأحرف في حقل الإدخال.
    الحد الأقصى = "" لتعيين الحد المسموح به من أحرف الإدخال.
    مطلوب يجعل حقل الإدخال إلزاميًا.
    العرض = "" يضبط عرض حقل الإدخال بالبكسل.
    الارتفاع = "" يضبط ارتفاع حقل الإدخال بالبكسل.
    عنصر نائب = "” يصف قيمة الحقل المتوقعة.
    النمط = "" يحدد تعبيرًا عاديًا ، يمكن استخدامه للبحث عن الأنماط في نص المستخدم.
    دقيقة = "" القيمة الدنيا المسموح بها لعنصر الإدخال.
    ماكس = "" القيمة القصوى المسموح بها لعنصر الإدخال.
    معاق تعطيل عنصر الإدخال.
    لالتقاط سلاسل أطول من البيانات من المستخدم.
    يحدد قائمة بالخيارات التي يمكن للمستخدم الاختيار من بينها.
    سمات
    name = "" يحدد اسم قائمة منسدلة.
    الحجم = "" عدد الخيارات المتاحة للمستخدم.
    مضاعف لتعيين ما إذا كان يمكن للمستخدم اختيار خيارات متعددة من القائمة.
    مطلوب يحدد ما إذا كان اختيار خيار / خيارات ضروريًا لإرسال النموذج.
    ضبط تلقائي للصورة يحدد أن القائمة المنسدلة يتم التركيز عليها تلقائيًا بعد تحميل الصفحة.
    يحدد العناصر في قائمة منسدلة.
    القيمة = "”
    يعرض النص لأي خيار معين.
    المحدد تعيين الخيار الافتراضي المعروض.
    علامة لإنشاء زر لإرسال النموذج.
    كائنات وإطارات
    ... يصف نوع الملف المضمن.
    سمات بطاقة شعار
    الارتفاع = "" ارتفاع الجسم.
    العرض = "" عرض الكائن.
    اكتب = "” نوع الوسائط التي يحتوي عليها الكائن.
    إطار مضمن لدمج المعلومات الخارجية.
    name = "" اسم iFrame.
    src = ”” عنوان URL المصدر للمحتوى داخل الإطار.
    srcdoc = "” محتوى HTML داخل الإطار.
    الارتفاع = "" ارتفاع iFrame.
    العرض = "" عرض iFrame.
    يضيف معلمات إضافية لتخصيص iFrame.
    ... يدمج التطبيق الخارجي أو البرنامج المساعد.
    سمات بطاقة شعار
    الارتفاع = "" يضبط ارتفاع التضمين.
    العرض = "" يضبط عرض التضمين.
    اكتب = "” نوع أو تنسيق التضمين.
    src = ”” المسار المصدر للملف المضمن.
    الجداول
    ...
    يحدد كل محتوى الجدول.
    ...
    وصف الجدول.
    رؤوس كل عمود في الجدول.
    يحدد بيانات الجسم للجدول.
    يصف محتوى تذييل الجدول.
    محتوى صف واحد.
    ... البيانات في عنصر رأس واحد.
    ... المحتوى داخل خلية جدول واحد.
    أعمدة المجموعات للتنسيق.
    عمود واحد من المعلومات.
    علامات HTML5 الجديدة
    ...
    يحدد رأس صفحة الويب.
    ...
    يحدد تذييل صفحة الويب.
    ...
    وضع علامة على المحتوى الرئيسي لصفحة الويب.
    ...
    يحدد مقال.
    يحدد محتوى الشريط الجانبي للصفحة.
    ...
    يحدد قسمًا معينًا في صفحة الويب.
    ...
    لوصف المعلومات الإضافية.
    ... تستخدم كعنوان للعلامة أعلاه. مرئي دائمًا للمستخدم.
    ... ينشئ مربع حوار.
    ...
    تستخدم لتضمين الرسوم البيانية والأشكال.
    ...
    يصف أ
    جزء.
    ... يبرز جزءًا محددًا من النص.
    مجموعة من ارتباطات التنقل على صفحة ويب.
    ... عنصر معين من قائمة أو قائمة.
    ... يقيس البيانات ضمن نطاق معين.
    ... يضع شريط التقدم ويتتبع التقدم.
    ... يعرض النص الذي لا يدعم التعليقات التوضيحية لروبي.
    ... يعرض تفاصيل حرف الطباعة شرق آسيا.
    ... شرح روبي للطباعة في شرق آسيا.
    يحدد الوقت والتاريخ.
    فاصل أسطر داخل المحتوى.
    ¹HTML5 كائنات الأحرف
    "أو
    & quot؛
    علامات الاقتباس
    العلامة & lt ؛
    أقل من تسجيل (
    > أو
    & GT.
    أكبر من تسجيل (>)
    أو
    & نبسب ؛
    مسافة غير منقسمة
    © OR
    & نسخ
    رمز حقوق التأليف والنشر
    ™ OR
    & ucirc ؛
    رمز العلامة التجارية
    @ OR
    & Uuml ؛
    "في الرمز (@)
    & OR
    & أمبير ؛
    رمز علامة الضم (&)
    • أو
    & ouml؛
    رصاصة صغيرة
    space تجاهل المساحة قبل الفاصلة المنقوطة أثناء كتابة حرف HTML.

    أنشئ موقعًا إلكترونيًا للتجربة العملية

    بمجرد أن تفهم أساسيات كود HTML ولديهم معرفة عملية بـ CSS و JavaScript ، جرب يدك في بناء موقع على شبكة الإنترنت كيفية إنشاء موقع على شبكة الإنترنت: للمبتدئينسأرشدك اليوم خلال عملية إنشاء موقع ويب كامل من الصفر. لا تقلق إذا كان هذا يبدو صعبًا. سأرشدك خلال كل خطوة على الطريق. قراءة المزيد . أيضا ، تأكد من حفظ لدينا ورقة الغش خصائص CSS3 ورقة الملاحظات الأساسية لخصائص CSS3إتقان بناء جملة CSS الأساسية مع ورقة الغش الخاصة بخصائص CSS3. قراءة المزيد و ورقة الغش JavaScript ورقة الغش JavaScript النهائيةاحصل على تحديث سريع لعناصر JavaScript باستخدام ورقة الغش هذه. قراءة المزيد لاستخدامها في المستقبل!

    تدرب أكشاتا على الاختبار اليدوي والرسوم المتحركة وتصميم تجربة المستخدم قبل التركيز على التكنولوجيا والكتابة. جمع هذا بين اثنين من أنشطتها المفضلة - فهم الأنظمة وتبسيط المصطلحات. في MakeUseOf ، يكتب Akshata حول تحقيق أفضل أداء من أجهزة Apple الخاصة بك.