ایجاد یک صفحه html در دفترچه یادداشت: شفاف سازی برای dummies. سربرگ تراز وسط

وظیفه 1: ایجاد فایل های پایه HTML

برای ایجاد فایل HTML، موارد زیر را انجام دهید:

    یک پوشه ایجاد کنید HTML، که در آن صفحات وب ایجاد شده را ذخیره می کنیم.

    برنامه استاندارد Notepad را اجرا کنید.

    ساده ترین متن فایل HTML را در پنجره ویرایشگر تایپ کنید:

فایل HTML آموزشی

برنامه کلاس سه شنبه

    فایل را به عنوان RASP.HTM ذخیره کنید.

    برای مشاهده صفحه وب ایجاد شده، مرورگر Microsoft Internet Explorer را دانلود کنید.

    در منوی مرورگر باز کنید فایل(فایل)، باز کن(باز کن)، چشم انداز(بررسی اجمالی- مرور کردن) و فایل RASP.HTM را در پوشه KURS پیدا کرده و آپلود کنید. مطمئن شوید که نام صفحه وب (آموزش HTML) در نوار وضعیت بالای مرورگر نمایش داده می شود.

وظیفه 2.کنترل طرح بندی متن روی صفحه

اطلاعات

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

    در صورت لزوم پی پی. 5-6 کار 1.

    منبع اصلی صفحه وب - در منوی مرورگر را باز کنید چشم انداز(چشم انداز)، منبع (به عنوانHTML) پنجره ای با برنامه استاندارد Notepad باز می شود که در آن صفحه وب شما با دستورات HTML ارائه می شود.

    متن فایل HTML را با قرار دادن کلمات "Schedule"، "Classes"، "Tuesday" در خطوط مختلف تغییر دهید:

فایل HTML آموزشی

برنامه

کلاس ها

در روز سه شنبه

    با استفاده از دستورات تغییرات خود را در فایل RASP.HTM ذخیره کنید فایل(فایل)، صرفه جویی(صرفه جویی). Notepad را ببندید.

    از Microsoft Internet Explorer برای مشاهده صفحه وب تازه بازیابی شده با استفاده از کلید F5 یا با استفاده از دستورات استفاده کنید چشم انداز(چشم انداز)، تازه کردن (تازه کردن).آیا تصویر متن روی صفحه تغییر کرده است؟

توجه داشته باشید

در آینده، پس از ایجاد تغییرات در صفحه وب، همیشه مراحل 4-5 را دنبال کنید.

وظیفه 3. برچسب های شکست خط و پاراگراف

اطلاعات

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

برچسب خوراک خط
یک خط را از متن یا گرافیک بعدی جدا می کند. برچسب پاراگراف

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

    در متن فایل HTML تغییراتی ایجاد کنید:

فایل HTML آموزشی

برنامه

کلاس ها

در روز سه شنبه

    4. تغییرات خود را در فایل RASP.HTM ذخیره کنید.

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

وظیفه 4. انتخاب قطعات متن

اطلاعات

تگ های انتخاب متن به شما امکان می دهد نمایش شخصیت ها و کلمات را کنترل کنید. سه برچسب انتخاب متن وجود دارد:

… برجسته کردن پررنگ,

… برجسته کردن به صورت مورب

…برجسته کردن خط کشی.

فایل HTML آموزشی

برنامه کلاس ها در روز سه شنبه

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

امکان استفاده از فونت های ترکیبی وجود دارد:

برنامه کلاس ها در روز سه شنبه

اما در عین حال باید قانون زیر را برای نوشتن تگ های ترکیبی به خاطر بسپارید:

<Тэг-1> <Тэг-2> … برچسب-2>

ورود اشتباه

وظیفه 5: استفاده از سبک های عنوان

اطلاعات

دو راه برای کنترل اندازه متن نمایش داده شده توسط مرورگر وجود دارد:

    با استفاده از سبک های عنوان،

    تنظیم اندازه سند اصلی یا اندازه فونت فعلی.

شش تگ عنوان (H1 تا H6) وجود دارد. هر تگ دارای سبک خاصی است که در تنظیمات مرورگر مشخص شده است. سبک H1 بزرگترین است.

    تغییراتی را در فایل RASP.HTM اعمال کنید:

فایل HTML آموزشی

برنامه

کلاس ها در روز سه شنبه

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

وظیفه 5. تنظیم اندازه فونت فعلی.

اطلاعات

برچسب فونت به شما امکان می دهد اندازه فونت فعلی را در مکان های جداگانه متن تنظیم کنید. محدوده تنظیم فونت فعلی از 1 تا 7 است.

    تغییراتی را در فایل RASP.HTM اعمال کنید:

فایل HTML آموزشی

برنامه

کلاس های سه شنبه

    اندازه فونت متن "کلاس در روز سه شنبه" را خودتان با استفاده از برچسب تغییر دهید .

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

وظیفه 6. نوع تایپ و رنگ فونت

اطلاعات

برچسب بزنید کنترل اندازه، سبک و رنگ متن را فراهم می کند. تغییر فونت به سادگی با افزودن به برچسب انجام می شود ویژگی FACE. به عنوان مثال، برای نمایش متن با فونت Arial، باید بنویسید .

برای تغییر رنگ فونت یک برچسب می توان از ویژگی استفاده کرد COLOR = "X".

به جای X، باید نام رنگ (در گیومه) یا مقدار هگزادسیمال آن را جایگزین کنید. هنگام تعیین یک رنگ با یک عدد هگزادسیمال، می توانید این رنگ را به سه جزء نشان دهید:

قرمز (R)، سبز (G)، آبی (B) که هر کدام از 0 تا FF ارزش دارند.

نمونه هایی از ضبط رنگ در فرمت RGB در جدول نشان داده شده است:

میز 1

رنگ

رنگ

بنفش

رنگ قهوه ای

نارنجی

فیروزه

    تغییراتی را در فایل RASP.HTM اعمال کنید:

فایل HTML آموزشی

برنامه >

کلاس های سه شنبه

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

وظیفه 7. تراز کردن متن به صورت افقی

اطلاعات

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

مرورگرهای مدرن از ویژگی تراز متن استفاده می کنند ALIGN=، که در تگ های پاراگراف یا عنوان تعبیه شده است.

    تغییراتی را در فایل RASP.HTM اعمال کنید:

فایل HTML آموزشی

برنامه>

کلاس های سه شنبه

وظیفه 8. تنظیم رنگ پس زمینه و متن

اطلاعات

هنگام نمایش پس زمینه، متن، مرورگرها از رنگ هایی استفاده می کنند که به طور پیش فرض تنظیم شده اند - آنها توسط تنظیمات مرورگر تنظیم می شوند. این رنگ ها در ابتدای فایل HTML در تگ تنظیم می شوند . ورودی رنگ مشابه رنگ فونت است (جدول 1، بند 12 را ببینید). ویژگی BGCOLOR= رنگ پس‌زمینه صفحه را تعیین می‌کند، TEXT= رنگ متن را برای کل صفحه، LINK= و VLINK= رنگ‌های پیوندهای بازدید نشده و بازدید شده را به ترتیب تعیین می‌کنند (دو پارامتر آخر بعداً مورد بحث قرار خواهند گرفت).

    تغییراتی را در فایل RASP.HTM اعمال کنید:

فایل HTML آموزشی

BGCOLOR="#FFFFCC" TEXT="#330066">

برنامه>

کلاس های سه شنبه

وظیفه 9.

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

    خودتان سند HTML خود را ایجاد کنید. بگذارید داستان کوتاهی در مورد خودتان و سرگرمی‌هایتان باشد.

سلام به خوانندگان عزیز وبلاگ ما بخش "ایجاد یک سایت از ابتدا" و به ویژه موضوع برچسب ها را ادامه می دهیم و امروز برچسب هایی را که در هر صفحه وب وجود دارد در نظر خواهیم گرفت - , و . یک برچسب دیگر وجود دارد که باید در هر سند HTML وجود داشته باشد و قبلاً در یکی از مقالات قبلی در مورد آن نوشتم - بنابراین ما به آن دست نخواهیم داد.

در مقالات قبلی ستون در مورد ایجاد یک فایل خالی با فرمت html نوشتم. در واقع از آن در مقاله حرفه ای استفاده شد (در آنجا تگ های عنوان اعمال شد). اکنون مستقیماً این فایل را با توضیحات کامل ویرایش می کنیم.

و اجازه دهید مقاله را با ویرایش فایل ایجاد شده شروع کنیم. من شخصاً نام آن را index.html گذاشتم، اما نام آن می تواند هر چیزی باشد. آن را با هر ویرایشگر متنی باز کنید (بهتر است از Notepad++ استفاده کنید، زیرا دارای برجسته کردن کد و سایر ابزارهای مفید است). و بلافاصله تگ ها را به آن اضافه کنید , و دقیقا به ترتیبی که نوشته شده اند. فراموش نکنید که آنها را همانطور که در تصویر نشان داده شده است ببندید. سند به شکل زیر خواهد بود:

حال معنای هر تگ را جداگانه در نظر بگیرید. جای تعجب نیست که آنها در همه هستند. سند HTML.

توابع برچسب

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

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

حتی با توجه به اینکه عملکرد این تگ فقط در است محدود کردن محتوا، ویژگی های خاص خود را دارد (که در حال حاضر یا اصلا استفاده نمی شود یا بسیار کم استفاده می شود). منابع مختلف ویژگی هایی را نشان می دهند که با یکدیگر متفاوت هستند، بنابراین من جرات ارائه نسخه صحیح را ندارم.

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

و در اینجا چیزی است که وقتی ماوس را روی سندی با این محتوا نگه دارید مشاهده خواهید کرد:

ترجیحاً از ویژگی title استفاده شود که در تگ نباشد ، اما در هر بخش خاص دیگری از صفحه. اولاً راحت است و ثانیاً موتورهای جستجو با سایت شما بهتر برخورد خواهند کرد. این تگ مستقیماً بر بهینه سازی منابع تأثیر نمی گذارد. جلوتر می رویم.

تابع برچسب

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

در چه اطلاعاتی می توان یافت ? اما هیچ کدام. همه چیز در این برچسب فقط با مشاهده کد منبع صفحه برای چشم انسان قابل دسترسی است. تمام مطالب این تگ برای موتورهای جستجو و مرورگرها. تنها چیزی که به نوعی می توانید ببینید برچسب است ، که عنوان پنجره صفحه وب را بر عهده دارد. به عنوان مثال:</p> <p><img src='https://i1.wp.com/monetavinternete.ru/wp-content/uploads/2013/01/Title-v-tege-head.png' align="center" width="100%" loading=lazy loading=lazy></p> <p>متن بعد از آیکون محتوای تگ است <title>. حالا بیایید به محتوا نگاه کنیم. <head>، که ما نمی توانیم آن را ببینیم، اما بخش بسیار مهمی است <b>ایجاد و ارتقای سایت</b>اول از همه، این خط است</p><p> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </p><p>این متا تگ برای <b>نوع محتوای صفحه</b>(نوع محتوا). در این مورد، این کد html در رمزگذاری UTF-8 (content="text/html; charset=UTF-8") است. بعد، تگ عنوانی که در بالا توضیح داده شد می آید. سپس خطوطی می آیند که با تگ شروع می شوند <link>. پیوندی به یک سند خارجی را نشان می دهد. به عنوان مثال، خط</p><p> <link href="http://сайт/.../style.css" rel="stylesheet" media="screen" type="text/css" /> </p><p>نشان می دهد که فایل (rel="stylesheet") با (type="text/css") متصل است که در فلان آدرس قرار دارد (برای کاهش طول خط، نیمی از آدرس را با نقطه جایگزین کردم) . پس از پردازش این رشته توسط مرورگر، مشخص می کند که کجا باید دریافت کنید <b>شیت های سبک آبشاری</b>.</p> <p>به طور کلی، اطلاعات زیادی در تگ head وجود دارد که می توان در مورد آنها به طور نامحدود صحبت کرد. آخرین چیزی که قابل توجه است (به ویژه در مورد ) وجود برچسب های توضیحات، کلمات کلیدی و متعارف است. من استفاده می کنم <b>افزونه All in One SEO Pack</b>، بنابراین آنها در داخل حضور دارند <head>.</p> <p>همانطور که می دانید، هر چیز عالی همیشه کوچک شروع می شود. اگر علاقه مند به پاسخ به این سوال هستید که چگونه می توان یک وب سایت از طریق دفترچه یادداشت ایجاد کرد، پس حتما در مورد این امکان جایی شنیده اید. این واقعا ممکن است. اما لازم به ذکر است که به احتمال زیاد در حال حاضر هیچ کس یک سایت تعاملی پویا مدرن را از طریق یک دفترچه یادداشت ایجاد نخواهد کرد ، زیرا برنامه های خاصی برای این کار وجود دارد که روند توسعه را بسیار تسریع و ساده می کند. اما ایجاد یک صفحه وب تمام عیار کاملاً ممکن است.</p><b>نحوه ایجاد یک وب سایت در دفترچه یادداشت</b><br>برای شروع، کمی آشنایی با تئوری و اصطلاحات کلی ضروری است. اکثریت قریب به اتفاق صفحات وب سایت اسناد متنی معمولی هستند که به روشی خاص طراحی شده اند - زبان نشانه گذاری فرامتن که به اختصار HTML نامیده می شود. برخی نشانه گذاری HTML را به عنوان یک زبان برنامه نویسی طبقه بندی می کنند، اما این درست نیست. <p>HTML فقط راهی برای استاندارد کردن نشانه‌گذاری سند است که به طور منحصربه‌فردی توسط مرورگرها تفسیر می‌شود تا بر روی صفحه‌نمایش رایانه به شکل کاربرپسند نمایش داده شود. ابزار اصلی زبان HTML عناصر ساختاری خاصی هستند که با کمک آنها سند ترسیم می شود. به آنها توصیفگر یا برچسب می گویند.</p><p>به طور کلی، یک برچسب ساخت فرم است <table>بنابراین برچسب با شروع می شود< после которого следует название тега table и вся конструкция завершается знаком >. برچسب‌ها به صورت جفتی می‌آیند مانند پررنگ کردن متن <b>و</b>و به عنوان یک خط جدید جفت نشده است <br>. در مورد استفاده از تگ های جفت شده باید به عنوان تگ باز کننده استفاده شود <b>، و بسته شدن</b>. تگ بسته شدن یک توصیف کننده با یک اسلش جلو / است.</p><p>انواع اصلی تگ ها و هدف آنها را در نظر بگیرید.</p><ul><li><span><i>عنصر <b><!DOCTYPE html> </b>. </i>روی همان ابتدای صفحه تنظیم کنید و به مرورگر بگویید چگونه این سند را تفسیر کند. اختیاری است، اما برای جلوگیری از مشکلات احتمالی در صفحه نمایش، بسیار مطلوب است. <br></span></li><li><span><i>برچسب بزنید <b><html> </b>. </i>این یک تگ جفتی است و از دو قسمت تشکیل شده است <html>و</html>. هر صفحه در سایت با این تگ شروع می شود و با آن به پایان می رسد. <br></span></li><li><span><i>برچسب بزنید <b><head> </b>. </i>همچنین یک تگ جفتی است و از دو قسمت تشکیل شده است <head>و</head>. این برچسب حاوی اطلاعات مهم مختلفی در مورد صفحه است: عنوان آن، پیوندهایی به سبک های طراحی استفاده شده، اسکریپت های گنجانده شده، ابرداده های ویژه. <br></span></li><li><span><i>برچسب بزنید <b><title> </b>. </i> <title>وو در داخل تگ قرار دارد . این تگ عنوان صفحه ای که با آن در مرورگر قابل مشاهده خواهد بود را مشخص می کند.

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

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

  • برچسب ها

    ,

    ,

    ,

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

    و

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

  • برچسب بزنید . همچنین یک تگ جفتی است که از دو قسمت تشکیل شده است وو استایل فونت را روی Bold قرار می دهد.
    • در مجموع، حدود صد برچسب وجود دارد، اما ده مورد در نظر گرفته شده در حال حاضر برای طراحی ساده ترین صفحه سایت در یک دفترچه کافی است. برچسب های سند اصلی , , , <body>به ترتیب دقیق توزیع می شود. داخل تگ <body>بقیه توصیفگرها ممکن است به ترتیبات مختلف در استانداردهای زبان HTML باشند. ساده ترین راه برای درک این موضوع ایجاد یک صفحه وب ساده است. <ol><li><span>Notepad را اجرا کنید و در اولین خط آن عنصر را تنظیم کنید<!DOCTYPE html>، که به مرورگر می گوید که چگونه سند شما را تفسیر کند. <p> <!DOCTYPE html></p></span></li><li><span>یک خط جدید ایجاد کنید و یک جفت تگ اضافه کنید <html>. برچسب بسته شدن را ترجمه کنید</html>دو خط پایین <p> <!DOCTYPE html><br><html></p></span></li><li><span>یک جفت تگ اضافه کنید <head>در خط بین برچسب ها <html>و تگ بسته شدن را ترجمه کنید</head>دو خط پایین <p> <!DOCTYPE html><br><html><br><head></p><p></head><br></html></p></span></li><li><span>در خط بین برچسب ها <head>و</head>یک جفت تگ بنویسید <title>در یک خط






  • عنوان صفحه وب خود را بین تگ ها وارد کنید و. مثلا اینجوری




    اولین صفحه وب سایت من

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




    اولین صفحه وب سایت من


  • بین تگ های داخلی ترجمه مضاعف انجام دهید و. در خط ظاهر شده، تگ عنوان جفت شده را وارد کنید

    . داخل تگ تایپ کنید

    زیرنویس صفحه




    اولین صفحه وب سایت من


    درمورد من



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




    اولین صفحه وب سایت من


    درمورد من


    نام من ایوانف ایوان است. من در حال ایجاد وب سایت خود هستم.



  • نام و نام خانوادگی را در یک تگ جفت قرار دهید برای جسور ساختن آنها




    اولین صفحه وب سایت من


    درمورد من


    اسم من هست ایوانف ایوان. من در حال ایجاد وب سایت خود هستم.



  • پس از بستن تگ پاراگراف

    یک تغذیه خط انجام دهید و تگ جفت را در خط جدید وارد کنید

    . مقداری متن بین تگ ها وارد کنید.




    اولین صفحه وب سایت من


    درمورد من


    اسم من هست ایوانف ایوان. من در حال ایجاد وب سایت خود هستم.


    پیشرفت من



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




    اولین صفحه وب سایت من


    درمورد من


    اسم من هست ایوانف ایوان. من در حال ایجاد وب سایت خود هستم.


    پیشرفت من




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

    نوع ساخت و ساز شما باید موارد زیر را دریافت کنید.




    اولین صفحه وب سایت من


    درمورد من


    اسم من هست ایوانف ایوان. من در حال ایجاد وب سایت خود هستم.


    پیشرفت من


    سینتکس اولیه HTML تسلط یافته و صفحه اول سایت آینده ایجاد شده است.
    در فرآیند آموزش از مطالب سایت استفاده شد



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




    اولین صفحه وب سایت من


    درمورد من


    اسم من هست ایوانف ایوان. من در حال ایجاد وب سایت خود هستم.


    پیشرفت من


    سینتکس اولیه HTML تسلط یافته و صفحه اول سایت آینده ایجاد شده است.
    در فرآیند آموزش از مطالب سایت استفاده شد

    ارتباط دادن: سایت



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

    توسعه وب سایت ها با استفاده از زبان نشانه گذاری فرامتن HTML

    کلاس هشتم

    درس 1 ساختار صفحه وب

    مفهوم وب سایت

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

    انواع وب سایت

    رسمی (دولت،
    دوما، مدرسه...)
    تجاری
    شخصی

    مزایای صفحات وب:

    حجم اطلاعات کم
    ("ریه ها")
    مناسب برای مشاهده در انواع مختلف
    سیستم عامل
    پویا.
    در ارتباط بودن.

    مراحل ساخت وب سایت:

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

    برنامه های ایجاد سایت:

    1) ساده ترین ویرایشگر متن (بدون
    قالب بندی متن):
    نوت بوک
    2) مرورگر برای مشاهده صفحات:
    اینترنت اکسپلورر
    3) برنامه پردازش تصویر:
    فتوشاپ

    ویرایشگرهای وب بصری

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

    ساختار صفحه وب

    10. برچسب ها

    ظاهر صفحه وب توسط مدیران تنظیم می شود
    دستورات - برچسب ها، که هستند
    براکت های زاویه< >
    برچسب ها می توانند تک (غیر تکراری) یا
    جفت شده (ظروف): قبل از بسته شدن
    تگ ظرف با یک اسلش رو به جلو (/) نوشته می شود

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

    11. ساختار صفحه وب

    کل کد HTML صفحه
    در داخل اصلی قرار داده شده است
    ظرف:
    .
    صفحه وب به تقسیم بندی می شود
    2 بخش منطقی:
    عنوان (HEAD)
    محتوا (بدن).

    12. عنوان صفحه وب

    عنوان صفحه وب در یک ظرف پیچیده شده است.
    حاوی عنوان سند و اطلاعات راهنما در مورد صفحه است
    (به عنوان مثال، نوع رمزگذاری) که مرورگر برای آن استفاده می کند
    نمایش صحیح
    عنوان صفحه وب در ظرف موجود است<ТITLE> و
    هنگام مشاهده در خط بالای پنجره مرورگر نمایش داده می شود
    صفحات

    <ТITLЕ>کامپیوتر

    13. نوشتن یک قالب صفحه وب



    <ТITLЕ>کامپیوتر

    14. محتوای اصلی صفحه وب

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

    15. قالب صفحه وب



    <ТITLЕ>کامپیوتر


    همه چیز در مورد کامپیوتر

    16.

    17. چگونه یک صفحه وب را ذخیره کنیم

    1. یک پوشه مخصوص برای سایت ایجاد کنید و
    تمام فایل های سایت را در این پوشه ذخیره کنید.
    2. صفحه وب را به صورت فایل ذخیره کنید
    به نام index.html صفحه عنوان است
    سایت (برای اولین بار در مرورگر بارگذاری شد)
    پسوند فایل صفحه وب - .htm
    or.html

    18. ما وب سایت خود را ایجاد می کنیم….

    لازم است بین نام فایل index.html - زیر تمایز قائل شوید
    که یک صفحه وب در یک فایل ذخیره می شود
    سیستم و نام واقعی صفحه وب
    "رایانه" - در خط بالایی نمایش داده می شود
    ویندوز مرورگر و ابتدا تجزیه شد
    موتورهای جستجو.
    نام صفحه وب باید حداکثر باشد
    میزان ارتباط با محتوای آن
    1. کد HTML صفحه وب را در Notepad وارد کنید.
    2. فایل را به عنوان index.html در یک پوشه ذخیره کنید
    سایت. نوع فایل را انتخاب کنید - "همه فایل ها".
    3. این فایل را برای مشاهده در مرورگر باز کنید.

    19.

    20. درس شماره 2

    21. درس 2: قالب بندی متن در یک صفحه وب

    22. قالب بندی متن

    در حالی که صفحه خیلی جذاب نیست: چاپ کوچک و متن سیاه روی آن
    پس زمینه سفید اما با کمک تگ ها می توانید متن را تزئین کنید.
    1. عنوان: برچسب ها از<Н1>(بزرگترین) به<Н6>(کوچکترین).
    <Н1>همه چیز در مورد کامپیوتر
    2. فونت (FONT). برخی از تگ ها دارای ویژگی هایی هستند - نام های دارایی، ممکن است
    ارزش های خاصی را به خود بگیرد.
    FONT face="Arial" - صورت فونت
    سایز=4
    - اندازه
    color="red" - رنگ
    3. تراز (ALIGN). متن معمولاً تراز چپ است
    صفحه، با این حال، مرسوم است که عنوان را در مرکز قرار دهید.
    ALIGN = چپ،
    ALIGN = "راست"،
    <Н1 ALIGN="center">همه چیز در مورد کامپیوتر
    ALIGN="مرکز"

    23. رنگ فونت

    مقدار مشخصه COLOR را می توان به دو روش تنظیم کرد:
    الف) نام رنگ (به عنوان مثال "قرمز"، "سبز"، "آبی" و غیره)
    ب) مقدار هگزادسیمال RGB آن "#RRGGBB"، که در آن
    دو رقم اول هگزادسیمال شدت را تعیین می کنند
    قرمز (قرمز)، دو بعدی به شدت سبز (سبز) و
    دو مورد آخر شدت رنگ های آبی (آبی) است.
    حداقل شدت رنگ به صورت هگزادسیمال مشخص می شود
    عدد 00 و حداکثر FF است. رنگ آبی = "#0000FF".
    بنابراین، می توانید رنگ آبی عنوان را با تگ FONT با تنظیم کنید
    ویژگی COLOR:
    <Н1 ALIGN="center">همه چیز در مورد کامپیوتر

    24.

    25. قالب بندی متن

    4. خط افقی جدا خواهد شد
    عنوان از بقیه مطالب
    صفحات با یک تگ
    .
    5. پاراگراف ها:<Р>. هنگام مشاهده در
    پاراگراف ها در مرورگر از یکدیگر جدا می شوند
    فواصل دیگر برای هر پاراگراف
    می توانید نوع خاصی را تنظیم کنید
    هم ترازی.

    26. کار عملی 3.8 سایت آموزشی "کامپیوتر"

    قالب بندی متن اولیه
    صفحات:
    1) ایجاد و تراز کردن 2 پاراگراف (وظیفه 3)
    2) عنوان صفحه را با رنگ و مشخص کنید
    آن را با یک نوار افقی جدا کنید
    (تکلیف 4)

    27.

    28. درس 3

    29. درس 3: درج تصاویر در صفحات وب

    30. درج تصاویر

    صفحات وب می توانند حاوی فایل های گرافیکی با 3 فرمت باشند -
    GIF، JPG و PNG. اگر تصویر با فرمت دیگری ذخیره شده است، پس
    ابتدا باید به یکی از اینها تبدیل شود
    فرمت ها
    تگ برای درج تصویر استفاده می شود. با صفت
    SRC، که نشان می دهد فایل در کجا ذخیره شده است
    کامپیوتر محلی یا در اینترنت.
    1) تصویر در رایانه محلی در پوشه با سایت:

    2) تصویر در پوشه دیگری در رایانه محلی است:

    3) تصویر در یک سرور راه دور در اینترنت قرار دارد:

    31. متن توضیحی. مکان شکل در متن.

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

    موقعیت شکل در متن - مشخصه ALIGN را مشخص می کند
    برچسب زدن : ثور، وسط، پایین، چپ، راست.
    ALIGN="right">

    32. نمای سایت تمام شده

    33. کد صفحه وب سایت


    کامپیوتر


    همه چیز در مورد کامپیوتر




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


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



    34. درس 4

    35. کار آزمایشی شماره 3

    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.
    وب سایت چیست؟
    انواع سایت
    چگونه صفحات وب در وب سایت ها ترکیب می شوند؟
    برچسب ها چیست؟ ظرف برچسب؟ ظرف اصلی را بنویسید
    صفحات وب.
    ساختار منطقی یک صفحه وب چیست؟
    5 تگ قالب بندی صفحه را فهرست کنید.
    ویژگی تگ چیست؟
    راه های تنظیم رنگ در یک صفحه وب چیست؟
    برای وارد کردن عنوان از چه برچسب هایی استفاده می شود؟ قالب بندی
    فونت؟ وارد کردن یک پاراگراف؟
    چه تگ و ویژگی های آن برای درج تصاویر استفاده می شود؟

    36. درس 4. پیوندها در صفحات وب

    37.

    هایپرلینک ها به شما امکان دانلود را می دهند
    مرورگر سایر صفحات وب مرتبط
    از قبلی
    یک هایپرلینک از 2 بخش تشکیل شده است: آدرس
    و یک اشاره گر
    هایپرلینک روی جهانی تنظیم شده است
    برچسب زدن با ویژگی HREF (he
    مشخص می کند که کدام فایل ذخیره می شود
    صفحه وب مورد نظر):
    نشانگر پیوند

    38. انواع هایپرلینک

    1) داخلی:
    اشاره گر
    پیوندها
    2) خارجی:
    filename.html"> نشانگر پیوند

    39. اشاره گر هایپرلینک

    اشاره گر - قسمت قابل مشاهده
    هایپرلینک ها: متن یا تصویر

    40. آدرس بخشی از لینک ها

    به سایر صفحات وب بروید:
    نشانگر پیوند
    باز کردن تصویر در مرورگر:
    تصویر
    به صدا گوش دهید (راه اندازی مرورگر داخلی
    بازیکن):
    صدا
    ذخیره فایل (مرورگر داخلی را راه اندازی می کند
    مدیر دانلود فایل):
    دریافت فایل

    41. هایپرلینک ایمیل

    این نوع هایپرلینک است
    ظرف مخصوص


    ”> ایمیل ما

    42. مشاهده صفحه تمام شده سایت

    43. کد صفحه وب سایت


    کامپیوتر


    همه چیز در مورد کامپیوتر




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


    فرهنگ لغت اصطلاحات شما را با اصطلاحات کامپیوتری و همچنین شما آشنا می کند
    می توانید فرم را پر کنید


    [برنامه ها]  
    [لغت نامه]  
    [لوازم جانبی] 
    [پرسشنامه]



    "> ایمیل:


    44. درس 5

    45. درس 5: فهرست ها در صفحات وب

    46. ​​انواع فهرست ها

    شماره گذاری شده
    برچسب زده شده است
    فهرست اصطلاحات (مانند یک فرهنگ لغت)
    لیست های تو در تو

    47. فهرست شماره گذاری شده

    لیست - در یک ظرف
    مورد فهرست - برچسب

  • ویژگی TYPE نوع شماره گذاری (عربی
    شماره؛ من - روم؛ الف - لاتین
    حروف کوچک)

    1. برنامه های سیستمی
    2. برنامه های کاربردی
    3. سیستم های برنامه نویسی

    48. لیست گلوله ای

    لیست - در یک ظرف
    مورد فهرست - برچسب

  • ویژگی TYPE نوع نشانگرها است ("دیسک" یک دیسک است،
    "مربع" - مربع، "دایره" - دایره)

    • ویرایشگرهای متن
    • ویرایشگر گرافیکی
    • صفحات گسترده
    • سیستم های مدیریت پایگاه داده

    49. فهرست اصطلاحات

    لیست - در یک ظرف

    مورد فهرست - برچسب

    این اصطلاح ابتدا نوشته می شود، سپس
    تعریف آن (مانند یک فرهنگ لغت)

    50. درس 6

    51. درس 6: فرم های تعاملی در صفحات وب

    52. مفهوم فرم تعاملی

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

    53. فیلد متنی

    ظرف اصلی

    فیلد متن - برای وارد کردن متن از صفحه کلید: برچسب
    با صفات:
    TYPE="text" – نوع محتوا (متن)
    NAME="____" - نام فیلد
    SIZE = "40" - طول فیلد ورودی (به کاراکتر)

    - جداکننده خط (مکان نما را به یک جدید منتقل کنید
    رشته)

    54. سوئیچ ها (دکمه های رادیویی)

    دکمه گرد برای انتخاب یکی از چندین
    گزینه های پاسخ:
    TYPE = "رادیو"
    همه اعضای این گروه باید داشته باشند
    همان نام: NAME="گروه"
    ویژگی های VALUE شامل گزینه هایی هستند
    پاسخ ها: VALUE = دانش آموز

    55. پرچم ها

    کادر مربعی برای انتخاب چندین پاسخ از
    گزینه های پیشنهادی:
    TYPE = "چک باکس"
    هر عنصر از این گروه باید نام خود را داشته باشد:
    NAME="box1"، NAME="box2"،
    …..
    ویژگی‌های VALUE شامل گزینه‌هایی برای انتخاب پاسخ‌ها هستند:
    VALUE="WWW"، VALUE="ایمیل"، ….
    هر VALUE پاسخ مخصوص به خود را دارد.
    www

    56. جعبه های فهرست

    برای ایجاد یک لیست کشویی
    از ظرف استفاده کنید

    در آن، هر عنصر از لیست
    توسط برچسب داده شده است

    • مقالات مرتبط