کلاس آموزش html

[نقاب]

چند نکته کاربردی:
توجه داشته باشيد که بدليل وجود مرورگرهای متفاوت (اکسپلورر، نت اسکيپ، ..) و به دليل تفاوت دقت نمايش صفحه نمايش کامپيوترها، صفحات اچتمل با اندکی تفاوت در حالتهای مختلف نمايش داده ميشوند و هميشه سعی کنيد که صفحاتتان را نه تنها با اکسپلورر که معروفترين مرورگر است بلکه با نت اسکيپ و حتی مرورگرهای کامپيوترهای مکينتاش چک کرده و همچنين در دقت های نمايش 800x600 و 1024X768 آن را امتحان کنيد.
از نظر فاصله و سطر بندی، متنی که در صفحه اديتورتان تايپ ميکنيد با چيزی که مرورگر نمايش خواهد داد متفاوت خواهد بود.هميشه به ياد داشته باشيد که فاصله های اضافی (space) و خطهای خالی متن در صفحه اديتور توسط مرورگر در نظر گرفته نشده و نمايش داده نخواهد شد.
برای نمايش بيش از يک فاصله خالی بايد از نويسها يا ترکيب کاراکتری خاصی (None Breaking Space) استفاده کنيد. در بخش [برای مشاهده لینکها باید ثبت نام کنید] ] به اين مطلب بيشتر پرداخته خواهد شد.
فاصله های اضافی بين کلمات در يک متن اچتمل توسط مرورگرها ديده نخواهد شد و در نمايش هميشه تبديل به يک فاصله (space) خواهد شد. در ضمن يک خط خالی در متن اديتور بصورت يک فاصله يا space نمايش داده خواهد شد.
برای ايجاد يک سطر جديد هيچگاه از يک تگ <p> خالی استفاده نکنيد و به جای آن از تگ <br> استفاده کنيد..
مرورگرها به هنگام نمايش بعضی عناصر بصورت اتوماتيک يک سطر خالی قبل و بعد از آن عنصر نمايش خواهند داد. برای نمونه اين گروه از عنصرها ميتوان از پاراگراف (<p>) و سرتيترها (<h..>) نام برد.
تگ <hr> يا Horizontal Roler سبب نمايش يک خط افقی خواهد شد و در واقع بخش های مختلف مطالب اين صفحات با کمک اين تگ از هم جدا شده اند.

[نقاب]

مثالهای بيشتر:
[برای مشاهده لینکها باید ثبت نام کنید] ]
اين مثال بعضی از مقادير قراردادی عناصر پاراگراف را شرح ميدهد.
[برای مشاهده لینکها باید ثبت نام کنید] ]
اين مثال نحوه تراز بندی يک پاراگراف را با کمک شناسه يا attribute ای به نام align نشان ميدهد. در اين حالت پاراگراف در وسط ناحيه نمايش داده خواهد شد.
( "align="center )
[برای مشاهده لینکها باید ثبت نام کنید] ]
اين مثال نحوه استفاده از تگ <br> را در يک متن اچتمل نشان ميدهد.
[برای مشاهده لینکها باید ثبت نام کنید] ]
اين مثال نحوه استفاده از تگهای <h1> .... <h6> را در يک متن اچتمل نشان ميدهد.
[برای مشاهده لینکها باید ثبت نام کنید] ]
اين مثال نحوه تراز بندی يک سر تيتر را با کمک شناسه يا attribute ای به نام align نشان ميدهد. در اين حالت سر تيتر در وسط ناحيه نمايش داده خواهد شد.
( "align="center )
[برای مشاهده لینکها باید ثبت نام کنید] ]
اين مثال نحوه نمايش خطوط افقی با استفاده از تگ <br> ميباشد.
[برای مشاهده لینکها باید ثبت نام کنید] ]
اين مثال نحوه استفاده از comment در کدهای اچتمل را نمايش ميدهد.
[برای مشاهده لینکها باید ثبت نام کنید] ]
اين مثال نحوه تعيين رنگ زمينه صفحه را با کمک يکی از شناسه های (attribute ) عنصر body با نام bgcolor نشان ميدهد. (Background Color)
( "bgcolor ="blue )

[نقاب]

تگهای اصلی
در جدول زير عناصر معرفی شده در اين فصل به همراه لينکهای مربوطه جهت مطالعه بيشتر آورده شده است. توجه داشته باشيد که برای هر عنصر فهرستی از شناسه ها يا Attributes موجود است و همچنين به شناسه های کنارگذاشته شده (Deprecated) در نسخه های آينده اچتمل توجه داشته باشيد و سعی کنيد که از آنها استفاده نکنيد.

:
Start TagPurposeکاربرد[برای مشاهده لینکها باید ثبت نام کنید] ]Defines a html documentنشان شروع متن اچتمل[برای مشاهده لینکها باید ثبت نام کنید] ]Defines the document's bodyتعيين بدنه و قسمت اصلی صفحه اچتمل[برای مشاهده لینکها باید ثبت نام کنید] ]Defines heading 1 to heading 6تعريف سر تيترهای h1 تا h6 [برای مشاهده لینکها باید ثبت نام کنید] ]Defines a paragraphتعريف پاراگراف[برای مشاهده لینکها باید ثبت نام کنید] ]Inserts a single line breakرفتن سر خط جديد[برای مشاهده لینکها باید ثبت نام کنید] ]Defines a horizontal ruleنمايش خط افقی[برای مشاهده لینکها باید ثبت نام کنید] ]Defines a comment in the HTML source codeنوشتن شرح و comment

[نقاب]

سؤالات مربوط به فارسی نويسی را ميتوان به سه گروه عمده تقسيم کرد:
- چگونه فارسی بنويسم ؟
- چگونه فارسی بخوانم؟
- چگونه صفحات اچتمل فارسی را نمايش دهم؟ در مورد فارسی نويسی و فارسی خوانی اگر از اديتور آنلاين ما در بخش مثالها استفاده ميکنيد نيازی به فارسی سازی نداريد و با کمک اديتور مزبور بايد به راحتی قادر به تايپ فارسی و لاتين باشيد.اگر ميخواهيد که در هر حال سيستمتان را فارسی کنيد، مطالعه صفحات زير راهنمای بسيار خوبی برای فارسی سازی ميباشند:

* [برای مشاهده لینکها باید ثبت نام کنید] ]
* [برای مشاهده لینکها باید ثبت نام کنید] ]

[نقاب]

دو نکته بسيار مهم در مورد فارسی نويسی:

روش کدگزاری UTF-8
اکيدا توصيه ميشود که برای تايپ و تمايش متون فارسی از استاندارد يونيکد و روش کدگزاری UTF-8 اسنفاده شود و اين روشی است که مطالب اين سايت و اديتور آنلاينش از آن استفاده ميکند.نکته مهم در نمايش صحيح متون فارسی تعيين نوع کدگزاری يا encoing صفحات فارسی است که برای اينکار بايد از متاتگ خاصی به نام http-equiv در بخش head صفحات اچتمل به شکل زير استفاده شود:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

در اينصورت مرورگر يا Browser قبل از نمايش صفحه از روی متاتگ فوق نوع کدگزاری (Encoding) را تشخيص داده و ديگر مثلا نيازی به تعيين دستی (دراکسپلورور 5 : View/Encoing/Unicode / UTF-8 ) نوع Encoing توسط بازديدکننده سايت نخواهد بود.
شناسه يا attribute ی به نام dir
جهت نمايش متون لاتين به صورت پيش فرض و default از چپ به راست (ltr) ميباشد.در مورد متون و جملات فارسی بايد با کمک روشی جهت نمايش پيش فرض را به "راست به چپ" تغيير دهيد. شناسه يا attribute ی به نام dir يا همان direction اين کار را برای شما انجام ميدهد. اين شناسه دارای دو مقدار ممکن ميباشد :

dir="ltr" , Left-to-right text. - چپ به راست
dir="rtl" , Right-to-left text. - راست به چپ

مثلا برای نمايش جمله فارسی "سلام بر دنيای وب!" با کمک عناصر p يا div کافی است که به يکی از شکلهای زير عمل شود:

<p dir="rtl"> سلام بر دنيای وب </p>
<div dir="rtl"> سلام بر دنيای وب </div>
در بسياری از عناصر و تگ های اچتمل امکان استفاده از شناسه dir ميسر بوده و به عنوان نمونه ميتوان از عناصر زير نام برد:

<p> , <div> , <html> , <body> , <table> , <tr> , <td> , <h1 ... h6> , <input> , <pre> , <select> , <span> , ...

مثالهای زير نحوه ترازبندی متون فارسی را به نمايش ميگذارند و برای مطالعه بيشتر در مورد ترازبندی متون "راست به چپ" [برای مشاهده لینکها باید ثبت نام کنید] ] مراجعه کنيد. (عناصر BDO ، Span و شناسه lang هم برای مطالعه مفيد ميباشند.)

[نقاب]

مثالهای فارسی نويسی:
مثال 1 : [برای مشاهده لینکها باید ثبت نام کنید] ]
به بخش head و تگ div توجه کنيد. متا تگ http-equiv نوع کدگزاری را تعيين ميکند و در اينجا با کمک تگ div جهت نوشتن مطالب (از راست به چپ يا بلعکس) تعيين ميگردد. dir به معنای direction و جهت بوده و rtl مخفف right to left و ltr معادل left to right ميباشد.

مثال 2 : [برای مشاهده لینکها باید ثبت نام کنید] ]
به عناصر div و p توجه کنيد. با کمک شناسه dir جهت نوشتن مطالب (از راست به چپ يآ بلعکس) تعيين ميگردد.

مثال 3 : [برای مشاهده لینکها باید ثبت نام کنید] ]
مثالی کاملتر با راهنمای استفاده از عنصر div و شناسه dir آن

مثال 4 : [برای مشاهده لینکها باید ثبت نام کنید] ]
اگر شناسه dir را در عنصر html بکار ببريد جهت نمايش تمامی متون از راست به چپ شده و برای نوشتن از چپ به راست بايد به صورت موردی شناسه "dir="ltr را استفاده کنيد. همچنين در اين حالت ماسماسک! Scrool down مرورگر در سمت چپ صفحه نمايش داده خواهد شد. در صورت استفاده شناسه dir در عنصر body ماسماسک همان سمت راست خواهد ماند.

مثال 5 : [برای مشاهده لینکها باید ثبت نام کنید] ]
نحوه استفاده شناسه dir در عنصرهای مختلف

[نقاب]

لازم به ذکر است که برای فارسی نويسی از کدهای java script موجود در [برای مشاهده لینکها باید ثبت نام کنید] ] که ابزارهای برنامه نويسی فراهم شده توسط شورای عالی انفورماتيك و دانشجويان دانشگاه صنعتی هستند، استفاده شده است و توصيه ميشود که پروژه [برای مشاهده لینکها باید ثبت نام کنید] ] را فراموش نکرده زيرا که استاندارد آينده فارسی نويسی اينترنتی در ايران خواهد شد.

[نقاب]

فرمت دهی ( Formatting ) وظيفه گروهی از تگ های اچتمل فرمت دهی و تعيين شکل نمايش متون ( مثلا ضخیم و bold بودن و يا مورب و ايتاليک بودن ) ميباشد و در اين درس با اين گروه از تگهای formating آشنا خواهيد شد:

<b> , <big> , <code> , <del> , <em> , <i> , <ins> , <kbd> , <pre> , <s> , <samp> , <small> , <strike> , <strong> , <sub> , <sup> , <tt> , <u> , <var>

[نقاب]

مثالهای شکل دهی متون (Text Formatting)
در مثالهای زير نحوه استفاده از عناصر و تگهای شکل دهی متون شرح داده شده اند:
[برای مشاهده لینکها باید ثبت نام کنید] ]
شکلهای مختلف نمايش متون با کمک عناصر b , strong , big , em , i , small , sub , sup
[برای مشاهده لینکها باید ثبت نام کنید] ]
نمايش متون از قبل شکل دهی شده با کمک عنصر pre يا pre Formatted
برای نمايش اشعار فارسی استفاده از عنصر pre بهترين انتخاب ميباشد.
[برای مشاهده لینکها باید ثبت نام کنید] ]
نمايش متون deleted، underline و ... با کمک عناصر code , kbd , tt , samp , var , del , ins

[نقاب]

نحوه ديدن سورس کدهای اچتمل (HTML Source)

• اگر ميخواهيد که سورس کدهای اچتمل صفحات وب را ببينيد کافی است که در منوی View مرورگرتان حالت Source يا Page Source را انتخاب کرده و مرورگر کد اچتمل را درون اديتوری باز کرده و قابل ذخيره توسط شما برای استفاده های بعدی ميباشد.
• اگر صفحه مورد نظر از مجموعه فريمها (Frameset) استفاده کرده باشد برای ديدن سورس کد اصلی فريمها کافی است که ابتدا با کمک روش بالا به مشاهده سورس کدهای اچتمل پرداخته (لازم به توضيح است که در اين حالت فقط تعاريف کلی فريمها قرار دارند.) و سپس برای ديدن کد اچتمل اختصاصی هر صفحه بايد پس از "Right Click" روی هر صفحه "View Source" کرده و کد اچتمل هر فريم را جداگانه ببينيد.
• اگر طراح سايت با کمک Java Script مانع ديدن سورس توسط شما ميشود، ابتدا در منوی Tools/Internet Options.../Security/Custom Level مرورگرهای اکسپلورر امکانات جاواسکريپت مرورگر را غير فعال کرده (disable) و سپس مراحل بالا را تکرار کنيد!!!