آرشیو اردیبهشت ماه 1400

http://www.tahlildadeh.com Translate this page شما در اين سايت آموزشي با مقالات,كتاب,PDF,فيلم هاي آموزشي رايگان و همين طور دوره آموزش برنامه نويسي به زبان هاي C#,HTML5,ASP,MVC,SQL,اندرويد,React,وردپرس .. را ياد مي گيريد

دوشنبه ۲۴ شهریور ۰۴

آموزش طراحي سايت -آموزش درج كردن تصويردر HTML

۴ بازديد

آموزش طراحي سايت -آموزش درج كردن تصويردر HTML

وارد كردن تصاوير در صفحات HTML

در اين آموزش چگونگي استفاده از تصاوير در صفحات HTML را فرا مي گيريم.زيبا سازي تصاوير و همچنين ترسيم بسياري از مفاهيم پيچيده به يك روش ساده روي صفحه ي وب شما، بسيار مهم مي باشد. اين آموزش مراحل ساده ي استفاده از تصاوير در صفحات وب را به شما آموزش خواهد داد.

 

وارد كردن تصوير

شما مي توانيد با استفاده از برچسب هر تصويري را وارد صفحه ي وب خود كنيد. در زير تركيب ساده ي استفاده از اين برچسب را مي بينيد:

برچسب يك برچسب خالي مي باشد، يعني تنها مي تواند داراي ليستي از ويژگي ها باشد و داراي برچسب closing نمي باشد.


 مثال:

براي امتحان كردن مثال، زير اجازه بدهيد فايل html خود يعني test.htm و فايل تصوير خود يعني test.png را در يك مسير قرار دهيم.

 

نمونه يك

 

 

 

Using Image in Webpage

 

 

 

Simple Image Insert

   

 

tahlildadeh Image

 

 

شما مي توانيد از فايل تصوير JPEG، PNG يا GIF متناسب با راحتي خود استفاده كنيد، اما مطمئن شويد كه در ويژگي src نام فايل تصوير را به درستي وارد كرديد. نام تصوير هميشه يك مورد هوشمند مي باشد.
ويژگي alt يك ويژگي مي باشد كه اگر تصوير نمايش داده نشود، يك متن جايگزين را براي آن مشخص مي كند.

 

تنظيم موقعيت تصوير

آموزش html css

معمولا ما تمام تصاوير خود را در يك مسير مجزا قرار مي دهيم. بنابراين اجازه بدهيد فايل test.htm مربوط به HTML را در مسير اصلي نگه داشته و يك مسير فرعي images داخل مسير اصلي، جايي كه تصوير test.png را نگهداري مي كنيم، ايجاد كنيم.
با فرض اينكه موقعيت تصوير ما "image/test.png" مي باشد، مثال زير را امتحان كنيد:


 مثال:

نمونه دو

 

 

 

Using Image in Webpage

 

 

 

Simple Image Insert

   

 

tahlildadeh Image

 

 

تنظيم طول و عرض تصوير

مي توانيد طول و عرض تصوير را براساس نياز خود و با استفاده از ويژگي هاي width و height تنظيم كنيد. شما مي توانيد طول و عرض تصوير را به پيكسل يا براساس درصد اندازه ي واقعي آن تنظيم كنيد.


 مثال:

نمونه سه

 

 

 

Set Image Width and Height

 

 

 

Setting image width and height

 

   

 

 

تنظيم حاشيه ي تصوير

به طور پيش فرض تصوير حاشيه اي در اطراف خود خواهد داشت، شما مي توانيد ضخامت اين حاشيه را با استفاده از ويژگي border و به واحد پيكسل تنظيم كنيد. ضخامت 0 يعني هيچ حاشيه اي در اطراف تصوير وجود ندارد.


 مثال:

نمونه چهار

 

 

 

  Set Image Border

 

 

 

Setting image Border

   

 

 

 

تنظيم همترازي تصوير

به طور پيش فرض تصوير در سمت چپ صفحه تنظيم مي شود، اما مي توانيد از ويژگي align براي تنظيم تصوير در سمت راست يا مركز صفحه استفاده كنيد.


 مثال:

نمونه پنج

 

 

 

  Set Image Alignment

 

 

 

Setting image Alignment

   در اين وبلاگ كدها نمايش داده نمي شود جهت مشاهده كدها برروي آموزش طراحي سايت كليك كنيد

 

Test Image

 

 


آموزش طراحي سايت-توضيحات در HTML

۶ بازديد

 

آموزش طراحي سايت -توضيحات در HTML

آموزش استفاده از comment در html

در اين مقاله آموزش Html مي خواهيم به چگونگي استفاده از comment در html بپردازيم:
كامنت قطعه اي از كد مي باشد كه توسط مرورگرها ناديده گرفته مي شود. افزودن كامنت به كد HTML خود، تمرين خوبي است، به ويژه در داكيومنت هاي پيچيده براي نشان دادن بخش هايي از يك داكيومنت به هركسي كه كد را نگاه مي كند. كامنت ها به شما و ديگران كمك مي كنند تا كد خود را متوجه شويد و قابليت خواندن آن را افزايش مي دهد.
كامنت هاي HTML بين برچسب هاي واقع مي شوند. بنابراين هر محتوايي كه بين اين برچسب ها واقع شود، مثل كامنت با آن رفتار خواهد شد و توسط مرورگرها به طور كامل ناديده گرفته خواهد شد.


 مثال:

نمونه يك

 

 

     

  This is document title

 

 

 

Document content goes here.....

 

 

 

اين مثال نتيجه ي زير را بدون نمايش محتواي ارائه شده به عنوان بخشي از كامنت ها، به دنبال دارد.
Document content goes here.....

 

كامنت هاي معتبردر مقابل كامنت هاي نامعتبر

كامنت ها تودرتو نمي شوند، يعني اينكه يك كامنت نمي تواند در داخل كامنت ديگري قرار بگيرد. خط تيره ي (dash) دوتايي "--" ممكن نيست در داخل يك كامنت ظاهر شود، به جز در مواردي كه بخشي از برچسب closing باشد. شما بايد مطمئن باشيد كه هيچ فضاي خالي در ابتداي رشته ي كامنت وجود ندارد.


 مثال:

در اينجا كامنت ارائه شده يك كامنت معتبر مي باشد و توسط مرورگر پاك مي شود.

 

نمونه دو

 

 

 

  Valid Comment Example

 

       

 

Document content goes here.....

 

 

 

اما خط زير يك كامنت معتبر نيست و توسط مرورگر نمايش داده خواهد شد. اين به اين خاطر است كه فضايي بين حاشه ي چپ پرانتز و علامت تعجب وجود دارد.


 مثال:

نمونه سه

 

 

    Invalid Comment Example

    < !--   This is not a valid comment -->   

 

Document content goes here.....

 

 

 

كامنت هاي چندخطي

تاكنون فقط كامنت هاي تك خطي را مشاهده كرديم، اما HTML كامنت هاي چندخطي را نيز پشتيباني مي كند.
شما مي توانيد كامنت هاي چند خطي داشته باشيد با استفاده از برچسب آغازگر --!> و پايان دهنده ي ،--> كه قبل از اولين خط و در پايان آخرين خط قرار ميگيرد.


 مثال:

نمونه چهار

 

 

 

Multiline Comments

 

       

Document content goes here.....

 

 

 

كامنت هاي شرطي

كامنت هاي شرطي تنها در اينترنت اكسپلورر روي ويندوز كار مي كنند، اما توسط مرورگرهاي ديگر هم ناديده گرفته مي شوند. اين كامنت ها در Internet Explorer 5 به بالاتر پشتيباني مي شوند و مي توانيد از آنها براي دادن دستورات شرطي به ورژن هاي مختلف IE استفاده كنيد.


 مثال:

نمونه پنج

 

 

    Conditional Comments
   

 

Document content goes here.....

 

 

 

در جايي كه نياز خواهيد داشت يك صفحه ي طراحي متفاوت بر اساس ورژن هاي مختلف اينترنت اكسپلورر به كار بگيريد، به راه حلي نياز خواهيد داشت. در اين مواقع چنين كامنت هاي شرطي مفيد خواهند بود.

 

استفاده از برچسب كامنت

مرورگرهاي كمي هستند كه استفاده از برچسب را براي كامنت بخشي از كد HTML استفاده مي كنند.


 مثال:

نمونه شش

 

 

 

  Using Comment Tag

 

 

This is not Internet Explorer.

 

 

 

اگر از IE استفاده مي كنيد، نتيجه ي زير حاصل خواهد شد:

 

This is Internet Explorer.

اما اگر در حال استفاده از IE نمي باشد، نتيجه ي زير حاصل مي شود.

 

This is Internet Explorer.

كد اسكريپت كامنت

شما جاوا اسكريپت را در يك آموزش مجزا با HTML ياد خواهيد گرفت. در اينجا بايد دقت كنيد كه اگر در حال استفاده از java script يا vb script در كد html خود هستيد، بنابراين توصيه مي شود كه آن كد اسكريپت را در داخل كامنت هاي مناسب HTML قرار دهيد طوري كه مرورگرهاي قديمي بتوانند به درستي كار كنند.


 مثال:

نمونه هفت

 

 

 

 

  Commenting Script Code 

 

 

Hello , World!

 

 

 

كامنت صفحات طراحي

گرچه شما HTML را در يك آموزش مجزا با صفحات طراحي فرا ميگيريد، اما در اينجا بايد دقت داشته باشيد كه اگر از CSS در كد HTML خود استفاده مي كنيد، بنابراين توصيه مي شود كه كد صفحه ي طراحي را در داخل كامنت هاي مناسب HTML قرار دهيد، طوريكه مرورگرهاي قديمي بتوانند كار كنند.


 مثال:

نمونه هشت

 

 

    Commenting Style Sheets   

 

 

 

Hello , World!

 

 

 

 ممكن است بنا به دلايلي كدها كامل نمايش داده نشود جهت مشاهده برروي دوره آموزش طراحي سايت كليك نماييد  

آموزش طراحي سايت -آموزش متا تگ در Html

۴ بازديد

آموزش طراحي سايت -آموزش متا تگ در Html

آموزش html css

در اين قسمت از آموزش HTML مي خواهيم به Meta Tag در HTML و نحوه استفاده از آن در صفحات وب اشاره كنيم.
HTML علاوه بر مشخص كردن اطلاعات مهم به روش هاي مختلف در مورد يك داكيومنت، به شما اجازه مي دهد تا متاديتا را نيز مشخص كنيد. عناصر META مي توانند براي وارد كردن جفت مقدار/نام استفاده شوند، اين جفت ويژگي هاي داكيومنت HTML مانند نويسنده، تاريخ اتمام، ليست كلمات كليدي، داكيومنت نويسنده و غيره را ارائه ميدهد.
برچسب < meta> براي ارائه ي چنين اطلاعات اضافه اي استفاده مي شود. اين برچسب يك عنصر خاليست و داراي برچسب بستن نيست اما اطلاعاتي را با ويژگي آن در خود دارد. شما مي توانيد بر اساس اطلاعاتي كه مي خواهيد در داكيومنت خود نگهداري كنيد، يك برچسب يا بيشتر از يك برچسب متا وارد داكيومنت خود كنيد. اما به طور كل برچسب هاي متا وضعيت ظاهري داكيومنت را تحت تاثير قرار نمي دهند، بنابراين از لحاظ ظاهري استفاده كردن يا نكردن از آنها مشخص نمي شود.

افزودن برچسب هاي متا به داكيومنت ها:

شما مي توانيد با قرار دادن برچسب هاي در داخل تيتر داكيومنت كه با برچسب هاي و مشخص مي شوند، متا ديتا را به صفحات وب خود اضافه كنيد. يك برچسب متا علاوه بر ويژگي هاي مركزي، مي تواند داراي ويژگي هاي زير نيز باشد:

 

Attribute               Description
Description
نام براي پراپرتي، مي تواند هر چيزي از جمله كلمات كليدي، توصيفات، نويسنده، توليد كننده و غيره باشد.
content
مقدار ويژگي را مشخص مي كند.
scheme
نموداري را براي توضيح مقدار ويژگي مشخص مي كند. (همانطور كه در محتوي ويژگي مشاهده كرديد.)
http-equiv
براي تيترهاي پيام پاسخ http استفاده مي شود. براي مثال http-equiv مي تواند براي تازه سازي صفحات يا تنظيم يك cookie استفاده شود.مقاديري مانند نوع محتوا، اتمام، تازه سازي و تنظيم cookie.

 

 

مشخص كردن كلمات كليدي

مي توانيد از برچسب براي مشخص كردن كلمات كليدي مربوط به داكيومنت استفاده كنيد، و پس از آن اين كلمات توسط موتورهاي جستجو استفاده مي شوند، و صفحه ي وب شما را به هدف جستجو ايندكس مي كنند.

مثال:

در اين مثال برچسب هاي متا، متاديتا و HTML را با عنوان كلمات كليدي در مورد داكيومنت وارد مي كنيم.

مشخص كردن كلمات كليدي

مي توانيد از برچسب براي مشخص كردن كلمات كليدي مربوط به داكيومنت استفاده كنيد، و پس از آن اين كلمات توسط موتورهاي جستجو استفاده مي شوند، و صفحه ي وب شما را به هدف جستجو ايندكس مي كنند.

مثال:

در اين مثال برچسب هاي متا، متاديتا و HTML را با عنوان كلمات كليدي در مورد داكيومنت وارد مي كنيم.

 

توصيف داكيومنت

شما مي توانيد از برچسب براي توصيف داكيومنت استفاده كنيد. اين برچسب نيز مي تواند توسط موتورهاي مختلف جستجو مورد استفاده قرار بگيرد، در حاليكه صفحه ي وب شما را به هدف جستجو ايندكس مي كند.

مثال:

 

بازبيني تاريخ داكيومنت

شما مي توانيد از برچسب براي ارائه ي اطلاعات در مورد زمان آخرين آپديت داكيومنت استفاده كنيد. اين اطلاعات مي توانند توسط مرورگرهاي مختلفي استفاده شوند، در حاليكه صفحه ي وب شما را تازه سازي مي كنند.

مثال:

 

تازه سازي داكيومنت:

يك برچسب مي تواند براي مشخص كردن دوره اي كه پس از آن صفحه ي وب شما به طور خودكار بازسازي مي شود، استفاده شود.

مثال:

اگر مي خواهيد صفحه ي وب شما پس از هر 5 ثانيه ريفرش شود، از تركيب زير استفاده كنيد:

 

Redirect كردن صفحه

مي توانيد از برچسب براي Redirect كردن صفحه ي خود استفاده كنيد، همچنين مي توانيد دوره اي را مشخص كنيد كه پس از آن صفحه به طور خودكار Redirect شود.

مثال:

در اين مثال صفحه ي جاري پس از 5 ثانيه به صفحه ي ديگر Redirect مي شود. اگر مي خواهيد صفحه فورا Redirect شود، هيچ محتوايي براي آن مشخص نكنيد.

 

تنظيم cookies

Cookies داده هايي هستند كه در يك فايل كوچك متن روي كامپيوتر شما ذخيره شده اند و بين مرورگر وب و سرور وب ردو بدل مي شود تا مسير اطلاعات مختلف را براساس نياز برنامه ي وب شما حفظ كنند.
شما مي توانيد از برچسب براي ذخيره ي cookies در بخش كاربري استفاده كنيد و پس از آن اين اطلاعات مي توانند توسط سرور وب استفاده شوند تا بازديدكننده ي سايت را پيگيري كنند.

مثال:

 

توصيف داكيومنت

شما مي توانيد از برچسب براي توصيف داكيومنت استفاده كنيد. اين برچسب نيز مي تواند توسط موتورهاي مختلف جستجو مورد استفاده قرار بگيرد، در حاليكه صفحه ي وب شما را به هدف جستجو ايندكس مي كند.

مثال:

 

بازبيني تاريخ داكيومنت

شما مي توانيد از برچسب براي ارائه ي اطلاعات در مورد زمان آخرين آپديت داكيومنت استفاده كنيد. اين اطلاعات مي توانند توسط مرورگرهاي مختلفي استفاده شوند، در حاليكه صفحه ي وب شما را تازه سازي مي كنند.

مثال:

 

تازه سازي داكيومنت:

يك برچسب مي تواند براي مشخص كردن دوره اي كه پس از آن صفحه ي وب شما به طور خودكار بازسازي مي شود، استفاده شود.

مثال:

اگر مي خواهيد صفحه ي وب شما پس از هر 5 ثانيه ريفرش شود، از تركيب زير استفاده كنيد:

 

Redirect كردن صفحه

مي توانيد از برچسب براي Redirect كردن صفحه ي خود استفاده كنيد، همچنين مي توانيد دوره اي را مشخص كنيد كه پس از آن صفحه به طور خودكار Redirect شود.

مثال:

در اين مثال صفحه ي جاري پس از 5 ثانيه به صفحه ي ديگر Redirect مي شود. اگر مي خواهيد صفحه فورا Redirect شود، هيچ محتوايي براي آن مشخص نكنيد.

 

تنظيم cookies

Cookies داده هايي هستند كه در يك فايل كوچك متن روي كامپيوتر شما ذخيره شده اند و بين مرورگر وب و سرور وب ردو بدل مي شود تا مسير اطلاعات مختلف را براساس نياز برنامه ي وب شما حفظ كنند.
شما مي توانيد از برچسب براي ذخيره ي cookies در بخش كاربري استفاده كنيد و پس از آن اين اطلاعات مي توانند توسط سرور وب استفاده شوند تا بازديدكننده ي سايت را پيگيري كنند.

مثال:

 

اگر تاريخ و زمان انقضا را مشخص نكرده ايد، cookie يك session cookie مي باشد و وقتي كه يوزر از مرورگر خارج شود، پاك خواهد شد.

تنظيم نام نگارنده

مي توانيد با استفاده از meta tag نام يك نگارنده را براي صفحه ي وب خود تنظيم كنيد. يك مثال در اين رابطه را در زير مشاهده مي كنيد.

مثال:

 

تعيين تنظيم كاراكتر

مي توانيد از برچسب براي تعيين تنظيم كاراكتر مربوط به صفحه ي وب استفاده كنيد.

مثال:

به طور پيش فرض مرورگرها و سرورهاي وب از رمزگزاري ISO-8859-1 براي پردازش صفحات وب استفاده مي كنند. در زير مثالي را مي بينيد براي تنظيم رمزگزاري UTF-8:

براي مشاهده نمونه مثال‌ها  متا تگ ها بر روي آموزش طراحي سايت كليك كنيد

 

 

آموزش طراحي سايت -آموزش Attributeها در HTML

۵ بازديد

آموزش طراحي سايت -آموزش Attributeها در HTML-آموزش HTML

 

آموزش طراحي سايت -آموزش Attributeها در HTML-آموزش HTML

ويژگي هاي زبان HTML

 

در اين مبحث از آموزش هاي HTML مي خواهيم به بررسي برخي از ويژگي هاي زبان HTML بپردازيم:
برخي از برچسب هاي HTML مانند برچسب هاي تيتر و برچسب هاي پاراگراف، و موارد استفاده ي آنها را مشاهده كرديم. تاكنون از آنها به ساده ترين شكل خود استفاده كرده ايم، اما بيشتر برچسب هاي HTML مي توانند ويژگي هايي داشته باشند كه مقداري اطلاعات اضافه مي باشد.
يك attribute براي تعريف ويژگي هاي عنصر HTML استفاده مي شود و در داخل برچسب بازكننده ي عنصر قرار مي گيرد. همه ي ويژگي ها از دو بخش تشكيل شده اند: name و value.

 

 

  • Name ويژگي مورد نظر شما براي تنظيم ميباشد، به عنوان مثال عنصر پاراگرافp> > در مثال ارائه شده داراي ويژگي مي باشد كه نام آن align مي باشد و شما مي توانيد از آن براي تنظيم پاراگراف در صفحه استفاده كنيد.
  • Value همان است كه شما مي خواهيد مقدار ويژگي تنظيم شود و هميشه در داخل گيومه قرار مي دهيد. مثال زير سه مقدار ممكن ازيك ويژگي تراز را نشان مي دهد: چپ، مركز و راست.

ويژگي نام ها و ويژگي مقادير غيرهوشمند مي باشند. به هرحال وب جهاني Consortium (W3C) مقادير ويژگي ها را در HTML 4 با حروف كوچك پيشنهاد مي دهد.

 مثال:

نمونه يك

 

ويژگي هاي اصلي

چهار ويژگي اصلي كه مي توانند در اكثر عناصر HTML مورد استفاده قرار بگيرند عبارتند از:

  • id
  • title
  • class
  • style

ويژگي id

ويژگي id يك برچسب HTML مي تواند براي تشخيص يك عنصر در يك صفحه ي HTML مورد استفاده قرار بگيرد. دو دليل اصلي براي تمايل شما به استفاده از ويژگي id در يك عنصر وجود دارد:

  • اگر يك عنصر يك ويژگي را به عنوان تشخيص دهنده ي منحصر به فرد استفاده مي كند شناخت تنها آن عنصر و محتواي مربوط به آن ممكن مي باشد.
  • اگر داراي دو عنصر هم نام در يك صفحه ي وب مي باشيد، مي توانيد از عنصر id براي تشخيص اين عناصر هم نام استفاده كنيد.

در مورد طراحي صفحه در آموزش هاي مجزا بحث خواهيم كرد، اكنون اجازه بدهيد از ويژگي id براي تشخيص عناصر بين دو پاراگراف استفاده كنيم، مانند مثال زير:

<p id="html">This para explains what is HTMLp>
 
<p id="css">This para explains what is Cascading Style Sheetp>
 
 
. به وبسايت آموزش طراحي سايت مراجعه فرماييد  HTML يراي ديدن وِِيژگي هاي عناصر
 
.   چنانچه سوالي در اين زمينه داريد در كامنت مطرح نماييد و يا با شماره تلفن 09373889811در ارتباط
باشيد

 

آموزش طراحي سايت- عناصر در HTML

۵ بازديد

آموزش طراحي سايت- عناصر در HTML

يك عنصر HTML توسط يك برچسب شروع كننده تعريف مي شود. اگر عنصر داراي محتواي ديگري باشد، با يك برچسب بسته كننده تمام مي شود در حاليكه جلوي نام عنصر يك علامت اسلش قرار گرفته است كه مي توانيد در جدول زير برخي ازاين برچسب ها را مشاهده كنيد:

Start Tag
Content
End Tag
< p>
اين برچسب محتواي پاراگراف مي باشد.
< /p>
< h1>
اين برچسب تيتر محتوا مي باشد.
< /h1>
< div>
اين برچسب تقسيم محتوا مي باشد.
< /div>
< br />

بنابراين در اينجا< p>....< /p> يك عنصر HTML و< h1>...< /h1> عنصر ديگري از HTML مي باشد. عناصري از HTML وجود دارند كه نيازي به بسته شدن ندارند مانند < img... />, < hr /> و< br /> . اين عناصر با عنوان void elements (عناصر خالي) شناخته مي شوند.
داكيومنت هاي HTML داراي درختي از اين عناصر مي باشند و مشخص مي كنند كه چگونه داكيومنت ها بايد ساخته شوند و چه نوع محتوايي بايد در چه بخشي از داكيومنت HTML قرار بگيرد.

 

برچسب HTML در مقابل عنصر

يك عنصر HTML به وسيله ي يك برچسب شروع كننده تعريف مي شود. اگر عنصر داراي محتواي ديگري باشد با يك برچسب بستن تمام مي شود.
براي مثال< p> برچسب شروع كننده ي يك پاراگراف مي باشد و< /p> برچسب بستن همان پاراگراف مي باشد، اما < p>This is paragraph< /p> عنصر يك پاراگراف مي باشد.

عناصر تو در توي HTML

نگهداري يك عنصر HTML در داخل عنصر ديگر بسيار متداول مي باشد.

نمونه يك

 

  جهت ديدن اين نمونه يك به سايت دوره آموزش طراحي سايت  مراحعه فرماييد به دليل اينكه كدها در اين وبلاگ كامل نمايش داده نمي شود 

 

   

آموزش طراحي سايت- آموزش تگ هاي اصلي در Html

۶ بازديد

آموزش طراحي سايت- آموزش تگ هاي اصلي در Html

در اين سري از مقالات آموزش html مي خواهيم به بيان تگ در html بپردازيم.

 

 برچسب هاي تيتر:

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

مثال:

نمونه يك

 

 

 

 

  Heading Example

 

 

 

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> قرار بگيرد، همانطور كه در مثال زير مشاهده مي كنيد:

 

نمونه دو

 

 

 

  Paragraph Example

 

 

 

Here is a first paragraph of text.

 

 

 

Here is a second paragraph of text.

 

 

Here is a third paragraph of text.

 

 

 

برچسب شكست لينك

هرزمان كه شما از < br /> عنصر استفاده كنيد، هر چيزي كه آن را دنبال مي كند از خط بعد شروع خواهد شد. اين برچسب نمونه اي از يك عنصرempty مي باشد، زماني كه لازم نيست برچسبي را باز كنيد يا ببنديد چرا كه چيزي براي رفتن بين آنها وجود ندارد.
در بچسب < br />، يك فضاي خالي بين كااكترهاي br و اسلش جلوي آن وجود دارد. اگر شما اين فضا را حذف كنيد، مرورگرهاي قديمي تر در اجراي خط شكست مشكل خواهند داشت، در حاليكه اگر اسلش را حذف كنيد برچسب < br> باقيمانده در HTML معتبر نمي باشد.

 مثال:

نمونه سه

 

 

    Line Break  Example

 

 

 

Hello
         You delivered your assignment ontime.
        Thanks


        Mahnaz   

 

 

 

مركزگذاري متن

مي توانيد با استفاده از برچسب < center> مي توانيد هر محتوايي را در مركز صفحه يا در مركز هر سلول از يك جدول قرار دهيد.


 مثال:

نمونه چهار

 

 

 

    Centring Content Example4

 

 

 

This text is not in the center.

 

 

 

       

 

 

This text is in the center.

        

 

 

 

 

 

خطوط افقي

خطوط افقي براي بخش هاي شكست بصري يك داكيومنت استفاده مي شوند. برچسب < hr> خطي از موقعيت كنوني داكيومنت به حاشيه ي سمت راست ايجاد كرده و خط را طبق آن مي شكند.
به عنوان مثال ممكن است تمايل داشته باشيد بين دو پاراگراف خطي قرار دهيد، همانطور كه در مثال زير ارائه شده است:

 مثال:

نمونه پنج

 

 

 

 

Horizontal Line Example5

 

 

 

This is paragraph one and should be on top

 

 

 


   

 

 

This is paragraph two and should be at bottom


 

 

و باز برچسب< hr /> مثالي از Empty مي باشد كه نيازي به باز كردن يا بستن برچسب نداريد زيرا چيزي براي رفتن بين آنها وجود ندارد.
در عنصر < hr /> يك فضاي خالي بين كاراكترهاي hr و اسلش مقابل آن وجود دارد. اگر اين فضا را حذف كنيد مرورگرهاي قديمي تر در اجراي خط افقي مشكل خواهند داشت. در حاليكه اگر اسلش مقابل آن را حذف كنيد عنصر باقيمانده < hr> مي باشد كه در HTML فاقد اعتبار مي باشد.

 

حفظ طراحي

گاهي اوقات تمايل داريد كه متن فرمت دقيق خود در HTML را دنبال كند، در اين موارد مي توانيد از برچسب پريفرمت < pre> استفاده كنيد.
هر متن بين برچسب باز كننده ي < pre> و برچسب بستن < /pre> طراحي متن منبع را حفظ خواهد كرد.

 مثال:

نمونه شش

 

 

 

Preserve Formatting Example6

 

 

 

    function testFunction( strText ){    alert (strText) }

 

 

 

 

سعي كنيد از همان كد بدون نگهداري آن بين برچسب هاي < pre>...< /pre> استفاده كنيد.

 

فضاهاي غيرشكست:

فرض كنيد مي خواهيد از عبارت "12 Angry Men." استفاده كنيد. در اينجا از مرورگر نمي خواهيد عبارت را بين دو خط به صورت 12 Angry و Men بشكند.

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

 

در مواردي كه نمي خواهيد مرورگر متن را بشكند بايد به جاي يك فضاي عادي از فضاي غير شكست استفاده كنيد. براي مثال وقتي "12 Angry Men" را در يك پاراگراف كدگذاري مي كنيد بايد از كدي مانند زير استفاده كنيد:

مثال:

نمونه هفت

 


 

 

 

  Nonbreaking Spaces Example7

 

 

 

 

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

 

 

 

 

 

 

 

آموزش طراحي سايت - آموزش html

۶ بازديد

آموزش html-آموزش طراحي سايت

آموزش مقدمات HTML

دوره آموزش طراحي سايت

در اين مقاله آموزش HTML مي خواهيم مقدمات آنرا براي شما دوستان عزيز بيان كنيم.
HTML مخفف عبارت Hyper Text Markup Language مي باشد كه در واقع گسترده ترين زبان استفاده شده در صفحات وب مي باشد.
HTML توسط برنرز لي در اواخر سال 1991 ايجاد شد، اما html 2.0 اولين نوع استاندارد آن بود كه در سال 1995 منتشر شد. HTML 4.01 ورژن مهمي از HTML بود كه دراواخر 1999 منتشر شد. گرچه در آموزش html HTML 4.01 ورژني است كه به طور گسترده استفاده مي شود، اما معمولا HTML 5 را داريم كه توسعه ي يافته html 4.01 است و در سال 2012 منتشر شد.
اين آموزش HTML براي آشنا كردن طراحان و توسعه دهندگان وب با نياز براي درك HTML با جزئيات كافي به همراه يك نظر كلي ساده و مثال هاي عملي، طراحي شده است. اين آموزش HTML به شما محتواي كافي براي شروع با HTML از جايي كه مي توانيد تخصصي با سطح بالاتر داشته باشيد، ارائه مي دهد.

 

پيش نيازها:

قبل از پيش رفتن براي آموزش HTML شما بايد يك دانش پايه براي كار با ويندوز و سيستم عملياتي Lunix داشته باشيد. علاوه بر اين براي آموزش HTML شما بايد با موارد زير آشنا باشيد:

دوره آموزش طراحي سايت

  • تجربه كار با هر ويرايشگري مانند Notepad، Notepad ++ و يا Editplus و غيره براي آموزش html .
  • چگونگي ايجاد مسيرها و فايل ها روي كامپيوتر خود براي آموزش html
  • چگونگي مسيريابي از طريق مسيرهاي مختلف براي آموزش html.
  • چگونگي تايپ كردن محتوا در يك فايل و ذخيره ي آنها روي كامپيوتربراي آموزش html.
  • درك تصاوير با فرمت هاي مختلف مانند JPEG و PNG براي آموزش html.

امتحان كردن HTML روي خط

نمونه يك




Hello World!