آموزشگاه كامپيوتر پايا - برگزار كننده دوره هاي تخصصي كامپيوتر
 صفحه نخست  |  درباره ما  |  ارتباط با ما  |  صفحه جزوات آموزشي  |  دانلود  |  لينك ها 

جزوات آموزشي

 

آموزش زبان HTML

 

 

 

دانلود جزوه آموزشی HTML 

 

 

يك فايلHTML چيست؟

·   HTML برگرفته از حروف اول  Hyper  Text  Markup  Language ميباشد.

·   يك فايل HTML   فايلي از نوع TEXT   ميباشد كه متشكل از Markup Tag   ها ميباشد.

·   مرور گر يا Browser  از روي Markup Tag  ها مي فهمد كه چگونه بايد صفحه را نمايش بدهد.

·   يك فايل HTML  بايد داراي پسوند Htm   يا Html   باشد.

·   يك فايل HTML  فايلي از نوع Text   ميباشد كه با هر اديتور ساده اي قابل ايجاد است.

·   وظيفه اصلي تگ هاي HTML  (Markup Tags   ) بيان چگونگي نمايش اطلاعات ميباشد.

 

 

 

مي خواهيد كه يك فايل HTML  بسازيد؟

اگر از ويندوز مايكروسافت استفاده ميكنيد، Notepad  را باز كرده و متن زير را در آن تايپ كنيد:

 

 

<html>

      <head>

<title>TITLE OF PAGE</title>            

</head>

      <body>

THIS IS MY FIRST HTML PAGE. <b>THIS TEXT IS BOLD </b>

</body>

      </html>

 

 

 

سپس فايل را با نام مثلا Text .html  در درايو  C: ذخيره كنيد.

 

تگ html  عنوان اصلي شروع و خاتمه برنامه تحت WEB است .

تگ head  سربرنامه است و محتويات و دستورات آن قبل از load  شدن صفحه web  اجرا مي شود.

تگ body  بدنه برنامه است و محتويات و دستورات آن بعد از load  شدن صفحه web  اجرا مي شود.

 

براي ديدن فايل html بالا در مرورگر يا  Browser تان ( معمولا اينترنت اكسپلورر و يا نتسكيپ نويگيتور ) كافي است كه روي منوي

 File/Open File  فايل بالا را از روي محل ذخيره شده بخوانيد. ( به آدرس فايل در قسمت Address توجه كنيد،  مثلاً C: \Test.html يكي ازمهمترين وظايف مرورگر نمايش صفحات html مي باشد. چه اين صفحات روي كامپيوتر شما ذخيره شده باشند و يا اينكه از اينترنت خوانده شوند. با كليك روي يك لينك، فايلي شبيه فايل ذخيره شده توسط شما از روي وب سرور توسط مرورگرتان خوانده شده و سپس نمايش داده خواهد شد.

 ( به آدرس فايل در قسمت Address  توجه كنيد.)

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

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

      متن بين تگ <head> و تگ  </head> اطلاعات شناسنامه اي يا "Information Header"  متن html  بوده و نمايش داده نخواهد شد. در اين مثال با كمك تگهاي <title> و<title/> تيتر و يا  Title صفحه كه در اين مثال عبارت "Of  Page Title"  مي باشد در بالاي مرورگر نمايش داده خواهند شد.

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

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

 

 

 

 

 

انشعاب فايل HTML  يا  DHTML  ؟

 

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

 

 

 

نكته اي در مورد اديتورهاي HTML ( HTML Editors )

با وجوديكه با استفاده از اديتورهاي اختصاصي HTML  مانند  Front page امكان نوشتن و طراحي صفحات  HTML بصورت  WYSIWYG يا  "Get You What Is See You What" وجود دارد اما توصيه مي شود كه از اديتورهاي معمولي متن براي تهيه صفحات خود استفاده كرده، عملكرد تگها را شناخته و هيچگاه بدون اينكه بدانيد كاربرد يك تگ چيست آنرا بكار نبريد.

سوالات:

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

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

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

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

- آيا مي توانيم از هر دو مرور گر  Internet Explorer وNavigator  Netscape استفاده كنم؟

= بله فقط اگر از استاندارد يونيكد براي فارسي نويسي استفاده مي كنيد، براي ديدن درست صفحات فارسي بايد از نسخه Internet Explorer 5 و به بالا و در مورد Navigator  Netscape  از نسخه 6.2 و به بالا استفاده كنيد.

 

 

 

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

·    وب شبكه اي است متشكل از تمامي كامپيوترهاي دنيا (شبكه اي از شبكه ها)

·    اينترنت، وب،  World Wide Web , WEB , WWW همگي يك چيزند.

·    تمامي كامپيوتر هاي وب مي توانند با هم ارتباط داشته باشند.

·    كامپيوترهاي موجود در وب با كمك استاندارد ارتباطي يا پروتوكل HTTP با هم ارتباط برقرار مي كنند.

 

 

 

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

·    اطلاعات وب داخل فايلهايي به نام Web Page و يا صفحات وب قرار دارند.

·    اين فايلها يا صفهات روي Web Server يا كامپيوترهاي سرويس دهنده وب ذخيره شده اند.

·    براي ديدن صفحات وب از نرم افزاري به نام مرورگر و يا Web Browser استفاده ميشود.

·    مرورگر  Internet Explorer متعلق به شركت مايكروسافت و مرورگر Navigator  Netscape متعلق به شركت نت اسكيپ جزو معروفترين مرورگرها حساب مي شوند.

 

 

 

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

·    يك مرورگر با كمك يك Reguest درخواستي براي خواندن يك صفحه از وب سرور استفاده مي كند.

·    اين Reguest  يا در خواست بر اساس استاندارد ارتباطي يا پروتكل HTTP بوده و شامل آدرس صفحه مورد نظر مي باشد.

 

 

 

 

 

·    آدرس يك صفحه چيزي شبيه   http://www.Google.com/faq.html است.

·    بخش  http://  نوع پروتكل و يا استاندارد ارتباطي را تعيين ميكند، www.Google.com  نام «دومين يا domain» است و fag.html نام صفحه اي است كه بايد خوانده شود.

 

 

 

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

·    چگونگي نمايش يك صفحه وب بصورت مستتر در آن وجود دارد.

·    مرورگرها از روي دستورالعمالهاي داخل صفحات وب و با كمك تگ ها به نمايش صفحات ميپردازند.

·    وظيفه اصلي تگهاي اچتمل (html tags) بيان چگونگي نمايش اطلاعات مي باشد.

·    يك تگ اچتمل چيزي شبيه <p> اين تگ پاراگراف است!  </p> است.

 

 

 

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

·    تعيين استانداردهاي وب ربطي به شركتهاي مايكروسافت و يا نت اسكيپ ندارد.

·    Word Wide Web Consortium يا  W3C متولي تعيين استاندارد هاي وب است.

·    HTML, CSS and XML  از مهمترين استاندارهاي تصويب شده وب مي باشد.

·    آخرين استاندارد  html استاندارد xhtml1.0 مي باشد.

 

 

 

عناصر (elements)

يك فايل اچتمل متني از نوع text است كه از عناصر يا element ها تشكيل مي شود و براي ايجاد عناصر از تگ ها يا tags استفاده مي شود. در اين قسمت با عناصر و تگ هاي اچتمل آشنا خواهيد شد.

 

 

 

تگ هاي اچتمل (html tags)

·    با كمك تگ هاي اچتمل عناصر و يا Elements ساخته مي شوند.

·    در زبان اچتمل حدود 80 عنصر تعريف شده است.

·    تگ هاي اچتمل بوسيله دو نويسه (char)  <و > ساخته مي شوند.

·    تگ هاي اچتمل معمولا بصورت زوج ظاهر مي شوند، مانند <b>test</b>

·    تگ اول در يك زوج تگ مثلاً <b> تگ شروع و تگ دوم مثلاً </b> تگ پاياني نام دارد.

·    متن بين تگ اول و تگ دوم در يك زوج تگ محتواي عنصر يا element content ناميده مي شود، مثلاً "test"  

·    تگ هاي اچتمل را مي توانيد بوسيله حروف لاتين كوچك (lower case) و يا بزرگ (upper case) بنويسيد و case sensitive نيستند. براي مثال دو تگ <b> و <B> معادل هم هستند ولي شديداً توصيه مي شود كه به خاطر سازگاري با xhtml از حروف كوچك استفاده شود.

 

 

<html>

<head>

<title> TITLE OF PAGE </title>

</head>

<body>

THIS IS MY FIRST HTML PAGE. <b>THIS TEXT IS BOIL </b>

</body>

</html>

 

 

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

 

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

 

 

 

 

 

 

·         نمونه اي از يك عنصر اچتمل:

<b> This text is bold </b>

 

 

 

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

 

·         مثال2:  يك عنصر اچتمل ( معلوم الحال )

<body>

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

</body>

 

 

 

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

 

 

 

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

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

<body bgcolor = "black">

 

 

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

<table       border = "0"       width = "100"     height = "60"       align = "center"    >

……

</table>

 

 

 

 

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

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

 

 

 

تگ هاي اصلي (Basic Tags)

تگ ها اجزا تشكيل دهنده عناصر يا Elements  هاي اچتمل هستند و در اين فصل با عناصر و تگهاي پايه و مهم:

 

<p>    ,    <!--  "comment" -->   ,   <h6>    …. <h1>    ,    <br>    ,    <hr>

 

 

آشنا خواهيد شد. يكي از بهترين روش هاي يادگيري تگ هاي اچتمل ديدن مثالها و تغيير آنها مي باشد.

 

 

مثالها:

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

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

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

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

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

 

 

 

 

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

 

 

سرتيتر ها (headings)

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

<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>

 

 

اگر بخواهيم به نوشته هايمان نظم بيشتري بدهيم در واقع جاي آن را مشخص كنيم از دستور aling استفاده مي كنيم .

 

 

<h1 aling = (left/center/right)> </h>

 

 

 

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

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

<p> This is a paragraph </p>

<p> This is another paragraph </p>

 

 

 

آوردن تصوير

اگر بخواهيم backgrand صفحه ي وب تصويري باشد  مي بايست دستور آن را در قسمت body بنويسيم.

 

 

 > " مسير كامل عكس"<body  backgrand =

 

 

اما در صورتي كه بخواهيم تصوير را در قسمتي از صفحه وب داشته باشيم،  مي بايست دستور آن را در بدنه برنامه به صورت ذيل به كار ببريم.

 

 

> " مسير كامل عكس"<Imgsrc =

 

 

اگر بخواهيم تصوير hayper  link باشد بايد تگ آن را بين دو تگ    <a href>بنويسيم.

 

 

<a href = "www.yahoo.com"> <imgsrc = "d:\image\flower.jpg"> </a>

 

 

 

سطر جديد  (Line Breaks)

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

 

 

<p> this <br> is a para <br> graph with line breaks </p>

 

 

 

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

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

 

 

 

<!-- This  is  a  comment -->

 

 

 مثالي در مورد Comment و نحوه استفاده از آن

 

 

 

 

 

چند نكته كاربردي:

- توجه داشته باشيد كه بدليل وجود مرورگرهاي متفاوت ( اكسپلورر، نت اسكيپ و .. ) و به دليل تفاوت دقت نمايش صفحه نمايش كامپيوتر ها، صفحات اچتمل با اندكي تفاوت در حالتهاي مختلف نمايش داده مي شوند و هميشه سعي كنيد كه صفحاتتان را نه تنها با اكسپلورر كه معروفترين مرورگر است بلكه با نت اسكيپ و حتي مرورگرهاي كامپيوترهاي مكينتاش چك كرده و همچنين در دقت هاي نمايش 800 * 600  و  1024 * 768 آن را امتحان كنيد.

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

براي نمايش بيش از يك فاصله خالي بايد از نويسها يا تركيب كاراكتري خاصي (Breaking  Space  None) استفاده كنيد.

در بخش  (Entities)  نهادها به اين مطلب بيشتر پرداخته خواهد شد.

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

در ضمن يك خط خالي در متن اديتور بصورت يك فاصله يا Space نمايش داده خواهد شد.

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

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

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

 

 

 

تگهاي اصلي

در جدول زير عناصر معرفي شده در اين فصل به همراه لينكهاي مربوط جهت مطالعه بيشتر آورده شده است . توجه داشته باشيد كه براي هر عنصر فهرستي از شناسه ها يا attributes موجود است و همچنين به شناسه هاي كنار گذاشته شده (deprecated) در نسخه هاي آينده اچتمل توجه داشته باشيد و سعي كنيد كه از آنها استفاده نكنيد .

 

Start tag

purpose

كاربرد

<html>

Defines a html document

نشان شروع متن اچتمل

<body>

Defines the documents body

تعيين بدنه و قسمت اصلي صفحه اچتمل

<h1>

<h6>

Defines heading 1 to heading 6

تعريف سر تيترهاي h1 تا h6

<p>

Defines a paragraph

تعريف پاراگراف

<br>

Insert a single line break

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

<hr>

Defines a horizontal rule

نمايش خط افقي

<!-->

Defines a comment in the HTML source code

نوشتن شرح و comment

 

 

 

 

فارسي نويسي

در اين درس با فارسي نويسي، فارسي سازي و استاندارد يونيكد و نحوه استفاده از اديتور آنلاين و فارسي اين سايت آشنا خواهيد شد. همچنين متاتگ http-eguiv و شناسه dir نيز معرفي خواهد شد.

سوالات مربوط به فارسي نويسي را ميتوان به  سه گروه عمده تقسيم كرد:

1- چگونه فارسي بنويسيم ؟

2- چگونه فارسي بخوانيم ؟

3- چگونه صفحات اچتمل فارسي را نمايش دهيم ؟

 

 

 

 

 

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

 

روش كد گذاري utf – 8 :

اكيداً توصيه مي شود كه براي تايپ و نمايش متون فارسي از استاندارد يونيكد و روش كد گذاري 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) نوع  Encoing توسط بازديد كننده سايت نخواهد بود.

 

·    شناسه يا  attribute اي به نام dir:

جهت نمايش متون لاتين به صورت پيش فرض و default از چپ به راست (ltr) مي باشد. در مورد متون و جملات فارسي بايد با كمك روشي جهت نمايش پيش فرض را به "راست به چپ"  تغيير دهيد.  شناسه يا attribute اي به نام dir يا همان direction اين كار را براي شما انجام مي دهد. اين شناسه داراي دو مقدار ممكن مي باشد:

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

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

 

 

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

</p> سلام بر دنياي وب   < p dir = "rtl">

</div> سلام به دنياي وب   < div dir = "rtl">

 

 

 

در بسياري از عناصر و تگ هاي اچتمل امكان استفاده از شناسه dir ميسر بوده و به عنوان نمونه ميتوان از عناصر زير نام برد:

<p>  ,   <div>  ,   <html>  ,   <body>  ,   <table>    ,   <tr>   ,   <td>  ,   <h1 ….h6>

<Input>   

 

 

 

فرمت دهي (Formatting)

وظيفه گروهي از تگهاي اچتمل فرمت دهي و تعيين شكل نمايش متون ( مثلاً ضخيم و bold بودن و يا مورب و ايتاليك بودن ) مي باشد و در اين درس با گروه از تگهاي Formating آشنا خواهيد شد:

 

<b>  ,  <big>  ,  <code>    ,   <del>   ,   <em>   ,   <i>  ,   <ins>   ,   <kbd>  ,   <pre>  ,   <s>

<samp>  ,   <small>   ,   <strike>   ,    <strong>  ,   <sub>  ,   <sup>   ,   <tt>   ,   <u>   ,   <var>

 

 

 

 

مثالهاي شكل دهي متون  ((Text Formatting

 در مثالهاي زير نحوه استفاده  از عناصر و تگهاي شكل دهي متون شرح داده شده اند:

- شكل دهي متون:

شكلهاي مختلف نمايش  متون با كمك عناصر:    , sup  sup , strong , big , em , I , small , sub , b

- متون از قبل شكل دهي شده:

نمايش متون از قبل شكل دهي شده با كمك عنصر pre  يا  pre Formatted براي نمايش اشعار فارسي استفاده از عنصر pre بهترين انتخاب مي باشد.

- عناصر ديگر شكل دهي متن

نمايش متون   underline , deleted و ... با كمك عناصر:   code ,  kbd ,  tt , samp , var , del , ins

 

 

 

 

 

 

 

 نحوه ديدن سورس كدهاي اچتمل  (html  source)

- اگر مي خواهيد كه سورس كدهاي  اچتمل صفحات وب را ببينيد كافي است كه در منوي view مرورگرتان حالت  source يا Source   Pageرا انتخاب كرده و مرورگر كد اچتمل را درون اديتوري باز كنيد، كه قابل ذخيره توسط شما براي استفاده هاي بعدي مي باشد.

- اگر صفحه مورد نظر از مجموعه فريمها (Frameset) استفاده كرده باشد براي ديدن سورس كد اصلي فريمها  كافي است كه ابتدا با كمك روش بالا به مشاهده سورس كدهاي اچتمل پرداخته ( لازم به توضيح است كه در اين حالت فقط تعاريف كلي فريمها قرار دارند. ) و سپس براي ديدن كد اچتمل اختصاصي هر صفحه بايد پس از "Right Click" روي هر صفحه "View Source" كرده و كد اچتمل هر فريم را جداگانه ببينيد.

- اگر طراح سايت با كمك java Script  مانع ديدن سورس توسط شما مي شود، ابتدا در منوي  Tools /Internet Option…/Security/Custom Level مرورگرهاي اكسپلورر امكانات جاوا اسكريپت مرورگر را غير فعال كرده (disable) و سپس مراحل بالا را تكرار كنيد !!!

 

 

 

چند نكته كاربردي:

1- در استفاده ازunderline دقت كنيد، چون دراكثر مرورگرها، پيوندها با اين خطوط نشان داده مي شوند واين مساله ميتواند كاربران را دچار اشتباه كند.

2- به كارگيري تگهاي Strong , EM كه جايگزين تگهاي B , I  هستند، اين اطمينان را مي دهد كه صفحه شما توسط همه مرورگرها بصورت صحيح نمايش داده خواهد شد.

3-  به ترتيب بسته شدن تگهاي پاياني در مثال زير دقت كنيد، همان گونه كه مشاهده مي كنيد عنصر STRONG بعد از عنصر U شروع شده است، به همين خاطر تگ آن قبل از تگ خاتمه دهنده U قرار مي گيرد.                               <U> version <STRONG > 2.0 </STRONG> </U>

 

 

 

تگهاي فرمت دهي متون

 

كاربرد

(هدف)Purpose 

Start Tag

نمايش توپر

Defines bold text

<b>

نمايش در اندازه بزرگ

Defines big text

<big>

نمايش به صورت تاكيد شده

Defines emphasized text

<em>

نمايش ايتاليك يا كج

Defines italic text

<i>

نمايش در اندازه كوچك

Defines small text

<small>

نمايش قوي؟!

Defines strong text

<strong>

نمايش پايين تر از خط افقي

Defines subscripted text

<sub>

نمايش بالاتر از خط افقي

Defines superscripted text

<sup>

نمايش به صورت خط زير

Defines inserted text

<ins>

نمايش به صورت خط خورده

Defines deleted text

<del>

از رده خارج

Deprecated. Use <del> instead

<s>

از رده خارج

Deprecated. Use <del> instead

<strike>

از رده خارج

Deprecated. Use styles instead

<u>

نمايش كدهاي برنامه نويسي

Defines computer code text

<code>

نمايش متن بصورت صفحه كليدي

Defines keyboard text

<kbd>

نمايش كدهاي نمونه برنامه نويسي

Defines sample computer code

<samp>

نمايش تله تايپ

Defines teletype text

<tt>

نمايش متغيير ها

Defines a variable

<var>

نمايش متون از قبل فرمت شده

Defines preformatted text

<pre>

 

 

 

 

 

Character Entities

 در استاندارد اچتمل گروهي از نويسه ها (Character) داراي معني خاصي ميباشد، مثلاً نويسه <  شروع يك تگ و نويسه >  انتهاي يك تگ را نشان مي دهد. و براي نمايش آنها در صفحاتتان مستقيماً قابل مصرف نمي باشند. در اين فصل با فهرست اين نويسه ها آشنا شده و نحوه درج آنها را با كمك Character Entities فرا خواهيد گرفت.

 

در اچتمل بعضي از نويسه ها داراي معني خاصي بوده و براي نمايش آنها در صفحاتتان بايد از Character Entities ها استفاده كنيد يك Character Entities   از سه قسمت تشكيل مي شود.

1- نويسه ampersand (&)

2- نام entity يا نويسه #   و سپس شماره عددي entity

3- نويسه semicolon ( ; )

 

براي مثال براي نمايش نويسه < دو روش وجود دارد، بايد از   &lt;  يا از   &#60; استفاده كنيد. در اين مثال  lt  نام entity  و 60 شماره عددي آن  مي باشد.

 

مزيت استفاده از نام entity در مقابل استفاده از شماره عددي آن سهولت يادآوري آن از روي نامش ميباشد و عيب آن اين است كه تمامي مرورگرها     نام گذاريهاي موجود براي Entity ها را قبول ندارند ولي در عوض همگي شماره هاي عددي  Entityها به كوچك و بزرگي حروف حساس هستند و در واقع Case Sensitive مي باشند.

 

پر كاربردترين character entity در اچتمل، نويسه فاصله يا Space يا  Blank مي باشد و نام رسمي آن non-breaking space  ميباشد. همانطور كه مي دانيد مرورگرها فاصله هاي اضافي را در نظر نگرفته (truncate spaces) و مثلاً  از 10 نويسه فاصله،   9 تاي آنرا ناديده ميگيرند و براي نمايش فاصله هاي اضافي بايد از &nbsp; استفاده كنيد.

 

 

 

 

 

فهرست پر كاربرد ترين character entities ها

 

RESULT

نمايش

Description

شرح

Entity   name

نام

Entity  number

شماره عددي

 

Non – braking space

&nbsp;

&#160;

< 

Less than

&lt;

&#60;

> 

Greater than

&gt;

&#62;

&

ampersand

&amp;

&#38;

"

quotation mark

&quot;

&#34;

'

apostrophe

 

&#39;

 

 

چند  Character Entitie با كاربردهاي كمتر

 

RESULT

نمايش

Description

شرح

Entity   name

نام

Entity  number

شماره عددي

¢

cent

&cent;

&#162;

£

pound

&pound;

&#163;

¥

Yen

&yen;

&#165;

§

Section

&sect;

&#167;

©

Copy right

&copy;

&#169;

®

Registered trademark

&reg;

&#174;

×

multiplication

&times;

&#215;

÷

division

&divide;

&#247;

 

 

 

 

 

پيوندهاي اچتمل  (html links )

دراين درس با پيوندها (links)، تگ هاي مربوطه مخصوصاً تگ Anchor يا  A و نحوه به كارگيري آنها آشنا خواهيد شد.  همچنين شناسه هاي بسيار مهم target , href و name تشريح خواهند شد.

 

در محيط وب، صفحات اچتمل با كمك پيوندها به يكديگر متصل (Link) مي شوند. اصطلاح اَبَرمتن (Hyper Text) در مقابل متن خطي(linear)  قرار دارد در يك متن معمولي خواندن به شكل خطي و از ابتدا به انتها ميباشد و در مقابل در يك متن مختلط (Hyper) با كمك پيوندها ميتوان از يك متن به هر صفحه ديگر در وب متصل شد. اين كار با كمك عنصري معلوم الحال! به نام  A يا Anchor ميسر مي گردد.

 

 

 

 

تگ Anchor و شناسه href

 براي ايجاد پيوند به صفحات ديگر از تگ <a> استفاده مي شود. پيوندها مي توانند به بخش ديگري از همان صفحه، صفحات ديگر وب، تصاوير، فايلهاي صوتي يا حتي فيلم ها و .... اشاره كنند. فرم كلي يك پيوند به قرار زير است:

<a href = "url" > some text </a>

 

 

 در مثال بالا تگ <a> براي ايجاد پيوندي به صفحه اي ديگر كه آدرس اينترنتي آن url ميباشد بكار رفته است. براي تعيين مقصد و يا آدرس صفحه جديد از شناسه اي به نام href كه همان reference hyperlink مي باشد، استفاده مي شود و مقدار اين شناسه متني (و يا تصويري) كه توسط مرورگر نمايش داده خواهد شد و بازديد كننده روي آن كليك خواهد كرد.  ميان تگهاي <a> و </a> قرار داده مي شود و هر چند كه در مثال بالا اين بخش متن "some text" است ولي مي تواند حتي يك تصوير باشد. براي نمونه كد اچتمل زير پيوندي به سايت google .com ايجاد خواهد كرد:

 

<a href = "http://www.google.com/" > visit google site </a>

 

 

 و مرورگر پيوند بالا را به شكل زير نمايش داده و در اثر كليك روي پيوند توسط بازديد كننده،  مرورگر به سايت google  خواهد رفت.

Visit google site

 

 

 شناسه target در  پيوندها :

با كمك شناسه target امكان تعيين مقصد پيوند جديد فراهم مي شود. در مثال بالا پس از كليك روي پيوند، مرورگر سايت google.com را باز كرده و جايگزين سايت فعلي خواهد شد. اگر ميخواهيد كه مرورگر پيوند را در صفحه اي جديد باز كند بايد از شناسه target و مقدار "blank" براي آن استفاده كنيد. مثال زير سبب باز شدن سايت google درپنجره جديدي خواهد شد:

<a  href = "http://www.google.com/"  target = "_blank" > visit  google  site </a>

 

 

شناسه Name:

با كمك شناسه name  ميتوانيد پيوندها را نام گذاري كنيد. پيوندهاي نامگذاري شده امكان حركت ميان قسمتهاي مختلف يك صفحه يا page  را فراهم ميكنند. در اين صورت مثلاً براي رفتن به آخر يك متن ديگر نيازي به  scroll down كردن تمامي صفحه نيست و كافي است كه بازديد كننده روي پيوندي كه به آخر صفحه اشاره مي كند كليك كند. استفاده از پيوندهاي نامگذاري شده شامل دو مرحله است:

 

1- ايجاد يك پيوند نامگذاري شده ( اين قسمت به عنوان لنگر كار خواهد كرد ): فرم كلي يك پيوند نام گذاري شده به قرار زير است:

<a name = "label" > Text to be displayed </a>

 

وظيفه شنايه  nameتعيين نام براي پيوند است و مقدار آن همان نام پيوند مي باشد. نام پيوند هم هر نام لاتيني مي تواند باشد. در فرم كلي بالا، نام پيوند label و متني كه بعنوان پيوند نمايش داده مي شود عبارت  "Text to be displayed" خواهد بود. مثال زير به ايجاد يك پيوند نامگذاري شده با نام top  مي پردازد:

 <a  name = "top" > Here  is top of my page!</a>

 

 

 

2- ايجاد يك پيوند به پيوند نامگذاري شده ديگر:

براي دادن لينك به پيوندي نام گذاري شده، كافي است كه پيوندي معمولي ايجاد كرده و در قسمت href آن ابتدا url مقصد و سپس نويسه # و در نهايت نام پيوند نامگذاري شده را درج كنيد. . مثال زير ايجاد پيوندي است كه به لينك نامگذاري شده اي به نام top  اشاره ميكند:

<a  href = "#index.htm#top" > Goto top! </a>

 

 

 

در اثر كليك روي پيوند بالا مرورگر مستقيماً به ابتداي بخش top صفحه index.html  خواهد رفت.

اگر مقصد پيوند در همان صفحه قرار دارد نياز به قيد  بالا url نيست و فقط نويسه # و سپس نام پيوند كافي است:

<a href = " #top "> Goto Top! </a>

 

 

 

 

 چند نكته كاربردي در مورد پيوندها:

- يكي از كاربردهاي رايج پيوندهاي نام گذاري شده در صفحات و متوني ميباشد كه فهرست و يا ليستي از اقلام نمايش داده شده است، مانند بخش سرفصل مطالب، فهرست  FAQ و يا ... در همين صفحه در دو مورد از پيوندهاي نامگذاري شده استفاده شده است، آيا ميتوانيد آنها را بيابيد ؟!

- اگر مرورگر نتواند يك پيوند نامگذاري شده را بيابد ابتداي صفحه مقصد را نمايش خواهد داد.

 

 

 

جدول (Tables)

 در اين درس با اِلمان جدول (Table)، سلولها يا خانه ها، مرز و border در جداول و تگ هاي مربوطه مخصوصاً تگهاي TD –TR – Table  آشنا خواهيد شد. توجه داشته باشيد كه جداول يكي از مهمترين الِمانهاي آرايش و layout مي باشند.

 

 

 

جدولها

براي تعريف جداول از تگ <table> استفاده ميشود. يك جدول از يك يا چند سطر كه با كمك تگ <tr> تعريف ميشوند، تشكيل ميشود. هر رديف يا row از يك يا چند سلول، خانه يا call تشكيل گرديده كه با كمك تگ <td> ايجاد ميشوند. نام هاي td و tr به ترتيب خلاصه شده   table   row  و     table   data   مي باشند.

محتوي يك سلول ميتواند،  متن، تصوير، فهرستها، جداول ديگر، پاراگرافها  و .... باشد.

 

 

 

 

 

 

مثال زير جدولي است با دو سطر و سه ستون :

 

كد اچتمل جدولي با دو سطر و سه ستون

نمايش جدول توسط مرورگر

 

<table border = "1" dir = "rtl">

<tr>

<tr>

<td> رديف 1 ،  سلول 1 </td>

<td> رديف 1 ،  سلول 2 </td>

<td> رديف 1 ،  سلول 3 </td>

</tr>

<tr>

<td> رديف 2 ،  سلول 1 </td>

<td> رديف 2 ،  سلول 2 </td>

<td> رديف 2 ،  سلول 3 </td>

</tr>

</table>

 

رديف 1 ، سلول 1

رديف 1 ، سلول 2

رديف 1 ، سلول 3

رديف 2 ، سلول 1

رديف 2 ، سلول 2

رديف 2 ، سلول 3

 

 

 

 

سه مفهوم در  table:

1) border : ضخامت خطهاي دور جدول

2) Cellspacing : فاصله خالي بين سلولها را مشخص مي كند.

3) Cellpading : فاصله خالي بين محتواي سلول تا اطراف سلول را مشخص مي كند.

< table  border = 12    cellpading = 15   cellspasing = 14 >

 

 

 

جدول ها و شناسه  dir , border :

- در مثال بالا شناسه border  مرز جدول را مشخص مي كند، مقدار 1 مرزي با ضخامت يك پيكسل را نمايش خواهد داد، و مقدار صفر جدول را بدون مرز نمايش خواهد داد. توجه داشته باشيد كه حالت پيش فرض يعني جدولي بدون شناسه border ، جداول بدون مرز را نمايش خواهد داد.

- در مثال بالا شناسه dir يا direction و مقدار rtl براي آن، سبب تعيين نمايش جهت متون از راست به چپ خواهد شد. و چون در داخل تگ table تعريف شده است به تمامي سلولهاي جدول اعمال خواهد شد.

- ساده ترين جدول ممكن در اچتمل، جدولي است با يك سطر و يك ستون!

 

 

 

 

 

 

سرستون در جداول (Headings)

 سرستونها در جداول با كمك تگ <th> تعريف مي شوند. مثال زير نحوه تعريف سرستونها را در جداول نمايش مي دهد:

 

كد اچتمل جدولي با سه سطر و سه ستون

نمايش جدول توسط مرورگر

 

<table border = "1" dir = "rtl">

<tr>

<th> سر ستون 1 </th>

<th> سر ستون 2 </th>

<th> سر ستون 3 </th>

</tr>

<tr>

<td> رديف 1 ،  سلول 1 </td>

<td> رديف 1 ،  سلول 2 </td>

<td> رديف 1 ،  سلول 3 </td>

</tr>

<tr>

<td> رديف 2 ،  سلول 1 </td>

<td> رديف 2 ،  سلول 2 </td>

<td> رديف 2 ،  سلول 3 </td>

</tr>

</table>

 

سرستون 1

سرستون 2

سرستون 3

رديف 1 ، سلول 1

رديف 1 ، سلول 2

رديف 1 ، سلول 3

رديف 2 ، سلول 1

رديف 2 ، سلول 2

رديف 2 ، سلول 3

 

 

 

همانطوري كه مشاهده مي كنيد سر ستونها مانند سلولهاي معمولي جداول تعريف ميشوند و فقط به جاي td  از  th استفاده شده، ولي در نمايش محتواي سر ستونها  bold يا توپر نمايش  داده خواهند شد.

 

 

 

خانه هاي خالي در جداول (Empty Cells)

اگر محتواي خانه اي از يك جدول خالي باشد چه چيزي بايد نمايش داده شود؟

بسته به مرورگري كه استفاده مي كنيد نتيجه نمايش متفاوت است. و مثلاً در مثال زير خانه خالي جدول بدون مرز نمايش داده خواهد شد:

 

 

كد اچتمل جدولي با دو سطر و دو ستون

نمايش جدول توسط مرورگر

 

<table border = "1" dir = "rtl">

<tr>

<td> رديف 1 ،  سلول 1 </td>

<td> رديف 1 ،  سلول 2 </td>

</tr>

<tr>

<td> رديف 2 ،  سلول 1 </td>

<td> </td>

</tr>

</table>

 

رديف 1 ، سلول 1

رديف 1 ، سلول 2

رديف 2 ، سلول 1

 

 

 

 

 

در اينگونه موارد براي رفع مشكل كافي است كه از  non – breaking space (&nbsp;) يا همان نويسه و كاراكتر فاصله و بلانك استفاده شود و در مورد مثال ذكر شده مرورگر جدول را به شكل زير نمايش خواهد داد:

 

 

كد اچتمل جدولي با دو سطر و دو ستون

نمايش جدول توسط مرورگر

 

<table border = "1" dir = "rtl">

<tr>

<td> رديف 1 ،  سلول 1 </td>

<td> رديف 1 ،  سلول 2 </td>

</tr>

<tr>

<td> رديف 2 ،  سلول 1 </td>

<td> &nbsp; </td>

</tr>

</table>

 

رديف 1 ، سلول 1

رديف 1 ، سلول 2

رديف 2 ، سلول 1

 

 

 

 

توجه داشته باشيد كه اينبار مرزهاي خانه خالي جدول بدرستي ترسيم گرديده اند.

 

 

 

چند نكته اساسي در مورد جداول:

- در جداول، رديف ها، خانه ها و سرستونها از تعداد زيادي از شناسه ها مي توانيد استفاده كنيد كه شرح همگي آنها از حوصله دانشجويان محترم خارج است و توصيه ميشود كه از زير و جدول واقع در انتهاي اين صفحه براي مطالعه هر چه بيشتر در مورد جزييات شناسه ها استفاده شود.

- شناسه dir قابل استفاده در بسياري از تگها ( th – td – tr – table ) ميباشد. با كمك شناسه dir و مقدار rtl  براي آن، جهت نمايش متون فارسي از "راست به چپ "  تعيين تعيين ميگردد.  توجه داشته باشيد كه مقدار شناسه dir به صورت موروثي از  table به tr و th و از  tr و th به td خواهد رسيد مثلا براي تعيين مقدار rtl براي تمامي خانه هاي يك جدول كافي است كه فقط شناسه مزبور را در تگ table قيد كنيد و نيازي به قيد آن در تمامي خانه هاي جدول نيست البته مي توانيد كه در مورد يك رديف خاص و يا يك خانه خاص شناسه dir را موردي تعيين كنيد.

 

 

 

تگهاي جداول

 

Start Tag

Purpose

كاربرد

<table>

Defines a table

تعريف جدول

<th>

Defines a table header

تعريف سرستون در جداول

<tr>

Defines a table row

تعريف رديف ها در جداول

<td>

Defines a table cell

تعريف سلول يا خانه هاي يك جدول

<caption>

Defines a table caption

تعريف عنوان جدول

 

فريمها (Frames)

با كمك فريمها قادر به نمايش همزمان بيش از يك صفحه وب در پنجره مرورگر خواهيد شد. هر صفحه يا دريچه،  فريم (frame) ناميده شده و فريمها كاملاً مستقل از هم مي باشند. محتواي هر فريم  هم مي تواند هر صفحه يا وب سايتي باشد. هر چند كه فريمها طراحي سايتهاي كوچك و متوسط را بسيار آسان مي كنند ولي استفاده از آنها در كارهاي حرفه اي توصيه نمي شود . ( به جز در موارد خاص )

 

 

 

معايب استفاده از فريمها:

- موتورهاي جستجو با صفحات طراحي شده با فريمها مشكل دارند.

- چاپ و print صفحاتي كه از فريمها استفاده مي كنند مشكل است.

- صفحاتي كه از فريمها استفاده مي كنند، معمولاً مبتدي بودن طراح سايت را نشان ميدهد.

 

 

 

تگ فريم ست (Frameset)

- تگ <frameset> به تعريف فريمها و تقسيم بندي پنجره مرورگر مي پردازد.

- هر تگ <frameset> مجموعه اي از رديفها يا ستونها را تعريف مي كند.

- داخل هر فريم ميتواند frameset ديگري قرار دهيد.

- با كمك شناسه هاي cols-rows ابعاد و نسبت هر فريم تعيين مي گردد.

- تگ <frameset> درون تگهاي <html> و  </html> قرار مي گيرد. (نيازي به قيد تگbody  هنگام معرفي يك frameset نيست.)

 

 

 

تگ فريم (Frame )

كاربرد اصلي تگ <frame> تعيين source  يا نام صفحه اي است كه بايد در فريم ها نمايش داده شود.

مثال زير مجموعه اي از فريمها را كه شامل دو فريم عمودي مي باشند، معرفي مي كند. از سمت چپ فريم اول 75 درصد و فريم دوم 25 درصد از عرض پنجره مرورگر را به خود نمايش خواهند داد. در ادامه تعريف محتويات هر فريم درون فريم اول فايل  "frame _ left .html" و درون فريم دوم فايل "frame _ right .html" نمايش داده خواهد شد.

<html>

<frameset cols = "75% , /25%" >

<frame src = "frame _left.html">        

<frame src = "frame _right.html">        

</frameset>

</html>

 

 

براي نمايش مثال بالا به سه فايل نياز داريد:  frame-right.htm   ,  frame_left.html و فايل كد اچتمل بالا.

 

 

 

 

شناسه هاي rows,cols در تگ frameset

شناسه

مقدار شناسه

كاركرد

cols

عرض پنجره بر اساس پيكسل، درصد يا علامت *

تعيين تعداد و اندازه ستونها در فريم ست

rows

عرض پنجره بر اساس پيكسل، درصد يا علامت *

تعيين تعداد و اندازه رديفها در فريم ست

 

مثالهاي زير را در نظر بگيريد:

مثال 2

مثال 1

<html>

<frameset  cols = "25%  ,  50%  ,  25%">

             <frame  src = "frame_3.html">

             <frame  src = "frame_2.html">

             <frame  src = "frame_1.html">

</frameset>

</html>

مرورگر نمايش توسط

<html >

<frameset   cols = "*,200 ">

             <frame  src = "frame_2.html"> 

             <frame  src = "frame_1.html">

</frameset>

</html>

 

مرورگر نمايش توسط

 

- در مثال 1 عرض فريم اول از سمت راست 200 پيكسل تعيين شده و بقيه عرض پنجره كه با علامت * مشخص مي شود به فريم دوم اختصاص خواهد يافت.

- در مثال 2 عرض پنجره با مقادير درصدي به فريمها اختصاص يافته است. در مورد شناسه rows  قراردادهاي بالا برق