آموزش طراحی قالب از صفر - جلسه دوم تگ های html 1



visibility  
mode_comment   ۴۷

خوب چون قول داده بودم که آموزش رو از صفر شروع کنم ممکنه یه سری حوصلشون سر بره اشکالی نداره من سریع سعی می کنم بنویسم تا اونایی که یه چیزایی بلدن هم استفاده کنن درضمن توصیه می کنم همه کامل بخونن ممکنه یه سری نکات ریز رو ندونن بعد بعدا که ازش استفاده می کنم نفهمن چی می گم. خوب قبل از شروع برنامه نویسی باید بفهمیم تگ چیه؟ هر زبانی قواعد خودش رو برای حرف زدن داره به زبان عامیانه اگر بخوام بگم اون کلماتی که تو زبان برنامه نویسی استفاده میشه رو تگ می گن بهش خوب حالا می خوایم با زبان HTML وبرخی از تگ های اون و کاربرد هاش آشنا بشیم قبل از اون بگم که به نظر من خوبه که از نرم افزار notepad++ برای برنامه نویسی تحت وب استفاده کنین چون هم عالیه هم کم حجم

*نکته : برای اینکه به برنامه بفهمونیم حرفمون کی تموم میشه باید تا یه جایی حرفمون رو بزنیم بعد بهش بگیم خوب الآن حرفم تموم شد!واسه همین تقریبا همه ی دستورها یه تگ آغازین دارن و یه تگ پایانی!اگر گیج شدین اشکالی نداره بیاین جلو متوجه می شین زبان HTML با تگ شروع میشه و با تگ تموم میشه کلا کافیه قبل از حرف اول هر تگ / اضافه کنیم تا اون تگ به یه تگ پایانی تبدیل بشه.سعی کنید هرچیزی که میگم رو از همین الآن توی نرم افزار کدزنیتون حالا چه اینی که من گفتمه یا چه نوت پد خود ویندوزه یا هرچیزه دیگه ای بزنید و تست کنید یعنی تا اینجای کار برناممون شده:

خوب حالا برنامتون رو سیو کنید با اسم index.html همونطور که میبینید یه فایل با همین اسم ساخته می شه که اگه روش کلیک کنید تو مرورگرتون باز میشه حالا توی صفحتون چی میبینید؟هیچی!چرا؟چون ما صرفا به مرورگر فهموندیم می خوایم به زبان HTML باهاش حرف بزنیم اما هنوز حرفی نزدیم که نشونمون بده!یک برنامه به زبان HTML از دو بخش تشکیل شده بخش HEAD و بخش BODY

-بخش HEAD جایگاه اسم صفحه ، کلیدواژه ها و امثال اینهاست

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

خوب بخش HEAD و BODY هم مثل تگ اولمون با اسم خودشون شروع می شن و با تگ پایانیشون تموم میشن!

*نکته : تگ HEAD قبل از تگ BODY قرار می گیره حالا اگه برناممون رو ادامه بدیم اینطوری میشه

خوب اگه ببینید اسم صفحمون الآن آدرس فایلمونه فرض کنید الآن می خوایم اسم صفحمون رو به "اولین برنامه ی من" تغییر بدیم،همونطور که گفتم نام صفحه از مواردیه که توی بخش HEAD قرار می گیره برای اینکا از تگ TITLE استفاده می کنیم یعنی الآن کدمون میشه:

حالا اگه سیو کنید و صفحتون رو باز کنید میبینید که احتمالا اسم صفحه عوض شده ولی یکسری حروف مثل حروف چینی داره نمایش داده میشه این ایراد از انکودینگ هست برای رفع اون اگر از نوت پد دیفالت استفاده می کنید هنگام سیو زیر جایی که اسم فایل رو می نویسید انکودین رو به UTF8 تغییر بدید و اگر از نوت پد ++ استفاده می کنید از تب های بالا روی تب پنجم انکودینگ Encoding کلیک کنید و UTF8 روانتخاب کنید.

خوب حالا صفحتون رو دوباره باز کنید میبینید که این اتفاق افتاده و اسم صفحه درست شده! حالا یکم هم با بخش BODY کار کنیم تا بحث زیاد طولانی و خسته کننده نشه

بعضی از تگ هارو میشه یکسری توضیحات هم جلوشون دربارشون داد یکی از این تگ ها تگ BODY هست و یکی از توضیحات این تگ بکگراند یا عکس پشت زمینه صفحه هست فرض کنید می خوایم بکگراند صفحمون همین بکگراند  7LEARN باشه حالا کدمون میشه:

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

*نکته : اگر هیچ کدوم رو انتخاب نکنید و درکل استایلی تعریف نکنید بصورت عادی هم در طول و هم در عرض عکستون تکرار میشه

یعنی کدی که می می خوایم الآن میشه این که فقط در محور x ها تکرار بشه:

حالا اگه نگاه کنید پس زمینه مون درست شده و فقط یه مشکلی مونده اونم رنگ صفحه هست که سفیده اینجا باید از توضیحات سوم تگ BODY استفاده کنیم که BGCOLOR هست و رنگ صفحه رو مشخص می کنه شما می تونید دو جور رنگ بدید یا مثلا بنویسید bgcolor="blue" مثلا یا مث کد زیر که کد نهاییمون هست کد هگز رنگ رو بدید کد نهایی این جلسه:

7Learn Experts
comment دیدگاه کاربران
tam2145

سلام آقا محمد
آموزش تان را بسیار خوب شروع کردید ولی ادامه اش روی اساس و پایه نبود !! شما ابتدا باید معنا و کاربرد اصطلاحات تگ ، خصوصیت تگ ها و استیل و کلاس و آیدی را به صورت کلی برایشان توضیح می دادید و بعد این آموزش را می گذاشتید ، تازه قبلش باید بین تگ را به دوستان توضیح می دادید ، نه اینکه بیایید و هیچی نشده از تگ شروع کنید .
بعد بیایید هر تگ html را به صورت جداگانه و با مثال های و ویژگی های مختلف به دوستان یاد می دادید !!
این شیوه یک آموزش ایده آل و کامل برای html هست ، حتی سایت های بزرگی مانند w3schools هم از این روش استفاده می کنند !!
تازه اگر با آقا لقمان بگید که یک تست کنند آنلاین html برایتان توی سایت طراحی کنه ، که چه بهتره ، اونوقت دوستان همان لحظه کدها را می بیننند !!
——————-
راستی نویسندگی توی این سایت شرایط خاصی داره یا نه ؟؟ در کل چطوری هست ؟؟ چون من با زبان های html ، css ، vb.net و جاوا اسکریپت هم که دارم از این سایت یاد می گیرم ، آشنا هستم و گرافیک من هم خوبه …
در کل اگه دیدید که می تونم توی این سایت فعالیت کنم ، خوش حال می شوم …
ایمیل من هم : tam2145@yahoo.com
جمیل من : tam2145@gmail.com
جوابتان را در مورد درخواستم را در همین مطلب یا در چت (( از طریق یاهو یا گوگل ، هر دو هستم )) به هم بگید !!
😳 😀 😉

محمدسینا معراجیان

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

tam2145

سلام آقا محمد
درسته که اینها مربوط به css می شود ولی می شد که تگ را به طور کلی تعریف کرد و بعد می گفتید در تگ ها چه چیز هایی استفاده می شود .
اگه یک نگاه به سایت w3schools بندازید ، متوجه حرف های من می شوید . 😳 😉

محمدسینا معراجیان

دوست عزیز اولا که اگر دبلیو تری اسکولز کاملا شیرفهم می کرد که دیگه کسی نمی اومد اینجا!پس یه سری چیزا هست که سخت می کنه منم به همونا توجه کردم
درضمن کلا که گفتم تگ چیه!
ممنون

محمد بهمنی

فکر کنم حق با شما باشد. 😉
فکر کنم همین روال را در پی بگیرید بهتر باشه !! 😉
با سپاس از شما !! 😳

امیر

سلام
خیلی عالی بود
مرسی
کی ادامه آموزش رو میذارید؟

محمدسینا معراجیان

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

hajian1

سلام
روالی که تاآموزش شماره 2انجام شده است نتیجه بخش ومفیدبوده من مطمئنم درآینده نزدیک بهcssکه اساس کلیhtmlاست درآموزش طراحی وکدنویسی وب شروع خواهدشدلذاازآقای محمدسینا معراجیان درخواست می کنم باهمین روال به آموزش ادامه دهند.
مزیت این سایت به نظرمن این است که سریعاً به اشکالات کاربران پاسخ داده می شود
باتشکروسپاس فراوان ازشما

محمدسینا معراجیان

خواهش می کنم چشم

hajian1

درضمن طی چندساعت گذشته قسمت نظرات بازنمی شد
وبه طورحتم کاربران موفق نمی شدندکه نظراتشان رااعلام کنند
ازنظراطلاع عرض شد
باتشکر

محمدسینا معراجیان

حتما پیگیری میشه ممنون که خبر دادید

محمد بهمنی

مشکل از گوگل پلاس هست !!
چون قبل از نظرات فرا خوانی می شود !!
با آقا لقمان هماهنگ می کنم تا جابجا کنند و در آخر سایت فراخوانی شود !!
با تشکر از شما !! 😳

لقمان آوند

سلام محمد جان
مشکل این نبود ، برای رفع یه مشکل در قالب یکی از افزونه ها رو موقتا غیر فعال کرده بودم که باعث این مشکل عدم نمایش قسمت نظرات شده بود …

محمد بهمنی

سلام آقا لقمان
خوب خدا رو شکر !!
😉

mahdizare

من که خیلی لذت بردم
واقعا از اول تا آخر این قسمت رو که خوندم احساس یادگیری بهم دست میداد(برخلاف بیشتر سایتها که فقط چش آدمو پشت سیستم درمیارن)،با همین روش ادامه دهید.
“فی امان الله”

محمدسینا معراجیان

ممنون خوشحال میشیم شما هم مارو دنبال کنید

mehdi

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

محمدسینا معراجیان

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

mehdi

ببخشید من وقتی از روش repeat-x استفاده می کنم ، تصویر من فقط در خط آول تکرار میشه ، من میخواستم یه عکس را بدون تکرار و یه تیکه و بزرگ ،دقیقا پشت مطالبم به کار ببرم . no-repeat هم که فقط یه عکس کوچیک در سمت چپ ایجاد می کنه.باید چی کار کنم؟

لقمان آوند

باید یک عکس با سایز بزرگ رو طراحی کنید و در پس زمینه بزارید .

shima90

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

محمدسینا معراجیان

عکس رو در فولدر قالب سیو کنید و با استفاده از دستور body backgroud که توضیح داده شده به سادگی این کار رو انجام بدید

shima90

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

محمدسینا معراجیان

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

shima90

این کد لینک مستقیمشه.
http://uplod.ir/su5jpr28yc4o/7575.jpg.htm

محمدسینا معراجیان

نه توی اینجا نه توی یه سایتی مثل این:
up.vatandownload.com

shima90

http://up.vatandownload.com/images/el0lq4r9igsxsrapotnv.jpg
sharmande

محمدسینا معراجیان

خوب تو BODY قالبتون این رو بذارید

shima90

ok mamnon
😳

KP

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

محمدسینا معراجیان

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

Mostafa

آقا محمد خوب منم اول نمی دونستم انکودینگ کجاست باید می گفتید:

منوی بالا گزینه ی 5 از چپ به راست ((Encoding)) را انتخاب کنید و حالت آن را بر روی UTF – 8 قرار دهید .

این جوری بهتر نیست؟

راستی غلط های املایی را هم صحیح کنید مثه:

رنگ که نوشته بودید زنگ – کنیدئ – رئ -و…

محمدسینا معراجیان

نظراتتون اعمال شد ممنون

ani.sali

salam.

ziade ziade ziade kheyli kheyli mamnun 😀 man asheghe inam ke yad begiram chetori mitunam baraye webe khodam ghaleb besazam 😀
bazam mamnun havartaaaaaaaaaaaaaaa 😳

محمدسینا معراجیان

اموزش های بعدی رو بخونید

athar

دستتون درد نکنه!!!!!!!! 😆

نام...

ببخشید میشه کمکم کنید که این کد رو اصلاح کنم؟نمیخوام عکس زمینش تکرار بشه اما میشه

لقمان آوند

این کد رو استفاده کنید :

نام...

با تشکر….یه سوال دیگه پس چرا عکسم وسط تیبل قرار نمیگیره؟ در ضمن میخوام یه مقداری با حاشیه ی بالائی تیبل فاطله داشته باشه 😳 😳 😳 😳 😳 😳 ❓ 😳

لقمان آوند

عکس رو درون یه تگ بزار و ویژگی Text-align اون تگ رو center کن . برای فاصله دادن هم از ویژگی css ی به نام margin استفاده می کنن .

نام...

هر جائیش که مشکل داره لطفا بگید ممنون میشم

نام...

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

استفاده میکنم خود تیبل میاد وسط یا

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

لقمان آوند

کدتون رو برام بفرستید تا تغیرات رو توش اعمال کنم .

نام...

نام...
elen

مرسی بنظر من عالی بود،حرف نداشت 😳 😳 😳 😳

فاطمه

ای خدااااااااااااا
من خیلی فتوشاپ بلد نیستم . خیلی غصه خوردم نتونستم از آموزشهاتون بهره ای ببرم 🙁
بازم ممنون

add_circle ارسال دیدگاه

خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :