Sorry, no posts matched your criteria.

این سایت در ستاد ساماندهی ثبت شده و تابع قوانین جمهوری اسلامی میباشد

آموزش HTML، آشنایی با مفاهیم طراحی صفحات وب

۱۰ دی ۱۳۹۶
بدون نظر

اگر سروکارتان با اینترنت و وب باشد حتما تا به حال با کلمه HTML برخورد داشته‌اید، این واژه مخفف Hyper Text Markup Language یا زبان نشانه‌گذاری هست میتوان گفت تمام المان‌هایی که در صفحه مرورگر خود میبینید، به کمک اچ تی ام ال به وجود آمده‌اند!

HTML یک زبان نشانه گذاری بوده و یادگیری آن ساده و بسیار شیرین هست (آن را با زبان برنامه‌نویسی اشتباه نگیرید) در مجموعه آموزش‌های اچ تی ام ال پاس کن ! ابتدا با مفاهیم این زبان آشنا شده و در ادامه یاد می‌گیریم که چگونه می‌توان یک صفحه ساده وب را طراحی و اجرا کرد، در پایان شما می‌توانید صفحه وب دلخواه خود را طراحی کرده و از آن استفاده کنید!

 

اچ تی ام ال , آموزش HTML، آشنایی با مفاهیم طراحی صفحات وب, پاس کن !

زبان برنامه‌نویسی صفحات وب چیست؟

در طراحی وب معمولا از دو زبان اصلی برای ایجاد صفحات استفاده می‌شود:

  1. زبان‌های نشانه‌گذاری (FrontEnd) که توسط کاربر قابل مشاهده بوده و در مرورگر پردازش و اجرا می‌شوند، زبان‌های HTML, CSS, JavaScritp جزو زبان‌های فرانت‌اِند (کلاینت ساید) می‌باشند.
  2. زبان‌های برنامه‌نویسی (BackEnd) که توسط کاربر قابل مشاهد‌ه نیستند و در سمت سرور پردازش و اجرا می‌شوند، زبان‌های PHP,‌. NET, Node JS جزو زبان‌های بک‌اِند (سرور ساید) می‌باشند.

برای درک بهتر این مفهوم یک فرم ثبت‌نام در سایت را در نظر بگیرید، تمام فیلد‌هایی که شما قادر به مشاهده‌ی آن‌ها هستید با زبان‌های FrontEnd (کلاینت) نوشته شده‌اند، سایر پردازش‌های مورد نیاز مثل ثبت اطلاعات در سرور ذخیره اطلاعات شما در بانک اطلاعاتی توسط زبان‌های BackEnd (سمت سرور) پردازش و اجرا می‌شوند.

در این سری از آموزش‌های پاس کن ! با HTML و CSS آشنا می‌شویم و می‌توانیم یک صفحه وب را طراحی و اجرا کنیم.

چگونه یک صفحه وب را طراحی کنیم؟

ایجاد یک صفحه وب از آنچه که فکرش را می‌کنید بسیار آسان‌تر هست، شما حتی با استفاده از Notepad ویندوزتان نیز می‌توانید یک سند HTML ایجاد کنید، اما برای راحتی کار به شما نرم‌افزار رایگان Notepad++ را پیشنهاد می‌کنیم، شما می‌توانید کد‌های مورد نظر را در نوت‌پد ویندوز نیز تایپ و اجرا کنید ولی برای راحتی کار و فهم بهتر کدها توصیه می‌کنیم از نرم‌افزار نوت پد پلاس پلاس استفاده کنید.

از کجا شروع کنیم؟

  1. با مراجعه به منوی استارت یا جستجو برنامه نوت‌پد را پیدا کرده و آن را باز کنید، کدهای HTML را در این صفحه خواهیم نوشت.
  2. حال باید فایل خود را ذخیره کنیم، در منوی بالایی نوت‌پد بر روی گزینه File کلیک کرده و گزینه‌ی Save As… را انتخاب کنید، حال یک نام دلخواه برای فایلتان انتخاب کرده و حتما پسوند html. را به انتهای نام پرونده اضافه کنید (مثل: hamyarit.html).
  3. در بخش پایین نوت‌پد و در کنار گزینه‌ی Save یک کادر بازشونده با عنوان Encoding وجود دارد، بروی آن کلیک کرده و گزینه‌ی UTF-8 را انتخاب کنید.
  4. در نهایت فایلتان را در محل دلخواه (مثلا دسکتاپ) ذخیره کنید، با کلیک بر روی فایل ذخیره شده و بازکردن آن مشاهده می‌کنید که صفحه مرورگر باز خواهد شد. (البته چون هنوز کدی ننوشته‌ایم، صفحه خالی را مشاهده می‌کنید)

تگ HTML چیست؟

قطعه کد زیر را مشاهده‌ کنید:

برای نوشتن کدها از یک تگ بازکننده به صورت <…> و از تگ تمام‌کننده به صورت<…/> استفاده می‌کنیم و محتوای مورد نظر را در میان دو تگ بازکننده (Opening Tag) و تمام‌کننده (Closing Tag) قرار می‌دهیم.

همانطور که مشاهده می‌کنید کلمه‌ی کلیدی tag در میان دو علامت <> نوشته شده هست، برای نوشتن کد اچ تی ام ال باید کلمات کلیدی را درمیان چنین علامتی بنویسیم، چند نمونه از تگ‌های اچ تی ام ال را در زیر مشاهده می‌کنید: (در ادامه با کاربرد هر کدام از این تگ‌ها آشنا خواهیم شد، در حال حاضر قصد ما تنها آشنایی با نحوه‌ی نگارش تگ‌ها هست)

با دقت در کدهای بالا در می‌یابید که قالب کلی تگ‌های اچ تی ام ال به صورت زیر هست:
<علامت اسلش و تکرار نام تگ> … <نام تگ>

شروع کدنویسی
برای شروع وارد نوت‌پد شوید و عبارت:

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

پس از تگ html شما باید تگ هِد (head) را به سند خود اضافه کنید.

در میان تگ head عبارات مورد نیاز برای اجرای صحیح صفحه وب قرار می‌گیرند، این عبارات توسط کاربر به طور مستقیم قابل مشاهده نیستند ولی نقش مهمی را در ایجاد صفحه‌ی وب ایفا می‌کنند، فعلا عبارات زیر را بین تگ هِد خود اضافه کنید.

پس از تگ head نوبت به تگ body می‌رسد، این تگ دربردارنده‌ی اجزای قابل مشاهده‌ی صفحه می‌باشد:

حال قالب اصلی کدهای شما باید شکل زیر را به خود گرفته باشد:

قالب کلی یک صفحه‌ی اچ تی ام ال به این صورت هست، تمام عباراتی که بین تگ body بنویسید در صفحه نمایش داده خواهد شد (شامل پاراگراف‌ها، تصاویر، لینک‌ها و…)

توصیه‌ی پاس کن !: سعی کنید کدها را کپی نکرده و خودتان آن‌ها را تایپ کنید، با این کار مهارت کدنویسی شما تقویت شده و بهتر با زبان اچ تی ام ال آشنا خواهید شد.

در آموزش‌های بعدی با هرکدام از المان‌های مورد نیاز در یک صفحه‌ی وب و نحوه‌ی استفاده از آن‌ها آشنا خواهیم شد.

در پایان این آموزش شما باید مهارت‌های زیر را کسب کرده باشید:

  • با مفهوم اچ تی ام ال آشنا شده باشید.
  • بدانید چگونه باید کدهای اچ تی ام ال را بنویسید.
  • با مفهوم تگ آشنا شده باشید.
  • نحوه نگارش تگ‌های اچ تی ام ال را بدانید و قالب کلی آن‌ها را بشناسید.

 

سخنی با شما دوست عزیز: تمام آموزش‌های پاس کن ! به صورت رایگان برای شما منتشر می‌شود و رایگان خواهد ماند، همچنین برای راحتی شما هیچ‌گونه تبلیغات مزاحمی در سایت درج نخواهیم کرد، اما با توجه به افزایش حجم مطالب و تعداد کاربران، برای تامین هزینه‌های سرور (Server) و ادامه‌ی فعالیت سایت به حمایت‌های شما نیازمندیم، اگر این آموزش برای شما مفید بود و از مطالعه‌ی آن لذت بردید، میتوانید با مبلغ ناچیزی (حتی ۱۰۰۰ تومان) از ما حمایت کرده و با این کار ارزشمند خود ما را در ادامه‌ی فعالیت سایت یاری دهید…

تمامی حقوق مادی و معنوی برای پاس کن ! محفوظ میباشد.

طراحی و بهینه سازی : هاست دانلود ایران | اورداپ سرور