تبلیغات در پورتال

آموزش برنامه نویسی HTML از ابتدا HTML: اصول اولیه برای مبتدیان

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

باحال

لکنت زبان

برای مطالعه درس آرشیو را با فایل های لازم دانلود کنید.

HTML یک زبان نشانه گذاری سند است. تلفظ صحیح HTT است.

احتمالاً تا به حال در یک ویرایشگر اسناد Word یا مشابه کار کرده اید. برنامه های اداری? احتمالاً این را می دانید این نوعویرایشگرها قابلیت های غنی برای ویرایش متن، چیدمان عناصر، درج تصاویر و غیره دارند.

ممکن است بپرسید چرا در مقاله ای در مورد HTML در مورد پردازنده های کلمه بنویسید؟ اما چرا. اگر متوجه شدید، ویرایشگر آفیس چیست؟ این یک برنامه برای ویرایش و نمایش اسناد است.

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

HTML یک زبان نشانه گذاری سند برای مرورگر است. Word اینجا مرورگر است، و سند، صفحه HTML است، که درک آن ضروری است تا زبان نشانه گذاری اسناد وب را با زبان های برنامه نویسی اشتباه نگیرید. با با استفاده از HTMLما علامت گذاری، در کجای صفحه عنصر، تصویر یا متن نشان داده می شود و به چه ترتیبی در کنار یکدیگر ظاهر می شوند.

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

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

نوعی ورد برای HTML. این ویرایشگرهای بصری نامیده می شوند:

WYSIWYGویراستاران - W hat Y ou S ee I s W hat Y ou G et. یعنی اگر آن را به روسی ترجمه کنیم: آنچه می بینیم همان چیزی است که به دست می آوریم.

من آنها را "wuzivoogies" می نامم. اگرچه این از نظر آوایی نادرست است، اما به وضوح بی معنی بودن این اختراع را نشان می دهد. مبتدیان اغلب از چنین ویرایشگرهایی برای ایجاد اولین وب سایت خود استفاده می کنند. البته، این راحت است - شما نیازی به بررسی برچسب ها، سبک های طراحی و سایر موارد ناخوشایند و پیچیده در نگاه اول ندارید. خود ویرایشگر به طور خودکار اقدامات ما را به کد HTML تبدیل می کند.

اما همانطور که می گویند هیچ اتفاقی نمی افتد. به طور خاص، این رویکرد دارای اشکالات بسیار جدی است. چه چیزی مانع از استفاده همه از ویرایشگرهای بصری برای طراحی صفحات HTML می شود؟ واقعیت این است که صفحاتی که به این روش شکل می گیرند معمولا کدهای غیرضروری زیاد و از نظر معنایی خطاهای زیادی دارند. در حال حاضر، البته، هیچ مشکلی وجود ندارد اینترنت پرسرعتاتصال و تفاوت سایز صفحه 400 کیلوبایت و 100 کیلوبایت از نظر سرعت قابل توجه نیست، اما کد HTML بهینه شده و درست نوشته شده بسیاری از مشکلات را برطرف می کند و مزایای زیادی را در اختیار شما قرار می دهد، از جمله:

  • کد HTML مناسب تأثیر مثبتی بر روی دارد بهینه سازی موتور جستجو، سرعت خزیدن توسط ربات جستجوگر یک سایت. کیلوبایت کد تولید شده توسط vuzivuga قابل قبول نیست و حتی مضر است.
  • کد HTML تولید شده توسط ویرایشگر WYSIWYG دارای خطاهای معنایی زیادی است. یعنی تگ های تولید شده توسط چنین ویرایشگری برای مقاصد دیگر استفاده می شود، جایی که باید از آنها استفاده شود، به عنوان مثال، لیست ها
      ، ویرایشگر تگ دیگری ایجاد می کند که ما به آن نیاز نداریم. البته به ویرایشگر بستگی دارد، اما در اینجا منظور ما راه حل های پیچیده برای ایجاد وب سایت است، نه ویرایش آسانمتن در یک ناحیه متنی با استفاده از WYSIWYG.
    • بسیاری از برچسب های غیر ضروری تولید می شوند و ساختار سند متورم می شود. فرض کنید یک عنصر را در چنین برنامه‌ای ابتدا به سمت راست، سپس به چپ و سپس به مرکز حرکت می‌دهید - هر عمل ردی در کد HTML منبع باقی می‌گذارد. ویرایشگر یک برنامه است و نمی تواند بداند که در نتیجه دقیقاً چه چیزی را می خواهید دریافت کنید، با در نظر گرفتن همه گزینه های ممکن برای رفتار سند در مرورگر، تعداد زیادی کد تولید می کند.
    • به طور معمول، ویراستاران برای طراحی بصریکد HTML به سرعت قدیمی می شود. و به دلیل عدم علاقه متخصصان، عموماً از حمایت محروم می شوند و از پیشرفت باز می مانند. و HTML در حال تکامل است. همه چیز توسعه می یابد به جز wuzivoogi. بر این اساس، آنها نمی توانند کد صحیح و مدرنی تولید کنند که از ویژگی ها و راه حل های جدید استفاده کند.
    • حمایت و توسعه چنین پروژه هایی عذاب آسمانی است. اصلاً نمی توان در مورد استفاده از الگوها و استفاده مجدد از کد صحبت کرد.

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

    پس از کمی سر و کله زدن با ویرایشگر WYSIWYG، اساتید جوان HTML این کار بیهوده را رها کرده و به راه خود ادامه می دهند.

    ساختار سند HTML

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

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

    بیایید یک الگوی اولیه در رایانه ایجاد کنیم - فایل index.html، آن را با استفاده از یک ویرایشگر باز کرده و کد زیر را در آن قرار دهید:

    سربرگ بدنه سند لطفاً توجه داشته باشید که اسناد HTML دارای پسوند .html هستند.

    بنابراین، به ترتیب از مثال.

    - نوع سند (doctype)

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

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

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

    - ابتدای سند

    اولین برچسبی که بعد از doctype می بینیم .

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

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

    بنابراین، نشانه گذاری سند با یک تگ شروع می شود و با یک تگ بسته پایان می یابد. هر برچسبی که حاوی تگ ها یا عناصر دیگر است باید با یک تگ بسته بسته شود. به عنوان مثال،،،، و غیره.

    تگ اجباری است زیرا شامل کل ساختار سند است و پوششی برای عناصر دیگر است.

    برچسب بزنید

    بعد، تگ را می بینیم که حاوی عناصر دیگری است که هنوز برای ما روشن نیست. حاوی عناصر دیگری است - به این معنی که عناصر یا برچسب ها بین تگ های باز و بسته شدن ساختار قرار دارند:

    محتوا یا برچسب های دیگر

    هدف تگ ذخیره اطلاعات متا یک سند HTML است، یعنی اطلاعاتی که در خود سند نمایش داده نمی شوند، اما مهم هستند و تا حد زیادی تعیین کننده نحوه ظاهر و رفتار سند هستند.
    این تگدر سند مورد نیاز است.

    برچسب - عنوان سند

    عنوان یک برچسب ضروری است که حاوی اطلاعات متا متنی است که در مرورگر یا عنوان برگه ظاهر می شود. تگ باید در . همچنین محتویات این تگ توسط موتورهای جستجو برای نمایش سند در نتایج جستجو استفاده می شود.

    متا تگ

    متا تگ یک تگ تخصصی است که برای ارائه داده های ساختار یافته در مورد یک صفحه طراحی شده است. متا تگ ها اغلب در . تگ های متا در ساختار یک سند HTML مورد نیاز نیستند.

    فاویکون

    فایلی با تصویر فاویکون به سند پیوست می کند. فاویکون یک نماد مینیاتوری است که در کنار عنوان سند در برگه مرورگر نمایش داده می شود. فاویکون است فایل گرافیکی، 16×16 (یا 32×32) پیکسل در اندازه، که می تواند فرمت های مختلفی مانند png، jpg، ico، gif داشته باشد. فرمت ico به طور سنتی استفاده می شود. فاویکون های متحرک فایل های گیف حاوی انیمیشن هستند. شما می توانید یک فاویکون متحرک، به عنوان مثال، در VKontakte، هنگامی که یک پیام جدید می رسد، ببینید.

    سبک های سند CSS

    شامل یک فایل CSS با یک ظاهر طراحی HTML به سند است.

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

    نکته: ویژگی href یک ساختار مکان فایل خارجی را مشخص می کند. در مثال ما، فایل style.cssو favicon.ico، در همان پوشه فایل قرار دارند index.html.

    برچسب بزنید

    برچسب بسته شدن ندارد.

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

    که در همان پوشه فایل index.html اصلی قرار دارد.

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

    بدن به نام بدن اینجاست که همه جالب ترین و ملموس ترین چیزها از نظر بصری آغاز می شود.طرح بندی HTML

    سند index.htmlبیایید مستقیماً به طرح قسمت قابل مشاهده صفحه برویم. هر چیزی که داخل تگ می نویسیم و چیدمان می کنیم در مرورگر نمایش داده می شود. بیایید پرونده خود را باز کنیم

    در مرورگر تا به وضوح ببینیم که در ویرایشگر چه کار می کنیم.

    تگ می تواند حاوی هر تگ HTML لازم برای طراحی سند و ارائه عملکرد آن (فرم) باشد. من جدولی از پرکاربردترین تگ ها را ارائه خواهم داد و هر کدام را به اختصار شرح خواهم داد. می توانید بلافاصله نمونه های داده شده در ویرایشگر را اجرا کنید. برچسب بزنید
    توضیحات
    برچسبی برای ایجاد پیوند در یک سند.
    , مثال: متن پیوند ویژگی href سندی را که پیوند به آن منتهی می شود را مشخص می کند. متن می سازدمورب
    یا پررنگ (تاکید شده).
    , , , , , مثال: متن پررنگ (تأکید شده) متن
    مثالها: عنوان سطح اول سرفصل سطح دوم سرفصل سطح سوم... و غیره.
    ,
    		لیست های اسناد آنها یک لیست شماره دار یا گلوله ای هستند. عنصر چنین لیستی تگ است

  • مثال ها:
  • مورد فهرست شماره 1
  • مورد فهرست شماره 2
    		•

    		پاراگراف این تگ یک پاراگراف از متن جدا شده از پاراگراف های دیگر را تعریف می کند. بستن این تگ بسیار توصیه می شود.
    مثال:

    ظاهر نشانه گذاری HTML تا حد زیادی توسط سبک های CSS تعیین می شود.

    با این حال، برخی از مدیران وب‌سایت‌ها ترجیح می‌دهند از سبک‌ها در مراحل اولیه پروژه استفاده نکنند.
    تصویر با استفاده از این تگ می توانید یک عکس را در نشانه گذاری HTML وارد کنید. مطمئن شوید که متن جایگزین را برای همه تصاویر اضافه کنید - ویژگی "alt". این تگ خود بسته می شود.
    مثال:
    + + فرم ها و عناصر ورودی
    فرم ها برای وارد کردن اطلاعات به سیستم روی سرور طراحی شده اند. به نوعی بازخوردکاربر و سایت به عنوان مثال، از فرم ها برای ارسال پیام به سرور استفاده می شود. علاوه بر این، فرم ها می توانند عملکردهای دیگری را نیز انجام دهند، اما وظیفه اصلی ارسال داده ها به سرور است.
    مثال - فرم سادهارسال پیامی که در آن کاربر سایت نام، ایمیل و مقداری متن را مشخص می کند: متن پیام
    یک زیر رشته را در یک رشته تعریف می کند.
    برای استایل بخشی از یک خط با استفاده از CSS استفاده می شود. یکی از تگ های پرکاربرد بدون طراحی، به هیچ وجه در مرورگر خود را نشان نمی دهد.
    مثال: یادگیری HTML در بیشتر موارد برای مبتدیان هیچ مشکلی ایجاد نمی کند.
    , برچسب ها برای درج ویدیو و صدا در یک سند طراحی شده اند. برچسب بستن الزامی است.
    مثال‌ها: پارامتر کنترل‌ها به ما می‌گوید که صفحه باید کنترل‌های محتوای رسانه را درست مانند پخش‌کننده‌های صوتی/تصویری معمولی نمایش دهد.
    واقعا یک تگ سلطنتی پرکاربردترین و محبوب ترین تگ در نشانه گذاری صفحه HTML. این یک عنصر بلوکی است که برای مدیریت بلوک ها در سایت طراحی شده است. مفهوم چیدمان "شگفت انگیز" اغلب استفاده می شود - این بدان معنی است که تمام بلوک های سایت با استفاده از این برچسب ها چیده شده اند. ممکن است حاوی برچسب های دیگری باشد.
    مثال: متن در یک بلوک تودرتو، همه عناصر، در بیشتر موارد، با ویژگی‌های تزئین شده‌اند سبک های CSS. برچسب بستن الزامی است.
    این تگ یک صفحه خارجی را در سند بارگیری می کند.
    مثال:

    ما همه تگ ها را در نظر نگرفته ایم و این در این مرحله ضروری نیست. نکته اصلی این است که ایده اصلی HTML را درک کنید، یاد بگیرید چگونه از برچسب های ارائه شده در بالا استفاده کنید و سپس ادامه دهید.

    لطفاً توجه داشته باشید که همه نام‌های موجود در فایل‌های ارائه شده باید با حروف لاتین و بدون فاصله نوشته شوند.

    به عنوان مثال، انجام ندهید:

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

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

    تکلیف عملی در طرح بندی HTML

    اگر هنوز آرشیو را با مثال دانلود نکرده اید، این کار را انجام دهید. برای مثال می توانید به فایل example.html که در آرشیو هم بود نگاه کنید.

  • آرشیو را از حالت بسته خارج کنید و یک فایل index.html در پوشه ای با فایل های بدون بسته بندی ایجاد کنید. فایل ایجاد شده را با استفاده از ویرایشگر متن Sublime Text باز کنید.
  • یک ساختار سند اولیه با یک نوع doctype ایجاد کنید، تگ حاوی و ویرایش محتویات تگ باشد.
  • فایل readme.txt را باز کنید و وظایف مناسب را در فایل index.html که ایجاد کرده اید تکمیل کنید. برای بررسی نتیجه، index.html را در مرورگر مورد علاقه خود باز کنید.

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

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

    بیایید شروع کنیم! ابتدا بیایید دریابیم
    HTML - (از انگلیسی. H ypert ext M arkup L زبان) یک زبان نشانه گذاری فرامتن است. اولین بار توسط دانشمند بریتانیایی تیم برنرز لی در سال های 1991-1992 توسعه یافت. HTML فقط برای علامت گذاری متن، تصاویر و جداول در صفحات وب در نظر گرفته شده بود. اکنون زبان های برنامه نویسی مانند JavaScript و VBScript نیز می توانند در یک سند HTML درج شوند.

    HTML یک زبان برنامه نویسی نیست، بلکه فقط برای علامت گذاری اسناد متنی در نظر گرفته شده است.

    برای یادگیری HTML، فقط باید یک مرورگر و دفترچه یادداشت استاندارد یا .
    برای باز کردن دفترچه یادداشت استاندارد، موارد زیر را در رایانه خود انجام دهید: "شروع" => "برنامه ها" => "لوازم جانبی" => "نوت پد" .

    اگر در مورد برنامه هایی شنیده اید که کار نوشتن کد HTML را ساده می کنند (Microsoft FrontPage، Adobe Dreamweaver)، استفاده از آنها را در این مرحله از آموزش توصیه نمی کنم. مهارت های خود را در یک دفترچه یادداشت استاندارد یا در ویرایشگر متن Notepad++ تمرین کنید و پس از اتمام این دوره، می توانید از برنامه هایی برای سرعت بخشیدن به کارها استفاده کنید. در به روز رسانی های وبلاگ من مشترک شوید و نحوه استفاده را بخوانید برنامه های مایکروسافتفرانت پیج، Adobe Dreamweaver.

    برای درک بهتر یک مثال آماده کرده ام. با دقت به تصویر نگاه کنید:

    توضیح.

    1). هر سند HTML با این خط شروع می شود:

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

    2).

    و ابتدا و انتهای سند است.

    3).
    و - سر سند. تگ های خدمات اضافی اغلب در اینجا درج می شوند. در این مرحله از آموزش با برچسب های دیگر خدمات آشنا خواهید شد.

    4).

    و - عنوان سند.
    این هدر در مرورگر نمایش داده می شود:

    در جستجو من ایندکس هستم یا در گوگل.

    5).
    و - بدنه سند.< >در اینجا محتوای سند، به عنوان مثال، متن، تصاویر، جداول، موسیقی، فیلم و غیره آمده است. در درس های زیر با نحوه درج موسیقی، متن، تصاویر در بدنه سند آشنا خواهید شد. , , , ,
    ,

    توجه:
    شما اغلب کلمه "تگ" را می خوانید و می شنوید.

    تگ هر چیزی است که بین براکت ها قرار دارد

    . به عنوان مثال:
    و غیره - همه اینها برچسب هستند.


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

    برچسب های زیادی وجود دارد و اهداف متفاوتی دارند.
    .

    برچسب هایی هستند که باید بسته شوند. به عنوان مثال،

    تگ را باز کنید

    ...

    و حتما تگ را ببندید

    و تگ های تکی وجود دارد، به عنوان مثال، این یکی

    ...

    تگ نوعی محفظه است که می تواند حاوی متن، عکس و سایر برچسب ها باشد...
    ○ به ترتیب صحیح باز و بسته شدن تگ ها توجه کنید:

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

    عنوان صفحه متن صفحه، جداول، تصاویر، موسیقی و ویدئو.

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

    به درس بعدی ادامه دهید

    • www.youtube.com/user/agragregra- یک کانال بسیار جالب که به شما در ایجاد وب سایت هایی با پیچیدگی های مختلف از ابتدا کمک می کند.
    • www.youtube.com/user/ArtSorax- بسیاری از مطالب مفید برای مبتدیان تاکید بر CSS و JS است.
    • www.youtube.com/user/WebMagistersRu- من شخصاً از این کانال شروع به آشنایی با محیط توسعه وب کردم. همه چیز به زبانی در دسترس و قابل فهم گفته می شود، اصول اولیه، به اصطلاح.
    • www.youtube.com/user/loftblog- تیم LoftBlog با متخصصان و توسعه دهندگان IT مشتاق و مستقر مصاحبه می کند و همچنین آموزش ویدیویی را انجام می دهد.
    • www.youtube.com/user/TheSWAT727- کانال ویدیویی حاوی اطلاعات و مطالب آموزشی در مورد توسعه وب به طور کلی است که شامل Front-end، Back-end، بررسی ویرایشگرهای متن و سایر اطلاعات مفید برای توسعه دهندگان و طراحان مبتدی است.
    منابع اینترنتی
    • htmlbook.ru زیارتگاهی برای متخصصان تازه کار است. این منبع حاوی حجم عظیمی از اطلاعات به صورت در دسترس و قابل درک + انجمن است. اینجاست که توصیه می کنم شروع به آشنایی با HTML/CSS کنید.
    • webdesign-master.ru - یک سایت آموزشی برای آشنایی عمیق تر با طراحی و چیدمان وب.
    • Learn.javascript.ru - نام سایت برای خودش صحبت می کند. من به شما توصیه می کنم پس از آشنایی با اصول اولیه HTML5/CSS3 شروع به یادگیری کنید.
    خدمات
    • www.codecademy.com یک سرویس انگلیسی زبان است که می توانید دانش خود را در عمل آزمایش کنید. همه چیز بصری است، دانش عمیق زبان انگلیسی لازم نیست.
    • htmlacademy.ru یک سرویس روسی زبان است که در آن تاکید بر تمرین + کمی تئوری است. یک منبع، دوره ها و تکالیف بسیار جالب؛
    • jsfiddle.net یک "جعبه ماسه ای" برای توسعه دهندگان وب است. در اینجا می توانید به صورت آنلاین کدنویسی کنید و بلافاصله نتیجه را مشاهده کنید. این سرویس به شما کمک می کند تا خطاها را مشخص کنید.
    • validator.w3.org - در اینجا می توانید اعتبار کد خود را بررسی کنید تا خطاها یا کاستی های خود را در کد HTML اصلاح کنید.
    • jigsaw.w3.org/css-validator - یک سرویس مشابه که برای بررسی اعتبار کد CSS طراحی شده است.

    خط پایین
    اطلاعات مفید، صحیح و ضروری زیادی در اینترنت وجود دارد، اما دیگر مفید نیست. یاد بگیرید، تمرین کنید، کد بنویسید.

    برچسب ها: آموزش، مطالب، وب سایت، توسعه وب سایت

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

    ساختار یک سند HTML چیست؟

    تگ نشان می دهد که ساختار سند html شروع و پایان می یابد. بیشتر اطلاعات مرورگر و موتورهای جستجو بین تگ ها ذخیره می شود. برچسب ها حاوی عنوان صفحه ما هستند. تگ نشان می دهد که اطلاعات بیشتر برای کاربر در نظر گرفته شده است و طبیعتاً نشان می دهد که اطلاعات برای کاربر به پایان می رسد.

    حالا بگذارید کمی توضیح بدهم. همه برچسب ها ( برچسب - عنصر زبان نشانه گذاری فرامتن) به دو نوع «مفرد» و «بسته» تقسیم می شوند. علاوه بر این، برچسب ها با کاراکترهای زیر محصور شده اند< и >، آنها چیزی هستند که یک برچسب را از یک برچسب معمولی متمایز می کنند متن html. بیایید به چند مورد از ساده ترین برچسب های "تک" نگاه کنیم:


    - برچسبی که مسئول شکستن خط جدید در محلی است که این تگ نصب شده است. بیایید با استفاده از این تگ به کد نگاه کنیم.

    اولین وب سایت من سلام به همه!
    و این اولین سایت من است.

    نتیجه قابل مشاهده است.

    - برچسبی که یک خط افقی می کشد. این تگ به عناصر بلوک، خط همیشه از یک خط جدید شروع می شود. دارای 5 ویژگی:

    • align - تراز خط را تعیین می کند. می تواند مقدار چپ، مرکز، راست را بگیرد.
    • color - رنگ خط را تنظیم می کند.
    • noshade - یک خط بدون جلوه های سه بعدی ترسیم می کند.
    • اندازه - ضخامت خط را تنظیم می کند.
    • عرض - عرض خط را تنظیم می کند.

    کد با استفاده از تگ:

    اولین سایت من سلام به همه این اولین سایت من است.

    یک مثال بصری را می توان در اینجا یافت.

    یکی دیگر از برچسب های "تک" است. این تگ برای ذخیره اطلاعات در نظر گرفته شده برای مرورگرها و موتورهای جستجو استفاده می شود. موتورهای جستجو برای به دست آوردن توضیحات سایت، کلمات کلیدی و سایر داده ها به متا تگ ها نگاه می کنند. شما مجاز به استفاده از تعداد نامحدودی متا تگ هستید، همه آنها باید بین و . پارامترهای هر متا تگ دارای شکل نام = مقدار هستند که مشخص می شود کلمات کلیدیمحتوا، نام یا http-equiv . چون متا تگ ها برای ماشین ها در نظر گرفته شده اند، هیچ تغییر بصری ایجاد نمی کنند، بنابراین من فقط کد منبع را ارائه می دهم:

    این خط نشان می دهد که سازنده صفحه معتقد است که صفحه از رمزگذاری UTF-8 استفاده می کند. در HTML5 همه چیز برای تعیین رمزگذاری ساده تر شده است، تنها چیزی که نیاز دارید خط زیر است:

    تگ های منفرد دیگری نیز وجود دارد (،،
    , , , , , , , , , , , , , ) اما کمی بعد شما را با آنها آشنا خواهم کرد.

    حالا بیایید در مورد "بستن" برچسب ها صحبت کنیم. نام خود "بستن تگ" نشان می دهد که برچسب نیاز به بسته شدن اجباری دارد. این کار به این منظور انجام می شود که به وضوح بخشی از متن را که برچسب بر آن تأثیر می گذارد، محدود کند.

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

    اولین وب سایت من سلام به همه! و این اولین سایت من است.
    سلام به همه و این اولین سایت من است.

    همانطور که می بینید، هیچ چیز پیچیده ای وجود ندارد، اکنون می توانید چندین صفحه مرتبط با یکدیگر ایجاد کنید.

    برچسب هایی برای برجسته کردن متن

    چندین روش برای برجسته کردن متن در یک صفحه وجود دارد. این را می توان با استفاده از استایل ها انجام داد یا می توانید از برچسب ها استفاده کنید. ما (در حال حاضر) به گزینه دوم علاقه مند هستیم.

    - فونت را روی پررنگ تنظیم می کند.

    - سبک فونت ایتالیک را تنظیم می کند.

    - یک زیر خط به متن اضافه می کند.

    - برای تأکید بر متن. مرورگرها این متن را به صورت مورب نمایش می دهند.

    - متن را خط می کشد. این تگ از HTML5 حذف شده است، توصیه می شود به جای آن از آن استفاده کنید

    - متن را به صورت متن تک فاصله نمایش می دهد. از HTML5 حذف شد.

    - فونت را به صورت فوق نویس نمایش می دهد. فونت در بالای خط پایه متن و با اندازه کوچکتر ظاهر می شود.

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

    - برای تأکید بر متن. مرورگرها این متن را به صورت پررنگ نمایش می دهند.

    - اندازه فونت را در مقایسه با متن معمولی یک بار کاهش می دهد. در HTML، اندازه فونت در واحدهای معمولی از 1 تا 7 اندازه گیری می شود، متوسط ​​اندازه متن پیش فرض 3 است. برچسب متن را یک واحد معمولی کاهش می دهد. برچسب‌های تودرتو مجاز هستند و اندازه قلم با هر سطح تودرتو 1 کوچکتر خواهد بود، اما نمی‌تواند کمتر از 1 باشد.

    - اندازه فونت را در مقایسه با متن معمولی یک بار افزایش می دهد. در HTML، اندازه فونت بر حسب واحد از 1 تا 7 اندازه گیری می شود، متوسط ​​اندازه متن پیش فرض 3 است. بنابراین، اضافه کردن یک برچسب، متن را یک واحد افزایش می دهد. برچسب های تو در تو مجاز هستند و اندازه فونت با هر سطح بزرگتر خواهد بود.

    - برای برجسته کردن نقل قول ها در متن استفاده می شود. محتویات ظرف به طور خودکار در مرورگر در علامت نقل قول نمایش داده می شود.

    - طراحی شده برای برجسته کردن نقل قول های طولانی در یک سند. متن علامت گذاری شده با این تگ به طور سنتی به صورت یک بلوک تراز شده با بالشتک در سمت چپ و راست (تقریباً 40 پیکسل) و همچنین صفحه در بالا و پایین نمایش داده می شود.

    - بلوکی از متن از پیش قالب بندی شده را تعریف می کند. چنین متنی معمولاً با فونت تک فاصله و با تمام فاصله بین کلمات نمایش داده می شود. به طور پیش فرض، هر تعداد فاصله در کد در یک ردیف به صورت یک در صفحه وب نشان داده می شود. Tag به شما امکان می دهد از این ویژگی عبور کنید و متن مورد نیاز توسعه دهنده را نمایش دهید.

    - یک پاراگراف متنی را تعریف می کند. برچسب بزنید

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

    .... - HTML شش عنوان در سطوح مختلف ارائه می دهد که نشان دهنده اهمیت نسبی بخش بعد از عنوان است. بنابراین، تگ نشان‌دهنده مهم‌ترین عنوان سطح اول است و تگ نشان‌دهنده عنوان سطح ششم است و کمترین اهمیت را دارد. به‌طور پیش‌فرض، عنوان سطح اول با بزرگ‌ترین فونت پررنگ نمایش داده می‌شود و عنوان‌های سطح بعدی از نظر اندازه کوچک‌تر هستند. برچسب ها،...، به عناصر بلوک اشاره می کنند، همیشه از یک خط جدید شروع می شوند و بعد از آنها عناصر دیگر در خط بعدی نمایش داده می شوند. علاوه بر این، فضای سفید قبل و بعد از عنوان اضافه می شود. تگ دارای یک صفت align است که تراز عنوان را تعیین می کند و می تواند مقادیر زیر را داشته باشد: سمت چپ - تراز چپ، وسط - تراز وسط، راست - تراز راست، توجیه - توجیه (هر دو سمت راست و چپ. -تراز شده). این مقدار فقط برای سرصفحه هایی که بیش از یک خط هستند کار می کند.

    - محفظه ای برای تغییر ویژگی های فونت مانند اندازه، رنگ و فونت است. اگرچه این تگ هنوز توسط همه مرورگرها پشتیبانی می شود، اما منسوخ تلقی می شود و توصیه می شود استفاده از آن به نفع سبک ها کنار گذاشته شود. این برچسب دارای 3 ویژگی است: رنگ - رنگ متن را تنظیم می کند، چهره - نوع فونت را تعیین می کند، اندازه - اندازه فونت را در واحدهای معمولی تنظیم می کند.

    - متن را به عنوان نقل قول یا پاورقی برای مطالب دیگر علامت گذاری می کند. این هایلایت برای تغییر سبک متن از طریق CSS مفید است و همچنین برای تفکیک کد HTML به عناصر ساختاری استفاده می شود. مرورگرها معمولاً متن داخل ظرف را به صورت مورب تنظیم می کنند.

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

    به طور پیش‌فرض، متن محصور شده در ظرف با یک خط نقطه‌چین زیر آن خط کشیده می‌شود.

    در زیر کدی وجود دارد که من از تمام این تگ ها استفاده کردم:

    اولین سایت من

    HTML و CSS دو فناوری اصلی برای ساخت صفحات وب هستند. HTML ساختار صفحه، CSS طرح (بصری و شنیداری) را برای دستگاه های مختلف ارائه می دهد. در کنار گرافیک و اسکریپت نویسی، HTML و CSS اساس ساخت صفحات وب و برنامه های کاربردی وب هستند. در زیر بیشتر بدانید در مورد:

    HTML چیست؟

    HTML زبانی برای توصیف ساختار صفحات وب است. HTML به نویسندگان ابزارهای زیر را می دهد:

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

    XHTML یک است نوع HTMLکه از نحو XML، زبان نشانه گذاری توسعه پذیر استفاده می کند. XHTML دارای همه عناصر یکسان (برای پاراگراف ها و غیره) با نوع HTML است، اما نحو کمی متفاوت است. از آنجایی که XHTML یک برنامه XML است، می توانید از سایر ابزارهای XML (مانند XSLT، زبانی برای تبدیل محتوای XML) با آن استفاده کنید.

    CSS چیست؟

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

    WebFonts چیست؟ WebFonts فناوری است که افراد را قادر می سازد تا بدون نیاز به نصب در سیستم عامل از فونت ها بر اساس تقاضا در وب استفاده کنند. W3C در زمینه فونت های قابل دانلود از طریق HTML، CSS2 و SVG تجربه دارد. تا همین اواخر، فونت های قابل دانلود در وب به دلیل عدم وجود یک قالب فونت قابل همکاری رایج نبودند. تلاش WebFonts قصد دارد از طریق ایجاد یک قالب فونت باز و پشتیبانی شده توسط صنعت برای وب (به نام "WOFF") به آن رسیدگی کند.

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

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

    HTML مخفف H yper T ext M arkup L anguage است، یعنی. زبان نشانه گذاری فرامتن بلوک اصلی صفحات وب است که برای ایجاد و نمایش بصری صفحات وب استفاده می شود.

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

    HTML در سال 1991 توسط دانشمند تیم برنرز لی اختراع شد و در ابتدا برای تبادل اسناد بین دانشمندان در دانشگاه های مختلف در نظر گرفته شد. تیم برنز لی با اختراع خود پایه های اینترنت مدرن را بنا نهاد.

    چندین نسخه از HTML وجود دارد. استاندارد زبان به طور مداوم به روز و تکمیل می شود که در نتیجه تقریباً هر سال منتشر می شود نسخه جدید HTML. نسخه "HTML 2.0" اولین مشخصات استاندارد HTML بود که در سال 1995 منتشر شد. HTML 4.01 نسخه اصلی HTML است که در اواخر سال 1999 منتشر شد و امروزه به طور گسترده مورد استفاده قرار می گیرد. امروزه محبوب ترین نسخه HTML-5 است که پسوند HTML 4.01 است که در سال 2012 منتشر شده است.

    یک سند یا صفحه وب HTML یک سند متنی ساده حاوی برچسب‌ها (که به نوبه خود متن ساده محصور شده در پرانتز هستند) است. یک صفحه وب را می توان در یک ویرایشگر متن معمولی (Notepad، WordPad، Word و غیره) یا در یک صفحه تخصصی با برجسته کردن کد (Notepad++، Sublime Text و غیره) تایپ کرد. اسناد HTMLبه صورت فایل هایی با پسوند .htm یا .html ذخیره می شوند.

    نمونه های آنلاین در هر درس

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

    HTML مثال: خودتان آن را امتحان کنید


    عنوان صفحه

    این عنوان است

    این یک پاراگراف است.



    نمونه های HTML آنلاین

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