html در طراحی سایت

اگر مقاله « راهنمای جامع بررسی تفاوت طراحی و برنامه نویسی سایت» را مطالعه کرده باشید، در مورد برنامه نویسی سایت و زبان هایی که برای برنامه نویسی سمت کاربر مورد استفاده قرار میگیرد اطلاعات مفید و کاربردی خواهید داشت.همانطور که قبلا به این موضوع اشاره شده است، یکی از مهم ترین زبان های سمت کاربر که همواره به عنوان پایه ای ترین مفهوم در آموزش های طراحی سایت تدریس می شود، زبان نشانه گذاری html می‌باشد.

این زبان در اصل، اساس کار ما در برنامه نویسی و طراحی سایت می‌باشد برای همین در این مقاله من قصد دارم به زبان نشانه گذاری (نه برنامه نویسی!) html به عنوان اولین زیرشاخه از بخش front-end وبسایت بپردازم و با مقاله ای جامع، دانش شما را نسبت به این مبحث جذاب از طراحی و برنامه نویسی سایت، افزایش دهم.

 


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


html چیست؟

زبان نشانه گذاری html (زبان نشانه گذاری ابرمتن) که مخفف واژه Hyper Text Markup Language می‌باشد یک نوع نشانه گذاری استاندارد، مقدماتی و البته اصولی برای ایجاد صفحات وبسایت و وب اپلیکیشن می‌باشد.
زبان html به نوعی پایه و اساس صفحات یک وبسایت بوده و تمامی المان ها، متن ها، لینک ها و … با استفاده از نشانه های  html در صفحه وب برای شما قرار گرفته است.

 

زبان نشانه گذاری html یا زبان برنامه نویسی؟

بسیاری از افراد تصور می‌کنند که html یک زبان برنامه نویسی است اما این موضوع کاملا غلط می‌باشد. چرا؟ برای پاسخ به این پرسش ما باید در مورد ساختار و ماهیت زبان برنامه نویسی با شما صحبت کنیم.

زبان های برنامه نویسی در اصل راه ارتباطی ما با سیستم های کامپیوتری می‌باشند. ما با استفاده از این زبان ها با یک سیستم ارتباط برقرار کرده و به آن (برای حل یک مسئله و …) دستوراتی می‌دهیم.شاید این موضوع مهم ترین شاخصه یک زبان برنامه نویسی می‌باشد اما زبان html این ویژگی را ندارد و صرفا یک زبان نشانه گذاری است.
حال ممکن است برای شما سوال پیش بیاید که زبان نشانه گذاری چیست؟
زبان های نشانه گذاری (زبان شبه برنامه نویسی) در اصل نوعی زبان توصیفی بوده که اطلاعات مختلف را با استفاده از نشانه گذاری های خاص با هم مرتبط می کند.

html چیست؟

 

html چه زمانی وارد دنیای کامپیوترها شد؟

چیزی که ما امروز تحت عنوان زبان نشانه گذاری ابرمتن می شناسیم اولین بار در سال ۱۹۹۱ و با تعریف ۱۸ عنصر اساسی و مهم به دنیای وب وارد شد. حدود ۵ سال بعد این نشانه ها تحت عنوان html 2.0 تکمیل و به شکل یک ساختار استاندارد معرفی شد. اما این پایان بازی نبود و تا الان که شما در حال مطالعه این مقاله هستید ۵ ورژن دیگر از زبان نشانه گذاری html در دسترس توسعه دهندگان قرار گرفت که مهم ترین و البته جامع ترین این تحول ها مربوط به html5  بود که در سال ۲۰۱۲ ارائه شد.

نکته: لازم به ذکر است که آخرین نسخه html تحت عنوان xhtml5 در سال ۲۰۱۴ ارائه شد که به نقش موثری در بالابردن کیفیت تجربه کاربری کاربران ایفا کرد چراکه طراحی سایت به ساختار منظم و ایده آل خودش نزدیک شد و برخی مفاهیم قدیمی نیز به حاشیه رانده شد.

 

مزیت و معایب زبان html5

از ویژگی های بسیار مثبت html5 می توان به کدهای واضح و آسان، سهولت ایجاد فرم های جذاب تر که نیاز به جاوا اسکریپت را کاهش می‌دهد، سهولیت دسترسی به سایت ها، ذخیره سازی دقیق و البته آفلاین و … اشاره کرد.
و اما چند ایراد مهم زبان نشانه گذاری html به صورت کلی:

  • ضعیف بودن پشتیبانی از مرورگرهای قدیمی (که البته مشکل بسیار حاد و بزرگی نیست)
  • استاتیک بودن
  • وابستگی بالا به زبان های سمت سرور

تگ های html

 

html چطور کار می‌کند؟

زبان نشانه گذاری ابرمتن از یک سری برچسب یا تگ تشکیل شده است که می‌توانید با استفاده از آن، المان های مختلف یک وبسایت مثل عکس ها، لینک ها، عناوین، متن و … را با یک نظم خاص در کنار یکدیگر قرار دهد. در اصل ما اسکلت اصلی ساختمان وبسایت را با html پی ریزی و احداث می کنیم.

 

تگ های html

تگ یا همان برچسب در زبان نشانه گذاری html، عناصری هستند که با یک سری حروف و علائم کد گذاری شده و شما با صدا زدن (فراخوانی) هرکدام می توانید کاری که قصد آن را دارید، انجام دهید. تگ های html در اصل قواعد زمین بازی هستند، هرکدام مفهومی خاص داشته و به ما امکان ایجاد، تغییر و ساخت عناصر و همچنین صفحات مختلف یک وبسایت را می‌دهند.

لیست جامع تگ های html

در تمام این سال ها به یک باور مشترک بین برنامه نویسان و البته طراحان سایت پی بردم: ما برنامه نویس شدیم تا چیزی را حفظ نکنیم! البته که این موضوع به نظر کاملا درست است و یک برنامه نویس جز اسلوب کار نباید هیچ کد یا روش خاصی را حفظ کند (مگر اینکه با تکرار زیاد آن را فرا بگیرد)
برای شما هم که در شروع مسیر یادگیری طراحی و برنامه نویسی سایت هستید این موضوع صدق می‌کند. برای همین من در ادامه فایلی جامع از تگ های html را همراه توضیح شان در اختیار شما قرار می‌دهم. فقط به عنوان تمرین حتما این تگ ها را در یک IDE باهم ترکیب کرده و خروجی های مختلف را مشاهده کنید.

دانلود فایل pdf تگ های html 


مطالعه مقاله «۵ مورد از بهترین ویرایشگرهای متن در سال ۲۰۲۰ » به شما عزیزان توصیه می شود.


 

چطور کد html را اجرا کنیم؟

تمامی المان ها و عناصری که می خواهید در صفحه وبسایت خود به نمایش بگذارید به کمک تگ <> اجرا می‌شوند.
برای مثال در ادامه یک نمونه کد html را با هم مشاهده می‌کنیم؟

<!DOCTYPE html>
<html>
<body>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

برای اجرای این تکه کد کافی است آن را در یک IDE که به شما مقاله آن را معرفی کردم یا notpad سیستم خود، کپی کرده و با تغییر پسوند فایل به htm با html روی آن کلیک کنید و نتیجه را در مروگر خود مشاهده نمایید.

نکته: یک کد html کامل باید با تگ <DOCTYPE html!> آغاز شود بعد از آن، سند حتماً باید دارای تگ <html> </html> باشد و داخل این تگ، <body> </body> قرار می‌گیرد که محتوای صفحه را نمایش می‌دهد.

 

کلام آخر…

هرچه که شما در صفحات وب مشاهده می‌کنید به پشتوانه زبان نشانه گذاری ابر متن یا همان html ایجاد شده است البته آنچه که شما ایجاد می کنید باید رنگ به خود بگیرد و جذابیت های بصری نیز به آن اضافه شود که این موضوع به مبحث بعدی ما یعنی css و جاوااسکریپت مربوط می‌شود.
اگر به فکر یادگیری طراحی وب هستید، می خواهید وارد دنیای برنامه نویسی شوید و یا در حوزه سئو فعالیت می‌کنید و می خواهید یک گام از بقیه همکاران خود جلوتر باشید درک ساختار وبسایت و شروع یادگیری زبان html که بسیار ساده نیز می‌باشد، به شما عزیزان اکیدا توصیه می شود.
امیدوارم از مطالعه این مقاله لذت و استفاده کافی را برده باشید.

 

آیا این مطلب برای شما مفید بود؟

امتیازشو ثبت کنید

میانگین / 5. تعداد رای

اولین نفر شما امتیاز دهید

شاید به این مطالب نیز علاقه مند باشید.

طراحی سایت با پایتون

هرآنچه که باید از طراحی سایت با پایتون بدانید!

پایتون یک زبان برنامه نویسی سطح بالا، شی گرا و متن باز می باشد که توانسته برنامه نویسان زیادی را در به سرانجام رساندن پروژه های خود همراهی کند؛ پایتون…

آموزش CSS

راهنمای جامع CSS و نقش آن در طراحی سایت

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

سیستم مدیریت محتوا در طراحی وب

سیستم مدیریت محتوا یا CMS چیست؟ (راهنمای جامع)

اگر می خواهید بدون دانش تخصصی مربوط به کد نویسی برای ایجاد محتوا، مدیریت و ویرایش آن در وب سایتهای فروشگاهی مبتنی بر CMSها، وارد بازار کار شوید و یا…

No Comments

پیام بگذارید

آکادمی آمانج
مهارت آموزی جهت ورود به بازار کار

تاییدیه ها

تهران - امیرآباد، دانشکده فنی دانشگاه تهران، ساختمان مکانیک جدید واحد ۱۱۴

آیا این مطلب برای شما مفید بود؟

امتیازشو ثبت کنید

میانگین / 5. تعداد رای

اولین نفر شما امتیاز دهید

کد تخفیف نمیخوای؟

اگه میخوای کد تخفیف شرکت در دوره‌ها، وبینارهای رایگان، بهترین مقالات آکادمی آمانج رو از دست ندی ایمیلت رو این زیر وارد کن!
همین الان عضو شو
close-link
من اینجام