آموزش زبان HTML

473

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

برنامه نویسی به دوقسمت تقسیم میشود:

  1. برنامه نویسی سمت کلاینت که به آن frontend گفته میشود، زبانهایی که در frontend کاربرد دارد مانند HTML,CSS,…
  2. برنامه نویسی سمت سرور که به آن Backend گفته میشود ، زبانهایی که سمت Backend کاربرد دارد مانند php,asp.net,…
  • برای شروع آموزش نیاز به نرم افزار ویرایش متن داریم. نرم افزارهای ویرایش متن زیادی در اینترنت وجود دارند ولی پیشنهاد میشود از نرم افزار ویرایش متن  visual studio code  استفاده کنید. این editor  را می توان از اینترنت دانلود کرد . توجه داشته باشید سعی کنید همیشه آخرین ورژن نرم افزار را دانلود کنید.
  • زبان HTML زبان طراحی وب سایت است .

یادگیری زبان html بسیار ساده است و با کمی ممارست می توان آموخت. برای آموزش میتوان از سایتهای معتیر مانند w3school , beyamooz.com استفاده کرد که هردو بسیار ساده و شیوا توضیح داده اند و خودآزمایی دارند.

در اینجا توضیحات کوتاهی در مورد زبان html  و ساختار آن داده میشود:

  • زبان html  از دو تگ باز و بسته <html> , </html> تشکیل شده و درون آن دو تگ اصلی مجزا وجود دارد :
  1. تگ باز و بسته head  :      <head> , </head>

 در این تگ ، تگهای meta charset  ها  و تگ title قرار میگیرند که یکی از تگ های meta charset برای encoding برنامه هست  و تگ title برای نام گذاشتن بر روی صفحه وب سایت میباشد.

  1. تگ باز و بسته body :      <body> , </body>

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

 

  • ویرایش متن یا editor خود را باز کنید و قطعه کد زیر را درون آن بنویسید:

 

  • !DOCTYPE html>
    <html>
    <head>
    <title>Page Title</title>
    </head>
    <body>

    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>

    </body>
    </html>

 

این ساختار کلی زبان html  است ، کد را ذخیره کنید و در مرورگر خود اجرا بگیرید.

تگ های زیادی درون body  قرار میگیرند مانند :

  • h: این تگ برای عنوان مطالب متن کاربرد دارد که از  تگ  h1  تا تگ h6 وجود دارد و تگ h1 از همه بزرگتر عنوان را نشان میدهد و هر چه به تگ h6 نزدیکتر میشویم ریزتر میشود:

<h1< salam </h1>

<h2< salam </h2>

<h3< salam </h3>

<h4< salam </h4>

<h5< salam </h5>

<h6< salam </h6>

همه این تگ ها را درون  visual studio code  خود درون تگ body نوشته و اجرا بگیرید تا تفاوت آنها را دریابید.

هر متنی که قرار  هست درون صفحه وب سایت ما دیده شود بهتر است درون تگ P نوشته شود. بعضی از تگ ها فرد هستند یعنی تگ باز و بسته مجزا ندارند

مانند : <meta charset encoding: “ UTF-8” /> 

                             

اما بعضی از تگ ها باز و بسته مجزا دارند که به آنها تگ زوج گفته میشود و این مورد  باید رعایت شود مانند :

 <p>     salam …………en tag p ast.  </p>

          </h1>  این تگ h1 است برای عنوان مطالب <h1>    

 و مانند اینها که در آینده بیشتر با آنها آشنا میشوید.

**اگر بخواهیم به متن خود حالاتی دهیم از تگ های زوج زیر استفاده میکنیم :

  • <b> - متن مورد نظر را بصورت بولد شده نمایش میدهد
  • <strong> - این تگ از لحاظ معنایی متن را بولد میکند و برای موتورهای جستجو گر بسیار مهم است
  • <i> - این تگ متن مورد نظر را مورب میکند
  • <mark> - این تگ متن مورد نظر را مارکدار میکند
  • <small> - این تگ متن مورد نظر را کوچکتر میکند
  • <del> - این تگ روی  متن مورد نظریک خط میکشد
  •  sub> ----------- این تگ زیر متن مورد نظر یک عدد یا یک متن را قرار میدهد-------- H2O> 
  • sup> - این تگ بالای متن مورد نظر یک عدد یا یک متن را قرار میدهد-------- X2>

** اگر بخواهیم در وب سایت لینکی داشته باشیم از تگ <a/> استفاده میکنیم:

<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>

href

صفتی است که آدرس جایی که میخواهیم لینک شود نوشته میشود.

دو نوع آدرس دهی وجود دارد :

آدرس دهی مطلق یا گلوبال : آدرس دهی وبی است یعنی شما میخواهید از سایت خودتون به خارج از سایت خودتون  مثلا w3school لینک بدهید یعنی هیچ وجه اشتراکی بین سایت خودتون و سایت دیگه وجود ندارد بنابراین باید از سایت آدرس دهی مطلق وبی استفاده کنین که با http:// شروع میشود و آدرس را باید کامل تایپ کنید:

<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>

آدرس دهی محلی یا لوکال:آدرس دهی است که مثلا بخواهید از صفحه از وب  سایت خود به مجموعه ای از صفحات وبی خود لینک دهید.

 

** اگر بخواهیم تصویری در وب سایت درج کنیم از تگ imge استفاده میکنیم:

 

<img src="img_girl.jpg" alt="Girl in a jacket">

Src:

آدرس عکسی است که در آن مسیر ذخیره شده را میدهیم. :

** اگر بخواهیم جدولی در وب سایت درج کنیم از تگ table استفاده میکنیم:

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

 

tr : این تگ سطر جدول را مشخص میکنند.

td: داده های درون سلول را مشخص میکنند.

style: صفتی است که از طریق آن می توان به جدول خود دیزاین داد : مثلا طول و عرض داد یا رنگ و ... 

حسینی معصوم- کارشناس فاوا

 

 




فاقد نظر