آموزش برنامه نویسی HTML - از پایه تا فوق پیشرفته با مثال

دوست دارید کمی برنامه نویسی HTML یاد بگیرید؟

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

امروزه در جهان حداقل 1.2 میلیارد وب سایت وجود دارد. تقریبًا در تمام این وب سایت ها به طروقی از برنامه نویسی HTML استفاده شده است.

HTML چیست؟

HTML، مخفف HyperText Markup Language است که یک زبان کامپیوتری برای ایجاد وب سایت ها و برنامه های کاربردی تحت وب محسوب می شود.

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

در این آموزش ، ما به آموزش مبانی برنامه نویسی با زبان HTML پرداخته و به تمام موارد موردنیاز را که باید بدانید تا با HTML به عنوان یک مبتدی کار کنید ، خواهیم گفت.

ورژن های HTML

در ابتدا بیایید نگاه سریعی به تمام نسخه های HTML از زمان ابداع آن تا کنون بیاندازیم.

• HTML 1.0 :  این نسخه اسکلت بندی HTML و اولین انتشار از این زبان می باشد.
• HTML 2.0 :  این نسخه در سال 1995 معرفی شد و به تدریج تکمیل گردید و قابلیت های اضافی مانند بارگذاری فایل بر اساس فرم (form – based) ، جداول ، نقشه های تصویر سمت client و بین المللی شدن به آن افزوده شد.
• HTML 3.2 :  در تلاش برای اطمینان از توسعه استانداردها برای وب جهانی (World Wide Web) ، کنسرسیوم جهانی وب (W3C)  توسط تیم برنرز لی در سال 1994 تأسیس شد. تا سال 1997، آنها HTML 3.2 را منتشر کردند.
• HTML 4.0 :  سپس در سال 1997، کنسرسیوم W3C نسخه HTML 4.0 را منتشر کرد - یک نسخه که با بسیاری از انواع عناصر خاص مرورگر و ویژگی های آنها انطباق داشت - را انتشار داد.
• سپس HTML 4.0 با تغییرات جزئی در سال 1998 دوباره منتشر شد.
• HTML 4.01 :  در دسامبر 1999، HTML 4.01 منتشر شد.
• XHTML : مشخصه های آن در سال 2000 معرفی شد و توصیه شده بود که به عنوان استاندارد الحاقی با HTML 4.01 استفاده شود. XHTML  با XML برای حصول اطمینان از این که کدها درست نوشته شده است و برای ایجاد اطمینان از قابلیت همکاری بین زبان های برنامه نویسی ترکیب شد.
• HTML5 : کنسرسیوم W3C نسخه HTML5 را به صورت توصیه شده در اکتبر 2014 منتشر کرد و بعد از آن HTML 5.1 در ماه نوامبر 2016 منتشر شد.

انتخاب ویرایشگر HTML

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

یک ویرایشگر HTML خوب ، کد شما را تمیز و سازماندهی شده نگه می دارد. هم چنین هنگامی که شما یک تگ جدید را باز می کنید ، به طور خودکار تگ بستن آن را نیز ارائه می دهد. برای جلوگیری از داشتن یک کد خراب و در نتیجه کاهش میزان تایپ ، شما باید از آن استفاده نمایید. اکثر ویرایشگرهای HTML امروز به شما اجازه می دهند پیش نمایش صفحه وب خود را ببینید تا ببینید که صفحه وب شما چگونه در یک مرورگر وب با استفاده از ویژگی WYSIWYG نمایش داده می شود.

ویرایشگرهای HTML رایگان و پولی بسیاری وجود دارد ، در ادامه برخی از گزینه های محبوب را برای انتخاب شما معرفی می کنیم :

• HTML-Kit
• CoffeeCup
• KompoZer
• Komodo Edit
• Notepad++
• Bluefish
• CodeLobster

بلوک های پایه ایی ساخت HTML

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

مقدمه ای بر تگ ها

هنگامی که  شما وارد دنیای HTML می شوید ، اولین چیزی که باید بدانید تگ ها هستند. در اصل ، تگ ها متن عادی را از کدهای HTML جدا می کنند.

در نتیجه ، هنگامی که متن عادی در بین کدهای HTML می آید ، تگ ها بین این که آیا سند شما به عنوان متن معمولی یا "متن تبدیل شده" نمایش داده می شود یا خیر ، تمایز قائل می شوند. متن تبدیل شده (transformed text) ، کد اصلی است که مجموعه ای از چیزها (مانند لینک ها ، تصاویر ، رسانه ها یا دیگر روش های قالب بندی) را بر اساس آنچه دستور داده شده است تا بر مبنای تگ ها نمایش داده شود ، نشان می دهد.

برای درک بهتر آموزش برنامه نویسی HTML، به عنوان مثال بیایید نگاهی به عبارت “He is a boy” بیاندازیم :

• در قالب متن معمولی شما می توانید He is a boy را فقط ببینید.
• در قالب متن bold شما می توانید He is a boy را ببینید.

برای نوشتن یک متن bold باید از تگ <b>  استفاده کنید.

در کد HTML خام ما داریم : <b>He is a boy</b> که مرورگر آن را به این صورت ترجمه می کند: He is a boy .

He is a boy را به صورت ایتالیک نیز می توان نمایش داد.

برای این منظور از تگ <i> استفاده می کنیم.

ما داریم : <i>He is a boy</i> که به صورت He is a boy نمایش داده می شود.

برای ایجاد پیوند (hyperlink) در متن از تگ <href> استفاده می کنیم.

در کد HTML خام داریم : <a href=”https://websitesetup.org/”>He is a boy</a> که به صورت  He is a boy نمایش داده می شود.

چند مورد وجود دارد که باید در آموزش برنامه نویسی در HTML در مورد تگ ها بدانید :

• تگ ها ، بلوک های ساخت HTML هستند - شما نمی توانید با HTML بدون تگ ها کار کنید! اگر شما از این که کدام تگ را استفاده کنید ، مطمئن نیستید ، می توانید به جدول تناوبی HTML ارائه شده در لینک HTML periodic table مراجعه نمایید.
• تقریبا هر تگ بازی باید بسته شود. به خاطر داشته باشید که موارد استثنایی وجود دارد. یک مثال از یک تگ که لازم نیست ، بسته شود یک تگ empty است. به عنوان مثال تگ شکست خط که به صورت <br> عمل می کند ، نیازی به بسته شدن ندارد.
• تگ ها در براکت کمتر از ("<") و بزرگتر از (">") محصور هستند. تگ های بسته شامل علامت slash (/) هستند که قبل از نام تگ بسته قرار می گیرند. مثال یک تگ باز : <b> .  مثال یک تگ بسته : </b> .
• هر فایل HTML با باز کردن تگ <html>  شروع می شود و با تگ بسته </html>  به پایان می رسد. خط اول فایل HTML باید نوع سند را اعلام کند تا مرورگر بداند سند شما از چه ورژن HTML استفاده می کند. به همین دلیل است که صفحات HTML قبل از شروع کد HTML ، با “<!DOCTYPE html>" شروع می شوند.

پیش از افزودن محتوا ، اکثر فایل های HTML اساساً به این شکل هستند:

بخش مربوط به تگ <head>  معمولاً حاوی اطلاعاتی درباره سند مانند عنوان ، متا تگ ها و جایی است که فایل CSS در آن قرار می گیرد - محتوای که به طور مستقیم بر روی صفحه مرورگر قابل مشاهده نیست. بخش بین تگ های <body>  و </body> (که ما با عنوان "محتوای اصلی" معرفی می کنیم) ، جایی است که در آن محتوای اصلی فایل HTML که در مرورگر مشاهده می شود ، قرار می گیرد. این بخش شامل همه چیز از پاراگراف گرفته تا hyperlink ها و قالب بندی های چند رسانه ای و هر چیز دیگری قرار می گیرد.

در مقاله بعدی از آموزش برنامه نویسی در HTML به عناصر اصلی  HTML خواهیم پرداخت.