آموزش طراحی قالب از صفر - جلسه دوم تگ های 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" مثلا یا مث کد زیر که کد نهاییمون هست کد هگز رنگ رو بدید کد نهایی این جلسه:

comment دیدگاه کاربران
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

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

فاطمه

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

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
1 2