نکات کلیدی
1. HTML و CSS پایه‌های طراحی وب هستند
تمام وب‌سایت‌ها از HTML و CSS استفاده می‌کنند، اما سیستم‌های مدیریت محتوا، نرم‌افزارهای وبلاگ‌نویسی و پلتفرم‌های تجارت الکترونیک معمولاً چند فناوری دیگر را نیز به این ترکیب اضافه می‌کنند.
فناوری‌های ضروری. HTML (زبان نشانه‌گذاری ابرمتن) ساختار و محتوای صفحات وب را فراهم می‌کند، در حالی که CSS (برگه‌های سبک آبشاری) کنترل ارائه بصری آن‌ها را بر عهده دارد. این دو زبان سنگ بنای توسعه وب هستند، چه شما سایتی را از ابتدا بسازید و چه از یک سیستم مدیریت محتوا (CMS) استفاده کنید.
فراتر از اصول. در حالی که وب‌سایت‌های بزرگ‌تر ممکن است فناوری‌های اضافی مانند JavaScript، PHP یا پایگاه‌های داده را به کار ببرند، درک صحیح HTML و CSS برای هر کسی که با وب کار می‌کند، حیاتی است. طراحان می‌توانند سایت‌های جذاب‌تر و کاربرپسندتری ایجاد کنند، ویرایشگران وب‌سایت می‌توانند محتوای بهتری تولید کنند، بازاریابان می‌توانند با مخاطبان خود به طور مؤثرتری ارتباط برقرار کنند و مدیران می‌توانند سایت‌های بهتری سفارش دهند و از تیم‌های خود بهترین بهره را ببرند.
کنترل توانمندساز. تسلط بر HTML و CSS به شما این امکان را می‌دهد که کنترل ظاهری وب‌سایت خود را در دست بگیرید، صرف‌نظر از پلتفرمی که استفاده می‌کنید. چه در حال ویرایش یک الگو باشید و چه در حال ساخت یک طراحی سفارشی، این مهارت‌ها برای ایجاد یک حضور آنلاین حرفه‌ای و جذاب ضروری هستند.
2. ساختار صفحات وب با عناصر HTML
برای توصیف ساختار یک صفحه وب، ما کدی به کلمات مورد نظر خود اضافه می‌کنیم تا در صفحه ظاهر شوند.
توصیف محتوا. HTML از عناصر استفاده می‌کند که با تگ‌هایی در براکت‌های زاویه‌ای مشخص می‌شوند (مانند <h1>, <p>)، تا بخش‌های مختلف یک صفحه وب را تعریف کند. این عناصر به مرورگر می‌گویند که چگونه محتوا را نمایش دهد، مانند عناوین، پاراگراف‌ها، لیست‌ها و تصاویر.
عناصر رایج HTML:
<html>: عنصر ریشه که کل سند HTML را در بر می‌گیرد<head>: شامل متاداده درباره صفحه، مانند عنوان<body>: شامل محتوای قابل مشاهده صفحه<h1>تا<h6>: تعریف‌کننده عناوین در سطوح مختلف<p>: نمایانگر یک پاراگراف متنی<a>: ایجاد لینک‌های هایپر به صفحات یا منابع دیگر<img>: درج تصاویر در صفحه
ساختار معنایی. استفاده از عناصر HTML مناسب نه تنها محتوا را ساختار می‌دهد بلکه معنای معنایی نیز فراهم می‌کند و درک صفحه را برای موتورهای جستجو و فناوری‌های کمکی آسان‌تر می‌سازد. این برای دسترسی و سئو حیاتی است.
3. قوانین CSS کنترل سبک و چیدمان
این بخش را با فصلی آغاز می‌کنیم که توضیح می‌دهد چگونه CSS از قوانین استفاده می‌کند تا به شما امکان کنترل سبک و چیدمان صفحات وب را بدهد.
تفکیک نگرانی‌ها. CSS به شما این امکان را می‌دهد که ارائه صفحات وب خود را از محتوا و ساختار آن‌ها جدا کنید. این باعث می‌شود کد شما منظم‌تر، قابل نگهداری‌تر و قابل استفاده مجدد باشد.
قوانین CSS:
- انتخاب‌گر: مشخص می‌کند که قانون به کدام عنصر(ها) HTML اعمال می‌شود (مانند
p,h1,.my-class) - اعلامیه: شامل یک یا چند ویژگی و مقادیر آن‌ها است که با یک دو نقطه جدا می‌شوند (مانند
color: blue;,font-size: 16px;) - ویژگی‌ها: جنبه‌های مختلف ظاهر عنصر را کنترل می‌کنند، مانند رنگ، فونت، اندازه، حاشیه و فاصله
- مقادیر: تنظیمات ویژگی‌های انتخاب شده را مشخص می‌کنند (مانند
blue,16px,10px)
برگه‌های سبک خارجی. بهترین روش این است که قوانین CSS را در برگه‌های سبک خارجی (فایل‌هایی با پسوند .css) ذخیره کنید و آن‌ها را به صفحات HTML خود با استفاده از عنصر <link> متصل کنید. این به شما این امکان را می‌دهد که همان سبک‌ها را به چندین صفحه اعمال کنید و نگهداری یک ظاهر و احساس یکسان در سراسر وب‌سایت خود را آسان‌تر کنید.
4. لینک‌ها صفحات و منابع را متصل می‌کنند
لینک‌ها ویژگی تعریف‌کننده وب هستند زیرا به شما این امکان را می‌دهند که از یک صفحه وب به صفحه دیگر بروید — که ایده مرور یا جستجو را ممکن می‌سازد.
امکان‌پذیر کردن ناوبری. لینک‌ها که با استفاده از عنصر <a> ایجاد می‌شوند، پایه‌گذار ناوبری وب هستند. آن‌ها به کاربران این امکان را می‌دهند که به‌طور یکپارچه بین صفحات مختلف وب‌سایت شما و منابع خارجی در وب حرکت کنند.
انواع لینک‌ها:
- لینک‌های داخلی: صفحات مختلف را در همان وب‌سایت متصل می‌کنند و از URLهای نسبی استفاده می‌کنند.
- لینک‌های خارجی: به صفحات وب‌سایت‌های دیگر متصل می‌شوند و از URLهای مطلق استفاده می‌کنند.
- لینک‌های ایمیل: برنامه ایمیل کاربر را باز کرده و یک پیام جدید به یک آدرس ایمیل مشخص می‌فرستد.
- لینک‌های لنگر: به بخش‌های خاصی در همان صفحه متصل می‌شوند و از ویژگی
idو نماد#استفاده می‌کنند.
متن لینک واضح. از متن لینک توصیفی استفاده کنید که به وضوح نشان دهد کاربر با کلیک بر روی لینک به کجا خواهد رفت. از عبارات عمومی مانند "اینجا کلیک کنید" خودداری کنید.
5. تصاویر صفحات وب را بهبود می‌بخشند
یک تصویر می‌تواند هزار کلمه بگوید و تصاویر عالی کمک می‌کنند تا تفاوت بین یک سایت با ظاهر متوسط و یک سایت واقعاً جذاب ایجاد شود.
ارتباط بصری. تصاویر می‌توانند اطلاعات را منتقل کنند، لحن را تنظیم کنند و تجربه کاربری جذاب‌تری ایجاد کنند. آن‌ها می‌توانند برای لوگوها، عکس‌ها، تصاویر، نمودارها و چارت‌ها استفاده شوند.
فرمت‌های تصویر:
- JPEG: بهترین برای عکس‌ها و تصاویری با رنگ‌های زیاد
- GIF: بهترین برای گرافیک‌های ساده، لوگوها و انیمیشن‌ها با رنگ‌های کم
- PNG: بهترین برای تصاویری با شفافیت یا آن‌هایی که نیاز به فشرده‌سازی بدون افت کیفیت دارند
بهینه‌سازی کلید است. تصاویر را برای وب بهینه‌سازی کنید با ذخیره آن‌ها در فرمت صحیح، در اندازه مناسب و با وضوح مناسب (72 ppi). این به کاهش حجم فایل‌ها و بهبود زمان بارگذاری صفحه کمک می‌کند.
6. جداول داده‌ها را سازماندهی می‌کنند
هنگام نمایش اطلاعات در یک جدول، باید به صورت یک شبکه متشکل از ردیف‌ها و ستون‌ها فکر کنید (کمی شبیه به یک صفحه‌گسترده).
ارائه داده‌های ساختاریافته. جداول که با استفاده از عنصر <table> ایجاد می‌شوند، برای ارائه داده‌ها در یک فرمت شبکه‌ای ایده‌آل هستند، مانند گزارش‌های مالی، برنامه‌های تلویزیونی و نتایج ورزشی. آن‌ها به کاربران کمک می‌کنند تا اطلاعات پیچیده را با سازماندهی آن‌ها در ردیف‌ها و ستون‌ها درک کنند.
عناصر کلیدی جدول:
<table>: ظرف برای کل جدول<tr>: تعریف‌کننده یک ردیف جدول<th>: تعریف‌کننده یک سلول سرصفحه جدول<td>: تعریف‌کننده یک سلول داده جدول<thead>: گروه‌بندی ردیف‌های سرصفحه جدول<tbody>: گروه‌بندی ردیف‌های بدنه جدول<tfoot>: گروه‌بندی ردیف‌های پاورقی جدول
دسترس‌پذیری و معنایی. از عناصر <th> برای عناوین و ویژگی scope برای نشان دادن اینکه آیا آن‌ها عناوین یک ستون یا یک ردیف هستند، استفاده کنید. این به بهبود دسترسی برای خوانندگان صفحه و کمک به موتورهای جستجو در درک ساختار جدول کمک می‌کند.
7. فرم‌ها ورودی کاربر را جمع‌آوری می‌کنند
HTML مفهوم فرم را برای اشاره به عناصر مختلفی که به شما امکان جمع‌آوری اطلاعات از بازدیدکنندگان سایت را می‌دهد، قرض می‌گیرد.
امکان‌پذیر کردن تعامل. فرم‌ها که با استفاده از عنصر <form> ایجاد می‌شوند، به شما این امکان را می‌دهند که اطلاعات را از بازدیدکنندگان وب‌سایت خود جمع‌آوری کنید. آن‌ها برای کارهایی مانند ثبت‌نام کاربر، فرم‌های تماس، نظرسنجی‌ها و پرداخت‌های تجارت الکترونیک ضروری هستند.
کنترل‌های رایج فرم:
<input type="text">: ورودی متن یک‌خطی<input type="password">: ورودی رمز عبور (کاراکترها را مخفی می‌کند)<textarea>: ورودی متن چندخطی<input type="radio">: دکمه‌های رادیویی (انتخاب یک گزینه)<input type="checkbox">: چک باکس‌ها (انتخاب چندین گزینه)<select>: جعبه لیست کشویی (انتخاب یک گزینه)<input type="file">: بارگذاری فایل<input type="submit">: دکمه ارسال
دسترس‌پذیری و کارایی. از عنصر <label> برای ارتباط توصیف‌های متنی با کنترل‌های فرم استفاده کنید، که به بهبود دسترسی برای خوانندگان صفحه و آسان‌تر کردن استفاده از فرم کمک می‌کند. کنترل‌های مرتبط فرم را با استفاده از عنصر <fieldset> گروه‌بندی کنید و یک عنوان با استفاده از عنصر <legend> ارائه دهید.
8. نشانه‌گذاری معنایی به محتوا معنا می‌دهد
برخی از عناصر متنی وجود دارند که به منظور تأثیر بر ساختار صفحات وب شما طراحی نشده‌اند، اما اطلاعات اضافی به صفحات اضافه می‌کنند — آن‌ها به نشانه‌گذاری معنایی معروف هستند.
توصیف محتوا. نشانه‌گذاری معنایی اطلاعات اضافی درباره محتوای صفحات وب شما فراهم می‌کند و آن‌ها را برای انسان‌ها و ماشین‌ها قابل دسترسی و قابل درک‌تر می‌سازد. این عناصر لزوماً بر ارائه بصری تأثیر نمی‌گذارند، اما به محتوا معنا می‌دهند.
عناصر معنایی رایج:
<em>: نشان‌دهنده تأکید<strong>: نشان‌دهنده اهمیت قوی<cite>: نشان‌دهنده یک ارجاع<abbr>: نشان‌دهنده یک اختصار<address>: شامل جزئیات تماس برای نویسنده صفحه<ins>: نشان‌دهنده محتوایی که به یک سند اضافه شده است<del>: نشان‌دهنده محتوایی که از یک سند حذف شده است
دسترس‌پذیری و سئو. استفاده از نشانه‌گذاری معنایی به خوانندگان صفحه و موتورهای جستجو کمک می‌کند تا محتوای صفحات شما را دقیق‌تر درک کنند و بهبود دسترسی و سئو را فراهم می‌آورد.
9. لیست‌ها محتوا را به وضوح ارائه می‌دهند
در بسیاری از مواقع نیاز به استفاده از لیست‌ها داریم. HTML سه نوع مختلف لیست را در اختیار ما قرار می‌دهد.
سازماندهی اطلاعات. لیست‌ها یک روش اساسی برای ارائه اطلاعات به صورت واضح و ساختارمند هستند. HTML سه نوع لیست ارائه می‌دهد: لیست‌های مرتب، نامرتب و تعریفی.
انواع لیست‌ها:
- لیست‌های مرتب (
<ol>): لیست‌های شماره‌گذاری شده که هر مورد دارای یک ترتیب خاص است. - لیست‌های نامرتب (
<ul>): لیست‌های گلوله‌ای که ترتیب موارد مهم نیست. - لیست‌های تعریفی (
<dl>): لیست‌های اصطلاحات و تعاریف آن‌ها.
تودرتو کردن لیست‌ها. لیست‌ها می‌توانند درون یکدیگر تودرتو شوند تا ساختارهای سلسله‌مراتبی مانند طرح‌ها یا منوها ایجاد کنند.
10. تصاویر را برای عملکرد وب بهینه کنید
شما باید تصاویر را در اندازه‌ای که در صفحه وب استفاده می‌کنید و در فرمت مناسب ذخیره کنید.
بهینه‌سازی تصویر. بهینه‌سازی تصاویر برای بهبود عملکرد وب‌سایت و تجربه کاربری بسیار مهم است. فایل‌های تصویری بزرگ می‌توانند به طور قابل توجهی زمان بارگذاری صفحه را کند کنند و منجر به ناامیدی بازدیدکنندگان شوند.
تکنیک‌های کلیدی بهینه‌سازی:
- انتخاب فرمت مناسب: از JPEG برای عکس‌ها، GIF برای گرافیک‌های ساده و PNG برای تصاویری با شفافیت استفاده کنید.
- تغییر اندازه تصاویر: تصاویر را در ابعاد دقیق آن‌ها که در صفحه نمایش داده می‌شوند، ذخیره کنید.
- فشرده‌سازی تصاویر: از ابزارهای ویرایش تصویر برای کاهش حجم فایل‌ها بدون از دست دادن کیفیت زیاد استفاده کنید.
- استفاده از تصاویر پاسخگو: اندازه‌های مختلف تصویر را بر اساس دستگاه و اندازه صفحه نمایش کاربر ارائه دهید.
بارگذاری سریع‌تر. با بهینه‌سازی تصاویر خود، می‌توانید اطمینان حاصل کنید که صفحات وب شما به سرعت و به طور مؤثر بارگذاری می‌شوند و تجربه بهتری برای بازدیدکنندگان خود فراهم می‌کنند.
11. درک سازگاری مرورگر
با این حال، مهم است که به یاد داشته باشید که بسیاری از دارندگان کامپیوتر آخرین نسخه‌های این مرورگرها را اجرا نمی‌کنند.
سازگاری بین مرورگرها. مرورگرهای مختلف ممکن است کد HTML و CSS را به طور کمی متفاوت تفسیر کنند. آزمایش وب‌سایت خود در چندین مرورگر برای اطمینان از اینکه به درستی به نظر می‌رسد و عملکرد دارد، برای اکثر بازدیدکنندگان شما مهم است.
ابزارهای آزمایش مرورگر:
- BrowserStack
- CrossBrowserTesting
- Browserling
تقویت تدریجی. از تکنیک‌های تقویت تدریجی استفاده کنید تا اطمینان حاصل کنید که وب‌سایت شما هنوز هم در مرورگرهای قدیمی قابل استفاده است، حتی اگر آن‌ها از تمام ویژگی‌های جدید پشتیبانی نکنند. این شامل ساخت یک وب‌سایت پایه و کاربردی و سپس افزودن بهبودها برای مرورگرهای مدرن است.
12. سئو و تجزیه و تحلیل موفقیت را هدایت می‌کنند
در این فصل، به برخی اطلاعات عملی خواهیم پرداخت که به شما کمک می‌کند یک وب‌سایت موفق راه‌اندازی کنید.
بهینه‌سازی موتور جستجو (SEO). سئو عملی است که وب‌سایت شما را برای رتبه‌بندی بالاتر در صفحات نتایج موتور جستجو (SERPs) بهینه می‌کند. این شامل استفاده از کلمات کلیدی مرتبط، ایجاد محتوای با کیفیت بالا و ساخت بک‌لینک از وب‌سایت‌های دیگر است.
تکنیک‌های کلیدی سئو:
- تحقیق کلمات کلیدی: شناسایی اصطلاحاتی که مردم احتمالاً هنگام جستجوی وب‌سایت شما به دنبال آن‌ها هستند.
- بهینه‌سازی درون‌صفحه: استفاده از کلمات کلیدی در عناوین صفحات، عناوین، متن و متن alt تصاویر.
- بهینه‌سازی برون‌صفحه: ساخت بک‌لینک از وب‌سایت‌های دیگر، به ویژه آن‌هایی که محتوای مرتبط دارند.
تجزیه و تحلیل وب. ابزارهای تجزیه و تحلیل وب، مانند Google Analytics، به شما این امکان را می‌دهند که نحوه استفاده بازدیدکنندگان از وب‌سایت شما را پیگیری کنید. این داده‌ها می‌توانند به شما کمک کنند تا بفهمید کدام محتوا محبوب‌ترین است، بازدیدکنندگان از کجا می‌آیند و کجا سایت شما را ترک می‌کنند.
تصمیمات مبتنی بر داده. با تجزیه و تحلیل داده‌های وب‌سایت خود، می‌توانید تصمیمات آگاهانه‌ای درباره چگونگی بهبود محتوای خود، طراحی و تلاش‌های بازاریابی بگیرید.
آخرین به‌روزرسانی::
نقد و بررسی
کتاب HTML و CSS: طراحی و ساخت وب‌سایت‌ها به خاطر جذابیت بصری و رویکرد دوستانه‌اش برای مبتدیان مورد تحسین قرار گرفته است. خوانندگان از توضیحات واضح، مثال‌های عملی و طراحی زیبا قدردانی می‌کنند. بسیاری این کتاب را برای یادگیری مبانی توسعه وب مفید می‌دانند، هرچند برخی اشاره می‌کنند که ممکن است کمی قدیمی شده باشد. این کتاب به خاطر سازماندهی منطقی‌اش و توانایی‌اش در قابل دسترس نشان دادن کدنویسی ستایش می‌شود. منتقدان به سن کتاب به عنوان یک نقطه ضعف اشاره می‌کنند و می‌گویند که پوشش فناوری‌های جدیدی مانند فلیکس باکس و طراحی واکنش‌گرا را ندارد. به‌طور کلی، این کتاب به‌طور گسترده‌ای برای مبتدیان توصیه می‌شود، اما ممکن است نیاز به مکمل‌هایی از منابع به‌روزتر داشته باشد.
