آموزش مقدماتی HTML آموزش طراحی سایت – قسمت اول

آموزش مقدماتی HTML آموزش طراحی سایت

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

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

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

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

دست به کد شو!

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

حالا با ساده ترین ابزار موجود میخوایم کار کنیم. لطفاً دفترچه یادداشت (Notepad) ویندوز رو باز کنین و شروع کنین به نوشتن.

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

آموزش مقدماتی HTML آموزش طراحی سایت

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

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

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

 

آموزش مقدماتی HTML

تگ  ” <title> “ :

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

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

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

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

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

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