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

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

 

 

 

 

مقالات مرتبط

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

آموزش اندروید در شرکت پدیده آموزش اندروید در شرکت پدیده مقالات تجارت الکترونیک

پدیده تجارت

13 آبان 1396

REST API چیست ؟ REST API چیست ؟ مقالات طراحی وب سایت

پدیده تجارت

24 دی 1398

مزایای برنامه نویسی با php مزایای برنامه نویسی با php مقالات طراحی وب سایت

پدیده تجارت

19 تیر 1398

نکات مهم قبل از سفارش سایت ::حتما مطالعه کنید!!:: نکات مهم قبل از سفارش سایت ::حتما مطالعه کنید!!:: مقالات طراحی وب سایت

پدیده تجارت

15 مرداد 1392

بررسی تفاوت های بین کاتلین و جاوا بررسی تفاوت های بین کاتلین و جاوا مقالات طراحی وب سایت

پدیده تجارت

13 خرداد 1399

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

پدیده تجارت

28 شهریور 1396

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

پدیده تجارت

17 مرداد 1396

آموزش طراحی Seekbar در اندروید استودیو آموزش طراحی Seekbar در اندروید استودیو مقالات موبایل

پدیده تجارت

19 خرداد 1397

تبلیغات بنر ( بنر مارکتینگ) چیست ؟ تبلیغات بنر ( بنر مارکتینگ) چیست ؟ مقالات برندینگ

پدیده تجارت

19 فروردین 1399

مزایای طراحی سایت به زبان PHP مزایای طراحی سایت به زبان PHP مقالات

پدیده تجارت

17 بهمن 1396

وایرال مارکتینگ (بازاریابی ویروسی) چیست؟ وایرال مارکتینگ (بازاریابی ویروسی) چیست؟ مقالات تجارت الکترونیک

پدیده تجارت

20 فروردین 1399

رازهای موفقیت فروشگاه های اینترنتی رازهای موفقیت فروشگاه های اینترنتی مقالات تجارت الکترونیک

پدیده تجارت

25 دی 1397

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

0

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