چندین عنصر وجود دارند که برای نشانه‌گذاری کد با استفاده از HTML استفاده می‌شوند.

• <code> – برای نشانه‌گذاری بخش‌های معمولی کد رایانه استفاده می‌شود.
• <pre> – برای حفظ فاصله‌های خالی (عموماً در بلوک‌های کد) استفاده می‌شود. اگر از تورفتگی یا فاصله‌های زیاد در متن کد خود استفاده کرده باشید، مرورگرها آن‌ها را نادیده می‌گیرند و در صفحه رندر شده آن‌ها را نمی‌توانید ببینید. اما اگر متن را درون تگ‌های </pre><pre> قرار دهید، فاصله‌های خالی دقیقاً همان طور که در ویرایشگر متن مشاهده می‌کنید، در صفحه وب رندر خواهند شد...

HTML عنصری برای نشانه‌گذاری جزییات تماس نیز دارد که <address> است. این عنصر به سادگی پیرامون جزییات تماس شما قرار می‌گیرد. برای نمونه:

یک نکته که باید به خاطر داشته باشید این است که عنصر <address> به منظور نشانه‌گذاری جزییات تماس فردی که سند HTML را نوشته است طراحی شده و نه هر آدرس دیگری. بنابراین مطلب فوق در صورتی مناسب خواهد بود که Chris نویسنده سند نشانه‌گذاری باشد. دقت کنید که مواردی مانند زیر نیز مناسب هستند:

عنصر نسبتاً رایج دیگری که هنگام بررسی وب با آن برخورد می‌کنیم <abbr> است که برای نمایش اختصارها یا مترادف‌ها استفاده می‌شود و بسط کامل اصطلاحی را شامل می‌شود. به مثال‌های زیر توجه کنید:...

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

در مطلب قبلی مربوط به مبانی کار با روش نشانه‌گذاری متن با لیست‌های ابتدایی آشنا شدیم؛ اما به نوع سوم فهرست‌ها که در برخی موارد با آن مواجه می‌شدیم نپرداختیم. این نوع لیست در واقع لیست‌های توصیفی هستند. هدف از این لیست‌ها نشانه‌گذاری مجموعه‌ای از آیتم‌ها و توضیح مربوطه‌شان است به طوری که گویا اصطلاح و تعریف و یا سؤال و پاسخ هستند. در ادامه مثالی از یک مجموعه اصطلاح‌ها و تعاریف را ملاحظه می‌کنید:...

اینک که محتوای خود را برای یک صفحه وب ساده برنامه‌ریزی کردیم، نوبت آن رسیده است که در گام منطقی بعدی تلاش کنیم تا درک کنیم کدام محتوا را می‌خواهیم در همه صفحه‌های وب‌سایت داشته باشیم، به چه صفحه‌هایی نیاز داریم و این صفحه‌ها چگونه باید با لینک‌هایی به هم اتصال یابند تا بهترین تجربه کاربری به دست آید. این کار به نام «معماری اطلاعات» (Information Architecture) شناخته می‌شود. در یک وب‌سایت بزرگ و پیچیده، برنامه‌ریزی زیادی برای این فرایند مورد نیاز است؛ اما در یک وب‌سایت ساده که چند صفحه معدود دارد، این کار نسبتاً ساده و سرگرم‌کننده خواهد بود:...

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

تصویر وب‌سایت مثالی که در تصویر فوق ملاحظه کردید، چندان زیبا نیست؛ اما برای نمایش نمونه‌ای از طرح‌بندی یک وب‌سایت معمولی کاملاً مناسب است. برخی وب‌سایت‌ها، ستون‌های بیشتری دارند، برخی دیگر بسیار پیچیده‌تر هستند؛ اما ایده کلی همین است. با استفاده از CSS مناسب می‌توان تقریباً از هر عنصری برای بخش‌های مختلف استفاده کرد و ظاهری که مورد نظر است را ایجاد کرد؛ اما همان طور که قبلاً اشاره کردیم باید به موارد مفهومی یا معناشناختی نیز توجه کنیم و از عناصر صحیح برای کارهای مناسب استفاده کنیم.

فوتر یک نوار در انتهای صفحه‌های وب‌سایت است که عموماً شامل یک نوشته، اعلان کپی‌رایت یا اطلاعات تماس است. این همان بخشی است که اطلاعات مشترک (مانند هدر) در آن قرار می‌گیرد؛ اما این اطلاعات معمولاً حیاتی نیستند و یا در وهله دوم در وب‌سایت عرضه می‌شوند. فوتر همچنین در برخی موارد به منظور ارتقای سئو مورد استفاده قرار می‌گیرد و لینک‌هایی برای دسترسی سریع‌تر به محتوای محبوب در آن عرضه می‌شود.

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

این بخش شامل یک ناحیه بزرگ در مرکز صفحه است که غالباً محتوای منحصر به فردی که از سوی یک صفحه وب ارائه می‌شود در آن قرار دارد. برای مثال ویدئویی که قرار است در یک صفحه تماشا کنیم یا متنی که قرار است مطالعه شود و یا حتی نقشه‌ای که ارائه می‌شود و همچنین عناوین خبری در این بخش قرار می‌گیرند. محتوای اصلی یکی از بخش‌های وب‌سایت است که قطعاً باید در میان صفحه‌های مختلف متفاوت باشد.

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

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

در بخش‌های قبل با متغیرهای قواعد CSS آشنا شدیم. اما اگر لازم باشد از یک گروه از قواعد با هم استفاده کنیم چه کار باید بکنیم؟ Sass یک ویژگی به نام Mixin دارد که امکان این را فراهم ساخته است...

CSS استاندارد از تودرتوسازی پشتیبانی نمی‌کند. ما نمی‌توانیم یک کلاس را درون کلاس دیگر بنویسیم. همان طور که پروژه بزرگ‌تر می‌شود، این امر موجب مشکل خوانایی می‌شود و ساختار چندان جالب به نظر نمی‌رسد...

Sass یک راه‌حل به نام «متغیر» را معرفی کرده است. ما همانند دیگر زبان‌های برنامه‌نویسی می‌توانیم از متغیرها برای ذخیره‌سازی مقادیر و استفاده مجدد از آن‌ها استفاده کنیم.

کلاس‌های مختلف CSS می‌توانند شامل قاعده یا قواعد مشابهی در پروژه باشند. برای نمونه ما 20 کادر روی صفحه وب خود داریم که رنگ‌های پس‌زمینه متفاوتی دارند:

در ادامه مشتری ما نظر خود را تغییر می‌دهد و کادرهای بزرگ‌تری می‌خواهد. بنابراین باید همه مشخصه‌های width و height را یک به یک افزایش دهیم. اگر 50 کلاس در پروژه وجود داشته باشند این وضعیت می‌تواند به یک کابوس تبدیل شود. همان طور که پیش‌تر اشاره کردیم این یک نمونه از تلاش زیاد برای تغییرات اندک است.

تفاوت بین Sass و SCSS جزو سؤالاتی است که به طور فراوان پرسیده می‌شود. هر دو آن‌ها در عمل Sass هستند و تنها ساختارشان متفاوت است. SCSS اساساً نسخه جدیدتری از Sass نسخه 3.0 محسوب می‌شود.

Sass یکی از پراستفاده‌ترین پیش پردازشگرهای CSS محسوب می‌شود. Sass ویژگی‌های زیادی دارد که به توسعه‌دهندگان کمک می‌کند تا کد بهتر و تمیزتری برای CSS بنویسند. توضیحات بیشتر در این خصوص را می‌توانید در وب‌سایت رسمی آن (+) و ریپازیتوری گیت‌هاب پروژه (+) ملاحظه کنید.

پیش پردازشگر CSS یک برنامه یا ابزار است که ساختار خاص خود را دارد و در ادامه به کد CSS استاندارد کامپایل می‌شود. یک پیش پردازشگر ساختار خاص خود را دارد تا به توسعه‌دهندگان برای نوشتن آسان‌تر و تمیزتر کد CSS کمک کند. در ادامه این کد به فایل جداگانه‌ای به صورت CSS استاندارد ترجمه می‌شود، چون مرورگرها ساختار آن را درک نمی‌کنند.

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

تا پیش از CSS3 برش دادن تصاویر نیز همانند فوتر چسبنده کار دشواری بود. اینک دو مشخصه به نام‌های object-fit و object-position در اختیار داریم که موجب شده کار برش دادن آسان شود و هنگامی که با همدیگر استفاده شوند، امکان تغییر ابعاد یک تصویر بدون تأثیر روی نسبت ابعاد را فراهم می‌سازند...

اگر تاکنون از فتوشاپ استفاده کرده باشید، احتمالاً می‌دانید که حالت‌های مختلف ترکیب (Blend) آن تا چه حد قدرتمند است و می‌توان جلوه‌های جالبی با آن خلق کرد. اما آیا می‌دانید که بسیاری از جلوه‌های ترکیب تصاویر فتوشاپ در CSS نیز ممکن هستند؟...

این جلوه چشم‌نواز محبوبیت فزاینده‌ای در وب یافته است و از آن می‌توان برای حیات بخشیدن به هر صفحه در زمان اسکرول شدن از سوی کاربر استفاده کرد. با این که تصاویر نرمال یک صفحه با اسکرول شدن از سوی کاربر حرکت می‌کنند؛ اما تصاویر Parallax به نظر ثابت می‌آیند و تنها پنجره‌ای که آن‌ها را از میان آن می‌بینیم، حرکت می‌کند...

روش‌های مفید زیادی برای بهره‌مندی از مزیت مشخصه content وجود دارد. از آنجا که کاراکتر (/) و دیگر نمادها برای جداسازی مسیرهای ناوبری به صورت نمادین استفاده می‌شوند، تعریف کردن آن‌ها در CSS کمک زیادی به معنابخشی کد ما می‌کند. مانند اغلب مثال‌های دیگر این نوشته، در این جلوه نیز از شبه کلاس استفاده کرده‌ایم که امکان استفاده آن تنها در CSS3 وجود دارد...

برای ایجاد «نقطه‌های گلوله‌ای» (Bullet points) سفارشی برای یک لیست نامرتب می‌توانید از مشخصه content به همراه شبه عنصر ::before استفاده کنید. در CSS زیر ما از دو کلاس complete. و incomplete. برای ایجاد تمایز بین دو نوع مختلف از نقاط گلوله‌ای استفاده کرده‌ایم...

اگر قصد دارید روش سریعی برای اعمال پوسته «حالت شب» در وب‌سایت خود طراحی کنید، می‌توانید از فیلترهای invert و hue-rotate استفاده کنید.

()filter: invert روی مقیاسی از 0 تا 1 عمل می‌کند که 1 سفید را به سیاه تبدیل می‌کند. ()filter: hue-rotate محتوای رنگی عناصر ما را به ترتیبی تغییر می‌دهد که کمابیش همان سطح از جداسازی از همدیگر را حفظ کنند. مقادیر آن از 0deg تا 360deg متغیر است...

جلوه zoom-on-hover روشی عالی برای جلب توجه به تصاویر قابل کلیک است و زمانی که کاربر ماوس خود را روی یک تصویر می‌برد، تصویر کمی بزرگ‌تر می‌شود؛ اما ابعاد آن حفظ می‌شود. برای رسیدن به این جلوه باید یک div پوششی داشته باشیم که پیرامون تگ img نرمال ما در HTML قرار گیرد.

فوتر چسبنده یا Sticky Footer یکی از موارد بسیار رایج است که ممکن است پیاده‌سازی آن برای افراد مبتدی دشوار باشد. در اغلب پروژه‌ها به یک فوتر نیاز داریم که صرف نظر از محتوای صفحه در انتهای صفحه همواره بر جای خود باقی بماند. اگر محتوای صفحه از حوزه دید خارج شود، فوتر باید سازگار شود.

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

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

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

هرچند با استفاده از وردپرس می‌توانید انواع و اقسام سایت‌ها را راه‌اندازی کنید، اما در نهایت برای شخصی‌سازی سایت خود و همچنین افزودن امکانات جانبی احتیاج دارید تا دانش نسبتا خوبی از کدنویسی داشته باشید، در غیر این‌صورت تنها می‌توانید یک سایت معمولی برای خود راه‌اندازی کنید، پس اگر تنها به داشتن یک وبسایت کوچک و جمع‌و‌جور برای خود بسنده می‌کنید خواهید توانست در کمتر از ۵ دقیقه سایت خود را راه‌اندازی کنید، اما اگر قصد دارید یک سایت حرفه‌ای داشته باشید و یا طراحی سایت را به عنوان شغل خود انتخاب کنید لازم است دست‌به‌کد شده و مراحل ۱ تا ۵ را یاد بگیرید!

هنگامی که قصد مشاهده‌ی سایتی را داشته باشید تنها کافیست آدرس آن را در مرورگرتان تایپ کنید، این آدرس را دامنه (Domain) می‌نامند، به عنوان مثال Google.com دامنه‌ی وبسایت گوگل است و Hamyarit.comدامنه‌ی وبسایت همیار آی‌تی، در حقیقت دامنه هویت و نشان تجاری یک وبسایت است، پس بهتر است در انتخاب دامنه‌ی سایت خود دقت کرده و یک نام مناسب برای سایتتان انتخاب کنید...

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

شرکت‌های ارائه‌دهنده‌ی بسیار زیادی برای خرید هاست در ایران فعالیت می‌کنند، به عنوان مثال یکی از این شرکت‌ها که خدمات و پشتیابی خوبی در این زمینه ارائه می‌دهد شرکت نت‌افراز می‌‌باشد، می‌توانید هاست مورد نیاز وبسایتتان را از این شرکت تهیه کنید.

تا چند سال پیش تلفن‌های هوشمند و تبلت‌ها فراگیر نشده بودند و افراد تنها با استفاده از کامپیوترهایشان به گشت و گذار در اینترنت می‌پرداختند، اما امروزه حجم عظیمی از بازدیدکننگان یک وبسایت از تلفن‌های همراهشان به مرور اینترنت می‌پردازند...

کلمه‌ی SEO مخفف عبارت Search Engine Optimization به معنای بهینه‌سازی سایت برای موتورهای جستجو است، همه‌ی ما برای یافتن عبارات مورد نظر خود از موتورهای جستجویی مانند گوگل یا بینگ استفاده می‌کنیم، حقیقت ماجرا این‌است که موتورهای جستجو تنها یک ربات هستند نه یک انسان، بنابراین باید با استفاده از اصول خاصی محتوای وبسایتمان را برای آن‌ها قابل فهم کنیم و سعی کنیم با استفاده از تکنیک‌های مختلف در صدر نتایج جستجو قرار بگیریم.

شما به عنوان طراح و برنامه‌نویس یک وبسایت باید به گونه‌ای از تگ‌های HTML و سایر موارد استفاده کنید که محتوای سایت برای موتورهای جستجو قابل فهم باشد، در صورت تمایل می‌توانید با یک جستجوی ساده اطلاعات بیشتری در این مورد به‌دست آورید (عبارت On-Page SEO را جستجو کنید)

اصولا به وبسایت‌هایی که احتیاجی به تغییرات زیادی ندارند و معمولا تمام المان‌های سازنده‌ی آن‌ها ثابت بوده و مدام به‌روزرسانی نمی‌شود یک وبسایت استاتیک (Static) یا ایستا می‌گوییم.

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

به زبان ساده مفهوم کتابخانه نیز تا حدودی شبیه به فریم‌ورک است. (چندین کتابخانه در کنار هم می‌توانند یک فریم‌ورک را ایجاد کنند)

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

فریم‌ورک (Framework) یا “چهارچوب” در اصطلاح مجموعه‌ای آماده از کلاس‌ها، کدها و توابع برنامه‌نویسی است که در قالب یک پکیج ارائه می‌شود و در طراحی پروژه‌های نرم‌افزاری به کمک برنامه‌نویسان می‌آید.

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

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

سایت‌های امروزی از دو قسمت فرانت‌اند (Front end) و بک‌اند (Back end) تشکیل شده‌اند، بخشی از وبسایت که توسط کاربر قابل مشاهده بوده و در مرورگر او نمایش داده می‌شود فرانت‌اند نام داشته و بخشی که مربوط به پردازش‌های سمت سرور می‌شود را بک‌اند می‌نامند...