زبان HTML و CSS برای مبتدیان. HTML: اصول اولیه برای مبتدیان

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

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

پس HTML چیست؟

خود مخفف مخفف NuregT ext M arkip L apguage (زبان نشانه گذاری فرامتن ).

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

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

عنوان صفحه یک روز از زندگی من آماده شدن برای کنسرت

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

همه چیز بدون مشکل پیش رفت. هیچکس از تیم ما ریتم را از دست نداد و همانطور که معلوم شد همه بیهوده نگران بودند.

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

ابتدا باید این متن را در تعدادی تایپ کنید ویرایشگر متن(به نظر من راحت ترین Notepad ++ است) و فایل را با نام index.html در جایی روی دیسک خود ذخیره کنید. در دوبار کلیک کنیددر فایل ذخیره شده صفحه ای شبیه به این را خواهید دید.

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

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

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

همچنین شایان ذکر است که حداقل لازمبرچسب هایی که باید در یک سند HTML باشند. من در مورد این قسمت صحبت می کنم:

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

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

حالا بیایید سعی کنیم خودمان بفهمیم کدام تگ در مثال بالا مسئول چه چیزی است.

تگ html به این معنی است که خروجی کد html شروع می شود.

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

بدن - بدنه سند شروع می شود.

h 1 - عنوان.

h 2 – زیرنویس.

p – پاراگراف

احتمالاً همین است! اگر این اولین سند HTML شما بود، به شما تبریک می گویم! بله، آنطور که ما می خواهیم عالی به نظر نمی رسد. اما با این وجود، ما موادی داریم که می توانیم روی آنها کار کنیم. و در درس های بعدی همه چیز جالب تر خواهد شد و ما به آرامی کار با شیوه نامه های آبشاری (CSS) را لمس خواهیم کرد.

• < Назад

برای نظر دادن باید ثبت نام کنید.

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

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

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

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

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

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

html چیست - اگر به آنچه ویکی‌پدیا می‌نویسد نگاه کنید - (زبان نشانه‌گذاری فرامتن) زبان نشانه‌گذاری فرامتن برای اسناد. اکثر صفحات در اینترنت دارای نشانه گذاری صفحه به این زبان هستند. این زبانکه توسط مرورگرها تفسیر می شود، متن فرمت شده به دست آمده در مانیتور رایانه یا دستگاه تلفن همراه شما نمایش داده می شود.

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

ساختار سند باید از چه چیزی تشکیل شده باشد، چه برچسب هایی باید وجود داشته باشد. بیایید با یک مثال کوچک به همه چیز نگاه کنیم. من متنی در MS Office نوشتم و آن را در این اسکرین شات نشان دادم.

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

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

هر سند html از چه برچسب هایی تشکیل شده است، شامل چه مواردی می شود و در کجا باید همه آن ها را یادداشت کرد؟

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

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

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

متن

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

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

ویژگی - تگ را تغییر می دهد. به عنوان مثال، می توانید یک پاراگراف را در مرکز یا راست چین قرار دهید، همچنین مکان تصویر را در صفحه تنظیم کنید و غیره.

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

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

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

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

محتوا

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

اگر در سربرگ «Hello World» نوشته اید، این اطلاعاتی است که باید در صفحه نمایش داده شود و نه اطلاعات دیگر. شما نباید مردم و موتورهای جستجو را فریب دهید، آنها این کار را دوست ندارند و در نتیجه اوضاع را برای خود بدتر می کنید. اطلاعات موجود در این تگ باید با محتوای صفحه شما مرتبط باشد.

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

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

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

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

.base (عرض: 100 پیکسل؛ رنگ پس‌زمینه: #000؛ ارتفاع: 150 پیکسل؛ رنگ: #fff؛ )

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

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

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

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

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

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

وجود چنین سرفصل هایی در مقاله کمک کننده خواهد بود نقش مهمهنگام پیشبرد صفحه علاوه بر این، استفاده از آنها ساختار صفحه، عنوان، زیرعنوان، نکات برجسته، زیر پاراگراف ها و غیره را به شما می دهد. همیشه از آنها استفاده کنید و آنها را عملی کنید. در بسیاری از CMS ها، مانند وردپرس، هنگام نوشتن متن، می توانید "هدینگ 1"، "هدینگ 2"، "هدینگ 3" و غیره را ببینید. آنها مسئول h1، h2 و h3 هستند.

اگر متن اصلی را از یک پاراگراف جدید بنویسید، یک برچسب می نویسید

در ابتدا و در پایان آن را ببندید

سند HTML

این متن پررنگ خواهد بود، و این یکی نیز به صورت مورب است

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

عنوان و محتوای صفحه

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

برای کار با کد از برنامه Notepad++ استفاده کنید. این رایگان است و پیدا کردن آن در اینترنت دشوار نیست. برای درک هر کدی بسیار راحت است؛ همچنین تگ های باز و بسته شدن را به راحتی نمایش می دهد. ما از سینتکس بیش از 40 زبان برنامه نویسی پشتیبانی می کنیم. فقط چیزی که برای یادگیری اصول اولیه html نیاز دارید.

دفترچه یادداشت از هر نظر نسبت به دفترچه یادداشت معمولی برتری دارد. برای حداکثر راحتی، سادگی و یادگیری، این ویرایشگر ابتدا باید بر روی کامپیوتر شما نصب شود. مهمترین مزیت و راحتی ویرایشگر Notepad++ هنگام نوشتن کد نکاتی را نشان می دهد که کار شما را بسیار سریعتر و بهتر می کند.

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

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

به طور خلاصه در زبان روشندر مورد اصول اولیه html: این خط به مرورگر می گوید که این سند XHTML نسخه 1.0 است، استفاده شده است زبان انگلیسیو این همه آشفتگی در این آدرس واقع شده است. بعد، در متا تگ کدگذاری مورد استفاده را نشان می‌دهیم. رایج ترین مورد استفاده ویندوز 1251 است.

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

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

آنچه شما باید از این درس در مورد اصول اولیه html به خاطر بسپارید:

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

ویدیویی درباره اصول HTML از Webformyself تماشا کنید.

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

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

در این مقاله می‌خواهم به شما بگویم که چگونه این زبان را سریع‌ترین و مؤثرترین یاد بگیرید، به طوری که ظرف یک یا دو ماه آن را کاملاً بدانید. به نظر شما غیر ممکن است؟ از اواخر اسفند شروع به یادگیری html کردم. در پایان ماه می، 90٪ از برچسب های مورد نیاز برای کار را بدون هیچ مشکلی می دانستم.

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

از کتاب های مرجع می توانم به شما توصیه کنم - htmlbook. این یک سایت واقعا جالب است که تمام برچسب ها را جمع آوری می کند و نتیجه کار آنها را نشان می دهد توصیف همراه با جزئیات. اما کتاب مرجع فقط یک ابزار اضافی است؛ با تمرین واقعی می توان به بزرگترین اثر دست یافت.

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

یک سایت فوق العاده با دوره های آموزشی html و css است. 16-18 دوره اول رایگان است! اگر می خواهید تحصیلات خود را ادامه دهید و به تحصیلات پولی دسترسی پیدا کنید، باید 300 روبل در ماه یا 1800 در سال بپردازید. من شخصا 300 روبل دادم، همه چیز را در یک ماه کامل کردم دوره های پولیو از آن بهره فراوان برد.

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

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

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

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

در پایان، باید دلیلی برای یادگیری این فناوری های وب داشته باشید. این معمولاً به منظور یادگیری نحوه ایجاد طرح‌بندی وب‌سایت توسط خودتان انجام می‌شود. اگر شما نیز این هدف را دارید، پس یک گزینه عالی برای شما خرید دسترسی به درس های برتر در webformyself.com است. در نتیجه، نه تنها می‌توانید به دروس HTML و CSS، بلکه به بسیاری دیگر نیز دسترسی داشته باشید. به عنوان مثال، جاوا اسکریپت و وردپرس.

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

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

سایت های خوب از مواد مفیدمن آن را به شما دادم - پس به شما بستگی دارد. اصولاً منابع فوق بهترین منابع موجود در اینترنت هستند. به عنوان مثال، بیش از صد هزار نفر دوره های Htmlacademy را گذرانده اند و بیش از 87 هزار نفر در به روز رسانی Webformyself مشترک شده اند.

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بیش از 100 نمونه آنلاین برای شما آماده شده است که به لطف آنها می توانید به راحتی به زبان نشانه گذاری مسلط شوید. یک بار دیدن بهتر از صد بار شنیدن است! تئوری به علاوه تمرین کلید موفقیت شما در تسلط بر HTML است.

یا درس های HTML را به تنهایی و به صورت رایگان مطالعه کنید

آیا می خواهید وب سایت خود را در اینترنت ایجاد کنید؟ - خیلی خوب! درس های HTML در این مورد به شما کمک می کند.

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

• دروس HTML دروس ایجاد صفحات اینترنتی است.
• درس های HTML اولین قدم برای تسلط بر توسعه سایت های اینترنتی است.
• درس HTML و درس طراحی وب مفاهیم کاملا متفاوتی هستند.

دروس جدید و مدرن HTML که به طور خاص طراحی شده اند برای مبتدی ها.

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

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

مراقب باش! ممکن است به یک فعالیت جدید معتاد شوید.

بیایید به عناصر آن نگاه کنیم:

برچسب هایی که ابتدا و انتهای یک سند را مشخص می کنند.

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

برچسب هایی که عنوان اصلی سند را مشخص می کنند.

این بخش شامل همه قسمت قابل مشاهدهصفحات وب.

در مرورگر Hello World را خواهیم دید! :

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

دروس این دوره شامل HTML 5، XHTML و CSS را معرفی می کند. این ترکیب برای یادگیری بهینه است و به شما امکان می دهد تسلط بر مطالب را به میزان قابل توجهی افزایش دهید.

در حال حاضر، مشخصات HTML 5 در حال حاضر در وب سایت رسمی کنسرسیوم W3C موجود است. توسعه نسخه پنجم در سال 2007 آغاز شد؛ این نسخه بر اساس XML است و در اصل XHTML است و با عناصر و ویژگی های جدید تکمیل شده است. نسخه پنجم HTML عملکرد بیشتری را ارائه می دهد و فرآیند ایجاد سایت های تعاملی و برنامه های کاربردی وب را ساده می کند. علاوه بر این، HTML 5 حاوی عناصر اضافی است که محتوای چندرسانه ای را در یک صفحه وب ارائه می کند.

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

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