آیتم فهرست واحد مانند

، و در
با استفاده از یک برچسب تشکیل شده است < لی> .

تمرین 3

1. یک لیست شماره گذاری شده تحت عنوان "پروژه های خانه" ایجاد کنید.

2. یک لیست گلوله‌دار تحت عنوان «مناطق خانه» ایجاد کنید. کد شما به این شکل خواهد بود (شکل 12).



شکل 12

3. صفحه را در مرورگر مشاهده کنید.

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

نمونه ای از یک لیست تو در تو در شکل نشان داده شده است. 13

تمرین 4

1. کد نشان داده شده در شکل 13 را در یک فایل جدید پیاده سازی کنید.
2. فایل را در یک پوشه ذخیره کنید خانهی منزیر اسم اسپیسوک_ vlozh. html. نتیجه در شکل. 13



شکل 13. نمونه ای از لیست تودرتو

سبک های فونت

برچسب بزنید … - به شما امکان می دهد متن را با فونت پررنگ نمایش دهید.

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

برچسب بزنید … - متن زیرخط دار را نمایش می دهد.

مثلا:

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

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

زیرنویس ها و بالانویس ها

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

برچسب بزنید < شام> و شام> به شما امکان می دهد متن را نیم خط بالاتر از متن معمولی قرار دهید. متنی که بین این تگ ها قرار دارد با فونت کوچکتر از متن معمولی ظاهر می شود.

تمرین 5

1. نام myhouse.ru را به صورت پررنگ در پاراگراف اول فرمت کنید (شکل 14).

شکل 14

2. عبارت "بیش از 95% پروژه ها" را با حروف مورب در پاراگراف دوم قالب بندی کنید (شکل 15).

شکل 15

3. بالانویس ها را در جایی که متر مربع استفاده می شود قالب بندی کنید (شکل 16).



شکل 16

4. فایل را ذخیره کنید. مشاهده از طریق مرورگر صفحه وب باید شبیه این باشد (شکل 17).



شکل 17

3. درج تصاویر

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

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

برای درج تصویر از دستور استفاده کنید

مثلا: " image1.jpg" alt="Picture" /> !}

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

فایل های گرافیکی می توانند با فرمت باشند jpg، gif، png و همیشه در مدل رنگیRGB.

تمرین 6

1. پس از لیست مناطق خانه، تصاویر پروژه های کلبه را در صفحه وب قرار دهید پروژه_1.jpgو پروژه_2.jpgاز پوشه CD/html_css_1 . برای این کار ابتدا این دو تصویر را در پوشه ای که فایل main.html در آن قرار دارد کپی کنید. کد درج تصویر به این شکل خواهد بود (شکل 18).

شکل 18

2. نتیجه را در مرورگر مشاهده کنید (شکل 19).



شکل 19

اساساً اصل استفاده از برچسب هاHTMLباید واضح باشد آنها طبق همان اصل مورد استفاده قرار می گیرند: اگر برچسب ظرف باشد، یک برچسب باز و بسته وجود دارد. اگر تگ تک باشد، دیگر تگ بسته شدنی وجود ندارد؛ در این حالت، برای مثال، قبل از براکت زاویه بسته، اسلش راست نوشته می‌شود.< br/>. چه برچسب ظرف یا تک باشد، همیشه می‌توانید مشخصات را ببینیدhtml401_ru.chm در بخش "عناصر".

4. آدرس دهی در داخل سایت

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

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

دو نوع آدرس دهی وجود دارد:

• مطلق؛
• نسبت فامیلی.

آدرس دهی مطلق (با استفاده از نام درایوهای کامپیوتر) استفاده نشده(شکل 20)



شکل 20

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

مثال 1 تصویر در همان پوشه سند HTML قرار دارد (شکل 21). یعنی تصویر و فایل HTML در یک سطح هستند سیستم فایلو سند HTML می تواند بلافاصله تصویر را ضمیمه کند. در این حالت، قرار دادن یک تصویر در یک صفحه وب به این صورت خواهد بود. / > شکل 21 کار عملی7 مثال 1 را اجرا کنید (یک پوشه، یک فایل doc.html ایجاد کنید، هر تصویری بگیرید). تصویر

مثال 2 تصویر عکس. jpgدر پوشه است پوشه_1 . سند HTML خارج از folder_1 قرار دارد. آن ها در سیستم فایل سایت، سند HTML یک سطح بالاتر از تصویر قرار دارد (شکل 22). باید وارد پوشه folder_1 شوید، سپس تصویر را پیوست کنید شکل 22 کار عملی8 مثال 2 را اجرا کنید (یک پوشه، یک فایل doc.html ایجاد کنید، هر تصویری بگیرید). تصویر باید در صفحه وب doc.html درج شود.

مثال 3 تصویر عکس. jpgدر پوشه است پوشه_1 ، که به نوبه خود در پوشه قرار دارد پوشه_2 . سند HTML خارج از این پوشه ها قرار دارد (شکل 23). بنابراین، سند HTML دو سطح بالاتر از تصویر است. لازم: پوشه پوشه_2 را وارد کنید، سپس وارد پوشه folder_1 شوید، سپس تصویر را پیوست کنید. شکل 23 کار عملی9 مثال 3 (ایجاد پوشه، فایل doc.html، گرفتن هر تصویر) را پیاده سازی کنید. تصویر باید در صفحه وب doc.html درج شود.

مثال 4 پوشه_1 . تصویر خارج از folder_1 قرار دارد. آن ها سند HTML یک سطح پایین تر از تصویر قرار دارد (شکل 24). باید از folder_1 خارج شوید، سپس تصویر را پیوست کنید. ترک یک پوشه با ساختار نشان داده می شود ../ (دو نقطه و یک اسلاید به سمت راست). / > شکل 24 کار عملی10 مثال 4 را پیاده سازی کنید (یک پوشه، یک فایل doc.html ایجاد کنید، هر تصویری بگیرید). تصویر باید در صفحه وب doc.html درج شود.

مثال 5 سند HTML در پوشه قرار دارد پوشه_1 ، که به نوبه خود در پوشه قرار دارد پوشه_2 . تصویر خارج از این پوشه ها است. بنابراین، سند HTML دو سطح پایین تر از تصویر قرار دارد (شکل 25). لازم: خروج از پوشه_1، خروج از پوشه_2، یک تصویر را ضمیمه کنید از آنجایی که باید دو بار از طرح خارج شوید ../ دو بار تکرار شد / > شکل 25 تمرین 11 مثال 5 (ایجاد پوشه، فایل doc.html، گرفتن هر تصویر) را پیاده سازی کنید. تصویر باید در صفحه وب doc.html درج شود.

مثال 6 (شکل 26) لازم: خروج از پوشه_1، خروج از پوشه_2، به پوشه پوشه_3 بروید، به پوشه folder_4 بروید، تصویر pic.jpg را ضمیمه کنید شکل 26 تمرین 12 مثال 6 (ایجاد پوشه، فایل doc.html، گرفتن هر تصویر) را پیاده سازی کنید. تصویر باید در صفحه وب doc.html درج شود.

مثال 7 (شکل 27) لازم: خروج از پوشه_1، خروج از پوشه_2، خروج از پوشه_3، پوشه_4 را وارد کنید، تصویر pic.jpg را ضمیمه کنید. از آنجا که شما نیاز به خروج از سه بار، طراحی ../ سه بار تکرار شد شکل 27 تمرین 13 مثال 7 (ایجاد پوشه، فایل doc.html، گرفتن هر تصویر) را پیاده سازی کنید. تصویر باید در صفحه وب doc.html درج شود. بنابراین، مهم نیست که چند بار باید خارج شوید، ساخت ../ را چندین بار قرار می دهیم و اگر وارد شویم، نام پوشه هایی را که در طول مسیر با آنها مواجه شده اند لیست می کنیم.

تمرین 14

1. یک سند html ایجاد کنید و یک تصویر در آن قرار دهید تا مسیر تصویر به صورت زیر باشد.

" ../../../../../../folder_1/folder_2/folder_3/image.jpg" / >

2. نمونه خود را از درج یک تصویر در یک سند html ایجاد کنید تا حاوی و باشد خروج از پوشه ها و ورود در پوشه ها مثال باید با تمام مثال های بالا متفاوت باشد.

در نتیجه تکمیل این مبحث، باید فایل های زیر را ایجاد کنید:

• template.html
• main.html
• spisok_vlozh.html
  
• داخل پوشهخانهی منباید یک پوشه وجود داشته باشدعمومی_ htmlبا فایل های سایت آینده
• هفت مثال در آدرس دهی نسبی و دو مثال به عنوان نمونه های کنترلی از وظیفه عملی 14

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

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

توضیحات کلی

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

یک فایل HTML با هدر DOCTYPE شروع می شود که نشان می دهد نوع فایل HTML است. تمام عناصر صفحه (برچسب ها) در براکت های زاویه نشان داده شده اند. هر جفت ("<» и «>") شامل یک تگ HTML است. معمولاً تگ‌های HTML به صورت جفت می‌آیند، یعنی برای هر «تگ» یک «/tag» وجود دارد. هر دو در براکت های زاویه ای محصور شده اند. برچسب های تکی وجود دارد که محبوب ترین آنها "br/" است - انتقال به خط بعدی.

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

صفحه HTML ساده

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



بخش HEAD

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

• کلمات کلیدی و توضیحات صفحه؛
• پیوند به فایل های دیگر (*.css و *.js).

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

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



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

اگر پس از ایجاد دانش در مورد HTML باید به اسکریپت نویسی نزدیک شد، باید فوراً به Cascading Style Sheets پرداخت. فایل های CSS به ویژه شامل قوانین طراحی هستند تگ های HTML.

بخش BODY

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

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



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

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

یک مثال ساده (فقط بخش BODY) در زیر نشان داده شده است.



و در مرورگر بازدید کننده به این صورت است:



کد مشخص نکرده است که عناصری که مرورگر نمایش می دهد چگونه باید باشد. تمام استایل های قابل مشاهده در قوانین CSS است. در این مورد، در فایل Mcss/scPhpWordRW.css که پیوند داده شده است (نمونه اول صفحه HTML را ببینید).

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



این نشان می دهد که تگ scLogo_vDoc چقدر ساده توصیف می شود و این توضیحات به گونه ای است که در حالت عادی تگ تصویر vDoc-logo.png را نمایش می دهد و زمانی که ماوس روی آن قرار دارد، vDoc-logo-h.png نمایش داده می شود.

ساختار توضیحات HTML

زبان به هیچ ساختاری دلالت نمی کند و مفهوم نحو در اینجا بسیار نسبی است. هیچ متغیری وجود ندارد، اما امکانات زیادی وجود دارد. اساس اساسی فرامتن این است که یک عنصر (برچسب) وجود دارد که لزوماً یک نام دارد.

نام، در مورد یک تگ جفت، از خود نام (tagName) و براکت های زاویه (" ساخته شده است.<» + tagName +«>")، اگر ما در مورددر مورد شروع تگ، و "«اگر پایان آن ثبت شود.

نمونه ای از صفحه HTML که ویژگی ها را توصیف می کند در زیر در متن قرار دارد.



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

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



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

علاوه بر عناصر ساده، HTML شرح جداول و فرم ها را ارائه می دهد. این عناصر در «ساخت وب‌سایت روزمره» تقاضای زیادی دارند.

توضیحات جدول: برچسب‌ها TABLE، TR، TD

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



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

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



در اینجا جدولی از سه ردیف در سه ستون نشان داده شده است و در سطر اول به جای تگ TD از تگ TH استفاده شده است - عنوان ستون. این دو تگ تفاوت خاصی ندارند، اما استفاده از اولین تگ برای تشخیص ردیف اول جدول کاملاً امکان پذیر است و در CSS می توانید استایل خود را به TH متصل کنید که آن را از سایر TD ها متمایز می کند.

توضیحات فرم: برچسب‌ها FORM، INPUT

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

نمونه صفحه HTML که یک فرم ساده را توصیف می کند:



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

با استفاده از HTML

دانستن زبان فرامتن یک شغل در هر تخصصی در زمینه برنامه نویسی اینترنتی است، اما اگر نیاز به نوشتن برنامه به زبان PHP یا جاوا اسکریپت دارید، باید HTML + CSS را کاملا بدانید.

زبان PHP در مثال قبلی نشان داده شد. PHP روی سرور اجرا می شود، بنابراین صفحه با این فرم با فیلدهای پر شده از سرور به مرورگر پرواز می کند. به طور خاص، تابع TestOnBlur ذکر شده در تگ INPUT (کنترل کننده رویداد onblur) تمام پارامترها را به عنوان فیلدهای متنی دریافت کرد.



جاوا اسکریپت در مرورگر اجرا می شود و برای اینکه دکمه به درستی داده ها را به سرور ارسال کند، یعنی ساختار: onclick=jQuery("#to").val("cart") باید داشته باشید. ایده ای نه تنها از اینکه jQuery چیست، بلکه همچنین چه چیزی #to، val، cart است. به طور دقیق تر، باید تگ های اولیه HTML و قوانین عمومیاعمال سبک های CSS برای آنها.

این برای بهبود سریع مدارک شما در هر تخصص در زمینه برنامه نویسی اینترنتی کاملاً کافی است.

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

احتمالاً می دانید که زبان اصلی اینترنت است زبان نشانه گذاری فرامتن HTML (زبان نشانه گذاری فرامتن). در این مقاله با مفاهیم اولیه HTML آشنا می شویم و نحوه ایجاد صفحات وب ساده را یاد می گیریم.

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

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

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

,

, .

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

زبان HTML و برچسب های آن

اولین نسخه از زبان HTML در سال 1992 ظاهر شد. در زمان 2013، مشخصات در حال توسعه است نسخه جدیدشماره HTML 5. توسعه این مشخصات توسط کنسرسیوم وب جهانی یا به اختصار W3C انجام می شود. سازمان W3C سایر استانداردهای وب را توسعه می دهد. می توانید در وب سایت آنها www.w3.org با این استانداردها آشنا شوید. به هر حال، بسیاری از مرورگرهای وب در حال حاضر برخی از ویژگی های HTML 5 را پشتیبانی می کنند.

من پیشنهاد می کنم بلافاصله با یک مثال شروع به یادگیری HTML کنید. پس بیایید اولین صفحه وب خود را ایجاد کنیم. هر ویرایشگر متنی برای ایجاد صفحات وب مناسب است. پیشنهاد می کنم ابتدا از ویندوز داخلی استفاده کنید دفترچه یادداشت(به طور کلی، در آینده، توصیه می کنم برای ویرایش کدهای html استفاده کنید). می توانید آن را پیدا کنید: "شروع -> همه برنامه ها -> لوازم جانبی -> دفترچه یادداشت". بیایید یک صفحه در مورد اتومبیل ایجاد کنیم. بنابراین، Notepad را باز کنید و متن زیر را در آن تایپ کنید:










وب سایت در مورد اتومبیل.




به وب سایت خودرو ما خوش آمدید. در اینجا مقالات جالب و مفید زیادی در مورد آن پیدا خواهید کرد ماشین ها. این سایت حاوی توضیحات بسیاری از خودروهای وارداتی و داخلی است.







سپس صفحه وب ایجاد شده را در فایلی به نام index.html ذخیره کنید. در این حالت، در کادر محاوره ای ذخیره فایل، باید کدگذاری را روی UTF-8 قرار دهید و نام فایل را در گیومه قرار دهید، در غیر این صورت Notepad پسوند txt را به آن اضافه می کند و نام فایل ما index.htm.txt می شود:

اکنون تنها چیزی که باقی می ماند این است که فایل ایجاد شده را در مرورگر باز کنید و به نتیجه نگاه کنید. برای این کار می توانید از موارد ارائه شده استفاده کنید مرورگر ویندوز Microsoft Internet Explorer یا هر مرورگر دیگری که روی رایانه شما نصب شده است، با دوبار کلیک کردن روی فایل index.html یا کشیدن فایل روی نماد مرورگر. آن را باز کنید و چیزی شبیه به این را ببینید:



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

تگ چیست؟

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

وب سایت در مورد اتومبیل

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

و

. تگ در HTML چیست؟

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

,

, . پس تگ کن

تگ آغازین، تگ است

تگ بسته شدن، و متن بین آنها محتوای تگ نامیده می شود. همچنین تگ کنید

و تگ کنید

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



بنابراین برچسب جفت شده است

یک عنصر هدر سطح اول را تعریف می کند. در مجموع شش سطح سرفصل وجود دارد، این عناصر هستند

—

.

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

یک عنصر بلوک است.

این همه برای من!!! در پست های بعدی می بینمت!

: HTML - زبان نشانه گذاری فرامتن (یا زبان نشانه گذاری فرامتن).

پس بیایید او را بهتر بشناسیم.

ابتدا یک فایل با هر نام و پسوند.html در رایانه خود ایجاد کنید (نام باید روی آن باشد زبان انگلیسی - برای مثال index.html). برای ایجاد چنین فایلی، یک فایل معمولی ایجاد کنید سند متنی ("شروع" - "همه برنامه ها" - "لوازم جانبی" - "نوت پد")و ذخیره کنید ("فایل" - "ذخیره به عنوان")آن را در هر نقطه با وارد کردن نام و پسوند (این اتفاق می افتد که وقتی یک افزونه را معرفی می کنید، notepad همچنان آن را به عنوان ذخیره می کند فایل متنی، و ما به یک فایل وب نیاز داریم. برای انجام این کار، قبل از ذخیره، نوع فایل را انتخاب کنید - "همه فایل ها (*.*)").

این یک پیش نیاز نیست (چون می توانید نام صفحه اول را در تنظیمات سرور تغییر دهید)، بلکه یک قانون اخلاق خوب است. نام صفحه اول ترجیحاً index (index.html) است، زیرا سرور هنگام دسترسی به آن، فایلی با همان نام - index تولید می کند.

هنگامی که به درستی ذخیره شود، نماد فایل باید به نماد مرورگر (به طور پیش فرض اینترنت اکسپلورر) تغییر کند.

حالا این فایل را با استفاده از Notepad باز کنید و کد زیر را در آنجا کپی کنید.

این اولین صفحه وب است!



ذخیره و در مرورگر باز کنید.

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

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

اما صفحه ما عنوان ندارد.



ما باید این مشکل را برطرف کنیم - کد را کمی تصحیح می کنیم، یا بهتر است بگوییم با استفاده از برچسب ها، "سر سایت" را به آن اضافه می کنیم. و این اولین صفحه وب من است!!!



ذخیره، به روز رسانی، تحسین کردن. صفحه ما اکنون یک عنوان دارد.



توضیحات برچسب ها

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

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

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

و آخرین برچسب در کد ما این است - . همچنین یک تگ جفت شده ( و

) که داخل آن کل قسمت قابل مشاهده سایت است، یعنی. متن ها، تصاویر، لینک ها، در اطلاعات کلیکه می خواهید در سایت قرار دهید.

در درس بعدی در مورد انواع تگ ها و قوانین نوشتن آنها صحبت خواهیم کرد.





محبوب در دسته بندی:



چگونه یک کلیپ کارائوکه در رایانه ایجاد کنیم؟

خواندن



برنامه Origin برای بازی لازم است، اما نصب نیست فیفا...

خواندن



ثبت صفحه شخصی در شبکه اجتماعی فیسبوک

خواندن



نحوه اجرای یک اسکن Nmap ساده Nmap

خواندن



آخرین مقالات



چگونه یک تصویر را چند درجه بچرخانیم ...

خواندن



غیرفعال کردن تبلیغات در مرورگر Yandex کجا...

خواندن



عیب یابی مشکلات اتصال وای فای در...

خواندن



تغییر رمز عبور در پروفایل ویندوز 10

خواندن



دستورالعمل راه اندازی روترهای بی سیم ...

خواندن



نحوه انتخاب هارد دیسک و خرید کدام یک بهتر است...

خواندن



Meizu برای آدمک ها. تماس ها و دفترچه آدرس ....

خواندن



برنامه PDFMaster را دانلود کنید

خواندن



5visa.ru
اینترنت. چند رسانه ای. ناوبر. تحصیلات. توسط. سیستم عامل. برنامه ها. مشاوره نصب و راه اندازی

• نسخه پروژه
• تبلیغات در وب سایت

• مخاطب
• نقشه سایت

© 2023 اینترنت. چند رسانه ای. ناوبر. تحصیلات. توسط. سیستم عامل. برنامه ها. مشاوره نصب و راه اندازی

بالا