ميخواهيد که يک فايل اچتمل بسازيد؟

**Amir.Jack** · 15 مهر، ۱۳۹۰

ميخواهيد که يک فايل اچتمل بسازيد؟

اگر از ويندوز مايکروسافت استفاده ميکنيد، Notepad را باز کرده (Mac کارها از SimplaeText استفاده کنند. ) و متن زير را در آن تايپ کنيد:

[TABLE=width: 100%]

[TR]

[TD]<html>

<head>

<title>Title of page</title>

</head>

<body>

This is my first html page. <b>This text is bold</b>

</body>

</html>

[/TD]

[/TR]

[/TABLE]

سپس فايل را با نام مثلا test.html در درايو c:\ ذخيره کنيد.

برای ديدن فايل اچتمل بالا در مرورگر يا Brower تان ( معمولا اينترنت اکسپلورر و يا Firefox ) کافی است که از روی منوی File/Open file فايل بالا را از روی محل ذخيره شده بخوانيد. ( به آدرس فايل در قسمت Address توجه کنيد، مثلا c:\test.html)

يکی از مهمترين وظايف مرورگرها نمايش صفحات اچتمل ميباشد، چه اين صفحات روی کامپيوتر شما ذخيره شده باشند و يا اينکه روی سروری دیگر از اينترنت خوانده شوند. با کليک روی اين لينک فايلی شبيه فايل ذخيره شده توسط شما از روی وب سرور توسط مرورگرتان خوانده شده و سپس نمايش داده خواهد شد!!! ( به آدرس فايل در قسمت Address توجه کنيد، مثلا http://www.khaterat.com/html/dars/test.html )

توضيح مثال بالا

اولين تگ مثال بالا تگ <html> ميباشد. از روی اين تگ، مرورگر نوع متن يعنی اچتمل بودنش را يافته و از روی <html/> انتهای متن اچتمل را ميبابد.

متن بين تگ <head> و تگ <head/> اطلاعات شناسنامه ای يا "Header information" متن اچتمل بوده و نمايش داده نخواهند شد. در اين مثال با کمک تگهای <title> و <title/> تيتر و يا Title صفحه که در اين مثال عبارت "Title of page" ميباشد در بالای مرورگر نمايش داده خواهد شد.

متن بين تگ <body> و انتهای آن يعنی تگ <body/> تنها اطلاعاتی است که توسط مرورگرنمايش داده خواهند شد.

متن بين تگ <b> و انتهای آن يعنی تگ <b/> بصورت Bold و يا توپر نمايش داده خواهند شد.

نام فایل test.html بوده ، در شاخه dars قرار گرفته و روی وب سروری که میزبان سایت khaterat.com است قرار دارد.

انشعاب فايل htm يا html ؟

اغلب مرورگرها هر دو نوع انشعاب را به خوبی ميشناسند ولی ترجيحا به هنگام ذخيره فايلهای اچتمل از html استفاده کنيد.( استفاده از انشعابهای سه حرفی مانند htm مربوط به قديم و سيستم عاملهائی چون DOS بودند.)

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

با وجوديکه با استفاده از اديتورهای اختصاصی اچتمل مانند FrontPage و يا Claris Home Page امکان نوشتن و طراحی صفحات اچتمل بصورت WYSIWYG يا "What You See Is What You Get" وجود دارد اما توصيه ميشود که از اديتورهای معمولی متن برای تهيه صفحات خود استفاده کرده، عملکرد تگها را شناخته و هيچگاه بدون اينکه بدانيد کاربرد يک تگ چيست آنرا بکار نبريد. (ادیتورها همان برداشگرهای متن هستند.)

بيشترين سوالات پرسيده شده ( FAQ ) :

فايلم را درست کردم ولی هنوز نميتوانم آنرا در صفحه مرورگرم ببينم، مشکل کجاست؟

مطمئن شويد که فايل را با انشعاب درست (htm يا html ) ذخيره کرده ايد. در ضمن مطمئن شويد که همان فايل را Open کرده ايد.( نام و مسير فايل را در قسمت Address مرورگرتان چک کنيد.)

هر بار پس از تغيير و اديت مثالها نسخه اوليه را در صفحه مرورگرم ميبينم و تغييرات داده شده مشاهده نميشود، مشکل کجاست؟

به خاطر بالا بردن سرعت، هميشه مرورگرها از نسخه های موجود در Cache يا حافظه موقت خود برای خواندن صفحات استفاده ميکنند.برای وادار کردن مرورگر به خواندن اصل صفحه کافی است که در مرورگرتان Refresh/Reload کنيد. در اينترنت اکسپلورر کليد F5 يا View/Refresh و در فایرفاکس Ctrl+R يا View/Reload اينکار را انجام خواهند داد.

آيا ميتوانم از هر دو مرورگر Internet Explorer و Firefox استفاده کنم؟

بله، فقط اگر از استاندارد يونيکد برای فارسی نويسی استفاده ميکنيد، برای ديدن درست صفحات فارسی بايد از نسخه 5 Internet Explorer و به بالا و در مورد Firefox از نسخه 1.0 و به بالا استفاده کنيد.

کجا ميتوانم آخرين نسخه از مرورگرهای Internet Explorer و Firefox را داونلود کنم؟

Internet Explorer اينجاست و Firefox اينجا.

فایهای HTML ام را چگونه به روی اینترنت منتقل کنم؟

باید از نرم افزارهای FTP که وظیفه انتقال فایلها در اینترنت را دارند کمک بگیرید

منظور از وب چيست؟

وب شبکه ای است متشکل از تمامی کامپيوترهای دنيا، شبکه ای از شبکه ها.
اينترنت، وب، WWW ، web يا World Wide Web همگی يک چيزند.
تمامی کامپيوترهای وب ميتوانند با هم ارتباط داشته باشند.
کامپيوترهای موجود در وب با کمک استاندارد ارتباطی يا پروتوکل HTTP با هم ارتباط برقرار ميکنند .

نحوه کارکرد وب چگونه است؟

اطلاعات صفحات وب داخل فايلهائی به نام Web Pages و يا متن های وب (HTML documents) قرار دارند.
اين فايلها يا صفحات روی Web Server يا کامپيوترهای سرويس دهنده وب ذخيره شده اند.
برای ديدن صفحات وب از نرم افزاری به نام مرورگر و يا Web Browser استفاده ميشود.
سرورهای وب یا Web Servers کامبیوترهای هستند که با کمک استاندارد ارتباطی HTTP به تبادل اطلاعات با مرورگرها (web Clients) میبردازند. .
مرورگرهای وب را Web browsers یا web Clients هم مینامند .
دو مرورگر Internet Explorer و Firefox جزو معروفترين مرورگرها حساب ميشوند.
مرورگر Internet Explorer متعلق به شرکت مايکروسافت و مرورگر Firefox متعلق به شرکت Mozilla ميباشد.
مرورگر ّ Firefox دارای امنیت بیشتری بوه و بصورت open Source میباشد و نسبت به Internet Explorer برتر محسوب میشود.
مرورگر Internet Explorer گاهی مختصرا IE نامیده میشود.
اسامی بعضی از مرورگرهای دیگر به قرار روبرو است: Mosaic, Netscape Navigator, Opera, Mozilla, Safari(Mac computers)
امیدوارم که شما طراح و برنامه نویس اولین مرورگر تمامآ فارسی باشید!

مرورگرها چگونه به خواندن صفحات وب ميپردازند؟

يک مرورگر با کمک يک Request درخواستی برای خواندن يک صفحه از وب سرور ميکند.
اين Request يا درخواست بر اساس استاندارد ارتباطی يا پروتوکل HTTP بوده و شامل آدرس صفحه مورد نظر ميباشد.
آدرس يک صفحه وب چيزی شبيه http://www.khaterat.com/www/htmlwww.php است.
بخش //:http نوع پروتوکل و يا استاندارد ارتباطی را تعيين ميکند، www.khaterat.com نام دومين يا Domain است و /www/htmlwww.php مسیر و نام صفحه ای است که بايد خوانده شود.

مرورگرها چگونه صفحات وب را نمايش ميدهند؟

چگونگی نمايش يک صفحه وب بصورت مستتر در آن وجود دارد.(اگر شما منظورم را فهمیدید من را هم خبردار کنید!)
مرورگرها از روی دستورالعملهای داخل صفحات وب و با کمک تگ ها به نمايش صفحات ميپردازند.
وظيفه اصلی تگ های اچتمل ( HTML tags ) بيان نحوه چیدن و قرارگرفتن اطلاعات است و ظاهر نمايش با CSS ميباشد.
يک تگ اچتمل چيزی شبيه <p> abc </p> است.

چه کسانی استاندارد های وب را تعيين ميکند؟

تعيين استاندارد های وب ربطی به شرکتهای مايکروسافت و يا Mozilla ندارد.
World Wide Web Consortium يا W3C متولی بین المللی تعيين استانداردهای وب است.
HTML, CSS and XML از مهمترين استانداردهای تصويب شده وب ميباشند.
برای دیدن فهرست تمامی استاندارهای تعریف شده توسط W3C به این صفحه از دایرالمعارف WIKI مراجعه کنید: W3C

تگ های اچتمل (HTML Tags)

با کمک تگ های اچتمل عناصر يا Elements ساخته ميشوند.
در زبان اچتمل حدود 80 عنصر تعريف شده است.
تگ های اچتمل بوسيله دو نويسه (char) > و < ساخته ميشوند.
تگ های اچتمل معمولا بصورت زوج ظاهر ميشوند، مانند <b>test</b>
تگ اول در يک زوج تگ مثلا <b> تگ شروع و تگ دوم مثلا <b/> تگ پايانی نام دارد.
متن بين تگ اول و تگ دوم در يک زوج تگ محتوای عنصر يا element content ناميده ميشود، مثلا "test"
تگ های اچتمل را ميتوانيد بوسيله حروف لاتين کوچک (lower case) و يا بزرگ (upper case) بنويسيد و case sensitive نيستند. برای مثال دو تگ <b> و <B> معادل هم هستند ولی شديدا توصيه ميشود که به خاطر سازگاری با XHTML از حروف کوچک استفاده شود.

**Amir.Jack** · 15 مهر، ۱۳۹۰

Lesson 2 :

عناصر اچتمل (HTML Elements)

مثال بخش مقدمه را در نظر بگيريد:

[TABLE=width: 100%]

[TR]

[TD]<html>

<head>

<title>Title of page</title>

</head>

<body>

This is my first html page. <b>This text is bold</b>

</body>

</html>

[/TD]

[/TR]

[/TABLE]

*** نمونه ای از يک عنصر اچتمل:

[TABLE=width: 100%, align: center]

[TR]

[TD]<b>This text is bold</b>

[/TD]

[/TR]

[/TABLE]

عنصر اچتمل بالا با تگ <b> شروع شده و با تگ <b/> پايان می يابد. محتوای اين عنصر عبارت "This text is bold" است. لازم به ذکر است که کاربرد تگ <b> نمايش توپر يا bold متون است.

*** مثال دوم از يک عنصر اچتمل :

[TABLE=width: 100%]

[TR]

[TD]<body>

This is my first homepage. <b>This text is bold</b>

</body>

[/TD]

[/TR]

[/TABLE]

عنصر اچتمل بالا با تگ <body> شروع شده و با تگ <body/> پايان می يابد. همانطور که ميبينيد گاهی يک عنصر حاوی يک يا چند تگ ديگر ميباشد.وظيفه تگ <body> تعيين بدنه اصلی يا body يک متن اچتمل است.لازم به يادآوری است که تنها اطلاعات بخش <body> يک فايل اچتمل در صفحه مرورگر نمايش داده خواهد شد.

شناسه های يک تگ (Tag Attributes)

تگ ها ميتوانند حاوی اطلاعات اضافی ديگر باشند، به اين اطلاعات شناسه يا Attribute ميگويند و وظيفه آنها بيان ديگر اطلاعات يک عنصر يا Element ميباشد. مثلا در مورد تگ <body> شناسه ای به نام bgcolor وجود دارد که رنگ زمينه متن (background) را تعيين ميکند برای نمونه اگر ميخواهيد که رنگ زمينه صفحه اچتملتان سياه باشد کافی است که به شکل زير عمل کنيد :

در مثال زير تگ <table> دارای چهار شناسه مختلف با نامهای width، height ، align و border و مقادير center، 60، 100 و 0 ميباشد.

...

</table>

شناسه ها به صورت کلی "مقدار=نام" يا "name=value" نوشته ميشوند و هميشه به تگ شروع يک عنصر يا Element اضافه ميشوند و نهايتا اگر در يک عنصر يا Element شناسه ها قيد نشوند از مقادير قراردادی يا default آنها استفاده خواهد شد مثلا در تگ body اگر شناسه bgcolor نوشته نشود از رنگ سفيد برای زمينه صفحه استفاده خواهد شد.

مقدار يک شناسه را ميتوانيد داخل نويسه های " و يا ' بنويسيد و اختيار دست شما است فقط در مواردی که مقدار يک شناسه شامل نويسه " هم ميشود بايد از نويسه ' استفاده شود.

مثالها :

مثالی ساده از يک صفحه اچتمل

در اين مثال بسيار ساده عبارت معروف "!Hello World" در صفحه مرور گر نمايش داده شده و در واقع محتوای عنصر body تماما نمايش داده خواهد شد.

پاراگرافهای ساده:

چگونگی نمايش متون با کمک تگ <p> و بصورت پاراگرافی

نمايش متون فارسی:

چگونگی نمايش متون فارسی. برای جزئيات بيشتر به فصل فارسی نويسی مراجعه کنيد.

مثالهای بيشتر:

سر تيترها (Headings)

سر تيترها با کمک تگ های <h1> تا <h6> تعریف ميشوند. <h1> معرف بزرگترين سر تيتر و <h6> معرف کوچکترين سر تيتر است. مرورگر به هنگام نمايش يک سر تيتر بصورت اتوماتيک يک سطر خالی قبل و بعد از هر سر تيتر اضافه خواهد کرد.

[TABLE=width: 100%]

[TR]

[TD]<h1>This is a heading</h1>

<h2>This is a heading</h2>

<h3>This is a heading</h3>

<h4>This is a heading</h4>

<h5>This is a heading</h5>

<h6>This is a heading</h6>

[/TD]

[/TR]

[/TABLE]

مثال بالا در صفحه مرورگر بدين شکل نمايش داده خواهد شد.

پاراگرافها (Paragraphs)

پاراگرافها با کمک تگ <p> معرفی ميشوند. مرورگرها به هنگام نمايش يک پاراگراف بصورت اتوماتيک يک سطر خالی قبل و بعد از آن نمایش خواهند داد.

[TABLE=width: 100%]

[TR]

[TD]<p>This is a paragraph</p>

<p>This is another paragraph</p>

[/TD]

[/TR]

[/TABLE]

مثال بالا در صفحه مرورگر بدين شکل نمايش داده خواهد شد.

سطر جديد (Line Breaks)

برای رفتن سر سطر جديد از تگ <br> استفاده ميشود. در اينحالت يک پاراگراف جديد ايجاد نميشود. تگ <br> از نوع تگ های خالی بوده و دارای تگ انتهائی (مثلا <br/> ) نميباشد.

[TABLE=width: 100%]

[TR]

[TD]<p>This <br> is a para<br>graph with line breaks</p>

[/TD]

[/TR]

[/TABLE]

مثال بالا در صفحه مرورگر بدين شکل نمايش داده خواهد شد.

کامنت ها در اچتمل (Comments)

برای نوشتن شرح و توضيحات در مورد کدهای اچتمل بايد از تگ خاصی استفاده کنيد. برای اينکار بايد متن و شرحتان را درون علائم <-- و --!> قرار دهيد. مرورگر تگ های comment را در نظر نگرفته و محتوی آنها را نمايش نخواهد داد و فقط شرح و توضيحات برای برنامه نويس و ديگر افرادی که احتمالا در آينده با کد اچتمل کار خواهند کرد مفيد خواهد بود. (به محل نويسه "!" توجه کنيد! فقط يکی و آنهم در ابتدا)

[TABLE=width: 100%]

[TR]

[TD]

[/TD]

[/TR]

[/TABLE]

مثالی در مورد comments و نحوه استفاده از آن

چند نکته کاربردی:

توجه داشته باشيد که بدليل وجود مرورگرهای متفاوت (اکسپلورر، نت اسکيپ، فایرفاکس، صفری،...) و به دليل تفاوت دقت نمايش صفحه نمايش کامپيوترها، صفحات اچتمل با اندکی تفاوت در حالتهای مختلف نمايش داده ميشوند و هميشه سعی کنيد که صفحاتتان را نه تنها با اکسپلورر که معروفترين مرورگر است بلکه با فایرفاکس و نت اسکيپ و حتی مرورگرهای کامپيوترهای مکينتاش چک کرده و همچنين در دقت های نمايش 800x600 و 1024X768 آن را امتحان کنيد.

از نظر فاصله و سطر بندی، متنی که در صفحه اديتورتان تايپ ميکنيد با چيزی که مرورگر نمايش خواهد داد متفاوت خواهد بود.هميشه به ياد داشته باشيد که فاصله های اضافی (space) و خطهای خالی متن در صفحه اديتور توسط مرورگر در نظر گرفته نشده و نمايش داده نخواهد شد.

برای نمايش بيش از يک فاصله خالی بايد از نويسه ها يا ترکيب کاراکتری خاصی (None Breaking Space) استفاده کنيد. در بخش ( Entities ) نهادها به اين مطلب بيشتر پرداخته خواهد شد.

فاصله های اضافی بين کلمات در يک متن اچتمل توسط مرورگرها ديده نخواهد شد و در نمايش هميشه تبديل به تنها يک فاصله (space) خواهد شد. در ضمن يک خط خالی در متن اديتور بصورت يک فاصله يا space نمايش داده خواهد شد.

برای ايجاد يک سطر جديد هيچگاه از يک تگ <p> خالی استفاده نکنيد و به جای آن از تگ <br> استفاده کنيد..

مرورگرها به هنگام نمايش بعضی عناصر بصورت اتوماتيک يک سطر خالی قبل و بعد از آن عنصر نمايش خواهند داد. برای نمونه اين گروه از عنصرها ميتوان از پاراگراف (<p>) و سرتيترها (<h..>) نام برد، با کمک استایل شیتها میتوانید این پیش فرضها را تغییر دهید.

تگ <hr> يا Horizontal Roler سبب نمايش يک خط افقی خواهد شد و در واقع بخش های مختلف مطالب اين صفحات با کمک اين تگ از هم جدا شده اند.

مثالهای بيشتر:

باز هم مثال پاراگرافها

اين مثال بعضی از مقادير قراردادی عناصر پاراگراف را شرح ميدهد.

ترازبندی پاراگراف ها

اين مثال نحوه تراز بندی يک پاراگراف را با کمک شناسه يا attribute ای به نام align نشان ميدهد. در اين حالت پاراگراف در وسط ناحيه نمايش داده خواهد شد.

( "align="center )

رفتن سر سطر جديد

اين مثال نحوه استفاده از تگ <br> را در يک متن اچتمل نشان ميدهد.

سر تيترها

اين مثال نحوه استفاده از تگهای <h1> .... <h6> را در يک متن اچتمل نشان ميدهد.

ترازبندی سر تيترها

اين مثال نحوه تراز بندی يک سر تيتر را با کمک شناسه يا attribute ای به نام align نشان ميدهد. در اين حالت سر تيتر در وسط ناحيه نمايش داده خواهد شد.

( "align="center )

نمايش خطوط افقی

اين مثال نحوه نمايش خطوط افقی با استفاده از تگ <br> ميباشد.

استفاده از comment

اين مثال نحوه استفاده از comment در کدهای اچتمل را نمايش ميدهد.

تعيين رنگ زمينه صفحه

اين مثال نحوه تعيين رنگ زمينه صفحه را با کمک يکی از شناسه های (attribute ) عنصر body به نام bgcolor نشان ميدهد. (Background Color)

( "bgcolor ="blue )

ورود

ميخواهيد که يک فايل اچتمل بسازيد؟

ارسال‌های توصیه شده

Amir.Jack 2

لینک به دیدگاه

به اشتراک گذاری در سایت های دیگر

بیشترین ارسال‌ها در این موضوع

روزهای محبوب

بیشترین ارسال‌ها در این موضوع

روزهای محبوب

Amir.Jack 2

لینک به دیدگاه

به اشتراک گذاری در سایت های دیگر

به گفتگو بپیوندید

کاربران آنلاین در این صفحه 0 کاربر

فهرست بخش ها

فعالیت ها

فروشگاه

پشتیبانی

اطلاعات مهم