وبلاگ رایانه و فناوری های الکترونیکی

آموزش های رایانه و الکترونیک و اخبار جدید در مورد رایانه و فناوری های الکترونیکی

وبلاگ رایانه و فناوری های الکترونیکی

آموزش های رایانه و الکترونیک و اخبار جدید در مورد رایانه و فناوری های الکترونیکی

وبلاگ رایانه و فناوری های الکترونیکی

این وبلاگ بوسیله گروه رایانه و الکترونیک (رایان آموز) ساخته شده است و بنا شده است بر اساس آموخته های اعضا گروه،آموزش هایی در این وبلاگ قرار گیرد.(آموزش های برنامه نویسی وب و ویندوز و آموزش های الکترونیک و ....)
آدرس ایمیل:
rayanamooz91@gmail.com
منتظر پیشنهادات و انتقادات شما هستیم.

آموزش شماره 3 وب ( مختصری از تگ هد . توضیح کامل پاراگراف بندی و متن)

رایان آموز | چهارشنبه, ۱۱ بهمن ۱۳۹۱، ۰۲:۳۲ ب.ظ

با سلام.

بعد از اینکه من آموزش 2 اچ تی ام ال رو برای دوست های عزیز گذاشتم وقت نکردم که قسمت 3 هم بذارم.تا اینکه امروز یک ساعت وقت کردم پای رایانه بیام.

توی این قسمت قراره پاراگراف بندی و متن رو براتون توضیح بدم.

در صورتیکه علاقه به قالب نویسی وبلاگ و سایت دارید این آموزش هارو ادامه بدین...

اگر از Html  و وب و  از این چیزا هیچ چی نمیدونید ........... اصلا برید آموزش 2 رو ببینید اگر هم قبلا خوندید ............. خب برید ادامه مطلب رو ببینید:


آموزش شماره 2 وب(Html چیست؟)



با نام و یاد خدا جلسه دوم آموزش وب رو شروع می کنم


در جلسه قبلی ما گفتیم بوسیله زبان نشانه گذاری Html میتوان یک صفحه اینترنت ساخت.

خب من کمی به تشریح بیشتر صفحات وب می پردازم بعد میریم سراغ معرفی تگ و نصب یک نرم افزار آسان ، کاربردی و حرفه ای.


درجلسه قبلی توضیحی درمورد تگ Head ندادم که امروز میخوام بدم.

درواقع مشخصات ، خصوصیات و تنظیمات یک فایل Html رو دربرداره.

مثلا اغلب طراحان قالب (شکل ظاهری سایت) ، رنگ و استایل  مخصوصی رو برای هر قسمت از صفحه در نظر میگیرندمثلا اگر به همین صفحه دقت کنین میبینید منو ها ، دکمه ها ، باکس ها ، لینک ها شکل و رنگ متمایزی دارن.این استایل ها رو توی یک فایل جداگانه قرار میدن.حالا برای استفاده از استایل های این فایل های جداگونه باید تگ مخصوصی رو در درون تگ Head تعریف کرد که تگ Head موقع بارگذاری سایت ، از استایل های این فایل های جداگونه استفاده میکنه.بگذریم بحث رو خیلی پیچیده نکنم فقط وظیفه تگ  Head رو میخواستم بگم.

 

اما میریم سراغ پاراگراف بندی و متن.


پراگراف بندی یکی از مهم ترین کارهای طراحی سایت هست ، چون بدون پراگراف بندی سایت آرایش متن منظمی نداره.

خوب تا الآن هرچی این پست خوندید برگردید عقب و ببینید چندتا پاراگراف داره.

چندتا؟ 3 تا ؟4 تا؟ 5 تا ؟ 10تا ؟

نه....................این پست تا قبل از پراگراف قبلی 13 پاراگراف داره .............. خدا بده برکت!

این که تازه چیزی نیست بعضی از صفحات 100تا یا بیشتر پاراگراف دارند.

کلا به چی میگن پاراگراف؟

هرجا از متن که دیدید تموم شد.مثلا همین جمله بالایی بعد از علامت سوال خط تموم میشه و بقیه متن از خط پایینی شروع میشه یک پاراگراف جدید شروع شده . دقیقا مثل دوران دبستان.یادش بخیر.معلم املا می گفت: نقطه سر خط  برو خط بعدی(پراگراف جدید).


توی تصویر بالا متنی رو توی Word 2013 میبینید که پراگراف هاشو مشخص کردم.

یعنی در واقع توی ورد هم با زدن اینتر میتونید پاراگراف بسازید.


خب حالا میخوام بهتون تگ های پاراگراف بندی رو بگم.

تگ <p> :

برای ساختن پاراگراف جدید ما از تگ <P> استفاده میکنیم.

برای اینکه بهتر مفهوم تگ <P> رو بفهمید کارهای زیر رو انجام بدید.

-------------

تمرین:

این چیزایی که توی باکس زیر هست رو توی NotePad ویندوز کپی کنید:

<Html>
<Head>
<title>
خوش آمدید!
</title>
</Head>
<Body>
این وبلاگ توسط آقای .... ایجاد شده است و درآن مطالب ...... گذاشته میشود.با پیشنهادات خود در این وبلاگ ، در بهتر شدن مطالب وبلاگ سهیم باشید
</Body>
</Html>

خوب حالا میخواهیم پراگراف بندی کنیم.یک تگ <P> قبل از "با پیشنهادات ...." بذارین و تگ پایانی یعنی <P/> رو بعد از "سهیم باشید"بذارین.

یعنی اینجوری:


<Html>
<Head>
<title>
خوش آمدید!
</title>
</Head>
<Body>
این وبلاگ توسط آقای .... ایجاد شده است و درآن مطالب ...... گذاشته میشود<P>با پیشنهادات خود در این وبلاگ ، در بهتر شدن مطالب وبلاگ سهیم باشید</p>
</Body>
</Html>

فعلا برای اینکه وقت تلف نشه هر چی توی باکس هست رو توی NotePad کپی کنین و مثل پست قبلی همونطور که گفته بودم ذخیره کنین.

توی عکس زیر هیچ پاراگراف بندی نمیبینید:



اما توی عکس زیر که تگ <P> به کار رفته پراگراف بندی میبینیم:


اسکلت اصلی هر پاراگراف:

<P>

متن پراگراف 1 ........

</P>


<P>

متن پراگراف 2........

<P>



یه نکته مهم:

تگ <P> نیازی به پایان نداره یعنی هر وقت خواستین به پراگراف بعدی برین لزومی به تگ پایان یعنی <P/> نیست و برای پاراگراف بعدی از یک تگ <P> دیگه استفاده کنین اما خیلی جاها برا اینکه محدوده تگ مشخص بشه بهتره از تگ پایانی استفادن کنید.


یه نکته مهم دیگه:

اگه خواستین توی همون پراگرافی که هستین ، به خط بعدی برین از تگ <br> میتونین استفاده کنین.نیازی به تگ پایانی یعنی <br/> نیست اما میتونید بزارید.



موقعیت پراگراف ها :

حالا شاید ما خواستیم پراگرافمون طرف راست تگ پدر (بعدا توضیح میدم) باشه.

برای این کار باید توی تگ دست ببریم .

اول من میخوام طرز تعریف توضیحات برای هر تگ توضیح بدم.

هر تگ تعداد زیادی تنظیمات متناسب با خودش داره.

مثلا تگ پراگراف (همون P) تنظیماتی شامل موقعیت ، رنگ متن ، فونت متن و ...... داره که برای تعریف کردن تنظیمات اون باید از ساختار زیر استفاده کنین.

مثلا تعیین موقعیت پاراگراف:


<P align= "..." >
</P>

چیز جدیدی دیدین ؟ 

ما برای تعیین محل پاراگراف مورد نظر از این راه اقدام کردیم.

به جای .... میتونید left , right , center یعنی چپ راست و وسط بذاریم.

در مثال بالا ما یک چیزی برای تگ خودمون تعریف کردیم. خوب اسمشو میتونیم بزاریم ویژگی.

در واقع بوسیله ویژگی های هر تگ هست که میشه نتیجه دلخواه رو بدست آورد.

مثلا ما از align برای تگ P استفاده کردیم.برا اینکه ما یه سایت فارسی میخوایم پس باید موقعیت متنمون هم طرف راست باشه نه چپ.

خوب حالا یه مثال براتون میزنم که بهتر مطلبو بفهمین.

در ضمن هر جا نفهمیدین دستتونو میکنین بالا میگین آغا ببخشید ما نفهمیدیم البته تو بخش نظرات میگین!


خوب حالا ما میخوایم یه پاراگراف بنویسیم که متنش ضخیم باشه ، متنش راست چین باشه(بهتون میگم راست چین چیه)


<Html>
<Head>
<title>خوش آمدید!</title>
</Head>
<Body>
<p dir="rtl" align="right">
<b>
Html چیست؟
</b>
</p>
</Body>
</Html>

خوب نتیجه ی این چیزی که مانوشتیم این میشه:



اول اینکه ما دیدیم که چه جوری میشه چند ویژگی رو برای یک تگ آورد.

اولین ویژگی ای برای تگ پاراگرافمون تعریف کردیم به نام dir بود

dir از direction میاد یعنی جهت متن که دو خاصیت مهم داره:

1-  ltr : مخفف left to right هست یعنی چپ به راست (چپ چین) و مناسب زبان انگلیسی و امثال اون هست.

2- rtl : مخفف right to left هست یعنی راست به چپ (راست چین) و مناسب زبان فارسی و عربی هست که ما از خاصیت دومی یعنی راست چین استفاده کردیم.


اما دومین ویژگی align هست که فکر میکنم از alignment بیاد.

align قرار گیری بعضی چیزها در صفحه هست مثل متن.

خوب حالا چون متن ما فارسی هست ما از alignment راست(right) استفاده کردیم.


الآن تمام متون فارسی این وبلاگ که دارید میخونید همش راست چین هست و از aligmment راست استفاده میکنه(حالا اگر جایی استثنا دیدید گیر ندید دیگه!)


راستی سر و کله یه تگ جدید پیدا شد.

<b> :

این تگ باعث ضخامت متن میشه مثل ورد که روی دکمه بالای صفحه که روش B نوشته بود میزدیم.

B از  اول کلمه bold به معنی ضخیم گرفته شده.



خوب فکر میکنم این جلسه خیلی طولانی شد.درضمن اگر انگیزه قوی برای فراگیری این مباحث دارید حتما تمرین کنین این  هم مشق این جلسه هر کی جلسه بعد نیاره منفی میگیره ......!

یک متن خوب با 3 تا 4 پاراگراف بسازید و موضوع متن رو هم ضخیم کنید.اگر کارتون رو برام ایمیل کنین اشکالاتتون رو حتما میگم.اگر یه قسمتیش فارسی یه قسمتیش هم انگلیسی باشه دیگه واقعا عالیه.

معرفی نرم افزار باشه واسه جلسه بعد......فقط اگه میخواین دانلود کنین و باهاش کار کنین بدونین اسمش Rapid Css 2011 هست.



خوب وعده دیدار ما پست بعدی ............!

خدانگهدار ...................

نظرات  (۱)

بسیار عالی.
موفق باشید

ارسال نظر

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی