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

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

 

 

 

 

مقالات مرتبط

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

تفاوت استارتاپ ها با کسب‌ و‌کارهای سنتی تفاوت استارتاپ ها با کسب‌ و‌کارهای سنتی مقالات تجارت الکترونیک

پدیده تجارت

21 فروردین 1401

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

پدیده تجارت

20 فروردین 1401

معرفی سیستم عامل CentOS معرفی سیستم عامل CentOS طراحی وب سایت

پدیده تجارت

25 آذر 1398

طراحی سایت با انگولار(angular js) طراحی سایت با انگولار(angular js) مقالات طراحی وب سایت

پدیده تجارت

06 خرداد 1399

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

پدیده تجارت

19 فروردین 1394

وردپرس چیست ؟ وردپرس چیست ؟ مقالات تجارت الکترونیک

پدیده تجارت

16 فروردین 1401

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

پدیده تجارت

23 فروردین 1399

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

پدیده تجارت

16 تیر 1397

شش گام موثر در استراتژی تولید محتوا شش گام موثر در استراتژی تولید محتوا مقالات سئو

پدیده تجارت

21 خرداد 1398

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

پدیده تجارت

14 فروردین 1401

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

پدیده تجارت

28 اردیبهشت 1399

اسکیما-چیست-و-چه-کاربردی-دارد؟ اسکیما-چیست-و-چه-کاربردی-دارد؟ مقالات سئو

پدیده تجارت

24 اسفند 1400

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

0

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