رفتن به مطلب
بازگشایی انجمن! ×
GuardIran

پست های پیشنهاد شده

با سلام

 

اموزش زبان html در انجمن بسیار زیاد بود اما هیچ کدام در قالب css3 نبوده است.

 

بنده قصد دارم اموزش کامل html5 در قالب css3 خدمت عزیزان ارئه بدم.

 

و این نکته را هم بگم که وقتی که اموزش هایمان به حد نصاب رسید پروژه قرار داده می شود.

 

قوانین:

 

سوالات در بخش مربوطه پرسیده شود. بنده و دوستان پاسخ گو هستند.

 

پسورد تمامی فایل ها

 

guardiran.org

 

می باشد.

 

کسانی که تمایول به همکاری دارند با من هماهنگ کنند تا اموزش هایشان قرار داده شود.

 

تشکر نشانه رضایت شماست

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر


           با سلام

 

           در این قسمت از اموزش قرار بنده شما را با تاریخچه html اشنا سازم.

 

              تاریخچه:

This is the hidden content, please

 

 

 

تشکر نشانه رضایت شماست

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر


ساختار ایجاد سایت:

 

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

 

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

This is the hidden content, please

 

تشکر نشانه رضایت شماست

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر


با سلام

 

در این اموزش با انواع تگ ها اشنا می شویم:

 

This is the hidden content, please

Block-level: تگهای این گروه، قبل و بعد از خود تگ BR دارند و بر روی یک پاراگراف عمل میکنند. اشیای دیگر قبل و بعد از آن در سطر
 
های مجزا قرار میگیرند. این گروه ایجاد یک بلوک میکنند.
 
Inline-level: تگهای این گروه، تگ BR ندارند و فقط دربرگیرنده متن و داده هستند و یک بلوک مجزا تشکیل نمیدهند.
 
Container: تگهایی که تگ آغازین و پایانی دارند و دستورالعمل ها و مشخصه های تب آغازین به هرآنچه پس از آن ، تا تگ پایانی وجود
 
دارد اعمال میشود.
 
<Tag name>……………………. </Tag name>
 
Empty: تگهایی که نیاز به تگ پایانی ندارند.
 
<Tag name>
 
تگها دارای attribute میباشند که ویژگی تگها را مشخص میکنند. اما با وجود css استفاده از این attribute ها کم شده است به همین
 
دلیل در ادامه به توضیح چند attribute مهم در برخی تگها خواهیم پرداخت و با استفاده از css ویژگیهای تگها را مشخص خواهیم نمود.
 
<tagname attribute="value">
 
بنده برای دوستان لیستی اماده کردم که تمامی تگ های html5 در ان نوشته شده است و نوع ان هم مشخص شده است.
 
برای دانلود کلیک فرماید:
 
This is the hidden content, please
 
تشکر نشانه رضایت شماست
 
لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر


ساختار ایجاد صفحات سایت:

 

یک فایل notepad باز کنید. اولین خط دستوری که باید نوشته شود:

 

<Doctype html!>

 

این دستور نسخه html را مشخص مینماید تا مرورگر بداند از کدام نسخه html استفاده شده است. Doctype هر نسخه متفاوت است. دستور

 

بالا نشان میدهد که از html5 استفاده شده است.

 

دستور بعدی

 

<html>

<html/>

                                                                                                                                                                                                                                                                       

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

 

بعد از تگ باز html دستور

 

<head>

<head/>

 

نوشته میشود. داخل این تگ، تگهای مربوط به عنوان صفحه و همچنین دستورات css نوشته میشود.

 

بعد از تگ باز head دستور

 

<title>

<title/>

 

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

 

 

This is the hidden content, please

 

می بینید که بنده فلش رو سمت تیتر عبارت تیم امنیتی گارد ایران بردم.واقع امر اینکه طراح این وب سایت در وسط تگ title عبارت تیم امنیتی گارد ایران رو تایپ کرده است به همین علت در ان قسمت شما عبارت تیم امنیتی گارد ایران رو مشاهده می کنید.

 

(خواستم متوجه بشید که title دقیقا کجا را نمایش میده)

 

بعد از تگ بسته head دستور

 

<body>

<body/>

 

نوشته میشود. تمامی تگهای مورد نیاز صفحه داخل این تگ قرار میگیرد. در حقیقت بدنه اصلی صفحه میباشد.

 

 
This is the hidden content, please

 

تشکر نشانه رضایت شماست

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر


با سلام


 


قرار در این قسمت توضیحاتی درباره ذخیره فایل ها خدمت عزیزان ارائه بدم.


 


برای ذخیره اولین صفحه باید یکی از نامهای index,default,main را انتخاب کنید. پسوند فایل ذخیره htm یا html میباشد. این دو پسوند در سیستم ویندوز تفاوتی ندارند ولی در سیستم عامل های یونیکس پسوند html حتماً باید سه حرفی

 

باشد به همین دلیل اگر سیستم عامل هاست، یونیکس باشد htm را به عنوان پسوند انتخاب کنید. اگر از حروف فارسی استفاده کردید هنگام ذخیره فایل از لیست بازشو Encoding گزینه Unicode را انتخاب کنید. (که البته این کار اصلا

 

جالب نیست و بهتره است که با تگ meta این کار رو انجام دهیم.)

 

تشکر نشانه رضایت شماست

This is the hidden content, please

This is the hidden content, please

This is the hidden content, please

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر


توضیحاتی درباره css3:


 


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

 

استفاده از css ویژگیهای تگها را مشخص خواهیم نمود.

 

<"tagname attribute="value>

 

:Cascading style sheets css

 

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

 

۱- نوشتن کدهای کمتر برای کم شدن حجم صفحات html و بارگذاری سریعتر صفحات html

 

۲- مدیریت ساده طراحی از یک نقطه

 

۳- پوشش ضعفهای html در بخشهای مختلف

 


Css مجموعه دستوراتی است که به تنهایی قابلیت اجرا ندارند و باید در بستر html استفاده شود. پس تنها با یک فایل css نمیتوان صفحه وب طراحی کرد. فقط برخی از دستورات html (مثل : attribute ها) با دستورات css جایگزین

 

شده است.

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر


محل نوشتن دستورات css:

 

Inline: گاهی اوقات طراح سایت نیاز به یک دستو css که فقط در یک بخش از سایت استفاده میشود، دارد و در بقیه قسمت های سایت ان  دستور کاربردی ندارد به همین دلیل دستورات css را به صورت attribute در داخل تگ می 

 

نویسند.

 

<tagname style="css code" >

 

مشکلات این روش:

 

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

 

همین دلیل توصیه میشود که از این روش کمتر استفاده شود.

 

Embedded: طراح وب برای نوشتن استایلی که فقط در یک صفحه استفاده میشود از این روش استفاده میکند و دستورات خود را در داخل <style></style>  این تگ داخل <head></head> نوشته می شود.

 

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

 

This is the hidden content, please

 

روش دیگری می ماند با اسم External که از مزایا ان می توان حجم کد کمتر و مدیریت اسان تر و دارای تمامی امکانات کد های CSS بیان کرد. به عبارت دیگر بهترین روش همین روش External است.

 

در اموزش بعدی به روش External  می پردازیم و فیلم اموزشی نیز در این مطلب اماده خواهد شد.

 

موفق و پیروز باشید

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر


  • 1 ماه بعد...

با سلام

 

با کمی تاخیر باز برگشتم تا یکی دیگر از اموزش های html5 در قالب css3 در خدمت شما عزیزان باشم.

 

در این قسمت ما بیشتر به css می پردازیم و شما را با تگ link اشنا می کنیم.

 

مدت زمان فیلم:

 

8 دقیقه و 7 ثانیه.

 

پسورد فایل ها:

guardiran.org

 

This is the hidden content, please

 

This is the hidden content, please

 

This is the hidden content, please

 

This is the hidden content, please

 

This is the hidden content, please

 

تشکر نشانه رضایت شماست

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر


  • 4 ماه بعد...

۹ نکته طلایی درمورد css :

 

۱- در هر tag شما ‫فقط یکبار می توانید از خصوسیت استایل استفاده کنید.

 

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

 

۳- از دستور link به هر تعداد می توان استفاده کرد اما توصیه شده که بیش از ۷ مورد استفاده نشود.

 

۴- طراحان حرفه ای بر روی فایل های css خود برنامه ریزی می کنند به طوری که دستورات تقسیم بندی می کنند که در هر صفحه فقط فایل - های css مربوطه دانلود شود و دستورات css اضافی دانلود نشود.

 

۵- اولویت اول دستورات css با روش inline است. اما در روش embedded و external اولویت بستگی به محل نوشته شدن تگ style و LINK دارد یعنی هر کدام از دستورات که پایین نوشته شود اولویت بالاتری دارد. این اولویت ها فقط مربوط به دستوراتی است که هم پوشانی داشته باشد.

 

۶- در دستورات css به جای علامت مساوی از علامت دو نقطه استفاده می شود.

 

۷- مقادیر دستورات css لازم نیست که  در داخل "یا ' قرار گیرد. مگر اینکه مقدار دستورات شامل space باشد.

 

۸- دستورات css فاصله ندارند و به جای آن از - (دش) استفاده می شود.

 

۹- در انتهای دستورات css حتما باید علامت ; قرار بگیرد.

 

در اموزش بعدی بیش تر درباره ‫‪external‬‬ ‫و‬ ‫‪embedded‬‬ صحبت خواهیم کرد و وارد بحث ‫‪selector‬‬ ها می شویم در ضمن در اموزش های جلو تر قست های مورد نیاز فیلم تصویری قرار می گیرد.

 

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

 

باتشکر و یاعلی

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر


  • 5 ماه بعد...

با سلام خدمت دوستان

 

در این قسمت ما بیش تر با روش های external و embedded می پردازیم و شما را با selector اشنا می کنیم ولی قبل از اون ما یه عذرخواهی خیلی ویژه به تیم امنیتی گاردایران بدهکاریم...

 

راستش این چند وقت انقدر درگیر زندگی شده بودیم که وقت نکردیم به تیم گاردایران سربزنیم و درخدمت شما باشیم و البته یه بد قولی هم سر اقای DeMoN کردیم مبنا بر موندنمون ولی انشا الله حالا بتونیم در کنارتون باشیم.

This is the hidden content, please
/emoticons/smile@2x.png 2x" width="20" height="20" /> 

 

بریم سراغ اموزش:

 

در روش embedded و external دستورات css جداگانه نوشته شده و باید بر روی بخشهایی از صفحه اعمال شود. برای تعیین بخشهای مورد نظر که میخواهید استایلها بر روی آن اعمال شود از selector ها استفاده کنید. در

 

روش embedded و external برای مشخص کردن مجموعهای از دستوراتی که باید بر روی یک یا چندین تگ اعمال شود دستورات را در داخل {} بنویسید. حال هر کجا که selector ها به آن اشاره میکنند مجموع این

 

دستورات با هم بر روی آن بخش اعمال می گردد.

 

حالا با انواع selector ها اشنا می شوید: 

 

۱- tag modify : در این روش شما میتوانید استانداردهای یک تگ را تغییر دهید و آن تگ را برای خود سفارشی کنید. به عبارتدیگر هر وقت از آن tag استفاده میکنید خصوصیاتی که قبلا برای آن معرفی کردهاید را میگیرد.

 

برای حالت tag modify کافیست قبل از علامت {}  نام تگ را بنویسید. حال هر کجای صفحه از این تگ استفاده کنید آن خصوصیات اعمال میشود.

This is the hidden content, please

۲- class : گاهی اوقات طراح وب میخواهد فقط برای بعضی از tag های html خود استایل بنویسد برای این منظور از class selector استفاده میکند . برای تعریف یک selector class قبل از } نام class را بنویسید و

 

در هر tag که نیاز به آن style دارید خصوصیت class را برابر با نام کلاس قرار دهید. نام class با عدد شروع نمیشود. قبل از نام کلاس در تگ استایل علامت . قرار میگیرد.

This is the hidden content, please

۳- id: گاهی اوقات طراح وب بنا به دلایلی بخشهایی از صفحه را نامگذاری میکند. به دلیل نامگذاری، آن بخش از بخشهای دیگر صفحه جدا گردیده و میتوان برای آن بخش style نوشت. برای نوشتن style علامت # و نام id را قبل

 

از علامت } بنویسید.

This is the hidden content, please

۴- compound : گاهی اوقات طراح وب میخواهد برای بخشهایی از صفحه که دارای یک آدرس مشخص است استایل بنویسد. برای این منظور کافی است آدرس محلی که میخواهید style اعمال شود را مشخص کنید. برای تعیین

 

آدرس میتوانید بر اساس نام تگ نام class و یا نام id آدرس را تعیین کنید. برای مشخص کردن یانکه کدام tag درداخل کدام tag قرار دارد باید بین tag ها از space استفاده کنید. در تعریف آدرس شما میتوانید از tag هایی که

 

تاثیری در آدرس ندارند چشم پوشی کنید.

This is the hidden content, please

۵- *: هر زمان بخواهید یک style بر روی تمام tag ها اعمال گردد از * قبل از } استفاده کنید. در این حالت تمام tag ها جدا از نام tag ، class و id این استایل را دریافت میکنند.

This is the hidden content, please

۶- ,: زمانی که بخواهید برای چندین تگ یک استایل بنویسید میتوانید قبل از علامت } نام تگهای خود را نوشته و بین آنها از علامت ، استفاده کنید.

This is the hidden content, please

نکات

 

  • در صورتی که بخواهید بر روی بخشی از صفحه چند class به طور همزمان اعمال شود می توانید در خصوصیت class تگ مورد نظر نام class ها را نوشته و با space آنها را جدا کنید. اولویت با آخرین class می باشد.
  • Id به دلیل اینکه فقط به یک نقطه از صفحه اشاره می کند اولیت بالاتری دارد، بعد از آن اولویت class می باشد و در انتها اولویت tag modify است.
  • در روش compound اولویت بستگی دارد به نحوه نوشتن compound . به عبارت دیگر در صورتی که از id استفاده کنید اولویت بالاتری پیدا می کند تا class.
  • در صورت تعریف دو selector با اولویت برابر، اولویت با پایین ترین دستور است.

 

 ​در جلسه بعدی چند کار عملی شروع می کنیم  

This is the hidden content, please
/emoticons/wink@2x.png 2x" width="20" height="20" />

 

تشکر نشانه رضایت شماست

 

یاعلی

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر


با سلام دوباره به همه دوستان

 

با ادامه اموزش های html5 در قالب css3 در خدمت شما هستیم.

 

 

در این آموزش چی یاد میگیریم؟

 

 

در این قسمت قرار با تگ های h1 تا h6 و p  و div بیشتر آشنا بشیم.

 

این قسمت با اموخته های قبلی یک صفحه وب خیلی ساده ایجاد کردیم.

 

قصد داریم آموزش ها رو پروژه ای محوری کنیم!

 

 

اموزش ها در 3 پارت قرار داره که پس از دانلود در یک مکان اکسترکت کنید.

 

 

پسورد فایل ها : guardiran.org

 

 

 

This is the hidden content, please

 

This is the hidden content, please

 

This is the hidden content, please

 

 

اسپم ممنوع و سوالات خودتون رو در بخش مربوطه بپرسید.

 

 

نکته : دوستان برای شما یه فایل تمرین گذاشتم! سعی کنید عکسی رو ک پیوست کردم رو بسازید . حتما این کار رو بکنید و بعد آموزش بعدی رو تماشا کنید.

 

 

اینم عکس سعی کنید چیزی شبیه تصویر زیر بسازید:

 

This is the hidden content, please

 

 

در آموزش بعدی کد های تمرین رو قرار میدم که ایراد های خودتون رو پیدا کنید>!

 

 

تشکر نشانه رضایت شماست

 

ممنون و یا علی

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر


  • 2 هفته بعد...

به نام خدا

 

با سلام خدمت دوستان گرامی

 

در این قسمت ابتدا قرار سورس کد های پروژه قسمت قبل رو خدمت شما عزیزان قرار بدیم.

 

اینم سورس کد های این پروژه:
 

This is the hidden content, please

 

فقط دو کد جدید در این پروژه قرار گرفته بود که به ترتیب: margin-bottom و margin-top است.

 

که این دو که فاصله شما رو از بالا و پایین صفحه تایین می کنند همین . روش تعریفشون هم به این شکل است:

This is the hidden content, please

و یا 

This is the hidden content, please

بریم برای آموزش این قسمت:

 

این قسمت قرار با دستور float در css اشنا بشیم.

 

خواصیت float این است که اگر به خواهیم جسمی را در راستای محور X ها (محور افقی)  شناور کنیم باید از خواصیت float استفاده کنیم.

 

خب با توجه به این توضیحات شما باید توانید تصویر زیر را بسازید:

 

This is the hidden content, please

 

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

 

در قسمت های بعدی علاوه بر سورس کد با تگ Span نیز اشنا می شین.

 

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

 

با سپاس و یاعلی

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر


  • 3 هفته بعد...

به نام برنامه نویس هستی

 

با سلام خدمت دوستان

 

قرار در این قسمت از آموزش ها بنده تمامی آموزش هایی رو که کاربر abarestan به صورت نوشتاری قرار دارند رو به صورت تصویری قرار بدم. این تاپیک هماهنگ شده با کاربر abarestan می باشد.

 

این قسمت : معرفی تگ های اصلی سایت | آموزش باز و بستن تگ ها .

 

مشخصات ویدیو:

 

1- آموزش تصویری فرمت فایل avi.

 

2- آموزش به همراه صدا برای افزایش درصد یادگیری.

 

3- پسورد فایل در صورت لزوم: guardiran.org

 

 

لینک آموزش با بالاترین کیفیت در آپلود سنتر خارج از انجمن:

 

This is the hidden content, please

 

 

اینم همون آموزش کیفیت پایین . آپلود در انجمن:

 

This is the hidden content, please

 

This is the hidden content, please

 

تشکر نشانه رضایت شماست

 

با سپاس و یاعلی

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر


به نام برنامه نویس هستی


 


با سلام خدمت دوستان


 


قرار در این قسمت از آموزش ها بنده تمامی آموزش هایی رو که کاربر abarestan به صورت نوشتاری قرار دارند رو به صورت تصویری قرار بدم. این تاپیک هماهنگ شده با کاربر abarestan می باشد.


 


این قسمت : معرفی تگ head  هستش 


مشخصات ویدیو:


 


1- آموزش تصویری فرمت فایل avi.


 


2- آموزش به همراه صدا برای افزایش درصد یادگیری.


 


3- پسورد فایل در صورت لزوم: guardiran.org


 


 


لینک آموزش با بالاترین کیفیت در آپلود سنتر خارج از انجمن:


 


This is the hidden content, please

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر


  • 6 ماه بعد...

به نام برنامه نویس هستی


 


عرض سلام خدمت تمامی کاربران تیم امنیتی گارد ایران


 


در جلسه ابتدا مروری بر تگ های اصلی سایت و تگ head  کرده ایم اما اصل آموزش در خصوص مفهوم لینک دهی درhtml است که به صورت مفصل و ساده به شما عزیزان آموزش داده شده !


 


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


 


مشخصات ویدیو:


 


1- آموزش تصویری فرمت فایل mp4.


 


2- آموزش به همراه صدا برای افزایش درصد یادگیری.


 


3- پسورد فایل در صورت لزوم: guardiran.org


 


 


 : لینک آموزش با بالاترین کیفیت در آپلود سنتر خارج از انجمن:  


 


This is the hidden content, please

 

 


تشکر نشانه رضایت شماست * *


لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر


به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • ایجاد مورد جدید...