آموزش html فرادرس2024-10-13
آشنایی مقدماتی با HTML به زبان ساده فرادرس مجله
بنابراین، ائتلاف شبکه جهانی وب (World Wide Web) که به اختصار W3C خوانده میشود، در سال ۱۳۷۲ تاسیس شد. هدف این سازمان، استانداردسازی زبان برنامه نویسی HTML و هدایت بهروزرسانیهای آن در مسیر درست است. اولین نسخه ارائه شده توسط W3C ابتدا WILBUR نامگذاری و بعدها به نام HTML 3.2 شناخته شد. یعنی HTML دادهها را محصور میکند یا آنها را در داخل تگهای (برچسبهای) HTML «علامتگذاری» میکند. سپس، مرورگر وب کدهای HTML را میخواند و این کدها محل مؤلفههایی مثل عنوانها، پاراگرافها، لینکها و سایر موارد را برای مرورگر مشخص میکنند. در واقع، HTML داده را برای مرورگر توصیف میکند تا مرورگر وب بتواند دادهها را به شکل مناسبی نمایش دهد.
پرکاربرترین تگ های HTML
در مثال بالا، Thبرای هدر جدول (ردیف اول) استفاده میشود و tdبرای سلولهای داده واقعی استفاده خواهد شد. جدول فوق سبک و استایل خاصی ندارد و برای استایل بخشیدن به آن باید از زبان شیوهنامه CSS استفاده کرد. همچنین عبارت «image.jpg/..» یعنی در یک پوشه قبل قرار دارد و عبارت «image.jpg/../..» به دو پوشهی قبل اشاره میکند.
در هسته خود، HTML به عنوان زبان اساسی برای ساخت وبسایتها، هم برای اهداف شخصی و هم برای اهداف تجاری در سطح جهانی عمل میکند. با این حال، رشد اولیه آن به دلیل تعداد محدودی از توسعهدهندگانی که در آن دوره درگیر ایجاد و طراحی وبسایت بودند، چندان چشمگیر نبود. مرورگرهای وب اسناد HTML را از یک وبسرور یا محل ذخیره لوکال دریافت کرده و آنها را به صورت صفحههای وب چندرسانهای رندر میکنند. HTML به توصیف ساختار معناشناختی یک صفحه وب میپردازد و سرنخهایی برای شیوه نمایش ظاهری آن ارائه میکند. دستورات CRUD جزء بسیار مهمی از عملیات مربوط به REST API هستند که در زبانهای مختلف برنامه نویسی به کار برده میشوند. برای مثال زبان پایتون به عنوان یکی از زبانهای قدرتمند برای نوشتن بکاند شناخته میشود.
به جای تعریف استایل هر جدول و هر قطعه متن در کدهای HTML یک صفحه، میتوان استایلهایی را که به دفعات استفاده میشوند، تنها یک بار در یک سند CSS ذخیره کرد. این نسخه تغییری تعدیلیافته برای استانداردهای کنونی بود و بسیاری از گامهای بزرگتر برای نسخههای بعدی کنار گذاشته شدند. اکثر تگهای افزونه ارائه شده توسط Netscape (و تعداد کمتری هم توسط مایکروسافت) در استاندارد جدید به کار گرفته نشدند.
این مقاله نخستین بخش از یک سری مطالب با عنوان راهنمای جامع اچتیامال [+] است. در این مقاله به مبانی مقدماتی اچتیامال پرداخته و عناصر، خصوصیتها و همچنین دیگر اصطلاحهای مهم که ممکن است شنیده باشید را توضیح میدهیم. همچنین شیوه سازماندهی عناصر اچتیامال، چگونگی سازماندهی صفحه اچتیامال و دیگر ویژگیهای مهم زبان اچتیامال را توضیح میدهیم. در این مسیر با برخی مفاهیم اچتیامال نیز در عمل کار میکنیم تا انگیزه یادگیری شما را حفظ کنیم. در صورتی که برای شروع یادگیری به دنبال دوره آموزشی و مسیر یادگیری ویژه خود هستید درخواست مشاوره خود را از طریق دکمه زیر ثبت کنید. یک تگ به شما این اجازه را میدهد که بخشی از سند را علامت زده و به دیگر اسناد، تصاویر، فایلها یا حتی دیگر سایتهای HTML لینک کنید.
برای مثال، به منظور آشنایی با آن در وردپرس میتوانید فیلم آموزش REST API در وردپرس برای کار با داده های پایگاه داده را از فرادرس مشاهده کنید. عبارت CRUD سرنامی از دستورهای Create و Read و Update و Delete است. این چهار دستور، توابع پایهای هستند که هر نرمافزار کاربردی باید بتواند انجام دهد. برای خواندن دادهها با کمک رابط کاربری، دسترسی مورد نیاز را داشته باشند.
HTML به عنوان زبان اصلی ساختاردهی صفحات وب عمل میکند و به سازندگان وب امکان میدهد تا محتوا را با ساختار مناسب و قابل دسترسی برای کاربران نمایش دهند. با آموزش HTML رایگان، شما میتوانید با استفاده از منابع متعدد و بدون پرداخت هزینه صفحات وب خود را بسازید و محتوا و اطلاعات را به طور مناسب نمایش دهید. همچنین، با استفاده از تگها و ویژگیهای HTML، میتوانید تجربه کاربری بهتری برای بازدیدکنندگان صفحات وب خود ایجاد کنید. جاوا اسکریپت (JavaScript | JS) یک زبان برنامه نویسی است که امکان پیادهسازی ویژگیهای پیچیده را در صفحات وب فراهم میکند.
با توجه به پاسخ برگشت داده شده از سرور، میتوان مشاهده کvn که اطلاعات مربوط به غذای Avocado Toast با قیمت 8 با موفقیت ساخته شده و به منبع لیست غذاها نیز اضافه شد. برای اینکه کدهای CSS نوشتهشده بر HTML تأثیر بگذارد، باید به مرورگر دستور داد که CSS را اعمال کند. این ساختارها به سازماندهی محتوا به صورت سلسله مراتبی کمک میکند و دسترسی و خوانایی سند HTML را بهبود میبخشد.
سوال مهم دیگری که امکان مطرح شدن آن از طرف کاربران وجود دارد در مورد فایلهای HTML است و در این مطلب از مجله فرادرس آن را بررسی میکنیم. اما فایل HTML چیست و شامل چه مواردی خواهد شد؟ این فایلها که به آنها اسناد HTML نیز گفته میشود، به عنوان اجزای سازنده وبسایتها عمل میکنند. هر سند HTML با پسوند فایل «html.» یا «htm.» ذخیره میشود و تمام محتوای متنی و تگهای ضروری برای انتقال اطلاعات ثابت به مرورگر وب را در بر میگیرد. هر صفحه وب دارای انواع عناصر درون صفحه و خارج از صفحه است که همه به دقت در اسناد HTML ساختار یافتهاند. تکامل شیوههای توسعه وب، به ویژه با ظهور CMS، رویکردی پویاتر و سادهتری را برای مدیریت و تولید صفحات وب ایجاد کرده است.
۳. استایل بخشیدن به صفحه با CSS
با توجه به مطالب بالا میدانیم که این غذا با id به شماره در پایگاه داده ذخیره شده است. بعد از ارسال درخواست بالا و در صورتی که سرور برای اجرای آن به مشکلی برنخورد، پیغام زیر به عنوان نتیجه اجرای دستور به کاربر برگردانده میشود. برای مثال، فرض کنیم که میخواهیم غذای جدیدی را به فهرست غذایهای روزانه رستوران اضافه کنیم.
میتوانیم تصوری مشابهی برای وبسایتهای استاتیک و واکنشگرا داشت. وب سایت ثابت با تغییرات اندازه مرورگر سازگار نیست و محتویات آن همیشه شکلی واحد دارد. از سوی دیگر، وبسایتی واکنش گرا به طور مداوم با اندازههای مختلف مرورگر و صفحهنمایش تنظیم میشود. دارم الان قسمت 7 رو می بینم که راجبه تگ های heading هست.من چهار پنج تا دوره راجبه html دیدم ولینکته ای که توی این قسمت گفته شده رو من تو هیچ دوره آموزشی دیگه ای ندیدم! صفحات وب دیگه مثل قبل با چندتا متن و عکس ساخته نمیشن و دیدن آموزش HTML به تنهایی، به معنی آمادگی کامل و کافی برای انجام یه پروژه نیست.
آموزش HTML و HTML5 – بخش اول دوره صد روز تا Developer شدن
به وسیله سازههای HTML امکان به کارگیری تصاویر و سایر اشیاء، همچون فُرمهای تعاملی در صفحه رندر شده وجود دارد. در ادامه، عنصر (تگ) پاراگراف را که در بخشهای قبلی این مطلب معرفی شد، تجزیه و به این ترتیب، ساختار HTML و اجزاء آن شرح داده شده است. در ادامه، تصویری از اجزاء و ساختار عنصر HTML به نمایش گذاشته شده است. HTML کاربرد گستردهای در ایجاد صفحاتی دارد که در تارنمای جهانگستر (World Wide Web) یا همان وب (Web) به نمایش گذاشته میشود. هر صفحه، حاوی مجموعهای از تگهای HTML، شامل ابَرلینکها (Hyperlink) است. هر صفحهای که در وب دیده میشود، با استفاده از یکی از نسخههای HTML نوشته و تولید شده است.
HTML زبان نشانهگذاری است که برای توصیف ساختار و محتوای صفحات وب استفاده میشود. این زبان توسط تیمی از محققان وب در سال ۱۹۸۹ ایجاد شد و اکنون توسط سازمان جهانی وب (W۳C) توسعه و استانداردسازی میشود. HTML اساسیترین زبان مورد استفاده در توسعه وب است و همچنین با استفاده از زبانها و تکنولوژیهای دیگر مانند CSS و JavaScript قابلیتهای پیشرفتهتری را نیز فراهم میکند.
استفاده از پرس و جوی رسانه ای و طراحی روان برای ساخت نمونه سایت ساده با HTML
از آنها میتوان برای تعریف استایلهای متنی، اندازه جدولها و سایر مؤلفههای صفحات وب استفاده کرد. از همان روزهای ابتدایی تحولات بسیاری در زبان برنامه نویسی HTML اتفاق افتاده است. W3C به طور دائم نسخهها و بهروزرسانیهای جدیدی منتشر میکند. همانطور که در بخش تاریخچه زبان برنامه نویسی HTML بیان شد، HTML4 که این روزها با همان نام HTML شناخته میشود، در اواخر دهه هفتاد شمسی منتشر شد. آخرین نسخه اصلی HTML با نام HTML5 در ابتدای دهه نود شمسی ارائه شده است.
مرورگر فایل HTML را میخواند و متن داخل آن را به یک قالب و فرم دیداری ترجمه میکند. انتظار میرود این پردازش (رندر | Render) صفحه مربوطه، به نحو مورد انتظار خالق سایت انجام شود. در خصوص ابزار مورد استفاده برای تولید صفحات HTML، میتوان از یک ویرایشگر کد ابتدایی گرفته، تا یک محیط توسعه گرافیکی قدرتمند را به کار گرفت. این زبانها جنبه قابلمشاهده وبسایت را شکل میدهند و برای افزایش تجربه کاربران بسیار مهم هستند. با استفاده از دورههای آموزشی میتوانید این دو زبان را به صورت کامل مسلط شوید.
HTML مخفف «HyperText Markup Language» و به معنای «زبان نشانهگذاری فرامتن» است. به زبان سادهتر، HTML کمک میکند تا متون شما زیباتر به نظر برسند. حتی همین صفحهای که مشاهده میکنید نیز به زبان HTML نوشته شده است. برای ساخت یک صفحه HTML میتوان از یک ویرایشگر متن ساده مثل نرمافزار Notepad استفاده کرد. برای تبدیل فایل متنی به فرمت HTML باید پسوند آن را به «html.» تغییر داد. به عنوان مثال و برای نمایش ساختار یک صفحه HTML کدهای زیر باید در فایل ایجاد شده کپی شوند.
- همچنین این پلتفرم خارجی مجهز به نوعی رابط صفحه نمایش برای کدنویسی است که کاربران میتوانند در آن تمرینات HTML را آغاز کرده و نتایج بلادرنگ را مشاهده کنند. {
- یادگیری HTML مهمترین و اساسیترین قدمیست که برای یادگیری تکنولوژیهای حوزه وب نیاز است تا آن را یاد بگیرید. |}
- برای این هدف باید فایل HTML را با پسوند .htmlذخیره و آن را در مروگر باز کرد. {
- مرورگرهای وب اصلی مجهز به موتورهای اختصاصی جاوا اسکریپت هستند که اجرای عملکردهای پویا را ساده کرده و کارایی وبسایتها را افزایش میدهند. |}
- این متن تصویر را در صورت عدم بارگیری برای کاربر توصیف خواهد کرد. {
- این زبان نشانهگذاری به عنوان مجموعهای از دستورالعملها برای مرورگرهای وب عمل کرده و نمایش بصری را هنگام ورود بازدیدکنندگان به وبسایتها را امکانپذیر خواهد کرد. |}
نسخههای مختلف HTML
HTML شامل کدهای کوتاهی است که در داخل یک فایل متنی توسط پدید آورنده سایت تایپ شدهاند. سپس، این متن به صورت یک فایل با نوع و پسوند html ذخیره میشود و میتوان حاصل و خروجی کار را از طریق یک مرورگر مثل گوگل کروم مشاهده کرد. یکی از ویژگیهای پیشبینی شده HTML5 پشتیبانی بومی آن برای تعبیه صوت و ویدئو در سند HTML است.
آموزش بستن فرم نظرسنجی یا دیدگاه ها در وردپرس – راهنمای تصویری
همهچیز بستگی به این دارد که کاربر برای کسبوکار خود چه میخواهد. اگر عمدتاً هدف کاربر از راهاندازی فروشگاه اینترنتی تشویق مردم برای حضور کاربران در فروشگاه فیزیکی باشد، ممکن است سایت مدنظر نیازی به گزینههای سفارش آنلاین نداشته باشد. با این حال، باید به این نکته توجه داشت که برخی از مشتریان خرید آنلاین را ترجیح میدهند و اگر سایت ساخته شده فاقد این قابلیت باشد، خریداران زیادی را از دست خواهد داد.
استفاده از جاوا اسکریپت برای تعاملی کردن سایت ساخته شده با HTML
یادگیری HTML بسیار ساده است به شکلی که با کمی تلاش شما میتوانید کمتر از یک یا دو هفته به شکل کامل با این زبان نشانهگذاری آشنا شوید و مسیر یادگیری طراحی وب خود را ادامه دهید. میتوان گفت نیمی از طراحی یک وبسایت خوب مهارت و نیمه دیگر آن استعداد است. یادگیری مهارتها و کاربرد صحیح و شناخت تگها، نتیجه حاصل شده را به میزان زیادی بهبود میدهد. داشتن درک مناسب از طراحی و همچنین مخاطبی که قرار است جذب شود شانس موفقیت وبسایت را افزایش میدهد. خوشبختانه، تا زمانی که پشتکار و انگیزه لازم برای ساخت وبسایتهای بهتر وجود داشته باشد، این موارد ذکر شده قابل تحقیق و مطالعه هستند. در این بخش از مطلب زبان برنامه نویسی HTML برخی از شاخصترین کاربردهای HTML ارائه شده است.
پروژه XHTML 2 متوقف و HTML5 تبدیل به نسخه جدیدی شد که تلاش و کوشش همگان باید به آن معطوف میشد. HTML5 نسخهای است که برای مدتها مورد استفاده قرار گرفته و خواهد گرفت. بسیاری از بخشهای آن شناخته شده خواهند بود و عناصر جدید، صفتها و قابلیتهای هیجانانگیز متعددی برای آن ارائه شده و خواهد شد.
سوال HTML چیست ممکن است برای افراد بسیاری مطرح باشد؛ چرا که HTML را میتوان پایه و اساس وب و حتی اینترنت در نظر گرفت. در این مطلب سعی شده است تا مفاهیم ابتدایی HTML به طور کامل معرفی و راهنمایی لازم برای شروع و یادگیری زبان برنامه نویسی HTML ارائه شود. از سوی دیگر، جاوا اسکریپت نوعی زبان برنامه نویسی است که عملکردهای پویا از جمله ویژگیهایی مانند گالری عکس، پاپ آپ و اسلایدر را ایجاد میکند. جاوا اسکریپت که در عصر حاضر به طور گسترده پذیرفته شده است به وسیله ۹۷ درصد وبسایتها در سراسر جهان استفاده میشود. مرورگرهای وب اصلی مجهز به موتورهای اختصاصی جاوا اسکریپت هستند که اجرای عملکردهای پویا را ساده کرده و کارایی وبسایتها را افزایش میدهند.
در ادامه، برخی از تگهای سطح بلوکی رایج فهرست شده و توضیحاتی در خصوص آنها ارائه شده است. سه تگ سطح بلوکی که هر سند HTML به آن نیاز دارد، شامل تگهای ، و است. اگر هدف این باشد که جمله بالا به تنهایی و به صورت مستقل نشان داده شود، میتوان به صورت زیر با قرار دادن آن در داخل یک تگ پاراگراف مشخص کرد که جمله بالا یک پاراگراف است. HTML 4.01 در اواسط ۱۳۷۶ توسط W3C ارائه و در ابتدای سال ۱۳۷۷ تبدیل به استاندارد رسمی شد. پشتیبانی از HTML 4.01 در مرورگر اینترنت اکسپلورر به طور شگفتآوری توسط مایکروسافت جدی گرفته شد. و نسخه IE5 که پیشتاز بازار بود (و به دنبال آن نسخه IE6)، پشتیبانی فوقالعادهای برای همه تگها و صفتها (Attribute) ارائه میکرد.
گام چهارم: جاسازی تصاویر با استفاده از تگ
برای فعالیت در این فضای شغلی گسترده با توجه به انواع تکنولوژیها و ابزارهایی که دارد، لازم است که بهترین آموزشها را از بهترین منابع دریافت کنیم. با کمک تابع مورد نظر، تمام کتابهای موجود در کاتالوگ قابل دسترسی هستند. در نتیجه اجرای این تابع، هیچ تغییری در کاتالوگ ایجاد نمیشود. تابع فراخوانی اطلاعات، فقط دادهها را از منبع فراخوانی کرده و نتایج را به کاربر نمایش میدهد. عملکرد دیگر این تابع، واکشی اطلاعات مربوط به موجودیتهای مختلف به صورت مجزا است. برای جستوجو به دنبال هر موجودیت میتوانیم از تمام اطلاعات مربوط به آن استفاده کنیم.
با این حال، در عصر حاضر وبسایتهای زیادی با استفاده از «سیستم مدیریت محتوا» (CMS) مانند وردپرس ایجاد میشوند. CMSها با ارائه نوعی رابط بصری برای ساخت صفحات وب و سازماندهی سایت، نیاز به کدنویسی را از بین میبرند. علاوه بر این، کتابخانههای قالبهای CMS میتوانند به کاربر در ایجاد وبسایتهای واکنشگرا بدون نیاز به کدنویسی کمک کرده و از سازگاری در دستگاههای مختلف اطمینان حاصل خواهد کرد.
برای اینکه بدانیم رابطه پایگاه داده با CRUD چیست، تمام دستورات چهارگانه را یک به یک همراه با نمایش مثال سادهای توضیح دادهایم. تمام کارهای کدنویسی ما در فایلهای جداگانهای که در دستگاه محلی خود ذخیره میکنیم انجام میشود. با ایجاد پوشهای جدید برای فایلهای وبسایت خود، کار را شروع خواهیم کرد و نام آن را Faradars-testخواهیم گذاشت. اکنون، باید پوشه را در ویرایشگر کد انتخابی خود باز کرده و در مرحله بعد فایلی به نام، .index.htmlایجاد و در این فایل کدهای HTML خود را بنویسم. توجه به این نکته مهم است که نامهایی که برای فایل و پوشههای این آموزش انتخاب میشوند کاملاً فرضی هستند و کاربر بهدلخواه خود میتواند آنها را تغییر دهد.
دستور Delete از عملیات CRUD توسط متد DELETE در HTTP اجرا میشود. این دستور برای حذف کردن منابع مشخص شده در سرور به کار برده میشود. در ادامه تمامی مراحل گفته شده در بالا به صورت قدم به قدم ارائه خواهند شد. لطفا پرسش مربوط به هر درس یا ویدئو دوره را در صفحه همان ویدئو مطرح کنید. گذروندن آموزش HTML از نون شب و حتی چایی صبح واجب تره و یکی از اولین چک لیست های شما برای ادامه مسیر محسوب میشه.
اما اکنون در HTML5 با استفاده از localStorage و IndexDB میتوان ذخیرهسازی سمت کلاینت را انجام داد. مجموعه آموزشی طراحی سایت با HTML و CSS علاوه بر دورههایی که در بالا معرفی شدند، دارای ۹ عنوان آموزشی دیگر نیز هست. در توسعه وب مدرن، رویکرد مرسوم این است که از استفاده از ویژگی styleبرای تنظیمات طراحی عناصر خودداری شود. در عوض، استفاده از نوعی شیوهنامه CSS جداگانه برای استایل بخشیدن به کل صفحه استفاده میشود.
وقت را غنیمت شمارید و یادگیری را برای رسیدن به قلههای موفقیت شروع کنید. در ادامه مطلب زبان برنامه نویسی HTML به این مهم پرداخته شده است. زبان برنامه نویسی HTML به عنوان یک زبان کامپیوتری، برای ایجاد صفحات وب ابداع شده است. در این بخش از مطلب زبان برنامه نویسی HTML چیست درک ساده و ابتدایی از HTML و کاربردهای آن ارائه شده است. به همراه HTML و برای تکمیل آن، میتوان از فناوریهایی مانند CSS و زبانهای اسکریپتنویسی مثل جاوا اسکریپت برای ایجاد وبسایتها کمک گرفت. اما، با توجه به اینکه استفاده از عبارت «زبان برنامه نویسی HTML» در میان عموم رایج است و توسط اکثر افراد از این اصطلاح استفاده میشود، در این مطلب نیز همین عبارت به کار برده شده است.
در مجموع جاوا اسکریپت، CSS و HTML با یکدیگر همکاری میکنند تا صفحات وب کامل و تعاملی را که روزانه در پلتفرمهای دسکتاپ و موبایل با آنها مواجه میشویم، به نمایش بگذارند. قبل از ادامه آموزش ساخت نمونه سایت ساده با HTML، اجازه دهید در مورد ویژگیهای HTML بحث کنیم. ابتدا، srcکه نوعی ویژگی برای منبع تصویر است که به مرورگر میگوید کدام تصویر را نمایش دهد. دوم، altنوعی ویژگی برای متن جایگزین است که مشخص میکند در صورتی که تصویر قابل ارائه نباشد، چه متنی نمایش داده شود.
{بخش اول: معرفی HTML
|}در این مطلب متوجه شدیم که CRUD چیست و از چه دستورهایی تشکیل شده است. به طور خلاصه این عبارت ۴ عملیات رایج و ضروری بر روی پایگاه داده را نشان میدهد. عبارت DELETE برای پیادهسازی دستور DELETE به کار برده میشود. عبارت UPDATE برای پیادهسازی دستور UPDATE به کار برده میشود.
اگر بخواهیم عرضهای ثابتی را برای چیدمان عناصر تشکیلدهنده صفحه وب حفظ کنیم، پرسوجوهای رسانه مؤثر هستند. همانطور که در مثال قبل دیده شد، ما خواستیم که ایموجی با عرض ۴۰۰ پیکسل نمایش داده شود و سپس به ۳۰۰ پیکسل کاهش یابد. فایل اصلی پروژه در حال حاضر خالی است و باید ساختار سند HTML را به آن اضافه کرد. در دوره آموزش flexbox قصد داریم شما را به صورت کامل با Flex Box آشنا کنیم به نحوی که بتوانید به راحتی از آن در پروژه های خود استفاده کنید. همچنین جهت تکمیل فرایند یادگیری خود میتوانید از وبسایت css-tricks برای آموزش flexbox استفاده کنید.
بعد از اجرای این درخواست، دیگری هیچ غذایی dish با شماره شناسایی در منبع غذاها dishes وجود ندارد. برای مثال فرض کنیم که به دلیل کمبود آوکادو در رستوران دیگر قادر به ارائه غذای Avocado Toast نیستیم. اکنون باید به سراغ پایگاه داده رفته و ردیف مربوط به غذای Avocado Toast را از آن حذف کنیم.
ابتدا میبینیم که در محیط REST روش پیادهسازی دستورات CRUD چیست. در نهایت هم معادل این دستورات را برای اجرا در پایگاههای داده رابطهای نمایش دادهایم. با کلیک روی ایموجی، متنی به نمایش درمیآید که میتوانید روی دکمه «OK» کلیک کنید. کلیه حقوق مادی و معنوی دوره ها متعلق به وبسایت آموزشی دانشجویار می باشد. باید دوباره یادآوری کنیم آموزش HTML سبزلرن طوری طراحی شده که با صرف کمترین زمان به نتیجه مطلوب می رسید. در ادامه با برخی از خصوصیات پر کاربرد در کنار تگ IMG آشنا خواهید شد.
یکی از مزایای کلیدی CSS توانایی آن در اعمال قالببندی ثابت در چندین صفحه وب به وسیله فایلهای «css.» است. این شیوهنامهها نیاز به تکرار قالببندی برای هر صفحه را از بین میبرند و میتوانند در حافظه پنهان ذخیره شوند و سرعت بارگذاری صفحاتی که فرمت یکسانی دارند را افزایش میدهند. HTML میتواند شامل برنامههایی باشد که در زبانهای اسکریپتنویسی از قبیل جاوا اسکریپت نوشته شدهاند و بر رفتار و محتوای صفحه وب تأثیر میگذارند.
گاهی اوقات تگها اجازهی استفاده از «Attributes» یا خصوصیات بیشتری را میدهند. برای مثال میتوان از رنگ یا فونت متن، یا طول و عرض و آدرس عکس نام برد. در چنین شرایطی پس از نام تگ یک فاصله (Space) قرار گرفته و تعدادی خصوصیت و مقدار که مجددا توسط فاصله جدا شدهاند، قرار میگیرد. توجه داشته باشید که تگ پایانی تغییری نمیکند و داشتن یا نداشتن خصوصیات اضافی تاثیری بر این قضیه نمیگذارد. تگ ابتدایی، تگ انتهایی و محتوای داخل آنها همگی با هم یک عنصر HTML را تشکیل میدهند.
{مجموعه آموزشی طراحی سایت با HTML و CSS
|}البته فایلها مانند رکوردهای ذخیره شده در پایگاههای داده نیستند. اصطلاح CRUD بیشتر برای عملیات مرتبط با رکوردهای پایگاههای داده استفاده میشود تا فایلهایی مانند فایلهای متنی در ورد. برای حذف این غذا از پایگاه داده باید درخواست خود را به شکل زیر ارسال کنیم. در محیط REST، رایجترین روش برای ساخت منبع داده استفاده از متد POST در HTTP است. دستور POST برای ساخت منبع داده جدید و افزودن عناصر مرتبط به آن منبع داده استفاده میشود.
با افزودن تگ Viewportبه head، از مقیاسپذیری در همه مرورگرها و دستگاهها اطمینان حاصل خواهد شد. با این کار، صفحه برای دستگاهها و اندازههای صفحهنمایش مختلف مناسبتر به نظر میرسد و تجربه سازگارتری را ارائه میدهد. این قابلیت تضمین میکند که صفحه وب در پلتفرمهای مختلف بهطور قابل پیشبینی رفتار میکند و تجربه کاربری را بهبود میبخشد. در این مرحله از ساخت نمونه سایت ساده با HTML، به واکنشگرا کردن آن خواهیم پرداخت.
از عملیات مشابه با CRUD حتی میتوانیم بر روی ساختارهای دائمی داده مانند فایلها نیز استفاده کنیم. برای مثال میتوانیم در مایکروسافت ورد کارهای زیر را انجام دهیم. به عنوان مثال، اگر قیمت غذای Avocado Toast بالا رفته باشد، باید به سراغ پایگاه داده رفته و اطلاعات مربوط به قیمت این ردیف را بهروزرسانی کنیم. برای انجام این کار، با استفاده از متد PUT درخواست خود را ارسال میکنیم. برای ادامه مطلب، فرض کنید که در حال کار بر روی سیستمی برای نظارت بر غذاهای رستوران و قیمت هر کدام هستیم. در ادامه میبینیم که در چنین سیستمی روش پیادهسازی عملیات مربوط به CRUD چیست.
بیشتر اوقات دستورهای CRUD در محیط REST به ترتیب به متدهای POST و GET و PUT و DELETE - کدهای HTTP - اشاره میکنند. این متدها، عناصر بنیادین سیستمی هستند که برای ذخیرهسازی دائمی اطلاعات به کار برده میشود. در ادامه مطلب و با هدف اینکه بهتر متوجه شویم CRUD چیست، تمام این عملیات را به طور کامل شرح داده و روش کار هر کدام را همراه با مثالهای سادهای بیان میکنیم.
در زمینه سند HTML، باید آن را به عنوان جزئیات مربوط به سند مخصوصاً برای مرورگر وب در نظر گرفت. این اطلاعات در زیرHeadقرار میگیرد که ابر داده را از bodyکه محتوای ما در آن قرار خواهد گرفت جدا میکند. در مطلب پیشِ رو قرار است به صورت قدمبهقدم مراحل طراحی سایت ساده با اچ تی ام ال پوشش داده شود و در آخرسر سایتی ساده و جذاب بسازیم.
{۶. تعاملی کردن وبسایت در ساخت نمونه سایت ساده با HTML
|}برای درک بهتر، اگر فرض شود HTML یک انسان است، میتوان CSS را مثل لباسهای او و جاوا اسکریپت را حرکات و رفتار وی در نظر گرفت. در گذشته، این امکان وجود نداشت که بتوان دادههای مرورگر یک کاربر را در طول جلسهها (Session) ذخیره کرد. برای دستیابی به چنین نیازمندی، باید زیرساختهای سمت سرور فراهم میشد و یا از Cookieهای کاربران استفاده میشد.
این پلتفرم از مثالها، تمرینها و منابع مختلف برای یادگیری مؤثر استفاده میکند. در ادامه مطلب، به بیان استانداردها و کدهای پاسخی میپردازیم که معمولا در زمان ساخت اپلیکیشنهای RESTful توسط توسعهدهندگان مورد توجه قرار میگیرند. اصول مربوط به استفاده از این متدها ممکن است که در سیستمهای مختلف فرق کنند. علاوه بر ویژوال استودیو، ویرایشگرهای کد رایگان متعددی وجود دارد که میتوان از بین آنها یکی را بهدلخواه انتخاب کرد.
{ساخت تیتراژ جنگ ستارگان در HTML – از صفر تا صد
|}در آن زمان، شرکتی به نام Netscape با محصولی به نام Netscape Navigator، به وضوح به عنوان پیشتاز و پرچمدار در بازار مرورگر شناخته میشد. برای پاسخگویی به نیازهای کاربران HTML، این شرکت تگهای اختصاصی را در مرورگر Netscape Navigator معرفی کرد. این قابلیتهای جدید، تگهای افزوده نتاسکیپ (Netscape extension tags) نامگذاری شدند.
خوشحالیم که شما هم به دوره آموزش html رایگان سر زدید و قراره یک بار برای همیشه و کاملا اصولی و راحت یادش بگیرید و از کار کردن با اون لذت ببرید. چیزی که امروز به آن پرداختیم به شما این اجازه را میدهد که کدهای یک وبسایت را مشاهده کرده و بتوانید آن را درک کنید. اگر جایی تگی را دیدید که به آن آشنا نبودید، همیشه میتوانید از گوگل استفاده نمایید. خیر به هیچ وجه، HTML به عنوان یک زبانه نشانهگذاری شناخته میشود که با استفاده از آن شما میتوانید در چینش یا طراحی اسکلت صفحات وبسایت خود را مشخص کنید. این تگ شامل نام عنصر (در این مورد بهخصوص، حرف p) است که در داخل دو علامت بزرگتر و کوچکتر قرار میگیرد. تگ آغازین مشخص میکند که عنصر از کجا شروع شده یا در واقع ابتدای اثرگذاری عنصر روی محتوا از کجا اتفاق میافتد.
کاربران پس از پایان مطالعه این مطلب درک نسبتاً خوبی از نحوه ساخت سایتهای اینترنتی کسب خواهند کرد و تا حدودی این مطلب به عنوان نوعی نقشه راه برای آنها عمل کرد. قبل از پرداختن به جزئیات مسئله، ضروری است دو سؤال رایجی که برای علاقهمندان به این حوزه پیش میآید را مورد بررسی قرار دهیم تا درک درست و منطقی از فرایند پیشِ رو داشته باشیم. مثال دوم که با علامت «Example-2» مشخص شده است، تگی را نشان میدهد که به تنهایی کار میکند و نیازی به بسته شدن ندارد (هر چند که بحثهای زیادی در این مورد وجود دارد). با این که نیازی به بستن این تگها نیست، با این حال برخی از افراد آن را به صورت مینویسند تا به عبارتی آن را در جای خود بسته باشند.
فقط باید پسوند فایلها دقت کرد و برای فایلهای HTML، پسوند .htmlو برای فایلهای CSS، پسوند .cssانتخاب کرد. انتخاب نوعی ویرایشگر کد مرحلهای ضروری برای توسعهدهندگان جدید است زیرا این ابزارها ویژگیهایی را ارائه میدهند که فرآیند کدنویسی را ساده میکند. همچنین این «محیط توسعه یکپارچه» (IDE) تکمیل خودکار برای بستن تگهای HTML و نشانگرهای بصری در فایلهای کاربر را ارائه میدهد که تشخیص بخشهای مختلف کد را آسانتر میکند. نشانهگذاری (Markup) کاری است که تگهای اچتیامال (برچسب اچتیامال | HTML Tag) با متن داخلشان انجام میدهند.
در مطلب فوق از مجله فرادرس در کنار بحث در مورد HTML، تگهای آن و شیوه استفاده از این زبان نشانهگذاری. به ساخت نمونه سایت ساده با HTML پرداختیم و قدم به قدم به عنوان نوعی نقشه راه شیوه انجام این فرایند ارائه شد. در عصر دیجیتال امروزی، اینترنت به عنوان منبع اصلی برای نیازهای مختلف افراد، مانند خرید اقلام ضروری، دریافت خدمات متنوع، دسترسی به اطلاعات و غیره عمل میکند. از همین رو ایجاد حضور آنلاین قوی به وسیله وبسایتها برای کسبوکارها به ضرورتی غیرقابلانکار تبدیل شد است.
بهعبارتیدیگر HTML وسیله ارتباطی است که به مرورگر آموزش میدهد که چگونه محتوا را بر روی صفحهنمایش دهد. میتوان کد منبع HTML هر وبسایتی را با کلیک راست بر روی مرورگر و رفتن به بخش «مشاهده منبع» (View Source)، دید. این عمل صفحهای را نشان میدهد که مبانی HTML آن سایت را با جزئیات نشان میدهد. برخی از عناصر در زبان برنامه نویسی HTML محتوایی ندارند که به آنها عناصر خالی گفته میشود. CSS کارها را بسیار ساده میکند و میتواند طرحبندی و صفحه آرایی چندین صفحه وب را به طور همزمان انجام دهد. CSS به توسعهدهندگان کمک میکند تا یک ظاهر یکدست برای چندین صفحه وب ایجاد کنند.
در سال ۱۴۰۱ ( 2022 میلادی)، طبق آمار، اینترنت میزبان مجموعه گستردهای از بیش از ۳.۵۶ میلیارد صفحه وب بوده که بخش قابلتوجهی از آنها به فایلهای ساده HTML متکی هستند. توجه به این نکته مهم است که این آمار مربوط به کل صفحات وب منفرد است، نه کل وبسایتها. در حالت عادی وبسایتی با ۱۵۰ صفحه، ۱۵۰ فایل HTML جداگانه دارد. از طرفی دیگر، شیوههای معاصر در تولید صفحات وب بسیار تکامل یافته است.
آموزش html از صفر