مدرسه قدیمی
روش دوم ایجاد صفحات وب بسیار متفاوت است - نوشتن کد HTML به طور مستقیم.
در این مقاله قصد دارم 0 تا 100 درست کردن سایت را به شما آموزش بدهم. البته راه اندازی و ساخت سایت از طریق برنامه نویسی و بکد نویسی...
بسیاری از افراد مفهوم نوشتن یک وب سایت با کد را تا حدی ترسناک می دانند. با این حال ، این روش سنتی است ، و روشی که توسط بیشتر طراحان / توسعه دهندگان وب حرفه ای (از جمله توسعه دهندگان Affilorama خود ما استفاده می شود) است. فکر کردن در کد می تواند کمی مورد استفاده قرار بگیرد ، اما این چیزی است که در نهایت باید یاد بگیرید تا بتوانید موارد مرتبط با پیشرفته وابسته مانند درج کد AdSense یا تنظیم برچسب های متا را انجام دهید ، بنابراین همیشه یاد می گیرد .
چیزهایی که ممکن است درباره مدرسه "قدیمی" بخواهید:
شما کنترل کاملی بر یک صفحه وب دارید
شما فقط به ویرایشگر متن اصلی نیاز دارید
چیزهایی که ممکن است درباره رفتن به مدرسه قدیمی نپسندید:
عادت کردن تمرین زیادی است
هنگام انجام ویرایش ها نمی توانید نتیجه آنچه را ویرایش می کنید ، مشاهده کنید
ایجاد یک صفحه خالی
برای شروع ، ویرایشگر متن مورد نظر خود را باز کنید ، به "File"> "New" بروید و صفحه را در یک مکان مناسب ذخیره کنید. اطمینان حاصل کنید که پرونده را با پسوند ".htm" ، ".html" یا ".php" ذخیره می کنید (دو مورد اول ترجیح داده می شوند ، مگر اینکه شما قصد انجام کارهای رمزگذاری اضافی را داشته باشید ، که این فراتر از این درس است)
افسوس که این همه چیز نیست؛ شما به آنچه "کد Boilerplate" گفته می شود نیاز دارید - همان کد اساسی که برای داشتن یک صفحه وب معتبر لازم است. خوشبختانه ، ما یک مقاله اساسی را برای شما نوشتیم که می توانید فقط در سند خود آن را کپی و چسب بزنید:
<! doctype html>
<html>
<head>
<meta charset = "UTF-8" />
<title> صفحه بدون عنوان </title>
</head>
<body>
</body>
</html>
از اینجا می توانید هر زمان که خواستید صفحه خود را با قرار دادن آن در رایانه خود (یا با استفاده از "Windows Explorer" یا "Finder" بسته به سیستم عامل خود) پیش نمایش دهید و روی آن دوبار کلیک کنید تا در مرورگر خود باز شود.
پیشنهاد میکنم از مقاله آموزش راه اندازی کسب و کار اینترنتی دیدن کنید.
عنوان و عنوان
قدم بعدی این است که به صفحه شما عنوان و عنوان بدهید. در میان برچسب های <body> </body> در صفحه خود ، "دستور العمل های خوشمزه با پای سیب" را بنویسید. حالا برای تبدیل این متن به عنوان ، شما به سادگی <h1> را در جلوی آن قرار می دهید ، و </h1> پس از آن ، مانند این است:
...
<body>
<h1> دستور العمل های خوشمزه Apple Apple </h1>
</body>
...
برای تعیین عنوان صفحه خود ، وارد بخش <head> شوید و به دنبال متنی باشید که می گوید "Document Untitled" بین برچسب <title> است. هر آنچه را که به جای "Document Untitled" می نویسید ، متنی است که در بالای پنجره های مرورگر بیننده شما و در رده بندی موتور جستجو ظاهر می شود.
تصویر
اکنون می خواهیم تصویری بگذاریم. از قبل لازم است بدانید که چه تصویری را می خواهید وارد کنید ، و مجبور خواهید بود که آن را در همان فهرست (یا فهرستهای مجاور) همان صفحه وب خود کپی کنید. سپس ، برای درج تصویر ، موارد زیر را در زیر تایپ کنید:
...
<body>
<h1> دستور العمل های خوشمزه Apple Apple </h1>
<img src = "apple-pie.jpg" alt = "تصویری از سیب پای" />
</body>
...
این تصویر را با نام "apple-pie.jpg" که در همان محل پرونده شما قرار دارد ، "درج می کند". بدیهی است که شما نیاز به جایگزین کردن این امر با نام و محل پرونده واقعی خود دارید. alt = متن توضیحی جایگزین برای افرادی است که وب را بدون تصاویر در اینترنت مرور می کنند - به عنوان مثال. بینندگان دارای اختلال در بینایی یا کسانی که در اتصالات پهنای باند محدود هستند. این توضیحات قرار است تصویر را توصیف کند و بیننده و ایده ای را که ممکن است به دنبالش باشد ، ارائه دهد.
پیوندها
مرحله بعدی تهیه نوعی ناوبری اساسی برای وب سایت شماست. اگرچه وب سایت شما ممکن است هنوز صفحات دیگری نداشته باشد ، اما هنوز هم از ابتدا می توانید ناوبری را در مکان مناسب قرار دهید. به اسامی بنویسید که فکر می کنید ممکن است برای صفحات وب دیگر در کنار یکدیگر احتیاج داشته باشید. به منظور ارائه برخی از جدایی بین آنها ، در این مثال از نماد "نوار عمودی" استفاده کرده ایم.
از آنجا که شما هنوز صفحاتی برای پیوند دادن لینک های خود ندارید ، ناوبری شما را در یک مکان "آدمک" قرار خواهیم داد برای ایجاد پیوند ، آن را با برچسب <a> احاطه کرده ، سپس آن را در یک مکان خاص ، مانند مثال زیر ، نشان می دهید:
پینهاد میکنم از مقاله کسب درآمد اینترنتی بدونه برنامه نویسی با درآمدعالی دیدن کنید
...
<img src = "apple-pie.jpg" alt = "تصویری از سیب پای" />
<a href="#"> پیوند ناوبری آدمک </a> |
<a href="page.htm "> پیوند دیگر </a> |
<a href="http://example.com "> وب سایت دیگری </a>
...
همانند صفحه Dreamweaver ، "#" فقط یک مکان ساختگی است ، اما صفحه.htm و http://www.example.com مکان صفحات و وب سایتهایی هستند که شما در واقع می خواهید به آنها اشاره کنید. اختلاف بین برچسب <a> </a> همان چیزی است که در صفحه نشان داده می شود. به عنوان مثال ، اولین پیوندی که به "#" اشاره می کند به عنوان "یک لینک ناوبری ساختگی" نشان داده می شود.
متن بنویسید
مرحله بعدی شروع به نوشتن متن - بدنه اصلی وب سایت شما است. این گوشت و سیب زمینی واقعی است ، و در اینجا می خواهید مقالات یا محتوای اصلی سایت خود را قرار دهید. در حال حاضر ما فقط از یک متن ساختگی از یک متن ساز استفاده کرده ایم ، اما احتمالاً شما می خواهید برخی از مطالب واقعی را در اینجا قرار دهید.
اما صبر کنید ... خیلی ساده نیست
متأسفانه یک رعایت کوچک در این مورد وجود دارد. ممکن است قبلاً در مثال پیوندهای ما متوجه شده باشید که موارد در هر یک از خطوط جداگانه بودند. با این حال ، اگر آنها را در یک مرورگر وب مشاهده کنید ، همه آنها در یک خط قرار دارند.
در واقع ، فرقی نمی کند که HTML شما چگونه تنظیم شده باشد ، شما هنوز هم باید در مورد مکان های جدید خط کشی کنید ، با استفاده از <p> (کوتاه "پاراگراف") و <br/> (کوتاه "شکست خط") برچسب ها ، مانند موارد زیر:
...
<p> این یک پاراگراف است (از این رو برچسب های p) </ p>
اگر من برچسب های p ندارم ، پس یک پاراگراف
به پاراگراف * بعدی * ملحق می شوید.
<p> این یک پاراگراف است ، اما من می خواهم یک خط جدید را از طریق راه طی کنم. <br/> من می توانم
این کار را با برچسب br انجام دهید. </p>
...
اگر پیش نمایش آن قطعه کد کوچک را مشاهده کنید ، می بینید:
این یک پاراگراف است (از این رو برچسب های p)
اگر من برچسب های p نداشته باشم ، یک پاراگراف با پاراگراف * بعدی * پیوست می شود.
این یک پاراگراف است ، اما من می خواهم یک خط جدید را طی کنم.
من می توانم این کار را با برچسب br انجام دهم.
کمی مرتب
آخرین کاری که می خواهیم به این صفحه انجام دهیم تغییر نحوه قرارگیری متن در اطراف تصویر است. برای انجام این کار ، ما باید برچسب تصویر خود را اصلاح کنیم تا به شکل زیر ظاهر شود:
...
<img src = "apple-pie.jpg" alt = "تصویری از سیب پای" align = "چپ" />
...
قسمت جدید برچسب align است ، که می تواند متن "چپ" یا "راست" (یا چند گزینه دیگر) را در خود جای دهد.
با استفاده از اینجا
اکنون شما می توانید درج و تغییر تصاویر ، نوشتن متن ، تنظیم عنوان و ایجاد پیوندها با کد را انجام دهید! اکنون می توانید این صفحه را کپی کنید تا صفحات بیشتری برای وب سایت خود ایجاد کنید ، تصاویر بیشتری وارد کنید یا پیوند ها را در متن وب سایت خود وارد کنید!
یک یادداشت دیگر
اگرچه ما چگونگی ایجاد یک صفحه وب را به طور کامل در حالت طراحی و همچنین با کد توضیح داده ایم که احتمالاً می خواهید از ترکیبی از این دو استفاده کنید (مگر اینکه واقعاً تمایل به استفاده کامل از کد را داشته باشید). خوشبختانه ، Dreamweaver توانایی جابجایی بین حالت "Code" و "Design" (یا یک حالت دوگانه به نام "Split" را دارد که هر دو را همزمان نشان می دهد)! ممکن است این ویژگی را پیدا کنید که مفیدتر باشد ، به خصوص هنگام شروع کار با HTML.
با این حال ، نکته ای که باید بدانید این است که کد تولید شده Dreamweaver به طور کلی پاک به عنوان کدی نیست که خودتان نوشتید ، بنابراین می تواند بسیاری از برچسب ها و کدهای اضافی را اضافه کند که ممکن است منطقی نباشد یا ممکن است آن را نداشته باشید. مواجه شده؛ بهترین راه های یادگیری این است که با جستجوی برچسب ها در اینترنت ، یا بازی در اطراف و ویرایش / حذف بیت های جدید برای دیدن آنچه تغییر می کنند (البته بعد از تهیه نسخه پشتیبان تهیه کنید ، البته!).
خلاصه درس
در این درس ما چگونگی ایجاد یک صفحه وب را هم در Dreamweaver و هم به صورت کد بررسی کردیم. ما به اضافه کردن قسمت های زیر نگاه کردیم:
ایجاد یک صفحه خالی
تنظیم عنوان و عنوان
درج تصویر
قرار دادن برخی از لینک ها
نوشتن متن اصلی شما
یه مقدار مرتب