به صفحات وبلاگ Start-Luck خوش آمدید. امروز می خواهم نحوه استفاده از کد را به شما نشان دهم. نوشتن وب سایت یک فعالیت جالب است که ممکن است برای بسیاری بسیار دشوار به نظر برسد. در واقع یک صفحه ساده تنها در 5 دقیقه ایجاد می شود.
در این مقاله در مورد ایجاد صفحه html صحبت خواهم کرد. این کار را در کمتر از 10 دقیقه انجام می دهیم و سپس با جزئیات بیشتری به تگ های اصلی می پردازیم. اشتباه است که چنین نشریه ای را درس بخوانیم. در عوض، این دانه‌ای است که طراحی شده است تا سهولت کار را به شما نشان دهد و به شما میل به ادامه کار، یادگیری بیشتر و انجام بهتر را بدهد.
چگونه یک صفحه ایجاد کنیم
پیشنهاد می کنم صفحه اول را در دفترچه یادداشت بسازید. ساده ترین، که در منوی "شروع"، پوشه "Standard" قرار دارد. شما هنوز نیازی به دانلود چیزی ندارید. سعی کن از چیزی که داری استفاده کنی
سند خود را باز کنید
این کد را در آن قرار دهید.
<html>
<سر>
<عنوان>صفحه اول من</ عنوان>
</ سر>
<بدن>
<مرکز> </ h1> <br /><مرکز> <font style = "رنگ: قرمز"></ فونت> <br /> <ب></ b> <br /> ما به انتهای آن رسیدیم<br /> اکنون کمی بیشتر در مورد برچسب ها می دانید و می توانید از آنها استفاده کنید. بیایید سعی کنیم پیوندی را برای پیوند چندین صفحه به یکدیگر وارد کنیم.<br /> <hr>به عنوان مثال، این یک لینک به وبلاگ من است -<a href = "http: // سایت /">شروع - شانس</ a>- به سادگی در مورد "سخت" صحبت می کند.<br /> <br /> </ بدن> </ html> |
ساختن یک صفحه ساده تر از آن چیزی است که فکر می کنید
کد ساده متن را قرمز می کند
نوشتن به صورت پررنگ خیلی سخت تر نیست
ما به انتهای آن رسیدیم
اکنون کمی بیشتر در مورد برچسب ها می دانید و می توانید از آنها استفاده کنید. بیایید سعی کنیم یک پیوند برای پیوند چندین صفحه با هم وارد کنیم..
باشه الان تموم شد صفحه اول شما آماده است
فایل باید نامگذاری شود index.html... پایان یافتن ".html"پسوند فایل را نشان می دهد. اگر فقط نام فهرست را وارد کنید، سند به عنوان یک فایل متنی ذخیره می شود و در مرورگر باز نمی شود.
من سند را در دسکتاپ ذخیره کردم. اکنون باید آن را پیدا کنید، راست کلیک کرده و با استفاده از هر مرورگری آن را باز کنید. من گوگل کروم را انتخاب خواهم کرد.
صفحه ای که من ایجاد کردم اینگونه به نظر می رسد. مال شما فرقی نخواهد کرد همه چیز دقیقاً یکسان است: با تصاویر و فونت رنگی.
اکنون به جزئیات بیشتر در مورد برچسب ها می پردازم، اما فعلا اجازه دهید فقط از عنوان حذف شود مرکز "و درج یک خط حاوی کلمه" رنگ". اتفاقا من قبلا نوشتم. بسیار ساده است، خواندن آن را توصیه می کنم.
سند را دوباره ذخیره کنید، این بار فقط می توانید از میانبر صفحه کلید Ctrl + S استفاده کنید و سپس با استفاده از دکمه F5 صفحه را در مرورگر بازخوانی کنید.
به یاد داشته باشید، تقریباً هر برچسبی باید باز و بسته شود. یعنی باید یه جا کد اسلش باشه. در این مورد، به نظر می رسد این است: .
ببینید تیتر قرمز شده است. به همین ترتیب، می توانید به هر قسمت از متن سایه دلخواه بدهید.
خوب همین، یک نمونه آماده است و شما باید به خودتان افتخار کنید. البته هنوز آنلاین نیست، برای این کار باید صفحه وب را که توسط هاست ارائه شده است قرار دهید. همچنین باید دامنه خود را به هم متصل کنید تا افراد دیگر بتوانند ساخته شما را ببینند.
تا اینجا فقط شما می توانید صفحه را ببینید. اما باید اعتراف کنید که چنین سایتی تنها می تواند یک فرد از عصر آهن را شگفت زده کند. اما این اولین تجربه است، بیایید با درک برچسب هایی که استفاده کردیم، آن را حتی موفق تر کنیم. این به شما کمک می کند یاد بگیرید که چگونه پروژه های خود را بدون کمک دیگران ایجاد کنید.
برچسب ها
با اجازه شما، من به NotePad ++ تغییر می کنم. نسبت به یک نوت بوک معمولی مزایای زیادی دارد. در حال حاضر، برجسته کردن برچسب برای نشان دادن عناصری که در مورد آنها صحبت خواهم کرد بسیار مفید است. به طور کلی، اگر قصد یادگیری html را دارید، نصب این برنامه رایگان را به شدت توصیه می کنم.
این تنها مورد نیست و اگر کسی به گزینه های جایگزین علاقه مند است می توانم چند مورد دیگر را به شما پیشنهاد دهم. ما به بخش تئوری می رویم.
اصلی
صفحه با برچسب ها شروع و به پایان می رسد ... آنها به مرورگر نشان می دهند که این یک سند وب است که با استفاده از html ایجاد شده است.
بعدی می آید یا عنوان این شامل مهمترین اطلاعات در مورد صفحه، در مورد ما - است. اگر هنوز عبارت "صفحه اول من" را که در کد موجود است پیدا نکرده اید، به خود تب بالای خط جستجو توجه کنید.
یعنی برچسب ها
برچسب بزنید
نشان می دهد که عبارت یک عنوان است. به طور پیش فرض، کمی بزرگتر از متن اصلی است و پررنگ است. اگر من و شما اکنون نه تنها در html می‌نوشتیم، بلکه یک فایل CSS ایجاد می‌کردیم که فایل ما با آن بازتاب می‌کرد، می‌توانستیم اندازه، فونت و حتی رنگ تمام هدرهای صفحه را بدون تجویز کنترل کنیم. نوع قلم
همانطور که در مثال انجام دادیم. اگرچه این نیز کمی زود است.
به هر حال، عنوان و H1 هنگام اختصاص دادن سایت شما به نتایج جستجو تأثیر خود را دارند. باید با دقت زیادی با آنها رفتار کنید و در داخل آن چیزی ننویسید. مربوط به. علاوه بر h1، h2، h3، h4 نیز وجود دارد.
در همان خط یک باز و یک بسته وجود دارد
یکی از معدود تگ های تک است. یعنی خودش کار میکنه. به لطف این، عناصر از یک خط به خط دیگر می پرند. به زبان ساده، تورفتگی. یک بار نوشتیم، یعنی یک بار، دو بار مثل من پایین رفتیم و تورفتگی کمی بیشتر شد.
تصویر
بعد تگ می آید img ، یعنی تصویر، تصویر. براکت مربع باز می شود، تمام اطلاعات اولیه در مورد تصویر در آن وارد می شود، تنها پس از آن بسته می شود. لازم به ذکر است که img یک تگ است و تمام عناصر کد دیگری که در داخل قرار می گیرند، ویژگی های آن هستند.
اولین چیز این است alt ، یعنی شرح. این نیز برای بهینه سازی مورد نیاز است. گاهی اضافه می شود و عنوان ... وقتی با ماوس روی تصویر می‌روید، وقتی صفحه از قبل در مرورگر باز است، یک راهنمای ابزار در کنار مکان‌نما ظاهر می‌شود.
امکان آپلود عکس در پوشه سایت و نوشتن مسیر برای آن وجود داشت، اما من راه آسان را رفتم. من یک عکس در Pixabay پیدا کردم، آن را در یک پنجره جدید باز کردم و پیوند را چسباندم.
در تگ src مسیر عکس نوشته شده است این اوست که به مرورگر می گوید که برای یافتن تصویر مورد نظر چه چیزی حرکت کند و در کدام جهت نگاه کند - شما خودتان می نویسید.
قالب بندی متن
مسئول دادن سبک خاصی به بخشی از متن است، به عنوان مثال، مانند مورد ما، یک رنگ متفاوت. سبک = "رنگ: قرمز" نشان می دهد که رنگ قرمز خواهد بود. اگر زرد می خواهید، زرد، سبز - سبز بنویسید. می توانید از کدهای رنگی فتوشاپ استفاده کنید.
به پررنگ شدن متن کمک می کند.
یک خط افقی می کشد. تک است و فقط در حالت بسته استفاده می شود. اگر بنویسید
چندین بار، وقتی صفحه را در مرورگر باز می کنید، دقیقاً همان تعداد نوار افقی را دریافت خواهید کرد.
پیوندها
به مرورگر می گوید که پیوند بعدی خواهد بود. شما می خواهید خواننده را به آدرس دیگری هدایت کنید. این تگ دارای یک ویژگی مورد نیاز است href = "آدرس" ... نقل قول ها شامل مسیری است که مرورگر باید بازدیدکننده را به صفحه ببرد. پس از ثبت این تگ، توضیحاتی درج می شود، یک کلمه یا چند، که با کلیک بر روی آن، خواننده بیشتر منتقل می شود. پس از برآورده شدن این شرایط، می توانید یک برچسب بسته شدن دوم را وارد کنید .
بعد از اینکه بدنه اصلی صفحه نوشته شد، تگ را می بندید بدن از آنجایی که بدن کامل است. و نشان دهید که استفاده را برای امروز متوقف کرده اید html .
اگر می‌خواهید درباره تگ‌های html اطلاعات بیشتری کسب کنید و یاد بگیرید که چگونه نه تنها عکس‌ها، بلکه ویدیوها، ایجاد دکمه‌ها، فرم‌های مختلف، فهرست‌ها، پاراگراف‌ها را نیز درج کنید، می‌توانم یک دوره رایگان توسط Evgeny Popov به شما پیشنهاد کنم. مبانی HTML ". فقط 33 درس به شما کمک می کند تا به سطح بعدی برسید.
من همچنین می خواهم یک دوره ویدیویی را به شما توصیه کنم که به شما می گوید چگونه سایت ها ساخته شده اند. کل فرآیند با مثال های واقعی نشان داده شده است که به ویژه خوب است. این دوره هم برای مبتدیانی در نظر گرفته شده است که حتی HTML را نمی دانند و هم برای کسانی که هم HTML و هم CSS را به خوبی می دانند، اما در کدنویسی سایت ها خوب نیستند. با کلیک بر روی لینک می توانید اطلاعات کامل تری دریافت کنید: www.srs.myrusakov.ru/makeup
علاوه بر این، حذف کنید کتاب رایگان ساخت وب سایت ! این کتاب برای مبتدیان طراحی شده است و اینجاست که یک سایت OT و DO در حال ایجاد است. یعنی طرح آماده می شود، سپس صفحات ساخته می شود، قسمت نرم افزار نوشته می شود و سپس سایت در اینترنت قرار می گیرد. نویسنده به طور کامل در مورد همه چیز نظر می دهد و کتاب حاوی تصاویر و تصاویر زیادی است. علاوه بر این، ویژگی کتاب این است که یک سایت انتزاعی نیست که در حال ایجاد است، بلکه یک سایت کاملا واقعی است که در اینترنت وجود دارد.
امروز شما کارهای زیادی انجام داده اید، زیرا اولین قدم سخت ترین است.
مشترک شدن در خبرنامه و گروه VKontakte و بیشتر بیاموزید: چگونه و چرا به موتور سایت نیاز دارید، چیدمان بلوک و شبکه مدولار چیست، چگونه سایت ها را به درستی بنویسید، و موارد دیگر.
تا دفعه بعد و موفق باشید
دستورالعمل ها
هر چیزی که بازدید کننده در وب می بیند توسط مرورگر از دستورالعمل های ارسال شده توسط سرور خود بازسازی می شود. این دستورالعمل ها به زبان HTML (زبان نشانه گذاری HyperText) نوشته شده اند و برای فایل هایی که در آن ذخیره می شوند با htm و html برجسته می شوند. شما می توانید چنین فایلی را در یک ویرایشگر متن معمولی ایجاد کنید - این اولین قدم در ایجاد خواهد بود صفحات وب... برای مثال Notepad استاندارد را باز کنید و یک فایل خالی به نام index.html ایجاد کنید. وقتی آدرس وب سایتی را بدون مشخص کردن آدرس خاصی تایپ می کنید صفحه(به عنوان مثال)، اولین کاری که باید انجام دهید این است که جستجو کنید صفحهبا این نام - فهرست.
دستورالعمل های HTML "برچسب" نامیده می شوند و هر یک از آنها در چنین براکت هایی قرار می گیرند -<>... برخی از تگ ها جفت هستند، یعنی از تگ های باز و بسته تشکیل می شوند و اطلاعات بین آنها قرار می گیرد. به عنوان مثال، برچسبی که به مرورگر می گوید که کد در HTML زیر است، مانند این: تگ پایانی که نشان می دهد HTML در این نقطه کامل شده است به صورت زیر نوشته می شود:همانطور که می بینید، تگ بسته با وجود یک اسلش بعد از پرانتز باز با تگ باز تفاوت دارد (
تمام کدهایی که بین تگ ها قرار می دهید و، باید به دو قسمت تقسیم شود - سرصفحه و بدنه سند. تگ های سرفصل باز و بسته به صورت زیر نوشته می شوند:
این قسمت "سرویس" صفحه است - اطلاعات عنوان پنجره، کلمات کلیدی و توضیحات مربوط به روبات های جستجوگر، توضیحات سبک ها، اسکریپت ها و غیره در اینجا قرار داده شده است. عنوان پنجره صفحه را در آن وارد کنید: