آموزش برنامه نویسی



این متن دومین مطلب آزمایشی من است که به زودی آن را حذف خواهم کرد.

زکات علم، نشر آن است. هر

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

همچنین

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

بلاگ انجام می دهند افزوده می شود.


این متن اولین مطلب آزمایشی من است که به زودی آن را حذف خواهم کرد.

مرد خردمند هنر پیشه را، عمر دو بایست در این روزگار، تا به یکی تجربه اندوختن، با دگری تجربه بردن به کار!

اگر همه ما تجربیات مفید خود را در اختیار دیگران قرار دهیم همه خواهند توانست با انتخاب ها و تصمیم های درست تر، استفاده بهتری از وقت و عمر خود داشته باشند.

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


برچسب های عنوان

هر مدرکی با عنوان شروع می شود. می توانید برای عناوین خود از اندازه های مختلف استفاده کنید. HTML همچنین دارای شش سطح عنوان است که از عناصر <h1> ، <h2> ، <h3> ، <h4> ، <h5> و <h6> استفاده می کند . هنگام نمایش هر عنوان ، مرورگر یک خط قبل و یک خط بعد از آن عنوان اضافه می کند.

مثال

نسخه ی نمایشی زنده
<!DOCTYPE html>
<html>

   <head>
      <title>Heading Example</title>
   </head>
	
   <body>
      <h1>This is heading 1</h1>
      <h2>This is heading 2</h2>
      <h3>This is heading 3</h3>
      <h4>This is heading 4</h4>
      <h5>This is heading 5</h5>
      <h6>This is heading 6</h6>
   </body>
	
</html>

 

این نتیجه زیر را حاصل می کند -

 

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5
This is heading 6

 

برچسب پاراگراف

<p> در تگ ارائه می دهد یک راه برای ساختار متن خود را به پاراگراف متفاوت است. هر پاراگراف متن باید بین یک نشانگر <p> و یک بسته </ p> باشد که در زیر در مثال نشان داده شده است -

مثال

نسخه ی نمایشی زنده
<!DOCTYPE html>
<html>

   <head>
      <title>Paragraph Example</title>
   </head>
	
   <body>
      <p>Here is a first paragraph of text.</p>
      <p>Here is a second paragraph of text.</p>
      <p>Here is a third paragraph of text.</p>
   </body>
	
</html>

این نتیجه زیر را حاصل می کند -

 

Here is a first paragraph of text.

Here is a second paragraph of text.

Here is a third paragraph of text.

 

برچسب خط شکست

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

برچسب <br /> بین شخصیت های br و slash رو به جلو فاصله ای دارد. اگر این فضا را از دست ندهید ، مرورگرهای قدیمی تر در ارائه خط شکسته مشکل دارند ، در حالی که اگر شخصیت slash رو به جلو بکشید و فقط از آن استفاده کنید - در XHTML معتبر نیست.

مثال

نسخه ی نمایشی زنده
<!DOCTYPE html>
<html>

   <head>
      <title>Line Break  Example</title>
   </head>
	
   <body>
      <p>Hello<br />
         You delivered your assignment ontime.<br />
         Thanks<br />
         Mahnaz</p>
   </body>
	
</html>

این نتیجه زیر را حاصل می کند -

Hello
You delivered your assignment on time.
Thanks
Mahnaz

محتوا محور

برای قرار دادن هر محتوا در مرکز صفحه یا هر سلول جدول می توانید از تگ <center> استفاده کنید .

مثال

 
<!DOCTYPE html>
<html>

   <head>
      <title>Centring Content Example</title>
   </head>
	
   <body>
      <p>This text is not in the center.</p>
      
      <center>
         <p>This text is in the center.</p>
      </center>
   </body>
	
</html>

این نتیجه زیر را حاصل می کند -

This text is not in the center.

This text is in the center.

 

خطوط افقی

خطوط افقی برای بصری بخش های تجزیه یک سند استفاده می شود. <HR> برچسب یک خط از موقعیت فعلی در سند به حاشیه سمت راست ایجاد و پرش به خط درآمده است.

به عنوان مثال ، ممکن است بخواهید مانند دو مثال زیر خطی بین دو پاراگراف بگذارید -

مثال

نسخه ی نمایشی زنده
<!DOCTYPE html>
<html>

   <head>
      <title>Horizontal Line Example</title>
   </head>
	
   <body>
      <p>This is paragraph one and should be on top</p>
      <hr />
      <p>This is paragraph two and should be at bottom</p>
   </body>
	
</html>

این نتیجه زیر را حاصل می کند -

This is paragraph one and should be on top


This is paragraph two and should be at bottom

 

باز هم تگ <hr /> نمونه ای از عنصر خالی است ، در جایی که شما نیازی به برچسب های باز و بسته شدن ندارید ، زیرا هیچ چیز برای جابجایی بین آنها وجود ندارد.

<HR /> عنصر دارای یک فضای بین شخصیت ساعت و اسلش. در صورت عدم استفاده از این فضا ، مرورگرهای قدیمی تر در ارائه خط افقی مشکل دارند ، در حالی که اگر شخصیت slash رو به جلو از دست بدهید و فقط از <hr> استفاده کنید ، در XHTML معتبر نیست

قالب بندی را حفظ کنید

بعضی اوقات ، شما می خواهید متن شما از نحوه ی نگارش در سند HTML پیروی کند. در این موارد می توانید از تگ از پیش فرمت شده <pre> استفاده کنید .

هر متنی بین برچسب <pre> افتتاح و بسته شدن </pre> ، قالب بندی سند منبع را حفظ می کند.

مثال

 

نسخه ی نمایشی زنده
<!DOCTYPE html>
<html>

   <head>
      <title>Preserve Formatting Example</title>
   </head>
	
   <body>
      <pre>
         function testFunction( strText ){
            alert (strText)
         }
      </pre>
   </body>
	
</html>

این نتیجه زیر را حاصل می کند

 

function testFunction( strText ){ 
   alert (strText) 
} 
 

سعی کنید با استفاده از کد مشابه بدون نگه داشتن آن را در داخل <PRE> . </ PRE> برچسب ها

فضاهای بدون شکست

فرض کنید می خواهید از عبارت "12 مرد عصبانی" استفاده کنید. در اینجا ، شما نمی خواهید یک مرورگر بین دو خط "12 ، عصبانی" و "مردان" را بین دو خط تقسیم کند -

An example of this technique appears in the movie "12 Angry Men."

در مواردی که نمی خواهید مرورگر مشتری متن را بشکند ، باید از یک فضای فاقد شکاف استفاده کنید و nbsp؛ به جای یک فضای عادی. به عنوان مثال ، هنگام رمزگذاری "12 مرد عصبانی" در یک پاراگراف ، باید از چیزی مشابه کد زیر استفاده کنید -

مثال

نسخه ی نمایشی زنده
<!DOCTYPE html>
<html>

   <head>
      <title>Nonbreaking Spaces Example</title>
   </head>
	
   <body>
      <p>An example of this technique appears in the movie "12&nbsp;Angry&nbsp;Men."</p>
   </body>
	
</html>

این نتیجه زیر را حاصل می کند -

An example of this technique appears in the movie "12 Angry Men."


HTML مخفف H yper t ext M arkup L anguage است و بیشترین زبان برای نوشتن صفحات وب است.

Hypertext به روشی که صفحات وب (اسناد HTML) به هم پیوند دارند ، اشاره دارد. بنابراین ، پیوند موجود در یک صفحه وب Hypertext نامیده می شود.

همانطور که از نام آن پیداست ، HTML یک زبان نشانه گذاری است به این معنی که شما از HTML استفاده می کنید تا به سادگی "نشانه گذاری" یک سند متنی را با برچسب هایی انجام دهید که به یک مرورگر وب می گوید چگونه آن را برای نمایش بسازد.

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

اکنون از HTML برای شکل دادن به صفحات وب به کمک برچسبهای مختلف موجود در زبان HTML استفاده می شود.

سند اساسی HTML

در ساده ترین شکل ، مثال زیر از یک سند HTML -

 

نسخه ی نمایشی زنده
<!DOCTYPE html>
<html>

   <head>
      <title>This is document title</title>
   </head>
	
   <body>
      <h1>This is a heading</h1>
      <p>Document content goes here.</p>
   </body>
	
</html>

برچسب های HTML

همانطور که قبلاً گفته شد ، HTML یک زبان نشانه گذاری است و از قالب های مختلفی برای قالب بندی محتوا استفاده می کند. این برچسب ها در بندهای زاویه ای <نام برچسب> محصور می شوند به غیر از برچسب های معدود ، اکثر برچسب ها دارای برچسب های بسته شدن مربوط به خود هستند. به عنوان مثال ، <html> دارای برچسب بسته شدن است </html> و برچسب <body> دارای برچسب بسته شدن آن است </ i> و غیره.

در مثال بالا از سند HTML از برچسب های زیر استفاده می کند -

Sr.No برچسب و توضیحات
1 <! DOCTYPE .>

این برچسب نوع سند و نسخه HTML را مشخص می کند.

2 <html>

این برچسب کامل HTML کامل را در بر می گیرد و عمدتاً از سربرگ اسناد تشکیل می شود که با نشانگرهای <head> . </head> و بدن اسناد نمایش داده می شود که توسط برچسب های <body> . </body> نشان داده می شود.

3 <head>

این برچسب عنوان عنوان را نشان می دهد که می تواند برچسب های HTML دیگر مانند <title> ، <link> و غیره را حفظ کند.

4 <title>

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

5 <body>

این برچسب نمایه بدن است که سایر برچسبهای HTML مانند <h1> ، <div> ، <p> و غیره را در خود نگه می دارد.

6 <h1>

این برچسب عنوان را نشان می دهد.

7 <p>

این برچسب یک پاراگراف را نشان می دهد.

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

کنسرسیوم وب جهانی (W3C) توصیه می کند از برچسب های کوچک استفاده کنید که از HTML 4 شروع می شود.

ساختار اسناد HTML

یک سند HTML معمولی ساختار زیر را دارد -

<html>
   
   <head>
      Document header related tags
   </head>
   
   <body>
      Document body related tags
   </body>
   
</html>
 

همه برچسب های مربوط به عنوان و بدنه را در فصل های بعدی مطالعه خواهیم کرد ، اما اکنون می دانیم برچسب اعلام اسناد چیست.

اعلامیه <! DOCTYPE>

برچسب اعلام <! DOCTYPE> توسط مرورگر وب برای درک نسخه HTML استفاده شده در سند استفاده می شود. نسخه فعلی HTML 5 است و از بیانیه زیر استفاده می کند -

<!DOCTYPE html>

 

 
بسیاری از انواع اعلامیه دیگر بسته به نوع نسخه HTML مورد استفاده ، می توانند در سند HTML مورد استفاده قرار گیرند. ما در مورد برچسب <! DOCTYPE .> به همراه سایر برچسب های HTML ، جزئیات بیشتری را در این مورد مشاهده خواهیم کرد.

HTML مخفف Hyper Text Markup Language است که پرکاربردترین زبان در وب برای توسعه صفحات وب است. HTML توسط Berners-Lee در اواخر سال 1991 ایجاد شد اما "HTML 2.0" اولین مشخصات استاندارد HTML است که در 1995 منتشر شد. HTML 4.01 نسخه اصلی HTML است و در اواخر سال 1999 منتشر شد. گرچه از نسخه HTML 4.01 به طور گسترده استفاده می شود. اما در حال حاضر ما نسخه HTML-5 را داریم که افزونه ای به HTML 4.01 است و این نسخه در سال 2012 منتشر شد.

چرا HTML را یاد بگیریم؟

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

HTML برای دانشجویان و متخصصان شاغل باید یک مهندس نرم افزاری عالی باشد که به خصوص هنگام کار در دامنه توسعه وب ، تبدیل به یک مهندس نرم افزار عالی شود. من برخی از مزایای اصلی یادگیری HTML را ذکر می کنم:

  • ایجاد وب سایت - اگر HTML را به خوبی می شناسید می توانید یک وب سایت ایجاد کنید یا یک الگوی وب موجود را سفارشی سازی کنید.

  • یک طراح وب شوید - اگر می خواهید یک حرفه ای را به عنوان یک طراح وب حرفه ای شروع کنید ، طراحی HTML و CSS یک مهارت ضروری است.

  • درک وب - اگر می خواهید وب سایت خود را بهینه کرده و سرعت و کارایی آن را افزایش دهید ، خوب است که HTML را بدانید تا بهترین نتیجه را کسب کند.

  • زبانهای دیگر را بیاموزید - وقتی پایه HTML را می فهمید ، دیگر فن آوری های مرتبط مانند جاوا اسکریپت ، PHP یا زاویه ای فهم آسان تر می شوند.

سلام جهان با استفاده از HTML.

فقط برای اینکه کمی در مورد HTML به شما هیجان زده شوم ، می خواهم یک برنامه کوچک متداول HTML سلام جهانی را به شما ارائه دهم ، می توانید آن را با استفاده از لینک Demo امتحان کنید.

 

نسخه ی نمایشی زنده
<!DOCTYPE html>
<html>
   <head>
      <title>This is document title</title>
   </head>	
   <body>
      <h1>This is a heading</h1>
      <p>Hello World!</p>
   </body>	
</html>

برنامه های HTML

همانطور که قبلاً ذکر شد HTML یکی از پرکاربردترین زبان در وب است. من در اینجا قصد دارم تعداد کمی از آنها را لیست کنم:

  • توسعه صفحات وب - HTML برای ایجاد صفحاتی که از طریق وب ارائه می شوند ، استفاده می شود. تقریباً در هر صفحه وب از برچسب های html در آن استفاده شده است تا جزئیات آن در مرورگر ارائه شود.

  • ناوبری اینترنت - HTML برچسب هایی را ارائه می دهد که برای حرکت از یک صفحه به صفحه دیگر استفاده می شود و به شدت در پیمایش اینترنت مورد استفاده قرار می گیرد.

  • پاسخگوی رابط کاربر (UI پاسخگو) - صفحات HTML امروزه به خوبی به دلیل استراتژی طراحی پاسخگو ، بر روی همه پلتفرم ، موبایل ، تب ، رومیزی یا لپ تاپ کار می کند.

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

  • توسعه بازی - HTML5 از پشتیبانی بومی برای تجربه غنی برخوردار است و هم اکنون در عرصه توسعه بازی نیز مفید است.

حضار

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

پیش نیازها

قبل از شروع این آموزش باید دانش بنیادی را با سیستم عامل Windows یا Linux داشته باشید ، علاوه بر این باید با آن آشنا باشید -

  • با هر ویرایشگر متن مانند دفترچه یادداشت ، دفترچه یادداشت ++ یا ویرایش به علاوه و غیره تجربه کنید.
  • نحوه ایجاد دایرکتوری ها و فایل ها بر روی رایانه خود.
  • نحوه حرکت از طریق فهرستهای مختلف.
  • نحوه نوشتن محتوا در یک فایل و ذخیره آنها در رایانه.
  • درک در مورد تصاویر در قالب های مختلف مانند JPEG ، فرمت PNG.

 


آخرین ارسال ها

آخرین جستجو ها