صفحه کاربری
آکادمی بنو
نویسنده: بهنام نوبخت
آموزش‌های جامع و کاربردی برنامه‌نویسی، طراحی سایت، توسعه اپلیکیشن موبایل و مهندسی نرم‌افزار؛ از مباحث پایه تا پیشرفته، همراه با آموزش‌های پروژه‌محور برای یادگیری اصولی و کسب مهارت‌های تخصصی.
مقالات
۸۹ مقاله
آشنایی با ساختار صفحات وب
برای شروع مسیر طراحی وب، ابتدا باید با ساختار کلی صفحات وب و فناوری‌هایی که در شکل‌گیری آن‌ها نقش دارند آشنا شویم. در این مطلب با مفهوم وب، صفحه وب، وب‌سایت و مرورگر آشنا می‌شویم و نقش HTML، CSS و JavaScript را در ساختار، ظاهر و رفتار صفحات بررسی می‌کنیم تا دیدی روشن و پایه‌ای نسبت به نحوه شکل‌گیری صفحات وب به دست آوریم.
مبانی HTML
HTML نقطه شروع یادگیری طراحی وب و یکی از مهم‌ترین فناوری‌ها برای ساخت صفحات اینترنتی است. با یادگیری مبانی HTML متوجه می‌شویم صفحات وب چگونه ساختاردهی می‌شوند، مرورگر چگونه کدهای HTML را پردازش می‌کند و تگ‌ها، عناصر و محتوای مختلف چگونه در کنار یکدیگر قرار می‌گیرند تا پایه‌ای محکم برای ادامه مسیر یادگیری طراحی وب ایجاد شود.
ساخت اولین صفحه HTML با Visual Studio Code
بعد از آشنایی با مبانی HTML، نوبت آن رسیده است که اولین صفحه وب خود را به صورت عملی ایجاد کنیم. برای نوشتن کدهای HTML به یک ویرایشگر کد نیاز داریم و Visual Studio Code یکی از ابزارهای محبوب و مناسب برای شروع طراحی وب است. در این آموزش قدم‌به‌قدم یاد می‌گیریم چگونه Visual Studio Code را آماده کنیم، یک پروژه ساده ایجاد کنیم، فایل index.html بسازیم، اولین کد HTML خود را بنویسیم و نتیجه را در مرورگر مشاهده کنیم.
ساختار و سینتکس صفحات HTML
در دو مقاله گذشته با مفهوم کلی وب و زبان HTML آشنا شدیم و یاد گرفتیم که HTML وظیفه ایجاد ساختار و سازمان‌دهی محتوای صفحات وب را بر عهده دارد. حالا که با کاربرد کلی HTML آشنا شده‌ایم، زمان آن رسیده است که کمی دقیق‌تر به ساختار کدهای HTML نگاه کنیم و ببینیم این کدها چگونه نوشته و در کنار یکدیگر قرار می‌گیرند. برای اینکه بتوانیم صفحات وب را به‌درستی ایجاد و در ادامه آن‌ها را با CSS و JavaScript توسعه دهیم، لازم است مفاهیمی مانند تگ (Tag)، عنصر (Element)، محتوا (Content) و ویژگی (Attribute) را به‌خوبی بشناسیم. همچنین باید بدانیم تگ‌های باز و بسته چه تفاوتی با یکدیگر دارند، عناصر چگونه می‌توانند داخل یکدیگر قرار بگیرند و ساختار کلی یک فایل HTML چگونه شکل می‌گیرد. در این مقاله این مفاهیم را از پایه و با مثال‌های ساده بررسی می‌کنیم تا بتوانید هنگام مشاهده یا نوشتن کد HTML، اجزای مختلف آن را به‌راحتی تشخیص دهید و درک درستی از نحوه ساخت صفحات وب به دست آورید.
تگ‌های متنی در HTML
در مقاله‌های قبلی با مفهوم HTML، تگ‌ها، عناصر و ساختار کلی صفحات HTML آشنا شدیم و یاد گرفتیم که چگونه اجزای مختلف یک صفحه وب در کنار یکدیگر قرار می‌گیرند. یکی از مهم‌ترین بخش‌های هر صفحه وب، محتوای متنی آن است؛ از عنوان اصلی و عنوان بخش‌ها گرفته تا پاراگراف‌ها، متن‌های مهم، تأکیدها و حتی قطعه‌های کوتاه کد. HTML برای هرکدام از این موارد تگ‌های مشخصی در اختیار ما قرار می‌دهد تا علاوه بر نمایش محتوا، نقش و ساختار آن نیز برای مرورگر و سایر ابزارها مشخص باشد. در این مقاله با مهم‌ترین تگ‌های متنی HTML مانند h1 تا h6 برای عنوان‌ها، p برای پاراگراف‌ها، br برای شکست خط، strong و em برای اهمیت و تأکید، و همچنین hr ، code و pre آشنا می‌شویم و با استفاده از مثال‌های ساده یاد می‌گیریم چگونه محتوای متنی یک صفحه وب را به شکل منظم و اصولی ساختاربندی کنیم.
لینک‌ها و مسیرها در HTML
در مقاله‌های قبلی با ساختار صفحات HTML و نحوه قرار دادن و سازمان‌دهی محتوای متنی در یک صفحه وب آشنا شدیم. اما صفحات یک وب‌سایت معمولاً به صورت جداگانه و بدون ارتباط با یکدیگر ساخته نمی‌شوند؛ بلکه با استفاده از لینک‌ها به هم متصل می‌شوند و کاربر می‌تواند از یک صفحه به صفحه دیگر، یک سایت به سایت دیگر یا حتی به بخش مشخصی از همان صفحه منتقل شود. برای ایجاد این ارتباط‌ها در HTML از تگ <a> و Attribute مهم href استفاده می‌کنیم و برای مشخص کردن مقصد لینک نیز باید با مفهوم مسیرها و ساختار پوشه‌ها آشنا باشیم. در این مقاله ابتدا با نحوه ایجاد لینک و کاربرد href آشنا می‌شویم و سپس مسیرهای نسبی و مطلق، لینک‌دهی بین صفحات یک سایت، باز کردن لینک در تب جدید، ایجاد لینک به بخش‌های مختلف یک صفحه و همچنین لینک‌های ایمیل و تماس تلفنی را با مثال‌های ساده بررسی می‌کنیم تا بتوانیم صفحات مختلف یک وب‌سایت را به شکل صحیح و اصولی به یکدیگر متصل کنیم.
تصاویر و محتوای چندرسانه‌ای در HTML
یک صفحه وب فقط از متن و لینک تشکیل نمی‌شود؛ تصاویر، فایل‌های صوتی و ویدئو نیز بخش مهمی از محتوای بسیاری از وب‌سایت‌ها را تشکیل می‌دهند. از تصاویر محصولات و مقالات گرفته تا لوگوها، بنرها، فایل‌های صوتی و ویدئوهای آموزشی، همه این محتواها می‌توانند نقش مهمی در ارائه بهتر اطلاعات و ایجاد تجربه کاربری مناسب داشته باشند. HTML عناصر مختلفی را برای قرار دادن محتوای چندرسانه‌ای در صفحات وب در اختیار ما قرار می‌دهد؛ از جمله تگ <img> برای نمایش تصاویر، <audio> برای پخش فایل‌های صوتی و <video> برای نمایش ویدئو. در این مقاله ابتدا نحوه قرار دادن تصاویر در صفحه و کاربرد Attributeهای مهمی مانند src و alt را یاد می‌گیریم و سپس با مسیر فایل‌ها و فرمت‌های رایج تصاویر آشنا می‌شویم. در ادامه نیز به صورت مقدماتی نحوه اضافه کردن فایل‌های صوتی و ویدئویی را بررسی می‌کنیم تا بتوانیم صفحات HTML خود را با محتوای متنوع‌تر و کاربردی‌تری ایجاد کنیم.
لیست‌ها و جدول‌ها در HTML
نمایش اطلاعات در یک صفحه وب همیشه به معنی قرار دادن چند پاراگراف متن پشت سر هم نیست. بسیاری از اطلاعات زمانی خواناتر و قابل‌درک‌تر هستند که به صورت لیست یا جدول سازمان‌دهی شوند؛ برای مثال، فهرست خدمات و ویژگی‌های یک محصول را می‌توان با لیست نمایش داد و اطلاعاتی مانند قیمت، وضعیت، مشخصات محصولات یا برنامه‌های زمانی را می‌توان در قالب جدول ارائه کرد. HTML برای هرکدام از این کاربردها عناصر مشخصی در اختیار ما قرار می‌دهد.
فرم‌ها و کنترل‌های ورودی در HTML
یک صفحه وب علاوه بر نمایش اطلاعات، باید بتواند با کاربر نیز تعامل داشته باشد. بسیاری از فعالیت‌های روزمره در وب، مانند ثبت‌نام، ورود به حساب کاربری، جستجو، ارسال پیام، ثبت سفارش و دریافت اطلاعات، به ورود یا انتخاب داده توسط کاربر نیاز دارند. HTML برای ایجاد چنین بخش‌هایی مجموعه‌ای از عناصر و کنترل‌های فرم را در اختیار ما قرار می‌دهد.
نگاهی عمیق‌تر به Attributes (ویژگی‌ها) در HTML
تگ‌های HTML ساختار اصلی صفحات وب را ایجاد می‌کنند، اما در بسیاری از مواقع نام تگ به‌تنهایی برای مشخص کردن اطلاعات و رفتار موردنیاز یک عنصر کافی نیست. برای مثال، یک لینک باید مقصد مشخصی داشته باشد، یک تصویر باید مسیر فایل و متن جایگزین داشته باشد و یک فیلد فرم ممکن است اجباری، غیرفعال یا فقط خواندنی باشد. HTML برای مشخص کردن چنین اطلاعاتی از Attribute یا ویژگی‌ها استفاده می‌کند. Attributeها اطلاعات اضافی درباره عناصر HTML هستند و همواره در تگ شروع نوشته می‌شوند.