دانلود تحقیق html

مقدمه ای بر HTML

یک فایل HTML چیست؟
HTML را اچ تی ام ال و یا اچتمل بخوانید.

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

یک فایل HTML فایلی از نوع text میباشد که متشکل از markup tag ها میباشد.

مرورگر یا Browser از روی markup tag ها می فهمد که چگونه باید صفحه را نمایش بدهد.

یک فایل HTML باید دارای انشعاب htm و یا html باشد.

یک فایل HTML فایلی از نوع text میباشد که با هر ادیتور ساده ای قابل ایجاد است.

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

میخواهید که یک فایل اچتمل بسازید؟
اگر از ویندوز مایکروسافت استفاده میکنید، Notepad را باز کرده (Mac کارها از SimplaeText استفاده کنند.

) و متن زیر را در آن تایپ کنید:
This is my first html page.

This text is bold
سپس فایل را با نام مثلا test.html در درایو c:\ ذخیره کنید.
برای دیدن فایل اچتمل بالا در مرورگر یا Brower تان ( معمولا اینترنت اکسپلورر و یا نتسکیپ نویگیتور ) کافی است که از روی منوی File/Open file فایل بالا را از روی محل ذخیره شده بخوانید.

( به آدرس فایل در قسمت Address توجه کنید، مثلا c:\test.html)
یکی از مهمترین وظایف مرورگرها نمایش صفحات اچتمل میباشد، چه این صفحات روی کامپیوتر شما ذخیره شده باشند و یا اینکه از اینترنت خوانده شوند.

با کلیک روی یک لینک فایلی شبیه فایل ذخیره شده توسط شما از روی وب سرور توسط مرورگرتان خوانده شده و سپس نمایش داده خواهد شد!!!

( به آدرس فایل در قسمت Address توجه کنید.

)

توضیح مثال بالا
اولین تگ مثال بالا تگ میباشد.

از روی این تگ، مرورگر نوع متن یعنی اچتمل بودنش را یافته و از روی انتهای متن اچتمل را میبابد.

اولین تگ مثال بالا تگ میباشد.

متن بین تگ و تگ اطلاعات شناسنامه ای یا "Header information" متن اچتمل بوده و نمایش داده نخواهند شد.

در این مثال با کمک تگهای و تیتر و یا Title صفحه که در این مثال عبارت "Title of page" میباشد در بالای مرورگر نمایش داده خواهد شد.

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

متن بین تگ و انتهای آن یعنی تگ بصورت Bold و یا توپر نمایش داده خواهند شد.

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

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

HTML & WWW (در این قسمت با مفاهیم وب، اینترنت، مرورگرها و استانداردهای وب آشنا خواهید شد.) منظور از وب چیست؟

وب شبکه ای است متشکل از تمامی کامپیوترهای دنیا، شبکه ای از شبکه ها.

اینترنت، وب، WWW ، web یا World Wide Web همگی یک چیزند.

تمامی کامپیوترهای وب میتوانند با هم ارتباط داشته باشند.

کامپیوترهای موجود در وب با کمک استاندارد ارتباطی یا پروتوکل HTTP با هم ارتباط برقرار میکنند .

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

اطلاعات وب داخل فایلهائی به نام Web Pages و یا صفحات وب قرار دارند.

این فایلها یا صفحات روی Web Server یا کامپیوترهای سرویس دهنده وب ذخیره شده اند.

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

دو مرورگر Internet Explorer و Netscape Navigator جزو معروفترین مرورگرها حساب میشوند.

مرورگر Internet Explorer متعلق به شرکت مایکروسافت و مرورگر Netscape Navigator متعلق به شرکت نت اسکیپ میباشد.

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

یک مرورگر با کمک یک Request درخواستی برای خواندن یک صفحه از وب سرور میکند.

این Request یا درخواست بر اساس استاندارد ارتباطی یا پروتوکل HTTP بوده و شامل آدرس صفحه مورد نظر میباشد.

آدرس یک صفحه وب چیزی شبیه http://www.internet.com/faq.html است.

بخش //:http نوع پروتوکل و یا استاندارد ارتباطی را تعیین میکند، www.internet.com نام دومین یا Domain است و faq.html نام صفحه ای است که باید خوانده شود.

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

چگونگی نمایش یک صفحه وب بصورت مستتر در آن وجود دارد.

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

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

یک تگ اچتمل چیزی شبیه این تگ پاراگراف است!

است.

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

تعیین استاندارد های وب ربطی به شرکتهای مایکروسافت و یا نت اسکیپ ندارد.

World Wide Web Consortium یا W3C متولی تعیین استانداردهای وب است.

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

آخرین استاندارد HTML استاندارد XHTML 1.0 میباشد .

عناصر ( Elements ) یک فایل اچتمل متنی از نوع text است که از عناصر یا element ها تشکیل میشود و برای ایجاد عناصر از تگ ها یا tags استفاده میشود.

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

تگ های اچتمل (HTML Tags) با کمک تگ های اچتمل عناصر و یا Elements ساخته میشوند.

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

تگ های اچتمل بوسیله دو نویسه (char) > و تگ های اچتمل معمولا بصورت زوج ظاهر میشوند، مانند test تگ اول در یک زوج تگ مثلا تگ شروع و تگ دوم مثلا تگ پایانی نام دارد.

متن بین تگ اول و تگ دوم در یک زوج تگ محتوای عنصر یا element content نامیده میشود، مثلا "test" تگ های اچتمل را میتوانید بوسیله حروف لاتین کوچک (lower case) و یا بزرگ (upper case) بنویسید و case sensitive نیستند.

برای مثال دو تگ و معادل هم هستند ولی شدیدا توصیه میشود که به خاطر سازگاری با XHTML از حروف کوچک استفاده شود.

عناصر اچتمل (HTML Elements) مثال بخش مقدمه را در نظر بگیرید: *** نمونه ای از یک عنصر اچتمل: عنصر اچتمل بالا با تگ شروع شده و با تگ پایان می یابد.

محتوای این عنصر عبارت "This text is bold" است.

لازم به ذکر است که کاربرد تگ نمایش توپر یا bold متون است.

*** مثال دوم یک عنصر اچتمل (معلوم الحال) : عنصر اچتمل بالا با تگ شروع شده و با تگ پایان می یابد.

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

شناسه های یک تگ (Tag Attributes) تگ ها میتوانند حاوی اطلاعات اضافی دیگر باشند، به این اطلاعات شناسه یا Attribute میگویند و وظیفه آنها بیان دیگر اطلاعات یک عنصر یا Element میباشد.

مثلا در مورد تگ شناسه ای به نام bgcolor وجود دارد که رنگ زمینه متن (background) را تعیین میکند برای نمونه اگر میخواهید که رنگ زمینه صفحه اچتملتان سیاه باشد کافی است که به شکل زیر عمل کنید : در مثال زیر تگ دارای چهار شناسه مختلف با نامهای width، height ، align و border و مقادیر center، 60، 100 و 0 میباشد.

......

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

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

تگ های اصلی ( Basic Tags ) تگ ها ( tags ) اجزا تشکیل دهنده عناصر یا elements های اچتمل هستند و در این فصل با عناصر و تگ های پایه و مهم: , , ....

, , آشنا خواهید شد .

یکی از بهترین روش های یادگیری تگ های اچتمل دیدن مثالها و تغییر آنها میباشد و با کمک ادیتور اختصاصی ما و با استفاده از امکانات فارسی نویسی آن به صورت آنلاین میتوانید به مطالعه و یادگیری مثالها پرداخته، کدهای اچتمل را تغییر داده و با کلیک روی دکمه "نمایش نتایج" به مشاهده نتایج بپردازید.

سر تیترها (Headings) سر تیترها با کمک تگ های تا تعیین میشوند.

معرف بزرگترین سر تیتر و معرف کوچکترین سر تیتر است.

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

پاراگرافها (Paragraphs) پاراگرافها با کمک تگ معرفی میشوند.مرورگر به هنگام نمایش یک پاراگراف بصورت اتوماتیک یک سطر خالی قبل و بعد از آن اضافه خواهد کرد.

سطر جدید (Line Breaks) برای رفتن سر سطر جدید از تگ استفاده میشود.در اینحالت یک پاراگراف جدید ایجاد نمیشود.

تگ از نوع تگ های خالی بوده و دارای تگ انتهائی (مثلا ) نمیباشد.

کامنت ها در اچتمل (Comments) برای نوشتن شرح و توضیحات در مورد کدهای اچتمل باید از تگ خاصی استفاده کنید.

برای اینکار باید متن و شرحتان را درون علائم قرار دهید.

مرور تگ های comment را در نظر نگرفته و محتوی آنها را نمایش نخواهد داد و فقط شرح و توضیحات برای برنامه نویس و دیگر افرادی که احتمالا در آینده با کد اچتمل کار خواهند کرد مفید خواهد بود.

(به محل نویسه "!" توجه کنید!

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

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

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

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

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

در ضمن یک خط خالی در متن ادیتور بصورت یک فاصله یا space نمایش داده خواهد شد.

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

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

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

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

فارسی نویسی در این قسمت با فارسی نویسی، فارسی سازی و استاندارد یونیکد و نحوه استفاده از ادیتور آنلاین و فارسی این سایت آشنا خواهید شد.

همچنین متاتگ http-equiv و شناسه dir نیز معرفی خواهد شد.

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

روش کدگزاری UTF-8 اکیدا توصیه میشود که برای تایپ و تمایش متون فارسی از استاندارد یونیکد و روش کدگزاری UTF-8 اسنفاده شود و این روشی است که مطالب این سایت و ادیتور آنلاینش از آن استفاده میکند.نکته مهم در نمایش صحیح متون فارسی تعیین نوع کدگزاری یا encoing صفحات فارسی است که برای اینکار باید از متاتگ خاصی به نام http-equiv در بخش head صفحات اچتمل به شکل زیر استفاده شود: در اینصورت مرورگر یا 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 کافی است که به یکی از شکلهای زیر عمل شود: سلام بر دنیای وب سلام بر دنیای وب در بسیاری از عناصر و تگ های اچتمل امکان استفاده از شناسه dir میسر بوده و به عنوان نمونه میتوان از عناصر زیر نام برد: , , , , , , , , , , , , ...

نحوه دیدن سورس کدهای اچتمل (HTML Source) : اگر میخواهید که سورس کدهای اچتمل صفحات وب را ببینید کافی است که در منوی View مرورگرتان حالت Source یا Page Source را انتخاب کرده و مرورگر کد اچتمل را درون ادیتوری باز کرده و قابل ذخیره توسط شما برای استفاده های بعدی میباشد.

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

اگر طراح سایت با کمک Java Script مانع دیدن سورس توسط شما میشود، ابتدا در منوی Tools/Internet Options.../Security/Custom Level مرورگرهای اکسپلورر امکانات جاواسکریپت مرورگر را غیر فعال کرده (disable) و سپس مراحل بالا را تکرار کنید!!!

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

به کارگیری تگهای EM و STRONG که جایگزین تگهای I و B هستند ، این اطمینان را می دهد که صفحه شما توسط همه مرورگرها بصورت صحیح نمایش داده خواهد شد .

به ترتیب بسته شدن تگهای پایانی در مثال زیر دقت کنید، همان گونه که مشاهده می کنید عنصر STRONG بعد از عنصر U شروع شده است ، به همین خاطر تگ خاتمه دهنده آن قبل از تگ خاتمه دهنده U قرار می گیرد.

version 2.0 Character Entities در استاندارد اچتمل گروهی از نویسه ها (Character) دارای معنی خاصی بوده ( مثلا نویسه انتهای یک تگ را نشان میدهد.

) و برای نمایش آنها در صفحاتتان مستقیما قابل مصرف نمیباشند.

در این قسمت با فهرست این نویسه ها آشنا شده و نحوه درج آنها را با کمک Character Entities فرا خواهید گرفت.

Character Entities در اچتمل بعضی از نویسه ها دارای معنی خاصی بوده و برای نمایش آنها در صفحاتتان باید از character entities ها استفاده کنید.

یک character entities از سه قسمت تشکیل میشود: 1- نویسه ampersand (&) 2- نام entity یا نویسه # و سپس شماره عددی entity 3 - و نهایتا نویسه semicolon (;) برای مثال برای نمایش نویسه > دو روش وجود دارد، باید از < یا از < استفاده کنید.

در این مثال lt نام entity و 60 شماره عددی آن میباشد.

مزیت استفاده از نام entity در مقابل استفاده از شماره عددی آن سهولت یادآوری آن از روی نامش میباشد و عیب آن این است که تمامی مرورگرها نام گذاریهای موجود برای Entity ها را قبول ندارند ولی در عوض همگی شماره های عددی entity ها را بخوبی میشناسند.

توجه داشته باشید که entity ها به کوچک و بزرگی حروف حساس هستند و در واقع Case Sensitive میباشند.

پر کاربردترین character entity در اچتمل، نویسه فاصله یا Space یا Blank میباشد و نام رسمی آن non-breaking space میباشد.

همانطور که میدانید مرورگرها فاصله های اضافی را در نظر نگرفته (truncate spaces) و مثلا از 10 نویسه فاصله، 9 تای آنرا نادیده میگیرند و برای نمایش فاصله های اضافی باید از   استفاده کنید.

پیوندهای اچتمل ( HTML Links ) در این قسمت با پیوندها ( Links ) ، تگ های مربوطه مخصوصا تگ Anchor یا A و نحوه به کار گیری آنها آشنا خواهید شد.

همچنین شناسه های بسیار مهم href ،target و name تشریح خواهند شد.

در محیط وب، صفحات اچتمل با کمک پیوندها به یکدیگر متصل (Link) میشوند.

اصطلاح ابرمتن (Hyper Text) در مقابل متن خطی (Linear) قرار دارد.

در یک متن معمولی خواندن به شکل خطی و از ابتدا به انتها میباشد و در مقابل در یک متن مختلط (Hyper) با کمک پیوندها میتوان از یک متن به هر صفحه دیگر در وب متصل شد.این کار با کمک عنصری معلوم الحال!

به نام A یا Anchor میسر میگردد.

تگ Anchor و شناسه href برای ایجاد پیوند به صفحات دیگر از تگ استفاده میشود.

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

اشاره کنند.

فرم کلی یک پیوند به قرار زیر است: در مثال بالا تگ برای ایجاد پیوندی به صفحه ای دیگر که آدرس اینترنتی آن url میباشد بکار رفته است.

برای تعیین مقصد و یا آدرس صفحه جدید از شناسه ای به نام href که همان hyerlink reference میباشد، استفاده میشود و مقدار این شناسه در واقع همان آدرس اینترنتی صفحه مقصد است.

بخش قابل رویت پیوند و در واقع متــنــی (و یا تصویری ) که توسط مرورگر نمایش داده خواهد شد و بازدیدکننده روی آن کلیک خواهد کرد میان تگهای و قرار داده میشود و هر چند که در مثال بالا این بخش متن "Some Text" است ولی میتواند حتی یک تصویر باشد.

برای نمونه کد اچتمل زیر پیوندی به سایت google.com ایجاد خواهد کرد: و مرورگر پیوند بالا را به شکل زیر نمایش داده و در اثر کلیک روی پیوند توسط بازدیدکننده، مرورگر به سایت Google خواهد رفت.

شناسه target در پیوندها: با کمک شناسه target امکان تعیین مقصد پیوند جدید فراهم میشود.

در مثال بالا پس از کلیک روی پیوند، مرورگر سایت google.com را باز کرده و جایگزین سایت فعلی خواهد شد.

اگر میخواهید که مرورگر پیوند را در صفحه ای جدید باز کند باید از شناسه target و مقدار "_blank" برای آن استفاده کنید .

مثال زیر سبب باز شدن سایت google.com در پنجره جدیدی خواهد شد: شناسه Name : با کمک شناسه name میتوانید پیوندها را نام گذاری کنید.پیوندهای نامگذاری شده امکان حرکت میان قسمتهای مختلف یک صفحه یا page را فراهم میکنند.

در اینصورت مثلا برای رفتن به آخر یک متن دیگر نیازی به Scrool down کردن تمامی صفحه نیست و کافی است که بازدیدکننده روی پیوندی که به آخر صفحه اشاره میکند کلیک کند.

استفاده از پیوندهای نامگذاری شده شامل دو مرحله است: 1- ایجاد یک پیوند نامگذاری شده (این قسمت به عنوان لنگر کار خواهد کرد.) : فرم کلی یک پیوند نام گذاری شده به قرار زیر است: وظیفه شناسه name تعیین نام برای پیوند است و مقدارآن همان نام پیوند میباشد.

نام پیوند هم هر نام لاتینی میتواند باشد.

در فرم کلی بالا، نام پیوند label و متنی که بعنوان پیوند نمایش داده میشود عبارت "Text to be displayed" خواهد بود.

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

مثال زیر ایجاد پیوندی است که به لینک نامگذاری شده ای به نام top اشاره میکند: در اثر کلیک روی پیوند بالا مرورگر مستقیما به ابتدای بخش top صفحه index.htm خواهد رفت.

لگر مقصد پیوند در همان صفحه قرار دارد نیازی به قید url نیست و فقط نویسه # و سپس نام پیوند کافی است: چند نکته کاربردی در مورد پیوندها: * یکی از کاربردهای رایج پیوندهای نام گذاری شده در صفحات و متونی میباشد که فهرست و یا لیستی از اقلام نمایش داده شده است، مانند بخش سرفصل مطالب، فهرست FAQ و یا ...

در همین صفحه در دو مورد از پیوندهای نامگذاری شده استفاده شده است، آیا میتوانید آنها را بیابید؟!

* اگر مرورگر نتواند یک پیوند نامگذاری شده را بیابد ابتدای صفحه مقصد را نمایش خواهد داد.

جداول ( Tables) در این قسمت با المان جدول ( Table ) ، سلولها یا خانه ها، مرز و border در جداول و تگ های مربوطه مخصوصا تگهای TABLE ، TD , TR آشنا خواهید شد.

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

جدولها برای تعریف جداول از تگ استفاده میشود.

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

هر ردیف یا row از یک یا چند سلول، خانه یا cell تشکیل گردیده که با کمک تگ ایجاد میشوند.

نام های td و tr به ترتیب خلاصه شده table row و table data میباشند.

محتوی یک سلول میتواند متن، تصویر، فهرستها، جداول دیگر، پاراگرافها و ...

باشد.

مثال زیر جدولی است با دو سطر و سه ستون : جدولها و شناسه border و dir :  در مثال بالا شناسه border مرز جدول را مشخص میکند، مقدار 1 مرزی با ضخامت یک پیکسل را نمایش خواهد داد و مقدار صفر جدول را بدون مرز نمایش خواهد داد.

توجه داشته باشید که حالت پیش فرض یعنی جدولی بدون شناسه border ، جداول بدون مرز را نمایش خواهد داد.

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

 ساده ترین جدول ممکن در اچتمل، جدولی است با یک سطر و یک ستون!

سرستون در جداول (Headings) سرستونها در جداول با کمک تگ تعریف میشوند.

مثال زیر نحوه تعریف سرستونها را در جداول نمایش میدهد: همانطوریکه مشاهده میکنید سر ستونها مانند سلولهای معمولی جداول تعریف میشوند و فقط به جای td از th استفاده شده و لی در نمایش محتوای سر ستونها bold یا توپر نمایش داده خواهند شد.

خانه های خالی در جداول (Empty Cells) اگر محتوای خانه ای از یک جدول خالی باشد چه چیزی باید نمایش داده شود؟

بسته به مرورگری که استفاده میکنید نتیجه نمایش متفاوت است و مثلا در مثال زیر خانه خالی جدول بدون مرز نمایش داده خواهد شد: در اینگونه موارد برای رفع مشکل کافی است که از non-breaking space ( ) یا همان نویسه و کاراکتر قاصله و بلانک استفاده شود و در مورد مثال ذکر شده مرورگر جدول را به شکل زیر نمایش خواهد داد: توجه داشته باشید که اینبار مرزهای خانه خالی جدول بدرستی ترسیم گردیده اند.

چند نکته اساسی در مورد جداول:  در جداول، ردیفها، خانه ها و سر ستونها از تعداد زیادی از شناسه ها میتوانید استفاده کنید که شرح همگی آنها از حوصله این دوره مقدماتی خارج است و توصیه میشود که از مثالهای زیر و جدول واقع در انتهای این صفحه برای مطالعه هر چه بیشتر در مورد جزئیات شناسه ها استفاده شود.

 شناسه dir قابل استفاده در بسیاری از تگها ( مثلا table ، tr ، td ، th ) میباشد.

با کمک شناسه dir و مقدار rtl برای آن، جهت نمایش متون فارسی از "راست به چپ" تعیین میگردد.

توجه داشته باشید که مقدار شناسه dir به صورت موروثی از table به tr و th و از tr و th به td خواهد رسید.مثلا برای تعیین مقدار rtl برای تمامی خانه های یک جدول کافی است که فقط شناسه مزبور را در تگ table قید کنید و نیازی به قید آن در تمامی خانه های جدول نیست.

البته میتوانید که در مورد یک ردیف خاص و یا یک خانه خاص شناسه dir را موردی تعیین کنید.

فریمها ( Frames ) کمک فریمها قادر به نمایش همزمان بیش از یک صفحه وب در پنجره مرورگر خواهید شد.

در این قسمت با مفاهیم فریم ( Frame ) و تگ های مربوطه مخصوصا تگهای Frame و Frameset آشنا خواهید شد.

فریمها (Frames) با کمک فریمها قادر به نمایش همزمان بیش از یک صفحه وب در پنجره مرورگر خواهید شد.

هر صفحه یا دریچه، فریم (frame) نامیده شده و فریمها کاملا مستقل از هم میباشند.

محتوای هر فریم هم میتواند هر صفحه یا وب سایتی باشد.

هر چند که فریمها طراحی سایتهای کوچک و متوسط را بسیار آسان میکنند ولی استفاده از آنها در کارهای حرفه ای توصیه نمیشود.(به جز در موارد خاص) معایب استفاده از فریمها: موتورهای جستجو با صفحات طراحی شده با فریمها مشکل دارند.

چاپ و print صفحاتی که از فریمها استفاده میکنند مشکل است.

صفحاتی که از فریمها استفاده میکنند معمولا مبتدی بودن طراح سایت را نشان میدهد!!

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

هر تگ مجموعه ای از ردیفها یا ستونها را تعریف میکند.

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

با کمک شناسه های rows و cols ابعاد و نسبت هر فریم تعیین میگردد.

تگ درون تگهای و قرار میگیرد.(نیازی به قید تگ body هنگام معرفی یک frameset نیست.) تگ فریم (Frame) کاربرد اصلی تگ تعیین source یا نام صفحه ای است که باید در فریم ها نمایش داده شود.

مثال زیر مجموعه ای از فریمها را که شامل دو فریم عمودی میباشند معرفی میکند.

از سمت چپ فریم اول 75 درصد و فریم دوم 25 درصد از عرض پنجره مرورگر را به خود نمایش خواهند داد.

در ادامه تعریف محتویات هر فریم، درون فریم اول فایل "frame_left.html" و درون فریم دوم فایل "frame_right.html" نمایش داده خواهد شد.

برای نمایش مثال بالا به سه فایل نیاز دارید، frame_left.html ،frame_right.html و فایل کد اچتمل بالا.

شناسه های cols و rows در تگ frameset مثالهای زیر را در نظر بگیرید: در مثال یک عرض فریم اول از سمت راست 200 پیکسل تعیین شده و بقیه عرض پنجره که با علامت * مشخص میشود به فریم دوم اختصاص خواهد یافت.

در مثال دوم عرض پنجره با مقادیر درصدی به فریمها اختصاص یافته است.

در مورد شناسه rows دقیقا قراردادهای بالا برقرارند.

تصاویر ( Images ) تگ img و شناسه src یا source در زبان اچتمل تصاویر را با کمک تگ تعریف میکنند.

تگ از نوع تگهای خالی است، بدین معنا که فقط دارای یک یا چند شناسه و attribute بوده و دارای تگ انتهائی یا نیست.

مهمترین شناسه برای درج و تعریف یک تصویر src یا source نام دارد و مقدار این شناسه آدرس یا URL تصویر میباشد.

تصاویری که مرورگر در یک صفحه وب نمایش میدهد میتوانند در همان دایرکتوری صفحه اچتمل، در دیگر دایرکتوریهای همان سایت و یا در فضای بیکران وب قرار داشته باشند.

شکل ساده درج یک تصویر: مقدار url آدرس اینترنتی تصویر میباشد و مثلا اگر تصویری که قرار است که در صفحه درج شود در همان دایرکتوری قرار دارد و نامش me.jpg ، کافی است که به جای url فقط نام تصویر یعنی me.jpg را بنویسید و اگر تصویر در سایتی دیکر قرار دارد url کامل آنرا بنویسید.

مثلا تصویر لوگو سایت google.com دارای url ی برابر http://www.google.com/images/logo.gif است.در این url نام تصویر logo.gif بوده، در دایرکتوری images قرار داشته و روی وب سایت google.com قرار دارد.

شناسه های width و height در تگ img کاربرد شناسه های width و height تعیین عرض و ارتفاع نمایش تصویر است.

اگر از این شناسه ها استفاده نکنید، مرورگر ابتدا تصویر را لود کرده و سپس طول و عرض آنرا یافته و در نهایت نمایش میدهد.

با نوشتن مقادیری غیر از مقادیر واقعی طول و عرض تصویر میتوانید به تغییر شکل و ابعاد آن بپردازید و آنرا مثلا کوچکتر، بزرگتر و یا کشیده تر نمایش دهید.

مثال زیر نحوه درج تصویری را با قید ابعاد آن شرح میدهد: توصیه میشود که حتما ابعاد تصویر را با کمک شناسه های width و height قید کنید، اینکار سبب کمک به مرورگر در تسریع شروع نمایش صفحه خواهد شد.(در واقع با قید ابعاد تصویر، مرورگر قبل از لود تصویر میداند که چه مقدار از صفحه نمایش باید به تصویر باید اختصاص داده شود و قبل از لوذ شدن تمامی تصاویر مرورگر شروع به نمایش قالب و چارچوب کلی صفحه خواهد کرد.) شناسه Alt یا "alternate text" یا متن جایگزین اگر مرورگر به هر دلیلی نتواند که یک تصویر را نمایش دهد و یا مرورگر از نوع مرورگرهائی باشد که فقط متن را نمایش میدهند، متن و text ی که با کمک شناسه alt تعیین شده است نمایش داده خواهد شد.

همچنین در اغلب مرورگرها با قرارگرفتن ماوس بروی یک تصویر، متن تعیین شده توسط شناسه alt نمایش داده خواهد شد.

با کمک alt اطلاعات اضافی مربوط به تصویر قابل نمایش میباشد.مثال زیر نحوه درج تصویری را با قید متن جایگزین آن شرح میدهد: وبلاگها و اضافه کردن تصاویر: اگر وبلاگی داشته و میخواهید که تصویری به آن اضافه کنید دو حالت مختلف ممکن است که پیش آید:  الف) تصویر روی سایتی دیگر قرار داشته و شما هم میخواهید از آن تصویر که در سایتی دیگر قرار دارد استفاده کنید.

در این حالت از آدرس مستقیم تصویر در شناسه src استفاده کنید، مانند : در این مثال تصویر روی سایت google.ca قرار داشته و لزومی به ذخیره آن توسط شما نیست.

 ب) تصویر روی هارد کامییوتر شما است و هنوز بروی وب منتقل نشده است.

در این حالت چون اغلب سیستم های وبلاگ امکان ذخیره تصاویر را به شما نمی دهند باید ابتدا تصویرتان را با کمک FTP یا روشهای دیگر به روی سایتی دیگر منتقل کنید.

شرکتهای مختلفی فضای مجانی برای ساخت صفحات وب و ذخیره اطلاعات و تصاویر در اختیار شما قرار میدهند و در یکی از سؤالهای این FAQ فهرست این شرکتها را میتوانید ببینید.

بنابراین ابتدا فضائی در وب تهیه کرده، سپس تصویرتان را Upload کرده (با کمک FTP یا روشهاس دیگر ) و سپس در شناسه src از تگ img آدرس جدید تصویر را قید کنید.

چند نکته مهم: اگر در یک صفحه اچتمل از 10 تصویر استفاده شده باشد، مرورگر باید 11 فایل را لود کند.( خود صفحه به علاوه 10 تصویر) استفاده از تصاویر، سرعت لود شدن صفحات را پایین می آورد.با احتیاط از تصاویر استفاده کنید و به اندازه و حجم تصویر توجه داشته باشید.