۵ قالب رایگان HTML برای ایجاد آسان و سریع وبسایت‌ها!
1398/02/28 14:58 , میلاد صاحب نظر

۵ قالب رایگان HTML برای ایجاد آسان و سریع وبسایت‌ها!

چه مالک یک کسب و کار باشید، چه صرفاً بخواهید برند شخصی خودتان و مهارت‌هایتان را تبلیغ کنید، به هر حال داشتن یک وبسایت امر مهمی است. اما شاید زمان کافی برای یادگیری HTML نداشته باشید و نمی‌خواهید برای خدمات طراحی وب گران قیمت نیز هزینه زیادی بکنید.

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

ما همچنین دستورالعمل استفاده از قالب‌ها را نیز ارائه خواهیم داد، به شکلی که حتی اگر یک بار هم با HTML کار نکرده باشید باز هم می‌توانید از آن‌ها استفاده کنید.

چگونگی استفاده از قالب‌ها

می‌توانید هر قالب را با کلیک کردن روی سر تیتر آن قالب مشاهده کنید. اما برای تغییر و استفاده از قالب‌ها، ابتدا باید آن‌ها را دانلود کنید. برای این منظور روی عنوان هر قالب کلیک راست کنید و گزینه Save Link As… را انتخاب کنید. سپس یک فولدر انتخاب کنید تا قالب را در آن save کنید و روی کلید save کلیک کنید.

روش دیگر این است که با کلیک کردن روی عنوان، قالب را باز کنید. سپس در صفحه‌ای که باز می‌شود کلیک راست کنید(مهم نیست کجا فقط جایی درون صفحه که در مرورگر باز می‌شود) و گزینه View Page Source را انتخاب کنید.

حالا کد HTML استفاده شده برای صفحه را مشاهده می‌کنید. می‌توانید کلید‌های CTRL+S را بزنید تا قالب را در رایانه خودتان save کنید.

حالا به فولدری که قالب را در آن save کرده‌اید بروید. روی قالب کلیک راست کنید و گزینه open with و سپس Notepad را انتخاب کنید. به اینت شکل قالب به عنوان یک سند متنی باز می‌شود. حالا می‌توانید هر تغییری که می‌خواهید در قالب ایجاد کنید و سپس آن را Save کنید. حالا آماده استفاده از این قالب برای وبسایتتان هستید.

  1. قالب About Me

قالب About Me

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

همچنین می‌توانید از این قالب برای هر نوع محتوای متنی دیگر (مانند اطلاعات در مورد یک سرگرمی یا موضوعی که می‌خواهید به اشتراک بگذارید) استفاده کنید.

برای سفارشی‌سازی قالب، ابتدا فایل HTML را در یک ویراستار متن مانند Notepad یا WordPad باز کنید. برای اینکه بتوانید از محتوای صفحه سر در بیاورید توصیه می‌کنیم دوره رایگان آموزش مقدماتی HTML و CSS را بگذرانید.

تغییر عنوان صفحه

اولین چیزی که باید تغییر دهید عنوان است. وقتی صفحه را باز می‌کنید، متنی که در بالای تب ظاهر می‌شود همان عنوان است. برای تغییر آن این بخش را در HTML بیابید:

<title>John Smith - About Me</title>

حالا متن درون تگ‌های <title> را به هر چیزی که می‌خواهید تغییر دهید.

تغییر تصویر

می‌توانید تصویر را هر زمان که می‌خواهید عوض کنید. یک تصویر مربعی ظاهر بهتری دارد، اما اگر می‌خواهید می‌توانید همچنین از یک تصویر مستطیلی نیز استفاده کنید. برای تغییر تصویر، این خط را بیابید:

<img src="muo-logo.jpg" class="about">

حالا “muo-logo.jpg” به URL تصویر خودتان تغییر دهید.

تغییر متن

حالا فقط باید متنی که می‌‌خواهید در صفحه نمایش داده شود را اضافه کنید. برای این منظور، تگ‌های پاراگراف را بیابید (یعنی آن‌هایی که تگ‌ <p> در ابتدا و تگ <p/> در انتها دارند).

متنی که می‌‌خواهید را کپی کنید و در بین این تگ‌های پاراگراف پیست کنید. به طور خودکار در انتهای هر پاراگراف یک فضای خالی قرار می‌گیرد. برای اضافه کردن پاراگراف‌های بیشتر، فقط یک جفت تگ <p> و <p/> همراه با متنی در بین آن‌ها اضافه کنید.

همچنین می‌توانید هدینگ بالای متن را نیز تغییر دهید. برای تغییر هدینگ، این خط را بیابید:

<h1>About me</h1>

و متن “About Me” را به هر چه که می‌خواهید تغییر دهید.

  1. قالب Where To Find Me

قالب Where To Find Me

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

تغییر لینک‌های رسانه اجتماعی

باید لینک‌ها و نام هر حساب کاربری رسانه اجتماعی را تغییر دهید. برای این منظور، کارتان را با حساب کاربری توییتر آغاز کنید. این خط را بیابید:

<img src="twitter-logo.svg" class="socmed">
<br><br>
<b>Twitter:</b> <a href="http://twitter.com/johnsmith" target="_blank">@JohnSmith</a>

در این کد دو چیز وجود دارند که می‌توانید تغییر دهید. ابتدا، لینک http://twitter.com/johnsmith را به لینک ارجاع دهنده به سمت حساب کاربری توییتر خودتان تغییر دهید. سپس، آدرس johnsmith@ را به آدرس خودتان تغییر دهید.

حالا همین کار را با بقیه سایت‌های رسانه اجتماعی انجام دهید.

اگر سایتی وجود دارد که استفاده نمی‌کنید، برای مثال اگر حساب کاربری Tumblr ندارید، پس فقط این بخش از قالب را حذف کنید:

<img src="tumblr-logo.png" class="socmed">
<br><br>
<b>Tumblr:</b> <a href="https://johnsmith.tumblr.com" target="_blank">johnsmith</a>

<div style="clear:both">
<br><br>
</div>
تغییر هدینگ و عنوان

همانند قالب about me، می‌توانید هدینگ و عنوان را نیز به ترتیب با تغییر متن درون تگ‌های <h1> و </h1> و تگ‌های <title> و <title/> تغییر دهید.

  1. قالب Contact Me

قالب Contact Me

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

تغییر آدرس ایمیل

برای اینکه فرم درست عمل کند، باید یک خط را در قالب تغییر دهید:

<form action="mailto:youraddress@gmail.com" method="post" enctype="text/plain">

در اینجا باید youraddress@gmail.com را به آدرس ایمیل خودتان تغییر دهید. این کد برای همه انواع ایمیل‌ها کار می‌کند و هر نظری که توسط بازدید کنندگان شما در فرم قرار گیرد برای شما ایمیل خواهد شد.

تغییر متن، هدینگ و عنوان

یک بار دیگر می‌توانید متنی که در این صفحه نمایش داده می‌شود را نیز تغییر دهید. برای تغیر متن، فقط کافی است متنی که بین تگ‌های <p> و <p/> را تغییر دهید. برای تغییر هدینگ، متن بین تگ‌های <h1> و <h1/> را تغییر دهید. برای تغییر عنوان، متن بین تگ‌های <title> و <title/> را تغییر دهید.

  1. قالب Business Homepage

قالب Business Homepage

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

تغییر عنوان‌های بخش‌ها

برای تغییر عنوان هر بخش، به دنبال این خطوط باشید:

<h1>About Us</h1>
<h1>Our Mission</h1>
<h1>Our Services</h1>
<h1>Our Customers</h1>

حالا با تغییر دادن متن بین تگ‌های <h1> و <h1/> می‌توانید عنوان این بخش‌ها را به هر چیزی که می‌خواهید تغییر دهید.

تغییر محتوای بخش

برای تغییر دادن متنی که در زیر هر عنوان ظاهر می‌شود، به دنبال پاراگرافی باشید که به این شکل شروع می‌شود:

<p>Lorem ipsum dolor sit amet... </p>

حالا متن داخل تگ‌های <p> و <p/> را به هر چیزی که می‌خواهید تغییر دهید.

تغییر تصویر

این قالب شامل فضایی برای یک تصویر در پایین صفحه است. برای تغییر دادن تصویر، این خط را پیدا کنید:

<center>
<img src="muo-logo.jpg" width="200">
</center>

حالا URL یا آدرس “muo-logo.jpg” را به نام یا آدرس تصویر خودتان تغییر دهید.

  1. قالب Business Review Page

قالب Business Review Page

وقتی یک کسب و کار را اداره می‌کنید، مهم است که قابلیت نظر دهی را برای مشتری فراهم کنید. این بخش به مشتریان بالقوه جدید شما نشان می‌دهد که افراد دیگری که از کسب و کار شما استفاده کرده‌اند، تجربه خوبی داشته‌اند.

این قالب به شما اجازه می‌دهد بهترین نظرات و بررسی‌های مشتریان خود را به نمایش بگذارید.

افزودن اطلاعات مشتری

برای اضافه کردن بررسی‌ها به این صفحه، ابتدا باید اطلاعات مشتری را اضافه کنید. برای این منظور، برای اولین بررسی‌ای که می‌خواهید اضافه کنید به دنبال این بخش باشید:

<b>Customer Name:</b> John Smith
<br>
<br>
<b>Customer Business:</b> Smith's Supplies

حالا خیلی راحت “John Smith” را به نام مشتری و “Smith’s Supplies” را به نام کسب و کار مشتری تغییر دهید.

اضافه کردن بررسی‌های مشتری

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit

حالا این متن را حذف کنید و آن را با بررسی مشتری خودتان جایگزین کنید.

اضافه کردن بررسی‌های بیشتر

برای اضافه کردن بررسی‌های بیشتر از سه عدد به قالب، کل بلوکی که با <p> شروع می‌شود و با <p/> پایان می‌یابد را کپی کنید، سپس آن را در زیر بررسی‌های فعلی پیست کنید و آن‌ها را تغییر دهید تا بتوانید بررسی‌های بیشتر اضافه کنید.

با استفاده از قالب‌های HTML سریعاً یک وبسایت ایجاد کنید

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

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

با MUG همراه باشید!

منبع:‌ makeuseof

 مطالب مرتبط

تعامل با فایل‌ها در HTML5
ایجاد یک فرم HTML و قابلیت تکمیل خودکار فرم‌ها
 بهترین قالب‌های رایگان HTML5 و CSS3
۹ چیز که باید در مورد HTML5 بدانید
آموزش گام به گام #C
برنامه نویسی شیءگرا چیست؟

از آخرین دوره های آموزشی و تخفیف ها مطلع شوید

با تکمیل فرم زیر ، از اخبار و اطلاعات به روز برنامه نویسی و تکنولوژی عقب نمانید

آخرین مطالب

آموزش جامعSQL Server(جلسه۲۳:Stored Procedureها-بخش۳)
آموزش جامعSQL Server(جلسه۲۳:Stored Procedureها-بخش۳)

در جلسه قبل به بررسی عبارات کنترل جریان و cursor در SQL Server پرداختیم. کار با دستورات نام ...

۹ شغل مرتبط با تکنولوژی که نیاز به مهارت کد نویسی ندارند
۹ شغل مرتبط با تکنولوژی که نیاز به مهارت کد نویسی ندارند

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

آموزش مقدماتیHTMLوCSS(جلسه۲۲:سازماندهی داده با جدول–بخش۲)
آموزش مقدماتیHTMLوCSS(جلسه۲۲:سازماندهی داده با جدول–بخش۲)

در جلسه قبل، موضوع سازماندهی داده‌ها با استفاده از جداول را مطرح کردیم و با روش‌های ایجاد جدول، سازماندهی داده‌ها ...

آخرین دیدگاه ها

دیدگاه خود را درباره این پست بنویسید

فرم ارسال نظرات