مشاوره رایگان

ورود عضویت کسب درآمد

سبد خرید شما 0

دریافت لینک های دانلود دریافت پستی درب منزل مبلغ کل: تومان

جهت دریافت کد تخفیف به کانال تلگرام مراجعه و یا با پشتیبان آنلاین هماهنگ نمایید

آموزش برنامه نویسی HTML – بخش دوم

مقدمه ای بر عناصر HTML

در این بخش از آموزش برنامه نویسی HTML به عناصر اصلی HTML خواهیم پرداخت.

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

در مثالی که در مقاله قبل نیز داشتیم ، "He is a boy" (به شکل bold) ، در HTML داریم: <b>He is a boy</b> . متن "He is a boy" توسط تگ باز و بسته محصور شده است. همه چیز، از جمله تگ باز، محتوا و تگ بستن یک عنصر هستند.

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

یک عنصر می تواند به شکل پایه ایی یا شکل پیچیده باشد. چرا؟ زیرا هر چیزی در بین یک تگ باز و بسته و هم چنین این تگ ها یک عنصر هستند. این بدان معنی است که ما می توانیم عناصر را در درون یک عنصر داشته باشیم. در مثال فعلی ما (<he is a boy” (<b>He is a boy</b" نیز یک عنصر است.

متوجه شدید که پیش از این گفتیم که اسناد HTML حاوی تگ <body> قبل از شروع محتوا هستند. محتوا می تواند صدها عنصر مختلف را شامل شود ، اما همه این عناصر بخشی از عنصر "body" (زیرا عنصر body باز می شود ، حاوی محتوا است و سپس بسته می شود).

مقدمه ای بر صفت ها

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

توجه داشته باشید که مقدار یک صفت در داخل علامت کوتیشن با استفاده از فرمت
<tag attribute=”value”>Your Text</tag> قرار می گیرد.

مثال

<p align="center">He is a boy</p>

در این مثال، بر اساس مواردی که در آموزش برنامه نویسی HTML مطرح کردیم ، متن "He is a boy" در مرکز سند قرار دارد.

شروع کار با HTML

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

ساخت عنصر <head> مربوط به HTML

هنگام ایجاد یک سند HTML ، یکی از اولین مواردی که شما ایجاد می کنید ، عنصر <head> است. این عنصر شامل متادیتا (یا داده های مربوط به سند HTML) است. این عنصر شامل اطلاعاتی مانند character set ، عنوان سند ، سبک سند ، اسکریپت ها و غیره می باشد.

یکی از عناصری که در <head> عنصر title است که با تگ <title> ایجاد می شود.

مثال

<title>This is our page title</title>

عنوان در tab مرورگر نمایش داده خواهد شد. هم چنین چیزی است که به عنوان title برای صفحه در زمانی که bot های موتور جستجو ، وب سایت شما ردیابی می کنند ، نمایه (ایندکس) خواهد شد.

این عنصر ، هم چنین شامل عنصر <meta> است که اغلب برای تعیین اطلاعات مربوط به موتورهای جستجو استفاده می شود تا محتواهای لیست شده را توصیف کنند. این عنصر شامل توضیحات ، کلمات کلیدی ، اطلاعات مربوط به نویسنده و ... می شود. عنصر <meta> هم چنین مشخص کننده character set است که سند HTML از آن استفاده می کند.

ایجاد تیترها در HTML

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

نکته مهم این است که از تگ های heading برای ایجاد متن های بزرگ یا پررنگ استفاده نکنید. تگ های های دیگری وجود دارند که می توان برای این منظور استفاده کرد (که در بخش بعد خواهیم دید). در عوض، تگ های heading تنها باید برای ساختاردهی متن استفاده می شوند.

شش تگ heading در HTML وجود دارد: <h1> تا <h6> ، تگ <h1> نشانگر مهم ترین تیتر و تگ <h6> نشان دهنده تیتر با حداقل اهمیت است.

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

مثال تگ های Heading در HTML

•	<h1>This is Your First HTML Heading</h1> (the largest)
•	<h2>This is Your Second HTML Heading</h2>
•	<h3>This is Your Third HTML Heading</h3>
•	<h4>This is Your Fourth HTML Heading</h4>
•	<h5>This is Your Fifth HTML Heading</h5>
•	<h6>This is Your Sixth HTML Heading</h6>

ایجاد پاراگراف

گام بعدی ، ایجاد پاراگراف ها در آموزش برنامه نویسی HTML است. پاراگراف ها می توانند با تگ <p> ایجاد شوند.

مثال

<p>This is your first paragraph.</p>
<p>This is your second paragraph, and you will be creating many more paragraphs.</p>

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

مثال

<p>This is a new paragraph. 
 And I want to use a number of new lines. 
 So I’m breaking it up.</p>

کد فوق به صورت زیر نمایش داده نمی شود :

This is a new paragraph.
And I want to use a number of new lines.
So I’m breaking it up.

بلکه به صورت زیر نمایش داده می شود :

This is a new paragraph. And I want to use a number of new lines. So I’m breaking it up.

بنابراین ، چگونه می توانیم خروجی زیر را نمایش دهیم :

This is a new paragraph.
And I want to use a number of new lines.
So I’m breaking it up.

با استفاده از شکست های خط (line breaks) .

مثال

<p>This is a new paragraph.<br>And I want to use a number of new lines.<br>So I’m breaking it up.</p>

همان طور که قبلاً در بخش اول آموزش برنامه نویسی HTML گفته شد ، تگ <br> تگ empty است ، بنابراین شما مجبور نیستید آن را ببندید.

قالب بندی متن در HTML

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

استفاده نمودن از تگ bold : دستور <b>He is a boy</b> به صورت He is a boy نمایش داده می شود.

استفاده نمودن از تگ ایتالیک : دستور <b>He is a boy</b> به صورت He is a boy نمایش داده می شود.

متن زیرخط دار : <u>He is a boy</u> به صورت He is a boy نمایش داده می شود. شایان ذکر است که تگ <u> در ورژن HTML 4.01 منقضی شد و برای نشان دادن متن با سبک متفاوت در HTML5 مجدداً تعریف گردید. به عنوان نتیجه ، توصیه می شود از CSS برای نشان دادن متن که باید زیرخط دار باشد ، استفاده کنید. از آنجا که این مقاله راهنمای اصلی است ، از پرداختن به این مبحث خودداری می کنیم.

استفاده از تگ subscript : دستور <sub>He is a boy</sub> به صورت _{He is a boy}نمایش داده می شود.

استفاده از تگ superscript : دستور <sup>He is a boy</sup> به صورت ^{He is a boy}نمایش داده می شود.

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

دیر یا زود شما باید با لیست ها سر و کار داشته باشید. لیست ها می توانند به صورت مرتب شده (به عبارتی شماره گذاری شده) یا نامرتب (یعنی شماره گذاری نشده) باشند.

مثالی از یک لیست مرتب به صورت زیر می باشد:

Item 1
Item 2
Item 3

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

<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

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

Item 1
Item 2
Item 3

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

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

تگ <li> برای نشان دادن هر نوع لیستی استفاده می شود. هنگام ایجاد یک لیست ، می توانید از تگ <ol> برای نشان دادن یک لیست مرتب شده (“o” = ordered and “l” = list) یا تگ <ul> برای نشان دادن یک لیست مرتب نشده (“u” = unordered and “l” = list) استفاده نمود.

لیست های تو در تو

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

مثال

Item 1
- Item 1 nested
- Item 2 nested
Item 2
Item 3

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

<ul>
<li>Item 1
<ul>
<li>Item 1 nested</li>
<li>Item 2 nested</li>
<li>Item 3 nested</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

در مقاله بعدی از آموزش برنامه نویسی HTML به سایر مبانی آموزش برنامه نویسی HTML خواهیم پرداخت.

پکیج های آموزشی جدید

ساخت فروشگاه دیجی‌کالا با ASP.Net Core

فصلِ: 8 , تعداد قسمت ها: 357 , سطح: صفر تا صد

موضوعات: آموزش HTML5 آموزش CSS آموزش JQUERY آموزش ASP.NET آموزش ASP.NET MVC آموزش ساخت فروشگاه اینترنتی

این فصل در یک نگاه:

…

توضیحات کلی مجموعه: در این مجموعه قصد داریم تا فروشگاه اینترنتی دیجی کالا رو با Asp.Net Core3 پیاده سازی کنیم. ابتدا طراحی قالب دیجی کالا رو به صورت کامل انجام خواهیم داد. در مرحله میریم …

طراحی و برنامه نویسی وب

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

برنامه نویسی ویندوز

سایر

آموزش برنامه نویسی HTML – بخش دوم

آیا نیاز به مدرک هم دارید؟