آموزش ساخت منو Horizontal List

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

آموزش ساخت منوی افقی ساده با HTML و CSS

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

آموزش طراح منوی افقی چشمک زن با Html و Css3

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

Layouts در HTML

Layouts در HTMLکلاس - Class در HTML عنوان مقاله آموزشی قبل بود که در سایت فعال شد . در این مقاله میخواهم به سراغ یکی از اصلی ترین موارد آموزشی مربوط به HTML بروم . Layouts در HTML را می توان پایان بخش مقدماتی و ورود به بخش متوسط آموزش HTML دانست . شاید بتوان گفت یکی از دشوار ترین بخش های فراگیری زبان سی اس اس (CSS) نحوه ایجاد یک Layout از طریق آن باشد. هماطنرو که میدانید تگ های اچ تی ام ال (HTML) به همان ترتیبی که نوشته می شوند روی صفحه نمایش داده می شوند که به چنین چیزی Normal Flow گفته می شود. زبانCSSاین امکان را به طراحان سایت می دهد تا کدهای اچ تی ام ال خود را از لحاظ بصری زیبا و چشمگیر کنند. پس از فراگیری نحوه استفاده از تگ های HTML، اساسی ترین گام یادگیری استفاده از کدهای سی اس اس است چرا که امروزه کمتر سایتی را می توان یافت که صرفاً با استفاده از زبان اچ تی ام ال طراحی شده باشد.

کلاس - Class در HTML

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

Block در HTML

Block در HTMLCSS در HTML عنوان مقاله قبلی می باشد . یکی دیگر از عناصر HTML گزینه Block  می باشد .شاید عنوان بلاک درست نباشد ولی در ادامه با توضیحاتی که قرار میدهم بهتر می توانید این کلمه را درک کنید . به طور کلی بیشتر المنتهای HTML به دو گروه Block-level elements و Inline-level elements تقسیم میشوند. معمولا المنتهای Block-level المنتهای ساختاری هستند و میتوانند شامل گروه بزرگی از المنتها شوند اما المنتهای Inline-level المنتهای بر پایه متن(Text-base) هستند.
inline level: این Element ها خطی اند و اگر یک تگ inline level دیگر را کنار آن ها بنویسیم کنار تگ قبلی ما قرار می گیرد و فضایی که لازم دارد را پر می کند و فضای اضافی اشغال نمی کند. در واقع فقط تا جایی که محتوا دارند را اشغال می کنند. <b>, <td>, <a>, <img>

block level: این عناصر تمام بلاکی که در آن قرار دارند را اشغال می کنند.و اگر یک تگ دیگر را کنار آن ها بنویسیم کنار تگ قبلی قرار نمی گیرد و تگ دوم به خط بعدی می رود و فضای اضافی اشغال می کند. <h1>, <p>, <ul>, <table>

CSS در HTML

CSS در HTMLدر مقاله قبلی نحوه استفاده از تگ Style را درون کد HTML آموزش داده ام . اما تگ Style به خودی خود کاری نمی تواند انجام بدهد و حتما باید با دستورات CSS  همراه شود . به این نکته توجه کنید که استفاده از این تگ فقط زمانی پیشنهاد می شود که کدهای آن فقط مربوط به یک قسمت خاص باشد . البته بهتر است همان قسمت خاص هم در CSS  مورد استفاده قرار بگیرد تا کدهای صفحه اصلی سنگین نشود.صفت style در واقع دروازه ورود به CSS است . از این صفت جهت نوشتن کدهای CSS در تگ های HTML استفاده می شود. اما امروزه زیاد کاربرد ندارد مگر اینکه بخواهیم یک قالب ساده با کدهای کم ایجاد کنیم زیرا استفاده از این تگ باعث سنگین شدن صفحه وب سایت در نتیجه دیر لود شدن قالب می شود .
دستورات CSS را هم میتوان بطور مستقیم در صفحه HTML نوشت , هم میتوان آنرا در یک فایل CSS جدا نوشت . برای اینکه دستورات CSS را مستقیما در خود صفحه بنویسیم , از صفت style استفاده می کنیم . در مقاله قبلی روش انجام اینکار تویح داده نشد . در این مقاله میخواهم آموزش نوشتن دستورات Css را در بین کدهای HTML مورد بررسی قرار بدهم . 

کامنت در HTML

کامنت در HTMLدر مقاله قبلی که با عنوان "نقل قول در HTML" در سایت فعال شد یاد گرفتید که چگونه در قسمت های مختلف نقل قول قرار بدهید . البته با وجود نرم افزارهای طراحی شاید یک درصد این اتفاق بیافتد که بخواهید به صورت دستی کدی را خودتان تایپ کنید . 
اما اگر بخواهید در بین کدها برای نویسندگان و برنامه نویسان دیگر متنی را تایپ کنید راه حل چیست ؟ راه حل استفاده از کامنت می باشد . توضیحات ( کامنتها ) می توانند وقتی که در حال نوشتن صفحه خود هستید به شما کمک کنند. مرورگرها نمی توانند کامنتها را نشان دهند پس در صفحه نهایی آنها به بیننده نشان داده نمی شوند. تنها راه مشاهده کامنتها مشاهده صفحه Source code صفحه است که با زبان HTML نمایش داده شود. با استفاده از این خاصیت شما می توانید در هنگام نوشتن یک صفحه برای خود یادداشت بگذارید تا وقتی که بعداً به آن نگاه کردید بهتر آنرا درک کنید.

نقل قول در HTML

2نقل قول در HTMLنقل قول در HTML با Quotation and Citation نامگذاری می شود که هر دو دارای تگهای مشخص می باشند .تگ نقل قول در HTML توسط تمامی مرورگرها پشتیبانی میشود. اما در نسخه های HTML مفهوم تگ نقل قول با هم متفاوت است. در HTML 4 این تگ بیان کننده یک نقل قول طولانی است و در HTML 5 این تگ بیان کننده یک سخن یک فرد از منبع دیگر است . به طور کلی نقل قول برای نمایش یک متن به صورت ویژه است که به طور معمول از یک منبع دیگر ذکر میشود. علاوه بر این که نمایش آن با متن های درون تگ p متفاوت است از اهمیت خاصی نیز برخودار می باشد. متن نوشته شده تگ نقل قول در HTML یا همان blockquote به صورت پیش فرض از حاشیه ها فاصله مشخصی خواهد داشت.درون

استایل / Style در HTML

استایل   Style در HTMLدر مقاله قبلی شما را با " صفت / Attribute در HTML " آشنا کردم . یکی دیگر از صفت های کاربردی HTML که قبل از مهم شدن مقوله ای به نام سئو و پیشرفت CSS زیاد مورد استفاده قرار می گرفت Style  می باشد . یک صفت کاربردی با قابلیت های فراوان که ترکیب بندی و تغییر اجزای صفحه را براحتی انجام می داد. بطوریکه بسیاری از صفاتی که تا آن زمان برای تغییر رنگ , تغییر فونت , تصویر زمینه و ... استفاده می شد , اکنون با صفت style جایگزین شده بود . صفت style در واقع دروازه ورود به CSS است . از این صفت جهت نوشتن کدهای CSS در تگ های HTML استفاده می شود. اما امروزه زیاد کاربرد ندارد مگر اینکه بخواهیم یک قالب ساده با کدهای کم ایجاد کنیم زیرا استفاده از این تگ باعث سنگین شدن صفحه وب سایت در نتیجه دیر لود شدن قالب می شود .
دستورات CSS را هم میتوان بطور مستقیم در صفحه HTML نوشت , هم میتوان آنرا در یک فایل CSS جدا نوشت . برای اینکه دستورات CSS را مستقیما در خود صفحه بنویسیم , از صفت style استفاده می کنیم .

صفت / Attribute در HTML

صفت attribute در html

صفت Attribute در HTML یکی از اصلی ترین بخش ها و بهتر است بگویم تگ هایی است که اگر از آن به درستی استفاده نشود نمی توانید تنظیمات ظاهری و چیدمان درستی در صفحه داشته باشید . ما به وسیله صفت ها در HTML میتوانیم کنترل بیشتری بر تگ ها داشته باشیم. بسیاری از تگ ها صفت های منحصر به فردخود را دارند که به این صفت ها، صفت های اختصاصی میگویند. اما بعضی از صفات نیز بین تگ ها مشترک است و در همه آنها یک کار را انجام میدهند. به این صفت ها، صفت های عمومی گفته میشود.  به عنوان مثالی در HTML ، تگ h2 را در نظر بگیرید. این تگ صفتی به نام align دارد که ترازبندی متن (text alignment) سرتیتر را تنظیم می کند و می تواند یکی از مقادیر “”right ، “left” یا center”" را بپذیرد. مثلا اگر بخواهیم تیتر یک پاراگراف را “وسط چین” کنیم از مقدار “center” برای صفت align آن تگ تیتر استفاده می کنیم.

آموزش طراحی Menu سایت با HTML5 و CSS

2 آموزش طراحی Menu سایت با HTML5 و CSS

با یکی دیگر از آموزشهای سایت آسارایان با عنوان "آموزش طراحی Menu سایت با HTML5 و CSS" در خدمت شما هستم .تمام وب سایتهای اینترنتی دارای Menu می باشند و منو اصلی ترین بخش یک قالب وب سایت به شمار می آید که اگر بدرستی تنظیمات و رنگ آن انتخاب نشود ، دسترسی به قسمت های مختلف سایت تقریبا امکان پذیر نمی باشد .  در این مقاله آموزشی با استفاده از Html5 و Css یک منوی افقی برای شما طراحی می کنم و آموزش آن را همراه با کد و تصاویری که در ادامه آماده کرده ام قرار میدهم. برای درک بهتر می توانید ابتدا دمو را مشاهده کرده و فایل اصلی را در پایان آموزش دانلود کنید . سعی کنید ابتدا یک بار آموزش را دقیق بخوانید سپس دمو را مشاهده و اگر به نتیجه نرسیدید از فایل اصلی استفاده کنید . سطح این آموزش متوسط ، پیشرفته می باشد و تگها به صورت کامل توضیح داده نمی شود . کاربرانی که می خواهند کاربرد تگ های CSS را بدانند باید به بخش مقدماتی سایت مراجعه کنند .

 دموی آموزش

آموزش ساخت فرم خبرنامه با استفاده از HTML و CSS

2 آموزش ساخت فرم خبرنامه با استفاده از HTML و CSSعضو خبرنامه سایت آسارایان هستید ؟ یک فرم که ایمیل شما را دریافت و در بانک اطلاعات سایت ذخیره می کند و هر روز سر یک ساعت خاص آموزشهای فعال شده تا زمان مشخص شده را به ایمیل شما ارسال می کند .  این فرم از دو بخش تشکیل شده . بخش اول که با HTML و CSS طراحی شده و بخش دوم که مربوط به زبان سمت سرور و پایگاه داده می شود. بنده بخش اول را میخواهم در ادامه برای شما با استفاده از تگ های HTML  و CSS طراحی کنم . کار بسیار ساده و راحتی می باشد که کاربران به راحتی می توانند انجام بدهند . با من همراه باشید تا روش انجام اینکار را توضیح بدهم .  

آموزش طراحی فرم Login با استفاده از HTML و CSS

7 آموزش طراحی فرم Login با استفاده از HTML و CSSیکی از اصلی ترین بخش های وب سایت پویا یا داینامیک ، فرم ثبت نام و ورود کاربران می باشد . هیچ وب سایتی داینامیکی وجود ندارد که دارای فرم ثبت نام نباشد مگر اینکه دارای انجمن باشد .  فرم ثبت نام به صورت پیش فرض باید با Html طراحی شده سپس با Css  شکل ظاهری آن تغییر کند و در پایان با زبان های برنامه نویسی پیشرفته مثل PHP یا ASP باید به یک پایگاه داده متصل شوند.
در ادامه میخواهم روش طراحی یک فرم ثبت نام را به صورت ساده و بدون هیچ طرح خاصی توضیح بدهم تا به راحتی بتوانید با استفاده از یکسری از تگ های ساده فرمتان را طراحی و شکل ظاهری آن را تغییر بدهید .  برای شروع نیاز به یک ویرایشگر متن مثل نوت پد یا دریم ویور دارید تا به راحتی کدتان را در آن تایپ کرده و نتیجه را مشاهده کنید . در این مطلب آموزشی بر خلاف دیگر مقالات می خواهم فایل و کدهای مربوط به ظاهر قالب که در CSS تایپ می شود را در خود فایل index.html در قالب style ذخیره کنم. بد نیست با این روش نیز آشنا شوید .

قبل از شروع آموزش باید در مورد تگهایی که در فرم مورد استفاده قرار میگرد کمی توضیح بدهم.
فرم های به طور کلی دارای یکسری گزینه ها مثل کادرهای متنی ( TextBox ) ، ليست های بازشو ( Drop-Down Lists ) ، دکمه های گزينشی ( CheckBox ) و ...  هستند .

در پایان می توانید فایل تمرینی را دانلود و از آن استفاده کنید

مشترک این خوارک خبری شوید
تک وب دیزاین-قالب فارسی جوملا