هدایای ویژه طراحی سایت

جذاب ترین کدهای HTML برای بهبود ظاهر صفحات وب

امین هوشمند
یک کامنت
بروزرسانی: ۲۳ خرداد, ۱۴۰۲

اگر این مقاله را دوست دارید، لطفا آن را با دوستان خود به اشتراک بگذارید.

HTML یکی از زبان‌های مورد استفاده در طراحی صفحات وب است. با استفاده از کد های HTML، می توانید صفحه ای زیبا، جذاب و قابل دسترس برای کاربران خود بسازید. در این مقاله، به بررسی برخی از جذاب ترین کدهای HTML می پردازیم که می توانید از آنها برای بهبود ظاهر صفحات وب خود استفاده کنید.

۱. عنوان با نوشته بزرگ:

عنوان صفحات وب بسیار مهم است و نوشتن آن با اندازه مناسب، می تواند تاثیر بسیاری در جذابیت و بصری بودن صفحه شما داشته باشد. برای نوشتن عنوان با اندازه بزرگ، از کد زیر استفاده کنید:

<h1 style="font-size: 48px;">This is a big title</h1>

۲. تصویر با لینک:

اضافه کردن تصویر به صفحات وب می تواند بسیاری به جذابیت آن بیفزاید. برای اضافه کردن تصویر به همراه لینک، از کد زیر استفاده کنید:

<a href="https://www.example.com">
<img src="image.jpg" alt="description">
</a>

۳. جعبه‌ای با پس زمینه رنگی:

استفاده از جعبه‌های دارای پس زمینه رنگی می تواند به قسمت‌هایی از صفحه شما که مهم هستند، بیشتر توجه کاربران را جلب کند. برای ساخت یک جعبه دارای پس زمینه رنگی، از کد زیر استفاده کنید:

<div style="background-color: #f2f2f2; padding: 20px;">
<p>This is a box with colored background</p>
</div>

۴. فهرست شماره‌دار:

استفاده از فهرست‌های شماره‌دار به ترتیب، می تواند مطالب شما را برای کاربران بهتر سازماندهی کند. برای ساخت یک فهرست شماره‌دار، از کد زیر استفاده کنید:

<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>

۵. فهرست نشانه‌دار:

فهرست‌های نشانه دار ویژگی‌های مشابهی با فهرست شماره‌دار دارند ولی به جای استفاده از اعداد، از نشانه های خاصی مثل نقطه، دایره و تیک استفاده می شود. برای ساخت یک فهرست نشانه‌دار، از کد زیر استفاده کنید:

</pre>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
<pre>

۶. فیلد فرم با نوع رمزنگاری شده:

افزودن فرم به صفحات وب، می تواند کاربران را قادر به ارتباط با شما کند و باعث شود تا اطلاعات بیشتری درباره آن‌ها به دست بیاید. برای ساخت یک فرم با فیلد‌های رمزنگاری شده، از کد زیر استفاده کنید:

<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<input type="submit" value="Submit">
</form>

۷. لینک با تغییر رنگ در هاور کردن:

تغییر رنگ لینک‌ها هنگامی که موس روی آنها قرار می‌گیرد (هاور کردن)، می تواند به کاربران نشان دهد که لینکی قابل کلیک است. برای اضافه کردن تغییر رنگ به لینک ها در هنگام hover کردن، از کد زیر استفاده کنید:

</pre>
<style>
a:hover {
color: red;
}
</style>

<a href="#">This is a link with hover color change</a>
<pre>

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

۸. فرم با پس‌زمینه شفاف:

برای ساخت یک فرم با پس‌زمینه شفاف و جذاب، می توانید از کد زیر استفاده کنید:

<form style="background-color: rgba(255, 255, 255, 0.5);">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea><br><br>
<input type="submit" value="Send">
</form>

در این کد، ما از rgba برای تعریف رنگ پس‌زمینه فرم استفاده کرده‌ایم و مقدار ۰.۵ به آن داده‌ایم تا شفافیت را تنظیم کنیم.

۹. جدول:

برای ساخت یک جدول ساده و جذاب، می توانید از کد زیر استفاده کنید:

<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Email</th>
</tr>
<tr>
<td>John Doe</td>
<td>30</td>
<td>john.doe@example.com</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
<td>jane.smith@example.com</td>
</tr>
</table>

۱۰. بخش قابل جستجو:

برای ساخت بخشی که کاربران می‌توانند در آن جستجو کنند، می توانید از کد زیر استفاده کنید:

<form>
<label for="search">Search:</label>
<input type="text" id="search" name="search">
<input type="submit" value="Submit">
</form>

با استفاده از این کدها، می‌توانید به صفحات وب خود بیشترین جذابیت و بصری بودن را ببخشید و آنها را همچنین قابلیت دسترسی و استفاده بیشتری برای کاربران داشته باشند.

۱۱. کاراکتر ویژه:

برای اضافه کردن کاراکترهای ویژه به صفحات وب، می توانید از کدهای HTML entities استفاده کنید. برای مثال، با استفاده از کد `©` می‌توانید کاراکتر حق کپی را به صفحه خود اضافه کنید.

۱۲. دکمه با پس زمینه شفاف:

برای ساخت یک دکمه جذاب با پس‌زمینه شفاف، می توانید از کد زیر استفاده کنید:

<a href="#" style="background-color: rgba(255, 255, 255, 0.5); padding: 10px 20px; border-radius: 5px;">Click me</a>

در این کد، ما از rgba برای تعریف رنگ پس‌زمینه دکمه استفاده کرده‌ایم و مقدار ۰.۵ به آن داده‌ایم تا شفافیت را تنظیم کنیم.

۱۳. کادر با قابلیت جستجو:

برای ساخت یک کادر جستجویی ساده با دکمه جستجو، می توانید از کد زیر استفاده کنید:

<form>
<input type="search" id="search" name="search" placeholder="Search...">
<button type="submit">Search</button>
</form>

در این کد، ما از ویژگی type برای تعریف نوع فیلد استفاده کرده‌ایم و با استفاده از placeholder، یک پیام را به کاربر نمایش داده‌ایم که توضیح می‌دهد کاربر چه مقداری در این قسمت باید وارد کند.

۱۴. منوی کشویی:

برای ساخت یک منوی کشویی جذاب برای صفحات وب خود، می توانید از کد زیر استفاده کنید:

<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

۱۵. شرطی کردن محتوا:

برای نمایش محتوایی به تعدادی از کاربران و مخفی کردن آن از دیگران، می توانید از کد زیر استفاده کنید:

</pre>
<!--[if !IE]> -->
<p>This text is not visible in IE</p>
<!-- <![endif]-->

<!--[if IE]>
<p>This text is only visible in IE</p>
<![endif]-->
<pre>

در نهایت، باید به این نکته توجه داشت که در طراحی صفحات وب، علاوه بر استفاده از کدهای HTML، از CSS و جاوا اسکریپت نیز می‌توانید استفاده کنید تا به صفحات خود جذابیت و بصری بیشتری ببخشید.