انها وسيلة رائعة حقا, انني بصدد تقديم اداة رائعة لتحويل ملفات HTML الى ملفات من نوع PDF, و هي اداة تحويل تعمل على الإنترنت و هي تحول مواقع الويب الى نسخة للقراءة فقط او للطباعة على شكل موقع الكتروني.

هذا الموقع يعتبر اداة رائعة لعمل التحويل و هو يستخدم مكتبة wkhtmltopdf الرائعة المفتوحة المصدر كأساس لهذا الموقع.

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

الموقع: HTML to PDF – html-2-pdf.com

الجداول في لغة HTML استخداماتها كثيرة منها الإحصائيات و البيانات لدى الشركات و المواقع, وهي تتكون من اعمدة و صفوف, وفي موضوعنا هذا رصدنا لكم اهم الدروس في هذا المجال.

مثال

<table>
	  <tr>
		<td>خلية اولى</td>
		<td>خلية ثانية</td>
	  </tr>
	  <tr>
		<td>خلية ثالثة</td>
		<td>خلية رابعة</td>
	  </tr>
	</table>

الدرس العاشر: الجداول

الجداول تستخدم لعرض بيانات مجدولة مثل المعلومات التي تعرض بشكل منطقي من خلال أعمدة وصفوف.

الجداول

الجداول مممم؟؟؟ مفيدة جدا لعمل الإطارات الخارجيه و خصوصا مع الإستعمال الجيد ، لكن تهل علينا الجداول بالأكواد والوسوم و هذا ما يخيف في الموضوع ، لكن عندما تتمكن منها وتتعلمها جيدا فهذا سيكون جزء ثمين ويكسبك خبرة كبيرة في ال HTML

الجداول في HTML

عندما بدأنا نرى دعوات لاستخدام المعايير القياسية في تطوير المواقع بدأت النقاشات تدور حول الطريقة الصحيحة لتصميم المواقع.

الجداول في HTML – الجزء الثاني

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

درس انشاء الجداول فى لغة HTML – الدرس الثالث عشر

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

في هذا الموضوع سوف نتناول مبادئ لغة HTML هذه الغة السهلة مقارنة بباقي لغات تطوير الويب و صناعة المواقع, بسم الله و على بركته نبدأ.

الترويسات

لغة HTML تحتوي على ستة مستويات من الترويسات حيث انها تعتبر الخطوط العريضة بالنسبة للصفحة وهي تبدأ بوسم <h1> الى <h6> وهي مهمة ايضا بالنسبة لمحركات البحث.

مثال

<h1>ترويسة 1</h1>
<h2>ترويسة 2</h2>
<h3>ترويسة 3</h3>
<h4>ترويسة 4</h4>
<h5>ترويسة 5</h5>
<h6>ترويسة 6</h6>

و سوف نحصل على النتيجة التالية:

ترويسة 1

ترويسة 2

ترويسة 3

ترويسة 4

ترويسة 5

ترويسة 6

الفقرات

الفقرات هي نوع واحد وهي تبدأ بوسم <p>.

مثال

<p>هدف موقع الشبكة نت هو ايصال المعلومة بكل يسر و سهولة للمستخدم العربي  اللذي يهتم بتطوير و تصميم الويب, يحتوي الموقع على الكثير من الدروس اللتي  تخص الكثير من اللغات البرمجية مثل HTML,CSS, JavaScript, PHP و غيرها من  اللغات البرمجية.</p>

لنحصل على النتيجة التالية:

هدف موقع الشبكة نت هو ايصال المعلومة بكل يسر و سهولة للمستخدم العربي اللذي يهتم بتطوير و تصميم الويب, يحتوي الموقع على الكثير من الدروس اللتي تخص الكثير من اللغات البرمجية مثل HTML,CSS, JavaScript, PHP و غيرها من اللغات البرمجية.

الإرتباطات

وقد تناولنا بموضوع سابق عن الإرتباطات في موضوع سابق للمراجعة: تطبيقات على Html: الإرتباطات.

مثال

<a href="http://www.alshabakahnet.com"></a>

لنحصل على النتيجة التالية:

http://www.alshabakahnet.com

الصور

ماذا لو اردنا ان نضيف صورة ما في صفحتنا و لكن اذا ما اردنا فعل ذلك يجب ان ندرج الوسم التالي <img> و نعين مصدر الصورة.

مثال

<img src="http://www.google.ca/intl/en_com/images/srpr/logo1w.png"/>

و سوف نحصل على النتيجة التالية:

لا تقلق عزيزي سوف نتناول هذه الأمثلة بتوسع ان شاء الله في المواضيع القادمة.

هذه تطبيقات بسيطة لعمل الإرتباطات في لغة HTML:

قاعدة

<a href="url">نص يعبر عن الرابط</a>

نكتب في مكان “url” الرابط المراد ادراجه وعلى سبيل المثال : http://www.alshabakahnet.com

وفي مكان العبارة “نص يعبر عن الرابط” : موقع الشبكة نت التطويري

فينتج لنا الكود التالي:

مثال

<a href="http://www.alshabakahnet.com">موقع الشبكة نت التطويري</a>

انظر الى الرابط اللذي بالأسفل:

موقع الشبكة نت التطويري

ولكن ماذا لو اردنا ان ننفذ العملية و لكن بنافذة جديدة؟

حسننا لنجرب الكود التالي:

<a href="http://www.alshabakahnet.com"  target="_blank">موقع الشبكة نت التطويري</a>

حيث ان الوسم: target=”_blank” تفتح الرابط بصفحة مستقبلة او بنافذة جديدة.

وبهذا ننتهي من درس اليوم و الى اللقاء مع دروس اخرى.

سنقوم ان شاء الله تعالى في هذه اللمحة البسيطة بعرض تقديمي للغة HTML المختصة ببناء صفحات الويب.

ما هي لغة HTML ؟

لغة HTML هي لوصف صفحات الويب.

• لغة HTML هي اختصار للعبارة التالية Hyper Text Markup Language
• لغة HTML هي لغة ترميزية و ليست لغة برمجية
• اللغة الترميزية هي عبارة عن مجموعة وسوم
• لغة HTML تستخدم تلك الوسوم

وسوم HTML

رموز لغة HTML يطلق عليها عادة وسوم HTML.

• وسوم HTML هي كلمات بين قوسين حادين مثل <html>
• وسوم HTML تأتي بين زوجين من الوسوم مثل <b> و </b>
• الوسم الأول هو بداية الوسم اما الثاني فهو نهايته
• بداية الوسم ايضا يدعى فتح الوسم اما النهائي فهو اغلاق الوسم

مستندات HTML هي صفحات ويب

• مستندات HTML للدلالة الى صفحات الويب
• مستندات HTML تتضمن وسوم لهذه اللغة و نصوص عادية
• مستندات HTML تدعى ايضا صفحات ويب

البغية من متصفحات الويب مثل IE و Firefox هي قراءة مستندات HTML و عرضهم كصفحات ويب, المتصفحات لا تعرض الوسوم و لكنها تترجمها لمحتوى حقيقي كما تراه في صفحات المواقع.

مثال

<html>
<body>
<h1>ترويسة اولى</h1>
<p>اول فقرة اكتبها على الويب.</p>
</body>
</html>

• الوسوم بين <html> و </html> هي للدلالة على انها صفحة ويب
• الوسوم بين <body> و </body> هي الجزء الظاهري من محتوى الصفحة
• الوسوم بين <h1> و </h1> هي للدلالة على الترويسات
• الوسوم بين <p> و </p> هي للدلالة على الفقرات في صفحتنا

و بهذا ننتهي من المقدمة في هذه اللغة و ان شاء الله سوف تكون هناك دروس متقدمة حول هذه اللغة مستقبلا.