کلاس طراحی وب آنلاین

آموزش برنامه نویسی PHP و طراحی وب – قسمت هشتم

آموزش برنامه نویسی PHP و طراحی وب – قسمت هشتمReviewed by محمد مخلوقی on Jul 14Rating:

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

تگ span

تگ span برای متن های کوتاه استفاده می شود. ولی ترجیحا از این تگ بهتر است استفاده نشود.

زمانیکه شما از تگ span استفاده میکنید ، میتوانید از ویژگی های CSS یا Javascript برای این تگ استفاده کنید. تگ span ، در واقع همان کنترل Label در asp.net می باشد.

این تگ به صورت کلی زیر به کار می رود :


   <p>My mother has <span style="color:blue">blue</span> eyes.</p>

Global Attributes in HTML

در استفاده از این تگ شما میتوانید از ویژگی های عمومی (Global Attributes) استفاده کنید.

Event Attributes

همچنین میوانید از رویدادهای (Event Attributes) استفاده کنید.

 

تگ div

تگ div از پر کاربردترین تگ ها در طراحی وب سایت می باشد، این تگ جایگزین بسیار خوبی برای تگ <table> می باشد. تگ table دارای تگ های اضافه زیادی از جمله تگ <td> و تگ <tr> می باشد.

نکته: استفاده از تگ table در طراحی سایت پیشنهاد نمی شود و بهتر است از چینش موزائیکی در طراحی سایت به وسیله ی تگ div ، استفاده شود.

کاربردهای تگ div

شما میتوانید یک سند HTML را به بخش یا بخشهای مختلفی تقسیم بندی کنید.

مانیکه میخواهید به گروهی از تگ ها یک style در css اضافه کنید میتوانید تمام این تگ ها را در داخل تگ <div> قرار دهید ، سپس به آن تگ <div> ، استایل مورد نظر خود را اعمال کنید با این روش تمام تگ هایی که در داخل تگ <div> میباشند از این استایل ارث میبرند.

در مثال زیر تگ <h3> و تگ <p> ، استایل تگ <div> را ارث میبرند.


   <div style="color:#0000FF">

   <h3>This is a heading</h3>

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

   </div>

 

تگ <map>

از تگ map برای تعریف یک image-map سمت سرویس گیرنده (client-side) استفاده مکنند. تمام تصاویر مناطق این نقشه قابل کلیک است.


   <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

   <map name="planetmap">

   <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">

   <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">

   <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">

   </map>

 

تگ <map> شامل چندین تگ area می باشد که نقاط قابل کلیک بر روی نقشه را مشخص می کند.

تگ map همچنین ویژگی های عمومی در HTML را پشتیبانی می کند. این تگ همچنین ویژگی های رویدادها در HTML را نیز پشتیبانی می کند.

 

تگ <ul>

یکی دیگر از مهمترین تگهای اچ تی ام ال در طراحی قالب سایت ، تگ ul و ترکیب آن با تگ li می باشد.

از تگ ul و ترکیب آن با تگ li برای ایجاد لیست های مرتب و نا مرتب استفاده می شود.

از css برای فرمت دادن به تگ <ul> و تگ <li> میتوانید استفاده کنید. در بخش تنظیم لیست ها در این مورد کاملا توضیح داده ایم.


   <ul>

   <li>Coffee</li>

   <li>Tea</li>

   <li>Milk</li>

   </ul>

تگ <ul> همچنین ویژگی های عمومی در HTML را پشتیبانی می کند.این تگ ویژگی های رویدادها در HTML را نیز پشتیبانی می کند.

 

تگ <table>

تگ table برای تقسیم بندی متن به چند بخش و جدول بندی سایت استفاده می شود.

این تگ مانند تگ div برای قالب سایت ، استفاده می شود ، ولی به دلیل حجیم بودن تگ های مورد استفاده در تگ table و تگ td و تگ tr، و نیز انعطاف پذیری کم آن پیشنهاد می شود که از تگ div استفاده کنید.


   <table border="1">

   <tr>

   <th>Month</th>

   <th>Savings</th>

   </tr>

   <tr>

   <td>January</td>

   <td>$100</td>

   </tr>

   </table>

تگ table همچنین ویژگی های عمومی در HTML را پشتیبانی می کند. این تگ ویژگی های رویدادها در HTML را نیز پشتیبانی می کند.

 

تگ object

از تگ object برای استفاده از چندرسانه ای ها مانند : audio, video, Java applets ActiveX, PDF, Flash در صفحات وب سایت استفاده می کنند.

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

تگ object بایستی درون تگ body قرار بگیرد. متنی که بین تگ < object >< /object > قرار میگیرد در بیشتر مرورگرها نمایش داده نمی شود.این تگ بایستی حداقل شامل یکی از ویژگی های data یا type باشد.


   <object width="400" height="400" data="pars-soft.swf"></object>

 

تگ param

از تگ param برای تعریف پارامتر برای پلاگین ها استفاده می شود.


   <object data="horse.wav">

   <param name="autoplay" value="true">

   </object>

 

تگ < object > و تگ <param > همچنین ویژگی های عمومی در HTML را پشتیبانی می کند. این تگ ویژگی های رویدادها در HTML را نیز پشتیبانی می کند.

 

تگ frame

تگ < frame> در HTML5 پشتیبانی نمی شود. برای هر تگ frame در تگ frameset میتوان ویژگی های مختلفی را تعریف کرد.

تگ <frame> در HTML4 ویژگیهای استاندارد زیر را پشتیبانی می کند.


   class

   id

   style

   title



   <frameset cols="25%,50%,25%">

   <frame src="frame_a.htm">

   <frame src="frame_b.htm">

   <frame src="frame_c.htm">

   </frameset>

 

تگ frameset

تگ <frameset> یک قاب تعریف می کند. تگ <frameset> در HTML5 پشتیبانی نمی شود.

 

تگ iframe

با تگ<iframe> میتوان فریم های درون خطی ایجاد کرد. تگ iframe هنوز در html 5 پشتیبانی میگردد.


   <iframe src="http://www.pars-soft.ir"></iframe>

 

Forms

یک فرم HTML میتواند شامل چندین تگ input با انواع مختلف زیر باشد :


   text fields

   checkboxes

   radio-buttons

   submit buttons

   و ...

یک فرم همچنین می تواند شامل عناصر زیر باشد.



   select lists

   textarea

   fieldset

   legend

     label

   و ...



از تگ form برای ایجاد یک فرم HTML استفاده می شود.

1

   <form>

   .

   input elements

   .

   </form>

 

Input

مهمترین تگ موجو در تگ <form> ، تگ input می باشد. از این تگ برای انتخاب اطلاعات کاربران استفاده می شود. تگ <input> با توجه به ویژگی type میتواند به روشهای مختلف مورد استفاده قرار گیرد.انواع مختلفی که تگ <input> میتواند بگیرد شامل مقادیر زیر است.

 

text field

checkbox

password

radio button

submit button

و …

 

Text Fields

بیشترین و رایج ترین نوع مورد استفاده “type=”text می باشد.

<input type=”text”> یک فیلد یک خطی ، که کاربر میتواند داخل آن اطلاعات وارد کند را تعریف می کند.


   <form>

   First name: <input type="text" name="firstname"><br>

   Last name: <input type="text" name="lastname">

   </form>

 

Password Field

<input type=”password”> یک فیلد مانند فیلدهای پسورد تعریف می کند.مقادیری که در این فیلد نمایش داده می شوند به صورت ستاره یا دایره نشان داده می شوند.


   <form>

   Password: <input type="password" name="pwd">

   </form>

 

Radio Buttons

<input type=”radio”> برای کاربران مشخص می کند که تنها یک گزینه را میتوانند انتخاب کنند.


   <form>

   <input type="radio" name="sex" value="male">Male<br>

   <input type="radio" name="sex" value="female">Female

   </form>

 

Checkboxes

<input type=”checkbox”> برای کاربران مشخص می کند که صفر یا گزینه های دیگری را انتخاب کنند.


   <form>

   <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>

   <input type="checkbox" name="vehicle" value="Car">I have a car

   </form>

 

Submit Button

<input type=”submit”> برای فرستادن اطلاعات فرم به سرور به کار می رود.


   <form name="input" action="html_form_action.asp" method="get">

   Username: <input type="text" name="user">

   <input type="submit" value="Submit">

   </form>

 

تگ <label>

تگ label برای تعریف یک برچسب به کار می رود.

   < input > element


   <form action="demo_form.asp">

   <label for="male">Male</label>

   <input type="radio" name="sex" id="male" value="male"><br>

   <label for="female">Female</label>

   <input type="radio" name="sex" id="female" value="female"><br>

   <input type="submit" value="Submit">

   </form>

 

تگ label همچنین ویژگی های عمومی در HTML را پشتیبانی می کند. این تگ ویژگی های رویدادها در HTML را نیز پشتیبانی می کند.

 

تگ <button >

تگ button یک دکمه که قابل کلیک کردن باشد تعریف می کند. برای نمایش دادن یک دکمه شما میتوانید از متن یا عکس استفاده کنید. بین دکمه ای که با <input> ایجاد می شود و این دکمه تفاوتهایی وجود دارد.


   <button type="button">Click Me!</button>

تگ button همچنین ویژگی های عمومی در HTML را پشتیبانی می کند. این تگ ویژگی های رویدادها در HTML را نیز پشتیبانی می کند.

 

تگ< textarea>

تگ<textarea> یک فیلد input چند خطی ایجاد می کند. تگ textarea میتواند ،اعداد و کراکتر و متون نامحدودی را در برگیرد.


   <textarea rows="1" cols="10">

   At pars-soft.ir you will learn how to make a website.

   </textarea>

 

تگ textarea همچنین ویژگی های عمومی در HTML را پشتیبانی می کند.این تگ ویژگی های رویدادها در HTML را نیز پشتیبانی می کند.

 

تگ < select >

از تگ select برای ایجاد یک لیست drop-down میتوان استفاده کرد. با تگ option موجود در تگ select گزینه های مختلفی را برای لیست خود میتوانید استفاده کنید.


   <select>



   <option value="volvo">Volvo</option>

   <option value="saab">Saab</option>

   <option value="mercedes">Mercedes</option>

   <option value="audi">Audi</option>

   </select>

 

تگ select همچنین ویژگی های عمومی در HTML را پشتیبانی می کند.این تگ ویژگی های رویدادها در HTML را نیز پشتیبانی می کند.

 

تگ < option>

تگ option برای ایجاد یک گزینه در لیست بکار می رود. تگ option داخل تگ های select یا datalist استفاده می شود.


   <select>

   <option value="volvo">Volvo</option>

   <option value="saab">Saab</option>

   <option value="opel">Opel</option>

   <option value="audi">Audi</option>

   </select>

 

تگ option همچنین ویژگی های عمومی در HTML را پشتیبانی می کند. این تگ ویژگی های رویدادها در HTML را نیز پشتیبانی می کند.

 

تگ< optgroup>

تگ optgroup برای ایجاد گروهی از option ها در یک drop-down استفاده می شود.

 

اگر شما دارای یک لیست طولانی از گزینه ها میباشید استفاده از تگ optgroup برای راحت تر کنترل کردن گزینه ها پیشنهاد می شود.


   <select>

   <optgroup label="Swedish Cars">

   <option value="volvo">Volvo</option>

   <option value="saab">Saab</option>

   </optgroup>

   <optgroup label="German Cars">

   <option value="mercedes">Mercedes</option>

   <option value="audi">Audi</option>

   </optgroup>

   </select>

 

تگ optgroup همچنین ویژگی های عمومی در HTML را پشتیبانی می کند.این تگ ویژگی های رویدادها در HTML را نیز پشتیبانی می کند.

 

بسیار خب در این جلسه. آموزش HTML به پایان رسید. در جلسات بعدی به سراغ پروژه موردی خود خواهیم رفت.

0 پاسخ

ارسال یک پاسخ

در گفتگو ها شرکت کنید.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *