پروژه طراحی سایت با html و css

برای طراحی یک سایت یا برنامه نویسی تحت وب از کجا شروع کنیم؟

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

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

اصلا فرقی نمی کند که شما می خواهید در چه زمینه‌ی از وب فعالیت کنید، در هر صورت باید به زبان‌های HTML و CSS آشنا باشید. بگذارید با یک مثال بهتر ضرورت این دو زبان را نشان دهم.

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

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

HTML چیست؟

زبان HTML مخفف عبارت Hyper Text Markup Language می باشد که معادل فارسی آن «زبان نشانه‌گذاری فرامتنی» است. لطفا تحت هیچ شرایطی از معادل فارسی استفاده نکنید، زیرا در دنیای برنامه نویسی و طراحی، گاهی عبارت های انگلیسی مفهوم بهتری را انتقال می دهند.

زبان HTML یک زبان برنامه نویسی نیست! این زبان در اصل به عنوان یک ساختار برای نشانه گذاری المان ها در دنیای وب بکار گرفته می شود و اولین بار توسط آقای Tim Berners Lee در سال 1990 ابداع شد. این زبان ساختار اولیه و ابتدایی کلیه وب سایت های موجود در اینترنت را تشکیل می دهد. یعنی هر سایتی که در اینترنت مشاهده می کنید بدون شک از زبان HTML برای طراحی پیکره اصلی خود استفاده کرده است.

CSS چیست؟

CSS مخفف عبارت Cascading Style Sheets بوده که معادل فارسی آن «صفحات استایل آبشاری» است. این زبان توسط آقای Håkon Wium Lie در سال 1996 با هدف طراحی ظاهری یک صفحه وب ارائه شد.

اما چرا آبشاری؟ در ادامه این دوره آموزشی به شما نشان می دهیم که چگونه می توانید چندین استایل (مثلا رنگ) را به یک المان HTML اعمال کنید. اما نحوه ی اعمال شدن این استایل بسته به قرارگیری المان HTML در یک طرح سلسله مراتبی است.

اگر متوجه توضیح بالا نشده اید اصلا نگران نباشید. در طی دوره این دوره آموزشی مثل آب خوردن این مفاهیم را یاد می گیرید.

مخاطب دوره آموزش HTML و CSS چه کسانی هستند؟

تمام افرادی که به دنبال ورود به دنیای وب هستند. همچنین این دوره برای افرادی که قصد دارند قالب های حرفه ای و پیشرفته را طراحی کنند، مناسب می باشد.

پیش نیازهای ورود به دوره آموزش HTML و CSS چیست؟

تنها پیش نیاز ورود به دوره آموزش HTML و CSS این است که بتوانید کامپیوتر یا لپ تاپ خود را روشن کنید!

پس از اتمام این دوره چه اتفاقی می افتد؟

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

نسخه های HTML5 و CSS3

HTML و CSS در سال های اخیر نسخه های جدیدی را ارائه کرده است که آخرین آن تحت عنوان HTML5 و CSS3 شناخته می شود. این نسخه ها قابلیت های بسیاری را به المان های وب اضافه کردند و به گونه ای باعث متحرک شدن، ارتقاء انیمیشن، افزایش امنیت و… المان‌ ها شدند.

در این دوره آموزشی، آخرین نسخه HTML‌ و CSS ارائه می شود.

سرفصل های دوره آموزش HTML و CSS

مقدمه، معرفی و کاربردها

• معرفی زبان HTML
• معرفی زبان CSS
• بررسی نحوه دسترسی کاربران به یک صفحه اینترنتی
• معرفی مفاهیم Client و Server
• مرورگر یا Browser چیست؟
• چگونه یک وب سایت ساخته می شود؟
• منظور از HTML5 و CSS3 چیست؟
• معرفی نرم افزار کدنویسی HTML و CSS

ساختار زبان HTML

• بررسی ساختار زبان HTML
• معرفی وظایف زبان HTML
• معرفی مفهوم تگ با برچسب ها
• معرفی تگ های و
• ساخت اولین صفحه اینترنتی با HTML

سئو و کاربردهای آن در HTML

• سئو (SEO) چیست؟
• ارتباط بین بهینه سازی یک صفحه با HTML

کار با متن (Text)

• ارائه مفهوم Heading یا سربرگ
• کار با تگ های
• بررسی تگ پاراگراف یا
• معرفی تگ های و
• نحوه افزودن خط جدید به متون با تگ های
  و
• کار با تگ های و
• استفاده از تگ های نقل قول

و

• استفاده از تگ مخفف سازی
• معرفی تگ‌ های و
• استفاده از تگ آدرس

 

• اعمال تغییرات روی متون با تگ های و

لیست ها (Lists) در HTML

• معرفی لیست های مرتب با تگ های

و

• 2. معرفی لیست های نامرتب با تگ های

و

• 1. • کار با تگ های لیستی و

و

• 1. • طراحی لیست های سلسه مراتبی (آبشاری)

لینک ها (Links) در HTML

• 1. • ساختار لینک ها در زبان HTML
     • تگ
     • معرفی attribute ها یا صفات
     • نحوه لینک کردن یک عبارت به یک صفحه اینترنتی
     • معرفی آدرس های مطلق و نسبی
     • آموزش نحوه لینک کردن آدرس های ایمیل با عبارت mailto:
     • معرفی صفت target در لینک ها
     • آموزش نحوه لینک کردن یک قسمت از متن به قسمت دیگر آن
     • آموزش نحوه لینک کردن یک قسمت از صفحه به صفحه دیگر در یک سایت

تصاویر (Images) در HTML

• 1. • معرفی مفهوم تصویر در دنیای وب
     • نحوه استفاده از یک تصویر در یک صفحه اینترنتی
     • معرفی تگ و صفات src و alt و title در یک تصویر
     • تنظیم ابعاد تصویر با استفاده از صفات height و weight
     • آموزش ترازبندی تصاویر در HTML با استفاده از صفت align
     • تعریف ابعاد تصاویر و نحوه استفاده صحیح آنها در وب
     • بررسی انواع فرمت های تصویر و نحوه بکارگیری آنها در وب
     • بررسی تگ جدید و در HTML5

جداول (Tables)

• 1. • جدول چیست؟
     • بررسی تگ های تولید جدول
     • کار با تگ های و و
     • معرفی تگ های و و

فرم ها (Forms) در HTML

• 1. • فرم چیست؟
     • چرا باید از فرم ها در HTML استفاده کنیم؟
     • منظور از Form Control چیست؟
     • فرم ها چگونه کار می کنند؟
     • معرفی ساختار یک فرم
     • تگ

Top of Form

و صفات action و method در فرم ها

Bottom of Form

• 1. • تگ و صفات type=”text” و name و maxlength و size
     • نحوه تعریف ورودی های رمز عبور در HTML
     • تگ
     • دکمه رادیویی (Radio Button) چیست؟
     • تگ و صفات type=”radio” (دکمه رادیویی) و value و checked
     • چک باکس (Check Box) چیست؟
     • تگ و صفات type=”checkbox” (دکمه رادیویی) و value و checked
     • ورودی انتخاب آبشاری یا Drop Down چیست؟
     • تگ
     • تگو صفات value و selected
     • ورودی انتخاب آبشاری چند تایی یا Drop Down Multiple چیست؟
     • تگ
     • ورودی فایل (File Input) چیست و چه کاربردی دارد؟
     • ورودی submit چیست؟
     • ورودی image چیست؟
     • تگ چیست و چگونه می توان با استفاده از آن یک دکمه ایجاد کرد؟
     • صفت hidden چیست و چه کاربردی دارد؟
     • برچسب ها چه کاربردی در فرم ها دارند؟
     • کار با تگ
     • گروه بندی المان های یک فرم با استفاده از تگ هایو
     • اعتبارسنجی فرم ها با ویژگی جدید در HTML5
     • ورودی جدید تاریخ یا date در HTML5
     • بررسی ورودی های جدید Email و URL در HTML5
     • کار با ورودی جدید search در HTML5 به همراه صفت placeholder

حرفه ای تر با HTML کار کنیم!

• 1. • معرفی مفهوم DOCTYPE در HTML
     • آموزش کامنت کردن (Comment) یا از کار انداختن یک قسمت از کدها در HTML
     • معرفی صفت id در المان های HTML
     • معرفی صفت class در المان های HTML
     • آموزش شیوه کدنویسی بین المللی و استاندارد
     • بلوک (Block) چیست و چگونه آن را می توان تعریف کرد؟
     • معرفی مفهوم
     • شرح تگ
     • بررسی تگ
     • بررسی تگ و تاثیر آن بر بهینه سازی وب سایت
     • بررسی صفات description و keywords و robots در تگ
     • معرفی معادل های علائم کلیدی در HTML

چگونه می‌توانیم اقدام به طراحی نمونه کار با کنیم؟

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

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

·        انتخاب موضوع

موضوع نمونه کار خود را انتخاب کنید

اولین و یکی از مهم‌ترین مراحل ساخت نمونه کار با html و css این است که شما یک موضوع را برای پروژه و نمونه کار خود انتخاب کنید. انتخاب موضوع نمونه کار از اهمیت بسیار زیادی برخوردار است و می‌تواند نقش بسیار مهمی را در رزومه شما ایفا کند. شما باید سعی کنید موضوعاتی را برای نمونه کار خود انتخاب کنید که طرفدار بیشتری دارند و سازمان‌ها و کسب‌وکارهای زیادی هستند که علاقه‌مند به طراحی سایت در آن زمینه می‌باشند.

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

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

·        چیدمان عناصر

طرح اولیه از وب‌سایت خود را ایجاد کنید

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

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

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

·        تنظیم boilerplate code

تنظیم boilerplate code برای راه‌اندازی سایت

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

این کدها یک ساختار اولیه را برای سایت شما ایجاد می‌کنند. به‌منظور قراردادن این کدها در سایت خود کافی است که ابتدا یک پوشه خالی را ایجاد کنید که این پوشه برای وب‌سایت شما خواهد بود، در ادامه دو فایل خالی index.html و style.css را داخل این پوشه ایجاد کنید و boilerplate code پایه را که در ادامه آمده است داخل فایل index.html قرار دهید:

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

·        ساخت عناصر HTML

ساخت عناصر وب‌سایت با استفاده از HTML

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

از جمله رایج‌ترین این عناصر می‌توان به <header>، <main> و … اشاره کرد که هریک از آنها دارای کاربردهای مخصوص به خود هستند. یک نکته مهم در این بخش این است که سعی کنید تنها موقعیت عناصری که قصد طراحی آنها را دارید را مشخص کنید. در واقع این ساختار اولیه در ادامه با استفاده از CSS تکمیل شده و موارد مربوط به زیبایی‌شناختی نیز به آن اضافه خواهد شد. </</

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

استایل‌دهی

استایل‌دهی به پروژه گام بعدی ساخت نمونه کار با HTML و CSS

گام بعدی از ساخت نمونه کار با html و css مرحله‌ای است که شما باید در آن کمی از کدهای CSS استفاده کنید تا استایل زیبایی را به عناصر استفاده شده در سایت خود بدهید. در بخش‌های قبلی درباره این موضوع صحبت کردیم که شما می‌توانید با استفاده از HTML یک ساختار اولیه را برای سایت خود ایجاد کنید.

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

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