درخواست های ارتباط
جستجو تنظیمات
لیست دوستان من
صندوق پیام
همه را دیدم تنظیمات
  • در حال دریافت لیست پیام ها
صندوق پیام
  • در حال دریافت لیست رویدادها
همه رویدادهای من

برنامه نویسی تحت وب بخش اول معرفی html

0 نظرات

به نام خدا


برنامه نویسی تحت وب بخش اول معرفی html


عبارت HTML مخفف (Hyper Text Markup Language) است . Html زبان استاندارد برنامه نویسی و طراحی صفحات وب است و کليه کدهای صفحه اعم از طرف سرور و کلاینت در نهايت به کدهای HTML تبديل شده و توسط مرورگر نمايش داده می شوند.HTML یک زبان نشانه گذاری است ، به اين معنی که بخش های مختلف توسط اجزايی به نام تگ از هم جدا شده ، که هر کدام دارای کاربرد و خواص مربوط خود هستند . اين تگ ها به مرورگر اعلام می کنند که هر بخش از صفحه چه نوع عنصری است و بايد به چه صورت نمايش داده شود .در يک صحفه HTML می توان انواع عناصر از قبيل متن ، تيتر ، عکس ، جدول و ... را قرار داد ، که برای هر عنصر بايد از تگ مربوط به آن استفاده کرد . صفحات HTML فقط از تگ ها تشکيل شده است .

نسخه های html


  • HTML 1991
  • HTML 2.0 1995
  • HTML 3.2 1997
  • HTML 4.01 1999
  • XHTML 2000
  • HTML5 2014

نحوه مشخص نمودن نسخه HTML در بالای صفحه :

HTML5
<!DOCTYPE html>

HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


مفهوم تگ Tag


تگ های HTML برای نشانه گذاری محتويات صفحات به کار می روند و باعث می شوند که مرورگر بتواند تشخيص دهد هر بخش چه نوع عنصری است. هر تگ HTML ، يک بخش ابتدايی و يک بخش انتهايی دارد که هم نام بوده و به صورت استاندارد طبق شکل کلی زير به کار می روند.
برای مثال :
<text>   محتویات تگ  </text>

به تگ ها عنصر و یا element نیز گفته می شود.

برخی از عناصر پرکاربرد :

تگ های
<h6></h6> , <h5></h5> , <h4></h4> , <h3></h3> , <h2></h2> , <h1></h1> 

این تگ ها برای نمایش دادن تیتر به کار می روند که از سایز تیتر به ترتیب از یک تا شش کوچکتر می شود یعنی تگ h1 بزرگترین سایز را دارد.
تگ <p>  </p>

از این تگ برای ایجاد پاراگراف استفاده میشود در انتهای متن این تگ باید بسته شود.
تگ <a> </a>

از این تگ برای نمایش لینک ها استفاده می شود. این دو ویژگی (Attribute ) مهم دارد (Attribute توضیح داده خواهد شد) که مشخص کننده آدرس لینک و نوع باز شدن لینک می باشد. برای مثال تگ زیر آدرس tosinso.com رو در یک پنجره جدید باز خواهد کرد :

<a href="http://tosinso.com" target="_new" > IT PRO </a>

تگ <img>

این تگ برای نمایش تصاویر به کار می رود که ویژگی مهم این عنصر src می باشد که آدرس تصویر را مشخص می کند.

تگ <br>

این عنصر یه سطر جدید ایجاد می کند.

تگ <center></center>

این تگ چینش متون محتویاتش را وسط چین می کند.

تگ <ul></ul>

این تگ برای نمایش لیستی ایتم ها به کار می رود

برای مثال :

<h2> List of Available Sports </h2>
<p>
this is a paragraph which is showing a small list of sports
</p>
<ul>
 <li>Volleyball</li>
 <li>Football</li>
 <li>Basketball</li>
 <li>Chess</li>
</ul>

مشاهده خروجی کد بالا

تگ <ol></ol>
این تگ برای نمایش لیستی از آیتم ها به کار می رود و تفاوتی که با تگ قبلی دارد در این است که برای آیتم ها شماره هم نشان می دهد.


<h1> List of Available Sports </h1>
<p>
this is a paragraph which is showing a small list of sports
</p>

<ol>
 <li>Volleyball</li>
 <li>Football</li>
 <li>Basketball</li>
 <li>Chess</li>
</ol>

مشاهده خروجی کد بالا

تگ table

این تگ همونطور که از اسمش مشخصه برای ایجاد جدول به کار میره.
که دارای دو قسمت head و body هست.
مثال :

<h4>List of people </h4>
<table style="width:100%;" border="5">

 <thead>
   <td>ID</td>
   <td>Name</td>
 </thead>

 <tbody>
   <tr>
      <td>3</td>
      <td>REZA</td>
   </tr>

  <tr>
      <td>4</td>
      <td>HASAN</td>
   </tr>

  <tr>
      <td>5</td>
      <td>ALI</td>
   </tr>
  <tr>
      <td>6</td>
      <td>AKBAR</td>
   </tr>
 </tbody>

</table>

مشاهده خروجی کد بالا

تگ input

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

text برای ورود متن
button برای ایجاد دکمه
checkbox برای گذاشتن تیک
submit برای ارسال فرم (تگ فرم توضیح داده خواهد شد.)

برای مثال :

<input type="text" >
<input type="button" value="click me">
<input type="checkbox" >
<input type="submit" value="click me">

تگ form

این تگ برای ارسال اطلاعات به کار می رود ، به طوری که با استفاده از یکی از متد های ... , POST , GET , PUT تمامی محتویاتی که داخل تگ از جمله input ها هست رو رو به یک آدرسی ارسال می کنه

الا یه مثال از یه فرم رو میزنیم که با متد POST اطلاعات رو به آدرسی ارسال می کنه و محتویات فرم هم شامل سه تا فیلد ورودی هست که به ترتیب نام ، موضوع و متن پیغام رو میگیره و با زدن دکمه Send ارسال می کنه
توی اون صفحه که اطلاعات فرم به اون ارسال میشه به زبان php کدی رو نوشتیم که اطلاعاتی رو که بر اساس متد پست ارسال میشه رو بگیره
به بیان دقیق تر ما تو کد پایین سه تا فیلد ورودی داریم با نام های name , subject , message که تو کد های php ما ما مقادیر اون ها رو به ترتیب با متغییر های

$_POST['name']
$_POST['subject']
$_POST['message ']


دریافت بکنیم

<h3>Contact Us Form</h3>

<form action="http://farhad-m.ir/post.php" method="post" >
    <p>Your Name : </p>
    <input name="name" type="text" />
    <p>Subject : </p>
    <input name="subject" type="text" />
    <p>Message : </p>
    <textarea name="message" ></textarea>
    <br/>
    <input type="submit" value="Send !" />
    <input type="reset" value="clear " />
</form>

مشاهده خروجی کد بالا

تگ <style></style>

با استفاده از این تگ می تونیم کد های css رو در داخل صفحات html استفاده کنیم.

تگ <script></script>

با استفاده از این تگ می تونیم کد های javascript رو در داخل صفحات html استفاده کنیم.

خواص تگ یا Attribute

Attribute(به فارسی خاصیت ، مشخصه، ویژگی) ها اطلاعات بیشتری درمورد المنتها میدن و اونها رو شخصی سازی میکنن. مثلا میتونن مشخص کنن که یک المنت، راست چین ، وسط چین و یا چپ چین باشه. تمام تگهای HTML میتونن Attribute داشته باشن. المنتهای HTML میتوانند مشخصه داشته باشند. مشخصه ها اطلاعات بیشتری در مورد یک المنت ارائه میدهند و همچنین مشخصه ها همیشه باید در تگ شروع تعریف شوند. مشخصه ها بصورت نام مشخصه=”مقدار” می آیند.

برای مثال :

<text id="title" > محتویات عنصر </text>

در مثال بالا ویزگی اینکه id تگ ما title باشه رو اضافه کردیم.


خاصیت ID کاربردش در این هست که یک شناسه به عنصر وارد می کنه سپس از طریق اون شناسه میشه به محتوای اون عنصر دسترسی داشت

خاصیت class یکی دیگه از خاصیت های مهم به شمار میره که به وسیله اون میتونیم صفتی رو که در css تعریف کردیم رو به یک عنصر اختصاص بدیم
برای مثال در کد زیر ما یک صفتی رو تعریف کردیم به نام head_dark و این صفت رو به عنصر مون که تگ <h1> هست اختصاص دادیم

<style>
.head_dark
{
 background:rgba(0,0,0,0.5);
 color:white;
 padding:20px;
 border-bottom:3px dashed gray;
}
</style>

<h1 class="head_dark"> Here we have Our Title </h1>
<h1>without class !</h1>

مشاهده خروجی لینک بالا

اگر خروجی کد بالا رو اجرا کنید دو تا تگ <h1> داریم اولی براش خاصیت class تعریف شده و اون صفت رو به خودش میگیره و دومی بدون خاصیت class هست.


نویسنده : فرهاد مهریاری
منبع : انجمن تخصصی فناوری اطلاعات ایران
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد.
برچسب ها
ردیف عنوان قیمت
1 برنامه نویسی تحت وب بخش اول - مقدمه و مفاهیم رایگان
2 برنامه نویسی تحت وب بخش اول معرفی html رایگان
3 برنامه نویسی تحت وب بخش اول معرفی Javascript رایگان
4 امنیت وب رایگان
مطالب مرتبط
نظرات
هیچ نظری ارسال نشده است

    برای ارسال نظر ابتدا به سایت وارد شوید

    arrow