بدون داشتن دانش کدنویسی، سایت بسازید!

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

درک اصول پایه ای زبان HTML در ۵ مرحله
یادگیری HTML در 10دقیقه!

نحوه استفاده از قالب ها

با کلیک روی هر عنوان می توانید پیش نمایشی از هر قالب را ببینید اما برای ویرایش و استفاده از آنها باید ابتدا زحمت دانلود کردن را بکشید. بدین منظور کافی است روی عنوان هر قالب کلیک کرده و از طریق گزینه Save Link As مکان ذخیره مورد نظر را انتخاب کنید.
روش دوم این است که با کلیک روی عنوان صفحه قالب را باز کرده و در منوی کلیک راست گزینه View Page Source را انتخاب کنید. با اینکار کد HTML صفحه نمایش داده می شود که می توان با فشردن کلیدهایCtrl + S آن را ذخیره کرد.
با کلیک راست روی فایل ذخیره شده و باز کردن آن با نوت پد کدهای HTML نمایش داده شده و امکان انجام تغییرات مورد نظر برای شما فراهم می شود.

۱. قالب درباره ما

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

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

اولین چیزی که می توان تغییر داد عنوانی است که حین ورود به سایت روی تب بالای صفحه نمایش داده می شود. برای تغییر عنوان این بخش را پیدا کنید:

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

حالا متن درون تگ < title > را به عبارت دلخواه تغییر دهید.

تغییر تصویر

این قالب با تصویر لوگویی ارائه شده و می توانید آن را با هر عکسی که می خواهید جایگزین کنید. برای تغییر تصویر ابتدا این خط را پیدا کنید:

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

حالا muo-logo.jpg را به Hدرس تصویری که می خواهید تغییر دهید.

تغییر متن

برای اضافه کردن متن مورد نظر باید تگ های پاراگرافی را که با < p > شروع شده و به < / p > ختم می شود، پیدا کنید. متن موردنظرتان را کپی کرده و بین این تگ ها جای دهید. در انتهای هر پاراگراف به صورت خودکار یک خط اضافه می شود. برای افزایش تعداد پاراگراف ها کافی است مجموعه دیگری از تگ های را نوشته و متن را به آنها تزریق کنید.
برای تغییر سربرگ بالای متن خط < h1 > About me < / h1 > را پیدا کرده و به جای About 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 >

تغییر عنوان و سربرگ

اینجا هم مثل قالب درباره ما با تغییر متن موجود در تگ های < h1 >< /h1 > و < title >< / title > عنوان و سربرگ را مطابق میل خود عوض کنید.

۳. قالب تماس با ما

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

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

برای تنظیم قالب بر اساس ایمیل شما در کدهای زیر آدرس youraddress @ gmail . com را با پست الکترونیکی خودتان جایگزین کنید:

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

این کد با تمامی ارائه کنندگان سرویس ایمیل از جمله جیمیل و یاهو سازگاری داشته و نظرات و دیدگاه های مخاطبان را برای شما ارسال می کند.

تغییر متن، عنوان و سربرگ

اینجا هم می توانید همه چیز را بر اساس میل خودتان تغییر دهید. برای تغییر متن هرآنچه بین تگ های < p > < / p > آمده را جایگزین کنید. سربرگ و عنوان هم به ترتیب با عوض کردن متن بین تگ های < h1 >< / h1 > و < title >< / title > تغییر می کنند.

۴. قالب صفحه اصلی کسب و کار

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

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

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

< 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 >

سپس آدرس muo-logo.jpg را با آدرس عکس مدنظرتان جایگزین کنید.

۵. قالب صفحه نمایش نظرات مشتریان

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

اضافه کردن اطلاعات مشتریان

برای افزودن بررسی و نظر به این صفحه ابتدا باید اطلاعات مشتریان را وارد کنید. بدین منظور این قطعه کد را برای وارد کردن اولین نظر پیدا کنید:

< 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

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

5 Free HTML Templates to Easily Create Quick Websites
دانلود مقاله