به نام ایزد توانا
در این پست آموزشی در مورد صفحات ساده HTML و ساخت اولین برنامه به کمک همین صفحات صحبت خواهیم کرد.
همچنین مقداری هم به حاشیه میریم و در مورد مواردی مثل محل های کد زدن و آموزش شروع به کار صحبت میکنیم.
امیدوارم این مطلب براتون مفید باشه و یادتون نره برای ما نظرات و انتقاداتتون رو ارسال کنید.
اگر سوال یا ه حرفی دارید میتونید به ایمیل من به آدرس ARiyou.public@gmail.com و یا در شبکه های اجتماعی با شناسه (ID | User name) زیر منو پیدا کنید
Telegram, Twitter, Facebook & ... By : @ARiyou2000
با تشکر از همه شما دوستان، آریو جهان
دیگه بریم سر اصل مطلب
اگه میدونید کجا کد بزنید و برای شروع باید چکار کنید از این مبحث بگذرید.
راستش به نظر من سخت ترین قسمت شروع یه کار یا مبحث جدید مخصوصا تو مباحث مرتبط به و با کامپیوتر برداشتن اولین قدم به اون دنیای جدیده(این قضیه با شروع اون کار فرق میکنه).
همون لحظه ای که پات رو به اون دنیا میزاری و با کلی سوال مواجه میشی که هیچ کس تا الان بهشون جواب نداده(البته معمولا). مثلا وقتی داری یه ویدیو آموزشی خیلی عالی و معتبر رو نگاه می کنی و استاد شروع میکنه به مد زدن. تو هم می خواهی همون کارو کنی ولی نمیدونی کجا باید این کارو انجام بدی.
مثل خودم که مدت ها پیش وقتی خواستم واسه فان یه سری بات تلگرامی طراحی کنم ولی هیچ کس بهم نگفت کجا کد بزنم و منو تا مدت ها از این کار منصرف کرد.
چون تو اون لحظه واسه اون استاد چیز مهمی نیست و فقط کد هستش که اهمیت داره.
اوکی. چند تا از جاهایی که میشه توشون کد زد رو می گم:
یکی از اون ها سایت W3Schools هستش که مرجع اصلی ماست و شما میتونید هم آموزش ببینید و هم کدتونو آنلاین امتحان کنید. خوبیش اینه که رو گوشی هم اجرا میشه.
یکی دیگه که قدرت پردازش بی نظیری هم داره Web Storm هستش که پولیه ولی میتونید از سایت های ایرانی نسخه سالم و کرک شدش رو گیر بیارید. این گزینه یا مشابهش که مال همون شرکته (Jetbrains) یعنی IntelliJ IDEA معروف گزینه های خوبی هستند
همچنین می تونید از Visual Studio Code که حجم کمی هم داره استفاده کنید. ولی خودم قبلی رو ترجیح میدم.
شما حتی می تونید تو notepad یا notepad++ هم کد بزنید.
گزینه های دیگه ای هم هست که الان یادم نیست. به نظرم با وب استورم یا notepad شروع کنید و بعدا بقیه رو هم امتحان کنید.
بقیه چیزی که نیاز دارید یه مرورگر خوبه که ما به خاطر هماهنگی وب استورم با کروم از Chrome استفاده میکنیم.
البته برای کار راحت تر می تونید در مورد افزونه های Jetbrains برای مرورگر ها هم تحقیق کنید.
حالا می خواهیم از ساحل شنی یه قدم تو این دریا پا بزاریم.
بیایید اول از نگاهی به ساختار صفحات وب داشته باشیم. صفحات وب مثل بدن انسان میمونن و HTML & CSS & JAVASCRIPT خب مثل...
اصلا تصویر پایین خودش گویای همه چی هست.
زبان تگ نویسی HTML در واقع مثل اسکلت میمونه و structure یه صفحه رو تشکیل میده
بعد به کمک CSS می تونیم به اون رنگ و لعاب بدیم و زیباش کنیم.(گوشت بشه به تنش)
در پایان هم با JavaScript بهش جون می بخشیم و بهم قابلیت هایی مثل عکس العمل رو اضافه میکنیم.
سه تا نکته مهم
به HTML گفتم زبان تگ نویسی و نه برنامه نویسی چون (خودتون تحقیق کنید)
گفتم با JavaScript میتونه عکس العمل بده؛ در مورد نحوه برخورد سرور و کلاینت و این جور موارد هم تحقیق کنید.
نکته سوم هم تا اومدم دوتای قبلی رو بنویسم یادم رفت.
اگر با اصطلاحات بالا یا تگ هایی که در ادامه میگیم آشنایی ندارید ترس ورتون نداره کم کم باهاشون آشنا میشیم.
در ضمن از این به بعد همیشه یه صدایی تو سرت هست که میگه صبر کن،
میگه اول پایه رو قوی کن، میگه اول برو با تمام اصطلاحات بالا آشنا شو بعد بیا سر ادامش؛
خب می خواهم بهت بگم مادامی که داری به این صدا گوش میدی در جا میزنی و به هیچ جا نمیرسی.
این صدا شاید حرفاش منطقی به نظر برسه ولی مطمئنم که گوش کردن به این حرفا احمقانه ترین کار ممکنه واستون.
خب. بیشتر از این منتظرتون نمیزارم. بریم با هم یکم کد بزنیم.
زبان HTML بر پایه تگ ها بنا شده.
تگ ها به صورت کلی به شکل <TAG NAME> هستند. لازمه بدونید که تگ ها به دو مدل دارای بدنه و بدون بدنه یا in Line تقسیم میشن.
تکلیف تگ های در خط که مشخصه و به صورت بالا و خیلی راحت تعریف میشن.
اما تگ های دارای بدنه به صورت زیر تعریف میشن
<Tag name>
some action like show a text
</Tag name>
خب حالا که با تگ و انواع اون آشنا شدید میریم سراغ یه صفحه HTML ساده.
هر صفحه HTML از یه تگ اصلی با عنوان خود html (با حروف کوچک مینویسنش) ساخته شده.
این تک جامع شامل بدنه است و هر چیزی خارج از بدنه این تگ غیر قابل قبوله (البته بجز چند مورد خاص که بهشون خواهیم رسید ولی تا اون موقع هر چیزی خارج از این بدنه غیر قابل قبوله؛ البته ممکنه ازش خروجی مورد نظر حاصل شه ولی خود این کار اشتباهه).
داخل تگ html دو تگ اصلی دیگه وجود داره تحت عنوان های body & head
خب بیایید ببینیم تا اینجای کار کد ما چی شده:
<html> <head>
head section statments ! </head>
<body>
body section statments !
</body>
</html>
خب بیایید دو تک head & body رو به تفکیک برسی کنیم.
تو تگ head معمولا چیز هایی که قرار میگیرن نمایش داده نمیشن و اونهایی هم که نمایش داده میشن در کادر اصلی ما (اون صفحه که محتویات وبسایت ها توش به نمایش گزاشته میشه) نیستن و فقط در حد سربرگ و... هستن.
تگ body محتویات باکس اصلی ما هستش و هر چیزی که نیاز به نمایش داره اینجا قرار میگیره.
تو این جلسه با تگ head کاری نداریم و به رسم برنامه نویس ها فقط می خواهیم Hello world رو چاپ کنیم.
<html>
<body>
Hello world
</body>
</html>
خب حالا بیاید یکم جالب ترش کنیم و از دو تگ پاراگراف <p> , تیتر <h1> استفاده کنیم. همچنین سربرگمون رو هم عوض میکنیم.
<html> <head>
<title>تایتل یا عنوان سربرگ</title> </head>
<body>
<h1> یک نمونه تیتر</h1> <p> یک نمونه پاراگراف که می تواند شامل تعداد زیادی کلمه باشد </p>
</body>
</html>
در ضمن تیتر ها می توانند دارای درجه اهمیت های مختلف از 1 تا 6 باشد که از 1 تا 3 به عنوان بسیار مهم تلقی میشود.
<h1> <h2> <h3> <h4> <h5> <h6>
کلی مبحث دیگه هم هست که باتوجه به این که الان که این پست رو مینویسم شبه حال گفتنش رو ندارم و تو پست های بعدی جبران میکنم. اگه علاقه مند بودید لایک و نظر بدید و منو دنبال کنید.
شب و روزگار بر شما خوش.
بدرود.
ARiyou Jahan 12/01/2019 03:37 ق.ظ
