ساخت نمونه سایت ساده با HTML از صفر تا صد فرادرس مجله‌

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

تگ‌ها یا برچسب‌های HTML بین یک علامت کوچک‌تر و یک علامت بزرگ‌تر یا در واقع در داخل پرانتز گوشه‌‌دار (Angle-Bracket) مثل قرار می‌گیرند. امکان قرار دادن همه نوع چندرسانه مثل عکس، جدول و موارد دیگر در‌ یک صفحه وب، به وسیله تگ‌های HTML وجود دارد. تنها لازم است آنچه که مرورگر باید در صفحه رندر (Render | پردازش) کند را تعیین و مشخص کرد. طراحی و برنامه نویسی سایت‌ها تقریبا مهم‌ترین حوزه‌هایی هستند که در آن‌ها متوجه می‌شویم که ضرورت استفاده از CRUD چیست.

اما مشکل اینجا بود که این مرورگرها نمی‌توانستند دقیقاً نتایجی مشابه Netscape تولید کنند و خروجی‌ها متفاوت نمایش داده می‌شدند. یعنی اگر صفحه‌ای با افزونه Netscape طراحی می‌شد، این صفحه در سایر مرورگرها به درستی نمایش داده نمی‌شد. این مسئله موجب سردرگمی و خشم پیشگامان عرصه نشانه‌گذاری (Markup) شد.

با وجود امکان ذخیره داده در مرورگر،‌ یک توسعه‌دهنده می‌تواند راه‌حلی بیابد تا حتی در صورت قطعی اینترنت، وب‌اپلیکیشن بتواند همچنان در حالت اجرا باقی مانده و به کار خود ادامه دهد. HTML5 دارای ساز و کار ذخیره‌سازی موقت اپلیکیشن است که نحوه مدیریت شرایط آفلاین توسط مرورگر را تعیین می‌کند. در واقع، حافظه موقت اپلیکیشن که مسئولیت امکانات آفلاین را برعهده دارد، از اجزای مختلفی تشکیل شده است. با استفاده از یک صفت خاص در HTML5 یک توسعه‌دهنده می‌تواند بررسی کند که آیا یک اپلیکیشن آنلاین است یا خیر. آن‌ها خود را کارگروه تعیین تکنولوژی نحوه استفاده از ابرمتن وب (Hypertext Application Technology Working Group | WHATWG) نامیدند و یک نسخه جدید توسعه دادند. پس از بررسی و واکاوی‌های متعدد، W3C‌ به این نتیجه رسید که HTML همچنان آینده وب به حساب می‌آید.

گنجاندن CSS در صفحه‌های HTML موجب تعریف کردن ظاهر و لی‌آوت آن صفحه می‌شود. REST API، سبک معماریی برای طراحی سیستم‌های نرم‌افزاری، به ویژه سیستم‌های مبتنی بر وب است. به بیان ساده‌تر، REST API مجموعه‌ای از قوانین و استانداردها را برای تعامل بین نرم‌افزارهای مختلف، تعریف می‌کند. در تمام زبان‌های برنامه نویسی که برای طراحی سایت و نوشتن بک‌اند به کار برده می‌شوند، این سبک معماری به رسمیت شناخته می‌شود.

ایجاد وب‌سایتی جذاب و متمایز برای به جا گذاشتن تأثیری ماندگار بر کاربران بسیار مهم است. این زبان نشانه‌گذاری به عنوان مجموعه‌ای از دستورالعمل‌ها برای مرورگرهای وب عمل کرده و نمایش بصری را هنگام ورود بازدیدکنندگان به وب‌سایت‌ها را امکان‌پذیر خواهد کرد. در مطلب پیش رو از مجله فرادرس اطلاعات کاملی از این که HTML چیست و چه کاربردی دارد و چطور باید از آن استفاده کرد و غیره ارائه خواهد شد. در پایان مطالعه این مطلب کاربران درک اولیه نسبتاً خوبی از HTML به دست خواهند آورد و با اطمینان بیشتری تصمیم به یادگیری آن خواهند گرفت.

فناوری‌های دیگری از قبیل CSS و جاوا اسکریپت نیز به این منظور به کمک آن آمده‌اند. در این مقاله به جمع‌بندی مجموعه مقالات آموزش HTML مجله فرادرس می‌پردازیم. اگرچه ساخت وب‌سایتی ساده چندان زمان‌بر نیست اما به این معنی نخواهد بود که نباید بعداً ویژگی‌های جالب‌تری به سایت اضافه شوند.

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

از آنجا که هر یک از این زبان‌ها به زبان مشترکی (XML) نوشته شده‌اند، محتوای آن‌ها به راحتی می تواند در میان برنامه ها به اشتراک گذاشته شود. این مسئله، به طور بالقوه‌ای XML را تبدیل به یک زبان نشانه‌گذاری بسیار قدرتمند کرده است. به همین دلیل، جای تعجبی ندارد که W3C  یک نسخه XML از HTML‌ بسازد (که XHTML نامیده می‌شود). XHTML در سال 1380 تبدیل به یک استاندارد رسمی و در سال ۱۳۸۲ به‌روزرسانی شد.

برای ورود به دنیای طراحی سایت و برنامه نویسی وب، یادگیری HTML پیش‌نیازی ضروری است. HTML سنگ بنای توسعه وب محسوب می‌شود و یادگیری آن اولین قدم در توسعه وب است. بعد از آن که فهمیدیم که HTML چیست، چه کاربردی دارد و چگونه کار می‌کند آگهی یافتن از مقدمات این زبان نشانه‌گذاری متن هم خالی از لطف نیست و به مجموعه مهارت‌های ما خواهد افزود. از ۳ دهه قبل HTML به عنوان زبان پیش‌فرض برای اسناد و وب‌سایت‌های مبتنی بر وب مورد استفاده قرار می‌گیرد. وظیفه اصلی این فناوری محبوب همکاری با مرورگرهای وب و کمک به درک ساختار و سبک وب‌سایت‌ها به وسیله این مرورگرها است. اساساً، HTML به عنوان نوعی طرح اولیه عمل می‌کند و مرورگر وب قادر است با استفاده از آن صفحه وب را هنگام وارد کردن URL به وسیله کاربران، به آن‌ها نمایش دهد.

شروع هرچیزی سخته، ولی وقتی مسیر درستی رو انتخاب کنی،
با خیال راحت و بدون استرس میتونی از مسیر لذت ببری. ما در سبزلرن، توی سفر به دنیای برنامه نویسی کنارت هستیم تا باهم رشد کنیم و از نتیجه زحمات مون لذت ببریم. این تگ‌ها به شما اجازه‌ی مدیریت ساختار سند را می‌دهند، چراکه استفاده از کلید «Enter» برای ایجاد خط جدید در سند HTML معنایی ندارد. اکنون، هر یک از عناصر تشکیل دهنده صفحه HTML‌ تولید شده با کدهای بالا در ادامه فهرست و توضیح داده شده‌اند. این یعنی آن کلمه باید به صورت درشت و تأکید شده نمایش داده شود. همچنین، JavaScript برای ساخت وب‌سرورها، توسعه کاربردهای مرتبط با سرور و توسعه بازی‌های کامپیوتری نیز به کار گرفته می‌شود.

کسب مهارت در HTML برای افرادی که مایل به دنبال کردن توسعه وب هستند بسیار مهم است. توسعه‌دهندگان وبی که HTML را یاد بگیرند فرصت‌های شغلی متعددی را پیش روی خود می‌بینند. از کار به صورت فریلنسری گرفته تا پیاده‌سازی پروژه‌های شخصی و کار برای شرکت‌های برنامه نویسی و طراحی سایت همه و همه فرصت‌های شغلی مناسبی هستند. تقاضا برای توسعه‌دهندگان وب ماهر نه‌تنها در عصر حاضر بسیار قابل توجه است، بلکه سودآور زیادی هم دارد. برای مثال در سال ١٤٠١، متوسط دستمزد توسعه‌دهندگان وب ٩٨٥٦٥ دلار تخمین زده شد که نشان‌دهنده پتانسیل مناسب این حوزه در دنیای برنامه نویسی است. از طرفی دیگر شرکت‌ها به هنگام استخدام توسعه‌دهندگان وب، به دنبال افرادی هستند که درک قوی از HTML دارند.

مرورگر صفحه را بر اساس عناصر تعریف شده در کد HTML می‌سازد و به همراه شیوه‌نامه CSS برای استایل بخشیدن به این عناصر کار می‌کند. سال ۱۳۷۷ (1999 میلادی) توسعه «HTML4.01» به وقوع پیوست که از گزینه‌های چندرسانه‌ای، شیوه‌نامه‌ها، امکانات چاپ و زبان‌های برنامه نویسی اضافی پشتیبانی می‌کرد. با گذشت زمان، HTML5 به استاندارد تبدیل شد و از سال ۱۴۰۱، «HTML5.2» در حال استفاده است. HTML5.2 به عنوان آخرین نسخه این فناوری وب تأکید زیادی بر سیاست امنیت محتوا دارد و نیازهای عصر معاصر را به خوبی برطرف می‌کند. HTML، مخفف «Hypertext Markup Language» است و زبان ساده‌ای محسوب می‌شود که در ایجاد صفحات وب استفاده می‌شود.

برای درک مفهوم واکنش‌گرایی در وب، مثالی عینی در دنیای واقعی را در نظر می‌گیرم. آب موجود در برکه شکل ثابت خود را حفظ می‌کند زیرا لبه‌ها برکه یا حوض در حالت عادی بدون تغییر باقی می‌مانند. در مقابل، لبه‌های جلگه همیشه در حال تغییر هستند که این باعث می‌شود آب منبسط و باریک شود تا به شکل‌های مختلفی درآید. این تگ به ویژگی SRCنیاز دارد که مسیر فایل را به تصویری که کاربر می‌خواهد نمایش دهد را شامل می‌شود.

یادگیری HTML مهمترین و اساسی‌ترین قدمی‌ست که برای یادگیری تکنولوژی‌های حوزه وب نیاز است تا آن را یاد بگیرید. دلیل اینکه این دوره را نیز به صورت رایگان منتشر کرده‌ایم این است که همه شانس ورود به دنیای جذاب و پر درآمد طراحی وبسایت را داشته باشند. دوره آموزشی HTML با هدف آشنا کردن کامل شما با کدنویسی HTML به صورت رایگان است. بعد از این دوره یاد خواهید گرفت که صفحات وب ساده‌ای را ایجاد کنید.

بخش های سایت

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

در این بخش از آموزش ساخت نمونه سایت داده با HTML به مسئله تعاملی کردن وب‌سایت‌ها خواهیم پرداخت و وب‌سایت ساخته‌شده خود را تعاملی خواهیم کرد. مهمترین نکته این است که یادگیری HTML نسبتاً ساده است و منابع آموزش html رایگان زیادی در دسترس هستند. می‌توانید از منابع آنلاین، کتاب‌ها، دوره‌های آموزشی و مستندات رسمی HTML استفاده کنید تا به طور کامل با این زبان آشنا شوید. کمک گرفتن از آموزش html رایگان اهمیت ه‌ای فراوانی میتواند داشته باشد که مهم‌ترین آن‌ها دسترسی آسان بدون پرداخت هزینه خواهد بود.

HTML چیست؟ – از کاربرد تا مفاهیم اولیه + مثال

در این بخش از آموزش ساخت سایت داده HTML، به استایل‌بندی صفحه طراحی شده مرحله قبل می‌پردازیم. برای درک بهتر فرایند استایل بخشی به سایت با زبان شیوه‌نامه CSS، بیایید به همان مثال ساخت خانه باز گردیم. CSS در طراحی سایت مانند افزودن نما، رنگ دیواڤ، دکوراسیون و عناصری بصری در ساخت خانه است. HTML ساده فاقد ویژگی‌های بصری بوده و جذابیت چندان خاصی ندارد. برای افزودن عناصر بصری و جذاب کردن طراحی از CSS باید استفاده کرد.

۲. ایجاد ساختار HTML سایت

CSS سرنامی برای عبارت Cascading Style Sheet به معنی صفحات پیاپی مشبک است. CSS وضعیت ظاهری عناصر HTML را در صفحه نمایش، کاغذ یا سایر رسانه‌ها توصیف می‌کند. صفحات پیاپی مشبک برای قالب‌بندی آرایش صفحات وب استفاده می‌شوند.

اگر وب‌سایت نتواند از صفحه‌نمایش‌های کوچک تلفن تا تلویزیون‌های هوشمند پشتیبانی کند، کاربران زیادی را به احتمال زیاد از دست خواهد داد. در دنیای امروز، اینترنت بخشی جدایی‌ناپذیر از زندگی ما شده است و تقریباً همه چیز از خرید و فروش تا یادگیری و ارتباطات به واسطه وب‌سایت‌ها انجام می‌شود. در این میان، یادگیری HTML و CSS به عنوان دو ابزار اساسی برای ساخت و طراحی صفحات وب، می‌تواند شما را به دنیایی پر از فرصت‌های شغلی و خلاقیت وارد کند. اشنایی با مهم ترین تگ ها در پیاده سازی صفحات وب، تحلیل ساختار صفحات، پیاده سازی ساختار HTML صفحات مختلف ازجمله مهم ترین دستاورد های دیدن دوره آموزش HTML سبزلرن به شمار میره. مثال اول که با علامت «example-1» نشانه‌گذاری شده است نشان دهنده‌ی یک جمله است که در داخل دو تگ قرار گرفته که یکی تگ شروع و دیگری تگ پایان نام دارد.

آموزش html و css پروژه محور (طراحی صفحه ی اصلی jobinja)

اگر متد GET  را ده‌ بار پشت سر هم بر روی اطلاعات یکسانی فراخوانی کنیم، بار دهم هم باید همان پاسخی را دریافت کنیم که در بار اول دریافت کرده‌ بودیم. با کمک متد GET  حتی می‌توانیم کل آیتم‌های ذخیره‌ شده در لیست را فراخوانی کرده و مشاهده کنیم. در این مطلب از مجله فرادرس، متوجه می‌شویم که CRUD چیست و از چه دستور‌هایی تشکیل شده است.

اگر بخواهیم که آیتم جدیدی ایجاد کنیم باید درخواست POST  را به کار ببریم. در زمان ساختن API-ها تمام مدل‌های طراحی شده باید بتوانند ۴ عملیات اصلی را انجام دهند. در فهرست زیر، توضیح مختصری را برای معرفی عملیات CRUD نوشته‌ایم. هدف از این راهنما آشنایی ابتدایی با زبان اچ‌تی‌ام‌ال و تمرین کردن نوشتن عناصر مختلف اچ‌تی‌ام‌ال است.

دوره‌های آموزشی

«فرادرس» به عنوان یکی از قدیمی‌ترین پلتفرم‌های آموزش محور وب فارسی همواره با ارائه دوره‌های آموزشی به کاربران، خدمات زیادی داشته است. علاوه بر دوره‌های آموزش HTML، انواع دوره‌های آموزشی ترکیبی HTML و CSS و همچنین جاوا اسکریپت در این پلتفرم موجود است. وب‌سایت‌های مدرن از عناصر متنوع HTML تشکیل شده‌اند که این عناصر با استفاده از تگ‌ها و ویژگی‌ها به وجود آمده‌اند. اگر تگی علامت پایان یا آغاز نداشته باشد، می‌تواند منجر به گروه‌بندی ناخواسته محتوا شود و به طور بالقوه طرح‌بندی صفحه را تغییر دهد.

در این دوره آموزشی چه مفاهیمی را یاد خواهید گرفت؟

با استفاده از ابرمتن، کاربران می‌توانند بلافاصله به صفحات دیگر دسترسی پیدا کنند. ابرمتن روشی است که با استفاده از آن می‌توان در وب نقل مکان کرد. با کلیک کردن روی یک نوع متن خاص در صفحه وب که به آن ابرمتن گفته می‌شود، می‌توان از صفحه فعلی به صفحه دیگری رفت. خاصیت ماورایی (Hyper) بودن آن به این معناست که ماهیت خطی ندارد. یعنی می‌توان با کلیک کردن روی لینک‌ها در هر زمان به هر محل دلخواهی نقل مکان کرد و هیچ ترتیبی در آن وجود ندارد. «[+] W3Schools» نوعی سرویس رایگان است که درس‌های جامعی در مورد HTML پایه ارائه می‌دهد.

در حالی که HTML و CSS برای ایجاد صفحه وب قابل‌مشاهده کمی حیاتی‌تر هستند اما از طرفی دیگر جاوا اسکریپت هم بسیار مهم است. این زبان برنامه نویسی کاربران را قادر می‌سازد تاکتیک‌های برنامه‌نویسی را پیاده‌سازی کرده و لایه‌های جدیدی از تعامل را به سایت‌های ثابت اضافه کنند. کاربردهایی مانند بانکداری آنلاین، رسانه‌های اجتماعی، خدمات تحویل غذا و موارد دیگر همه و همه از جاوا اسکریپت بهره می‌برند. در پلتفرم فرادرس انواع دوره‌های آموزشی جاوا اسکریپت موجود است که می‌توانید از آن‌ها بهره ببرید. HTML مخفف «Hypertext Markup Language» بوده و اساس و پایه توسعه و طراحی سایت است. برای درک بهتر وظیفه HTML بیایید فرایند ساخت خانه را بررسی کنیم.

این کد به معنای موفقیت در انجام درخواست ارسال شده به سرور است. البته بعضی وقت‌ها هم کد 204  به معنای «بدون محتوا» (NO CONTENT ) به کاربر برگردانده می‌شود. این کد هم به معنای موفقیت در اجرای درخواست است اما هیچ داده‌ای را در بدنه پاسخ برنمی‌گرداند. با استفاده از متد GET  برای ارسال درخواست‌های HTTP می‌توان اطلاعات عنصر‌ها را به صورت مجزا از دیگران هم مطالعه کرد. برای انجام این کار لازم است که id  مربوط به آن عنصر را به صورت صریح در درخواست مشخص کنیم.

۴. ایجاد ارتباط بین HTML و CSS

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

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

این ویژگی‌ها نه تنها تعامل کاربر را افزایش می‌دهد، بلکه بازدیدکنندگان را قادر می‌سازد تا تجربه خود را بر اساس اولویت‌ها و نیازها تنظیم کنند. این متا تگ به همه مرورگرها و دستگاه‌ها دستور می‌دهد تا اندازه‌گیری‌های پیکسل را به طور مداوم تفسیر کنند. به عبارت ساده‌تر، دستگاه‌های تلفن همراه و مرورگرها صفحه را به همان مقیاسی که روی دسکتاپ ظاهر می‌شود تنظیم می‌کنند.

ساختاردهی فرم های HTML – راهنمای جامع

قوانین سختگیرانه برای تمام زبان‌های XML‌ضروری است چرا که، بدون آن هم‌کنش‌پذیری (Interoperability) میان برنامه‌ها امکان‌پذیر نبود. بعد از اینکه متوجه شدیم CRUD چیست، در بخش بعدی مطلب به بیان دستورات معادل CRUD در پایگاه‌های داده رابطه‌ای پرداخته‌ایم. هر چند در صورت تمایل به کار کردن بر روی پایگاه‌های داده لازم است که با دستورات بیشتری نیز آشنا شویم. در بعضی از این پایگاه‌های داده از زبان SQL با سینتکس مشابه هم استفاده می‌شود. بعضی دیگر هم از قواعد NoSQL برای کوئری‌نویسی استفاده می‌کنند. در این بخش، فیلم‌های آموزشی مربوط به چند مورد از این پایگاه‌های داده را معرفی کرده‌ایم.

اولین نسخه HTML که شامل ۱۸ تگ بود، توسط تیم برنرز-لی (Tim Berners-Lee) در اوایل دهه هفتاد شمسی نوشته شد. پیش از ادامه این مبحث لازم است یادآور شویم که می‌توانید اچ تی ام ال را با استفاده از مجموعه آموزش اچ تی ام ال، مقدماتی تا پیشرفته فرادرس یاد بگیرید. در این قسمت از مطلب، نوشتن دستورات CRUD را با استفاده از دستورات «زبان‌ کوئری نویسی ساخت‌یافته» (Structure Query Language | SQL) نمایش داده‌ایم. همین‌طور که اشاره شد، دستورات CRUD در اپلیکیشن‌های مربوط به پایگاه داده هم استفاده می‌شوند. این‌ عملیات حتی برای کار در پایگاه‌های داده غیررابطه‌ای NoSQL مانند MongoDB و Apache Cassandra و AWS DynamoDB نیز به کار برده می‌‌شوند. عملیات خواندن اطلاعات، هرگز نباید هیچ تغییری در اطلاعات موجود در منبع ایجاد کند.

چون در کنار اون حداقل باید به CSS هم آشنا باشید تا بتونید رنگ و لعاب خوبی به صفحات بدید. مقدار «alt» مشخص می‌کند که هنگامی که ماوس خود را بر روی تصویر قرار دادید یا تصویر به هر دلیلی نمایش داده نشد، چه متنی به کاربر نشان داده شود. این تگ‌ها مشخص می‌کنند که یک تصویر با چه اندازه‌ی نمایش داده می‌شود و چیزی راجع به اندازه‌ی واقعی تصویر به ما نمی‌گویند. اندازه‌ی تصویر را می‌توان به پیکسل (مشابه 200 یا 200px) یا به درصد نوشت.

اما، HTML کاربردهای دیگری نیز دارد که از جمله می‌توان به ساخت سند وب، ناوبری اینترنتی، ایجاد تصاویر واکنش‌گرا، ذخیره‌سازی سمت کلاینت و سایر موارد اشاره کرد. در این زمان، یک کارگروه HTML تحت هدایت دِیو راگت (Dave Raggett) یک پیش‌نویس HTML جدید را به نام HTML 3.0 معرفی کردند. این نسخه، دارای قابلیت‌های ارتقایافته بسیاری برای HTML بود و فرصت‌های خیلی بیش‌تری را برای مدیران سایت‌ها جهت طراحی صفحات فراهم می‌کرد. متأسفانه، مرورگرهای آن زمان در پیاده‌سازی هر کدام از به‌روزرسانی‌های جدید، بسیار کند عمل می‌کردند. این مرورگرها تنها برخی از قابلیت‌های جدید را پیاده‌سازی کرده و باقی آن‌ها را کنار می‌گذاشتند. ابرمتن (HyperText) یعنی متنی که دارای ارجاع (لینک) به سایر متن‌ها است.

HTML ،CSS و جاوا اسکریپت

یادگیری HTML‌ تنها چند روز برای خواندن و آموزش کدهای مورد نیاز زمان می‌برد. وقتی آشنایی کافی با تگ‌ها بدست آید، می‌توان به راحتی صفحه HTML ساخت. اگرچه، استفاده از HTML برای طراحی سایت‌های خوب بحث جداگانه‌ای دارد. با توجه به موجود بودن منابع متعدد، یادگیری زبان برنامه نویسی HTML بسیار ساده است. HTML به طور مداوم در حال بازبینی و تحول است تا بتواند تقاضا و نیازمندی‌های روزافزون مخاطبان اینترنت را تحت مدیریت کارگروه W3C برآورده کند. W3C‌ سازمانی است که مسئولیت طراحی و نگهداری زبان برنامه نویسی HTML را برعهده دارد.

زبان برنامه نویسی HTML چیست؟ راهنمای یادگیری و شروع به کار به زبان ساده

همان‌طور که متوجه شدیم، برای برقراری ارتباط بین کاربر و منابع مختلف در اپلکیشن‌ها چهار عملیات اصلی انجام می‌گیرند. اغلب اوقات، دانشمندان علوم کامپیوتر این دستور‌ها را به شکل خلاصه شده و با کلمه CRUD نام می‌برند. اگر عملیاتی وجود داشت که قابل اجرا توسط هیچ‌کدام از این ۴ دستور نبود، به احتمال زیاد باید به صورت مدل مجزایی تعریف شود.

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

یک عنصر HTML یا HTML Element به وسیله یک تگ آغازین تعریف می‌شود. اگر عنصر محتوایی را در خود جای داده باشد، با یک تگ پایانی بسته می‌شود. در مثالی که برای تگ HTML در بالا ارائه شد، تگ آغازین برای عنصر b است و چون این عنصر در داخلش متن وجود دارد باید با تگ پایانی بسته شود. کدهای بالا، آیتم جدیدی را با مقدار Avocado Toast  به ازای نام name  و مقدار 8  به ازای قیمت price  ایجاد می‌کند. در صورتی که عملیات ساخت عنصر جدید در پایگاه داده با موفقیت انجام شود، سرور پاسخی را برمی‌گرداند که شامل Header و بدنه Response است. داخل بخش Header در پاسخ، لینکی به منبع ساخته شده جدید وجود دارد و در بخش Body پاسخ کد 201  قرار داده می‌شود.

کاربرد HTML چیست؟

«[+] General Assembly Dash» نوعی منبع آموزشی HTML خارجی بوده که برای مبتدیان طراحی شده است و پروژه‌های عملی را برای زبان آموزان در طراحی وب ارائه می‌دهد. این پلتفرم با استفاده از رویکردی مبتنی بر هدف، بر کاربردهای دنیای واقعی HTML تأکید دارد و آموزش ارائه می‌دهد. پس از تکمیل پروژه‌ها، شرکت‌کنندگان می‌توانند یک دوره مربیگری آنلاین را انتخاب کنند که پس از اتمام، گواهینامه نیز به آن‌ها اعطا می‌کند. اطلاعاتی در مورد بخش‌های مختلف متن سند ارائه می‌کنند و می‌توانند شامل تگ‌های دیگر به عنوان عناصر فرعی باشند.

از طرف دیگر، IndexDB یک سرویس ذخیره داده بزرگ‌تر و بهتر برای سمت کلاینت است. همچنین، HTML5 بهبودهایی را برای اجزاء معنایی (Semantic) نیز معرفی کرده است. تگ‌های معنایی جدید، مرورگرها را در مورد مفهوم محتوا مطلع می‌سازند که این مسئله هم به سود خوانندگان و هم به سود موتورهای جستجو است.

جلسات دوره

در مثال بالا، ابتدا ایموجی روی عرض ثابت ۴۰۰ پیکسل تنظیم شده است. سپس، زمانی که Viewport، ۴۰۰ پیکسل یا کوچک‌تر است، آن را به ۳۰۰ پیکسل کاهش می‌دهد. در نهایت، برای صفحه‌های ۳۰۰ پیکسل یا کوچک‌تر، حداکثر عرض روی ۳۰۰ پیکسل تنظیم شده و اطمینان حاصل می‌شود که مقیاس آن همیشه ۱۰۰ درصد از عرض موجود در کانتینر را اشغال کند. اگر با CSS آشنایی ندارید، توصیه می‌کنیم تا راهنمای CSS مجله را مطالعه کنید تا درک بهتری از ویژگی‌ها، سینتکس، انتخابگرها و ویژگی‌های آن داشته باشید. البته قطعا مطالعه مقالات از رفرنس های معتبر در قالب آموزش HTML pdf به شما کمک بیشتری میکنه که در طول دوره اون‌هارو به شما معرفی می‌کنیم.

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

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

• در صورت تمایل به مشاهده فیلم‌های بیشتر بر روی تصویر بالا کلیک کرده و وارد صفحه اصلی مجموعه فیلم‌های آموزشی مربوط به طراحی و برنامه نویسی سایت‌‌ها شوید.
{
• در ادامه تمامی مراحل گفته شده در بالا به صورت قدم به قدم ارائه خواهند شد.
|}
• برای مثال، به منظور آشنایی با آن در وردپرس می‌توانید فیلم آموزش REST API در وردپرس برای کار با داده های پایگاه داده را از فرادرس مشاهده کنید.
{
• برای مثال شما میخواهید مشخص کنید در مکان x از صفحه وب یک لیست قرار بگیرد یا یک فرم یا یک لینک و یا هر چیز دیگر که اینکار با استفاده از HTML به سادگی قابل انجام است.
|}
• هر چند در صورت تمایل به کار کردن بر روی پایگاه‌های داده لازم است که با دستورات بیشتری نیز آشنا شویم.
{
• چون در کنار اون حداقل باید به CSS هم آشنا باشید تا بتونید رنگ و لعاب خوبی به صفحات بدید.
|}

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

در این بخش، ‌برای درک بهتر صفت های HTML یک مثال ساده استفاده از صفت HTML ارائه می‌شود. «[+] Coursera» دوره‌های عمیق HTML را با نمونه‌های دنیای واقعی ارائه می‌دهد. دوره‌های آموزش این پلتفرم با پرداخت هزینه دلاری در ماه همراه در دسترس است و همچنین کاربران می‌توانند یک هفته به صورت آزمایشی از محتوای آن استفاده کنند. تا اینجای کار با اینکه HTML چیست و تاریخچه آن به کجا و کی بازمی‌گردد آشنا شدیم و انواع نسخه‌های منتشر شده از این فناوری را مرور کردیم. اما سوالی که امکان مطرح شدن آن برای کاربران بسیار زیاد خواهد بود در مورد کاربردهای این فناوری است.

فیلم‌های آموزش طراحی سایت در قالب یک مجموعه آموزشی گردآوری شده‌اند. این مجموعه، شامل ۵۵ دوره آموزشی مختلف است که مدت زمانی آن‌ها در مجموع نزدیک به ۱۲۰ ساعت است. تاکنون، بیش از ۱۰۰ هزار دانشجو از محتوای دوره‌ها و عناوین این مجموعه استفاده کرده‌اند. HTML 2.0 به عنوان دومین نسخه از زبان برنامه نویسی HTML همه مشخصات نسخه اولیه HTML 1.0 را داشت و علاوه بر آن‌، چند ویژگی جدید را نیز به این مجموعه اضافه کرد.

برخی از این زبان‌ها شامل GML (زبان نشانه‌گذاری جغرافیا | Geography Markup Language) یا MathML ، MusicML و RSS (هم‌نشری بسیار ساده | Really Simple Syndication) است. HTML 2.0 تا اواسط سال ۱۳۷۵ استاندارد طراحی وب محسوب می‌شد و ویژگی‌های کلیدی بسیاری را برای نخستین بار معرفی کرد. در مثال بالا، تگ‌ b به صورت در دو طرف جمله «این کلمات در داخل تگ درشت نشان داده خواهند شد» را احاطه کرده‌اند. تأثیر تگ این است که از طریق یک مرورگر عادی، متن داخل آن به صورت درشت (بولد | Bold) نشان داده خواهد شد.