محتوای تاپیک هر 5 ثانیه به طور خودکار بهروز میشود.به دلیل عدم فعالیت شما در دقایق گذشته، بهروزرسانی خودکار این تاپیک متوقف شده است. Un-Idle
- بازنگری
درود
در این تاپیک آموزش کامل 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 در ساعت 12:34
درود دوباره.مستقیم میریم سراغ آموزش. فقط این نکته رو به یاد داشته باشید که حتما کد ها رو خودتون تایپ کنید و از کپی پیست بپرهیزید. زیرا باعث یادگیری و به خاطر سپردن بهتر تگ ها میشه.
مدرسه 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 در ساعت 16:59
سلام من یک قالب دانلود کردم یه عکس بکگراند داره قالبه ، بعد کدشو توی css پیدا کردم میخوام عوضش کنم ولی عکس که میذارم توی پوشش آدرس url میدم باز همون عکس قبلی رو میاره چی رو اشتباه میرم؟ [تنها اعضای سایت
قادر به دیدن لینکها هستند. ]
نوشته اصلی توسط Galaxion[تنها اعضای سایت
قادر به دیدن لینکها هستند. ]
سلام من یک قالب دانلود کردم یه عکس بکگراند داره قالبه ، بعد کدشو توی css پیدا کردم میخوام عوضش کنم ولی عکس که میذارم توی پوشش آدرس url میدم باز همون عکس قبلی رو میاره چی رو اشتباه میرم؟ [تنها اعضای سایت
قادر به دیدن لینکها هستند. ]
Cache مرورگر رو پاک کنید یا داخل صفحهای که بکگراند قرار داره Ctrl+F5 بزنید تا تصویر قبلی از کش مرورگر حذف بشه.
سلام ممکنه آدرس عکس رو درست وارد نکرده باشی در واقع بهتره به جای اینکه آدرس رو عوض کنی عکس خودت رو با همون اسم در محل عکسی که می خوای عوض کنی reaplace کن
محتوای تاپیک هر 5 ثانیه به طور خودکار بهروز میشود.به دلیل عدم فعالیت شما در دقایق گذشته، بهروزرسانی خودکار این تاپیک متوقف شده است. Un-Idle
- بازنگری