طراحی سایت رادی وب
یک شنبه 02 اردیبهشت 1403, 20:32 عصر
HTML مخفف کلمه Hyper Text Markup Language زبان نشانه گذاری سایت است. از html برای جداسازی عناصر صفحات وب سایت (مانند تگ ها ، عکس ها، تصاویر، متن ها، ویدئوها) استفاده می شود. در فرآیند طراحی سایت با html و css (https://radyweb.com/) در ابتدا تمامی کد ها به زبان html تبدیل می شوند و سپس مرورگر ها می توانند آنها را نشان دهند. در html قسمت های مختلف یک سایت توسط تگ ها از یکدیگر جدا می شوند. از این رو برای طراحی عناصر در صفحات وب سایت باید ابتدا تگ های html در آن ساخته شود سپس مرورگر ها html را می خوانند. در این مقاله برخی از تگ های پرکاربرد HTML را نام می بریم.
مقالات مرتبط ----> آموزش html و css را ازکجا شروع کنیم؟ (https://radyweb.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-html-%d9%88-css-%d8%b1%d8%a7-%d8%a7%d8%b2-%da%a9%d8%ac%d8%a7-%d8%b4%d8%b1%d9%88%d8%b9-%da%a9%d9%86%db%8c%d9%85%d8%9f/)
تگ ها در html
Html از عناصری به نام تگ تشکیل شده است. تگ ها در html و در فرآیند طراحی سایت بسیار مهم هستند. مرورگر ها کدهای html را میخوانند. بناربراین با استفاده از تگ های html مرورگرها می توانند زبان های دیگر را هم بخوانند. طراح سایت با استفاده از تگ های html می تواند انواع تصاویر، عکس ها، متن ها و بخش های دیگر را در طراحی سایت استفاده کند.در ادامه چند تگ پر کاربرد را معرفی می کنیم. برای استفاده از تگ های html می توانید حتی در داخل یک نوت پد با پسوند .html شروع به طراحی سایت کنید به عنوان مثال فایلی به نام index.html بسازید و استفاده از تگ ها را در آن شروع کنید.
https://radyweb.com/wp-content/uploads/2024/04/11.jpg
توضیح
نام تگ
مشخص کردن نوع نسخه سایت
!DOCTYPE
برای ساخت هدر سایت
head
ساخت بدنه سایت
body
ایجاد پاراگراف
p
ایجاد لینک در صفحه
a
عنوان سایت
title
ساخت عکس
img
ایجاد هدینگ
H1 … h6
ایجاد دکمه
button
ساخت فرم
form
ساخت یک پست در صفحه
article
https://radyweb.com/wp-content/uploads/2022/12/2.webp
Css چیست؟
Css مخفف کلمه Cascading Sheet Style برای استایل دهی عناصر html استفاده می شود. یعنی کدهای CSS باعث می شود که کد های HTML رنگ و سایز و فونت بگیرند . Css در کنار html عناصر طراحی وب سایت را تشکیل می دهند. استفاده از css برای استایل دهی عناصر در صفحات وب سایت بهترین روش برای ساخت سایت است. طراحی سایت با html و css پایه ساخت وب سایت است.
شروع کار طراحی سایت با html و css
برای شروع طراحی با html و css می توانید حتی از یک نوت پد استفاده کنید. همانطور که قبلا گفتم نرم افزارهای مختلفی هم وجود دارد که شروع کار برنامه نویسی را راحت تر می کنند. ابتدا فایلی به نام index.html می سازیم. فایل ایندکس فایل اصلی سایت است که برنامه ها در آن نوشته می شوند. در این آموزش من از ویراشگر سابلاین استفاده می کنم. برای ارتباط دادن css به html باید آنها را به هم لینک بدهیم. برای این کار در هدر سایت تگ لینک را قرار می دهیم.
https://radyweb.com/wp-content/uploads/2022/12/3.webp
در برگه css استایل دهی به سایت را انجام می دهیم. برگه استایل را به نام style.css ذخیره می کنیم و کلیه کد های css را در آن می نویسیم. بعد از اینکه برگه استایل را به برگه ایندکس وصل کردیم حل یک تگ p می اندازیم.
https://radyweb.com/wp-content/uploads/2022/12/6-1.webp
از طریق لینکی که دادیم آن را به css متصل کردیم . حال کافی است تا در css شروع به کدنویسی کنیم. کد بسیار ساده ی رنگ را در فایل css زیر می بینیم و نتیجه را در مرورگر مشاهده می کنیم.
https://radyweb.com/wp-content/uploads/2022/12/5.webp
و نتیجه در مرورگر این می شود:
https://radyweb.com/wp-content/uploads/2022/12/4.webp
به این ترتیب توانستیم با یک کد ساده html و css کار کنیم.
چگونه می توانیم css را به html اضافه کنیم؟
برای لینک دادن کدهای css به کدهای html سه روش وجود دارد. در ادامه این سه روش را توضیح می دهیم:روش external
متداول ترین و راحت ترین روش برای لینک دادن کد های css به html روش external است. در این روش یک خط کد لینک را در هدر سایت قرار می دهیم و در آن آدرس فایل css را می گذاریم. به این ترتیب کد های html قادر به خواندن کد های css خواهند بود.
https://radyweb.com/wp-content/uploads/2022/12/3.webp
در این تصویر روش لینک دهی اکسترنال را مشاهده می کنیم.
روش internal
در این روش کد های css در تگ style در هدر سایت قرار می گیرند. این روش متداول نیست. اگرچه که یک طراح سایت حرفه ای باید با تمامی روش ها آشنا باشد.
https://radyweb.com/wp-content/uploads/2022/12/8.webp
نتیجه کد صفحه سایت بک گراند مشکی است:
https://radyweb.com/wp-content/uploads/2022/12/7.webp
روش inline
در روش اینلاین استایل دهی هر عنصر در تگ مربوط به آن html داده می شود.
https://radyweb.com/wp-content/uploads/2022/12/10.webp
و نتیجه:
https://radyweb.com/wp-content/uploads/2022/12/13.webp
مقالات مرتبط ----> آموزش html و css را ازکجا شروع کنیم؟ (https://radyweb.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-html-%d9%88-css-%d8%b1%d8%a7-%d8%a7%d8%b2-%da%a9%d8%ac%d8%a7-%d8%b4%d8%b1%d9%88%d8%b9-%da%a9%d9%86%db%8c%d9%85%d8%9f/)
تگ ها در html
Html از عناصری به نام تگ تشکیل شده است. تگ ها در html و در فرآیند طراحی سایت بسیار مهم هستند. مرورگر ها کدهای html را میخوانند. بناربراین با استفاده از تگ های html مرورگرها می توانند زبان های دیگر را هم بخوانند. طراح سایت با استفاده از تگ های html می تواند انواع تصاویر، عکس ها، متن ها و بخش های دیگر را در طراحی سایت استفاده کند.در ادامه چند تگ پر کاربرد را معرفی می کنیم. برای استفاده از تگ های html می توانید حتی در داخل یک نوت پد با پسوند .html شروع به طراحی سایت کنید به عنوان مثال فایلی به نام index.html بسازید و استفاده از تگ ها را در آن شروع کنید.
https://radyweb.com/wp-content/uploads/2024/04/11.jpg
توضیح
نام تگ
مشخص کردن نوع نسخه سایت
!DOCTYPE
برای ساخت هدر سایت
head
ساخت بدنه سایت
body
ایجاد پاراگراف
p
ایجاد لینک در صفحه
a
عنوان سایت
title
ساخت عکس
img
ایجاد هدینگ
H1 … h6
ایجاد دکمه
button
ساخت فرم
form
ساخت یک پست در صفحه
article
https://radyweb.com/wp-content/uploads/2022/12/2.webp
Css چیست؟
Css مخفف کلمه Cascading Sheet Style برای استایل دهی عناصر html استفاده می شود. یعنی کدهای CSS باعث می شود که کد های HTML رنگ و سایز و فونت بگیرند . Css در کنار html عناصر طراحی وب سایت را تشکیل می دهند. استفاده از css برای استایل دهی عناصر در صفحات وب سایت بهترین روش برای ساخت سایت است. طراحی سایت با html و css پایه ساخت وب سایت است.
شروع کار طراحی سایت با html و css
برای شروع طراحی با html و css می توانید حتی از یک نوت پد استفاده کنید. همانطور که قبلا گفتم نرم افزارهای مختلفی هم وجود دارد که شروع کار برنامه نویسی را راحت تر می کنند. ابتدا فایلی به نام index.html می سازیم. فایل ایندکس فایل اصلی سایت است که برنامه ها در آن نوشته می شوند. در این آموزش من از ویراشگر سابلاین استفاده می کنم. برای ارتباط دادن css به html باید آنها را به هم لینک بدهیم. برای این کار در هدر سایت تگ لینک را قرار می دهیم.
https://radyweb.com/wp-content/uploads/2022/12/3.webp
در برگه css استایل دهی به سایت را انجام می دهیم. برگه استایل را به نام style.css ذخیره می کنیم و کلیه کد های css را در آن می نویسیم. بعد از اینکه برگه استایل را به برگه ایندکس وصل کردیم حل یک تگ p می اندازیم.
https://radyweb.com/wp-content/uploads/2022/12/6-1.webp
از طریق لینکی که دادیم آن را به css متصل کردیم . حال کافی است تا در css شروع به کدنویسی کنیم. کد بسیار ساده ی رنگ را در فایل css زیر می بینیم و نتیجه را در مرورگر مشاهده می کنیم.
https://radyweb.com/wp-content/uploads/2022/12/5.webp
و نتیجه در مرورگر این می شود:
https://radyweb.com/wp-content/uploads/2022/12/4.webp
به این ترتیب توانستیم با یک کد ساده html و css کار کنیم.
چگونه می توانیم css را به html اضافه کنیم؟
برای لینک دادن کدهای css به کدهای html سه روش وجود دارد. در ادامه این سه روش را توضیح می دهیم:روش external
متداول ترین و راحت ترین روش برای لینک دادن کد های css به html روش external است. در این روش یک خط کد لینک را در هدر سایت قرار می دهیم و در آن آدرس فایل css را می گذاریم. به این ترتیب کد های html قادر به خواندن کد های css خواهند بود.
https://radyweb.com/wp-content/uploads/2022/12/3.webp
در این تصویر روش لینک دهی اکسترنال را مشاهده می کنیم.
روش internal
در این روش کد های css در تگ style در هدر سایت قرار می گیرند. این روش متداول نیست. اگرچه که یک طراح سایت حرفه ای باید با تمامی روش ها آشنا باشد.
https://radyweb.com/wp-content/uploads/2022/12/8.webp
نتیجه کد صفحه سایت بک گراند مشکی است:
https://radyweb.com/wp-content/uploads/2022/12/7.webp
روش inline
در روش اینلاین استایل دهی هر عنصر در تگ مربوط به آن html داده می شود.
https://radyweb.com/wp-content/uploads/2022/12/10.webp
و نتیجه:
https://radyweb.com/wp-content/uploads/2022/12/13.webp