پرش به

  • تبلیغات تبلیغات تبلیغات تبلیغات تبلیغات تبلیغات
    تصویر

    • لطفا وارد حساب کاربری خود شوید تا بتوانید پاسخ دهید
    15 پاسخ برای این موضوع

    #1

    abarestan

    با سلام

     

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

     

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

     

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

     

    قوانین:

     

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

     

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

     

    guardiran.org

     

    می باشد.

     

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

     

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


    • mr.coxer, Mafia_IR, mzeus98 و 3 فرد دیگراز این پست تشکر کرده است

    #2

    abarestan

               با سلام

     

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

     

                  تاریخچه:

    Capture.JPG

     

     

     

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


    • mr.coxer, Mafia_IR, HACKER-IRANIAN و 5 فرد دیگراز این پست تشکر کرده است

    #3

    abarestan

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

     

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

     

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

    fg.PNG

     

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


    • C0d3!Nj3ct!0N, mr.coxer, Mafia_IR و 5 فرد دیگراز این پست تشکر کرده است

    #4

    abarestan

    با سلام

     

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

     

    tags.JPG

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

    • C0d3!Nj3ct!0N, mr.coxer, Mafia_IR و 5 فرد دیگراز این پست تشکر کرده است

    #5

    abarestan
    ساختار ایجاد صفحات سایت:
     
    یک فایل notepad باز کنید. اولین خط دستوری که باید نوشته شود:
     
    <Doctype html!>
     
    این دستور نسخه html را مشخص مینماید تا مرورگر بداند از کدام نسخه html استفاده شده است. Doctype هر نسخه متفاوت است. دستور
     
    بالا نشان میدهد که از html5 استفاده شده است.
     
    دستور بعدی
     
    <html>
    <html/>
                                                                                                                                                                                                                                                                           
    میباشد. ابتدا و انتهای محدوده صفحه را مشخص میکند و تمامی تگها داخل تگ باز و تگ بسته html قرار میگیرند.
     
    بعد از تگ باز html دستور
     
    <head>
    <head/>
     
    نوشته میشود. داخل این تگ، تگهای مربوط به عنوان صفحه و همچنین دستورات css نوشته میشود.
     
    بعد از تگ باز head دستور
     
    <title>
    <title/>
     
    نوشته میشود. این تگ مربوط به عنوان صفحه میباشد.لطف کنید تصویر زیر رو باز کنید.
     
     
    حجم: 112.88K  دریافت ها: 0
    دریافت پیوست
     
    می بینید که بنده فلش رو سمت تیتر عبارت تیم امنیتی گارد ایران بردم.واقع امر اینکه طراح این وب سایت در وسط تگ title عبارت تیم امنیتی گارد ایران رو تایپ کرده است به همین علت در ان قسمت شما عبارت تیم امنیتی گارد ایران رو مشاهده می کنید.
     
    (خواستم متوجه بشید که title دقیقا کجا را نمایش میده)
     
    بعد از تگ بسته head دستور
     
    <body>
    <body/>
     
    نوشته میشود. تمامی تگهای مورد نیاز صفحه داخل این تگ قرار میگیرد. در حقیقت بدنه اصلی صفحه میباشد.
     
     page.JPG
     
    تشکر نشانه رضایت شماست

    • C0d3!Nj3ct!0N, mr.coxer, Mafia_IR و 6 فرد دیگراز این پست تشکر کرده است

    #6

    abarestan

    با سلام

     

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

     

    برای ذخیره اولین صفحه باید یکی از نامهای index,default,main را انتخاب کنید. پسوند فایل ذخیره htm یا html میباشد. این دو پسوند در سیستم ویندوز تفاوتی ندارند ولی در سیستم عامل های یونیکس پسوند html حتماً باید سه حرفی
     
    باشد به همین دلیل اگر سیستم عامل هاست، یونیکس باشد htm را به عنوان پسوند انتخاب کنید. اگر از حروف فارسی استفاده کردید هنگام ذخیره فایل از لیست بازشو Encoding گزینه Unicode را انتخاب کنید. (که البته این کار اصلا
     
    جالب نیست و بهتره است که با تگ meta این کار رو انجام دهیم.)
     
    تشکر نشانه رضایت شماست

    فایل های پیوستی


    • C0d3!Nj3ct!0N, mr.coxer, Mafia_IR و 4 فرد دیگراز این پست تشکر کرده است

    #7

    abarestan

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

     

    همان طور که قبلا گفتم تگها دارای attribute میباشند که ویژگی تگها را مشخص میکنند. اما با وجود css استفاده از این attribute ها کم شده است به همین دلیل در ادامه به توضیح چند attribute مهم در برخی تگها خواهیم پرداخت و با
     
    استفاده از css ویژگیهای تگها را مشخص خواهیم نمود.
     
    <"tagname attribute="value>
     
    :Cascading style sheets css
     
    Css صفحهای آبشاری شکل، شامل مجموعه دستوراتی است که نیازهای طراحی را پاسخ میدهد. نیازهای طراحی عبارتند از:
     
    ۱- نوشتن کدهای کمتر برای کم شدن حجم صفحات html و بارگذاری سریعتر صفحات html
     
    ۲- مدیریت ساده طراحی از یک نقطه
     
    ۳- پوشش ضعفهای html در بخشهای مختلف
     
    Css مجموعه دستوراتی است که به تنهایی قابلیت اجرا ندارند و باید در بستر html استفاده شود. پس تنها با یک فایل css نمیتوان صفحه وب طراحی کرد. فقط برخی از دستورات html (مثل : attribute ها) با دستورات css جایگزین
     
    شده است.

    • C0d3!Nj3ct!0N, mr.coxer, Mafia_IR و 4 فرد دیگراز این پست تشکر کرده است

    #8

    abarestan

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

     

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

     

    نویسند.

     

    <tagname style="css code" >

     

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

     

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

     

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

     

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

     

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

     

    Capture.PNG

     

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

     

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

     

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


    • C0d3!Nj3ct!0N, mr.coxer, Mafia_IR و 5 فرد دیگراز این پست تشکر کرده است





    همچنین به اموزش html, اموزش css, اموزش html5, اموزش css3, اموزش کامل html 5, اموزش کامل css3, اموزش کامل html, اموزش کامل html در قالب, اموزش کامل html + صدا, اموزش طراحی وب نیز برچسب خورده است

    0 کاربر در حال خواندن این موضوع است

    0 کاربر، 0 مهمان و 0 عضو مخفی