آموزش برنامه نویسی وب و مهارتهای مرتبط
پنجشنبه ۰۴ اردیبهشت ۱۴۰۴
Thursday, April 24, 2025 GMT +3:30
Thursday, April 24, 2025 GMT +3:30
فرمت بندی و کار با متن و پاراگراف در HTML
تا این مرحله از آموزش مقدماتی 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 جهت متمایز کردن عباراتی که دارای اهمیت و تاکید هستند کاربرد دارد، جلوه ظاهری این تگ مشابه تگ i است اما کاربرد آن از نظر HTML معنایی متفاوت است، هدف از تگ i عموما صرفا جنبه ظاهری و نمایشی آن است اما تگ em بیش از جنبه ظاهری جنبه معنایی دارد و برای انسان و ماشین این مفهوم را القا می کند که کلمه مورد نظر دارای تاکید است و باید به صورت موکد (Emphasis) تلفظ یا پردازش شود.
تگ em برای <em>متمایز کردن عبارت دارای تاکید</em> استفاده می شود، جلوه ظاهری تگ em مشابه با تگ i است و متن را به صورت کج شده نمایش می دهد.تگ mark جهت متمایز کردن متن با پس زمینه درخشان مورد استفاده قرار می گیرد، از این تگ معمولا برای نشانه گذاری عبارت مورد نظر یا متن دارای اهمیت بهره می گیریم.
جلوه ظاهری تگ <mark>mark</mark> مشابه ماژیک فسفری بر روی کاغذ است!تگ del (برگرفته از عبارت Delete) جهت متمایز کردن متنی که از سند HTML حذف شده باشد مورد استفاده قرار می گیرد، البته این حذف به صورت واقعی نیست و صرفا جنبه ظاهری دارد، معمولا هدف از کاربرد این تگ در حالتی است که بخشی از یک مطلب منتشر شده در مدت زمانی قبل، اکنون معتبر و درست نباشد و از طرفی نخواهیم آن را به صورت کامل از سند حذف کنیم، نقطه مقابل تگ del تگ ins (برگرفته از عبارت Insert) است که جهت متمایز کردن متنی که به سند HTML اضافه شده باشد مورد استفاده قرار می گیرد، استفاده از این تگ ها با هدف مطلع کردن کاربر از تغییرات اعمال شده بعدی در سند HTML است و مرورگرها معمولا متن درون تگ del را با یک خط کشیده بر روی آن و با پس زمینه قرمز رنگ و متن درون تگ ins را با پس زمینه سبز رنگ نمایش می دهند.
در ویرایش های بعدی ممکن است عبارتی را در صفحه وب <del>حذف</del> یا به آن <ins>اضافه</ins> کنیم، نکته مهم اینکه این حذف و اضافه صرفا جنبه ظاهری دارد.تگ sub (برگرفته از عبارت Subscript) جهت نمایش متن به صورت زیرنویس برای عبارت دیگر استفاده می شود، به طور معمول مرورگرها متن درون این تگ را از سایر کاراکترها یک سطح پائین تر نمایش می دهند که در نوشتن فرمول های ریاضی، شیمی و مواردی از این دست کاربرد دارد، تگ sup (برگرفته از عبارت Superscript) نیز جهت نمایش متن به صورت بالانویس برای عبارت دیگر استفاده می شود، مرورگرها متن درون این تگ را یک سطح بالاتر از سایر کاراکترها نمایش می دهند.
فرمول شیمیایی آب H<sub>2</sub>O است.<br>2<sup>4</sup> برابر است با مقدار 16.ایجاد خط و فاصله با تگ 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 (برگرفته از عبارت Preformatted) برای ایجاد متن های از پیش فرمت بندی شده استفاده می شود، منظور از عبارت از پیش فرمت بندی شده این است که متن بدون هیچ گونه تغییری در ظاهر و بدون حذف فاصله های بین کلمات به همان صورتی که وارد سند HTML شده است توسط مرورگر پردازش شده و نمایش داده می شود، از این تگ معمولا برای نمایش کدها و اسکریپت ها در سایت های آموزش برنامه نویسی یا برای نمایش اشکالی که با کاراکترهای متنی ساخته شده اند، استفاده می کنند.
<pre>
فضای خالی بین کلمات با تگ pre حفظ می شود.
</pre>تگ code برای درج کدهای برنامه نویسی به صورت خطی (Inline) کاربرد دارد، مرورگرها به صورت پیش فرض متن درون تگ code را به صورت فونت فشرده و متمایز نمایش می دهند.
تگ <code>code</code> برای درج کدهای برنامه نویسی در صفحات وب کاربرد دارد.<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>مثال و پیش نمایش آنلاین
برای بررسی و درک بهتر فرمت بندی با تگ های 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>
<script type="text/javascript">
function checkLang(lang){
switch(lang){
case 'FA':
return 'فارسی';
break;
case 'EN':
return 'English';
break;
default:
return 'فارسی';
}
}
</script>
</code>
</pre>
</p>
</body>
</html>دسته بندی: آموزش مقدماتی » HTML
برچسب ها: HTML
مطالب بیشتر:تگ های اصلی و کلیدی HTML
متاتگ ها (Meta Tags) و کاربرد آنها در صفحات وب (HTML)
ایجاد جدول با تگ table در HTML
کار با تگ های ایجاد کننده لیست در HTML
آشنایی با مفهوم Semantic در HTML
دیدگاه
۳۸ دیدگاه برای این مطلب ارسال شده است. چینش دیدگاه ها به ترتیب از جدیدترین به قدیمی ترین است.یحیی
۱۸:۲۶ ۱۴۰۳/۱۲/۰۹
عالی بود.
محمد متین دقتی
۱۴:۰۹ ۱۴۰۱/۰۴/۱۴
ببخشید چجوری میتونم یک متن هایی که پشت سر هم نیستن و تموم نشده میرن خط بعدی بنویسم اخه هرچی تگ مینزم میبره پشت سر هم
برای رفتن به خط بعدی هر کجا نیاز بود می توانید از تگ br استفاده کنید، به فرض:
Sample Text<br>
Sample Text<br>یاسمن
۲۳:۰۸ ۱۴۰۱/۰۳/۱۱
سلام ببخشید یه سوال داشتم یه لینک نوشتم که وقتی متن لینک بیشتر میشود میره خط بعدی واسه جلوگیری از این کار باید از چه property استفاده کنم
برای جلوگیری از شکستن متن در خط جدید می توانید اندازه width بلاک دربرگیرنده لینک را افزایش دهید یا از خاصیت white-space با مقادیر nowrap در CSS استفاده کنید:
.link-class {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}بهار
۱۷:۰۴ ۱۴۰۱/۰۲/۲۶
سلام
من تازه شروع کردم به یادگیری html مشکلم اینه که وقتی در تگ p متن فارسی مینویسم برای ویرایش خطاهای املایی پوینتر موس فقط در ابتدا و انتهای متن قرار میگیره و نمیتونم اون رو داخل متن حرکت بدم. چکار کنم؟ و اینکه کلمات لاتین داخل متن فارسی در جای درست قرار نمیگیرن در خروجی کدها. لطفاً راهنمایی کنید.
ممنون از سایت خوبتون
من تازه شروع کردم به یادگیری html مشکلم اینه که وقتی در تگ p متن فارسی مینویسم برای ویرایش خطاهای املایی پوینتر موس فقط در ابتدا و انتهای متن قرار میگیره و نمیتونم اون رو داخل متن حرکت بدم. چکار کنم؟ و اینکه کلمات لاتین داخل متن فارسی در جای درست قرار نمیگیرن در خروجی کدها. لطفاً راهنمایی کنید.
ممنون از سایت خوبتون
برای سازگاری صفحه وب با حروف فارسی می توانید تگ p را به صورت زیر بنویسید:
<p style="direction: rtl;">متن فارسی</p>H
۱۰:۱۸ ۱۴۰۰/۰۹/۱۴
سلام. ببخشید من از ویو استفاده میکنم و وقتی میخوام از تابع جوین برای نمایش یه ارایه استفاده کنم و بینشون از بریکلاین استفاده میکنم جواب نمیده ممنون میشم راهنمایی کنین. ببنید من یه اینستنس ویو استفاده کردم به اسم people و میخوام تو صفحه اچ تی ام ال هر کدوم تو یه خط باشه و این کد جواب نمیده
{{people. Join('<br>')}}یک فاصله اضافی در فراخوانی متد join وجود دارد، همچنین متد را تماما با حروف کوچک بنویسید (البته ما با فریم ورک Vue.js کار نمی کنیم و از حساس یا غیرحساس بودن متدهای آن مطمئن نیستیم اما بهتر است متدها با حروف کوچک باشند):
{{people.join("<br>")}}الی
۱۳:۴۱ ۱۴۰۰/۰۳/۱۸
سلام وقت بخیر
من میخوام یه سایت طراحی کنم و در قسمت هدر یه گیف بذارم ولی هر کار می کنم گیف نمایش داده نمیشه. کلا عکس و رنگ بکگراند و حتی body رو با div تقسیم بندی میکنم هیچ کدوم اعمال نمیشن. من از notepad++ استفاده می کنم. اینم بگم اولین بار میخوام شروع به این کار کنم و مبتدی هستم. لطفا راهنمایی کنید.
من میخوام یه سایت طراحی کنم و در قسمت هدر یه گیف بذارم ولی هر کار می کنم گیف نمایش داده نمیشه. کلا عکس و رنگ بکگراند و حتی body رو با div تقسیم بندی میکنم هیچ کدوم اعمال نمیشن. من از notepad++ استفاده می کنم. اینم بگم اولین بار میخوام شروع به این کار کنم و مبتدی هستم. لطفا راهنمایی کنید.
کدنویسی سورس صفحه باید بررسی شود، در صورت تمایل فایل HTML را ترجیحا به صورت فشرده (فرمت zip) به آدرس ایمیل ما (موجود در بخش تماس) ارسال و پاسخ را از همان طریق پیگیر باشید یا اینکه لینک آنلاین صفحه را درج کنید.
یاس
۲۱:۴۷ ۱۴۰۰/۰۳/۰۸
سلام میخواستم بدونم چجوری باید فایل متنی HTML دارای هایپرلینک را باز کند و محتوای آنرا بخواند و سپس هایپرلینک های آن را شناسایی کند و انها را در فایل A.TXT بنویسد
برای این کار باید از برنامه نویسی سمت سرور مانند زبان PHP استفاده کنید، مثال:
<?php
function linkExtractor($html) {
$link_array = array();
if(preg_match_all('/<a\s+.*?href=[\"\']?([^\"\' >]*)[\"\']?[^>]*>(.*?)<\/a>/i', $html, $matches, PREG_SET_ORDER)) {
foreach($matches as $match) {
array_push($link_array, array($match[1], $match[2]));
}
}
return $link_array;
}
$html = file_get_contents('file.html');
$array = linkExtractor($html);
$result = '';
foreach($array as $key => $value){
$result .= $value . "\n";
}
file_put_contents('file.txt', $result);
?>محمد بیدل بازه
۰۱:۲۱ ۱۳۹۹/۱۰/۲۵
سلام خسته نباشید
ببخشید من توی یک قسمت سایتم تصویری دارم و میخوام سمت راست اون تصویر متن بنویسم ولی نمیشه تا متن رو مینویسم اون قسمت سایت یا تصویر بالا و پایین میره کلا توی هر قسمت میخوام متن بنویسم توی هدر یا فوتر اونجا به هم میریزه و جابه جا میشه.
ممنون میشم راهنمایی کنین.
ببخشید من توی یک قسمت سایتم تصویری دارم و میخوام سمت راست اون تصویر متن بنویسم ولی نمیشه تا متن رو مینویسم اون قسمت سایت یا تصویر بالا و پایین میره کلا توی هر قسمت میخوام متن بنویسم توی هدر یا فوتر اونجا به هم میریزه و جابه جا میشه.
ممنون میشم راهنمایی کنین.
برای نمایش متن در کنار تصویر و... باید با کدنویسی HTML و CSS بلاک ها را در کنار هم (یا بر روی هم) چینش کنید، برای راهنمایی بیشتر لطفا آدرس صفحه به همراه اسکرین شات از مشکل و نتیجه مد نظرتان را ارسال کنید تا امکان بررسی و اصلاح صفحه وجود داشته باشد.
۲۳:۵۵ ۱۳۹۹/۱۰/۲۴
و اینکه یه تگ خوب برای فونت معرفی کنید و یه تگ دیگه که متن رو (تیتر مطلب (تست)) در ادامش بنویسه
نه اینکه مثل الان که هست تا یه قسمتش رفته بعد برای ادامش رفته خط بعد یعنی تا انتهای اون قسمت متن (تیتر مطلب) رو ادامه نداده!!!
نه اینکه مثل الان که هست تا یه قسمتش رفته بعد برای ادامش رفته خط بعد یعنی تا انتهای اون قسمت متن (تیتر مطلب) رو ادامه نداده!!!
این موارد نیاز به ویرایش کد قالبتان دارد و فرآیندی زمانبر است!
برای فونت باید با خاصیت font-face در CSS آشنا باشید، در اینصورت می توانید از انواع فونت های فارسی برای صفحات وب استفاده کنید.
برای فونت باید با خاصیت font-face در CSS آشنا باشید، در اینصورت می توانید از انواع فونت های فارسی برای صفحات وب استفاده کنید.
۲۳:۱۱ ۱۳۹۹/۱۰/۲۴
سلام
وبسایتم را نگاه کنید
از چه تگی استفاده کنم تا فاصله بین تیتر مطلب جدید را کاهش دهم؟ (از خطی به خط بعدی فاصله زیادی دارد!)
وبسایتم را نگاه کنید
از چه تگی استفاده کنم تا فاصله بین تیتر مطلب جدید را کاهش دهم؟ (از خطی به خط بعدی فاصله زیادی دارد!)
کد زیر را قبل از بسته شده تگ head (تگ head قبل از شروع تگ body بسته می شود) در قسمت ویرایش قالب درج کنید:
<style>
.naq-entry-post > article .entry-title {
line-height: 0.9em;
}
</style>محمود
۱۳:۲۵ ۱۳۹۹/۱۰/۲۱
سلام و عرض ادب
من در سایتم یک قسمت تب ایجاد کردم، متن ها را که در تب می نویسم پاراگراف بندی نمی شوند. یعنی موقع نوشتن بعد هر پاراگراف اینتر را می زنم ولی در خروجی توی سایت پشت سرهم و بدون پاراگراف بندی دیده می شوند. اینطور فکر می کنم شاید تو تکس ترا نوشتن همینطوری است. لطفن راهنمایی کنید تا پاراگراف بندی متن هام درست شوند. مثلن با اضافه کردن کد CSS یا ...
با تشکر
من در سایتم یک قسمت تب ایجاد کردم، متن ها را که در تب می نویسم پاراگراف بندی نمی شوند. یعنی موقع نوشتن بعد هر پاراگراف اینتر را می زنم ولی در خروجی توی سایت پشت سرهم و بدون پاراگراف بندی دیده می شوند. اینطور فکر می کنم شاید تو تکس ترا نوشتن همینطوری است. لطفن راهنمایی کنید تا پاراگراف بندی متن هام درست شوند. مثلن با اضافه کردن کد CSS یا ...
با تشکر
پاراگراف بندی به طور مستقیم به خروجی HTML قسمت ارتباط دارد، اگر در خروجی برای خط جدید تگ br وجود ندارد می توانید تابع nl2br را امتحان کنید، قبل از ذخیره مقادیر در دیتابیس (یا نمایش آنها) متن را از فیلتر این تابع عبور دهید، مثال:
<?php
$str = "your\ntextarea\ntext";
$str = nl2br($str, false);
?>https://www.php.net/manual/en/function.nl2br.phpرقیه
۱۲:۴۲ ۱۳۹۹/۰۹/۱۶
با سلام خیلی ممنون از مطالب خوبتون
من هر محتوایی که از بخش مدیریت سایت وارد میکنم در اون قسمت سایت به همان شکل ظاهر نمیشه یعنی نقطه سرخط نمیره یا عنوان هارو بولد نشون نمیده با تگ pre هم کار کردنی قالب سایت بهم میریزه میشه راهنمایی کنید لطفا
من هر محتوایی که از بخش مدیریت سایت وارد میکنم در اون قسمت سایت به همان شکل ظاهر نمیشه یعنی نقطه سرخط نمیره یا عنوان هارو بولد نشون نمیده با تگ pre هم کار کردنی قالب سایت بهم میریزه میشه راهنمایی کنید لطفا
به نظر خروجی HTML ویرایشگر سایت دچار اشکال است یا به هر دلیل سورس کد نهایی به درستی ذخیره نمی شود، سعی کنید از قسمت مشاهده منبع HTML (یا دکمه هایی به نام های مشابه) خروجی HTML تولید شده برنامه ویرایشگر ارسال مطلب سایتتان را بررسی کنید، به فرض متن برجسته باید بین تگ های strong یا b قرار گرفته باشد و به همان صورت در سورس کد خروجی سایت دیده شود، در صورت تمایل آدرس یک نمونه صفحه از سایت را جهت بررسی بیشتر ارسال کنید.
جیهوپ
۱۴:۳۸ ۱۳۹۹/۰۸/۰۶
سلام استاد عزیز
من میخواستم صفحه وبی ایجاد کنم مثل این صفحه وبی ایجاد کنید که مشخصات شما را در 3 پاراگراف با ویژگی های زیر نمایش دهد:
ضمنا پاراگرافها در یک تگ نوشته شود و با استفاده از عنصر خط شکسته شود و بین جملات خط ایجاد شود.
مشخصات پاراگراف 1: رنگ قرمز؛ وسط چین، با نوشته کاملا توپر، ایجاد توضیحات
من میخواستم صفحه وبی ایجاد کنم مثل این صفحه وبی ایجاد کنید که مشخصات شما را در 3 پاراگراف با ویژگی های زیر نمایش دهد:
ضمنا پاراگرافها در یک تگ نوشته شود و با استفاده از عنصر خط شکسته شود و بین جملات خط ایجاد شود.
مشخصات پاراگراف 1: رنگ قرمز؛ وسط چین، با نوشته کاملا توپر، ایجاد توضیحات
بهتر بود یک نمونه خروجی به صورت تصویر در برنامه هایی نظیر فتوشاپ تهیه می کردید تا منظور سوال دقیقتر مشخص می شد، به هر صورت با توجه به توضیحات به نظر کدنویسی صفحه زیر می تواند کمک کند:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>عنوان صفحه وب</title>
<!-- Webgoo.ir -->
<style>
div {
display: block;
text-align: center;
width: 600px;
height: 300px;
background: #F00;
color: #FFF;
border: 2px solid #FCC;
margin: 0 auto;
padding: 8px 4px;
}
p {
margin: 0;
padding: 0;
}
hr {
display: block;
width: 100%;
border-bottom: 1px dashed #FFF;
margin: 8px 0;
}
</style>
</head>
<body>
<div>
<p>
نمونه متن
</p>
<hr>
<p>
نمونه متن
</p>
<hr>
<p>
نمونه متن
</p>
</div>
</body>
</html>
</html>سینا
۱۱:۳۷ ۱۳۹۹/۰۷/۲۱
چگونه میتوانیم با استفاده از HTML فرمول شیمیایی مواد را بنویسیم؟ با عدد اتمی، جرمی و بار اتمی
HTML به تنهایی قابلیت ایجاد فرومول های شیمیایی را ندارد، یک اسکرین شات از فرمول مورد نظر تهیه، در سایت های میزبان فایل آپلود و لینک تصویر را ارسال کنید تا با ترکیب HTML و CSS نمونه کد برای آن نوشته شود.
ابوالفضل
۱۵:۵۱ ۱۳۹۹/۰۷/۱۳
سلام یک سوال دارم
چجوری یک متنی که درون تگ td هست و بعد تگ br هست (تگ br درون تگ td است) رو استایل بدیم بهش مثلا رنگشو تغییر بدیم...
متن های قبل تگ br که درون td ها هستن رو انتخاب نکنه...
لطفا زود جواب بدین... منتظرم...
چجوری یک متنی که درون تگ td هست و بعد تگ br هست (تگ br درون تگ td است) رو استایل بدیم بهش مثلا رنگشو تغییر بدیم...
متن های قبل تگ br که درون td ها هستن رو انتخاب نکنه...
لطفا زود جواب بدین... منتظرم...
برای تجزیه متن درون تگ td و اختصاص استایل دلخواه باید از جاوا اسکریپت کمک بگیریم، مثال:
<style>
table, tr, td {
border: 1px solid #E5E5E5;
}
.br-text {
color: #c00;
}
</style>
<table>
<tr>
<td>text<br>text<br>text</td>
<td>text<br>text</td>
<td>text<br>text<br>text<br>text</td>
</tr>
</table>
<script>
var cells = document.getElementsByTagName('td'), i, array, s, text;
for(i = 0; i < cells.length; i++){
array = cells[i].innerHTML.split("<br>");
text = '';
for(s = 0; s < array.length; s++){
if(s == 0){
text = array[s];
}
if((s + 1) < array.length){
text += '<br><span class="br-text">' + array[s + 1] + '</span>';
}
}
cells[i].innerHTML = text;
}
</script>
صفحه 1 از 3 محتوا در وبگو به صورت تألیفی تهیه می شود و دارای حق تألیف است، در صورت نیاز به کپی برداری لطفا ابتدا "شرایط استفاده" را مطالعه کنید.
خدمات و راه های ارتباطی ما صرفا تحت دامنه Webgoo.ir ارائه و اطلاع رسانی می شوند، صفحات یا عناوین مشابه مورد تائید نمی باشند.
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.