یک فنجان مشاوره
مهـمـان مــا باشیـد

شـمـــاره تــمــاس
031-36628509

آموزش مقدماتی HTML

انتشار 09 آبان 1398
دیدگاه ها 0
زمان تقریبی مطالعه
گردآوری پدیده تجارت

قبل از آموزش مقدماتی HTML ، بهتر است راجع به صفحات وبسایت توضیحات مختصری بدهیم ، یک صفحهی  وبسایت شامل تصویر، متن و … میباشد. یکی از موارد مورد استفاده ازHTML مخفف  (Hypertext Markup Language)کنار هم قرار دادن اجزای صفحات وبسایت است .با بهره گیری از عناصر و تگ های HTML میتوانیم نوشته ها ، عکسها ، ویدئوها ، و دیگر اجزا را درکنار هم قرار بدهیم تا برای کاربران سایت قابل مشاهده شود.

معرفی HTML به عنوان یک زبان کدنویسی وبسایت

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

 

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

 

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

 

نحوه ساخت یک صفحه وبسایت با کدهای HTML

ابتدا یک فایل New Text Document  باز کرده و با پسوند html ذخیره کنید(برای این کار از منوی File گزینه Save As را انتخاب کرده و در قسمت تعیین نام فایل، به جای پسوند txt، پسوند html را جایگزین کنید).

 

برای شروع نوشتن برنامه از دو تگ اصلی head و bodyاستفاده می کنیم.

 

–  دو تگ head و  body : این دو تگ که دو جز اصلی تگ های HTML را تشکیل میدهند و دربرگیرنده تگ های زیرمجموعه، عناصر مورد نیاز و محتوای درونی یک صفحه وبسایت هستند همچنین تگ  headشامل قسمت تنظیمات (کلمات کلیدی )و تگ body شامل قسمتهای قابل مشاهده (client) است.

 

– تگ  title : از این تگ برای نمایش عنوان صفحه در مرورگر استفاده میشود، این عنوان همان متنی است که در سربرگ مرورگر برای هر صفحه‌ نمایش داده می شود که زیر مجموعه ای از تگ head میباشد.

 

<title>this is my site | padide</title>

 

معرفی برخی از تگ های زیر مجموعه body

– تگ h1 : این تگ نشانگر سرتیترها است که می تواند مقادیری تا h6 را در بر بگیرد، هرچه عددی که مقابل h نوشته میشود بزرگتر باشد، اهمیت نوشته درون تگ کمتر میشود، به طور مثال اهمیت تگ h3 بیشتر از تگ h4 است.

	<h3>bmw m3</h3> 
	<h4>bmw m3</h4>

 

– تگ p : این تگ در کدهای HTML پاراگراف را نشان میدهد. همانطور که گفته شد HTML, زبان نشانه گذاری است و تگp در این نشانه گذاری نماینده پاراگراف میباشد.

<p>this is my car</p>

 

-تگ b :از این تگ درکدهای HTML جهت بولد کردن کلمات و زیباسازی بیشتر استفاده میشود به صورتی که تگ ابتدا و انتهای کلمه مورد نظر گذاشته میشود.

<p>this is my <b>car</b></p>

 

-تگ ol: یکی از تگ های مورد استفاده برای لیست بندی در html تگ olمخفف (order list) به معنی لیست ترتیبی میباشد به صورتی که پس از اجرای کد در صفحه مرورگر کلمات با عدد نشانه گذاری میشوند.

code

-تگ ul: یگی دیگر از تگ های مورد استفاده برای لیست بندی در htmlتگ ul مخفف (unordered list) به معنی لیست غیر ترتیبی میباشد به صورتی که پس از اجرای کد در صفحه مرورگر کلمات با دایره توپر نشانه گذاری میشوند.

education

-تگ li: از این تگ در لیست های ترتیبی وغیر ترتیبی برای نمایش دادن ایتم های لیست (سطرهای لیست) استفاده میشود.

<ol>
	<li>bmw m1</li> 
	<li>bmw m2</li> 
	<li>bmw m3</li> 
	
	</ol> 


 

– اکثر تگ های HTML  با افزودن یک اسلش (/) به ابتدای تگ آغازین بسته می شوند، این تگ ها اصولا شامل محتوایی درون خود هستند،

<p>آموزش مقدماتی طراحی وبسایت </p>

 

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

 

 

 

 

مقالات مرتبط

شاید علاقمند به دیدن این مقالات نیز باشید
(آرشیو کامل)

تایپو گرافی چیست؟ تایپو گرافی چیست؟ مقالات

پدیده تجارت

06 آبان 1396

آموزش فتوشاپ ویژه اینستاگرام در اصفهان آموزش فتوشاپ ویژه اینستاگرام در اصفهان مقالات تجارت الکترونیک

پدیده تجارت

30 اردیبهشت 1399

متد اسکرام چیست؟ متد اسکرام چیست؟ مقالات طراحی وب سایت

پدیده تجارت

19 تیر 1396

4 روش مهم در زمینه کسب درآمد از اینستاگرام 4 روش مهم در زمینه کسب درآمد از اینستاگرام مقالات تجارت الکترونیک

پدیده تجارت

10 اسفند 1395

درآمد ادمین اینستاگرام چه قدر است ؟ درآمد ادمین اینستاگرام چه قدر است ؟ مقالات تجارت الکترونیک

پدیده تجارت

20 فروردین 1401

طراحی کمپین تبلیغات آنلاین طراحی کمپین تبلیغات آنلاین مقالات برندینگ

پدیده تجارت

03 اسفند 1398

چگونه در اندروید استودیو، Toolbar سفارشی طراحی کنیم؟ چگونه در اندروید استودیو، Toolbar سفارشی طراحی کنیم؟ مقالات موبایل

پدیده تجارت

23 اردیبهشت 1397

نقش طراحی لوگو در معرفی برند نقش طراحی لوگو در معرفی برند مقالات برندینگ

پدیده تجارت

26 آذر 1396

شش نکته که بهتر است برای طراحی یک سایت وردپرس بدانید!! شش نکته که بهتر است برای طراحی یک سایت وردپرس بدانید!! مقالات طراحی وب سایت

پدیده تجارت

13 تیر 1398

صفر تا صد شروع کسب و کار آنلاین صفر تا صد شروع کسب و کار آنلاین مقالات برندینگ

پدیده تجارت

04 آبان 1398

چگونگی تاثیر شبکه های اجتماعی بر سئو سایت چگونگی تاثیر شبکه های اجتماعی بر سئو سایت مقالات طراحی وب سایت

پدیده تجارت

24 اسفند 1400

دیدگاه کاربران

0

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها