خبری و آموزشی

سایت خبری و آموزشی

خبری و آموزشی

سایت خبری و آموزشی

نحوه شروع در HTML و طراحی وب

يكشنبه, ۲۵ آبان ۱۳۹۹، ۰۴:۴۲ ب.ظ

HTML (Hypertext Markup Language) عنصر اصلی ایجاد یک وب سایت است. HTML  یک زبان نشانه گذاری بسیار اساسی است و نیاز به به خاطر سپردن چند ده دستور HTML دارد که به شکل ظاهری و صفحه بندی یک صفحه وب می پردازند. قبل از نوشتن کد HTML یا طراحی اولین صفحه وب خود ، باید در مورد ویرایشگر HTML یا ویرایشگر متن مانند Notepad یا WordPad تصمیم بگیرید.

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

 

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

آیا پرونده های HTML به عنوان پرونده های .HTM یا .HTML ذخیره می شوند؟ هیچ مزیتی و ضرری برای رفتن با .htm یا .html ندارید. با این حال ، ایده خوبی است که با همان پسوند بمانید.

آیا قصد دارید الگویی برای صفحات داشته باشید؟ آیا همه صفحات ظاهر و احساسی یکسان دارند؟

چگونه می توان از پیمایش استفاده کرد؟ آیا بهتر است که منوی پیمایش در سمت چپ ، پایین یا بالای هر صفحه باشد؟

نکته

متوجه شوید که با یافتن مواردی که م notثر نیستند ، صفحه وب شما تغییر خواهد کرد. در طول عمر وب سایت Computer Hope ، ما ده ها بار سایت کامل خود را تغییر داده ایم.

 

 

برنامه نویسی با html

 

نوشتن HTML اساسی

پس از نصب ویرایشگر HTML و تنظیم پوشه ، آماده شروع ایجاد صفحه خود هستید. با ایجاد پرونده ای به نام index.htm یا index.html به عنوان صفحه شروع خود شروع کنید. اگر هیچ پرونده ای مشخص نشود ، همه سرورهای موجود در اینترنت به دنبال یک پرونده ایندکس می گردند. به عنوان مثال ، هنگام تایپ https://www.computerhope.com ، سرور به آدرس https://www.computerhope.com/index.htm دسترسی پیدا می کند.

 

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

کد فوق یک نمونه بسیار اساسی از کدی است که به تشکیل هر صفحه وب کمک می کند. همانطور که مشاهده می کنید ، کد با <html> شروع می شود ، که تعریف می کند هر چیزی در <html> کد HTML است. در مرحله بعدی ، شما <head> را دارید که عنوان سند HTML شما را تعریف می کند. سوم ، بخش <title> را در <head> داریم ، که عنوان صفحه وب را که در بالای پنجره مرورگر اینترنت نمایش داده می شود ، تعریف می کند. سرانجام ، بخش <body> شامل آنچه در صفحه وب نشان داده شده است.

 

در زیر کد اضافی برای بخش <body> کد وجود دارد که به شما کمک می کند تا با برخی از دستورات HTML که معمولاً مورد استفاده قرار می گیرند آشنا شوید.

 

همانطور که از مشاهده کد بالا مشاهده می کنید ، متوجه خواهید شد که استفاده از دستورات اساسی 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 ، صفحه را پیش نمایش کنید.

 

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

 

نمایش تصاویر

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

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

اگر فایل mypic.gif در رایانه وجود داشته باشد ، تصویر در وب سایت شما نشان داده می شود. افزودن تصاویر یک روش عالی برای ایجاد صنوبر در وب سایت است. با این حال ، با افزودن چندین تصویر (مخصوصاً تصاویر متحرک) خود را از دست ندهید ، زیرا می تواند مشکل به نظر برسد و مدت زمان بارگیری صفحه وب را افزایش دهد. بخاطر داشته باشید ، میانگین زمانی که شخصی به وب سایت نگاه می کند 10 ثانیه است ، بنابراین می خواهید صفحات وب شما در اسرع وقت بارگیری شوند.

 

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

درک فهرست ها

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

 

هنگام دسترسی به پرونده ها در فهرست های دیگر که از فهرست فعلی جلوتر هستند ، ابتدا فهرست را وارد کنید و سپس نام پرونده را مشخص کنید. به عنوان مثال ، اگر می خواهید به فایل تصویر mypic.gif در پوشه تصویر دسترسی پیدا کنید یا آن را نمایش دهید ، پیوند را مانند تصویر زیر ایجاد کنید.

در خط بالا توجه کنید که ابتدا دایرکتوری و سپس پرونده مشخص شده است.

 

در مرحله بعد ، اگر می خواهید به فایل تصویری mypic.gif که به یک فهرست بازگشته است دسترسی پیدا کنید ، می خواهید از مثال زیر استفاده کنید.

یک اشتباه رایج در مورد کاربران رایانه های شخصی (ویندوز) این است که ویرایشگر HTML ممکن است فایلی را که باید در هارد دیسک کامپیوتر واقع شود مانند c: \ mywebpage \ image \ mypic.gif تعیین کند. یک مسیر محلی به خوبی بر روی هارد دیسک کامپیوتر کار می کند (به صورت محلی). با این حال ، هنگامی که در اینترنت ارسال می شود ، هیچ کس به جز فرد دارای پرونده به صورت محلی نمی تواند پرونده را نمایش دهد.

 

سرانجام ، هنگام تعیین پوشه ای که از یک اسلش رو به جلو (/) استفاده می کنید و نه یک بک اسلش به خاطر داشته باشید.

 

 

طراحی سایت با html

 

حساس به حروف بزرگ

لازم به یادآوری است که بسیاری از سرورهای اینترنت از Linux یا نسخه * nix استفاده می کنند. با استفاده از لینوکس و یونیکس ، نام پرونده ها به حروف کوچک بزرگ حساس هستند. اگر به پرونده "Mypage.htm" پیوند دهید و پرونده موجود در سرور "mypage.htm" باشد ، صفحه به دلیل بزرگ بودن "M" بارگیری نمی شود. ما همیشه ایجاد همه صفحات وب ، تصاویر و پرونده ها را با حروف کوچک توصیه می کنیم.

 

ارسال وب سایت

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

 

به دلیل تنوع گسترده روش های ارسال وب سایت ، ما یکی از متداول ترین روش های ارسال وب سایت شما را توضیح خواهیم داد.

 

ISP ها (ارائه دهندگان خدمات اینترنت) و شرکت های میزبان وب دسترسی به FTP (پروتکل انتقال فایل) را فراهم می کنند که به کاربران امکان می دهد پرونده ها را از رایانه شما در سرور کپی کنند. کاربران رایانه های شخصی دو امکان دارند. یکی استفاده از برنامه FTP موجود در ویندوز ، و راه حل دیگر توصیه شده بارگیری یک برنامه FTP است. با استفاده از یکی از این ابزارها باید کاربر بتواند پرونده های خود را ارسال کند ، به شرطی که سرور اجازه دسترسی به FTP را فراهم کند.

 

پس از اتصال به سرور ، پوشه یا دایرکتوری حاوی صفحه وب خود را پیدا کنید. معمولاً این پوشه public_html است. اگر از Windows FTP استفاده می کنید ، cd public_html را تایپ کنید یا dir را تایپ کنید تا ببینید نام این پوشه چیست. یا پوشه را از طریق CuteFTP یا برنامه سرویس گیرنده FTP که باز می کنید باز کنید. پس از ورود به این پوشه ، می توانید فایلهای HTML خود را به سرور ارسال کنید تا از طریق اینترنت به آنها دسترسی داشته باشید. کاربران FTP ویندوز برای ارسال پرونده های خود ، مثلاً ارسال index.htm را تایپ کنید.

 

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

 

از چه برنامه های FTP می توانم برای ارسال و دریافت فایل استفاده کنم؟

چگونه می توانم از FTP از یک خط فرمان استفاده کنم؟

تنظیم نام دامنه

به "چگونه نام دامنه را ثبت کنم؟" مراجعه کنید. صفحه برای مراحل و کمک به تنظیم نام دامنه.

 

میزبانی وب

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

 

ثبت دامنه - تأیید کنید که شرکت به شما اجازه می دهد دامنه ای داشته باشد (به عنوان مثال ، www.computerhope.com).

حمل و نقل ایمیل - ببینید آیا این شرکت حمل و نقل ایمیل را برای ارسال نامه الکترونیکی از username@yourdomain.com به آدرس ایمیل دیگری ارائه می دهد یا خیر. به عنوان مثال ، می توانید ایمیل @ yourdomain.com را به آدرس @ yahoo.com یا @ gmail.com ارسال کنید.

پشتیبانی - ساعات کار را برای پشتیبانی تلفنی تأیید کنید و بررسی کنید آیا شماره بدون شماره است.

تغییر شرکت ها - خط مشی آنها را تأیید کنید و اینکه اگر زمان آن فرا برسد تغییر کاربری به یک شرکت دیگر آسان است.

آمار سایت - اگرچه یک ضرورت نیست ، اما یک ویژگی خوب این است که ببینید آیا شرکت می تواند به شما آماری بدهد تا به شما بگوید که وب سایت شما چقدر خوب عمل می کند.

حساب تجاری - اگر شروع به فروش چیزی در وب سایت خود می کنید ، شرکت هزینه های اضافی را از شما می گیرد یا خیر.

محدودیت های پهنای باند - تأیید کنید که شرکت محدودیت پهنای باند محدودی ندارد ، که ممکن است میزان ترافیکی را که قادر به دریافت هستید محدود کند. متوجه شوید که همه شرکت ها محدودیت دارند اما بررسی کنید این چیزی است که انتظار نمی رود شکسته شود.

افزونه های FrontPage - اگر از FrontPage استفاده می کنید ، تأیید کنید که FrontPage Extensions پشتیبانی می شوند. اگرچه همه کاربران FrontPage از این ویژگی ها استفاده نمی کنند ، اما بهتر است تأیید کنید که این ویژگی در دسترس است.

اسکریپت های CGI ، Perl و PHP - اگرچه ممکن است بلافاصله صفحه ای با اسکریپت CGI ، Perl یا PHP راه اندازی نکنید ، اما برای استفاده در آینده مهم است که تأیید کنید سرور از این موضوع پشتیبانی می کند. این اسکریپت ها به شما امکان می دهند شمارنده ها ، تابلوهای پیام ، کتاب های مهمان و سایر ویژگی های مختلف را تنظیم کنید.

شرکت های میزبان شخص ثالث را جستجو کنید.

 

فراتر از اصول اولیه

طراحی صفحات وب بسیار عمیق تر از این معرفی اساسی صفحات وب است. هنگامی که درک خوبی از HTML و FTP پیدا کردید ، با CSS آشنا می شوید تا صفحات وب خود را به درستی قالب بندی و چیدمان کنید. برای انجام ویژگی های پیشرفته تر در وب سایت خود مانند انجمن s ، پیشخوان صفحه وب یا فرم ایمیل شما باید با زبان های برنامه نویسی CGI مانند PHP یا Perl آشنا شوید.

 

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

موافقین ۰ مخالفین ۰ ۹۹/۰۸/۲۵

نظرات  (۰)

هیچ نظری هنوز ثبت نشده است

ارسال نظر

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی