كيفية إنشاء موقع ويب ، الجزء 2 ، موقع كامل مصنوع من 0 في HTML ، CSS مع معرض للصور - فيديو تعليمي

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

أي شخص يريد فتح موقع على شبكة الانترنت، تحتاج إلى معرفة HTML و CSS، فإنه ليس من الضروري أن تكون خبيرا في HTML (Hyper Tتحويلة MArkupe Language) ، لكن بعض معلومات الشفرة ضرورية للغاية لفهم كيفية عمل هذه الأشياء.

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

كثير من الناس يهربون من الكود ، والكثير يشبه الكود الهيروغليفي ، الأمر ليس كذلك على الإطلاق ، قال أحدهم ذات مرة: "الكود هو POETRY" ، كان على حق ، عندما ترى أن شيئًا ما يولد من سلسلة من سطور الكود ، تشعر أنك رائع ، تبني العالم الافتراضي مع لوحة المفاتيح والماوس فقط.

استخدمنا التطبيقات التي أنشأتها شركات البرمجيات لفترة طويلة ، وقمنا فقط بتشغيل الكمبيوتر ، وحان الوقت للقيام بالبرمجة ، في الواقع ليست لغة برمجة ، إنها "لغة ترميز" ، لكننا سنشير إلى إنها مثل لغة برمجة ، لأنها تبدو "لغة ترميز" غريبة جدًا ، HTML هي واحدة من أسهل لغات البرمجة (الترميز) المستخدمة في الوقت الحاضر ، نرى HTML على أي موقع ، يوجد العديد من البرامج في إنها مكونات HTML ، لغة البرمجة هذه في كل مكان ، حان الوقت لتعلمها.

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

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

سوف تتعلم تقنيات بسيطة من الأساسية HTML و CSS، ورغم أن هذه هي الأشياء الأساسية في HTML و CSS، وخلق لمحة لطيفة.

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

بعد هذا البرنامج التعليمي، وأود أن أقول بالطبع حتى المكثف، سيكون لديك فكرة أفضل عن ما HTML و CSS، يمكنك التحكم رمز جيدا أنك تفهم تماما وثيقة الشعور HTML HTML ليست فقط خط heroglife سوف تتبدد، وانت تعرف ما هو عليه عند النظر في مستند أو CSS HTML.

نتعلم عن علامات (علامة مميزة)، لدينا هنا بعض الأمثلة من الأكواد (التسميات) التي يمكنك استخدامها في وثيقة HTML، لا تقلق، لا حاجة لتخزين كل منهم، وتحتاج فقط إلى تعلم أساسيات في الجدول الأول بقية ويمكن الاطلاع هنا على الموقع أو على شبكة الانترنت عندما كنت في حاجة إليها.

تنظم حتى الجداول هذه العلامات، يتم إجراؤها باستخدام HTML.

العناصر الأساسية (العلامات).

تعريف ملف تنسيق ويب
رأس المستند
وثيقة Tilul
الجسم من صفحة HTML
BGCOLOR = اللون لون خلفية الصفحة
TEXT =اللون صفحة لون النص
LINK =اللون لم تسبق زيارتها لون الرابط من الصفحة
Vlink =اللون زار اللون ارتباط من صفحة
ALINK =اللون لون الرابط خلال نقرة المستخدم exacutat
BACKGROUND = URL صورة الخلفية للصفحة
فقرة
<Hn> <حn> مستوى الترجمة من وثيقة (n = 1-6)
تحدد سمات نص مؤطر
SIZE =n حجم النص 1-7
وجه ="أ ، ب" يحدد الخط: aإذا كانت متوفرة، أو b
COLOR =s لون الخط: إما اسم اللون أو قيمة RGB
السطر الجديد
المعلومات مسبقا
HTML Comenatriu
مادة يعبر الصفحة
المسطرة الأفقية
SIZE =x ارتفاع حاكم بالبكسل
WIDTH =x عرض حاكم في بكسل أو النسب المئوية
NOSHADE تعطيل الظل عرض المسطرة الأفقية
ALIGN =x محاذاة المسطرة الأفقية على الصفحة (يسار، وسط، يمين)
COLOR =x لون المسطرة الأفقية (IE فقط)
مرساة علامة
أ href =URL مرجع النص التشعبي
أ href =# اسم إشارة إلى مرساة الداخلية
اسم =اسم تعريف المراسي الداخلية

قوائم العناصر .

تعريف الوصف
قائمة تعريف نوع
تعريف مصطلح
قائمة ميزة
<OL قائمة مرتبة (مرقمة)
TYPE =معلومات سرية اكتب الترقيم. القيم الممكنة: A، A، أنا، أنا، 1
ستارت =x عدد بدءا من قائمة مرتبة
<أول قائمة غير مرتبة (ق)
TYPE =شكل شكل علامات. القيم المحتملة: دائرة، مربع، القرص.

عناصر تنسيق الأحرف .

لصق النص في جريئة
لصق النص بخط مائل
لصق النص المميز
مينى باص خط النص
اقتبس bibliogarfica
قائمة برنامج
تسليط الضوء على نمط منطقي
النص من لوحة المفاتيح
تسليط الضوء على منطق قوي
برنامج أو متغير
<الخط الأساسي SIZE = n> يحدد حجم الخط الافتراضي للصفحة

عناصر للإطارات .

تعريف الصفحة الكتابة
COLS =x عدد والحجم النسبي للأعمدة
الصفوف =x عدد والحجم النسبي للخطوط
الحدود =x تحديد حالة "تشغيل" أو "إيقاف تشغيل" لإطار FRAMESET (1 أو 0)
Frameborder = x يحدد حجم الإطار
Framespacing = x مقدار المساحة بين إطارين المجاورة
تعريف إطار معين
SRC =URL إطار مصدر URL
اسم =اسم اسم الإطار (يستخدم بالاقتران مع TARGET = الاسم كجزء من علامة الربط
التمرير =SCRL تحديد خيار ممكن شريط derulare.Valori: على (تمكين)، قبالة (ذوي الاحتياجات الخاصة)، والسيارات (تلقائيا)
Frameborder =x الحدود حول حجم الإطار
Marginheight =x مساحة إضافية فوق وتحت إطار معين
Marginwidth =x الفضاء وحدة إضافية إلى اليسار واليمين من إطار محدد
قسم الصفحة المعروضة للمستخدمين الذين لا يمكن رؤية الإطار
الإطار الداخلي (ل (IE)
SRC =URL إطار مصدر
اسم =s نافذة اسم (مفيدة للهدف)
HEIGHT =x ارتفاع جزءا لا يتجزأ من
WIDTH =x جزءا لا يتجزأ من عرض الإطار

سلع للجداول .

الجدول HTML
الحدود =x الجدول مربع
بطانة الخلايا =x مساحة إضافية داخل خلايا الجدول
هوامش الخلية =x مساحة إضافية بين خلايا الجدول
WIDTH =x فرضت عرض الجدول
FRAME =قيمة التعديل غرامة من الجدول
قواعد =قيمة الضبط الدقيق للحكام الطاولة
لون _ الحدود = اللون يحدد الجدول لون الحدود
BORDERCOLORLIGHT = اللون لون أخف وزنا من اثنين من الألوان المحددة
BORDERCOLORDARK = اللون لون أغمق من اثنين من الألوان المحددة
ALIGN =اليسار محاذاة الجدول على يسار الصفحة ويتدفق النص الجانب الأيمن
ALIGN =حق محاذاة الجدول على الجانب الأيمن من الصفحة، ويتدفق النص إلى اليسار
Hspace =x الفضاء وحدة إضافية الأفقي حول الطاولة
Vspace =x الفضاء وحدة إضافية العمودي حول طاولة
COLS =x يحدد عدد أعمدة من جدول
يحدد مجموعة من تعريفات الأعمدة باستخدام العلامات
<كول WIDTH =x> تعريف عرض العمود بالبكسل
يحدد عنوان الجدول
يحدد الجدول الجسم
طاولة خط
BGCOLOR =اللون يحدد لون الخلفية للخط كامل
ALIGN =المحاذاة محاذاة الخلايا في الصف الحالي (يسار، وسط، يمين)
الخلية من بيانات الجدول
BGCOLOR =اللون يحدد لون الخلفية لبيانات الخلية
كولسبان =x عدد الأعمدة التي تمتد بيانات الخلية الحالية
روسبان =x عدد الأسطر من البيانات التي تغطي الخلية الحالية
ALIGN =المحاذاة محاذاة نسيج الخلية date.Valori ممكن (يسار، يمين، وسط)
Valign =المحاذاة المحاذاة العمودية للمادة الخلية date.Valori ممكن: (أعلى، أسفل، الأوسط)
BACKGROUND =URL تحديد صورة خلفية لخلية الجدول
NOWRAP لا تسمح خطوط الفصل بين النص داخل خلية
ALIGN =خط الأساس محاذاة الخلايا مع بيانات خط الأساس إلى النص المجاور
ALIGN =حرف محاذاة عمود إلى حرف معين (الحرف الافتراضي هو ".")
ALIGN =تبرير محاذاة حافة حافة كل من اليسار واليمين من النص

إضافة عناصر الصورة.

<IMG وسم الصور مدخلات
SRC =URL ملف الرسم مصدر
ALT =نص النص البديل لعرض إذا لزم الأمر
ALIGN =المحاذاة محاذاة الصورة في الصفحة. القيم المحتملة: أعلى (أعلى)، الشرق (الأوسط)، أسفل (أسفل)، اليسار (يسار)، الحق (حق)
HEIGHT =x ارتفاع الصورة (بالبكسل)
WIDTH =x العرض صورة
الحدود =x الإطار حول الصورة عند استخدامه كارتباط تشعبي
Hspace =x الفضاء الأفقي إضافية حول الصورة (بالبكسل)
Vspace =x المسافة العمودية إضافية حول الصورة (بالبكسل)

أشكال العناصر.

شكل HTML بالموقع
ACTION =URL برنامج CGI على الملقم الذي يتلقى البيانات
أسلوب =طريقة كيف اتخاذ البيانات إلى الخادم (GET أو POST)
<الإدخال حقل النص أو الإدخال الأخرى
TYPE =خيار نوع حقل الإدخال . القيم الممكنة: نص ، كلمة مرور ، مربع اختيار ، مخفي ، ملف ،
الراديو، تقديم، إعادة، صورة.
اسم =اسم اسم رمزي من حقل القيمة
VALUE =قيمة محتويات الافتراضي لحقل النص
فحصها = خيار زر / مربع ملحوظ افتراضي
SIZE =x عدد الأحرف في حقل النص
SIZE =x الحد الأقصى لعدد الأحرف المسموح بها
خانات الاختيار المجموعة
اسم =اسم اسم رمزي من حقل القيمة
SIZE =x عدد عناصر القائمة التي يتم عرضها مرة واحدة (الافتراضي = 1)
متعددة =x يسمح اختيار عناصر القائمة متعددة
<الخيار اختيار خاص في المجال
VALUE =قيمة القيمة الناتجة من التحديدات في القائمة
تعزيز كامب النص على عدة أسطر
اسم =اسم اسم رمزي من حقل القيمة
الصفوف =x عدد الأسطر في مربع النص
COLS =x عدد الأعمدة (الحروف) في كل سطر من مربع النص
حصة شكل إلى أجزاء منطقية
يرتبط اسم مجموعة من الحقول (fieldset)
ALIGN =s تحديد محاذاة للأسطورة (شرح) عرض (أعلى، أسفل، يسار، يمين)
Tabindex =x يحدد ترتيب العناصر عندما يقوم المستخدم بالضغط على مفتاح Tab
ACCESKEY =c تعين أن يوفر مفتاح الاختصار على لوحة المفاتيح من عنصر معين
DISABLED عنصر غير نشط، ولكن يتم عرضها على الشاشة
للقراءة فقط يتم عرض العناصر الموجودة على الشاشة ولكن لا يمكن تحريرها

العناصر المتقدمة.

معلومات محددة عن الأنماط النموذجية
TYPE =فال نوع نموذج الاسلوب. عادة "text / css"
عادة ما يتضمن برنامج نصي سكريبت فى صفحة ويب
LANGUAGE =لغة اللغة المستخدمة
الحدث =حدث الحدث الذي يقوم بتشغيل تنفيذ البرامج النصية محددة
عن =numeobiect اسم الكائن من الصفحة التي يعمل البرنامج النصي

تحميل جداول علامات HTML

إذا كنت تريد أن تحقق من تقدم في البرنامج التعليمي، يمكنك الوصول إلى هذا العنوان: http://www.videotutorial.150m.com.

ننصحك بفك الملف المرفق ودراسة ملفات HTML ثلاثة، أو ملف CSS باستخدام المفكرة + + أو برنامج آخر لتحرير صفحات الويب في هذه الطريقة يمكنك إجراء تغييرات الزراعية الحرجة حتى يمكن تقديم الملاحظات خلال ذلك سوف تتعلم HTML دون الخاص حساب.

وأتمنى لكم طيب ونرحب بكم في الدروس التالية في هذه السلسلة وخارجها.

تحميل اختبار الملفات

التي أجراها دان كونستانتين
tutorialegimp.blogspot.com
كريستيان Cismaru: أحب كل ما يتعلق بتكنولوجيا المعلومات والاتصالات ، أحب مشاركة الخبرات والمعلومات التي أجمعها كل يوم. أنا أتعلم أن أعلمك!

عرض التعليقات (333)

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

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

    نعم أنت على حق كريستي لكني أشعر بخيبة أمل لأنني اعتقدت أنك ستقوم بالبرنامج التعليمي :( ولكن على أي حال برافو دان تعليمي جيد جدا

    • ليس لطيفًا ما قلته وأنا أقول لك بصدق هذا ، كافح هذا الرجل لمدة ساعة ونصف تقريبًا ليعلمك كيفية إنشاء موقع من الصفر وتقول أنك تشعر بخيبة أمل لأنه لم ينجح؟ هل يمكنك تخيل مقدار العمل الذي قام به الرجل وكم من الوقت الذي فقده لتعليمنا أساسيات html و css ، فكر قبل أن تفتح فمك أنه لن يناسبك تقديم عمل ثم ترك تعليقات أخرى غير ضرورية مثل تشعر بخيبة أمل لأنه لم يضع ، شخص آخر أنشأ هذا البرنامج التعليمي ، شكرا لك أن لديك مكان للتعلم ؛)

  • منقار:
    نعم أنت على حق ولكن أشعر بخيبة أمل لأن كريستي تعتقد أنك سوف تفعل tutorialu ولكن على أي حال جيدة جدا دان برافو tutorialu

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

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

    مرحبا كريستي، أنا ألوم سلسلة من PHP أو JS؟

  • الاسكندرية:
    مرحبا كريستي، أنا ألوم سلسلة من PHP أو JS؟

    كنا نتحدث عن كل شيء، ولكن أيضا PHP وموقع JS بربط HTML دون HTML لا يمكن.
    يستخدم PHP أكثر لاستخراج البيانات من قواعد البيانات أو صفحات الويب لا تزال على HTML ، سواء كنا نتحدث عن مواقع ديناميكية (php أو dhtml أو asp أو jsp أو cf) أو نتحدث عن موقع ثابت استخدام HTML ، وبدون ذلك لا يمكنك أن تفعل أي شيء.
    يرتكب الكثير من الناس خطأ فادحًا "لا أريد موقع HTML بعد الآن ، أريد موقع php ديناميكي" ، إنه خطأ كبير ، يتم استخدام HTML في كل مكان تقريبًا ، سواء كنا نتحدث عن مواقع ديناميكية أو مواقع ثابتة.
    JS (جافا سكريبت) ليست هي نفسها مع JSP (صفحات خادم جافا) التي تعتمد على الخادم، وتستخدم مواقع JS للمخطوطات معينة، لا حاجة لأي الخادم، يمكن تشغيل البرامج النصية JS في أي متصفح دون الحاجة مكون ملقم، وفي هذا البرنامج التعليمي، وتستخدم دان سلسلة من البرامج النصية JS (معرض الصور) عن الاشياء قبالة يستخدم JS، هناك مواقع بأكملها مع JS بدلا هي مواقع كاملة باستخدام جافا صفحات الملقم الذي هو شيء آخر، على الرغم من أنها تبدو هي نفسها.
    أعلم أنك بدأت في دراسة "الرمز" منذ وقت طويل ، هذا البرنامج التعليمي هو مساعدة ممتازة ، قام دان بعمل غير عادي مع هذا البرنامج التعليمي ، حتى أنك لا تدرك مدى أهمية هذا البرنامج التعليمي ، في البرنامج التعليمي لديك كل العلامات تقريبًا ) المستخدمة في HTML ، يمكنك استخدامها ، خاصة وأن كل واحد لديه وصف.
    لا تدع ALEX الخاص بك، كسر شفرة، يستند إليها.
    ثق بي، كنت أفتقد NO المحتملين!

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

  • عندما يكون البرنامج التعليمي دريمويفر؟ أو لا استخدام Dreamweaver العاصمة في الدروس الخاصة بك؟

    مبروك على كل الدروس .. انت اقوى؛)

  • مرحبًا ، البرنامج التعليمي رائع حقًا ، هناك "أطنان" من المعلومات .. وأعتقد أنه كان علي أن أتعلم HTML الأساسي في الصفحة الأولى 98 "وأجري عشرات الاختبارات المأخوذة من كتب في المكتبة لأنني لم أكن أملك صافي في ذلك الوقت والآن يمكنني مشاهدة برنامج تعليمي يشرح كل ما أريد معرفته .. من الواضح أنني قد تطورت :))) .. أعجبني حقيقة أنه تم شرحه خطوة بخطوة وأنه تم وضعهم على الموقع جميع الأوامر الأساسية + مثال يمكن العمل عليه .. من الواضح أنك تعرف ما تفعله أنت معلم حقيقي !!
    لكن الغالبية العظمى من أولئك الذين يعملون في تصميم مواقع الإنترنت باستخدام برامج التي تجعل من أوامر وسؤالي تلقائيا وسوف نفعل تعليمي مثل هذا البرنامج؟
    أعلم أنك قمت بعمل هذا البرنامج التعليمي لفهم الأوامر وبالتالي فهم أفضل لبرامج تصميم الويب ... ولكن ما زلت أشعر بالفضول لمعرفة ما ستستمر به في هذه السلسلة من الدروس لأن هناك الكثير من الحديث حول هذا الموضوع حتى لو اعتبره البعض مملة عندما يتعلق الأمر بالدروس التعليمية مثل تلك التي قدمها دان ، والتي أهنئها في هذه المناسبة على البرنامج التعليمي ...

منشور له صلة

هذا الموقع يستخدم الكوكيز.