دروس psd الى html and css تحويل ملف فوتوشوب الى قالب فيديو

psd-to-html

http://www.youtube.com/watch?v=lPr1LKBfl54

http://www.youtube.com/watch?v=J8FCe5z1E3E

نُشر في <a href="https://max4arab.com/category/%d8%af%d8%b1%d9%88%d8%b3-html/" rel="category tag">دروس HTML</a> الموسومة <a href="https://max4arab.com/tag/css/" rel="tag">css</a>، <a href="https://max4arab.com/tag/html/" rel="tag">HTML</a>، <a href="https://max4arab.com/tag/psd/" rel="tag">PSD</a>، <a href="https://max4arab.com/tag/%d8%a7%d9%84%d9%89/" rel="tag">الى</a>، <a href="https://max4arab.com/tag/%d8%aa%d8%ad%d9%88%d9%8a%d9%84/" rel="tag">تحويل</a>، <a href="https://max4arab.com/tag/%d8%af%d8%b1%d9%88%d8%b3/" rel="tag">دروس</a>، <a href="https://max4arab.com/tag/%d9%81%d9%88%d8%aa%d9%88%d8%b4%d9%88%d8%a8/" rel="tag">فوتوشوب</a>، <a href="https://max4arab.com/tag/%d9%81%d9%8a%d8%af%d9%8a%d9%88/" rel="tag">فيديو</a>، <a href="https://max4arab.com/tag/%d9%82%d8%a7%d9%84%d8%a8/" rel="tag">قالب</a>، <a href="https://max4arab.com/tag/%d9%85%d9%84%d9%81/" rel="tag">ملف</a>

الدرس الخامس: ماذا تعلمنا حتى الآن؟

الدرس الخامس: ماذا تعلمنا حتى الآن؟

إبدأ دائماً بالقالب الذي قمنا بإنشاءه في الدرس السابق:

	
	<html>
	  <head>
	  <title></title>
	  </head>

	  <body>
	  </body>

	</html>
	

في قسم رأس الصفحة اكتب دائماً العنوان: <title>عنوان صفحتك</title>. لاحظ كيف سيظهر العنوان في أعلى يسار نافذة المتصفح:

العنوان يعرض في المتصفح

العنوان بشكل خاص مهم لأنه يستخدم في محركات البحث – مثل غوغل – لأرشفة موقعك وإظهاره في نتائج البحث.

العنوان يعرض في غوغل

في جسم الصفحة اكتب محتويات صفحتك، وأنت تعرف الآن بعض أهم العناصر:

	
	<p>Is used for paragraphs.</p>
	<em>Emphasis text.</b>
	<h1>Heading</h1>
	<h2>Subhead</h2>
	<h3>Sub-subhead</h3>
	

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

ماذا يعني هذا؟

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

لذلك قم بتجربة ما تعلمته حتى الآن.

ما التالي؟

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

 

المصدر

نُشر في <a href="https://max4arab.com/category/%d8%af%d8%b1%d9%88%d8%b3-html/" rel="category tag">دروس HTML</a> الموسومة <a href="https://max4arab.com/tag/%d8%a7%d9%84%d8%a2%d9%86/" rel="tag">الآن</a>، <a href="https://max4arab.com/tag/%d8%a7%d9%84%d8%ae%d8%a7%d9%85%d8%b3/" rel="tag">الخامس</a>، <a href="https://max4arab.com/tag/%d8%a7%d9%84%d8%af%d8%b1%d8%b3/" rel="tag">الدرس</a>، <a href="https://max4arab.com/tag/%d8%aa%d8%b9%d9%84%d9%85%d9%86%d8%a7/" rel="tag">تعلمنا</a>، <a href="https://max4arab.com/tag/%d8%ad%d8%aa%d9%89/" rel="tag">حتى</a>، <a href="https://max4arab.com/tag/%d9%85%d8%a7%d8%b0%d8%a7/" rel="tag">ماذا</a>

الدرس الرابع: إنشاء موقعك الأول

الدرس الرابع: إنشاء موقعك الأول

مع كل ما تعلمته في الدروس السابقة أصبحت الآن على بعد دقائق من إنشاء أول موقع لك.

كيف؟

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

أيضاً عليك أن تفتح برنامج المفكرة “Notepad” والذي ستجده في قائمة إبدأ ثم برامج ثم أدوات:

notepad1

أنت جاهز الآن!

ماذا أفعل؟

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

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

أول شيء عليك فعله هو أن تخبر المتصفح بأنك “ستتحدث” معه بلغة HTML، يمكنك فعل ذلك عن طريق وسم <html> لا توجد أي مفاجئة هنا، لذلك قبل أن تبدأ أي شيء أكتب “<html>” في أول سطر في برنامج المفكرة.

كما تتذكر من الدروس الماضية، <html> هو وسم البداية ويحتاج إلى وسم إغلاق لذلك لا تنسى كتابة وسم الإغلاق بعد سطرين فارغين، وبقية الوثيقة ستكتبها بين <html> و</html>.

الشيء التالي الذي تحتاجه صفحتك هو أمر رأس الصفحة “head” والذي يقدم معلومات حول الصفحة للمتصفح، وكذلك تحتاج إلى أمر “body” والذي سيحوي المحتويات التي تريد ان تضعها في الصفحة، أمر head أو رأس الصفحة (<head> و</head>) يوضع فوق أمر body أو “متن الصفحة” (<body> و</body>).

صفحتك يجب أن تكون بهذا الشكل:

	
	<html>

	  <head>
	  </head>

	  <body>
	  </body>

	</html>
	

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

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

جميل, لكن كيف أضيف المحتويات للموقع؟

كما تعلمت سابقاً، صفحة HTML تحوي جزئياً، رأس الصفحة ومتن الصفحة، في رأس الصفحة تكتب معلومات عن الصفحة نفسها، أما المتن فيضم المحتويات التي تشكل الصفحة..

مثلاً، إذا أردت أن تضع عنواناً للصفحة يظهر في الشريط العلوي للمتصفح فيجب أن تفعل ذلك في رأس الصفحة، العنصر المستخدم لفعل ذلك هو title. اكتب عنواناً للصفحة بين وسم البداية <title> ووسم الإغلاق </title>:

	
	<title>موقعي الأول</title>
	

لاحظ أن العنوان لن يظهر في الصفحة نفسها، أي شيء تريده أن يظهر في الصفحة يجب أن يضاف بين وسمي متن الصفحة

كما قلنا سابقاً، نريد للصفحة أن تقول “مرحى! هذا هو موقعي الأول”، هذا النص الذي نريد وضعه في الصفحة، لذلك علينا أن نكتب في متن الصفحة ما يلي::

	
	<p>مرحى! هذا هو موقعي الأول.</p>
	

الحرف p في <p> هو اختصار “paragraph” أو فقرة، وهو أمر بسيط لإنشاء فقرات نصية.

صفحة HTML يجب أن تكون لديك بالشكل التالي:

	
	<html>

	  <head>
	  <title>موقعي الأول</title>
	  </head>

	  <body>
	  <p>مرحى! هذا هو موقعي الأول.</p>
	  </body>

	</html>
	

انتهينا! لديك الآن أول موقع حقيقي!

كل ما عليك فعله الآن هو حفظ الصفحة على القرص الصلب ثم عليك أن تستعرضها في متصفحك:

  • في برنامج المفكرة اختر “Save as…” من قائمة “File” في القائمة العلوية.
  • اختر “All Files” في نافذة “Save as type”. هذا مهم جداً، لأنك إن لم تفعل ذلك ستقوم بحفظه كملف نصي وليس كملف HTML.
  • احفظ الصفحة باسم “page1.htm” الأحرف الثلاثة الأخيرة .htm تشير إلى أن الملف هو من نوع HTML، بإمكانك أن تحفظ تضع بدلاً منها “.html” وستكون النتيجة متماثلة، شخصياً أستخدم “.htm” دائماً، لكن بإمكانك أن تختار بينهما ما تشاء، فلا فرق بينهما، ولا يهم أين تحفظ الملف في القرص الصلب، ما دمت تتذكر أين حفظته لكي تستطيع إيجاده مرة أخرى.

saveas

الآن إذهب إلى متصفحك:

  • في القائمة العلوية اختر “Open” من قائمة “File” (CTRL+O).
  • إضغط على “Browse” في النافذة التي ستظهر لك.
  • إبحث عن الملف الذي قمت بإنشاءه واضغط على “Open”.

open

الآن يجب أن تحوي الصفحة جملة “مرحى! هذا هو موقعي الأول.” تهانينا!

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

 

المصدر

نُشر في <a href="https://max4arab.com/category/%d8%af%d8%b1%d9%88%d8%b3-html/" rel="category tag">دروس HTML</a> الموسومة <a href="https://max4arab.com/tag/%d8%a5%d9%86%d8%b4%d8%a7%d8%a1/" rel="tag">إنشاء</a>، <a href="https://max4arab.com/tag/%d8%a7%d9%84%d8%a3%d9%88%d9%84/" rel="tag">الأول</a>، <a href="https://max4arab.com/tag/%d8%a7%d9%84%d8%af%d8%b1%d8%b3/" rel="tag">الدرس</a>، <a href="https://max4arab.com/tag/%d8%a7%d9%84%d8%b1%d8%a7%d8%a8%d8%b9/" rel="tag">الرابع</a>، <a href="https://max4arab.com/tag/%d9%85%d9%88%d9%82%d8%b9%d9%83/" rel="tag">موقعك</a>

الدرس الثالث: العناصر والوسوم

الدرس الثالث: العناصر والوسوم

الآن أنت جاهز لتعلم جوهر لغة HTML وهي العناصر.

العناصر تعطي لوثائق HTML هيكلية محددة وتخبر المتصفح عن كيفية عرض الصفحة، بشكل عام العناصر عبارة عن وسم “tag” للبداية ثم بعض المحتويات ثم وسم الإغلاق.

“وسوم”؟

الوسوم هي توصيفات تستخدمها لكي تضعها في بداية العنصر وعند نهايته.

كل الوسوم لها نفس نفس الشكل، تبدأ مع علامة أصغر من “<” وتنتهي مع علامة أكبر من “>”.

بشكل عام هناك نوعان من الوسوم، وسم البداية: <html> ثم وسم الإغلاق </html>. الفرق بين الإثنين هي علامة “/”، توصيف المحتويات يكون بوضعها بين وسم البداية ووسم الإغلاق.

لغة HTML تتكون من هذه العناصر، لكي تتعلم HTML عليك أن تتعلم وتستخدم وسوماً مختلفة.

هل يمكنك أن تريني بعض الأمثلة؟

حسناً، العنصر em يشدد النص “يجعله مائلاً” وكل النصوص بين وسم البداية <em> ووسم الإغلاق </em> ستظهر بشكل مائل في المتصفح. (“em” هي اختصار “emphasis”.)

المثال 1:

	
	<em>نص مائل.</em>
	

سيظهر بهذا الشكل في المتصفح:

نص مائل.

العناصر h1، h2، h3، h4، h5 وh6 تستخدم للعناوين (حرف h هو اختصار “heading”), حيث h1 هو المستوى الأول من العناوين وبالتالي الأكبر حجماً، h2 يستخدم للمستوى الثاني من العناوين وهو أصغر حجماً بقليل، وh6 هو المستوى السادس والأخير من هيكلية العناوين وهو الأصغر.

مثال 2:

	
	<h1>هذا عنوان</h1>
	<h2>هذا عنوان فرعي</h2>
	

ستظهر بهذا الشكل في المتصفح:

هذا عنوان

هذا عنوان فرعي

هل أنا بحاجة دائماً إلى استخدام وسم بداية ووسم إغلاق؟

كما يقولون، هناك استثناء من كل قاعدة، والاستثناء في HTML هو وجود عناصر تعتبر هي وسم البداية ووسم الإغلاق في نفس الوقت، وهي تسمى العناصر الفارغة لأنها غير مرتبطة بنص معين لكنها عناصر مستقلة تماماً، فمثلاً هناك وسم لكي لكسر النص وإجباره على الظهور في سطر جديد، هذا الوسم يظهر بهذا الشكل: <br />.

هل تكتب الوسوم بأحرف كبيرة أم صغيرة؟

معظم المتصفحات لن تهتم إذا كتبت الوسوم بأحرف كبيرة أو صغيرة أو خليط بين الإثنين، <HTML>، <html> أو <HtMl> كلها ستعطي نفس النتائج، مع ذلك الأسلوب الصحيح هو كتابة الوسوم بالأحرف الصغيرة، لذلك عليك أن تعتاد على كتابة الوسوم بالأحرف الصغيرة.

أين أضع كل هذه الوسوم؟

أكتب الوسوم في وثيقة HTML، المواقع تحوي وثيقة HTML أو أكثر، عندما تتصفح شبكة الويب أنت فقط تقوم بفتح وثائق HTML مختلفة.

إذا انتقلت إلى الدرس اللاحق ستتمكن من إنشاء موقعك خلال عشر دقائق.

 

المصدر

نُشر في <a href="https://max4arab.com/category/%d8%af%d8%b1%d9%88%d8%b3-html/" rel="category tag">دروس HTML</a> الموسومة <a href="https://max4arab.com/tag/%d8%a7%d9%84%d8%ab%d8%a7%d9%84%d8%ab/" rel="tag">الثالث</a>، <a href="https://max4arab.com/tag/%d8%a7%d9%84%d8%af%d8%b1%d8%b3/" rel="tag">الدرس</a>، <a href="https://max4arab.com/tag/%d8%a7%d9%84%d8%b9%d9%86%d8%a7%d8%b5%d8%b1/" rel="tag">العناصر</a>، <a href="https://max4arab.com/tag/%d9%88%d8%a7%d9%84%d9%88%d8%b3%d9%88%d9%85/" rel="tag">والوسوم</a>

الدرس الثاني: ما هي HTML؟

الدرس الثاني: ما هي HTML؟

هذا الدرس سيعطيك مقدمة قصيرة عن صديقك الجديد، HTML.

ما هي HTML

HTML هي اللغة الأم لمتصفحك.

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

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

viewsource

لمن لم يعتد على رؤية هذه الأوامر، HTML تبدو معقدة لكن هذا الدرس سيساعدك على أن تفهمها.

ما فائدة HTML؟

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

HTML تستخدم لإنشاء المواقع، هذا كل شيء ببساطة!

حسناً، ماذا تعني H-T-M-L؟

HTML هي اختصار "HyperText Mark-up Language"، أنت لا تحتاج في هذه المرحلة لمعرفة ماذا تعني هذه المصطلحات، مع ذلك لنشرحها بتفصيل أكبر.

  • Hyper هي عكس "خطي" وهي تعني في هذه الحالة أن تنتقل من أي نقطة إلى أي نقطة بدون أن تسير في خط سير محدد، في الماضي – عندما كانت الفأرة شيء يلحقه القط – كانت الحواسيب تعمل بشكل خطي، تقوم بتنفيذ أمر ما ثم تذهب لما بعده، لكن HTML مختلفة، يمكنك أن تذهب إلى أي مكان في أي وقت، ليس بالضرورة مثلاً أن تزور موقع MSN.com قبل أن تزور HTML.net.
  • Text تعني النص، وهذه تشرح نفسها.
  • Mark-up هو ما تفعله بالنص، فهذه الكلمة تعني توصيف النص، فأنت تقوم بتوصيف النص تماماً كما تفعل مع معالجات الكلمات فتضيف العناوين والنقاط والنص السميك وغيرها.
  • Language تعني اللغة، فتقنية HTML هي لغة توصيف وهي أيضاً تستخدم العديد من كلمات اللغة الإنجليزية.

في هذا الدرس ستتعلم أيضاً XHTML والتي تعني "Extensible HyperText Mark-up Language" وهي باختصار طريقة أحدث وأكثر تنظيماً لكتابة HTML.

الآن أنت تعرف ماذا تعني HTML وXHTML، لنبدأ مع ما يهمنا هنا: إنشاء المواقع.

 

المصدر

نُشر في <a href="https://max4arab.com/category/%d8%af%d8%b1%d9%88%d8%b3-html/" rel="category tag">دروس HTML</a> الموسومة <a href="https://max4arab.com/tag/extensible/" rel="tag">extensible</a>، <a href="https://max4arab.com/tag/html/" rel="tag">HTML</a>، <a href="https://max4arab.com/tag/htmlnet/" rel="tag">htmlnet</a>، <a href="https://max4arab.com/tag/%d8%aa%d8%b9%d9%85%d9%84/" rel="tag">تعمل</a>، <a href="https://max4arab.com/tag/%d8%aa%d8%b9%d9%86%d9%8a/" rel="tag">تعني</a>، <a href="https://max4arab.com/tag/%d8%aa%d9%81%d8%b9%d9%84/" rel="tag">تفعل</a>، <a href="https://max4arab.com/tag/%d8%aa%d9%81%d8%b9%d9%84%d9%87/" rel="tag">تفعله</a>، <a href="https://max4arab.com/tag/%d8%aa%d9%81%d9%87%d9%85%d9%87%d8%a7/" rel="tag">تفهمها</a>، <a href="https://max4arab.com/tag/%d8%aa%d9%82%d9%88%d9%85/" rel="tag">تقوم</a>، <a href="https://max4arab.com/tag/%d8%aa%d9%85%d8%a7%d9%85%d8%a7/" rel="tag">تماما</a>، <a href="https://max4arab.com/tag/%d8%aa%d9%86%d8%aa%d9%82%d9%84/" rel="tag">تنتقل</a>، <a href="https://max4arab.com/tag/%d8%aa%d9%86%d8%b8%d9%8a%d9%85%d8%a7/" rel="tag">تنظيما</a>، <a href="https://max4arab.com/tag/%d8%aa%d9%88%d8%ac%d8%af/" rel="tag">توجد</a>، <a href="https://max4arab.com/tag/%d8%aa%d9%88%d8%b5%d9%8a%d9%81/" rel="tag">توصيف</a>، <a href="https://max4arab.com/tag/%d8%aa%d9%8a%d9%85/" rel="tag">تيم</a>، <a href="https://max4arab.com/tag/%d8%ab%d9%85/" rel="tag">ثم</a>، <a href="https://max4arab.com/tag/%d8%ac%d8%a7%d9%85%d8%b9%d8%a7%d8%aa/" rel="tag">جامعات</a>

الدرس الأول: لنبدأ

الدرس الأول: لنبدأ

في الدرس لأول سنتحدث بشكل مختصر عن الأدوات التي تحتاجها لإنشاء موقعك.

ما الذي تحتاجه؟

في الغالب أنت تملك كل الأدوات التي تحتاجها.

لديك “متصفح”، وهو البرنامج الذي يمكنك من تصفح المواقع والتجول فيها، الآن أنت تنظر إلى هذه الصفحة من خلال متصفحك.

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

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

بدلاً من ذلك ستحتاج إلى محرر نصي بسيط، إذا كنت تستخدم نظام ويندوز يمكنك أن تستخدم المفكرة “Notepad” والذي يمكنك أن تجده في قائمة إبدأ “start” ثم قائمة البرامج “Program” ثم في قائمة الأدوات “Accessories”:

notepad

إذا لم تكن تستخدم ويندوز يمكنك أن تجد برامج مماثلة في أنظمة التشغيل الأخرى، فمثلاً لينكس يحوي برنامج بيكو “Pico” ونظام ماك يحوي برنامج TextEdit.

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

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

هل أحتاج بأن أكون على اتصال بالشبكة؟

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

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

ماذا بعد ذلك؟

إذهب للدرس التالي واقرأ عن HTML قبل أن تبدأ المتعة الفعلية عن الدرس الثالث.

نُشر في <a href="https://max4arab.com/category/%d8%af%d8%b1%d9%88%d8%b3-html/" rel="category tag">دروس HTML</a> الموسومة <a href="https://max4arab.com/tag/%d8%a7%d8%b9%d8%af%d8%a7%d8%af%d8%a7%d8%aa-%d9%84%d9%8a%d9%86%d9%83%d8%b3/" rel="tag">اعدادات لينكس</a>، <a href="https://max4arab.com/tag/%d8%a8%d8%b1%d8%a7%d9%85%d8%ac-%d9%84%d9%8a%d9%86%d9%83%d8%b3/" rel="tag">برامج لينكس</a>، <a href="https://max4arab.com/tag/%d8%aa%d8%b9%d9%84%d9%8a%d9%85-%d9%84%d9%8a%d9%86%d9%83%d8%b3/" rel="tag">تعليم لينكس</a>، <a href="https://max4arab.com/tag/%d8%aa%d9%84%d9%85%d9%8a%d8%ad%d8%a7%d8%aa-%d9%84%d9%8a%d9%86%d9%83%d8%b3/" rel="tag">تلميحات لينكس</a>، <a href="https://max4arab.com/tag/%d8%af%d8%b1%d9%88%d8%b3-%d9%84%d9%8a%d9%86%d9%83%d8%b3/" rel="tag">دروس لينكس</a>، <a href="https://max4arab.com/tag/%d8%b4%d8%a8%d9%83%d8%a7%d8%aa-%d9%84%d9%8a%d9%86%d9%83%d8%b3/" rel="tag">شبكات لينكس</a>، <a href="https://max4arab.com/tag/%d9%84%d9%8a%d9%86%d9%83%d8%b3-%d9%84%d9%84%d9%85%d8%a8%d8%aa%d8%af%d8%a6%d9%8a%d9%86/" rel="tag">لينكس للمبتدئين</a>، <a href="https://max4arab.com/tag/%d9%84%d9%8a%d9%88%d9%86%d9%83%d8%b3/" rel="tag">ليونكس</a>

مقدمة – درس HTML

مقدمة – درس HTML

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

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

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

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

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

حسناً، لنبدأ في التعلم!

نُشر في <a href="https://max4arab.com/category/%d8%af%d8%b1%d9%88%d8%b3-html/" rel="category tag">دروس HTML</a> الموسومة <a href="https://max4arab.com/tag/html/" rel="tag">HTML</a>، <a href="https://max4arab.com/tag/%d8%af%d8%b1%d8%b3/" rel="tag">درس</a>، <a href="https://max4arab.com/tag/%d9%85%d9%82%d8%af%d9%85%d8%a9/" rel="tag">مقدمة</a>

النماذج (2) HTML

النماذج (2) HTML


بقلم : w3schools4arb.com
بتاريخ : 15 يناير 2013
 

النماذج (2) HTML

أهلاً وسهلاً بك إلى الدرس الخامس عشر من دروس HTML. وهو الثاني من درسين حول النماذج. لقد قمنا في الدرس السابق بمناقشة الوسوم الأساسية للنماذج وتعلمنا كيفية إدراج النماذج في صفحات الويب. كما قمنا بمناقشة بعض أشكال إدخال البيانات في النموذج وهي Text, Password, Hiddenهل تذكر كيف نقوم بتعريفها؟ راجع الدرس السابق إن أردت المزيد من التوضيح، وإلا هيا بنا نكمل ولندخل في الموضوع مباشرة.
سوف نتابع الآن مع مجموعة من الأشكال الخاصة بالاختيار من متعدد وهي بالمناسبة ثلاثة أنواع:Radio, Checkbox وقائمة الإختيار
نبدأ مع الشكل المسمى RADIO. ومن مسوغات استخدام هذا الشكل أن السؤال المطروح ينبغى أن يكون له إجابة واحدة فقط، أو بعبارة أخرى على الزائر أن يختار إجابة واحدة فقط.
وكمثال، لنفرض أنني أريد أن أسأل الزائر عن المتصفح الذي يستخدمه (كما هو موجود في دفتر الزوار على شكل قائمة إختيار) لكن بدلا من أن يكون على شكل قائمة إختيار أريده أن يكون على شكلRADIO وذلك بالشكل التالي:(أود أن أذكرك أن عناصر النموذج تظهر بشكل معكوس إذا كنت تستخدمSindbad 3.0)

Sindbad 3.0
Sindbad 4.0
Ms Explorer 3.0
Ms Explorer 4.0

فكيف ننشيء مثل هذه القائمة؟ … حسناً، لنبدأ من الصفر ونعرّف نموذجاً


 
<‎/FORM>
ثم لنقم بتعريف هذا الشكل، هل تذكر الوسم الخاص بذلك؟ إنه 


<‎/FORM>

لكن بما أن هناك أربعة مدخلات، إذن نحتاج إلى أربعة وسوم

<‎/FORM>

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

<‎/FORM>

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

<‎/FORM>

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

 Sindbad 3.0 

 Sindbad 4.0

 MS Explorer 3.0

 MS Explorer 4.0

<‎/FORM>

Sindbad 3.0 
Sindbad 4.0
MS Explorer 3.0
MS Explorer 4.0

وهناك خاصية تتعلق بهذا النوع من الحقول، وهي أنك إذا أردت أن يظهر أحدها وقد تم اختياره بشكل تلقائي فعليك بإضافة الخاصية CHECKED إليه، مع ترك كل الحرية للزائر في اختيار ما يريده فيما بعد.

 Sindbad 3.0 

 
Sindbad 4.0‎

 MS Explorer 3.0

 MS Explorer 4.0

<‎/FORM>

Sindbad 3.0 
Sindbad 4.0
MS Explorer 3.0
MS Explorer 4.0

وأخيراً… أود أن أوضح لك الصورة التي يصلك بها النموذج عند اختيار أحد حقوله (ولنفترض أنه الخيار الثالث). وهي بالشكل التالي:
browser=Msie3
نأتي الآن إلى الشكل الثاني من أشكال الإختيار من متعدد والذي يدعى CHECKBOX. ظاهرياً لا يختلف هذا الشكل عن الشكل الذي سبقه، لكن عملياً هناك اختلافات جذرية من حيث المفهوم والتعريف. وأنا أفضّل أن نبقى على استخدامنا للمثال السابق حتى يسهل علينا تمييز الفروق.

Sindbad 3.0
Sindbad 4.0
MS Explorer 3.0
MS Explorer 4.0

قبل أن نستمر قم بالنقر على أكثر من حقل في القائمة السابقة وأنظر ماذا سيحدث؟ إن باستطاعتك اختيار أكثر من حقل في نفس الوقت! وهذا هو الفرق الأول بين CHECKBOX و RADIO ففي RADIOيمكن اختيار حقل واحد فقط ليس أكثر. 
لنقم الآن بتعريف هذه الحقول، وتسميتها بشكل مباشر ومن ثم سنعلّق عليها:

Sindbad 3.0

Sindbad 4.0

MS Explorer 3.0

MS Explorer 4.0

<‎/FORM>
ماذا تلاحظ؟ أولاً لقد أسندنا القيمة checkbox للخاصية TYPE. ثم أعطينا لكل حقل في القائمة إسماً مميزاً في الخاصية NAME يختلف عن باقي الحقول. أما الخاصية VALUE فأعطيناها قيمة موحدة لجميع الحقول. وبالطبع قمنا في النهاية بكتابة الأسماء التعريفية لكل حقل.
في RADIO نستطيع اختيار حقل واحد فقط أما فيCHECKBOX فنختار أكثر من حقل، لذلك يستخدم عادة في الحالات التي يحتمل أن نحصل فيها على عدة أجوبة لنفس السؤال.
في RADIO تكون أسماء الحقول موحدة والقيم مختلفة، أما في CHECKBOX فتكون الأسماء مختلفة والقيم موحدة
كيف ستصل البيانات؟ حسناً لنفرض أنه تم اختيار الحقلين الثاني والرابع فسوف تصلك النتيجة بالشكل التالي:
Sind4=Yes
Msie4=Yes
كما نستطيع أيضاً تعليم بعض الحقول بصورة تلقائية كما فعلنا مع RADIO باستخدام نفس الخاصيةCHECKED


Sindbad 3.0 ‎

Sindbad 4.0


MS Explorer 3.0 ‎

MS Explorer 4.0

<‎/FORM>

Sindbad 3.0 
Sindbad 4.0 
MS Explorer 3.0 
MS Explorer 4.0

النوع الثالث من أشكال الإختيار من متعدد هو قوائم الاختيار، وهذا النوع سوف يقودنا إلى وسوم جديدة من وسوم التعريف والتي ستستخدم بدلاً من  وهي
     …  تحددان بداية ونهاية القائمة، والوسم 

 

المصدر

نُشر في <a href="https://max4arab.com/category/%d8%af%d8%b1%d9%88%d8%b3-html/" rel="category tag">دروس HTML</a> الموسومة <a href="https://max4arab.com/tag/2/" rel="tag">2</a>، <a href="https://max4arab.com/tag/html/" rel="tag">HTML</a>، <a href="https://max4arab.com/tag/%d8%a7%d9%84%d9%86%d9%85%d8%a7%d8%b0%d8%ac/" rel="tag">النماذج</a>

النماذج (1) HTML

7c8c6bf7ee8fb0349c8e533f46c51b90


بقلم : w3schools4arb.com

النماذج (1)

 

أهلاً وسهلاً بك إلى الدرس الرابع عشر من دروس HTML. والذي
سيكون الأول من درسين سنتحدث فيهما عن النماذج وكيفية تضمينها في صفحات الويب.

 

إقرأ المزيد

نُشر في <a href="https://max4arab.com/category/%d8%af%d8%b1%d9%88%d8%b3-html/" rel="category tag">دروس HTML</a> الموسومة <a href="https://max4arab.com/tag/1/" rel="tag">1</a>، <a href="https://max4arab.com/tag/html/" rel="tag">HTML</a>، <a href="https://max4arab.com/tag/%d8%a7%d9%84%d9%86%d9%85%d8%a7%d8%b0%d8%ac/" rel="tag">النماذج</a>

الخرائط الصورية HTML

7c8c6bf7ee8fb0349c8e533f46c51b90

بقلم : w3schools4arb.com

الخرائط الصورية

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

 

إقرأ المزيد

نُشر في <a href="https://max4arab.com/category/%d8%af%d8%b1%d9%88%d8%b3-html/" rel="category tag">دروس HTML</a> الموسومة <a href="https://max4arab.com/tag/html/" rel="tag">HTML</a>، <a href="https://max4arab.com/tag/%d8%a7%d9%84%d8%ae%d8%b1%d8%a7%d8%a6%d8%b7/" rel="tag">الخرائط</a>، <a href="https://max4arab.com/tag/%d8%a7%d9%84%d8%b5%d9%88%d8%b1%d9%8a%d8%a9/" rel="tag">الصورية</a>

رأس نص لغة اتش تى ام ال

رأس نص لغة اتش تى ام ال

يحدد رأس بالعلامات من<h1> الى <h6>
تحدد بالرأس الاضخم , اما <h1>
تحدد بالرأس الاصغر .<h6>
إقرأ المزيد

نُشر في <a href="https://max4arab.com/category/%d8%af%d8%b1%d9%88%d8%b3-html/" rel="category tag">دروس HTML</a> الموسومة <a href="https://max4arab.com/tag/%d8%a7%d8%aa%d8%b4/" rel="tag">اتش</a>، <a href="https://max4arab.com/tag/%d8%a7%d9%84/" rel="tag">ال</a>، <a href="https://max4arab.com/tag/%d8%a7%d9%85/" rel="tag">ام</a>، <a href="https://max4arab.com/tag/%d8%aa%d9%89/" rel="tag">تى</a>، <a href="https://max4arab.com/tag/%d8%b1%d8%a3%d8%b3/" rel="tag">رأس</a>، <a href="https://max4arab.com/tag/%d9%84%d8%ba%d8%a9/" rel="tag">لغة</a>، <a href="https://max4arab.com/tag/%d9%86%d8%b5/" rel="tag">نص</a>

HTML سمات

HTML سمات

*عناصر اتش تى ام ال لديها سمات مميزة
* تزود تلك الصفات معلومات اضافية عن العنصر ( الرمز )
*الصفات تكون دائما محددة بعلامة بداية
*السمات تاتى فى شكل اسم / قيمة او كلاهما مثل اسم = ” قيمة “.
* أمثلة على تلك السمات :-
إقرأ المزيد

نُشر في <a href="https://max4arab.com/category/%d8%af%d8%b1%d9%88%d8%b3-html/" rel="category tag">دروس HTML</a> الموسومة <a href="https://max4arab.com/tag/html-%d8%b3%d9%85%d8%a7%d8%aa/" rel="tag">HTML سمات</a>