طراحی وب در HTML چیست؟
چگونه در HTML و طراحی وب شروع به کار کنیم
HTML (زبان نشانه گذاری Hypertext Markup Language) ساختار اولیه ساختمان وب سایت است. HTML یک زبان نشانه گذاری بسیار ساده است و نیاز به حفظ چند دستورات HTML چندگانه دارد که شکل و طرح یک صفحه وب را تشکیل می دهند. قبل از نوشتن هر کد HTML یا طراحی اولین صفحه وب شما باید بر روی یک ویرایشگر HTML یا ویرایشگر متن مانند «دفترچه یادداشت» یا «WordPad» تصمیم بگیرید.
هنگامی که یک ویرایشگر HTML دریافت کرده اید و آماده راه اندازی وب سایت خود هستید، فکر کنید چگونه می خواهید سایت را نگاه کنید و تنظیم کنید. حتی تصورات خود را در نظر بگیرید، برای کمک به تجسم سایت و صفحات سایت. در زیر برخی از ملاحظات در مورد طراحی صفحه وب خود فکر می کنم.
چگونه می خواهید همه فایل ها را ذخیره کنید؟ آیا تمام فایل ها در همان پوشه یا دایرکتوری قرار دارند؟ اگر شما در حال ساختن تصاویر و فایل های مختلف هستید، توصیه می شود صفحات، فایل ها و تصاویر را در دایرکتوری های جداگانه ذخیره کنید.
آیا فایلهای HTML به عنوان .HTM یا .HTML فایل ذخیره می شوند؟ مزیت یا زیان رفتن با .htm یا .html وجود ندارد. با این حال، این یک ایده خوب است با همان پسوند چوب.
آیا شما برای داشتن یک الگو برای صفحات برنامه ریزی می کنید؟ آیا تمام صفحات به نظر می رسد همان طور کلی و احساس می کنند؟
چگونه ناوبری به کار گرفته می شود؟ آیا برای منوی ناوبری بهتر است که در سمت چپ، پایین، یا بالای هر صفحه قرار داشته باشید؟
نکته: متوجه شوید که صفحه وب شما در طول زمان تغییر می کند زیرا چیزهایی را پیدا می کنید که کار نمی کنند. در طول عمر وب سایت Computer Hope، ما سایت کامل خود را چندین بار تغییر داده ایم.
نوشتن HTML پایه
پس از نصب یک ویرایشگر HTML و تنظیم یک پوشه، شما آماده هستیم که صفحه خود را ایجاد کنیم. با ایجاد یک فایل به نام index.htm یا index.html به عنوان صفحه شروع خود، شروع کنید. در صورتی که هیچ پرونده مشخص نشده باشد، تمام سرورهای موجود در اینترنت برای یک فایل شاخص فهرست می شوند. برای مثال، هنگام تایپ www.computerhope.com، سرور به آدرس www.computerhope.com/index.htm دسترسی پیدا می کند.
هنگامی که فایل index.htm یا index.html را ایجاد کرده اید و در ویرایشگر HTML شما باز است، توصیه می کنیم کد زیر را در صفحه خود قرار دهید. اگر ویرایشگر HTML خود به طور خودکار کد HTML را در صفحه خود قرار می دهد یا شما یک ویرایشگر WYSIWYG دارید، می توانید این مرحله را امتحان کنید.
<html>
<head>
<title> اولین صفحه وب من </ title>
</ head>
<body>
محتوای صفحه وب شما اینجاست
</ body>
</ html>
کد بالا یک مثال بسیار اساسی از کد است که کمک می کند تا هر صفحه وب را تشکیل دهد. همانطور که می بینید، کد شروع می شود با <html>، که تعریف می کند که همه چیز در <html> کد HTML است. بعد، شما <head> دارید که عنوان سند HTML شما را تعریف می کند. سوم، ما بخش <title> در <head> داریم که عنوان صفحه وب را که در بالای پنجره مرورگر اینترنت نمایش داده می شود تعریف می کند. سرانجام بخش <body> شامل آنچه در صفحه وب نشان داده شده است.
در زیر کد اضافی است که می تواند در بخش <body> کد قرار بگیرد تا به برخی از دستورات HTML بیشتر مورد استفاده شما آشنا شود.
<center> <h1> به صفحه وب من خوش آمدید </ h1> </ center>
<hr>
<br>
<p> سلام و به اولین وب سایت من خوش آمدید. <br> <br>
<b> این پیوندهای مورد علاقه من هستند: </ b> <br>
<ul>
<li> <a href="https://www.computerhope.com"> کامپیوتر امید </a> </ li>
<li> <a href="http://www.google.com"> Google </a> </ li>
</ ul>
</ p>
همانطور که می بینید از نگاه کردن به کد بالا، متوجه خواهید شد که دستورات HTML پایه نسبتا ساده برای استفاده هستند. ابتدا ما با <center> شروع می کنیم، که به مرورگر می گوید که اطلاعات در این برچسب ها را در مرکز قرار می دهد. بعد، دستور <h1> یا یک عبارت به مرورگر می دهد تا متن را در بزرگترین نوع عنوان نمایش دهد. بعد، برچسب <hr> به مرورگر نشان می دهد که خط مستقیم در سراسر صفحه نمایش می دهد. خط سوم حاوی <br> است که یک خط خط در صفحه ایجاد می کند. بعد، <p> برای «پاراگراف» کوتاه است و متن را در صفحه جدا می کند. بعد، برچسب <b> کوتاه تر از bold است و متنی که در برچسب قرار دارد خواهد شد. بعد، <ul> لیست گلوله ای را شروع می کند و هر گلوله توسط برچسب <li> نشان داده می شود. در نهایت، برچسب "<a href" یک روش ایجاد لینک به مکان دیگری است. در این مثال، ما یک لیست دلخواه از لینک به Computer Hope و Google ایجاد می کنیم.
صفحه راهنمای HTML و وب سایت ما را برای لیستی از دستورات HTML و محتوای مرتبط مشاهده کنید.
مشاهده وب سایت
اکنون که شما یک وب سایت اساسی ایجاد کرده اید، ممکن است بخواهید تأیید کنید که چگونه وب سایت به نظر می رسد. به این ترتیب که شما فایل های محلی ذخیره شده در رایانه خود دارید، نیازی به اتصال به اینترنت برای مشاهده صفحه وب خود نیستید.
مرورگر کامپیوتر را باز کرده و محل صفحه وب خود را تایپ کنید. به عنوان مثال، اگر فایل index.htm یا index.html را در یک بار "وب سایت" قرار داده اید.
شما می توانید در مرورگر c: \ website \ index.htm یا c: \ website \ index.html در یک رایانه ویندوز تایپ کنید. اگر شما مایکروسافت ویندوز یا اپل دارید، می توانید با کلیک روی فایل صفحه وب دوبار کلیک کنید تا صفحه در مرورگر باز شود.
نکته: برخی از ویراستاران HTML نیز به شما اجازه می دهند پیش نمایش صفحه را با کلیک روی دکمه پیش نمایش در ویرایشگر HTML انجام دهید.
مشاهده صفحه وب به طور محلی اجازه می دهد تا شما را به آزمایش و مطمئن شوید که صفحه کار می کند قبل از زمان برای بارگذاری صفحه به سرور. دیدن صفحه به این روش نیز مفید است اگر شما محل ذخیره وب سایت خود را ندارید.
نمایش تصاویر
اکنون که شما یک وب سایت اساسی ایجاد کرده اید، می توانید با افزودن تصاویر تصاویر و ظاهر وب سایت را بهبود بخشید. دو روش نمایش تصاویر روی صفحه وب شما وجود دارد. اولین روش اتصال به یک وب سایت دیگر است تا تصاویر با استفاده از کد زیر نمایش داده شود.
<img src = "https://www.computerhope.com/logo.gif" alt = "logo">
با استفاده از برچسب HTML فوق، شما می توانید تصاویر موجود در سایر وب سایت ها را مشاهده کنید، که همچنین به عنوان hotlink نامیده می شود. با این حال، ما توصیه نمی کنیم که از این نوع لینک استفاده کنیم، زیرا ممکن است صفحه وب شما بارگذاری کند و اگر سایت دیگر تصاویر را از بین ببرد، باعث می شود که تصاویر از بین رفته باشند. روش متناوب و توصیه شده برای استفاده از کد زیر است.
<img src = "mypic.gif" alt = "تصویر من">
یا اگر یک پوشه «تصاویر» دارید:
<img src = "images / mypic.gif" alt = "تصویر تصاویر من">
اگر فایل mypic.gif روی رایانه وجود داشته باشد، تصویر در وب سایت شما نشان داده شده است. اضافه کردن تصاویر یک راه عالی برای پر کردن وب سایت است. با این حال، با اضافه کردن چندین عکس (به ویژه تصاویر متحرک)، به دلیل اینکه می توانید لکه های ظریف و طولانی برای بارگذاری صفحه وب را افزایش دهید، به کار نرفته باشید. به یاد داشته باشید، میانگین زمانی که کسی به یک وب سایت نگاه می کند، 10 ثانیه است، بنابراین شما می خواهید صفحات وب خود را در اسرع وقت بارگیری کنید.
در نهایت، تصاویری با اندازه بزرگ را در صفحه اصلی خود قرار ندهید. تصاویر بزرگ بارگذاری صفحات وب را به طرز چشمگیری کاهش می دهد و ممکن است یک بازدید کننده را ترک کند. اگر شما یک تصویر بزرگ در وب سایت خود را دوست دارید، توصیه می شود نسخه ای کوچکتر از آن تصویر ایجاد کنید که به عنوان تصویر کوچک شناخته می شود. اگر کاربر علاقه مند به دیدن تصویر کامل باشد، می توانند بر روی تصویر کوچک کلیک کنند تا تصویر بزرگتر را مشاهده کنند.
درک دایرکتوری ها
هنگام ایجاد دایرکتوری های دیگر (پوشه ها) در رایانه ای که حاوی تصاویر یا فایل های HTML هستند، مهم است که شما ساختار دایرکتوری را درک کنید. چندین بار، کاربران اشتباه یک پیوند بد ایجاد می کنند که اجازه می دهد صفحه به طور آفلاین کار کند، اما نه در اینترنت و یا از یک رایانه دیگر.
هنگام دسترسی به فایل ها در دایرکتوری های دیگر که پیش از دایرکتوری فعلی هستند، ابتدا دایرکتوری و سپس نام پرونده را مشخص کنید. به عنوان مثال، اگر شما در حال تلاش برای دسترسی به یا نمایش فایل تصویر mypic.gif در پوشه تصویر هستید، لینک را به صورت زیر نشان دهید.
image / mypic.gif
در خط فوق توجه داشته باشید که دایرکتوری برای اولین بار مشخص شده است و سپس فایل.
بعد، اگر می خواستید به فایل تصویری mypic.gif دسترسی پیدا کنید، یک پوشه پشتی است، شما می خواهید از مثال زیر استفاده کنید.
../mypic.gif
در این مثال، دو نقطه را می بینید (..) این ها به مرورگر می گویند که می خواهید یک پوشه را بازگردانید. اگر می خواستید یک پوشه را بازگردانید و سپس به پوشه دیگری بروید، ابتدا باید ../ و سپس پوشه ای که در مثال زیر نشان داده شده است را انجام دهید.
../other/mypic.gif
این قانون را می توان به عنوان بسیاری از دایرکتوری به عنوان امکان پذیر است. به عنوان مثال، اگر شما می خواهید سه دایرکتوری را بازگردانید و سپس به دایرکتوری تصاویر بروید، از مثال زیر استفاده کنید.
../../../image/mypic.gif
اشتباه رایج با کاربران PC (ویندوز) این است که ویرایشگر HTML ممکن است فایل را در هارد دیسک کامپیوتر قرار دهد مانند c: \ mywebpage \ image \ mypic.gif. یک مسیر محلی بر روی هارد دیسک کامپیوتر (به صورت محلی) کار می کند. با این حال، هنگامی که در اینترنت ارسال شد، هیچکس جز شخص با فایل محلی نمیتواند فایل را نمایش دهد.
در نهایت، هنگام مشخص کردن دایرکتوری که شما از اسلش (/) استفاده می کنید، به یاد می آورید و نه یک بکسلش.
حساس بودن مورد
مهم است که به یاد داشته باشید که بسیاری از سرورهای اینترنتی با استفاده از لینوکس و یا یک نوع * nix استفاده می کنند. با لینوکس و یونیکس، نام فایل ها حساس به حروف هستند. اگر شما به فایل "Mypage.htm" لینک کنید و فایل در سرور "mypage.htm" باشد، سرور نمی تواند فایل را به خاطر سرمایه "M." پیدا کند. ما همیشه توصیه می کنیم تمام صفحات وب، تصاویر و فایل ها را در تمام حروف کوچک ایجاد کنید.
ارسال وب سایت
ارسال فایل های وب سایت به اینترنت یکی از پیچیده ترین مراحل ایجاد وب سایت برای اکثر افراد است. برای اینکه وب سایت توسط سایر کاربران قابل مشاهده باشد، کاربر باید وبسایت خود را بر روی یک سرور قرار دهد تا بتواند توسط افراد در اینترنت مشاهده شود.
به دلیل تنوع وسیعی از روش ارسال یک وب سایت، ما یکی از روش های رایج ترین ارسال وب سایت شما را توضیح خواهیم داد.
ISP ها (ارائه دهندگان خدمات اینترنتی) و شرکت های میزبانی وب دسترسی FTP (پروتکل انتقال فایل) را فراهم می کند که به کاربران امکان می دهد فایل ها را از c خود کپی کنند
computer به سرور کاربران کامپیوتر دو فرصت دارند؛ یکی از اینها استفاده از برنامه FTP همراه با ویندوز است و راه حل دیگر این است که برنامه FTP را دانلود کنید. با استفاده از یکی از این ابزار ها باید کاربر را قادر به ارسال فایل های خود، ارائه سرور اجازه دسترسی FTP را فراهم می کند.
پس از اتصال به سرور، پوشه یا پوشه ای که حاوی صفحه وب شما است، قرار دهید. معمولا این پوشه public_html است. اگر از FTP ویندوز استفاده می کنید، cd public_html را تایپ کنید یا نوع dir را ببینید تا پوشه نامیده شود. یا پوشه را از طریق CuteFTP یا برنامه سرویس گیرنده FTP باز کنید باز کنید. هنگامی که در این پوشه هستید، می توانید فایل های HTML خود را به سرور ارسال کنید تا به اینترنت دسترسی پیدا کنید. برای مثال، FTP های ویندوز FTP برای ارسال فایل های شما، type send index.htm را تایپ کنید.
میزبان وب شما باید مراحل ارسال وب سایت شما را داشته باشد و گاهی حتی ممکن است از یک مشتری مبتنی بر وب برای انتقال فایل ها به سرور خود استفاده کند. اگر پس از پیروی از توصیه های فوق نمی توانید به وب سایت خود پست ارسال کنید، با بخش پشتیبانی یار خود تماس بگیرید.
چه برنامه های FTP را می توانم برای ارسال و دریافت فایل ها استفاده کنم؟
چگونه می توانم از FTP از خط فرمان ویندوز استفاده کنم؟
راه اندازی یک نام دامنه
ببینید "چگونه می توانم یک نام دامنه را ثبت کنم؟" صفحه برای مراحل و کمک به تنظیم یک نام دامنه.
میزبانی وب
میزبانی وب اجازه می دهد تا کاربران یک فروشگاه دیگر شرکت داشته باشند و وب سایت شما را برای شما یا شرکت شما حفظ کنند. شرکت میزبانی وب ممکن است بسته به اینکه چه چیزی از طریق ارائه دهنده سرویس اینترنتی شما در دسترس است، ممکن است یا لازم نباشد. با ارائه دهنده خدمات اینترنت خود چک کنید که آیا آنها یک راه حل قابل مقایسه با دیگر شرکت های میزبانی وب ارائه می دهند. هنگام تنظیم با یک شرکت میزبانی وب، توصیه می کنیم قبل از تنظیم صفحه، اطلاعات زیر را با آنها بررسی کنید.
ثبت دامنه
اطمینان حاصل کنید که شرکت اجازه می دهد تا شرکت شما دامنه ای مانند www.computerhope.com داشته باشد و ببینید آیا می توان آن را برای شما تنظیم کرد و اگر چنین باشد هزینه آن چقدر است.
حمل و نقل ایمیل - مشاهده کنید که آیا شرکت ارائه می دهد ارسال ایمیل به ارسال ایمیل از username@yourdomain.com به آدرس ایمیل دیگر. به عنوان مثال، شما می توانید ایمیل @ yourdomain.com خود را به @ yahoo.com یا @ gmail.com آدرس ارسال کنید.
پشتیبانی
ساعت کار برای پشتیبانی تلفنی را بررسی کنید و بررسی کنید که آیا شماره یک شماره رایگان است.
تغییر شرکت ها
زمانی که زمان می آید، خط مشی آنها را بررسی کنید و این که چگونه برای تغییر به شرکت دیگری آسان است.
آمار سایت
در حالی که یک ضرورت نیست، یک ویژگی خوب است؛ ببینید آیا شرکت آمار سایت خود را برای صفحه وب شما ارائه می دهد، به شما این امکان را می دهد تا نظارت کنید که وب سایت شما چگونه کار می کند.
حساب کسب و کار
ببینید اگر شرکت شما هزینه های اضافی را به شما تحمیل کند، اگر شما شروع به فروش چیزی از وب سایت خود کنید.
محدودیت های پهنای باند
اطمینان حاصل کنید که شرکت دارای محدودیت پهنای باند سخت نیست، که ممکن است میزان ترافیک را که شما قادر به دریافت آن هستید، محدود کند. مهم این است که متوجه شوید که تمام شرکت ها محدودیت دارند اما معتقدند این چیزی است که انتظار نمی رود شکسته شود.
Extensions FrontPage
اگر از FrontPage استفاده می کنید، Extensions FrontPage را تأیید کنید. اگر چه تمام کاربران FrontPage از این ویژگی ها استفاده نمی کنند، هنوز هم این ایده خوب است که این مورد را در دسترس داشته باشید.
CGI، Perl و PHP Scripts
در حالی که شما ممکن است یک صفحه را با CGI، Perl یا اسکریپت PHP نصب نکنید، برای استفاده در آینده مهم است که شما تأیید کنید که سرور شما از این پشتیبانی می کند. این اسکریپت ها شما را قادر به تنظیم شمارنده ها، تابلوهای پیام، کتاب مهمان و سایر ویژگی های مختلف می کند.
برای شرکت های میزبانی وب شخص ثالث جستجو کنید.
فراتر از اصول اولیه
طراحی صفحات وب بسیار عمیق تر از این معرفی اساسی صفحات وب می باشد. هنگامی که شما درک خوبی از HTML و FTP دارید، خود را با CSS آشنا می کنید تا صفحات وب خود را به درستی قالب بندی و طرح بندی کنید. اگر می خواهید ویژگی های پیشرفته ای را در وب سایت خود، از جمله انجمن ها، شمارنده های صفحه وب، و یا فرم الکترونیکی، به زبان های برنامه نویسی CGI مانند PHP یا Perl آشنا کنید.
اگر اصول اولیه بیش از حد قریب به اتفاق، ده ها تن از خدمات CMS مانند خدمات وردپرس و وبلاگ است که می تواند روند را آسان تر است. با این حال، در نظر داشته باشید که بسیاری از این سرویس ها تنها قالب ها و پلاگین هایی را ارائه می دهند که به شما اجازه می دهد سایت خود را سفارشی کنید. اگر میخواهید سایت خود را سفارشی کنید، باید از برخی اصول اولیه مطلع شوید.
