مقدمه ای بر 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"