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

mokhtaria254 — Fri, 04 Sep 2020 09:34:24 +0430

سلامی‌ دوباره‌، در قسمت دوم آموزش مقدماتی تا پیشرفته طراحی وب میخواهیم بپردازیم به نحوه نوشتن یک صفحه وب خیلی ساده.در قسمت قبل در مورد تگ های HTML حرف زدیم و همونجا به یک نکته اشاره کردم که میگفت :" ? نکته : تگ ها در HTML به صورت پله مانند در یکدیگر قرار میگیرند "این نکته به ما میگه که تگ های HTML به صورت پلکانی در داخل یکدیگر قرار میگیرند (در آینده بیشتر متوجه منظورم میشوید ) اما برای این که تا این جا یک تصویر کلی از شکل و شمایل کدهای HTML داشته باشید به عکس زیر نگاه کنید ?فرم کلی کد های HTMLخوب حالا این تگ که در موردش حرف زدیم اصلا چه معنی داره؟ > تمام تگ های سایت شما در میان این دو تگ قرار میگیرد که برای مرورگر مشخص میکند که تمام اجزای بین او دو تگ را به عنوان کد‌های HTML حساب کنه.> تگ های , , تگ <head> : این تگ معمولا اولین تگی هست که بعد از تگ باز <html> می اید و به این صورت <head/> نیز بسته میشود.تگ <title> : این تگ هم یکی دیگر از تگ‌های HTML هست که میان دو تگ باز و بسته <head/> قرار میگیرد.? نکته : هر متنی که میان دو تگ باز و بسته <title> قرار می‌گیرد در مرورگر ها به عنوان متن سربرگ‌ها (tab) شناخته می‌شود.تگ <body> : تمام تگ های بدنه سایت میان دو تگ باز و بسته <body> قرار میگیرند مثل پاراگراف‌ ها، جدول ها، عکس ها و لینک ها و.... (هر چیزی که بخواهید در صفحه مرورگر نمایش داده شود.)? نکته : تگ <body> همیشه بعد از تگ بسته <head/> و قبل از تگ بسته <html/> قرار میگیرد.? نکته : محتوای اصلی سایت شما در میان دو تگ بازوبسته <body> قرار میگیره و تگ <head> بیشتر مثل تنظیمات صفحه هست که اونجا میتونید اسم سربرگ را مشخص کنید یا فایل CSS و JS را به فایل HTML متصل کنید (در جلسات بعد با این دو مورد اخر اشنا میشویم)خوب حالا بیایید با توجه به چیزی که یاد گرفتیم ساختار کلی یک صفحه HTML را بنویسیم،ساختار کلی یک صفحه HTMLهمین طور که میبینید تگ <head> بعد از تگ <html> قرار گرفته بعد از اون هم تگ <body> قرار گرفته.میان دو تگ باز و بسته <title> هم که نام سربرگ را نوشته ایم.> اجرای فایل HTML برای اجرای فایل HTML خود باید به مکانی که فابل را در ان ذخیره کرده‌اید بروید با راست کلیک بر روی فایل و انتخاب open with فایل را در یکی از مرورگر ها باز کنید. ? فایل HTML شما اجرا شد.> تگ <p> : هر متنی که بین دو تگ باز و بسته <p> قرار بگیرد به عنوان یک پاراگراف شناخته میشود.? نکته خارج از محدوده : در ویرایشگر متن vscode میتوانید بجای نوشتن تگ باز و بسته <p> به صورت دستی نام تگ را بنویسید تا لیستی شبیه عکس زیر ظاهر شود در لیست باز شده تگ را با کلید های بالا و پایین صفحه کلید مشخص کنید و بعد با زدن دکمه tab بر روی صفحه کلید تگ را انتخاب کنید. با این کار Vscode تگ باز و بسته را به صورت خودکار برایتان مینویسید.برای نوشتن متن پاراگراف هم تمام متنی را که میخواهییم به عنوان یک پاراگراف در صفحه ظاهر شود را بین دو تگ <p> قرار میدهیم <p> سلام این اولین صفحه وب من است </p>و حالا فایل خود را ذخیره کنید و اجرا کنید .خوب به پایان این قسمت رسیدیم و تا قسمت بعدی خدا‌‌نگهدار .... </article> <article> <h1>آموزش مقدماتی تا پیشرفته طراحی وب - جلسه اول</h1> <p>mokhtaria254 — Thu, 03 Sep 2020 23:40:13 +0430</p> سلام اسم من علی مختاری هست و قراره با اموزش مقدماتی تا پیشرفته طراحی وب در خدمتتون باشم. > مواردی که به انها در طول اموزش نیاز دارید ? 1. یک ویرایشگر متن مثل visual studio code یا atom (حتی میتونید از نوت پد هم استفاده کنید) 2.یک مرورگر بروز مثل Firefox یا Chrome یا حتی Apple Safariخوب حالا که متوجه شدیم به چه چیز هایی نیاز داریم بریم سراغ نصب یک ویرایشگر متن.برای نصب VSCode (visual studio code) به سایت زیر برید و اخرین نسخه را دانلود و نصب کنید.VSCode > نصب vscode kبعد از نصب با اجرای vscode وارد صفحه اصلی میشوید.بخشی را که هایلایت کردم مدیریت فایل vscode هست که به اون میگن explorerبرای ساخت یک پروژه جدید از همین بخش open folder را انتخاب کنید و یک فولدر جدید بسازید با نام دلخواه.با کلیک راست کردن در explorer و انتخاب new file یک فایل جدید با پسوند html. بسازید.? نکته : با انتخاب نام index برای فایل مرورگر ها این فایل را به عنوان فایل پیش‌فرض در نظر میگیرند و اول از همه این فایل را انتخاب میکنند.> خوب حالا وقتشه که بریم سراغ خود HTMLزبان برنامه نویسی HTML را میتوانیم به استخوان های یک بدن تشبیه کنیم چون زبان برنامه نویسی HTML مثل استخوان بندی بدن انسان که به بدن یک شکل اولیه میده مثلا کمک میکنه که چه عضوی از بدن کجا قرار بگیره مثلا مغز در سر و شش ها در قفسه سینه به اجزای وب کمک می کنه که جای اونها در یک صفحه وب مشخص بشه و هرکسی یک جایی از صفحه را پر کنه.خوب بدن که فقط اسکلت نیست پس پوست و گوشتش کو ؟ ?‍♂️ > برای اینکه شما بتونید یک وبسایت کامل را بنویسید حداقل باید به سه زبان HTML و CSS و JS مسلط باشید. CSS مخصوص زیبایی سایت هست و js برای پویا کردن سایت. اولین کد در HTML :در زبان برنامه نویسی HTML از تگ ها برای مشخص کردن بخش های مختلف یک صفحه استفاده میکنیم مثلا برای نوشتن بک پاراگراف یا قراردادن یک لینک در صفحه.تگ ها جفت هستن مثلا هر تگی که باز میشه هم باید با تگ پایان بسته بشود و تمام محتوت هم در میان دو تگ باز و بسته قرار میگیره تگ باز به شکل <TAG> و تگ بسته به صورت <TAG/>هستند مثلا به دو تگ زیر نگاه کنید<html> </html>به این دو تگ میگویند تگ HTML تمام تگ های دیگر در ایت تگ قرار میگیرند.? نکته : تگ ها در HTML به صورت پله مانند در یکدیگر قرار میگیرندادامه در قسمت دوم ....(ادامه را در قسمت دوم مینویسم به خاطر اینکه دیگه نمیتونم از اون + که کنار متن ها میاد برای افزودن محتوا به متن را در این پست استفاده کنم امیدوارم که ویرگول این مشکل را حل کنه) </article> </main></body></html>

نوشته های mokhtaria254

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