بدون شک بیشترین محتوای یک صفحه وب را متن تشکیل می دهد و نحوه نگارش آن تأثیر بسزایی در جذب مخاطب و بهبود وبسایت شما در موتورهای جستجویی مانند گوگل دارد بطوریکه حتی مقاله نویسی (تولید محتوای متنی) به یکی از مشاغل درآمدزا در اینترنت تبدیل شده است.
ایجاد پاراگراف
پاراگراف بدنه اصلی یک متن (نوشته) می باشد که توسط تگ <p> می توان آن را ایجاد نمود. این تگ یک عنصر بلاکی می باشد، به این معنی که هنگام استفاده از این تگ، کل سطر اشغال شده (حتی اگر محتوای این تک بخشی از سطر را پوشانده باشد( و بصورت پیشفرض عنصر دیگری نمی توان در مجاورت آن قرار داد.
<p> welcome to beno academy</p>
استفاده از تیتر ها (heading)
در html بنا بر اولویت می توان از 6 نوع تیتر استفاده کرد که برای ایجاد آنها می توان از تگ های <h1> تا <h6> استفاده نمود. تگ <h1> دارای بالاترین اولویت و <h6> دارای کمترین اولویت می باشد.
<h1> Heading 1</h1>
<h3> Heading 2</h3>
<h3> Heading 3</h3>
<h3> Heading 4</h3>
<h3> Heading 5</h3>
<h5> Heading 6</h5>
ایجاد خط افقی
یکی از روش های جدا سازی بخش ها، استفاده از خط جدا کننده (افقی) می باشد که توسط تگ <hr /> می توان آن را ایجاد نمود، این تگ، از نوع تکی بوده و تگ بسته ندارد.
<p>paragraph 1</p>
<hr />
<p>paragraph 2</p>
انتقال به خط بعدی
هنگامی که متنی داخل تگ <p> قرار می گیرد، بصورت پیش فرض آن را یک پاراگراف در نظر می گیرد. فاصله ی بین پارگراف ها از فاصله بین خطوط موجود در یک پاراگراف بیشتر است. اگر قصد داشته باشید محتوای یک پاراگراف، با حفظ فاصله خطوط آن به خط بعدی منتقل شود، می توانید از تگ <br /> استفاده نمایید.
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
<br />
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
تمرین
صفحه ای ایجاد نمایید که حاوی دو تیتر بوده و هر تیتر دارای یک پاراگراف باشد. این دو بخش را توسط یک خط افقی از هم جدا کنید.
<!DOCTYPE html>
<html>
<head>
<title>آکادمی بنو</title>
</head>
<body>
<h1>برنامه نویسی</h1>
<p>
لورم ایپسوم یا طرح‌نما به متنی آزمایشی و بی‌معنی
در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود. طراح گرافیک از این متن
به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و
کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی
نوع و اندازه فونت و ظاهر متن باشد. معمولا طراحان گرافیک برای صفحه‌آرایی،
نخست از متن‌های آزمایشی و بی‌معنی استفاده می‌کنند تا صرفا به مشتری یا صاحب
کار خود نشان دهند که صفحه طراحی یا صفحه بندی شده بعد از اینکه متن در آن
قرار گیرد چگونه به نظر می‌رسد و قلم‌ها و اندازه‌بندی‌ها چگونه در نظر گرفته
شده‌است. از آنجایی که طراحان عموما نویسنده متن نیستند و وظیفه رعایت حق
تکثیر متون را ندارند و در همان حال کار آنها به نوعی وابسته به متن می‌باشد
آنها با استفاده از محتویات ساختگی، صفحه گرافیکی خود را صفحه‌آرایی می‌کنند
تا مرحله طراحی و صفحه‌بندی را به پایان برند.
</p>
<hr />
<h3>طراحی سایت</h3>
<p>
لورم ایپسوم یا طرح‌نما به متنی آزمایشی و بی‌معنی
در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود. طراح گرافیک از این متن
به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و
کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی
نوع و اندازه فونت و ظاهر متن باشد. معمولا طراحان گرافیک برای صفحه‌آرایی،
نخست از متن‌های آزمایشی و بی‌معنی استفاده می‌کنند تا صرفا به مشتری یا صاحب
کار خود نشان دهند که صفحه طراحی یا صفحه بندی شده بعد از اینکه متن در آن
قرار گیرد چگونه به نظر می‌رسد و قلم‌ها و اندازه‌بندی‌ها چگونه در نظر گرفته
شده‌است. از آنجایی که طراحان عموما نویسنده متن نیستند و وظیفه رعایت حق
تکثیر متون را ندارند و در همان حال کار آنها به نوعی وابسته به متن می‌باشد
آنها با استفاده از محتویات ساختگی، صفحه گرافیکی خود را صفحه‌آرایی می‌کنند
تا مرحله طراحی و صفحه‌بندی را به پایان برند.
</p>
</body>
</html>
هر تگ html دارای تعدادی attribute (ویژگی) می باشد که توسط آن می توان تنظیمات مربوط به آن را انجام داد. برخی از این attribute ها بین عناصر مختلف مشترک بوده و برخی دیگر مختص همان تگ می باشد.
نحوه استفاده
Attribute های html درون تگ باز تعریف شده و مقدار دهی آن نیز با علامت مساوی انجام می گیرد. مقداری که برای هر attribute تعیین می گردد می بایست داخل علامت " " باشد.
<p id="paragraph1">
</p>
Attribute هایی که بین تمامی عناصر مشترک می باشند عبارتند از:
<p id="p1" style="color:red" class="description-paragraph">
</p>
البته علاوه بر attribute های فوق، تعداد دیگری از attribute ها برای تنظیماتی مانند عرض، ارتفاع، رنگ و ... وجود دارد که پیشنهاد می شود این تنظیمات توسط css انجام پذیرد.
قواعد تعیین id
id مهمترین attribute در html می باشد که شناسه منحصر به فرد هر عنصر در صفحه می باشد. هیچ دو عنصری نباید دارای id مشترک باشند و هنگام تعیین id می بایست قوانین زیر را رعایت کنید.
