رفتن به مطلب
مرورگر پیشنهادی آرساکیا گیم مرورگر های تحت موتور کرومیوم می‌باشد، برای دانلود روی مرورگر انتخابی خود کلیک کنید
Google Chrome Microsoft Edge Ungoogled Chromium Brave Opera GX Opera
قوانین انجمن

HTML چیست و چه کاربردی دارد؟

MahdiNt

توسط MahdiNt
در برنامه نویسی

 اشتراک گذاری

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

MahdiNt مشتاق

MahdiNt

ارسال شده در
ارسال شده در

زبان نشانه گذاری HTML به عنوان اولین پایه برای هر دوره آموزش طراحی سایت در نظر گرفته می‌شود. این زبان چیست و چه کاربردی دارد؟

HTML مخفف عبارت Hypertext Markup Language است. این زبان در واقع یک نوع زبان نشانه‌گذاری استاندارد برای ایجاد صفحات وب و وب اپلیکیشن‌ها محسوب می‌شود. در واقع HTML را عنصر کلیدی صفحات وب می‌دانند و تمامی زبان‌های برنامه‌نویسی برای طراحی سایت، به شکلی به HTML وابسته هستند. با استفاده از این زبان و CSS و جاوا اسکریپت، تکنولوژی‌های بنیادین برای شبکه جهانی وب تشکیل می‌شود. مرورگرها اسناد HTML را از وب سرور یا مخزن لوکال (Local) دریافت کرده و آن‌ها را به صفحات وب چند رسانه‌ای تبدیل می‌کنند. در واقع HTML ساختار معنایی صفحات وب را تعریف کرده و شامل مشخصات ظاهری سند است.

 

تاریخچه HTML | تکامل HTML | عناصر HTML | تفاوت HTML و XHTML | ارتباط HTML و CSS

مولفه‌های HTML بلوک‌های سازنده صفحات 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 در مرورگر تعریف شده و می‌توان با استفاده از CSS توسط طراح صفحات وب، آن‌ها را تغییر داده یا ارتقا بخشید. HTML نشانه‌گذاری از چندین مولفه کلیدی شامل تگ‌ها تشکیل شده‌ است. تگ‌های HTML معمولا به صورت جفت‌هایی مانند <h1> و <h1/>  هستند. گرچه برخی از‌ آن‌ها مانند <img>  نشان‌دهنده عناصر خالی بوده و جفت ندارند. اولین تگ در این جفت را تگ آغازین و تگ دوم را تگ پایانی می‌نامند. در زیر یک نمونه از برنامه‌ی کلاسیک «Hello World!» را می‌بینید که یک آزمایش رایج برای مقایسه زبان‌های برنامه‌نویسی، اسکریپت و نشانه‌گذاری است. این نمونه با استفاده از ۹ خط کد منبع نوشته شده است:

<!DOCTYPE html> <html> <head> <title>This is a title</title> </head> <body> <p>Hello world!</p> </body> </html>

متن میان <html> و <html/>  در واقع صفحه وب را تعریف کرده و متن بین <body> و <body/>  محتوای قابل مشاهده متن است. متن نشانه‌گذاری <title>This is a title</title> عنوان صفحه مرورگر را تعریف می‌کند. 

تکامل 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 صورت گرفت.

ورود XHTML

در ابتدای قرن ۲۱، کنسرسیوم وب جهانی XHTML 1.0 را به بازار پیشنهاد کرد. از ۲۶ ژانویه ۲۰۰۰ این زبان به عنوان استاندارد مشترک با HTML 4.01 در طراحی سایت به کار می‌رود، با این تفاوت‌ که کدها باید در آن طبق قانون نوشته شده و برنامه‌نویس حق تغییر در ترتیب نوشتن کدها را ندارد. پس از این دو نسخه، HTML 5 به بازار عرضه شد که زبانی برای طراحی فعلی و آینده وب سایت‌ها تعریف شده است. برنامه نویسان وب معتقدند ویژگی‌های تعبیه شده در این نسخه تا ده سال آینده پاسخگوی نیازهای وب خواهد بود. بسیاری از بخش‌های آن برای کاربران قبلی HTML آشنا و بسیاری دیگر جدید و ناشناخته است.

بیشتر بخوانید:

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

عناصر HTML

سندهای HTML به ساختاری از عناصر تو در تو از HTML اشاره دارند. این عناصر در سند توسط تگ‌های HTML مشخص می‌شوند. مابین تگ آغازین و پایانی می‌توان ترکیبی از تگ‌های مختلف و متن را قرار داد. برخی از عناصر مانند link break با علامت <br> اجازه تعبیه هیچگونه محتوا، متن یا تگ دیگری را نمی‌دهند. در صفحات HTML می‌توان عناصر مختلفی مثل عکس، فرم و جدول قرار داد اما برای آن که این عناصر برای مرورگر قابل فهم باشند، باید از کد و تگ مشخصی استفاده کرد تا مرورگر وقتی به قسمت مشخص شده برای آن عنصر رسید، آن را در صفحات اینترنت نمایش دهد.

سرتیتر سند HTML به صورت <head>...<head/> نوشته می‌شود. برای مثال:

<head> <title>The Title</title> </head>

عنوان در سند HTML با تگ‌های <h1> و <h6>  مشخص می‌شوند: 

<h1>Heading level 1</h1> <h2>Heading level 2</h2> <h3>Heading level 3</h3> <h4>Heading level 4</h4> <h5>Heading level 5</h5> <h6>Heading level 6</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 و XHTML

XHTML هم مانند HTML یک زبان است که صفحات وب با آن نوشته می‌شوند، با این تفاوت که HTML زبانی مبتنی بر SGML (زبان نشانه‌گذاری تعمیم یافته استاندارد) و XHTML زبانی مبتنی بر XML (زبان نشانه‌گذاری گسترش پذیر) است. این دو زبان را می‌توان دو روی یک سکه دانست که برای ساخت صفحات وب مکمل یکدیگر هستند. زبان XHTML برای مطابقت با استانداردهای XML از زبان HTML مشتق شده است اما در مقایسه با والد خود، بسیار سرسختانه تر بوده و به کاربر اجازه سلیقه‌ای عمل کردن در کدها و ساختارها را نمی‌دهد. علت ایجاد این زبان تگ‌های پیچیده‌ي مرورگرها بود. صفحاتی که به زبان HTML نوشته شده بودند در مرورگرها مختلف ظاهر متفاوتی از خود نشان می‌دادند. فایل‌های XHTML را می‌توان با پسوندهای .xhtml، .xht، .xml، .html و .htm مشاهده کرد.

اگر بخواهیم مقایسه کلی داشته باشیم باید گفت که HTML زبان نشانه‌گذاری غالب برای ایجاد صفحات وب است. با استفاده از این زبان برای عناوین، فهرست‌ها، لینک‌ها و غیره ساختارهای معنایی ایجاد کرده و امکان تعبیه تصاویر و اشیاء را برای ایجاد فرم‌های تعاملی ایجاد می‌کند. XHTML از خانواده زبان‌های XML است که نقطه مقابل نسخه‌های مختلف HTML محسوب می‌شود. این زبان عناصر و تگ‌ها را از HTML و قوانین و مقررات را از XML در خود گنجانده است. در این زبان اجازه حذف هیچ نوع تگ یا استفاده از به حداقل رسانی خصوصیات وجود ندارد. در XHTML باید برای هر تگ آغازین یک تگ پایانی وجود داشته باشد و تمام تگ‌های تو در تو باید در ترتیب مشخصی قرار داشته باشند. برای مثال، در حالی که تگ <br> در HTML مجاز است، در زبان XHTML باید به صورت </  br> نوشته شود.

سندهای HTML از عناصری تشکیل شده‌اند که دارای سه مولفه یک جفت تگ، خصوصیات عنصر که در داخل تگ داده شده است و محتوای واقعی، متنی و گرافیکی هستند. عنصر HTML می‌تواند هر چیزی باشد که بین تگ‌ها قرار می‌گیرد.  سندهای XHTML تنها دارای عنصر ریشه هستند. تمام عناصر شامل متغیرها باید با حروف کوچک نوشته شده و مقادیر نسبت داده شده به آن‌ها باید داخل علامت نقل قول قرار گیرد تا قابل شناسایی باشد. بر خلاف HTML، انجام این کار در XTML اجباری است.

ارتباط 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"> </head>

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

  • دوست دارم که 3
  • مرسی 3

꧁☬?????_??☬꧂

 

 

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر
  • 3 ماه بعد...
Refigh مسلط

Refigh

ارسال شده در
ارسال شده در
در در ۱۳۹۸/۶/۱۴ در 17:35، G0DFather گفته است:

عالی بود اما من PHP رو ترجیح میدم

???????????????????

  • مرسی 1

 

❤️°•??? ??? ??? ???? ??????? ?? ????❤️

 

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر
  • 1 ماه بعد...
  • 3 هفته بعد...
DarkSky ستاره در حال رشد

DarkSky

ارسال شده در
ارسال شده در

عزیز من شما بدون HTML چطور میخوای سایت ت رو پیاده کنی؟

 Nichts lässt die Erde so weitläufig erscheinen, dass Freunde in einiger Entfernung die Breiten- und Längengrade erreichen

 

LastGoD.png

                                                    

Angel.png
 

ilia.png

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر
H3Lium تازه وارد

H3Lium

ارسال شده در
ارسال شده در
در در ۱۳۹۸/۶/۱۴ در 17:05، Luciano گفته است:

عالی بود اما من PHP رو ترجیح میدم

 

در در ۱۳۹۸/۶/۲۵ در 15:13، SamiraHP گفته است:

PHP  بهتر نیست؟

یا HTMl و CSS

سلام دوستان عزیز قبل از کامنت گذاشتن مقداری تحقیقم بد نیست

PHP برای Backend سایت هستش و Html Css JavaScript . . .  برای Frontend سایت

یکم تحقیق کنید مرسی

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر
  • 2 ماه بعد...
Neikso همیشگی مجموعه

Neikso

ارسال شده در
ارسال شده در

ممنون بابت مطلب با این که html رو بلدم اما به Html یک ساختار ساختمانی سایت هست و CSS برای رنگ و چهره دادن به سایت هست و بعدا ورود میکنیم به بحث هایی PHP و Java به صورت کلی پیشنهاد میشه که برای یک طراح وب از Html شروع بشه و اینکه کدوم بهتره یا بدتره نیست و اگه پایه رو بلد نباشین نمیتونین PHP رو پیاده کنید. بازم ممنون بابت مطلب کامل بود.

ما همینیم که هستیم
شاخ نیستیم چون گاو نیستیم
خاص نیستیم چون عقده نداریم
بالا نیستیم چون پرچم نیستیم
فقط یه آدمیم، چیزی که خیلیا نیستن …

                                                                                                   ilia.png

                                                                                                   Zeri.png

                                                                                                   LastGoD.png

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر
  • 7 ماه بعد...
AmirMahdi با تجربه

AmirMahdi

ارسال شده در
ارسال شده در
در در ۱۳۹۸/۳/۸ در 13:36، MahdiNt گفته است:

زبان نشانه گذاری HTML به عنوان اولین پایه برای هر دوره آموزش طراحی سایت در نظر گرفته می‌شود. این زبان چیست و چه کاربردی دارد؟

HTML مخفف عبارت Hypertext Markup Language است. این زبان در واقع یک نوع زبان نشانه‌گذاری استاندارد برای ایجاد صفحات وب و وب اپلیکیشن‌ها محسوب می‌شود. در واقع HTML را عنصر کلیدی صفحات وب می‌دانند و تمامی زبان‌های برنامه‌نویسی برای طراحی سایت، به شکلی به HTML وابسته هستند. با استفاده از این زبان و CSS و جاوا اسکریپت، تکنولوژی‌های بنیادین برای شبکه جهانی وب تشکیل می‌شود. مرورگرها اسناد HTML را از وب سرور یا مخزن لوکال (Local) دریافت کرده و آن‌ها را به صفحات وب چند رسانه‌ای تبدیل می‌کنند. در واقع HTML ساختار معنایی صفحات وب را تعریف کرده و شامل مشخصات ظاهری سند است.

 

تاریخچه HTML | تکامل HTML | عناصر HTML | تفاوت HTML و XHTML | ارتباط HTML و CSS

مولفه‌های HTML بلوک‌های سازنده صفحات 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 در مرورگر تعریف شده و می‌توان با استفاده از CSS توسط طراح صفحات وب، آن‌ها را تغییر داده یا ارتقا بخشید. HTML نشانه‌گذاری از چندین مولفه کلیدی شامل تگ‌ها تشکیل شده‌ است. تگ‌های HTML معمولا به صورت جفت‌هایی مانند <h1> و <h1/>  هستند. گرچه برخی از‌ آن‌ها مانند <img>  نشان‌دهنده عناصر خالی بوده و جفت ندارند. اولین تگ در این جفت را تگ آغازین و تگ دوم را تگ پایانی می‌نامند. در زیر یک نمونه از برنامه‌ی کلاسیک «Hello World!» را می‌بینید که یک آزمایش رایج برای مقایسه زبان‌های برنامه‌نویسی، اسکریپت و نشانه‌گذاری است. این نمونه با استفاده از ۹ خط کد منبع نوشته شده است:

<!DOCTYPE html> <html> <head> <title>This is a title</title> </head> <body> <p>Hello world!</p> </body> </html>

متن میان <html> و <html/>  در واقع صفحه وب را تعریف کرده و متن بین <body> و <body/>  محتوای قابل مشاهده متن است. متن نشانه‌گذاری <title>This is a title</title> عنوان صفحه مرورگر را تعریف می‌کند. 

تکامل 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 صورت گرفت.

ورود XHTML

در ابتدای قرن ۲۱، کنسرسیوم وب جهانی XHTML 1.0 را به بازار پیشنهاد کرد. از ۲۶ ژانویه ۲۰۰۰ این زبان به عنوان استاندارد مشترک با HTML 4.01 در طراحی سایت به کار می‌رود، با این تفاوت‌ که کدها باید در آن طبق قانون نوشته شده و برنامه‌نویس حق تغییر در ترتیب نوشتن کدها را ندارد. پس از این دو نسخه، HTML 5 به بازار عرضه شد که زبانی برای طراحی فعلی و آینده وب سایت‌ها تعریف شده است. برنامه نویسان وب معتقدند ویژگی‌های تعبیه شده در این نسخه تا ده سال آینده پاسخگوی نیازهای وب خواهد بود. بسیاری از بخش‌های آن برای کاربران قبلی HTML آشنا و بسیاری دیگر جدید و ناشناخته است.

بیشتر بخوانید:

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

عناصر HTML

سندهای HTML به ساختاری از عناصر تو در تو از HTML اشاره دارند. این عناصر در سند توسط تگ‌های HTML مشخص می‌شوند. مابین تگ آغازین و پایانی می‌توان ترکیبی از تگ‌های مختلف و متن را قرار داد. برخی از عناصر مانند link break با علامت <br> اجازه تعبیه هیچگونه محتوا، متن یا تگ دیگری را نمی‌دهند. در صفحات HTML می‌توان عناصر مختلفی مثل عکس، فرم و جدول قرار داد اما برای آن که این عناصر برای مرورگر قابل فهم باشند، باید از کد و تگ مشخصی استفاده کرد تا مرورگر وقتی به قسمت مشخص شده برای آن عنصر رسید، آن را در صفحات اینترنت نمایش دهد.

سرتیتر سند HTML به صورت <head>...<head/> نوشته می‌شود. برای مثال:

<head> <title>The Title</title> </head>

عنوان در سند HTML با تگ‌های <h1> و <h6>  مشخص می‌شوند: 

<h1>Heading level 1</h1> <h2>Heading level 2</h2> <h3>Heading level 3</h3> <h4>Heading level 4</h4> <h5>Heading level 5</h5> <h6>Heading level 6</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 و XHTML

XHTML هم مانند HTML یک زبان است که صفحات وب با آن نوشته می‌شوند، با این تفاوت که HTML زبانی مبتنی بر SGML (زبان نشانه‌گذاری تعمیم یافته استاندارد) و XHTML زبانی مبتنی بر XML (زبان نشانه‌گذاری گسترش پذیر) است. این دو زبان را می‌توان دو روی یک سکه دانست که برای ساخت صفحات وب مکمل یکدیگر هستند. زبان XHTML برای مطابقت با استانداردهای XML از زبان HTML مشتق شده است اما در مقایسه با والد خود، بسیار سرسختانه تر بوده و به کاربر اجازه سلیقه‌ای عمل کردن در کدها و ساختارها را نمی‌دهد. علت ایجاد این زبان تگ‌های پیچیده‌ي مرورگرها بود. صفحاتی که به زبان HTML نوشته شده بودند در مرورگرها مختلف ظاهر متفاوتی از خود نشان می‌دادند. فایل‌های XHTML را می‌توان با پسوندهای .xhtml، .xht، .xml، .html و .htm مشاهده کرد.

اگر بخواهیم مقایسه کلی داشته باشیم باید گفت که HTML زبان نشانه‌گذاری غالب برای ایجاد صفحات وب است. با استفاده از این زبان برای عناوین، فهرست‌ها، لینک‌ها و غیره ساختارهای معنایی ایجاد کرده و امکان تعبیه تصاویر و اشیاء را برای ایجاد فرم‌های تعاملی ایجاد می‌کند. XHTML از خانواده زبان‌های XML است که نقطه مقابل نسخه‌های مختلف HTML محسوب می‌شود. این زبان عناصر و تگ‌ها را از HTML و قوانین و مقررات را از XML در خود گنجانده است. در این زبان اجازه حذف هیچ نوع تگ یا استفاده از به حداقل رسانی خصوصیات وجود ندارد. در XHTML باید برای هر تگ آغازین یک تگ پایانی وجود داشته باشد و تمام تگ‌های تو در تو باید در ترتیب مشخصی قرار داشته باشند. برای مثال، در حالی که تگ <br> در HTML مجاز است، در زبان XHTML باید به صورت </  br> نوشته شود.

سندهای HTML از عناصری تشکیل شده‌اند که دارای سه مولفه یک جفت تگ، خصوصیات عنصر که در داخل تگ داده شده است و محتوای واقعی، متنی و گرافیکی هستند. عنصر HTML می‌تواند هر چیزی باشد که بین تگ‌ها قرار می‌گیرد.  سندهای XHTML تنها دارای عنصر ریشه هستند. تمام عناصر شامل متغیرها باید با حروف کوچک نوشته شده و مقادیر نسبت داده شده به آن‌ها باید داخل علامت نقل قول قرار گیرد تا قابل شناسایی باشد. بر خلاف HTML، انجام این کار در XTML اجباری است.

ارتباط 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"> </head>

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

عشقم از کدوم سایت کپی کردی؟ xD

rsz_31emam-hosein-12_filr.jpg

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر
  • 4 هفته بعد...
RealBadMan همکار

RealBadMan

ارسال شده در
ارسال شده در
در در ۱۳۹۸/۳/۸ در 13:36، MahdiNt گفته است:

زبان نشانه گذاری HTML به عنوان اولین پایه برای هر دوره آموزش طراحی سایت در نظر گرفته می‌شود. این زبان چیست و چه کاربردی دارد؟

HTML مخفف عبارت Hypertext Markup Language است. این زبان در واقع یک نوع زبان نشانه‌گذاری استاندارد برای ایجاد صفحات وب و وب اپلیکیشن‌ها محسوب می‌شود. در واقع HTML را عنصر کلیدی صفحات وب می‌دانند و تمامی زبان‌های برنامه‌نویسی برای طراحی سایت، به شکلی به HTML وابسته هستند. با استفاده از این زبان و CSS و جاوا اسکریپت، تکنولوژی‌های بنیادین برای شبکه جهانی وب تشکیل می‌شود. مرورگرها اسناد HTML را از وب سرور یا مخزن لوکال (Local) دریافت کرده و آن‌ها را به صفحات وب چند رسانه‌ای تبدیل می‌کنند. در واقع HTML ساختار معنایی صفحات وب را تعریف کرده و شامل مشخصات ظاهری سند است.

 

تاریخچه HTML | تکامل HTML | عناصر HTML | تفاوت HTML و XHTML | ارتباط HTML و CSS

مولفه‌های HTML بلوک‌های سازنده صفحات 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 در مرورگر تعریف شده و می‌توان با استفاده از CSS توسط طراح صفحات وب، آن‌ها را تغییر داده یا ارتقا بخشید. HTML نشانه‌گذاری از چندین مولفه کلیدی شامل تگ‌ها تشکیل شده‌ است. تگ‌های HTML معمولا به صورت جفت‌هایی مانند <h1> و <h1/>  هستند. گرچه برخی از‌ آن‌ها مانند <img>  نشان‌دهنده عناصر خالی بوده و جفت ندارند. اولین تگ در این جفت را تگ آغازین و تگ دوم را تگ پایانی می‌نامند. در زیر یک نمونه از برنامه‌ی کلاسیک «Hello World!» را می‌بینید که یک آزمایش رایج برای مقایسه زبان‌های برنامه‌نویسی، اسکریپت و نشانه‌گذاری است. این نمونه با استفاده از ۹ خط کد منبع نوشته شده است:

<!DOCTYPE html> <html> <head> <title>This is a title</title> </head> <body> <p>Hello world!</p> </body> </html>

متن میان <html> و <html/>  در واقع صفحه وب را تعریف کرده و متن بین <body> و <body/>  محتوای قابل مشاهده متن است. متن نشانه‌گذاری <title>This is a title</title> عنوان صفحه مرورگر را تعریف می‌کند. 

تکامل 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 صورت گرفت.

ورود XHTML

در ابتدای قرن ۲۱، کنسرسیوم وب جهانی XHTML 1.0 را به بازار پیشنهاد کرد. از ۲۶ ژانویه ۲۰۰۰ این زبان به عنوان استاندارد مشترک با HTML 4.01 در طراحی سایت به کار می‌رود، با این تفاوت‌ که کدها باید در آن طبق قانون نوشته شده و برنامه‌نویس حق تغییر در ترتیب نوشتن کدها را ندارد. پس از این دو نسخه، HTML 5 به بازار عرضه شد که زبانی برای طراحی فعلی و آینده وب سایت‌ها تعریف شده است. برنامه نویسان وب معتقدند ویژگی‌های تعبیه شده در این نسخه تا ده سال آینده پاسخگوی نیازهای وب خواهد بود. بسیاری از بخش‌های آن برای کاربران قبلی HTML آشنا و بسیاری دیگر جدید و ناشناخته است.

بیشتر بخوانید:

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

عناصر HTML

سندهای HTML به ساختاری از عناصر تو در تو از HTML اشاره دارند. این عناصر در سند توسط تگ‌های HTML مشخص می‌شوند. مابین تگ آغازین و پایانی می‌توان ترکیبی از تگ‌های مختلف و متن را قرار داد. برخی از عناصر مانند link break با علامت <br> اجازه تعبیه هیچگونه محتوا، متن یا تگ دیگری را نمی‌دهند. در صفحات HTML می‌توان عناصر مختلفی مثل عکس، فرم و جدول قرار داد اما برای آن که این عناصر برای مرورگر قابل فهم باشند، باید از کد و تگ مشخصی استفاده کرد تا مرورگر وقتی به قسمت مشخص شده برای آن عنصر رسید، آن را در صفحات اینترنت نمایش دهد.

سرتیتر سند HTML به صورت <head>...<head/> نوشته می‌شود. برای مثال:

<head> <title>The Title</title> </head>

عنوان در سند HTML با تگ‌های <h1> و <h6>  مشخص می‌شوند: 

<h1>Heading level 1</h1> <h2>Heading level 2</h2> <h3>Heading level 3</h3> <h4>Heading level 4</h4> <h5>Heading level 5</h5> <h6>Heading level 6</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 و XHTML

XHTML هم مانند HTML یک زبان است که صفحات وب با آن نوشته می‌شوند، با این تفاوت که HTML زبانی مبتنی بر SGML (زبان نشانه‌گذاری تعمیم یافته استاندارد) و XHTML زبانی مبتنی بر XML (زبان نشانه‌گذاری گسترش پذیر) است. این دو زبان را می‌توان دو روی یک سکه دانست که برای ساخت صفحات وب مکمل یکدیگر هستند. زبان XHTML برای مطابقت با استانداردهای XML از زبان HTML مشتق شده است اما در مقایسه با والد خود، بسیار سرسختانه تر بوده و به کاربر اجازه سلیقه‌ای عمل کردن در کدها و ساختارها را نمی‌دهد. علت ایجاد این زبان تگ‌های پیچیده‌ي مرورگرها بود. صفحاتی که به زبان HTML نوشته شده بودند در مرورگرها مختلف ظاهر متفاوتی از خود نشان می‌دادند. فایل‌های XHTML را می‌توان با پسوندهای .xhtml، .xht، .xml، .html و .htm مشاهده کرد.

اگر بخواهیم مقایسه کلی داشته باشیم باید گفت که HTML زبان نشانه‌گذاری غالب برای ایجاد صفحات وب است. با استفاده از این زبان برای عناوین، فهرست‌ها، لینک‌ها و غیره ساختارهای معنایی ایجاد کرده و امکان تعبیه تصاویر و اشیاء را برای ایجاد فرم‌های تعاملی ایجاد می‌کند. XHTML از خانواده زبان‌های XML است که نقطه مقابل نسخه‌های مختلف HTML محسوب می‌شود. این زبان عناصر و تگ‌ها را از HTML و قوانین و مقررات را از XML در خود گنجانده است. در این زبان اجازه حذف هیچ نوع تگ یا استفاده از به حداقل رسانی خصوصیات وجود ندارد. در XHTML باید برای هر تگ آغازین یک تگ پایانی وجود داشته باشد و تمام تگ‌های تو در تو باید در ترتیب مشخصی قرار داشته باشند. برای مثال، در حالی که تگ <br> در HTML مجاز است، در زبان XHTML باید به صورت </  br> نوشته شود.

سندهای HTML از عناصری تشکیل شده‌اند که دارای سه مولفه یک جفت تگ، خصوصیات عنصر که در داخل تگ داده شده است و محتوای واقعی، متنی و گرافیکی هستند. عنصر HTML می‌تواند هر چیزی باشد که بین تگ‌ها قرار می‌گیرد.  سندهای XHTML تنها دارای عنصر ریشه هستند. تمام عناصر شامل متغیرها باید با حروف کوچک نوشته شده و مقادیر نسبت داده شده به آن‌ها باید داخل علامت نقل قول قرار گیرد تا قابل شناسایی باشد. بر خلاف HTML، انجام این کار در XTML اجباری است.

ارتباط 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"> </head>

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

چقدر حوصله داشتی این همه رو نوشتی ?

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر
Life ستاره در حال رشد

Life

ارسال شده در
ارسال شده در

زبان PHP اطلاعات را قبل از اینکه به صورت HTML به کاربر نمایش دهد، پردازش می‌کند و سپس آن را در قالب HTML نمایش میده

  • چی چی 1

emza-a73q.png

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر
Ocanner همکار

Ocanner

ارسال شده در
ارسال شده در
در 8 ساعت قبل، RealBadMan گفته است:

چقدر حوصله داشتی این همه رو نوشتی ?

 
شاید باورت نشه اما یه چیزی داریم به اسمه کپی پیست?

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر
Wolfe همکار

Wolfe

ارسال شده در
ارسال شده در
در 9 ساعت قبل، GalacticBoy گفته است:

زبان PHP اطلاعات را قبل از اینکه به صورت HTML به کاربر نمایش دهد، پردازش می‌کند و سپس آن را در قالب HTML نمایش میده

 

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

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر
RealBadMan همکار

RealBadMan

ارسال شده در
ارسال شده در
در 2 ساعت قبل، Ocanner گفته است:

 
شاید باورت نشه اما یه چیزی داریم به اسمه کپی پیست?

وای تو چقدر میدونی والا من نمیدونستم همچین چیزی هست

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر
Ocanner همکار

Ocanner

ارسال شده در
ارسال شده در
در 21 ساعت قبل، RealBadMan گفته است:

وای تو چقدر میدونی والا من نمیدونستم همچین چیزی هست


خودمم وقتی فهمیدم پشمام ریخت

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر
  • 1 سال بعد...
  • 1 ماه بعد...

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

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید.
توجه: مطلب ارسالی شما پس از تایید مدیریت برای همه قابل رویت خواهد بود.

مهمان
ارسال پاسخ به این موضوع...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   بازگردانی قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
 اشتراک گذاری
رفتن به فهرست موضوع ها
×
×
  • اضافه کردن...