ما یک صفحه وب ایجاد می کنیم و آن را روی یک وب سرور محلی میزبانی می کنیم. ایجاد یک صفحه html در دفترچه یادداشت: شفاف سازی برای dummies

با سلام خدمت دوستان عزیز و مهمانان وبلاگ من اوه من فقط متوجه شدم که Yandex به من TIC 20 اعطا کرد، اگرچه دیروز 0 بود. می دانم که TIC واقعاً دیگر معنایی ندارد، اما هنوز هم بسیار دلپذیر و شادی بخش است. خب، به طور کلی، من می خواستم سری مقالات اخیراً راه اندازی شده در سایت سازی را ادامه دهم. و اولین چیزی که می خواهم با آن شروع کنم اصول زبان نشانه گذاری فرامتن (نه برنامه نویسی!) HTML است.

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

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

برای شروع، یک سند متنی ساده ایجاد کنید یا دفترچه یادداشت را باز کنید. برای باز کردن دفترچه یادداشت می توانید خط "Run" را صدا بزنید و notepad را در آنجا وارد کنید. باز شد؟ آفرین!

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

فقط بگم که بیشتر تگ ها جفت هستند یعنی اول تگ افتتاحیه گذاشته میشه و بعد از اینکه اطلاعات رو نوشتیم باید تگ رو ببندیم. همانطور که باز می شود بسته می شود، فقط باید قبل از بسته شدن علامت "/" قرار دهید.

به طور کلی، برای عملکرد باید چند تگ اجباری قرار دهیم. بیایید ببینیم آنها چه هستند.

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

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

بنابراین یک سند متنی ایجاد می کنیم و محتوای زیر را در آنجا می نویسیم:

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

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

سپس سند خود را به صورت html ذخیره کنید. برای این کار هنگام ذخیره کردن، بعد از اینکه سند خود را نامگذاری کردید، نقطه بگذارید و html بنویسید. یعنی باید index.html را دریافت کنید. سپس سند شما به طور خودکار نه به عنوان یک سند متنی، بلکه به عنوان یک صفحه وب ذخیره می شود. و هنگامی که سند را ذخیره می کنید، رمزگذاری را به UTF-8 تغییر دهید، می توانید این فایل را با هر مرورگری باز کنید. بیایید این کار را انجام دهیم و ببینیم چه چیزی به دست آورده ایم.

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

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

اما سعی کنید چند فاصله اضافه کنید و متن بیشتری بنویسید یا فقط چند خط متن بنویسید و در همان سند ذخیره کنید.

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

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

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

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

در آینده از طریق ویرایشگر Notepad ++ کار خواهم کرد. آن را نصب کنید و متوجه خواهید شد که چرا راحت است. هیچ تنظیمات عاقلانه ای در آنجا وجود ندارد، اما اگر به طور ناگهانی نسخه انگلیسی را نصب کردید، به منوی "Preference" بروید و روسی را در ستون "Localization" انتخاب کنید.

اوه، و همچنین به منوی "Encoding" بروید و "UTF-8" را انتخاب کنید. خوب، بلافاصله این فایل را با فرمت html ذخیره کنید. برای انجام این کار، منوی "File" - "Save As" را انتخاب کنید و با انتخاب فرمت "html" از فهرست کشویی، فهرست سند را نامگذاری کنید. این کار به این دلیل انجام می شود که برنامه بفهمد ما چه کار می کنیم و تگ ها و دستورات لازم را برای ما برجسته کند.

اصلاً چرا صفحه ایندکس را صدا می زنم؟ واقعیت این است که وقتی از هر سایتی بازدید می کنید، به طور پیش فرض به دنبال صفحه index.html یا index.php می گردد. این فایل ها هستند که به طور کلی به عنوان اصلی پذیرفته می شوند، اما به طور کلی می توان این را در سرور تغییر داد.

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

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

با احترام، دیمیتری کوستین.

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

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

به طور کلی، یک برچسب ساخت فرم است

انواع اصلی تگ ها و هدف آنها را در نظر بگیرید.

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

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

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

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

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

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

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

پوشه ای به نام WEB در هر دیسک سخت رایانه خود ایجاد کنید. حالا بیایید برنامه Notepad را راه اندازی کنیم و دست به کار شویم.

یک برنامه، به عنوان مثال Notepad را با کلیک بر روی دکمه Start در نوار وظیفه و انتخاب Programs - General - Notepad از منوی ظاهر شده باز کنید.

می توانید از هر ویرایشگر متن دیگری استفاده کنید. اما در این مورد، باید فایل را به صورت متن ساده ذخیره کنید تا از قرار دادن علائم قالب‌بندی شخص ثالث در سند WEB جلوگیری کنید.

ابتدا، اجازه دهید تگ های اصلی را که ساختار هر سند HTML را تعریف می کنند، معرفی کنیم. به یاد بیاورید که در کد HTML استفاده از هر موردی از کاراکترها - بالا یا پایین مجاز است.

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

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

به یاد داشته باشید که اولین و آخرین تگ به ترتیب به معنای آغاز و پایان سند هستند، عنصر ... عنوان صفحه وب، عنصر ... - بدنه سند را تعریف می کند، و در عنصری که در حال حاضر نشان می دهیم. عنوان صفحه وب

بین تگ های باز و بسته، عنوان سند - Company SD را درج کنید. این عنصر باید به شکل زیر باشد:

شرکت اس دی

به یاد داشته باشید که عنوان صفحه وب باید کوچک باشد و محتوای آن را تا حد زیادی نشان دهد.

وظیفه بعدی ما این است که در متن سند بین تگ ها ... یک متن کوچک به مهمانان صفحه وب خوش آمدید.

یک خط خالی بین تگ ها وارد کنید و متن زیر را در آن وارد کنید:

به صفحه شرکت SD خوش آمدید! در اینجا با فعالیت های ما، محصولات نرم افزاری شرکت و تجهیزاتی که تولید می کنیم آشنا خواهید شد.

برای هر صفحه وب می توانید رنگ پس زمینه و رنگ متن را پیدا کنید. این کار با استفاده از ویژگی های bgcolor و text تگ افتتاحیه انجام می شود. دو گزینه برای تعیین رنگ به عنوان مقدار مشخصه وجود دارد:

• نشانه شفاهی نام رنگ، به عنوان مثال، سفید (سفید برفی). شانزده نام از این قبیل در HTML وجود دارد.
• یک عدد در نماد هگزادسیمال، به عنوان مثال، "#ffffff" - سفید خالص، که نشان می دهد چگونه رنگ از رنگ های اصلی - قرمز، سبز و آبی تشکیل شده است.

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

بیایید نام چند رنگ را فهرست کنیم: سیاه (تیره)، خاکستری (مایل به خاکستری)، قرمز (قرمز مایل به قرمز)، سبز (سبز)، آبی (آبی).

بیایید به عنوان مثال برای پس زمینه صفحه وب خود از رنگ آبی (آبی) و برای متن - زرد (زرد) استفاده کنیم.

ویژگی های bgcolor="blue" و text="yellow" را در تگ آغازین قرار دهید. این تگ باید به شکل زیر باشد:

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

در پنجره برنامه Notepad دستور منو File - Save (File - Save) را انتخاب کنید. گفتگوی Save As روی صفحه نمایش ظاهر می شود.

پوشه WEB از قبل ساخته شده را باز کنید که تمام فایل های وب سایت باید در آن ذخیره شوند.

در قسمت File name input، other.html را وارد کنید - اینگونه نام این فایل را می گذاریم.

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

اکنون می توانید نتایج کار ما را مشاهده کنید.

بدون بستن، پنجره Notepad را کوچک کنید.

پوشه WEB را که فایل other.html را در آن ذخیره کرده اید با استفاده از برنامه Windows Explorer باز کنید و روی نماد آن دوبار کلیک کنید. مرورگر پیش فرض راه اندازی می شود و سند other.html در پنجره آن باز می شود.

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

شاید در مرورگر شما اندازه فونت متن بزرگتر یا کوچکتر از تصویر باشد. در این حالت دستور منو View - Font Size - Medium (View - Text Size - Medium) را در مرورگر اینترنت اکسپلورر انتخاب کنید تا میانگین اندازه فونت تنظیم شود.

باید درک کرد که مرورگرهای مختلف ممکن است محتویات یک فایل HTML را متفاوت نشان دهند. بنابراین، هنگام توسعه صفحات وب، بهتر است همیشه نتیجه را در همه مرورگرهای محبوب تر - Internet Explorer، Opera، Mozilla مشاهده کنید. در این صورت متقاعد خواهید شد که مهمان وب سایت شما دقیقاً آنچه را که می خواهید به او نشان دهید را می بیند.

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

بدون بستن، پنجره های مرورگر را کوچک کنید.

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

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

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

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

یک سند باز کنید

این کد را در آن قرار دهید.

صفحه اول من "https://pixabay.com/static/uploads/photo/2016/10/14/18/03/workplace-1740807_960_720.jpg" > ما به پایین رسیده ایم اکنون کمی بیشتر در مورد برچسب ها می دانید و می توانید از آنها استفاده کنید. بیایید سعی کنیم پیوندی را برای پیوند چندین صفحه به یکدیگر وارد کنیم. به عنوان مثال، اینجا یک پیوند به وبلاگ من است - Start-Luck - فقط در مورد "پیچیده" صحبت می کند.

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



کد ساده برای قرمز کردن متن

نوشتن به صورت پررنگ خیلی سخت تر نیست

ما به پایین رسیده ایم

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

باشه الان تموم شد صفحه اول شما آماده است

نام فایل باید index.html باشد. پایان یافتن ".html"پسوند فایل را نشان می دهد. اگر به سادگی نام فهرست را وارد کنید، سند به عنوان یک فایل متنی ذخیره می شود و توسط مرورگر باز نمی شود.

من سند را در دسکتاپ ذخیره کردم. اکنون باید آن را پیدا کنید، دکمه سمت راست ماوس را فشار داده و با هر مرورگری باز کنید. من گوگل کروم را انتخاب خواهم کرد.

صفحه ای که من درست کردم به این شکل است. مال شما فرقی نخواهد کرد همه چیز دقیقاً یکسان است: با تصاویر و فونت رنگی.

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

سند را دوباره ذخیره کنید، این بار فقط می توانید از میانبر صفحه کلید Ctrl + S استفاده کنید و سپس با استفاده از دکمه F5 صفحه را در مرورگر بازخوانی کنید.

به یاد داشته باشید، تقریباً هر برچسبی باید باز و بسته شود. یعنی کد با اسلش باید در جایی قرار داشته باشد. در این مورد، به نظر می رسد این است:

ببینید عنوان قرمز شده است. به همین ترتیب می توانید به هر قسمت از متن سایه دلخواه بدهید.

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

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

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

این تنها مورد نیست و اگر کسی به گزینه های جایگزین علاقه دارد می توانم چند مورد دیگر را به شما پیشنهاد دهم. ما به بخش تئوری می رویم.

صفحه با برچسب شروع و به پایان می رسد . آنها به مرورگر نشان می دهند که این یک سند وب است که با html ایجاد شده است.

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

یعنی برچسب ها مسئول ابتدا و انتهای اطلاعات اصلی صفحه هستند.

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

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

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

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

بعد تگ می آید img، یعنی تصویر، تصویر. براکت مربع باز می شود، تمام اطلاعات اولیه در مورد تصویر در آن قرار می گیرد، تنها پس از آن بسته می شود. لازم به ذکر است که imgیک تگ است و تمام عناصر کد دیگری که در داخل آن قرار می گیرند، ویژگی های آن هستند.

اول از همه می رود alt، که شرح است. این نیز برای بهینه سازی ضروری است. گاهی اوقات نیز اضافه می شود عنوان. هنگامی که ماوس را روی یک تصویر قرار می دهید، وقتی صفحه از قبل در مرورگر باز است، یک راهنمای ابزار در کنار مکان نما ظاهر می شود.

امکان آپلود عکس در پوشه سایت و تعیین مسیر برای آن وجود داشت، اما من راه آسان را رفتم. در میان Pixabay من یک عکس پیدا کردم، آن را در یک پنجره جدید باز کردم و پیوند را چسباندم.

در برچسب srcمسیر تصویر نوشته شده است. این اوست که به مرورگر می گوید که برای یافتن تصویر مورد نظر باید بیشتر حرکت کنید و در کدام جهت نگاه کنید - خودتان می نویسید.

مسئول دادن سبک خاصی به بخشی از متن است، به عنوان مثال، مانند مورد ما، یک رنگ متفاوت. style="color:red"نشان می دهد که رنگ قرمز خواهد بود. اگر زرد می خواهید، زرد، سبز - سبز بنویسید. می توانید از کدهای رنگی فتوشاپ استفاده کنید.

به پررنگ شدن متن کمک می کند.

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

به مرورگر می گوید که یک پیوند دنبال خواهد شد. شما می خواهید خواننده را به آدرس دیگری هدایت کنید. این تگ دارای ویژگی مورد نیاز است href="آدرس". مسیری که مرورگر باید بازدید کننده را به صفحه منتقل کند در نقل قول ها درج می شود. پس از نوشتن این تگ، توضیحاتی درج می شود، یک کلمه یا چند، که با کلیک بر روی آن، خواننده بیشتر منتقل می شود. پس از برآورده شدن این شرایط، می توانید یک برچسب بسته شدن دوم را وارد کنید .

افزودن تصاویر

برچسب بزنید یک برچسب واحد است، بدون برچسب بسته شدن. شما می توانید ویژگی های تصویر را مشخص کنید.

ویژگی src مکان تصویر را مشخص می کند.

ویژگی style گزینه های زیادی از جمله عرض و ارتفاع تصویر بر حسب پیکسل دارد.

ویژگی alt توضیح کوتاهی از تصویر می دهد. اگر به دلایلی تصویر بارگیری نشود استفاده می شود.

افزودن عنوان

این تگ برای HTML5 جدید است و بالاترین عنصر یک صفحه وب را مشخص می کند. سرفصل ها معمولاً حاوی لوگوی شرکت، اطلاعات تماس، پیوندهای ناوبری و غیره هستند. در یک سند واحد می تواند چندین عنصر وجود داشته باشد.

مفاهیم پیشرفته در HTML

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

برای کمک بیشتر به شما چند مفهوم را ذکر می کنیم. می توانید به یادگیری بیشتر ادامه دهید و از HTML پیشرفته و ویژگی های آن استفاده کنید.

اعتبار سنجی کد HTML

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

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

اضافه کردن برچسب های اضافی

تگ‌ها و ویژگی‌های HTML بسیار بیشتر از آنچه در اینجا بحث کردیم وجود دارد. دو منبع یادگیری خوب w3schools و HTML Dog هستند که آموزش های بیشتری و لیست کاملی از برچسب ها دارند.

همچنین می‌توانید از «مشاهده صفحه منبع» در مرورگر برای بررسی کدهای وب‌سایت‌هایی که به خوبی طراحی شده‌اند و تکنیک‌های جدید را مشاهده کنید، استفاده کنید.

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

افزودن CSS و جاوا اسکریپت

از CSS می توان برای بهبود سریع ظاهر و احساس سایت خود استفاده کرد. شما می توانید از CSS برای اضافه کردن رنگ ها، فونت ها و تغییر مکان عناصر استفاده کنید. با پیوند دادن یک صفحه سبک CSS به یک صفحه HTML، می توانید سبک تمام متن را تغییر دهید.

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

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