HTML و CSS در طراحی سایت بسیار اهمیت دارن که در این مطلب می خوایم درباره اون بحث کنیم.

سرفصل محتوا

  • HTML چیه؟
  • گذشته پیدایش HTML
  • تکامل HTML کم کم
    • تولد HTML 3.0
    • HTML 3.2
    • HTML 4.01؛ تغییر بزرگ
    • ورود XHTML
  • عناصر HTML
  • فرق HTML و XHTML
  • CSS چیه؟
  • رابطه HTML و CSS
  • آشنایی با بعضی تگای html

HTML چیه؟

HTML مخفیف عبارت  Hyper Text Markup Languageه یعنی زبون نشونه گذاری یا علامت گذاری اَبر متن. پس Html یه زبون برنامه نویسی نیس بلکه یه زبون نشونه گذاریست. می تونیم بگیم با به کار گیری Html می تونیم ساختار یه صفحه وب رو توصیف کنیم.

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

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

عامل های 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 باشن یعنی می توان اون ها رو به شکل دلخواه عوض کرد. واسه این کار  باید با به کار گیری علامت مساوی، مقداری رو تعیین کرد مثل "۰"=border و "%۵۰"=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> نوشته شه.

این را هم حتما بخوانید :   Rich snippet (ریچ اسنپیت) چیست؟

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

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

CSS چیه؟

Css کوتاه شده یا مخفف عبارت Cascading Style Sheetsه که توانایی صفحه آرایی؛ استایل دهی و قشنگتر سازی صفحات وب رو واسه طراحان سایت جفت و جور می سازه. در واقع ساختار یه صفحه با به کار گیری اچ تی ام ال تعیین می شه و بعد با به کار بردن کدهایی دیگه به این ساختار و چیدمان استایل داده می شه.

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

معمولا در روش های نوین طراحی سایت همه کدهای مربوط به css تو یه فایل جداگونه قرار میگیره و دیگه از استایل دهی inline ( در داخل هر تگ 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">
</head>

آشنایی با بعضی تگای html

تگ a: این تگ همونجوریکه قبلا مثال زدم، واسه ایجاد لینک و به صورت جفت به کار میره. <a> و </a>. این تگ دو attribute بسیار مهم داره (مهمتر از بقیه به نظر من) title و rel.
تگ b: این تگ هم به صورت جفت به کار میره و واسه بولد (bold) کردن کاربرد داره. مثلا </b>سون لرن<b> عبارت «سون لرن» رو به نمایش در میاره.
تگ I: یه تگ جفتی دیگه واسه نمایش ایتالیک (italic) محتوای داخل اون.
تگ U: تگی جفتی واسه زیرخط دار کردن (underline) محتوا.
هدینگا: این دسته از تگای جفتی شامل <h1>،<h2>، <h3>، <h4>، <h5> و <h6> می شن که واسه سازمان دهی محتوای صفحه به کار می رن.
تگ img: یکی از تگای غیرجفتی که واسه نمایش عکس به کار میره. دارای دو attribute بسیار مهم به نام alt و title.
تگ p: این تگ جفتی واسه نمایش شروع و پایان یه پاراگراف به کار میره.
تگ title: یکی از مهم ترین تگای یه صفحه که واسه نمایش عنوان اون به کار میره.
تگ ul: این تگ جفتی واسه ایجاد لیست به کار میره. هر کدوم از اجزاء لیست با بولت (مانند چیزی که در کنار همین لیست می بینین) تمیز داده می شن.
تگ ol: این تگ جفتی هم واسه ایجاد لیست کاربرد داره البته اجزاء این لیست با اعداد از هم جدا می شن.
تگ hr: یه تگ غیرجفتی واسه ایجاد خط افقی. <hr/>
تگ table: تگ جفتی table واسه ایجاد جدول به کار میره. خود این تگ به تنهایی کاری از پیش نمی بره و با به کار گیری چندین تگ دیگه س که جدول شکل میگیره.
تگ div : تگ جفتی div واسه ایجاد لایه بندیای صفحات وب استفاده می شه . امروزه به جای جدولا از لایه بندیا واسه ساخت ساختار اصلی صفحات استفاده می شه .

حتما بخونین: تگ Canonical چیه و کاربرد اون در سئو ؟

منبع: lydaweb.com – ۷learn.com – http://supportwebs.ir

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *