article

فرمت بندی و کار با متن و پاراگراف در HTML

html-p-b-br-strong

تا این مرحله از آموزش مقدماتی HTML تگ های اصلی و کلیدی این زبان پایه برنامه نویسی وب را شناختیم و با متاتگ ها، انواع و کاربردهای گوناگون آنها آشنا شدیم، گفتیم که به کار بردن برخی از متاتگ ها در صفحات وب اجتناب ناپذیر و برخی نیز جنبه اختیاری دارند، اکنون و در ادامه آموزش های مقدماتی می خواهیم در رابطه با عناصر و تگ های مرتبط با فرمت بندی و کار با متن و پاراگراف در HTML صحبت کنیم و به بررسی تگ های b ،strong ،small ،i ،em ،mark ،del ،ins ،sub ،sup ،hr ،br ،p ، pre و code بپردازیم، هر یک از تگ های اشاره شده در لیست بالا مفهوم و کاربرد مخصوص به خود را دارند که در ایجاد سند HTML باید در جای خود استفاده شوند.

استفاده از متن در سند HTML


متن در سند HTML هم می تواند به صورت ساده، بدون فرمت بندی و خارج از تگ های HTML مورد استفاده قرار گیرد و هم بین تگ ها و به صورت فرمت بندی شده، در حالت اول نمی توانیم با استفاده از خواص تگ ها روی فرمت متن کنترلی داشته باشیم اما در حالت دوم با توجه به تگ های HTML که متن درون آنها قرار گرفته است تاثیری به لحاظ محل قرارگیری، نحوه نمایش و... اعمال خواهد شد، در کد فرضی زیر نحوه استفاده از متن در صفحه وب بدون استفاده از تگ های HTML و در واقع بدون فرمت بندی نشان داده شده است.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | متن بدون فرمت بندی در HTML</title>
<!-- Webgoo.ir -->
</head>
<body>
متن بدون فرمت بندی در سند HTML
</body>
</html>
برای مشاهده و بررسی نمونه آنلاین لطفا به انتهای این آموزش مراجعه نمائید.
این شیوه استفاده از متن در سند HTML روش متداول نیست، اغلب متن ها در صفحات وب بین تگ های HTML استفاده می شوند (تگ هایی به غیر از تگ اصلی body) که هدف از این کار رعایت مبحثی تحت عنوان HTML معنایی یا Semantic است، سمانتیک به زبان ساده یعنی در صفحات وب هر چیزی باید سر جای خودش استفاده شود، به طور مثال اگر می خواهیم متنی را نمایش دهیم بهتر است در یک پاراگراف p یا بلاک div باشد یا اینکه نمی توانیم از تگ div درون تگ p استفاده کنیم، همچنین برای ایجاد تغییرات ظاهری باید از تگ توصیه شده و استاندار آن استفاده کنیم، در کد فرضی زیر نحوه استفاده از متن در صفحه وب با استفاده از تگ های HTML و در واقع به صورت فرمت بندی شده نشان داده شده است.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | متن فرمت بندی شده در HTML</title>
<!-- Webgoo.ir -->
</head>
<body>
<p>متن فرمت بندی شده در سند <strong>HTML</strong></p>
</body>
</html>
برای مشاهده و بررسی نمونه آنلاین لطفا به انتهای این آموزش مراجعه نمائید.
همان طور که مشخص است در نمونه کد بالا متن را در یک پاراگراف که با تگ p ایجاد شده است درج کرده ایم و عبارت HTML بین تگ strong قرار دارد، در ادامه آموزش خواهیم دید که هر یک از تگ ها چه تاثیری در صفحه وب خواهند داشت.

تغییر اندازه متن با تگ b، strong و small در HTML


تگ های b، strong و small برای تغییر اندازه متن در HTML معرفی شده اند، تگ b و strong متن درون خود را به صورت متمایز و برجسته (Bold) نمایش می دهند، هرچند این دو تگ تاثیر یکسانی به لحاظ ظاهری بر روی متن اعمال می کنند اما اغلب توصیه می شود از تگ strong به جای b استفاده کنیم، عمده دلیل این موضوع به مفهوم HTML معنایی و خواناتر بودن عبارت strong نسبت به حرف b برمی گردد هرچند این موضوع هنوز جای بحث دارد و برخی نیز تگ b را به strong ترجیح می دهند، در هر حال در کنار این دو تگ، HTML تگ دیگری تحت عنوان small دارد که متن درون خود را یک اندازه کاهش می دهد به طور مثال اگر اندازه پیش فرض و فعلی فونت large باشد و درون تگ small قرار بگیرد به صورت medium نمایش داده می شود، در کد فرضی زیر نحوه تغییر اندازه متن با تگ های b، strong و small در HTML نشان داده شده است.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | تغییر اندازه متن در HTML</title>
<!-- Webgoo.ir -->
<style type="text/css">
body{
    direction:rtl;
}
</style>
</head>
<body>
<p>
برای شروع برنامه نویسی وب ابتدا باید زبان نشانه گذاری <b>HTML</b> را بیاموزیم، <strong>HTML</strong> یکی از ساده ترین و شیرین ترین مباحث در فرآیند آموزش مهارتهای برنامه نویسی وب است.
</p>
<p>
برای نمایش متن با اندازه <small>کوچکتر</small> از تگ small استفاده می کنیم.
</p>
</body>
</html>
برای مشاهده و بررسی نمونه آنلاین لطفا به انتهای این آموزش مراجعه نمائید.
در این نمونه کد از زبانی به نام CSS در کنار HTML استفاده شده که در بخش های دیگر سایت به صورت جداگانه در خصوص آن صحبت کرده ایم، در حال حاضر در همین اندازه بدانیم که کدهای قسمت تگ style مربوط به زبان CSS است و برای تنظیم جهت نمایش صفحه (از سمت راست به چپ) کاربرد دارد.

فرمت بندی متن با تگ های i ،em ،mark ،del ،ins ،sub ،sup در HTML


با توجه به نیاز فرمت بندی متن در صفحات وب به اشکال ظاهری مختلف، دسته دیگری از تگ ها در HTML معرفی شده اند که جهت فرمت بندی متن به نحو دلخواه مورد استفاده قرار می گیرند، این سری از تگ ها شامل i ،em ،mark ،del ،ins ،sub و sup می شود که در ادامه به صورت موردی به بررسی آنها می پردازیم.
- تگ i
تگ i جهت ایجاد متن کج شده (Italic) مورد استفاده قرار می گیرد، از این تگ معمولا برای متمایز کردن عبارات خاص از حالت نرمال مانند اصطلاحات یا نمایش متن به صورت سلیقه ای بهره می گیریم.
تگ i متن را به صورت <i>کج شده</i> نمایش می دهد.
- تگ em
تگ em جهت متمایز کردن عباراتی که دارای اهمیت و تاکید هستند کاربرد دارد، جلوه ظاهری این تگ مشابه تگ i است اما کاربرد آن از نظر HTML معنایی متفاوت است، هدف از تگ i عموما صرفا جنبه ظاهری و نمایشی آن است اما تگ em بیش از جنبه ظاهری جنبه معنایی دارد و برای انسان و ماشین این مفهوم را القا می کند که کلمه مورد نظر دارای تاکید است و باید به صورت موکد (Emphasis) تلفظ یا پردازش شود.
تگ em برای <em>متمایز کردن عبارت دارای تاکید</em> استفاده می شود، جلوه ظاهری تگ em مشابه با تگ i است و متن را به صورت کج شده نمایش می دهد.
- تگ mark
تگ mark جهت متمایز کردن متن با پس زمینه درخشان مورد استفاده قرار می گیرد، از این تگ معمولا برای نشانه گذاری عبارت مورد نظر یا متن دارای اهمیت بهره می گیریم.
جلوه ظاهری تگ <mark>mark</mark> مشابه ماژیک فسفری  بر روی کاغذ است!
- تگ del و ins
تگ del (برگرفته از عبارت Delete) جهت متمایز کردن متنی که از سند HTML حذف شده باشد مورد استفاده قرار می گیرد، البته این حذف به صورت واقعی نیست و صرفا جنبه ظاهری دارد، معمولا هدف از کاربرد این تگ در حالتی است که بخشی از یک مطلب منتشر شده در مدت زمانی قبل، اکنون معتبر و درست نباشد و از طرفی نخواهیم آن را به صورت کامل از سند حذف کنیم، نقطه مقابل تگ del تگ ins (برگرفته از عبارت Insert) است که جهت متمایز کردن متنی که به سند HTML اضافه شده باشد مورد استفاده قرار می گیرد، استفاده از این تگ ها با هدف مطلع کردن کاربر از تغییرات اعمال شده بعدی در سند HTML است و مرورگرها معمولا متن درون تگ del را با یک خط کشیده بر روی آن و با پس زمینه قرمز رنگ و متن درون تگ ins را با پس زمینه سبز رنگ نمایش می دهند.
در ویرایش های بعدی ممکن است عبارتی را در صفحه وب <del>حذف</del> یا به آن <ins>اضافه</ins> کنیم، نکته مهم اینکه این حذف و اضافه صرفا جنبه ظاهری دارد.
- تگ sub و sup
تگ sub (برگرفته از عبارت Subscript) جهت نمایش متن به صورت زیرنویس برای عبارت دیگر استفاده می شود، به طور معمول مرورگرها متن درون این تگ را از سایر کاراکترها یک سطح پائین تر نمایش می دهند که در نوشتن فرمول های ریاضی، شیمی و مواردی از این دست کاربرد دارد، تگ sup (برگرفته از عبارت Superscript) نیز جهت نمایش متن به صورت بالانویس برای عبارت دیگر استفاده می شود، مرورگرها متن درون این تگ را یک سطح بالاتر از سایر کاراکترها نمایش می دهند.
فرمول شیمیایی آب H<sub>2</sub>O است.<br>2<sup>4</sup> برابر است با مقدار 16.
برای تست این تکه کدها کافی است آنها را در یک صفحه HTML به صورت راست به چپ (RTL) قرار دهیم و در مرورگر حاصل کار را ببینیم.

ایجاد خط و فاصله با تگ hr و br در HTML


تگ hr برای ایجاد خط افقی (Horizontal) در HTML استفاده می شود که ویژگی های ظاهری آن به وسیله استایل CSS قابل تغییر است، تگ br نیز برای ایجاد و انتقال به سطر جدید یا Break کاربرد دارد، br جز متداول ترین تگ هایی است که در صفحات وب به کار می رود.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | ایجاد خط و فاصله در HTML</title>
<!-- Webgoo.ir -->
<style type="text/css">
body{
    direction:rtl;
}
</style>
</head>
<body>
<p>برای ایجاد خط افقی از تگ hr در HTML استفاده می کنیم.<hr>ویژگی های ظاهری این تگ به کمک استایل CSS قابل تغییر است.<br><br>
تگ br نیز برای ایجاد شکست یا رفتن به سطر جدید به کار می رود، مثال:<br>
خط 1<br>
خط 2
</p>
</body>
</html>
برای مشاهده و بررسی نمونه آنلاین لطفا به انتهای این آموزش مراجعه نمائید.

فرمت بندی با تگ p، pre و code


علاوه بر تگ هایی که تا کنون با آنها آشنا شدیم، موارد دارای اهمیت دیگری نیز در خصوص فرمت بندی وجود دارد که نیاز است با کاربرد آنها آشنا شویم، از این جمله است تگ p، pre و code که در ادامه این تگ ها را به صورت موردی بررسی می کنیم.
- تگ p
تگ p (برگرفته از عبارت Paragraph) برای ایجاد پاراگراف در سند HTML کاربرد دارد، پاراگراف در واقع بلاکی از محتوا است که با تگ p از بلاک های مجاور مجزا می شود، در استاندارد وب توصیه شده تا در مطالب طولانی از این شیوه استفاده و محتوا را به صورت پاراگراف های مختلف فرمت بندی کنیم، اهمیت این کار بیشتر در مواردی است که کاربر به هر دلیل قادر نیست تا از ماوس استفاده و با صفحه کلید بخش به بخش مطلب را مطالعه می کند، این حالت برای کاربرانی که از فناوری Screen-reading استفاده می کنند (به طور مثال کاربران نابینا) نیز امکان مناسبی است.
<p>تگ های p با فاصله ای پیش فرض از هم و از سایر عناصر صفحه نمایش داده می شوند.</p>
<p>فرمت بندی با تگ p اختیاری اما توصیه شده است.</p>
- تگ pre
تگ pre (برگرفته از عبارت Preformatted) برای ایجاد متن های از پیش فرمت بندی شده استفاده می شود، منظور از عبارت از پیش فرمت بندی شده این است که متن بدون هیچ گونه تغییری در ظاهر و بدون حذف فاصله های بین کلمات به همان صورتی که وارد سند HTML شده است توسط مرورگر پردازش شده و نمایش داده می شود، از این تگ معمولا برای نمایش کدها و اسکریپت ها در سایت های آموزش برنامه نویسی یا برای نمایش اشکالی که با کاراکترهای متنی ساخته شده اند، استفاده می کنند.
<pre>
فضای    خالی    بین    کلمات با تگ pre حفظ می شود.  
</pre>
- تگ code
تگ code برای درج کدهای برنامه نویسی به صورت خطی (Inline) کاربرد دارد، مرورگرها به صورت پیش فرض متن درون تگ code را به صورت فونت فشرده و متمایز نمایش می دهند.
تگ <code>code</code> برای درج کدهای برنامه نویسی در صفحات وب کاربرد دارد.
در صورتی که بخواهیم کدهای چند خطی یا طولانی را در صفحات وب درج کنیم، بهتر است تگ code را با تگ pre ترکیب نمائیم.
<pre>
<code>
<script type="text/javascript">
function checkLang(lang){
    switch(lang){
        case 'FA':
        return 'فارسی';
        break;
        case 'EN':
        return 'English';
        break;
        default:
        return 'فارسی';
    }
}
</script>
</code>
</pre>
برای نمایش کدها با جلوه و شکل ظاهری سفارشی باید از استایل CSS استفاده کنیم که در آموزش های مقدماتی پیش رو به صورت جداگانه در این خصوص صحبت خواهیم کرد.

مثال و پیش نمایش آنلاین


برای بررسی و درک بهتر فرمت بندی با تگ های b ،strong ،small ،i ،em ،mark ،del ،ins ،sub ،sup ،hr ،br ،p ، pre و code می توانیم مثال و پیش نمایش آنلاین آن را در صفحه وب زیر بررسی کنیم.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | فرمت بندی متن در HTML</title>
<!-- Webgoo.ir -->
<style type="text/css">
.rtl, p{
    direction:rtl;
}
.ltr{
    direction:ltr;
}
</style>
</head>
<body>
<p>
<strong>- فرمت بندی با تگ های b، strong و small</strong><br>
برای شروع برنامه نویسی وب ابتدا باید زبان نشانه گذاری <b>HTML</b> را بیاموزیم، <strong>HTML</strong> یکی از ساده ترین و شیرین ترین مباحث در فرآیند آموزش مهارتهای برنامه نویسی وب است.<br>
برای نمایش متن با اندازه <small>کوچکتر</small> از تگ small استفاده می کنیم.
</p>
<hr>
<p>
<strong>- فرمت بندی با تگ های i ،em ،mark ،del ،ins ،sub ،sup</strong><br>
تگ i متن را به صورت <i>کج شده</i> نمایش می دهد.<br>
تگ em برای <em>متمایز کردن عبارت دارای تاکید</em> استفاده می شود، جلوه ظاهری تگ em مشابه با تگ i است و متن را به صورت کج شده نمایش می دهد.<br>
جلوه ظاهری تگ <mark>mark</mark> مشابه ماژیک فسفری بر روی کاغذ است!<br>
در ویرایش های بعدی ممکن است عبارتی را در صفحه وب <del>حذف</del> یا به آن <ins>اضافه</ins> کنیم، نکته مهم اینکه این حذف و اضافه صرفا جنبه ظاهری دارد.<br>
فرمول شیمیایی آب H<sub>2</sub>O است.<br>2<sup>4</sup> برابر است با مقدار 16.
</p>
<hr>
<p>
<strong>- فرمت بندی با تگ pre و code</strong><br>
</p>
<p class="ltr">
<pre>
<code>
&lt;script type="text/javascript"&gt;
function checkLang(lang){
    switch(lang){
        case 'FA':
        return 'فارسی';
        break;
        case 'EN':
        return 'English';
        break;
        default:
        return 'فارسی';
    }
}
&lt;/script&gt;
</code>
</pre>
</p>
</body>
</html>
پیش نمایش آنلاین
sectionدسته بندی: آموزش مقدماتی » HTML
related مطالب بیشتر:
» تگ های اصلی و کلیدی HTML
» کاربرد تگ img و نمایش تصاویر در HTML
» آشنایی با HTML، زبان پایه کدنویسی وب
» کار با تگ های ایجاد کننده لیست در HTML
» لایه بندی در HTML با تگ div و span
commentنظرات (۲۶ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: roya
۱۷:۲۶ ۱۳۹۱/۱۰/۱۰
بازم خوب بود
نویسنده: مسعود
۲۰:۲۷ ۱۳۹۲/۰۶/۱۸
دمت گرم
نویسنده: خلیل
۱۷:۲۸ ۱۳۹۲/۰۷/۲۵
فدات خیلی خوب بود
نویسنده: یحیی
۰۶:۳۹ ۱۳۹۲/۰۹/۱۹
با عرض سلام و خسته نباشید
به چه صورت می توان پاراگراف را با خاصیت justify تنظیم کرد
پاسخ: 
برای این کار باید از استایل CSS استفاده کنید، مثال:
<div style="text-align:justify;">متن</div>
نویسنده: farzam
۲۰:۱۰ ۱۳۹۳/۰۱/۰۶
خوب بود مرسی
نویسنده: محمد
۰۱:۱۳ ۱۳۹۳/۰۳/۰۳
سلام
برای ویرایش متن از ویرایشگر Tiny استفاده کردم و با این ویرایشگر میشه رنگ دلخواه به متن داد
مسئله اینه که یک متن را که مثلا با رنگ سفید نوشته شده قرار است در دو جای مختلف نشان دهیم که یک جا پس زمینه سفیده جای دیگه مشکی
طبیعتا اونجایی که پس زمینه سفید است متن دیده نمیشه خب میشه یک تگ p یا span قرار دادن و رنگ را عوض کرد ولی مشکل اینجاست که این ویرایشگر برای رنگ دادن به متون از تگ span استفاده میکنه و به صورت درون خطی استایل میده که اولویت بالاتری داره چه جوری این مشکل رو حل کنم؟
پاسخ: 
زمانی که شما با یک ویرایشگر به متنی رنگ اختصاص می دهید، قاعدتا باید با توجه به یک پس زمینه این کار انجام شود (معمولا پس زمینه سفید)، این ویرایشگرها نیز با همین فرض به صورت خطی استایل را اختصاص می دهند، اگر قرار است مطلب در دو جا نمایش داده شود، یا باید دو مطلب مجزا باشد یا اینکه از امکان رنگ ویرایشگر استفاده نکنید (و استایل را به صورت CSS به بلاکی اختصاص دهید که کل مطالب درون آن نمایش داده می شود)، به هر حال در شرایط فعلی برای تغییر رنگ فونت راهی جزء استفاده از جاوا اسکریپت وجود ندارد.
نویسنده: زهرا
۰۷:۵۶ ۱۳۹۳/۰۵/۲۸
با سلام و تشکر از مطالب خوبتون
قصد تغییر سایز و رنگ description در متاتگ ها را داشتم چگونه این کار را انجام دهم لطفا من را راهنمایی نمایید ممنون از شما
پاسخ: 
سوالتان مبهم است!
متاتگ description هیچ جلوه بصری ندارد و در واقع صرفا برای پردازش ربات های جستجوگر در خروجی صفحه وجود دارد، کابران این متاتگ را به صورت مستقیم مشاهده نمی کنند.
نویسنده: محسن
۱۸:۵۴ ۱۳۹۴/۰۲/۲۶
سلام
می خواستم بدونم برای نوشتن این کدها باید به نوشتن حروف کوچیک و بزرگ دقت کنیم؟
پاسخ: 
خیر، الزامی نیست، اما بهتر است همیشه تگ ها را به حروف کوچک بنویسید.
نویسنده: M.D
۰۱:۳۹ ۱۳۹۴/۰۳/۲۲
با سلام و خسته نباشید و نیز تشکر از سایت خوبتون.
میخواستم یکسری اطلاعات ازکاربر گرفته بشه و به همون شیوه ای که مینویسه نمایش داده بشه. (یعنی بدون نیاز به کد <br> به خط بعد بره، از space به صورت متوالی و متعدد استفاده کنه و...) واسه همین دیدم این تگ مناسب ترین گزینه است. اما همانطور که می دونید، ایرادی که این تگ داره اینه که متن رو به صورت اتوماتیک نمیشکنه و همینطوری ادامه میده حتی اگر از گروهی که توشه بیرون بزنه.
می خواستم بدونم راهی هست که بشه این مشکل رو رفع کرد که متن به پایان div width که توشه میرسه به خط بعد بره؟ با CSS یا تعویض این تگ با یک تگ دیگه؟
ممنون میشم جوابم رو بدید
پاسخ: 
باید به چند نکته توجه کنید:
- تگ br یک خط جدید یا line break در سند HTML ایجاد می کند و این الزاما به عرض بلاک ارتباط ندارد (یعنی هر کجا از br استفاده کنیم، یک خط پائین تر می رویم!)
- به طور معمول نباید متن های داخل یک بلاک از عرض آن خارج شوند، مگر اینکه به فرض متن پیوسته و بدون فاصله بین حروف باشد، لذا حالتی که در سوالتان عنوان کردید، حالت عادی نیست!
- برای شکستن و نمایش دلخواه حروف در CSS می توانید از مقایدر زیر در استایل بلاک مورد نظر استفاده کنید:
word-wrap:break-word;
white-space:pre-line;
نویسنده: محمود
۱۰:۰۵ ۱۳۹۷/۰۴/۲۵
سلام استاد عزیز.
با تشکر از سایت خوب و پربارتان.
میخواستم یک پاراگراف را انتخاب (با های لایت کردن آن یا با رویدادهای دیگر در جاوا اسکریپت) ، با زدن یک دکمه آن را وارد یک textarea فرم کنم و هم انجا متن را تغییر و بعد از زدن دکمه تغییر، متن جدید به جای متن قبلی بشیند. دستور و کد دکمه که متن را وارد فرم textarea کنم باید چگونه باشد. لطفن راهنمایی کنید . خیلی دنبالش کشتم.
مثلن وارد همچین فرمی
<script type="application/javascript">
function getSelectionText(){
var text = "";
var activeEl = document.activeElement;
var activeElTagName = activeEl ? activeEl.tagName.toLowerCase() : null;

if((activeElTagName == "textarea")
|| (activeElTagName == "input"
&& /^(?:text|search|password|tel|url)$/i.test(activeEl.type))
&& (typeof activeEl.selectionStart == "number")){
text = activeEl.value.slice(activeEl.selectionStart, activeEl.selectionEnd);
} else if(window.getSelection){
text = window.getSelection().toString();
}

return text;
}

window.onload = function(){
var button_elm = document.getElementById('button');

button_elm.onclick = function(){
document.getElementById("textarea").innerHTML = getSelectionText();
};
}
</script>
<form id="form1" name="form1" action="#">
<textarea name="textarea" id="textarea"></textarea>
<input type="button" name="button" id="button" value="جاگذاری">
</form>
<p>این متن را انتخاب کنید!</p>
آیا امکانش هست . لطفن کمک و راهنمایی کنید.
پاسخ: 
انجام این موارد به ظاهر ساده نیازمند تسلط کامل بر جاوا اسکریپت است، کاری که می خواهید انجام دهید باید در چند مرحله مختلف صورت گیرد (انتخاب و انتقال به محیط ویرایش، ویرایش، انتقال به رنج انتخاب شده قبلی) که هر کدام از این مراحل باید جداگانه کدنویسی شوند و بعضا راه حل های پیچیده ای دارند، به هر صورت برای شروع مرحله انتخاب و انتقال به محیط ویرایش در کد بالا اعمال شده است.
نویسنده: محمود
۱۱:۵۶ ۱۳۹۷/۰۴/۲۵
استاد عزیز بسیار متشکرم. برای انتقال متن ویرایش شده به جای متن قبلی نیز تلاش خودم را می کنم . مگر باز مزاحمتان می شوم.
با تشکر بزرگواری کردید.
نویسنده: محمود
۱۱:۱۹ ۱۳۹۷/۰۵/۱۳
با سلامی دوباره.
از کمک ها و راهنمایی های شما استاد بزرگوار بی نهایت تشکر میکنم.
من به کد بالا کدهای زیر را اضافه کردم ولی همانطور که می بینید وقتی در textarea1 متن را تغییر می دهم بار اول کار می کند ولی برای متن های بعدی یا بارهای بعدی کار نمی کند منظورم این است که فقط یک بار عمل می کند خواهش می کنم شما هم کدها را امتحان کنید و کدها را به گونه ای تصحیح کنید تا هر متن را هر چند بار که میخواهیم تغییر و ویرایش کنیم.
از کمکتان بسیار سپاسگذاری می کنم.
حذف شد
پاسخ: 
سعی کنید در برنامه نویسی کدها را منظم تر و همراه با توضیحات بنویسید تا با افزایش تعداد توابع و خط ها دچار سردرگمی نشوید!
به نظر ایراد از تابع myFunction است که از متد value برای textarea استفاده کرده اید، برای textarea باید از متد innerHTML استفاده کنید، لذا این خط از کدها را به صورت زیر اصلاح نمائید.
function myFunction() {
var text = document.getElementById("textarea1").innerHTML;
document.getElementById("demo").innerHTML = text;
}
نویسنده: محمود
۱۱:۲۸ ۱۳۹۷/۰۵/۱۴
سلام .
از توصیه شما کمال تشکر را دارم.
تابع myFunction را با کدهای شما تعویض کردم ولی مشکل حل نشد. اگر کد ها را اجرا کرده باشید متوجه می شوید که برای بار اول متن در textarea جا می گیرد و ولی بعد از close و انتخاب متن دوم برای ویرایش، متن در textarea جای نگرفته است و متن قبلی هنوز در textarea است. به نظر می رسد که باید تابع getSelectionText را تغییراتی داد تا برای انتخاب های بعدی نیز متن را درون textarea جای بدهد ولی من نتوانستم این کار را انجام دهم. اگر ممکن است کمک کنید.
با تشکر.
پاسخ: 
کدها و راه حل تست شده است، با این حال اگر همچنان مشکلی وجود دارد لطفا فایل ها را از طریق ایمیل سایت (موجود در بخش تماس) ارسال نمائید تا مجددا بررسی گردد.
نویسنده: محمود
۰۹:۱۴ ۱۳۹۷/۰۵/۲۵
سلام .
مشکل این قسمت با جایگذاری value به جای innerHTML در قسمت
document.getElementById("demo").innerHTML = text;
حل شد یعنی کد بصورت زیر می بایست باشد.
document.getElementById("demo").value = text;
از سایت عالیتان و پاسخ و کمک هایتان چه بصورت ایمیل چه بصورت ارسال یاداشت متشکریم.
نویسنده: محمود
۱۱:۵۷ ۱۳۹۷/۰۶/۰۳
سلام.
من میخواستم محتوای موجود در یک div با آی دی مشخص را با فشردن یک دکمه کپی و به یک صفحه با آدرس مشخص پیست کنم و کد زیر را پیدا کردم .
<button onclick="copyToClipboard('#copy')">کپی لینک</button>
<div id="copy"><p id="hello">سلام دوستان</p></div>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).clone().html()).select();
document.execCommand("copy");
$temp.remove();
alert('کپی انجام شد');
}
</script>
ولی هر چند نوع که کد را تغییر دادم فقط می تواند متن را کپی کند و مثلن خانه های جدول را کپی نمی کند و فقط متن داخل آن را کپی می کند. متشکر می شوم راهنماییم کنید تا هرچه داخل div است را کپی و پیست کنم.
پاسخ: 
ابتدا باید قسمتی که می خواهید از محتوای آن کپی داشته باشید را درون یک تگ HTML دیگر با ID مشخص قرار دهید، سپس به جای متد text از متدهای clone و html استفاده کنید (کد بالا اصلاح شد).
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- موارد غیرمرتبط با مباحث آموزش ها را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ مختصر داده خواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- از درج عناوین تبلیغاتی در فیلدها خودداری کنید، در صورتی که یادداشت تبلیغاتی تشخیص داده شود حذف خواهد شد.
- تمام یادداشت ها بررسی و زمانی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد خودداری کنید.





2 × 5
 refresh

آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form محمد رستمی
در:
سلام اگه میشه لیست توابع و کاربردشونو توی یه فایل pdf بزارین
۱۳۹۹/۰۹/۰۵

form شهریار صادقی
در:
من سه تا صفحه در php storm درست کردم یکی برای html یکی برای جاوا اسکریپت و جی کوِئری و یکی هم برای css اول...
۱۳۹۹/۰۹/۰۱

form دوست خوب
در:
اگر بخواهیم برای رفتن به مرورگر و باز کردن یک صفحه لینک دهیم؟
۱۳۹۹/۰۹/۰۱

form مجتهدزاده خیاوی
در:
سلام و خسته نباشید من جدولی دارم که تعداد ستون های اون نسبتا زیاده. توی نمایشگر های دسکتاپ مشکلی ندارم اما تو گوشی و...
۱۳۹۹/۰۸/۲۹

form Alireza
در:
خیلی ممنون از پاسخگویی سریع! بله خوشبختانه سرور هاست دانلود LiteSpeed هست و از جدیدترین PHP هم پشتیبانی میکنه. تو قسمت path هم دایرکتوری...
۱۳۹۹/۰۸/۲۹

form Alireza
در:
عرض سلام و خسته نباشید از مطالب استفاده کردم و نظرات هم خوندم واقعا مفید بودن. یکی دو نفر مشکلی شبیه بنده داشتن. من...
۱۳۹۹/۰۸/۲۹

form امیرحسین
در:
سلام استاد عزیز وقت بخیر من یه سوال در مورد function use داشتم اگه ممکنه با مثالی کاربردی توضیح بدید که کارش چیه :...
۱۳۹۹/۰۸/۲۷

form Amin Eskandari
در:
سلام عالی بود ممنون
۱۳۹۹/۰۸/۲۷

form فاطمه
در:
چگونه در حلقه ها اعداد را جمع کنیم و در خروجی مجموع انان را نشان دهد مثلا جواب
۱۳۹۹/۰۸/۲۶

form میکاییل
در:
درسته مشکلی نیست تو ارسال اطلاعات. تنها مشکلم اینه که هدر عمل نمیکنه و ریدایرکت انجام نمیشه و نمیره سمت صفحه پرداخت. حالا نمیدونم به...
۱۳۹۹/۰۸/۲۵

form میکاییل
در:
سلام من تو قسمتی از صفحه پرداخت انلاین دارم همه چی درسته و اطلاعات بصورت ایجکسی ارسال میشه و سمت سرور نوشتم که هدر...
۱۳۹۹/۰۸/۲۵

form mohsen
در:
با عرض سلام و خسته نباشید خدمت استاد ببخشید من یه فرمی دارم که از طریق ایجکس ثبت میشه داخل دیتا و بعد میره به...
۱۳۹۹/۰۸/۲۳

form مجید
در:
سلام وقت بخیر . ببخشید نمیشه دیتابیس توی کدنویسی html ایجاد کنیم افرادی هستن توی محل کارش اینترنت ندارن . اینو باید چکارکنم
۱۳۹۹/۰۸/۲۳

form حسینی سیانکی
در:
سلام مطلب خیلی مفید و کاملی بود. خسته نباشید
۱۳۹۹/۰۸/۲۰

form ar
در:
سلام ممنون از سایت خوبتون ببخشید من تازه دارم زبان برنامه نویسی جاوااسکریپت رو یاد میگیرم و لپتاپم لپتاپ نسبتا ضعیفی هست من...
۱۳۹۹/۰۸/۲۰
form saba
در:
سلام من این کد رو در قسمت کد های اختصاصی کاربر وارد کردم اما هیچ تغییری ایجاد نشد ممکنه راهنمایی کنید؟
۱۳۹۹/۰۸/۱۹
form مینا
در:
سلام. من میخوام از regex توی ماشین حساب استفاده کنم ممنون میشم منو راهنمایی کنین
۱۳۹۹/۰۸/۱۹
form intal
در:
سلام خسته نباشید من واقعا از وبگو ممنونم که این آموزش های ارزشمند رو در اختیار کاربران قرار میده راستش من هرکاری می کنم پوزیشن...
۱۳۹۹/۰۸/۱۷
form بهروز
در:
مهندس جان خیلی عالی بود دستت درد نکنه درست شد.
۱۳۹۹/۰۸/۱۷
form اصغر
در:
خوندمش خیلی ممنون مفید بود
۱۳۹۹/۰۸/۱۵
form بهروز
در:
ممنون، خیلی لطف کردید، چشم امتحان میکنم خبر میدم فقط یه موری رو یادم رفت عرض کنم اینکه مثلا لینک exm.ir/m/yyyy به...
۱۳۹۹/۰۸/۱۴
form بهروز
در:
ممنون از پاسخگویی سریعتان در سوال فوق yyyy متغیر هست یعنی هرسری یه عددی کلیک میشه مثلا exm.ir/1234 حالا میخوام ریدایرکت بشه به آدرس...
۱۳۹۹/۰۸/۱۴
form بهروز
در:
سلام اگه بخوام ادرس 1 رو به ادرس دو ریدایرکت کنم چطور انجام دهم:
۱۳۹۹/۰۸/۱۴
form Mori
در:
سلام. میخواستم بدونم که چگونه در html میشه چند لیست عمودی رو کنار هم قرار داد. یعنی در واقع لیست ها زیر هم نباشند. ...
۱۳۹۹/۰۸/۱۰
form مبین
در:
با سلام من می خواستم دستوری در دیتابیس بنویسم که بر اساس قد افراد نتایج را مرتب و چاپ کند و اگه قد برار بود...
۱۳۹۹/۰۸/۰۹
form عباس علیمردانی
در:
سلام. من یک سوال یا بهتر بگم خواهش داشتم ایا شما میتوانید وبلاگ رو فیلتر کنید؟ یعنی با حکم قضایی فیلتر بشه. وبلاگ برایه...
۱۳۹۹/۰۸/۰۹
form ابوالفضل
در:
سلام استاد اومدم امروز بعد از سالها سوالاتی که از شما استاد بزرگوارم میپرسیدم رو زیر این پست مرور می کردم واقعا چقدر مبتدی...
۱۳۹۹/۰۸/۰۹
form mahtab
در:
سلام وقتتون بخیر ببخشید من میخوام یه آهنگی رو بزارم وبم کدش تو اینترنت زدم اما نیاورد بی زحمت میشه راهنمایی کنین چجوری...
۱۳۹۹/۰۸/۰۸
form Mori
در:
بهترین سایت برنامه نویسی در ایران هستید
۱۳۹۹/۰۸/۰۷
form Mori
در:
سلام. چگونه باید در لیست برای هر کدام از اعضا به صورت جداگانه لینک بگذاریم؟؟
۱۳۹۹/۰۸/۰۷
form جیهوپ
در:
سلام استاد عزیز من میخواستم صفحه وبی ایجاد کنم مثل این صفحه وبی ایجاد کنید که مشخصات شما را در 3 پاراگراف با ویژگی...
۱۳۹۹/۰۸/۰۶
  در انتظار بررسی: ۲
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.