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

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

آموزش مقدماتی 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 می باشد که کاربران عزیز میتوانند با مطالعه ان شروعی برای نوشتن یک برنامه به این زبان داشته باشند.

 

 

 

 

مقالات مرتبط

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

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

پدیده تجارت

04 تیر 1397

آموزش فتوشاپ در اصفهان آموزش فتوشاپ در اصفهان مقالات طراحی وب سایت

پدیده تجارت

17 مرداد 1396

طراحی سایت اصولی به چه معناست؟ طراحی سایت اصولی به چه معناست؟ مقالات طراحی وب سایت

پدیده تجارت

12 تیر 1398

چگونه می توانیم در اندروید استودیو TAB بسازیم؟ چگونه می توانیم در اندروید استودیو TAB بسازیم؟ مقالات موبایل

پدیده تجارت

08 اردیبهشت 1397

وظایف مدیر پروژه در طراحی سایت وظایف مدیر پروژه در طراحی سایت مقالات طراحی وب سایت

پدیده تجارت

14 مرداد 1393

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

پدیده تجارت

04 تیر 1396

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

پدیده تجارت

23 خرداد 1396

چگونه یک پروپزال طراحی سایت مناسب تهیه کنیم؟ چگونه یک پروپزال طراحی سایت مناسب تهیه کنیم؟ مقالات طراحی وب سایت

پدیده تجارت

12 شهریور 1396

طراحی سایت با کدام زبان برنامه نویسی بهتر است؟ طراحی سایت با کدام زبان برنامه نویسی بهتر است؟ مقالات طراحی وب سایت

پدیده تجارت

07 دی 1394

طراحی سایت خبری طراحی سایت خبری مقالات طراحی وب سایت

پدیده تجارت

12 مهر 1396

معرفی بهترین کتابخانه های اندروید معرفی بهترین کتابخانه های اندروید مقالات موبایل

پدیده تجارت

24 اسفند 1400

مزایای ویدیو مارکتینگ مزایای ویدیو مارکتینگ مقالات برندینگ

پدیده تجارت

19 آذر 1398

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

0

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