مقدمه ای بر HTML و CSS برای طراحان
به عنوان یک طراح گرافیک، احتمالاً از رابطه همیشه در حال تکامل بین طراحی و فناوری آگاه هستید. این به ویژه برای کسانی که روی طراحی وب تمرکز می کنند صادق است. در این صنعت، ما باید درک اولیه ای از چگونگی تبدیل شدن مدل های ماکت هایی که با دقت ساخته شده اند به صفحات وب زنده تبدیل شوند، داشته باشیم. وقتی اصول این فرآیند را درک کنیم (و محدودیت‌های آن)، می‌توانیم به طور دقیق با توسعه‌دهندگان ارتباط برقرار کنیم و وب‌سایت‌هایی با پیکسل کامل داشته باشیم.
این بدان معنا نیست که شما باید بدانید که چگونه یک وب سایت را از بالا به پایین کدنویسی کنید (اگرچه عالی خواهد بود!)، این فقط به این معنی است که شما باید موارد ضروری را درک کنید. در این پست، ما قصد داریم با یک مقدمه بسیار ابتدایی برای HTML شروع کنیم. شما یاد خواهید گرفت که چگونه یک طراحی وب را در فتوشاپ برش دهید و HTML را با CSS فرمت کنید.
HTML دقیقا چیست؟
عکس Burrito توسط Stephan Mosel
تقریباً هر چیزی که هنگام مرور اینترنت می بینید، یک سند زبان نشانه گذاری فرامتن (HTML) است. فرامتن متنی است که به متن دیگری در صفحه نمایش شما ارجاع می دهد و به آن پیوند می دهد و امکان دسترسی به محتوا را با یک کلیک ساده برای شما فراهم می کند. زبان نشانه گذاری مجموعه ای از برچسب ها است که در براکت ها < > محصور می شوند. این تگ های HTML معمولاً به صورت جفت می آیند:
<start tag>: همچنین به عنوان یک برچسب باز کننده شناخته می شود
</end tag> : همچنین به عنوان یک برچسب بسته شناخته می شود و شامل یک اسلش به جلو /
وقتی محتوا را بین این 2 تگ محصور می کنید، به کل یک عنصر گفته می شود:
<p> این یک پاراگراف </p> است
وقتی این زبان به وب ترجمه می شود، بینندگان برچسب ها را نمی بینند – آنها فقط محتوای محصور شده بین آنها را می بینند.
HTML 5، نسخه فعلی HTML، حاوی حدود 100 برچسب با ویژگی هایی است که عملکرد یا ظاهر آنها را تغییر می دهد. برای شروع درک و ایجاد HTML فقط باید 30 تا 40 مورد از این تگ ها را بدانید. به آنها نگاهی بیندازید و متوجه شوید که چگونه بر اساس عملکرد گروه بندی می شوند. بیایید بصری کنیم و این را در عمل ببینیم.
برش تصاویر در فتوشاپ
قبل از کدنویسی، باید تصمیم بگیریم که کدام بخش از وب سایت باید دارای تصاویر باشد و کدام بخش قابل کدگذاری است. بیایید از ابزار Photoshop’s Slice استفاده کنیم (در زیر منوی ابزار Crop پنهان شده است) و قسمت هایی مانند عکس burrito و تاکوهای Joan را جدا کنیم.
اکنون، ما باید برش های خود را صادر کنیم – به File > Save for Web (Alt+Shift+Ctrl+S) بروید. هنگامی که یک برش خاص انتخاب می شود، می توانید گزینه های Export آن را در سمت راست پنجره (JPG، PNG و غیره) تنظیم کنید. اگر روی یک برش خاص دوبار کلیک کنید، پنجره گزینه های Slice ظاهر می شود – این به شما امکان می دهد فایل های برش خاصی را نام ببرید.
به طور پیش فرض، همه تصاویر در زیر دایرکتوری/images/ قرار می گیرند. اگر می‌خواهید فقط برش‌هایی را که ایجاد کرده‌اید صادر کنید، در پنجره ذخیره، All User Slices را انتخاب کنید.
ایجاد یک سند اولیه HTML
ما برش های خود را داریم، بیایید یک سند HTML اولیه ایجاد کنیم.
خط 1: اعلام می کند که گویش HTML 5 زبان سند است.
خط 2: عنصر <html> ریشه یک سند HTML را نشان می دهد. این یک ظرف اجباری است که مرزهای سند ما را مشخص می کند.
خط 3: بخش <head> حاوی عناصر صفحه نامرئی مانند اطلاعات متا، عنوان و غیره است.
خط 4: <meta charset=”utf-8″> این اعلان رمزگذاری سند است — utf-8 یک انتخاب امن است — می توانید در اینجا درباره رمزگذاری کاراکترهای HTML اطلاعات بیشتری کسب کنید.
خط 5: <title>صفحه نمونه</title> این عنوان صفحه ای است که در نوار عنوان مرورگر قابل مشاهده است.
خط 6: </head> تگ <head> را از خط 3 می بندد.
خط 7: <body></body> این عنصر بدنه حاوی تمام محتوای قابل مشاهده صفحه است.
خط 8: </html> تگ <html> را از خط 2 می بندد. این عنصر پایان سند را نشان می دهد.
راه های ممکن دیگری برای کدنویسی همان طرح وجود دارد. ما از تگ های معنایی HTML 5 (هدر، ناوبری، مقاله، پاورقی) برای ایجاد یک ساختار سند پایه استفاده خواهیم کرد:
این چیدمان ترجمه شده به HTML است:
چند نکته قابل توجه:
خط 11 و 12: عناصر <a> جوهره اینترنت هستند زیرا برای ایجاد پیوندها استفاده می شوند. آنها با ویژگی HREF جفت شده اند و باید یک URL هدف را پیوند دهند.
خطوط 18 تا 20: اینها چند تگ قالب بندی متن هستند: <h1> مخفف هدر سطح اول است. <p> مخفف یک پاراگراف است. <br> مخفف یک خط شکسته است.
قالب بندی با برگه های سبک آبشاری (CSS)
وقتی فقط فایل HTML را در یک مرورگر وب باز می کنید، می بینید که مانند طرح قبلی ما قالب بندی نشده است. این به این دلیل است که کد HTML کافی نیست – ما باید آن را با Cascading Style Sheets (CSS) قالب بندی کنیم. CSS یک زبان شیوه نامه است که برای قالب بندی عناصر HTML استفاده می شود.
اما چرا دقیقاً باید HTML را با CCS جفت کنیم؟ مدتی پیش، قالب بندی با افزودن ویژگی ها به تگ های HTML به دست آمد. با این حال، این منجر به یک کد ناخوانا و غیرقابل نگهداری شد. راه حل این بود که محتوای سند (HTML) را از قالب بندی سند (CSS) جدا کنید.
بیایید یک قانون ساده CSS را تجزیه کنیم:
انتخابگر: این عنصر HTML است که می خواهید استایل کنید. به عنوان مثال: <article>
اعلان: یک قانون CSS می تواند 1 یا چند اعلان داشته باشد. هر اعلان از یک ویژگی و مقدار تشکیل شده است و با یک نقطه ویرگول از هم جدا می شود. شما اعلان ها را بین پرانتزهای مجعد { } قرار می دهید.
ویژگی: این ویژگی سبکی است که می خواهید تغییر دهید. به عنوان مثال: رنگ پس زمینه، اندازه فونت و غیره.
Value: هر ویژگی دارای یک مقدار مرتبط با آن است. به عنوان مثال: #ffcc11 (برای رنگ پس‌زمینه)، 16 پیکسل (برای اندازه فونت) و غیره.
تعداد زیادی ویژگی CSS وجود دارد که می توان برای هر عنصر HTML تنظیم کرد، اما لازم نیست همه آنها را خودتان بنویسید. می‌توانید به تنظیمات پیش‌فرض مرورگر خود تکیه کنید یا از یک شیوه نامه پایه استفاده کنید که مرورگر شما را به مقادیر معقول بازنشانی می‌کند. در واقع برای نوشتن انتخابگرها به تنهایی به دانش و تجربه کمی نیاز است.
بیایید نگاهی به برخی از قوانین CSS لازم برای قالب بندی طراحی ساده خود بیاندازیم.
ویژگی های موقعیت یابی CSS: 4 روش مختلف (استاتیک، ثابت، نسبی و مطلق) وجود دارد که به ما امکان می دهد عناصر خاصی را در طراحی خود قرار دهیم. بعد از اینکه یکی از این روش ها را تنظیم کردید، می توانید عناصر را با استفاده از ویژگی های بالا، راست، پایین و چپ قرار دهید – بسته به اینکه از کدام یک از 4 روش استفاده می کنید، اینها متفاوت عمل می کنند. در این مورد، ما می‌خواهیم plate_image را با استفاده از موقعیت‌یابی مطلق در موقعیت قرار دهیم.
مدل جعبه CSS: این مدل کادری است که همه عناصر HTML را در بر می گیرد – شامل حاشیه ها، حاشیه ها، padding و محتوا است. حاشیه ها ناحیه ای نامرئی در اطراف مرز هستند و بالشتک بین حاشیه و محتوا قرار دارد.
منابع
بهترین راه برای یادگیری همه اینها این است که خودتان آن را تجربه کنید! شما می توانید یک فایل ZIP از فایل های HTML، CSS و دارایی های شرح داده شده در این پست را دانلود کنید. وقتی ZIP را دانلود کردید، فایل style2.css را باز کنید و شروع به ویرایش محتوا کنید. می توانید Sublime Text را دانلود کرده و آن را به صورت رایگان تست کنید.
اگر واقعاً علاقه مند به یادگیری بیشتر در مورد کدنویسی هستید، این سایت جالب را بررسی کنید: Codecademy.
آیا HTML و CSS را می شناسید؟ نکات خود را در نظرات به اشتراک بگذارید!
بدون دیدگاه