آموزش طراحی وب سایت در کیش

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

تماس با ما

اما در دوره آموزشی رایگان HTML و CSS چه چیزی یاد میگیریم؟

1- اینکه اچ تی ام ال چی هست.

2- ساختار صفحات وب چگونه است؟

3-CSS چی هست و دستورات پایه اش چیا هستن

4- یک پروژه هم خواهیم داشت که دوره مون کاملاً کاربردی بشه

1- HTML چی چی هست؟!
2- تگِ p ( پاراگراف ) و تگ های heading
3- مفهموم HTML و CSS ، شروع آموزش CSS
4- انواع استایل دهی , متاتگ Charset
5- بریم تو کار جداول در HTML
6- یَک دِنِه تگِ مَشتی و بدرد بخور که بهش مِگَن تگِ a
7- تگِ بسته img در HTML

– HTML چی چی هست؟!

با یک دوره آموزشی بی نهایت ساده و جذاب و کاربردی طراحی وب سایت در کیش در خدمتتون هستیم.

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

یادتون نره که ما رو هم دعا کنین 🙂

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

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

برای ورود به دنیای طراحی سایت در مرحله اول احتیاج به دو تا زبان داریم ، یکی زبان HTML و یکی زبان CSS

حالا اول میخوایم براتون بگیم که زبان HTML و CSS چیه؟؟ بعد از اون شروع میکنیم به آموزش HTML و آموزش CSS 🙂

HTML مخفف Hyper Text Markup Language هست. خب حالا این یعنی چی؟؟؟!!

معنیش به زبان ساده میشه، زبان نشانه گذاری متن خفن! 😯 دقت کنین که HTML زبان برنامه نویسی نیست، یک زبان نشانه گذاری هست اونم به وسیله یک سری تگ (بر چسب). خب اگر باز هم متوجه نشدین هیچ اشکالی نداره. همین اول کار نذارین برین، ما هنوز راه درازی رو قراره با هم باشیم.

دست به کد شو!

الان میخوایم براتون یه سری کد بنویسیم تا کاملا متوجه بشین. اولین کدی که ما در روند طراحی سایت باید بنویسیم خییییییییییلی آسونه.

حالا با ساده ترین ابزار موجود میخوایم کار کنیم. لطفاً دفترچه یادداشت (Notepad) ویندوز رو باز کنین و شروع کنین به نوشتن. <!DOCTYPE html> //0 <html> //1 open <head> //2 open <title> //3 open </title> // 3 closed </head> //2 closed <body> //4 open </body> //4 closed </html> //1 closed

12345678910111213

<!DOCTYPE html> //0<html> //1 open<head> //2 open <title> //3 open </title> // 3 closed</head> //2 closed<body> //4 open </body> //4 closed</html> //1 closed

خب حالا اینا چی هستن؟؟ اینا همون تگ ها (برچسب ها) هستن که بهتون گفتیم. توضیحات مفصل رو بعداً بهتون میگیم الان فقط در همین حد توضیح میدیم، اونایی که شماره هاشون یکیه، شروع و پایان یک تگ هستن.

مثلاً: 1open میشه شروع تگ <html> (به تگ شروع میگن “تگِ باز”) و 1closed میشه پایان تگ <html> (به تگ پایان میگن “تگِ بسته”) که در این بین ما میتونیم تگ های دیگه ای رو بنویسیم. در کل ما بین هر تگ باز و بسته میتونیم هر قدر که دلمون بخواد تگ قرار بدیم.

خب اونی که شمارش صفر هست یعنی چی؟ اون مخفف document type هست. معنیش این میشه که فایل ما از نوع HTML باشه. و این تگ در تمام سایت ها نوشته میشه و نوشتنش ضروریه.

فایلی رو که نوشتین با نام index.html رو دسکتاپ ذخیره کنین. همچنین encoding فایل رو روی UTF-8 قرار بدین تا از زبان فارسی پشتیبانی کنه. حالا فایلی رو که روی صفحه ایجاد شده باز کنین. خب می بینین که یک صفحه مرورگر باز میشه و توی اون هیچی ننوشته که طبیعی هم هست چون ما هنوز چیز خاصی درست نکردیم.

در تب باز شده تو مرورگرتون میببینین که نوشته index.html مثل تصویر زیر:

تگ ” <title> “ :

خب ما میخوایم اون چیزی که دلمون میخواد رو داخل تب بنویسه. مثلاً تب دوم رو می بینین که نوشته “خانه – آموزشگاه طراحی سایت”. برای انجام این کار باید وارد فایلی که نوشتیم بشیم و داخل تگ باز و بسته ” <title> “ مینویسیم “this is a test” اینم کدش “ <title> this is a test </title> ”

حالا تغییرات رو ذخیره میکنیم و دوباره وارد مرورگرمون میشیم. تب مورد نظرمون رو refresh می کنیم. حالا می بینین که متن دلخواهمون رو داره نشون میده. به همین سادگی تونستیم اون چیزی رو که میخوایم بنویسیم.حالا شما دیگه هرچی دلتون میخواد می تونین توی تب بنویسین چه فارسی باشه چه انگلیسی.

همونطور که میبینین صفحه مرورگرمون سفید هست. اگر بخوایم توش چیزی بنویسیم باید چه کنیم؟! به نظرتون تو کدوم یکی از تگ ها باید چیزی بنویسیم؟! اونایی که حدس زدن کارشون درسته.

داخل تگ <body> باید بنویسیم (از این به بعد هر وقت گفتیم داخل تگ فلان یعنی بین تگ باز و بسته فلان). شما هم با ما پیش برین. “<body/> این یک نمونه تست است <body>”

پس با این تمرین کوچولو چیو متوجه شدیم؟ میفهمیم که هر چی که ما تو سایت های مختلف میبینیم همه داخل تگ <body> نوشته شدن. پس ما هر چی رو که بخوایم تو سایتمون به بقیه نشون بدیم باید داخل تگ <body> بنویسیم.

داخل تگ <head> هم فقط لینک های مربوط به فایل های CSS و جاوا اسکریپتمون (javascript) رو می نویسیم. در این مورد بعداً توضیح بیشتری میدیم. اگر تا این جای کار چیزی متوجه نشدین هیچ نگران نباشین، هنوز اول راهیم ?. هر چقدر که بیشتر جلو بریم بیشتر متوجه میشیم.

این هم ویدیویِ توضیحاتی که تا اینجا دادیم. اگر چیزی رو خوب متوجه نشدین حتماً نگاهش کنین.

نکته : از این بعد هر چی که بخوایم داخل مرورگرمون نشون بده رو داخل تگ <body> مینویسیم. پس اینو یادتون بمونه چون ممکنه که دیگه اینو نگیم که کجا نوشته میشه.

2- تگِ p ( پاراگراف ) و تگ های heading

تگِ ” <p> “ :

تگ پاراگراف رو میخوام بهتون توضیح بدم ” <p></p> “.این تگ خییییییلی پر کاربرد هست. همون طور هم که از اسمش معلومه برای قرار دادن نوشته هامون استفاده میشه. شما می تونین هر متنی رو که دلتون میخواد داخل این تگ بنویسین و توی سایت نمایش بدین و به هر تعداد که بخواین (البته با توجه به اندازه متن) می تونین از این تگ استفاده کنین.

به مثال زیر توجه کنین: <!DOCTYPE html> <html> <head> <title> این یک عنوان است </title> </head> <body> <p> this is a test </p> <p> this is a title </p> </body> </html>

123456789101112

<!DOCTYPE html><html><head> <title> این یک عنوان است </title></head><body> <p> this is a test </p> <p> this is a title </p></body></html>

خب چیزی که به ما نشون میده اینه :

خب همون طور که می بینین خط اول، محتوای پاراگراف اولمون رو نوشته و خط دوم ، محتوای پاراگراف دوم رو نوشته. حالا این که چرا اینا رو کنار هم ننوشته و تو دو تا خط مجزا نوشته تو بحث آموزش CSS براتون مطرح می کنیم. تگ ” <p> “ رو خوب به خاطر بسپارین. خیلی جاها کاربرد داره.

تگِ ”<h1> , <h2> , <h3> , <h4> , <h5> , <h6>” :

همون طور که می دونین عنوان با متن فرق داره پس باید از تگ جداگانه ای برای نمایش عنوان استفاده کنیم.خب، تگ های مناسب عنوان، اسمشون heading هست. حالا حتما میگین چرا اسمشون؟؟! چون 6 تا هستن. 6 تاشون رو براتون مینویسیم: ”<h1> , <h2> , <h3> , <h4> , <h5> , <h6>”

فرق اینا با هم تو اندازه متن (font size) و اهمیتشون برای موتور جستجو گوگل هست. به ترتیب از تگ “<h1> “ بزرگترین و پر اهمیت ترین هست تا تگ ” <h6> “ که کوچک ترین و کم اهمیت ترینشون هست. به مثال زیر توجه کنین تا خوب متوجه بشین. یادتون نره که حتماً تمرین بکنین چون بدون تمرین فایده نداره. <!DOCTYPE html> <html> <head> <title> این یک عنوان است </title> </head> <body> <h1> title </h1> <h2> title </h2> <h3> title </h3> <h4> title </h4> <h5> title </h5> <h6> title </h6> <p> this is a test </p> <p> this is a title </p> </body> </html>

123456789101112131415161718

<!DOCTYPE html><html><head> <title> این یک عنوان است </title></head><body> <h1> title </h1> <h2> title </h2> <h3> title </h3> <h4> title </h4> <h5> title </h5> <h6> title </h6> <p> this is a test </p> <p> this is a title </p></body></html>

حالا نتیجش رو ببینین :

همونطور که تو تصویر مشاهده می کنین کلمه title از بالا به پایین داره کوچیک میشه. چرا؟ چون که به ترتیب از تگ ” <h1> “ شروع کردیم به نوشتن تا تگ ” <h6> “

**نکته** : ترتیب اجرای کدهایی که می نویسیم، از بالا به پایین هست. و اگر هم کدی رو اشتباه بنویسیم اون کد اجرا نمیشه و کد بعدی اجرا میشه.

3- مفهموم HTML و CSS ، شروع آموزش CSS

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

برای این که بهتر متوجه بشین یه مثال براتون می زنیم تا بحثمون خوب جا بیوفته. یه ساختمون رو تصور کنین، تشکیل شده از دو قسمت عمده: یکی اسکلت ساختمون هست و یکی ظاهر ساختمون که این دو تا به هم وابسته هستن. هر کدومشون نباشه اون ساختمون معنایی نداره.

زبان HTML در حکم اسکلت ساختمون و زبان CSS در حکم ظاهر ساختمون هست. اگر هر کدوم از اینا نباشن سایتی به اون شکلی که ما می بینیم وجود نداره. پس CSS میشه زبان استایل نویسی و نه زبان برنامه نویسی. خب امیدوارم که این مثال بحث رو براتون روشن کرده باشه.

ساختن فایل CSS و وصل کردنش به فایل HTML :

یه پوشه درست کنین، فایل index.html رو بریزین تو این پوشه. قدم به قدم با ما پیش بیاین. عقب نمونین ?

حالا تو همین پوشه کنار فایل index.html یه فایل تکست ایجاد کنین و اسمش رو بذارین style همچنین فرمتش رو هم از txt به css تغییر بدین. از این به بعد کدهای CSS رو داخل همین پوشه style مینویسیم. خب ما میخوایم کدهایی که داخل فایل style مینویسیم روی فایل های HTML مون اجرا بشن و ظاهر اونا رو تغییر بدن.

برای این کار باید وارد فایل index بشیم (اگر نوت پد رو بستین اشکال نداره، میتونین الان نوت پد رو باز کنین و فایل index.html رو بندازین داخلش). برای اتصال فایل style به index باید داخل تگ <head>، تگ بسته لینک رو بنویسیم.

*نکته* : بعضی از تگ ها در HTML بسته هستن یعنی نیازی نیست که بنویسیم تگ باز و بسته (مثل تگ باز و بسته <p/><p> ). مثل تگ لینک <link> که بسته هست. <head> <title> این یک عنوان است </title> <link rel=”stylesheet” type=”text/css” href=”style.css”> </head>

123456

<head> <title> این یک عنوان است </title> <link rel=”stylesheet” type=”text/css” href=”style.css”></head>

همونطور که در کدهای بالا میبینین، توی تگ <link> چیزی نوشتیم. به این چیزایی که نوشتیم میگن attribute (به معنی صفت). همون طور که از اسمش معلومه، ما یک سری صفت رو به تگ <link> اختصاص دادیم که الان به ترتیب براتون توضیحش میدیم.

rel :

مخفف relation، که ارتباط بین صفحه مبدا با صفحه مقصد رو مشخص میکنه. به طور مثال همین مقدار ” stylesheet ” که ما بهش دادیم اینو میگه که ار تباط بین مرورگر با فایلی که ما داریم از نوع برگه استایل هست. اگر ” rel ” رو اشتباه بنویسیم یا ننویسیم، می بینیم که استایلمون اجرا نمیشه.

type :

خب attribute بعدی type هست. که بهمون میگه فایلی داشتیم از نوع text که به فایلی از نوع css تبدیل شده (اگر ننوشتین هم مهم نیست. هیچ مشکلی پیش نمیاد)

href :

صفت آخری هم ” href “ هست که آدرس فایلمون رو برامون مشخص میکنه. الان میبین که ما فقط اسم فایل رو نوشتیم. چرا؟؟ چون ما فایل style رو داخل پوشه نگذاشتیم. خب پس آدرس اینجوری خونده میشه، اول میره بیرون از فایلی که داخلش لینک نوشته شده، بعد میره دنبال اون آدرسی که ما نوشتیم میگرده.

اگر فقط اسم فایل رو نوشته باشیم میره دنبال فایلی با همون نامی که نوشتیم میگرده، اگر هم داخل یک پوشه آدرس داده باشیم میره داخل اون پوشه و دنبال فایل میگرده. به این مثال توجه کنین:

فرض کنین که ما فایلمون رو گذاشتیم داخل پوشه ای به نام example، داخل پوشه اصلیمون (کنار فایل index.html). حالا href رو باید به این شکل بنویسیم : ** “href=”example/style.css **

نکته : معولا فایل style.css رو داخل پوشه اصلی( root ) قرار میدیم (کنار فایل index.html)

خب ، حالا که فایل استایلمون رو به فایل html وصل کردیم وقتشه که اولین گام آموزش CSS رو شروع کنیم. body{ background: #000; }

12345

body{ background: #000;}

اول نتیجش رو ببینین بعد براتون توضیحش میدیم .

اول از همه کد رو براتون میگیم. وقتی میخوایم به یک المان در CSS، استایل بدیم اول اسمش یا کلاسش یا آی دی اون رو مینویسیم (این که کلاس یا id چی هست بماند برای بعد فعلاً فقط بدونین که این طور چیزایی هست)

بعدش یه آکولاد (یا به قول فرهنگستان “ابرو”) باز میکنین و داخلش استایل های مورد نظرتون رو می نویسین و در آخر هم اون رو می بندین (دقیقا مثل کدی که بالا براتون نوشتیم).

پس ما چیکار کردیم، اومدیم به body گفتیم که تو فلان استایل رو داشته باش. چه استایلی؟؟ گفتیم پس زمینه ات، رنگ مشکی داشته باشه. خب حتما میگین که ما جلوی background فقط نوشتیم 000#، درسته. به این چیزی که نوشتیم میگن کد رنگ مشکی. (جلوتر که بریم براتون بیشتر توضیح میدیم 😀 )

“ای بابا!! 😡 اینم که همش میگه بعداً ” . اینا رو نگین لطفاً ، باور کنین بعدا توضیح میدیم 😛 الان نمِشه.

انواع سلکتور در CSS :

اولا که سلکتور یعنی انتخاب کننده. خب با استفاده از سلکتور ها میتونیم المان مورد نظرمون رو انتخاب کنیم و استایل مورد نظرمون رو روی اون اعمال کنیم (مثل مثال بالا). یه تعداد زیادی سلکتور داریم، که الان سه تاشو براتون میگیم. بقیه سلکتور ها رو هم کم کم بهتون میگیم .

نام تگ ، مثل p ، h1 ، body و …
کلاس المان، که با نقطه ” . “ نشونش میدیم.
آی دی المان، که با ” # ” نشونش میدیم

4- انواع استایل دهی , متاتگ Charset

۵ دقیقه

دوتا صفت <html> و تگِ <meta> :

هر پروژه ای که بخواین انجام بدین، احتیاج به یک سری کدهای اولیه داره تا نیازهای اولیه پروژه رو فراهم کنه. حالا ما کم کم این کدها رو بهتون میگیم.

دو تا صفت (attribute) براتون میگیم که نوشتنش در تگ <html> لازم هست. یکیش “lang=”fa و اون یکی “dir=”rtl هست.

که به ترتیب اولین صفت یعنی زبان سایتمون چی باشه ( lang مخفف language )، که ما زبان فارسی ( fa ) رو انتخاب کردیم و دومین صفت یعنی این که نوشته هامون از کدوم سمت نوشته بشن ( dir مخفف direction )، که ما جهت راست به چپ ( rtl میشه راست به چپ و ltr میشه چپ به راست) رو انتخاب کردیم (با توجه به این که زبان سایتمون فارسی هست)

در نهایت تگ html این شکلی میشه : ” <“html lang=”fa” dir=”rtl > “

خب حالا نوبت تگ <meta> شد . تگ متا یک قسمت از کد هست که محتوای صفحه رو توصیف میکنه . این تگ برای کاربر قابل مشاهده نیست و فقط برای موتور های جستجو قابل مشاهده هست. ( توضیحات بیشتر در لینک https://en.wikipedia.org/wiki/Meta_element )

ما با نوشتن صفت “charset=”utf-8 داخل تگ <meta> کاری میکنیم که پروژمون از زبان فارسی پشتیبانی کنه. باز هم میگم این فقط برای مرورگر و موتورهای جستجو قالب مشاهده هست. رااااااستی یادم رفت بگم که تگ <meta> داخل تگ <head> باید نوشته بشه.

انواع استایل دهی :

با سه روش میتونیم به تگ های HTML استایل بدیم .

خب اولین روش که بهترین روش هم هست همونیه که قبلاً بهتون گفتیم ساختن یه فایل style و وصل کردنش به فایل html
اصطلاحاً به این روش میگن : استایل دهی external
دومین روش نوشتن، اینه که داخل تگِ <head> ، تگِ “ <style></style> ” رو بنویسیم. اون وقت میتونیم داخل تگ <style> به المان هایی که میخوایم استایل بدیم. اصطلاحاً به این روش میگن: استایل دهی internal
آخرین روش که بدترین روش هم هست 😕 وتوصیه میشه تا حد امکان این کار رو انجام ندین (چون بعداً اگه بخوایم تغییری تو استایل بدیم آسفالت میشیم ). در این روش، داخل تگ، به این شکل “style=”background:black استایل مورد نظرمون رو مینویسیم. اصطلاحاً به این روش میگن: استایل دهی inline

اینم لینک یه سایت خوب که توضیحات خوب همراه با مثال داره و خیییییییییییییلی به کارتون میاد. برای دیدن مثال میتونین به این لینک برین : https://www.w3schools.com/css/css_howto.asp

5- بریم تو کار جداول در HTML

حدودا 5 یا 6 سال پیش سایت ها رو با جدول می ساختن و چیزایی رو که میخواستن تو سایت قرار بدن، داخل خونه های جدول می گذاشتن. ولی در حال حاضر ما دیگه از این روش استفاده نمی کنیم و بجاش از div استفاده می کنیم (اینم از اوناست که بعدا میگیم 😀 ).

ولی با این حال هنوز هم در بعضی موارد از جدول استفاده می‌کنیم. پس دونِستَنش لازم هست. خب بریم تو کار کدنویسیش تا بعد توضیحات لازم رو بهتون بدیم. کد HTML <!DOCTYPE html> <html lang=”fa” dir=”rtl” > <head> <meta charset=”utf-8″ > <title> این یک عنوان است </title> <link rel=”stylesheet” type=”text/css” href=”style.css”> </head> <body> <table> <tr> <th>عنوان ردیف اول</th> <th>عنوان ردیف دوم</th> <th>عنوان ردیف سوم</th> </tr> <tr> <td>متن عنوان ردیف اول</td> <td>متن عنوان ردیف دوم</td> <td>متن عنوان ردیف سوم</td> </tr> <tr> <td>متن عنوان ردیف اول</td> <td>متن عنوان ردیف دوم</td> <td>متن عنوان ردیف سوم</td> </tr> <tr> <td>متن عنوان ردیف اول</td> <td>متن عنوان ردیف دوم</td> <td>متن عنوان ردیف سوم</td> </tr> </table> </body> </html>

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

اگر فکر میکنین که دیگه استایلی لازم نمیشه میتونین پاکش کنین.
اگر هم میخواین کد اون استایل باشه ولی اجرا نشه میتونین با استفاده از این روش /* کد یا کدهای مورد نظر */ ، اجرای اون کد یا کدها رو غیرفعال کنین ( اصطلاحاً به این کار میگن comment کردن. برای مواقعی هم که بخوایم توضیحات برای کدهامون قرار بدیم به درد میخوره). مثلاً برای غیر فعال کردن رنگ پس زمینه به شکل زیر عمل می کنیم:

body{ /*background: #000;*/ }

12345

body{ /*background: #000;*/}

توضیح تگ هایی که تو کد نوشتیم :

اولین تگ که برای ساختن جدول لازمه تگِ ” <table></table> “ هست. حالا میریم داخل تگ رو توضیح بدیم.

تگ بعدی که باید بنویسیم تگِ ” <tr></tr> “ هست. خب این تگ برای ردیف های جدولمون هست. هر تگِ باز وبسته <tr></tr>، یک ردیف از جدولمون رو درست میکنه.

همونطور که در جدول های مختلف دیدین هر ستون از جدول یک عنوان داره که ما برای ایجاد کردن عنوان از تگِ ” <th></th> “ استفاده می کنیم. به تعداد ستونهایی که میخوایم جدلمون داشته باشه، تگ <th> استفاده می کنیم. و همونطور که در کدها می بینین عناوین رو داخل تگ <th> مینویسیم.

خب حالا چی میمونه؟؟ خونه های جدلمون میمونه که باید بسازیمشون. برای ساختن خونه های جدول از تگِ ” <td></td> ” استفاده می کنیم. همچنین متنی که میخوایم داخل خونه های جدولمون نوشته بشه رو داخل تگ <td> می نویسیم.

حالا تصویر زیر رو ببینین تا روی تصویر بیشتر براتون توضیح بدیم.

همونطور که توی تصویر بالا می بینین سه تا عنوان داریم که از بقیه کلمات پررنگ تر نوشته شدن. که درست هم هست چون سه تا تگ <th> نوشتیم، پس باید سه تا عنوان هم داشته باشیم. این پرنگ بودن هم به خاطر استایل های پیش فرض تگ <th> هست (که اگر ما بخوایم قابل تغییر هستن).

خوب دقت کنین دوستان عزیز میخوایم چند تا نکته مهم بهتون بگیم.

** نکته 1 ** : باید به تعداد تگ های <th> در تگهای <tr> ، تگ <td> بگذاریم . مثلاً تو کدی که داریم، سه تا تگ <th> نوشتیم، پس تو هر <tr> هم سه تا <td> نوشتیم. علتش هم کاملاً واضحه!!! چون سه تا ستون داریم پس باید در هر ردیف هم سه تا خونه داشته باشیم.

** نکته 2 ** : اولین تگِ <td> که در تگِ <tr> هست، مربوط میشه به اولین تگ <th> که در <tr> نوشته شده. دومین تگ <td> مروبط میشه به دومین تگ <th> و سومین تگ <td> هم به سومین تگ <th> مربوط میشه.

به عنوان مثال، تمام تگ های <td> که داخلشون نوشتیم ” متن عنوان ردیف اول ” مربوط به تگ <th> میشه که داخلش ” عنوان ردیف اول ” رو نوشتیم.

** نکته 3** : حالا که مفهوم بحث رو متوجه شدین، کد نویسی به روز و استاندارد جدول رو خدمتون میگیم ( مطابق با استانداردهای HTML5 ) <table> <thead> <th>عنوان ردیف اول</th> <th>عنوان ردیف دوم</th> <th>عنوان ردیف سوم</th> </thead> <tbody> <tr> <td>متن عنوان ردیف اول</td> <td>متن عنوان ردیف دوم</td> <td>متن عنوان ردیف سوم</td> </tr> <tr> <td>متن عنوان ردیف اول</td> <td>متن عنوان ردیف دوم</td> <td>متن عنوان ردیف سوم</td> </tr> <tr> <td>متن عنوان ردیف اول</td> <td>متن عنوان ردیف دوم</td> <td>متن عنوان ردیف سوم</td> </tr> </tbody> <tfoot></tfoot> </table>

123456789101112131415161718192021222324252627

<table> <thead> <th>عنوان ردیف اول</th> <th>عنوان ردیف دوم</th> <th>عنوان ردیف سوم</th> </thead> <tbody> <tr> <td>متن عنوان ردیف اول</td> <td>متن عنوان ردیف دوم</td> <td>متن عنوان ردیف سوم</td> </tr> <tr> <td>متن عنوان ردیف اول</td> <td>متن عنوان ردیف دوم</td> <td>متن عنوان ردیف سوم</td> </tr> <tr> <td>متن عنوان ردیف اول</td> <td>متن عنوان ردیف دوم</td> <td>متن عنوان ردیف سوم</td> </tr> </tbody> <tfoot></tfoot> </table>

همونطور که می بینین طبق استاندارد HTML5 باید تگ <th> رو داخل تگِ ” <thead> ” و تگ های <tr> , <td> رو داخل تگِ ” <tbody> ” قرار بدیم.

همچنین تگی به نام ” <tfoot> ” هست که معمولاً استفاده ای نداره مگر در مواقع خاص!

برای توضیحات بیشتر و مثال بیشتر در مورد table اگر خواستین می تونین برین تو این لینک: https://www.w3schools.com/html/html_tables.asp

** نکته 4 ** : برای comment کردن کدهای HTML به روش زیر عمل میکنیم: <!– <table> <tr> <th>عنوان ردیف اول</th> <th>عنوان ردیف دوم</th> <th>عنوان ردیف سوم</th> –>

1234567

<!– <table> <tr> <th>عنوان ردیف اول</th> <th>عنوان ردیف دوم</th> <th>عنوان ردیف سوم</th> –>

** نکته 5 ** : اگر بخواین به کد نویسی ادامه بدین و حرفه ای تر کار کنین باید از نرم افزارهای بهتری برای کد نویسی استفاده کنین. نرم افزارهای مختلفی در این زمینه هست که می تونین بر اساس سلیقتون ازشون استفاده کنین. سه تا از این نرم افزارها رو بهتون معرفی می کنیم ولی انتخاب با خودتونه 🙂

Notepad++ , Sublime text , Brackets. این ها نرم افزارهای سبک و خوبی هستند که کد نویسی رو راحت تر و مرتب تر و استاندارد می کنن. نرم افزاری که ما استفاده می کنیم Sublime text هست. که هم سبکه هم سرعت رو بالا میبره.

ظاهرسازی با CSS 😀 :

همونطور که در تصویر هم دیدین ساختاری جدول مانند برای ما ایجاد شد ولی هیچ خط کشی و هیچ فاصله و رنگی نداره، الان همه اینا رو با CSS درست می کنیم.

طبق معمول اول کد، بعداً توضیح 🙂 th,td{ border: 1px solid red; font: 12px tahoma; }

123456

th,td{ border: 1px solid red; font: 12px tahoma; }

کد بالا رو حتما بزنین تا نتیجش رو ببینین. ولی برای اونایی که حالشو ندارن کد بزنن نتیجه رو میگذاریم 😆 . تصویر پایین رو ببینین:

توضیح کدها :

اگر یادتون باشه گفتیم که یکی از سلکتورها در CSS، نام تگ هست. یعنی با نوشتن نام تگ، می تونیم اون تگ رو انتخاب کنیم و استایل مورد نظرمون رو بهش بدیم.

حالا ما چه کردیم؟؟ همه رو دیوونه کردیم 😆 به قول دکتر کَهنَمویی تو خندوانه، خب بسه، گفتیم، خندیدم، حرمتا حفظ بشه. بریم سراغ ادامه درس

ما اومدیم تمام تگ های <th> , <td> رو صدا زدیم و انتخابشون کردیم (البته تو CSS دیگه علامت بزرگتر و کوچیکتر نمیگذاریم، فقط اسمشو می‌نویسیم)

بعدش داخل آکولاد بهشون گفتیم که دو تا استایل داشته باشن . اون دو تا استایل چی هستن ؟ الان توضیح میدیم ( بعضی از تگ ها و استایل ها رو از روی معنیشون میتونین بفهمین چی هستن. مثل خاصیت background که از معنیش میشه فهمید مربوط به پس زمینه هست.)

border :

همونوطور که از معنیش پیداست، میشه لبه، حاشیه. خب با استفاده از این کد میتونیم به المان ها حاشیه بدیم (خارجیا به اینا میگن property ولی ما میگیم خاصیت یا مشخصه). اونایی که جلوش نوشتیم چی هستن؟؟!! به اونا میگن ارزشیا مقدار خاصیت (خارجیا میگن value :).

ویژگی اول : ضخامت حاشیه رو تعیین میکنه.
ویژگی دوم : از معنی solid میتونیم بفهمیم که حاشیمون یک خط به هم پیوسته هست (اگر بخواین، حالت های دیگه هم داره مثل نقطه چین ، دوخط و …) . با این ویژگی میتونین حالت border ررو مشخص کنین.
ویژگی سوم : رنگ حاشیمون رو مشخص می کنه.

توی لینک مقابل می تونین توضیحات بیشتر در باره border، همراه با مثال رو ببینین : https://www.w3schools.com/cssref/pr_border.asp

font :

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

ویژگی اول : ندازه کلمات رو مشخص می کنه (font size).
ویژگی دوم : نوع فونت رو مشخص می کنه.

توی لینک مقابل می تونین توضیحات بیشتر درباره font، همراه با مثال رو ببینین : https://www.w3schools.com/cssref/pr_font_font.asp

* نکته * : برای این که هر خاصیت از خاصیت بعدی مجزا باشه و برای مرورگر قابل تفکیک باشه، باید آخر هر خاصیت یک ” ; “ بگذاریم تا اون خاصیت رو از بعدیش جدا کنه. در غیر این صورت کدهامون به طو ر صحیح اجرا نمیشن.

* نکته * : میتونین به هر تعداد سلکتور که بخواین یه خاصیت مشترک بدین. برای این کار باید بین هر دو تا سلکتور علامت ” , ” رو قرار بدین.
* نکته * : با چند روش میتونین رنگ رو مشخص کنین ولی فعلاً دو تا رو بهتون می گیم و بقیشو در جای خودش حتماً توضیح میدیم:

مقدار رنگ : برای هر رنگی یه مقداری وجود داره که می تونین با نوشتن اون مقدار، رنگ رو به المان مورد نظر اعمال کنین. توضیحات کد رنگ هم از این قراره :

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

RR : این دو رقم برای رنگ قرمز هست که از 00 مقدار میگیره تا FF. هر چی از 00 به سمت FF حرکت کنیم غلظت رنگ بیشتر میشه.
GG : این دو رقم هم برای رنگ سبز هست که از 00 مقدار میگیره تا FF. هر چی از 00 به سمت FF حرکت کنیم غلظت رنگ بیشتر میشه.
BB : این دو رقم هم برای رنگ آبی هست که از 00 مقدار میگیره تا FF. هر چی از 00 به سمت FF حرکت کنیم غلظت رنگ بیشتر میشه.

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

نام رنگ: میشه نام رنگ رو نوشت تا روی المان مورد نظر اعمال بشه. مثلاً اگر بنویسیم ” black ” ، المان به رنگ مشکی در میاد. که این روش خیلی دست ما رو تو انتخاب رنگ می بنده و روش مناسبی نیست.

اینم یه لینک برای مثال بیشتر https://www.w3schools.com/cssref/css_colors.asp

خوشگل کردن جدول:

توی تصویر شماره 7 می بینین که خونه های جدول از هم فاصله دارن و نوشته ها با حاشیه جدول فاصله ای ندارن. الان میخوایم این عیب ها رو برطرف کنیم. دوباره دست به کد میشیم: table,th,td{ border: 1px solid #ddd; font: 12px tahoma; border-collapse: collapse; text-align: center; padding: 10px; }

123456789

table,th,td{ border: 1px solid #ddd; font: 12px tahoma; border-collapse: collapse; text-align: center; padding: 10px; }

اینم نتیجش:

توضیح کدها :

سلکتور table رو به بقیه سلکتور ها اضافه کردیم. مفهومش اینه که تمام جدول هامون این خواصی رو که نوشتیم بگیرن.

بعدش اومدیم رنگ border رو با استفاده از کد رنگی ddd# خاکستری کردیم.

” border-collapse ” : برای این که فاصله بین خونه های جدول رو از بین ببریم اومدیم از این property (ویژگی) استفاده کردیم.

با قرار دادن مقدار collapse برای border-collapse فاصله بین خونه های جدول رو از بین بردیم (تصویر شماره 7 و 8 رو مقایسه کنین).

text-align : از اسمش چه حدسی میتونین بزنین؟؟ به نظرتون این property چه میکنه؟؟؟

این خاصیت ، چینش متن رو مشخص میکنه. یعنی میگه که متن وسط چین باشه، چپ چین باشه یا راست چین باشه. که ما در این جا مقدار وسط چین رو براش در نظر گرفتیم.

padding : این جا موقعش نیست که براتون توضیحش بدیم. فقط در همین حد بدونین که باعث بزرگ شدن خونه های جدولمون شده (تصویر شماره 7 و 8 رو مقایسه کنین).

خب حالا میخوایم جدول رو تمام صفحه کنیم و یکی در میون رنگ خونه های جدول رو عوض کنیم. این کدش: table{ width: 100%; } tr:nth-child(even){ background: #ccc; }

12345678

table{ width: 100%;}tr:nth-child(even){ background: #ccc;}

توضیح کوچووووولو :

width :

با این خاصیت می تونیم به هر المانی که امکانش رو داشته باشه عرض مورد نظرمون رو بدیم. به دو صورت میتونیم بهش مقدار بدیم:

یکی با درصد دادن که مشخص می کنه چند درصد از عرض والدش رو بگیره.(توضیحات کامل رو بعداً بهتون میگیم. ذهنتون رو درگیر نکنین.)
یک روش دیگه، مقدار دادنِ پیکسلی هست. مثلاً میشه بگی عرضش 100px باشه.

(tr:nth-child(even : اینم در همین حد بدونین که گفتیم ردیف های زوج رنگشون خاکستری باشه.

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

این دو تا ویدیو هم مربوط به توضیحاتمون در مورد جدول هست:

6- یَک دِنِه تگِ مَشتی و بدرد بخور که بهش مِگَن تگِ a

معنی تیتر بالا میشه : تگ مهم و کاربردی <a> 😆

از این تگ خیییییییییلی استفاده می کنیم، خوب حواستونو جمع کنین تا مطلبو کامل متوجه بشین.

همونطور که در تصویر شماره 10 می‌بینین، تگ <a>، شش تا صفت (attribute) داره. به طور کامل همه صفت ها رو براتون توضیح می‌دیم.

اول ماهیت تگ <a> رو براتون میگیم بعدش سراغ صفت هاش میریم.

تگ <a> برای لینک شدن به جایی استفاده میشه. حالا اون جا میتونه یک سایت دیگه باشه یا این که سایت خودمون باشه.

خب، این صفت ها ( attribute ) چی هستن؟؟!

href :

این attribute خیییییلی مهمه و همیشه نوشته میشه. با استفاده از این attribute میتونیم بگیم که به کجا لینک بشیم. هم میتونیم به یک سایت دیگه لینک بشیم هم به صفحات داخلی سایت خودمون و حتی میتونیم به یک المان تو سایتون لینک بشیم (با نوشتن آی دی المان داخل href میشه این کر رو کرد).

فقط به یک نکته توجه داشته باشین که برای لینک شدن به یک سایت حتما باید پروتکل رو بنویسین (http ,ftp, …) وگرنه لینک کار نمی‌کنه. حتماً امتحان کنین.

یه بار مثل تصویر شماره 10 و یه بار هم بدون پروتکل بنویسین.

download :

این attribute فقط موقعی استفاده میشه که یک لینک مستقیم داشته باشیم تا یک فایل رو دانلود کنیم. مثلاً اگر بخوایم یه ویدیو رو مستقیماً دانلود کنیم می‌تونیم از این صفت استفاده کنیم. <a href=”https://welearn.site/html.mp4″ download> فیلم آموزش HTML </a> <a href=”https://welearn.site/html.mp4″ download=”آموزش HTML”> فیلم آموزش HTML </a>

1234	<a href=”https://welearn.site/html.mp4″ download> فیلم آموزش HTML </a><a href=”https://welearn.site/html.mp4″ download=”آموزش HTML”> فیلم آموزش HTML </a>

به هر دوشکل میشه download رو نوشت. تصویر پایین هم مرورگرهایی رو نشون میده که از این attribute پشتیبانی می‌کنن.

hreflang :

تصویر پایین مرورگرهایی رو نشون میده که از این attribute پشتیبانی میکنن.

target :

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

به صورت پیش فرض ” target=”_self هست که در این حالت لینک، توی همون صفحه ای که لینک قرار داده شده باز میشه. ولی اگر مقدارش رو برابر با ” blank_ ” قرار بدیم، تویِ برگه جدید داخل مرورگرمون باز میشه.

تصویر پایین مرورگرهایی رو نشون میده که از این attribute پشتیبانی می‌کنن.

rel :

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

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

media :

این صفت مشخص میکنه چه رسانه یا وسیله ای به به فایل ما لینک شده. برای توضیحات بیشتر به ویدیو مراجعه کنین. همچنین به این لینک هم میتونین مراجعه کنین: https://www.w3schools.com/tags/att_a_media.asp

نکته : از بین تمام صفت های تگ <a> ،مهم ترینشون صفت href هست که همیشه نوشته میشه. بقیه در عمل کاربرد زیادی ندارن. صرفاً برای این بهتون گفتیم تا بحث کامل بشه و چشمتون آشنا بشه تا اگه جایی دیدین بدونین چیه. پس زیاد برای بقیه صفت ها وقت نگذارین.

قشنگ سازی تگ <a> :

مِخِیم تَگِمان رِ قِشَنگ کِنِم!!! 😀 a{ color: #222; text-decoration: none; font-family: tahoma; font-size: 12px; } a:hover,a:focus,a:visited{ background: #222; color: #fff; } a:active{ background: red; color: #fff; }

12345678910111213141516

a{ color: #222; text-decoration: none; font-family: tahoma; font-size: 12px;}a:hover,a:focus,a:visited{ background: #222; color: #fff;}a:active{ background: red; color: #fff;}

به ترتیب از بالا به پایین براتون توضیح میدیم که چیکار کردیم.

توضیح کد ها :

تو خط اول تمام تگ های <a> رو انتخاب کردیم.

color :

با این خاصیت میتونیم رنگ نوشته هامون رو تغییر بدیم.

text-decoration :

وقتی که تگ <a> رو قرار میدین، به صورت پیش فرض رنگ آبی داره و یک خط زیرش قرار میگیره. با دادن مقادیر مختلف به خاصیت text-decoration میتونیم سرِ این خطِ یه بلاهایی در بیاریم!!

مقادیری که میگیره، underline (یه خط زیر متن قرار میده)، overline (یه خط بالای متن میذاره)، line-through (یه خط روی متن میکشه) و none (بدون خط) هستند. که در طراحی ها معمولاً مقدار none رو در نظر میگیرن.

font-family :

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

font-size :

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

جلوی a یه سری چیزا نوشتیم که میخوایم توضیحشون بدیم. اگر یادتون باشه سه تا سلکتور رو قبلا گفتیم. اینا هم، یه چند تا دیگه از سلکتورها هستن. (این نوع سلکتورها رو همیشه با دو نقطه ” : ” به کار می‌بریم)

hover:

وقتی که موس روی المان مورد نظر بره این سلکتور عمل میکنه و اون بلایی رو که میخوایم سرِ المان در میاره!!

مثال بیشتر https://www.w3schools.com/cssref/sel_hover.asp

focus:

وقتی که رو المانی کلیک بکنیم سلکتور focus: عمل میکنه و تغییراتی رو که بخوایم اعمال میکنه. این تغییرات تا وقتی میمونه که روی المان دیگه ای کلیک نکرده باشیم.

مثال بیشتر https://www.w3schools.com/cssref/sel_focus.asp

visited:

فقط روی تگ <a> کار میکنه. عملکردش اینطور هست که وقتی روی لینک کلیک میکنی و اون رو باز میکنی، تگ <a> رو انتخاب میکنه و استایل های که دادیم رو روش اجرا میکنه. همچنین وقتی این اتفاق بیوفته، لینک باز شده دیگه اون استایل های اولیه رو نمیگیره.

مثال بیشتر https://www.w3schools.com/cssref/sel_visited.asp

active:

وقتی که روی المان مورد نظر کلیک کنی سلکتور active: اون المان رو انتخاب می کنه و استایل های مورد نظر ما رو بهش میده. تفاوت active: با focus: اینه که وقتی روی المان کلیک می کنی و سلکتور active: عمل میکنه، در همون لحظه ی کلیک کردن استایل رو اعمال میکنه ولی وقتی که از سلکتور focus: استفاده می کنیم تا وقتی که روی المان دیگه ای کلیک نکنیم استایل هامون باقی می‌مونن.

مثال بیشتر https://www.w3schools.com/cssref/sel_active.asp

در صوررت وجود ابهام یا سوال، ویدیویِ توضیحاتی رو، که برای قشنگ سازی تگ <a> دادیم ، حتما تماشا کنین.