تبلیغات در ترفندستان
+ ارسال تاپیک جدید
صفحه 2 از 2 نخستنخست 12
نمایش نتایج: از 11 به 17 از 17

موضوع: مدرسه html ترفندستان

  1. #1
    تاریخ عضویت
    Aug 2014
    محل سکونت
    تهران
    سن
    20
    پست‌ها
    277
    Nokia-108
    Asus-Transformer-Pad-TF701T
    Microsoft-Security-Essentials Google-Chrome Ubuntu Irancell
    نوع و سرعت اینترنت: Wireless-1 Mb/S
    سپاس (اهدایی)
    191
    سپاس (دریافتی)
    804

    New مدرسه html ترفندستان

    درود
    در این تاپیک آموزش کامل html اولیه رو ترجمه میکنم و قرار میدم .
    آموزش ها رو از وب سایت w3schools.com که بزرگترین منبع آموزش این زبان ها هست ترجمه میکنم.

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

    با تشکر

    آموزش html :جلسه اول (معرفی html وتگ های اولیه)


    مثال:
    کد HTML:
    .تنها اعضای سایت قادر به دیدن این محتوا هستند. لطفاً وارد شوید و یا برای عضویت رایگان و بی‌دردسر در سایت کلیک کنید

    توضیحات:


    تگی که بالا تر از همه می بینید تگ doctype می باشد.این تگ جهت توضیح اطلاعات تکمیلی درباره صفحه شما نوشته میشود.
    تگ html نشان دهنده شروع کد html است.
    تگ body شروع صفحه است که محتوای قابل رویت صفحه درون آن قرار میگیرد. تنها محتوای درون این تگ در صفحه دیده میشود.
    تگ h1 برای تعریف تیتر های صفحه است.
    و تگ p برای نشان دادن یک پارا گراف به کار می رود.



    اگر محتویات تگ های بالا را نمیشناسید نگران نباشید! در این جلسه و جلسه های آینده به برسسی این تگ ها و تگ های دیگر می پرازیم


    html چیست؟

    زبان برنامه نویسی اج تی ام ال محتوای صفحات وب را میسازد.
    حرف html مخفف کلمه Hyper Text Markup Language است (به فارسی زبان نوشتاری فوق متن)
    این زبان توسط عناصری به نام تگ ها نوشته میشود
    صفحات html معمولا صفحات وب نامیده می شوند.

    تگ ها چیستند؟

    تگ ها کلماتی کلیدی هستند که توسط < و> محاصره شده اند.مانند: <html>
    تگ ها معمولا به صورت جفت جفت می آید برای مثال تگ پارا گراف با این علامت <p> شروع و با این علامت </p> پایان می یابد.
    معمولا تگی که محتوا را میبندد (تگ پایانی) قبل حرف خودش /دارد.

    در این آموزش ما تگ ابتدایی را تگ باز شونده و تگ انتهایی را بسته شونده مینامیم
    <اسم تگ> محتوا </اسم تگ>

    مشاهده
    برای مشاهده صفحات html خود نیاز به مرورگر دارید مانند: google chrome ,safari,fire fox و.. (مترجم:که همه دارن اینو)
    مرورگر شما تگ ها را نشان نمیدهند اما ظاهر بیرون آمده از تگ هایتان را نشان می دهد. مانند شکل زیر:


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




    نسخه های html
    از ابتدای درست شدن اینترنت زبان های متفاوتی برای ساخت سایت ها مورد استفاده قرار گرفته است:
    نسخه
    سال
    HTML - 1991
    HTML+ - 1993
    HTML 2.0- 1995
    HTML 3.2- 1997
    HTML 4.01- 1999
    XHTML - 2000
    HTML5- 2012


    کلید تعریفی <!doctype>

    از این کلید برای تقهیم نسخه html و برخی اطلاعات پایه به مرورگر استفاده میشود.
    در نخسه های مختلف این زبان این کلید به شکل های متفاوتی نوشته میشود.
    به کد های زیر دقت کنید:
    HTML5
    کد HTML:
    .تنها اعضای سایت قادر به دیدن این محتوا هستند. لطفاً وارد شوید و یا برای عضویت رایگان و بی‌دردسر در سایت کلیک کنید

    HTML 4.01

    کد HTML:
    .تنها اعضای سایت قادر به دیدن این محتوا هستند. لطفاً وارد شوید و یا برای عضویت رایگان و بی‌دردسر در سایت کلیک کنید


    XHTML 1.0

    کد HTML:
    .تنها اعضای سایت قادر به دیدن این محتوا هستند. لطفاً وارد شوید و یا برای عضویت رایگان و بی‌دردسر در سایت کلیک کنید



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


    دوست عزیز به پاس حرمت اندیشه و قلم لطفا در صورت کپی کردن از مطلب منبع آن را نیز ذکر کنید
    [تنها اعضای سایت قادر به دیدن لینک‌ها هستند. ]
    موفق باشید
    ویرایش توسط poriya78 : August 12th, 2014 در ساعت 13:34
    بعد از 6ماه (مدرسه)
    برگشتم!
  2. #11
    تاریخ عضویت
    Aug 2014
    محل سکونت
    تهران
    سن
    20
    پست‌ها
    277
    Nokia-108
    Asus-Transformer-Pad-TF701T
    Microsoft-Security-Essentials Google-Chrome Ubuntu Irancell
    نوع و سرعت اینترنت: Wireless-1 Mb/S
    سپاس (اهدایی)
    191
    سپاس (دریافتی)
    804

    New عکس ها در html

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

    مدرسه html - جلسه 11 (عکس ها در html)
    به کد زیر دقت کنید:
    کد HTML:
    .تنها اعضای سایت قادر به دیدن این محتوا هستند. لطفاً وارد شوید و یا برای عضویت رایگان و بی‌دردسر در سایت کلیک کنید

    این کد یک عکس را فرا میخواند. در ادامه به یادگیری این کد و نحوه استفاده از آن میپردازیم.

    عکس در html:
    عکس ها در این زبان با استفاده از کد <img> قرار داده میشوند.
    تگ <img> هرگز خالی نبوده و همیشه با محتوای اضافی همراه است. همچنین این تگ هرگز بسته نمیشود. یعنی پس از استفاده از این تگ دیگر آن را نمیبندیم.
    محتوای اضافی src برای تعریف کردن آدرس صفحه در وب است. یعنی باید لینکی از یک عکس باشد.
    مانند:
    کد HTML:
    .تنها اعضای سایت قادر به دیدن این محتوا هستند. لطفاً وارد شوید و یا برای عضویت رایگان و بی‌دردسر در سایت کلیک کنید


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

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

    سایز تصاویر (محتوای اضافی height و width):
    میتوانید برای تعریف اندازه عکس از این دو محتوا استفاده کنید. این دو در style قرار میگیرند.
    کد HTML:
    .تنها اعضای سایت قادر به دیدن این محتوا هستند. لطفاً وارد شوید و یا برای عضویت رایگان و بی‌دردسر در سایت کلیک کنید

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

    اما دقت کنید که میتوانید از این دو مقدار به عنوان محتوای اضافی مستقل هم استفاده کنید به شکل زیر:
    کد HTML:
    .تنها اعضای سایت قادر به دیدن این محتوا هستند. لطفاً وارد شوید و یا برای عضویت رایگان و بی‌دردسر در سایت کلیک کنید

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

    سوال : از کدام یک استفاده کنیم؟ از استایل دادن یا به شکل مستقل نوشن؟
    جواب : هر دو نوع در آخرین نسخه html میتوانند مورد استفاده قرار گیرند.
    اما من به شما پیشنهاد میکنم از شکل استایل دادن استفاده کنید. زیرا باعث میشود که از هر واحدی که میخواهید استفاده کنید. مثلا em یا pt یا px و...
    کد HTML:
    .تنها اعضای سایت قادر به دیدن این محتوا هستند. لطفاً وارد شوید و یا برای عضویت رایگان و بی‌دردسر در سایت کلیک کنید


    اگر چه مروگر ها ترجیه میدهند که عکس را به شکل آدرس کامل دریافت کنند، اما چون استفاده از آدرس های کوتاه شده بین طراحان رایج است، میشود به شکل زیر آدرس یک عکس را کوتاه کرد:
    کد HTML:
    .تنها اعضای سایت قادر به دیدن این محتوا هستند. لطفاً وارد شوید و یا برای عضویت رایگان و بی‌دردسر در سایت کلیک کنید

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

    نتیجه:
    [تنها اعضای سایت قادر به دیدن لینک‌ها هستند. ]

    عکس های روی سرور های دیگر:

    همان طور که قبلا مثال زدیم برای اشاره به عکسی در سرور دیگر از سایت خودمان میتوانیم از آدرس مستقیم و کامل (url) استفاده کنیم.
    مانند:
    کد HTML:
    .تنها اعضای سایت قادر به دیدن این محتوا هستند. لطفاً وارد شوید و یا برای عضویت رایگان و بی‌دردسر در سایت کلیک کنید


    عکس های انیمیشنی یا gif :

    میتوانید در html از عکس های متحرک نیز استفاده کنید.
    مثال:
    کد HTML:
    .تنها اعضای سایت قادر به دیدن این محتوا هستند. لطفاً وارد شوید و یا برای عضویت رایگان و بی‌دردسر در سایت کلیک کنید


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

    معمولا روی عکس های لینک نیز میگذارند (با تگ <a> که قبلا به آن پرداختیم.)
    کد HTML:
    .تنها اعضای سایت قادر به دیدن این محتوا هستند. لطفاً وارد شوید و یا برای عضویت رایگان و بی‌دردسر در سایت کلیک کنید


    نکته: میتوانید در قسمت استایل خود border را برابر 0px قرار دهید. چون مرورگر ie به شکل اتوماتیک یک کادر برای هر عکس در نظر میگیرد که با قرار دادن این کد پاک میشود.

    نقشه عکسی :
    میتوانید در html با استفاده از کدی مانند این یک نقشه درست کنید. کد را امتحان کنید.
    کد HTML:
    .تنها اعضای سایت قادر به دیدن این محتوا هستند. لطفاً وارد شوید و یا برای عضویت رایگان و بی‌دردسر در سایت کلیک کنید


    ابتدا نتیجه کد ها را تست کنید.
    مقادیر shape به معنی شکلی در صفحه است که قرار است کاربر با کلیک روی آن شکل به صفحه دیگری منتقل شود. rect به معنای مستطیل و circle به معنای دایره است.
    coords نیز مختصات این شکل روی صفحه است که با کمی دستکاری دستتان می آید.
    href هم آدرسی است که پس از کلیک روی شکل مورد نظر کاربر به آنجا منتقل میشود.

    ویژگی float:
    میتوانید یک عکس را سمت چپ یا راست یک پاراگراف بیندازید. این کار با ویژگی float انجام میگردد.
    کد HTML:
    .تنها اعضای سایت قادر به دیدن این محتوا هستند. لطفاً وارد شوید و یا برای عضویت رایگان و بی‌دردسر در سایت کلیک کنید


    برای مقادیر float میتوانید از left به معنی چپ و right به معنی راست استفاده کنید.


    پایان آموزش

    و اما تمارین

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


    تمرین دوم

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


    تمرین سوم

    به عکس زیر لینک بدهید.

    کد HTML:
    .تنها اعضای سایت قادر به دیدن این محتوا هستند. لطفاً وارد شوید و یا برای عضویت رایگان و بی‌دردسر در سایت کلیک کنید


    تمرین چهارم
    تصویر را سمت چپ پاراگراف انگلیسی قرار دهید .
    راهنمایی : از float استفاده کنید.
    کد HTML:
    .تنها اعضای سایت قادر به دیدن این محتوا هستند. لطفاً وارد شوید و یا برای عضویت رایگان و بی‌دردسر در سایت کلیک کنید


    پایان

    این جلسه هم تمام شد. منتظر جلسات بعد باشید و تمرین کد ها یادتون نره.

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

    [تنها اعضای سایت قادر به دیدن لینک‌ها هستند. ]
    ویرایش توسط poriya78 : February 1st, 2015 در ساعت 17:59
    بعد از 6ماه (مدرسه)
    برگشتم!
  3. #12

    پیش فرض

    سلام میشه یه سایتی چیزی واسه آموزش css که ترجمه آموزشcss سایت w3school.com رو قرار داده باشه معرفی کنید
  4. #13
    تاریخ عضویت
    Nov 2015
    محل سکونت
    همدان
    پست‌ها
    1
    LG-G3-Stylus
    Asus-Google-Nexus-7
    Norton Firefox Windows-7 Irancell
    نوع و سرعت اینترنت: ADSL-256 Kb/S
    سپاس (اهدایی)
    0
    سپاس (دریافتی)
    1

    پیش فرض

    سلام من یک قالب دانلود کردم یه عکس بکگراند داره قالبه ، بعد کدشو توی css پیدا کردم میخوام عوضش کنم ولی عکس که میذارم توی پوشش آدرس url میدم باز همون عکس قبلی رو میاره چی رو اشتباه میرم؟
    [تنها اعضای سایت قادر به دیدن لینک‌ها هستند. ]
  5. #14
    تاریخ عضویت
    Jul 2005
    محل سکونت
    تهران
    پست‌ها
    23,567
    Apple-iPhone-5S
    360-Internet-Security Firefox Windows-10 IR-TCI
    نوع و سرعت اینترنت: بیش از ADSL-2 Mb/S
    سپاس (اهدایی)
    38401
    سپاس (دریافتی)
    45048
    نوشته ‌های وبلاگ
    65

    پیش فرض

    نقل قول نوشته اصلی توسط Galaxion [تنها اعضای سایت قادر به دیدن لینک‌ها هستند. ]
    سلام من یک قالب دانلود کردم یه عکس بکگراند داره قالبه ، بعد کدشو توی css پیدا کردم میخوام عوضش کنم ولی عکس که میذارم توی پوشش آدرس url میدم باز همون عکس قبلی رو میاره چی رو اشتباه میرم؟
    [تنها اعضای سایت قادر به دیدن لینک‌ها هستند. ]
    Cache مرورگر رو پاک کنید یا داخل صفحه‌ای که بک‌گراند قرار داره Ctrl+F5 بزنید تا تصویر قبلی از کش مرورگر حذف بشه.
    چیزی که تحملش سخت است، یادآوری‌اش شیرین است.
  6. #15

    پیش فرض

    سلام ممکنه آدرس عکس رو درست وارد نکرده باشی در واقع بهتره به جای اینکه آدرس رو عوض کنی عکس خودت رو با همون اسم در محل عکسی که می خوای عوض کنی reaplace کن
  7. #16

    پیش فرض

    سلام امکانش هست انتهای هر آموزش لینک فایل PDF اون رو هم قرار بدید؟
  8. #17
    تاریخ عضویت
    Jan 2014
    پست‌ها
    12,127

    360-Internet-Security Cyberfox Windows-10 Irancell
    نوع و سرعت اینترنت: Wireless-2 Mb/S
    سپاس (اهدایی)
    17466
    سپاس (دریافتی)
    17221
    نوشته ‌های وبلاگ
    37

    پیش فرض

    نقل قول نوشته اصلی توسط information96 [تنها اعضای سایت قادر به دیدن لینک‌ها هستند. ]
    سلام امکانش هست انتهای هر آموزش لینک فایل PDF اون رو هم قرار بدید؟
    سلام دوست عزیز
    .
    با افزونه مرورگر می تونید همین 2 صفحه رو تبدیل به pdf کنید

    کانال اطلاع رسانی لیسانس رایگان برنامه ها

    تلگرام

    صفحه من در اینستاگرام

    اگر سوالی رو بلدی جواب بده! نترس!


  9. سپاس ij1
+ ارسال تاپیک جدید
صفحه 2 از 2 نخستنخست 12

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

موضوعات مشابه

  1. ***کتابخانه الکترونیکی انگلیسی ترفندستانTarfandestan English E-Library***
    توسط Hamzeh.E در انجمن کتاب‌ها و مجلات الکترونیکی
    پاسخ: 463
    آخرين نوشته: June 18th, 2018, 15:03
  2. باز آمد بوی ماه مدرسه
    توسط king of cheat در انجمن اخبار، تریلر، نقد و بررسی، مقالات و بحث و تبادل نظر پیرامون‌ بازی‌‌ها و کنسول‌ها
    پاسخ: 0
    آخرين نوشته: September 21st, 2012, 00:42
  3. [حل شد] فرق ارسال مطلب در ترفندستان با سایر فرومها
    توسط AmirM.H در انجمن پرسش و پاسخ، مباحث فنی و سایر مسائل حوزه‌ی فناوری
    پاسخ: 6
    آخرين نوشته: December 8th, 2011, 01:49
  4. فارسی کردن یه نوشته در Html
    توسط miladvajedi در انجمن طراحی سایت و برنامه‌نویسی تحت وب
    پاسخ: 2
    آخرين نوشته: August 16th, 2011, 08:59

کاربرانی که این تاپیک را مشاهده کرده اند: 1

کلمات کلیدی این موضوع

مجوز ‌های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست ‌های خود را ویرایش کنید
  •  

اکنون ساعت 20:26 برپایه‌ی ساعت جهانی (GMT +3.5) می‌باشد.

تبلیغات متنی

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

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

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