آموزش HTML

  • قیمترایگان

  • مدرسسارا عظیمی
  • زمان۱ ساعت و ۲۰ دقیقه

به اشتراک‌گذاری

آموزش HTML

آموزش HTML رایگان در دسترس شماست. اولین گام برای ورود به دنیای برنامه نویسی وب فراگیری آموزش HTML است. پس از یادگیری این دوره دومین گام فراگیری آموزش css میباشد. HTML یک زبان برنامه نویسی نیست، یک زبان نشانه گذاری است که مخفف عبارت Hypertext Markup Language می باشد.

HTML کدی است که برای ایجاد ساختار در صفحات وب و محتوا از آن استفاده می شود. همه صفحات وب سایت های گوناگونی را دیده ایم. همه این صفحات از بخش هایی مانند پاراگراف، تصاویر، جدول ها و عنوان و … ساخته شده اند. یادگیری HTML اولین گام و ضروری ترین گام برای ورود به بحث برنامه نویسی دنیای وب است.

HTML چیست؟ برای شناخت بهتر باید ابتدا با تعریف زبان html آشنا شویم. Html زبان برنامه‌نویسی نیست و ساختار محتوای ما را در وب تعریف می‌کند. HTML از عناصر یا المنت هایی تشکیل شده که با استفاده از آن می‌توانیم بخش‌های مدنظر خود را در صفحات وب جایگذاری نماییم و هویت کاربردی هر بخش را مشخص سازیم. هر محتوایی که در وب سایت‌ها می‌بینیم، همه در یک عنصر یا المنت از html قرار گرفته اند. از تمام متن‌ها و عکس‌ها و فرم‌ها تا ویدئوهایی که آن را پلی می کنیم و لینک هایی آن را کلیک می‌کنیم.

آنچه که ما در وب میبینیم:

این مطلب آموزش html است

آنچه که در ساختار html وجود دارد و مرورگر ما آن را میخواند:

<p>این مطلب آموزش html است</p>

P مخفف عبارت پاراگراف است. همه عناصر در زبان html دارای 2 تگ هستند، تگ باز و تگ بسته.

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

  • برای شروع یادگیری زبان HTML، احتیاج به مقدماتی هست که در این ویدیو به اون میپردازیم. همچنین، نحوه نصب ادیتور مناسب برای این زبان رو معرفی می کنیم.

  • برای نهایت بهره گیری از این آموزش، بهتره که ادیتور مورد نظر رو نصب کرده باشید. در این جا با کوچک ترین عنصر تشکیل دهنده یک کد به زبان HTML آشنا می شیم که تگ ها (Tag) هستند. ساده ترین تگ ای که در این ویدیو با اون آشنا می شیم، تگ های تیتر (Heading) هستند.

  • بعد از یادگیری تیترهایی با اولویت های مختلف در آموزش قبل، با پر کاربردترین تگ زبان HTML آشنا می شیم، یعنی تگ پاراگراف (Paragraph). ترکیب تیترها و پاراگراف ها برای محتوای وب سایت ها ضروریه.

  • تمام زبان هایی که با استفاده از اون ها میشه کد نوشت، امکان نوشتن کامنت رو دارن. در این آموزش، یاد می گیریم که چطور می تونیم در زبان HTML، کامنت (Comment) بنویسیم و این کار چطور و کجا به دردمون می خوره و به کمک ما میاد.

  • در این قسمت، یاد می گیریم که چطور با استفاده از تگ های Image می تونیم به صفحه مورد نظرمون عکس اضافه کنیم. همچنین، یاد می گیریم که تگ ها ممکنه صفت ها (Attributes) مختلفی داشته باشن و لازمه که به اون ها مقدار بدیم. با صفات تگ Image هم آشنا می شیم.

  • در این قسمت از آموزش، با نوعی از صفت ها (Attributes) آشنا می شیم که برای تمام تگ ها قابل استفاده هست و به قولی Global و یا عمومی محسوب می شن. این صفت ID نام داره. نامگذاری منحصر به فرد ID های تگ های مختلف بسیار در زبان HTML حائز اهمیته. برای تماشای این ویدیو، مطمئن شوید که با مفهوم صفات (Attributes) به خوبی آشنایی پیدا کردید.

  • امکان نداره وب سایتی پیدا کنید که لینک (Link) نداشته باشه. با استفاده از لینک ها می تونیم کاری کنیم که با کلیک بر روی یک عکس یا نوشته به یک وب سایت جدید، قسمتی از وب سایت خودمون و یا قسمتی از صفحه ای که داخلش هستیم هدایت بشیم. این کار با استفاده از تگ a و یا Anchor قابل انجامه. پس این آموزش بسیار اهمیت داره، بهتره که با تگ هایی که تا به این جا آموزش داده شد، به خوبی آشنا شده باشید.

  • تگ های HTML همیشه جدا از هم نیستند. گاهی لازمه چند تگ رو به صورت تو در تو و یا Nested بنویسیم. مثلا داخل یک پاراگراف (Paragraph)، یک لینک قرار بدیم. در این آموزش با نحوه انجام این کار و علت ضرورتش آشنا می شیم.

  • همان طور که در قسمت قبل، با لینک کردن قسمتی از پاراگراف آشنا شدیم، در این قسمت با لینک کردن یک عکس در HTML آشنا می شیم. پس بهتره که مبحث قبل رو به خوبی یاد گرفته باشین و بعد این ویدیو رو تماشا کنید.

  • مفهومی به نام لیست (List) در HTML وجود داره که کاربرد زیادی هم داره، برای مثال در ایجاد منوهای بالای صفحات وب سایت ها. این لیست ها می تونن دارای ترتیب (Ordered List) و بدون ترتیب (Unordered List) باشن. در این آموزش با دو تگ جدید که برای این دو نوع لیست استفاده می شن، آشنایی پیدا می کنیم.

  • لیست ها (Lists) هم مثل بقیه تگ ها، ممکنه سر راست نباشن و تو در تو باشن و چند لیست داخل هم قرار بگیرن. پس می تونیم لیست های تو در تو (Nested) هم داشته باشیم که در این ویدیو به اون می پردازیم.

  • اگر بخواهیم در کد HTML از لیست ها (Lists) برای ایجاد منو در بالای صفحه وب سایت استفاده کنیم، پس حتما باید بدونیم که چطور میشه اجزای چند لیست تو در تو (Nested)، به صفحات دیگری لینک بشن. این قسمت از آموزش HTML رو از دست ندید!

  • زبان HTML هم مثل تمام زبان های دیگه، نسخه های مختلفی داره. جدیدترین و پرکاربردترین نسخه زبان HTML، نسخه پنجم و یا همون HTML5 هست. در این قسمت از آموزش، با تگ های مختص به HTML5 آشنا می شیم و کاربردهای اون ها رو یاد می گیریم.

  • این قسمت از آموزش HTML، در ادامه ی آموزش قبلی به عناصر مختص به HTML5 می پردازه که همون نسخه پنجم HTML محسوب می شه. برای دیدن این آموزش، باید حتما قسمت قبل رو تماشا کرده باشید.

  • برای ایجاد عنصری که کاربر وب سایت بتونه اطلاعاتی داخل اون وارد کنه، احتیاج به تگ input خواهیم داشت. همونطور که قابل حدس هست، این تگ یکی از مهم ترین عناصرHTML محسوب می شه چون باعث تعامل کاربر با وب سایت از طریق وارد کردن ورودی می شه. بدون تگ input، کاربر نمی تونه اطلاعات ورود به وب سایت مثل نام کاربری و رمز عبور رو جایی وارد کنه.

  • در آموزش قبل با تگ input آشنا شدیم، و حالا در این قسمت از آموزش HTML با صفات (Attributes) این تگ آشنا می شیم. یکی از این صفات Placeholder هست که در واقع متنی هست که پیش از این که داخل input چیزی وارد بشه، به کاربر نمایش داده می شه. هم چنین صفت label هم معرفی می کنیم.

  • برای ثبت اطلاعاتی که توسط کاربر وارد شده، احتیاج به تگی به نام Form داریم. داخل تگ Form می تونیم تمام input های مورد نظر رو قرار بدیم و با استفاده از قرار دادن دکمه Submit یا ثبت اطلاعات، اون ها رو به سرور بفرستیم تا عملیات لازم انجام بشه. برای یادگیری این قسمت از آموزش HTML، حتما آموزش های قبلی مربوط به تگ input رو به خوبی یاد بگیرید.

  • حتما در بعضی وب سایت ها دیدید که وارد کردن برخی از فیلدها اجباریه. در این قسمت از آموزش HTML یاد می گیریم که چطور می تونیم وارد کردن برخی input ها رو برای کاربر اجباری کنیم. این کار با استفاده از صفت Required قابل انجامه.

  • حتما در سایت های مختلف، فیلدهایی رو دیدید که به شما چند انتخاب میدن و شما باید از بین اون ها، یکی رو انتخاب کنید. به این دکمه ها، دکمه های رادیویی و یا Radio Button گفته می شه که در این قسمت از آموزش HTML به بررسی اون ها می پردازیم.

  • در آموزش قبلی دیدیم که با استفاده از دکمه های رادیویی (Radio Buttons) می تونیم از کاربر بخواهیم که یکی از گزینه هایی که برای اون تعیین کردیم رو انتخاب کنه. حالا با استفاده از چک باکس (Checkbox) می تونیم امکان انتخاب چند گزینه رو به کاربر بدیم. در این قسمت از آموزش HTML با پیاده سازی این عنصر آشنا می شیم.

  • یکی از مهم ترین صفات (Attribute) هایی که در زبان HTML وجود داره، Value یا مقداره. برای مشخص کردن گزینه های چک باکس (Checkbox) و دکمه رادیو (Radio Button) به این صفت (Attribute) نیاز پیدا می کنیم که در این قسمت از آموزش زبان HTML به اون می پردازیم.

  • یکی از مهم ترین مفاهیمی که در HTML لازمه بدونیم، تقسیم بندی صفحه به قسمت های مختلف از طریق تگ Div هست که مخفف Division یا قسمته. با استفاده از این تگ می تونیم صفحه رو به قسمت های مختلفی تقسیم کنیم و برخی عناصر رو با هم گروه بندی کنیم تا بعداً کنترل اون دسته از عناصر برای ما راحت تر باشه. پس این قسمت از آموزش HTML رو از دست ندید!

  • استفاده از ابزار Inspect Element برای کسانی که با کد HTML و CSS و در کل تکنولوژی های فرانت اند کار می‌کنن، بسیار مفیده و در خیلی از موارد می تونه کمک کننده باشه. در این قسمت از آموزش زبان HTML با کار با این ابزار آشنا می شیم و یاد می گیریم که چطور می تونه برای ما مفید باشه و خیلی از مشکلات رو برای ما حل کنه.