اگر کمی با دنیای طراحی وب یا برنامه‌نویسی وب آشنایی داشته باشید؛ حتما واژه‌ها‌ی HTML و XHTML به گوشتان خورده است؛ اگر دوست دارید بدانید HTML چیست و چه کاربردی در طراحی وب دارد؟ یا XHTMLچیست و چه تفاوتی با HTML دارد؟ و یا HTML چطور کار میکند و رابطه‌ی آن با CSS چیست؟ و… .در این مقاله با ما همراه باشید. HTMLچیست و چه کاربردی دارد؟ زبان نشانه گذاری HTML به عنوان اولین پایه برای هر دوره آموزش طراحی سایت در نظر گرفته می‌شود. این زبان چیست و چه کاربردی دارد؟ HTML ( اچ تی ام ال ) مخفف شده Hyper Text Markup Language به معنای زبان نشانه‌گذاری فوق متن است. Html یک زبان استاندارد برای طراحی صفحات وب است و تمام کدهای صفحه هم از طرف سرور و هم از طرف مشتری در نهايت به کدهای HTML تبديل می‌شوند و سپس توسط مرورگر نمايش داده می‌شوند. در واقع مرورگرها، کدها و کنترل‌های سمت سرور مانند کدهای asp و php را نمی‌شناسند و کد قابل درک برای آنها اچ تی ام ال است. کامپایلر زبان‌های برنامه نویسی سروری کدهای خود را برای نمایش به کد اچ تی ام ال تبدیل کرده و برای مرورگر می‌فرستند تا به کاربر نمایش داده شود. HTML یک زبان نشانه‌گذاری است، به اين معنا که بخش‌های مختلف کد توسط اجزايی به نام تگ از هم جدا شده اند، که هر کدام از این تگ‌ها دارای کاربرد و خواص مربوط به خود هستند. اين تگ‌ها به مرورگر اعلام میکند که هر بخش در صفحه نمایش مرورگر چه نوع عنصری است و بايد به چه صورت نمايش داده شود. در صفحه HTML می توان عناصر مختلفی از قبيل متن، عکس، تيتر، جدول و ... را قرار داد که برای هر عنصر، تگ مربوط به آن را می‌نویسیم. صفحات HTML فقط از کدها که به‌صورت متن هستند تشکيل شده‌اند. یعنی برای تصویر کد و تگ مربوط به نمایش تصویر و ... را باید نوشت و مرورگر با رسیدن به این تگ‌ها، المنت‌های مرتبط با آن را نشان می‌دهد. هر یک از تگ های html، مفهوم خاصی دارند و تأثیر متفاوتی بر محتوا می‌گذارند. اولین مراحل برای ساخت یک ساختمان، ساخت اسکلت‌بندی و قالب کلی آن ساختمان، با استفاده از سیمان، بتن، میلگرد و… است. در واقع شما در ابتدا، اسکلت کلی ساختمان را می‌سازید و در مرحله بعد، با استفاده از گچ، رنگ‌آمیزی و… آن را زیبا می‌کنید. طراحی وب با HTML نیز دقیقا به همین صورت است. HTML به شما کمک میکند تا با استفاده از تگ ها، ساختار و ساختمان کلی صفحه وب خود را تعریف کنید؛ مثلا بگویید که منو کجاست، هدر کجاست، فوتر کجاست و… .سپس در مراحل بعد، توسط ابزارهای دیگر، می‌توانید صفحه وب ساده‌ای که طراحی کردید را زیباتر و چشم‌نوازتر کنید. دستورالعمل‌های این زبان، برچسب (Tag) نام دارند که محتوای یک صفحه وب، با آنها نشانه‌گذاری شده و بدین‌ترتیب، نحوه نمایش آن صفحه برای مرورگرهای وب، توصیف می‌شود. تاکنون ۵ نسخه از HTML عرضه شدهاست. مولفه های HTML از طریق تگ‌های قرار گرفته در پرانتز شکسته مشخص می‌شوند. تگ‌هایی مانند </ img> و </ input> محتوا را به صورت مستقیم به صفحه، معرفی می‌کنند. سایر تگ‌ها مانند<<p\...<p> اطلاعات مربوط به متن سند را ارائه داده و می‌توانند سایر تگ‌ها را به عنوان مولفه‌های فرعی در خود جای دهند. مرورگرها، تگ‌های HTML را نمایش نمی‌دهند بلکه از آنها برای تفسیر محتوای صفحه بهره می‌برند. HTML می‌تواند برنامه‌های نوشته شده به زبان اسکریپتی مانند جاوا اسکریپت را که بر رفتار و محتوای صفحات وب تاثیر می‌گذارند؛ در خود جای دهد. استفاده از CSS ظاهر و آرایش محتوا را تعریف میکند. کنسرسیوم جهانی وب که استانداردهای HTML و CSS را تعریف میکند، از سال ۱۹۹۷ استفاده از CSS را روی HTML ظاهری توصیه کرده است. تاریخچه پیدایش HTML در سال ۱۹۸۰، فیزیکدان «تیم برنرز لی» (Tim Berners-Lee)، یکی از پیمانکاران CERN، سیستم ENQUIRE را پیشنهاد کرد. این سیستم برای محققان CERN ایجاد شدهبود تا از آن برای استفاده و اشتراک‌گذاری اسناد استفاده کنند. در سال ۱۹۸۹، برنرز لی یادداشتی نوشت و در آن یک سیستم اینترنتی ابر متن (Hypertext) را پیشنهاد داد. «برنرز لی» HTML را مشخص کرد و نرم افزار مرورگر و سرور را در اواخر ۱۹۹۰ نوشت. در آن سال، برنرز لی و مهندس دیتا سیستم‌های CERN، به صورت مشترک درخواست بودجه کردند اما آن پروژه به صورت رسمی توسط CERN پذیرفته نشد. اولین توصیف عمومی از HTML سندی به نام «HTML Tags» بود که ابتدا توسط تیم برنرز لی در اواخر ۱۹۹۱ در اینترنت قرار گرفت. این سند ۱۸ مولفه تشکیل‌دهنده طرح اولیه و نسبتا ساده از HTML بود. تکامل HTML به مرور زمان . HTML 1.0 اولین نسخه منتشرشده در جهان بود. در آن زمان تعداد برنامه نویس وب چندان زیاد نبود و این زبان هم کمی محدودکننده به نظر می‌رسید. تنها کاری که می‌شد با نسخه اولیه HTML انجام داد، قرار دادن متن ساده در وب بود. پس از آن نسخه HTML 2.0 به بازار معرفی شد؛ که تمام ویژگی‌های نسخه اول به علاوه چند ویژگی جدید را با خود داشت. این نسخه تا ژانویه ۱۹۹۷ و تعریف ویژگی‌های کلیدی برای HTML، به عنوان استانداردی برای طراحی سایت در نظر گرفته می‌شد. تولد .HTML 3.0رفته رفته افراد بیشتری به سمت استفاده از HTML گرایش پیدا کردند، اما نسخه‌های قبلی این زبان هنوز هم برای وبمسترها محدودیت‌هایی ایجاد می‌کرد؛ آنها به دنبال ویژگی‌ها، توانایی‌ها و تگ‌های بیشتری بودند و تمایل داشتند ظاهر سایت خود را ارتقا ببخشند. در همان زمان بود که گروهی خبره HTML، پیش‌نویس جدیدی از این زبان تهیه کرده و آن را HTML 3.0 نامیدند. این نسخه، شامل قابلیت‌های جدید و پیشرفته‌ای بود و مژده ابزارهای قدرتمندی برای طراحی سایت را به طراحان سایت می‌داد. متاسفانه مرورگرها این ویژگی‌های جدید را به کندی بارگزاری می‌کردند و تنها بخشی از دستورات اعمال شده بر صفحه، اجرا می‌شد؛ بنابراین برنامه‌نویسان استفاده از این نسخه را به فراموشی سپردند. .HTML 3.2کمی بعدتر کنسرسیوم وب جهانی، اولین کار خود را به بازار ارائه کرد که به HTML 3.2 معروف شد؛ و تغییرات اندکی نسبت به نسخه پیشین داشت و بسیاری از مراحل بزرگ را به نسخه‌های بعدی موکول کرده بود و تعداد زیادی از تگ‌های قبلی در این نسخه و استانداردهای جدید به چشم نمی‌خورد؛ اما خیلی زود در ژانویه ۱۹۹۷ به نسخه استاندارد تبدیل شد و امروزه تمام مرورگرها از ویژگی‌های آن به طور کامل پشتیبانی می‌کنند. HTML 4.01؛ تحول بزرگ. نسخه HTML 4.01 تحول بزرگی نسبت به استانداردهای اولیه HTML بود؛ بیشتر کارایی‌های جدیدی که در این نسخه آوردهشدهبود، در واقع ارتقا و پیشرفتی از نسخه HTML 3.0 به علاوه چندین ویژگی جدید و پیشرفته بود. این نسخه در دسامبر ۱۹۹۷ توسط کنسرسیوم وب جهانی پیشنهاد شد و در آوریل ۱۹۹۸ به استاندارد رسمی طراحی سایت تبدیل شد. پشتیبانی مرورگر از این زبان جدید و تقریبا بیشتر تگ‌ها و خصوصیات، توسط مایکروسافت در مرورگر محبوب IE5 صورت گرفت. عناصر HTML سندهای HTML به ساختاری از عناصر تو در تو از HTML اشاره دارند. این عناصر در سند، توسط تگ‌های HTML مشخص می‌شوند. مابین تگ آغازین و پایانی می‌توان ترکیبی از تگ‌های مختلف و متن را قرار داد. برخی از عناصر مانند link break با علامت <br> اجازه تعبیه هیچگونه محتوا، متن یا تگ دیگری را نمی‌دهند. در صفحات HTML می‌توان عناصر مختلفی مثل عکس، فرم و جدول قرار داد اما برای آن که این عناصر برای مرورگر قابل فهم باشند؛ باید از کد و تگ مشخصی استفاده کرد تا مرورگر وقتی به قسمت مشخص شده برای آن عنصر رسید آن را در صفحات اینترنت نمایش دهد. .سرتیتر سند HTML به صورت <head>...<head/> نوشته می‌شود. .عنوان در سند HTML با تگ‌های <h1> و <h6> مشخص می‌شوند. .کد HTML به کار رفته برای نمایش پاراگراف به این صورت است: <p>Paragraph 1</p> <p>Paragraph 2</p> با توجه به تعاریف گفته شده، حالا می‌توان به چند نتیجه مهم در مورد HTML دست یافت: HTML. زبان پیچیده برنامه نویسی نیست، بلکه برای توصیف صفحات وب از طریق متن عادی به کار می‌رود. هر صفحه وب در واقع یک فایل HTML است و هر فایل HTML یک متن ساده است. اما فایلhtml ، به جای متن، از چندین تگ HTML و محتوا ساخته شده است؛ یک وب سایت اغلب حاوی چندین فایل HTML است که به یکدیگر لینک شده و قابل ویرایش هستند. تگ‌های HTML در واقع کلمات کلیدی پنهان شده در صفحات وب هستند که مشخص می کنند مرورگر چطور باید محتوا را نمایش دهد. اکثر تگ‌ها دو بخش آغازین و پایانی را دارند. تگ پایانی همان متن تگ آغازین را دارد اما یک اسلش (/) به قبل از آن اضافه شده است مثل <html> و <html/> که اولی تگ آغازین و دومی تگ پایانی است. تگ‌ها می‌توانند دارای خصوصیت یا attribute باشند یعنی می‌توان آنها را به شکل دلخواه تغییر داد. برای این کار باید با استفاده از علامت مساوی، مقداری را تعیین کرد مثل "0"=border و "%50"=width اما برخی دیگر مانند <hr noshade> را فقط باید داخل تگ عنوان کرد. فایل‌های HTML باید با پسوند .htm یا .html مشخص شوند. مشخصات صفحات وب توسط تگ‌های HTML توصیف می‌شوند. HTML اساس و بنیان ایجاد صفحات وب است؛ اما برای زیباسازی آنها باید از CSS بهره برد. ارتباط HTML و CSS HTML و CSS دو نوع مختلف نشانه‌گذاری هستند که هر کدام ترتیب معینی برای نوشتن کد دارند. اما تفاوت مهمی بین این دو وجود دارد؛ می‌توان گفت که HTML ساختار صفحه را تشکیل می‌دهد در حالی که CSS ظاهر صفحه را به عهده دارد. تفاوت ظاهر سایت‌های مختلف به نحوه استفاده از CSS توسط طراح سایت بستگی دارد. در واقع CSS زبانی برای توصیف ظاهر صفحات وب شامل رنگ‌ها، چارچوب پیرامون عکس، نشانگر ماوس، آرایش و فونت‌ها (اندازه، رنگ، نوع) است. با استفاده از CSS می‌توان نمایش صفحه را برای انواع مختلف دستگاه، مانند صفحات بزرگ، صفحات کوچک و پرینترها تنظیم کرد. CSS مستقل از HTML است و می‌توان آن را با هر نوع زبان نشانه‌گذاری مبتنی بر XML به کار برد. تفکیک HTML از CSS حفظ و نگهداری وب سایت، اشتراک‌گذاری Style Sheet (شیوه‌نامه) بین صفحات و انطباق صفحات با محیط‌های مختلف را ساده‌تر میکند. به این کار تفکیک ساختار یا محتوا از نما یا ظاهر می‌گویند. CSSرا به سه طریق می‌توان به عناصر HTML اضافه کرد: روش inline: از طریق استفاده از خصوصیت style در عناصر HTML استایل‌های هر عنصر داخل تگ نوشته می‌شوند: <h1 style="color:blue;">This is a sample text</h1> روشinternal: از طریق عنصر <style> در بخش <head> تمامی کدهای css صفحه در تگ head و style نوشته می‌شوند <!DOCTYPE html> <html> <head> <style> body {background-color: red;} h1 {color: blue;} p {color: red;} </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> روش external: از طریق استفاده از یک فایل CSS خارجی، استایل‌ها در یک فایل CSS جداگانه نوشته شده و لینک آن در هدر صفحه گنجانده می‌شود که بهترین روش برای افزودن CSS به HTML محسوب می‌شود. <head> <link rel="stylesheet" href="styles.css"> Xhtml چیست؟ در ابتدای قرن ۲۱، کنسرسیوم وب جهانی XHTML 1.0 را به بازار پیشنهاد کرد. از ۲۶ ژانویه ۲۰۰۰ این زبان به عنوان استاندارد مشترک با HTML 4.01 در طراحی سایت به کار می‌رود؛ با این تفاوت که کدها باید در آن طبق قانون نوشتهشده و برنامه‌نویس، حق تغییر در ترتیب نوشتن کدها را ندارد. پس از این دو نسخه، HTML 5 به بازار عرضه شد که زبانی برای طراحی فعلی و آینده وبسایت‌ها تعریف شدهاست. برنامه‌نویسان وب معتقدند ویژگی‌های تعبیه شده در این نسخه تا ده سال آینده پاسخگوی نیازهای وب خواهدبود. بسیاری از بخش‌های آن برای کاربران قبلی HTML آشنا و بسیاری دیگر جدید و ناشناخته است. تفاوت HTML و XHTML در چیست؟ تفاوت میان HTML 4.01 و XHTML بسیار ناچیز است و عمده تفاوت بین HTML و XHTML قوانینی هستند که در نوشتن کدها باید مورد توجه قرار گیرد تا صفحه وب شما بر پایه XHTML پیاده سازی شود. ● مهمترین تفاوت های XHTML و HTML در XHTML بستن تمامی تگ ها الزامی شده است. در XHTML باید تاخر و تقدم و باز و بسته شدن تگ ها رعایت گردد. در XHTML نام تگ ها و خصوصیات آنها با حروف کوچک نوشته شود. فایل XHTML باید حاوی ریشه <html> باشد. کلیه تصاویر باید دارای توضیحات باشند. ● مثال های تفاوت های HTML و XHTML الزام در بستن تگ ها در HTML شما می توانستید تگ ها را باز بگذارید و بستن همه تگ ها الزامی نبودند. اما در XHTML همه تگ ها و عناصر باید بسته شوند. حتی تگ های یک قسمتی هم مانند تگ هایی که در بین آنها عناصر دیگری قرار میگیرند باید بسته شوند : – تگ هایی که در بین آنها می توان عنصر دیگری قرار داد: 1.تگ های خالی تک قسمتی 2. تاخر و تقدم باز و بسته شدن تگ ها در HTML تقدم بسته شدن تگ های تودرتو در برخی عناصر از اهمیت برخوردار نبود. اما در XHTML تگ داخل عنصر باید قبل از بسته شدن عنصر بیرونی بسته شده باشد. یعنی تگی که داخل یک عنصر باز شده است باید داخل همان عنصر بسته شده باشد: 3. نوشتن نام تگ ها و خصوصیات با حروف کوچک کوچک یا بزرگ بودن حروف در HTML اهمیتی ندارد در حالی که در XHTML کلیه تگ‌ها و خصوصیات آنها باید با حروف کوچک نوشته شوند : 4 .داشتن عنصر ریشه تمام محتوای صفحه وب باید در داخل عنصر ریشه <html> قرار بگیرند. سایر عناصر باید به‌طور مناسب با رعایت تاخر و تقدم و باز وبسته شدن در داخل عنصر ریشه و یکدیگر قرار بگیرند: 5. نوشتن توضیحات برای تصاویر عناصر تگ <img> باید دارای خاصیت alt باشد که داخل آن توضیحاتی درباره آن تصویر داده می شود. جمع‌بندی Html برای تبدیل شدن به یک برنامه کاربردی راه زیادی را طی کرده است و امروز به همراه xhtml و css اساس و بنیان وب هستند. به همین دلیل دانستن این دو زبان، می توانند نقش پله های ترقی را برای شما ایفا کنند. پله هایی که شما را به سمت یادگیری زبان های برنامه نویسی دیگر سوق می دهند و می توانید با ترکیب دانش خود با زبان های برنامه نویسی دیگر همچون JavaScript ، Ruby و PHP و استفاده از فریم ورک‌هایی همچون Bootstrap، به سمت حرفه ای شدن پیش بروید.