› › صفحه وب html است. ایجاد صفحات وب. یادگیری زبان HTML عناصر صفحه وب: سربرگ

صفحه وب html است. ایجاد صفحات وب. یادگیری زبان HTML عناصر صفحه وب: سربرگ

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

HTML و CSS چیست؟

HTML (HyperText Markup Language) ساختار محتوا و معنای آن را تعریف می کند و محتوایی مانند سرفصل ها، پاراگراف ها یا تصاویر را تعریف می کند. CSS (Cascading Style Sheets) یک زبان ارائه است که برای شکل دادن به ظاهر محتوا، برای مثال، از فونت ها یا رنگ ها استفاده می کند.

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

با درک تفاوت بین HTML و CSS، اجازه دهید با جزئیات بیشتر به HTML بپردازیم.

شرایط اولیه HTML

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

عناصر

عناصر نحوه تعریف ساختار و محتوای اشیاء در یک صفحه را مشخص می کنند. برخی از عناصر متداول مورد استفاده شامل چندین سطح از سرفصل ها هستند (به عنوان عناصر با

قبل از

) و پاراگراف ها (تعریف شده به صورت

) می توانید عناصر را در لیست قرار دهید ,

, , و و خیلی های دیگر.

عناصر با استفاده از براکت های زاویه ای شناسایی می شوند<>، نام عنصر را احاطه کرده است. بنابراین عنصر به شکل زیر خواهد بود:

برچسب ها

اضافه کردن براکت های زاویه< и >چیزی را ایجاد می کند که به عنوان برچسب در اطراف عنصر شناخته می شود. تگ ها اغلب به صورت جفت تگ باز و بسته می شوند.

تگ افتتاحیه شروع عنصر را نشان می دهد. از یک نماد تشکیل شده است<, затем идёт имя элемента и завершается символом >; مثلا،

.

تگ بسته شدن پایان عنصر را نشان می دهد. از یک نماد تشکیل شده است< с последующей косой чертой и именем элемента и завершается символом >; مثلا،

.

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

بنابراین، تگ های پیوند چیزی شبیه به این خواهند بود:

...

ویژگی های

ویژگی ها ویژگی هایی هستند که برای ارائه استفاده می شوند اطلاعات اضافیدر مورد عنصر متداول ترین ویژگی ها شامل ویژگی id است که عنصر را مشخص می کند. ویژگی class که عنصر را طبقه بندی می کند. ویژگی src که منبع محتوای تعبیه شده را مشخص می کند. و یک ویژگی href، که یک پیوند به منبع مرتبط را مشخص می کند.

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

شای هاو

نمایش اصطلاحات اولیه HTML

این کد متن "Shay Howe" را در یک صفحه وب نمایش می دهد و با کلیک بر روی این متن کاربر را به http://shayhowe.com می برد. عنصر پیوند با استفاده از یک تگ باز اعلام می شود و برچسب بستنپوشش متن، و همچنین ویژگی و مقدار آدرس پیوند اعلام شده از طریق href="http://shayhowe.com" در تگ افتتاحیه.

برنج. 1.01. نحو HTML به صورت طرح کلی شامل عنصر، ویژگی و تگ است

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

سفارشی سازی ساختار سند HTML

اسناد HTML اسناد متنی ساده ای هستند که با پسوند html به جای txt ذخیره می شوند. برای شروع نوشتن HTML ابتدا نیاز دارید ویرایشگر متن، که استفاده از آن برای شما راحت است. متأسفانه این شامل نمی شود مایکروسافت وردیا صفحات، زیرا اینها ویرایشگرهای پیچیده ای هستند. دو ویرایشگر متن محبوب برای نوشتن HTML و CSS Dreamweaver و Sublime Text هستند. جایگزین های رایگانهمچنین Notepad++ برای ویندوز و TextWrangler برای مک.

تمام اسناد HTML حاوی یک ساختار مورد نیاز است که شامل اعلان ها و عناصر زیر است: , , و .

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

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

تمام محتوای قابل مشاهده صفحه وب در عنصر موجود خواهد بود . ساختار یک سند معمولی HTML به شکل زیر است:

سلام دنیا!

سلام دنیا!

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



نمایش ساختار سند HTML

این کد سند را نشان می دهد که با اعلان نوع سند شروع می شود.، سپس بلافاصله عنصر می آید . داخل عناصر در حال آمدن هستند و . عنصر شامل کدگذاری صفحه از طریق برچسب است و عنوان سند از طریق عنصر . عنصر <body>شامل عنوان از طریق عنصر است <h1>و یک پاراگراف متن از طریق<р>. زیرا هم عنوان و هم پاراگراف درون عنصر تودرتو هستند <body>، در صفحه وب قابل مشاهده هستند.</p><p>هنگامی که یک عنصر در داخل عنصر دیگری است که به نام تودرتو نیز شناخته می شود، بهتر است آن را تورفتگی کنید تا ساختار سند به خوبی سازماندهی شده و قابل خواندن باشد. در کد قبلی هر دو عنصر <head>و <body>تو در تو و درون عنصر جابجا شده است <html>. ساختار تورفتگی برای عناصر با افزودن عناصر جدید در داخل ادامه می یابد <head>و <body> .</p><h3>عناصر خود بسته شونده</h3><p>در مثال قبلی، عنصر <meta>تنها برچسبی بود که شامل برچسب بسته نشد. نگران نباشید، این کار عمدی انجام شده است. همه عناصر شامل باز و بسته شدن برچسب ها نیستند. برخی از عناصر به سادگی محتوا یا رفتار را از طریق ویژگی های یک تگ دریافت می کنند. <meta>یکی از این عناصر است. محتوای عنصر <meta>در مثال با استفاده از صفت charset و مقدار اختصاص داده شده است. سایر عناصر معمول خود بسته شدن عبارتند از:</p><ul><li><br> </li><li><embed> </li><li><hr> </li><li><img> </li><li><input> </li><li><li><meta> </li><li><param> </li><li><source> </li><li><wbr> </li> </ul><p>ساختار کاهش یافته با استفاده از اعلان نوع سند<!DOCTYPE html>و عناصر <html> , <head>و <body>، کاملا رایج است. ما می خواهیم این ساختار سند را راحت نگه داریم، زیرا اغلب هنگام ایجاد اسناد HTML جدید از آن استفاده خواهیم کرد.</p><h3>اعتبار سنجی کد</h3><p>مهم نیست که چقدر با دقت کد خود را می نویسیم، خطاها اجتناب ناپذیر هستند. خوشبختانه، هنگام نوشتن HTML و CSS، اعتباردهنده هایی برای بررسی کار خود داریم. W3C اعتبار سنجی های HTML و CSS را ارائه می دهد که کدها را برای خطاها اسکن می کند. مرور کد ما نه تنها به ارائه صحیح آن در همه مرورگرها کمک می کند، بلکه به آموزش بهترین شیوه ها هنگام نوشتن کد کمک می کند.</p><h2>در تمرین</h2><p>به‌عنوان طراحان وب و توسعه‌دهندگان فرانت‌اند، ما این افتخار را داریم که در تعدادی از کنفرانس‌های بزرگ که به صنعت خود اختصاص داده شده است، شرکت کنیم. ما می‌خواهیم کنفرانس سبک‌های خودمان را سازماندهی کنیم و در طول درس‌های بعدی یک وب‌سایت برای آن ایجاد کنیم. مثل این!</p><br><img src='https://i2.wp.com/webref.ru/assets/images/learn-html-css/practice-1.png' width="100%" loading=lazy loading=lazy><p>بیایید دنده ها را کمی از HTML دور کنیم و نگاهی به CSS بیندازیم. به یاد داشته باشید، HTML محتوا و ساختار صفحات وب ما را تعریف می کند، در حالی که CSS سبک بصری و ظاهر آنها را مشخص می کند.</p><h2>شرایط اولیه CSS</h2><p>علاوه بر اصطلاحات HTML، برخی از اصطلاحات اولیه CSS وجود دارد که باید با آنها آشنا شوید. این اصطلاحات شامل انتخابگرها، خصوصیات و مقادیر هستند. درست مانند اصطلاحات HTML، هرچه بیشتر با CSS کار کنید، این اصطلاحات بیشتر به طبیعت دوم تبدیل می شوند.</p><h3>انتخابگرها</h3><p>وقتی عناصری را به یک صفحه وب اضافه می کنید، می توان آنها را با استفاده از CSS استایل داد. یک انتخابگر تعیین می کند که کدام عنصر یا عناصر در HTML را هدف قرار داده و سبک ها (مانند رنگ، اندازه و موقعیت) را بر روی آنها اعمال کند. انتخابگرها می‌توانند ترکیبی از معیارهای مختلف را برای انتخاب عناصر منحصربه‌فرد، بسته به اینکه چقدر می‌خواهیم خاص باشیم، شامل شوند. به عنوان مثال، ما می خواهیم هر پاراگراف یک صفحه را انتخاب کنیم یا فقط یک پاراگراف خاص را انتخاب کنیم.</p><p>انتخابگرها معمولاً با یک مقدار مشخصه، مانند مقدار id یا کلاس، یا نام عنصر، مانند <h1>یا<р> .</p><p>در CSS، انتخابگرها با بریس‌های فرفری () ترکیب می‌شوند که سبک‌هایی را که روی عنصر انتخاب‌شده اعمال می‌شود، در بر می‌گیرد. این انتخابگر تمام عناصر را هدف قرار می دهد <span><p>پ(...)</p><h3>خواص</h3><p>هنگامی که یک عنصر انتخاب می شود، ویژگی سبک هایی را که برای آن اعمال می شود تعیین می کند. نام اموال بعد از انتخابگر در داخل آمده است <a href="https://5visa.ru/fa/installation-and-configuration/kvadratnye-skobki-v-vorde-kak-ubrat-kvadratnye-i-figurnye.html">آکولاد</a>() و بلافاصله قبل از روده بزرگ. ویژگی‌های زیادی وجود دارد که می‌توانیم از آنها استفاده کنیم، مانند پس‌زمینه، رنگ، اندازه فونت، ارتفاع و عرض و سایر ویژگی‌هایی که معمولاً اضافه می‌شوند. در کد زیر خواص رنگ و اندازه فونت را تعریف می کنیم که برای همه عناصر اعمال می شود <span><p>P (رنگ: ...؛ اندازه قلم: ...؛ )</p><h3>ارزش های</h3><p>تا اینجا ما فقط یک عنصر را از طریق یک انتخابگر انتخاب کرده‌ایم و تعیین کرده‌ایم که چه سبکی را می‌خواهیم روی آن اعمال کنیم. حال می توانیم رفتار این ویژگی را از طریق یک مقدار تنظیم کنیم. مقادیر را می توان به عنوان متن بین دو نقطه و نقطه ویرگول مشخص کرد. در زیر تمام عناصر را انتخاب می کنیم <p >و مقدار ویژگی رنگ را روی نارنجی و مقدار ویژگی اندازه فونت را 16 پیکسل قرار دهید.</p><p>P (رنگ: نارنجی؛ اندازه قلم: 16 پیکسل؛ )</p><p>برای آزمایش این موضوع، در CSS مجموعه قوانین ما با یک انتخابگر شروع می‌شود و بلافاصله با پرانتزهای فرفری دنبال می‌شود. این بریس‌های فرفری حاوی اعلان‌هایی هستند که از جفت خصوصیات و مقادیر تشکیل شده‌اند. هر اعلامیه با یک خاصیت شروع می شود و به دنبال آن یک دونقطه، ارزش دارایی و در نهایت یک نقطه ویرگول می آید.</p><p>یک روش متداول، جابجایی جفت ویژگی ها و مقادیر درون بریس های فرفری است. مانند HTML، تورفتگی کمک می کند تا کد ما سازماندهی شده و واضح باشد.</p><p><img src='https://i0.wp.com/webref.ru/assets/images/learn-html-css/css-syntax-outline.png' height="138" width="257" loading=lazy loading=lazy></p><p>برنج. 1.03. ساختار نحوی CSS شامل انتخابگر، خواص و مقادیر است</p><p>دانستن چند اصطلاح اولیه و نحو کلی CSS یک شروع عالی است، اما قبل از فرو رفتن در اعماق باید چند نکته دیگر را پوشش دهیم. به طور خاص، ما باید نگاه دقیق تری به نحوه عملکرد انتخابگرها در CSS داشته باشیم.</p><h2>کار با انتخابگرها</h2><p>انتخابگرها، همانطور که قبلا ذکر شد، نشان می‌دهند که کدام عناصر HTML استایل‌بندی می‌شوند. درک کامل نحوه استفاده از انتخابگرها و نحوه کار آنها بسیار مهم است. اولین قدم باید شناخت باشد <a href="https://5visa.ru/fa/education/zte-blade-a515---tehnicheskie-harakteristiki-mobilnyi-telefon-zte-blade-a515.html">انواع مختلف</a>انتخابگرها ما با ابتدایی ترین انتخابگرها شروع می کنیم: انتخابگرهای نوع، کلاس و شناسه.</p><h3>انتخابگرهای نوع</h3><p>انتخابگرهای نوع عناصر هدف را بر اساس نوع آنها. به عنوان مثال، اگر بخواهیم تمام عناصر را هدف قرار دهیم <div>باید از انتخابگر div استفاده کنیم. کد زیر انتخابگر نوع عناصر را نشان می دهد <div>و همچنین HTML مربوطه.</p><p>دیو (...)</p><p> <div>...</div> <div>...</div> </p><h3>کلاس ها</h3><p>کلاس ها به شما این امکان را می دهند که یک عنصر را بر اساس مقدار ویژگی کلاس انتخاب کنید. انتخابگرهای کلاس کمی خاص تر از انتخابگرهای نوع هستند زیرا آنها گروه خاصی از عناصر را به جای همه عناصر از یک نوع انتخاب می کنند.</p><p>کلاس ها به شما این امکان را می دهند که با استفاده از یک مقدار مشخصه کلاس برای چندین عنصر، سبک های یکسانی را به عناصر مختلف به طور همزمان اعمال کنید.</p><p>در CSS، کلاس ها با یک نقطه پیشرو و به دنبال آن مقدار ویژگی کلاس نشان داده می شوند. انتخابگر کلاس زیر همه عناصر حاوی مقدار ویژگی کلاس awesome، از جمله عناصر را انتخاب می کند <div>و <span><p>عالی(...)</p><p> <div class="awesome">...</div> </p><h3>شناسه ها</h3><p>شناسه‌ها حتی دقیق‌تر از کلاس‌ها هستند زیرا در هر زمان تنها یک عنصر منحصر به فرد را هدف قرار می‌دهند. همانطور که انتخابگرهای کلاس از مقدار ویژگی class استفاده می کنند، شناسه ها نیز از مقدار ویژگی id به عنوان انتخابگر استفاده می کنند.</p><p>صرف نظر از نوع عنصری که نمایش داده می شود، مقدار ویژگی id فقط یک بار در یک صفحه قابل استفاده است. اگر شناسه‌ها وجود دارند، باید برای عناصر مهم رزرو شوند.</p><p>در CSS، شناسه ها با یک نماد هش در جلو و به دنبال آن مقدار ویژگی id نشان داده می شوند. در اینجا id فقط عنصر حاوی ویژگی id را با مقدار shayhowe انتخاب می کند.</p><p>#شایهو (...)</p><p> <div id="shayhowe">...</div> </p><h3>انتخابگرهای اضافی</h3><p>انتخابگرها چیزهای بسیار قدرتمندی هستند و مواردی که در بالا توضیح داده شد از رایج ترین انتخابگرهایی هستند که با آنها برخورد می کنیم. این انتخابگرها تازه شروع کار هستند. انتخابگرهای پیشرفته زیادی در دسترس هستند و به راحتی در دسترس هستند. هنگامی که با آنها راحت شدید، از بررسی برخی از موارد پیشرفته تر نترسید.</p><p>خوب، بیایید شروع کنیم به جمع کردن همه چیز. ما عناصر را در داخل HTML خود به صفحه اضافه می کنیم، سپس می توانیم آن عناصر را انتخاب کرده و با استفاده از CSS به آنها استایل دهید. حالا بیایید نقاط بین HTML و CSS را به هم وصل کنیم تا این دو زبان با هم کار کنند.</p><h2>اتصال CSS</h2><p>برای اینکه CSS ما با HTML ما صحبت کند، باید به فایل CSS از HTML اشاره کنیم. یک تمرین خوب این است که همه استایل های خود را در یک فایل خارجی قرار دهیم، که در داخل عنصر اشاره شده است <head>سند HTML ما استفاده از یک CSS خارجی به ما این امکان را می دهد که سبک های مشابه را در سرتاسر سایت اعمال کنیم و به سرعت تغییراتی در آن ایجاد کنیم.</p><h3>گزینه های دیگر برای اضافه کردن CSS</h3><p>گزینه های دیگر برای ترکیب CSS شامل استفاده از سبک های داخلی و درون خطی است. ممکن است در واقعیت با این گزینه‌ها مواجه شوید، اما معمولاً با آنها مخالفت می‌کنید، زیرا به‌روزرسانی سایت‌ها را دست و پا گیر و دست و پاگیر می‌کنند.</p><p>برای ایجاد شیوه نامه خارجی خود، دوباره می خواهیم از ویرایشگر متن انتخابی خود برای ایجاد یک صفحه جدید استفاده کنیم <a href="https://5visa.ru/fa/installation-and-configuration/failovaya-sistema-v-vide-spiska-na-vb6-chtenie-izapis-vtekstovoi.html">فایل متنی</a>با پسوند css. فایل CSS ما باید در همان پوشه یا زیرپوشه فایل HTML ذخیره شود.</p><p>داخل یک عنصر <head>عنصر اعمال شد <link>، که رابطه بین فایل های HTML و CSS را تعریف می کند. از آنجایی که ما به CSS پیوند می دهیم، از ویژگی rel با مقدار stylesheet برای نشان دادن رابطه آنها استفاده می کنیم. علاوه بر این، ویژگی href برای نشان دادن مکان یا مسیر فایل CSS استفاده می شود.</p><p>در مثال زیر سند HTML، عنصر <head>به یک فایل سبک خارجی اشاره می کند.</p><p> <head> <link rel="stylesheet" href="main.css"> </head> </p><p>برای اینکه CSS به درستی رندر شود، مقدار مسیر ویژگی href باید مستقیماً با جایی که فایل CSS ذخیره شده است مطابقت داشته باشد. در مثال قبلی، فایل main.css در همان مکان فایل HTML ذخیره می شود که به آن پوشه ریشه نیز می گویند.</p><p>اگر فایل CSS در یک زیر پوشه قرار دارد، مقدار مشخصه href باید به طور متناظر با آن مسیر مطابقت داشته باشد. به عنوان مثال، اگر فایل main.css ما در یک زیر پوشه به نام stylesheets ذخیره شده باشد، مقدار ویژگی href خواهد بود stylesheets/main.css. این از یک اسلش جلو (یا اسلش) برای نشان دادن حرکت به یک زیر پوشه استفاده می کند.</p><p>بر <a href="https://5visa.ru/fa/firmware/apple-iphone-se-2017-dizain-harakteristiki-funkcii-i-data-vyhoda-vse-chto.html">این لحظه</a>صفحات ما به آرامی اما مطمئناً شروع به زنده شدن می کنند. ما هنوز خیلی عمیق به CSS کاوش نکرده‌ایم، اما ممکن است متوجه شده باشید که برخی از عناصر دارای سبک‌هایی هستند که ما در CSS خود اعلام نکرده‌ایم. این مرورگر است که سبک های دلخواه خود را بر این عناصر تحمیل می کند. خوشبختانه، ما می‌توانیم این سبک‌ها را به راحتی بازنویسی کنیم، این همان کاری است که در ادامه با استفاده از تنظیم مجدد CSS انجام خواهیم داد.</p><h2>با استفاده از تنظیم مجدد CSS</h2><p>هر مرورگر سبک های پیش فرض خود را دارد <a href="https://5visa.ru/fa/problems/soedinenie-treh-provodov-cherez-klemmnik-osobennosti-podklyucheniya-silovogo.html">عناصر مختلف</a>. چگونه <a href="https://5visa.ru/fa/navigation/chto-takoe-brauzer-google-kak-polzovatsya-gugl-hrom-google-chrome-vse-po.html">گوگل کروم</a>نمایش عناوین، پاراگراف ها، فهرست ها و غیره، ممکن است با نحوه نمایش آن متفاوت باشد <a href="https://5visa.ru/fa/multimedia/oshibka-veb-stranicy-vypolnit-otladku-oshibki-scenariya-v-internet-explorer-prichiny-i.html">اینترنت اکسپلورر</a>. برای اطمینان از سازگاری بین مرورگرها، تنظیم مجدد CSS به طور گسترده مورد استفاده قرار گرفته است.</p><p>تنظیم مجدد CSS تمام عناصر اصلی HTML را با یک سبک مشخص می گیرد و یک سبک ثابت را در همه مرورگرها ارائه می دهد. این بازنشانی‌ها معمولاً شامل حذف ابعاد، بالشتک‌ها، حاشیه‌ها یا سبک‌های اضافی هستند که این مقادیر را کاهش می‌دهند. از آنجایی که CSS cascading از بالا به پایین کار می کند (به زودی در مورد آن خواهید آموخت) - تنظیم مجدد ما باید در بالای سبک ما باشد. این تضمین می کند که این سبک ها ابتدا خوانده شوند و تمام. <a href="https://5visa.ru/fa/multimedia/chto-takoe-kuki-brauzera-zachem-ih-udalyat-i-kak-eto-mozhno-sdelat.html">مرورگرهای مختلف</a>از یک نقطه مرجع مشترک شروع به کار خواهد کرد.</p><p>مجموعه ای از بازنشانی های مختلف CSS برای اعمال در دسترس هستند، همه آنها خود را دارند <a href="https://5visa.ru/fa/tips/chto-takoe-wordpress-i-joomla-bitva-besplatnyh-titanov-joomla-ili-wordpress.html">نقاط قوت</a>. یکی از محبوب‌ترین‌های اریک مایر، تنظیم مجدد CSS او برای شامل عناصر جدید HTML5 تنظیم شده است.</p><p>اگر کمی احساس ماجراجویی می کنید، Normalize.css نیز وجود دارد که توسط Nicholas Gallagher ایجاد شده است. Normalize.css روی استفاده از بازنشانی سخت برای همه عناصر اصلی تمرکز نمی کند، بلکه در عوض روی تنظیم سبک های مشترک برای آن عناصر تمرکز می کند. این امر مستلزم درک عمیق‌تر CSS و همچنین آگاهی از آنچه می‌خواهید از سبک‌ها به دست آورید، دارد.</p><h3>سازگاری و آزمایش بین مرورگرها</h3><p>همانطور که قبلاً ذکر شد، مرورگرهای مختلف عناصر را متفاوت ارائه می کنند. مهم است که اهمیت سازگاری و آزمایش بین مرورگرها را درک کنید. سایت ها نباید در همه مرورگرها دقیقاً یکسان به نظر برسند، بلکه باید نزدیک باشند. کدام مرورگرها را می خواهید پشتیبانی کنید و تا چه حد باید بر اساس بهترین گزینه برای سایت خود تصمیم بگیرید.</p><p>هنگام نوشتن CSS باید به چند نکته توجه کرد. خبر خوب این است که شما می توانید همه این کارها را انجام دهید و برای تسلط بر آن فقط کمی صبر می طلبد.</p><h2>در تمرین</h2><p>بیایید به جایی که آخرین بار در سایت کنفرانس خود متوقف کردیم برگردیم و ببینیم چگونه می توانیم مقداری CSS اضافه کنیم.</p><ol><li>در داخل پوشه styles-conference، اجازه دهید یک پوشه جدید به نام assets ایجاد کنیم. اینجاست که ما تمام منابع وب سایت خود را ذخیره می کنیم، مانند استایل ها، تصاویر، ویدیوها و غیره.</li><li>با استفاده از یک ویرایشگر متن، بیایید یک فایل جدید به نام main.css ایجاد کنیم و آن را در پوشه stylesheets که ایجاد کردیم ذخیره کنیم.</li><p>با نگاهی به فایل index.html در مرورگر می بینیم که عناصر <h1>و <p>از قبل شامل سبک پیش فرض است. به طور خاص، آنها دارای اندازه فونت و فضای منحصر به فرد در اطراف خود هستند. با استفاده از تنظیم مجدد اریک مایر، می‌توانیم این سبک‌ها را نرم‌تر کنیم و به هر کدام از آنها اجازه دهیم از یک پایه شروع کنند. برای انجام این کار، نگاهی به وب سایت او بیندازید، کد را کپی کرده و در بالای فایل main.css ما قرار دهید.</p><p>/* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | مجوز 20110126: هیچ (دامنه عمومی) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, مخفف, آدرس, بزرگ، ذکر، کد، del، dfn، em، img، ins، kbd، q، s، samp، کوچک، ضربه، قوی، sub، sup، tt، var، b، u، i، مرکز، dl، dt، dd، ol، ul، li، مجموعه فیلدها، فرم، برچسب، افسانه، جدول، عنوان، tbody، tfoot، thead، tr، th، td، مقاله، کنار، بوم، جزئیات، جاسازی، شکل، نشان شکل، پاورقی، سرصفحه، hgroup، منو، ناوبری، خروجی، یاقوت، بخش، خلاصه، زمان، علامت، صدا، ویدئو ( حاشیه: 0؛ بالشتک: 0؛ حاشیه: 0؛ اندازه قلم: 100%؛ فونت: ارث بری؛ تراز عمودی: خط پایه . ol، ul (لیست-سبک: هیچکدام؛ ) بلوک نقل قول، q ( نقل قول: هیچ، ) بلوک نقل قول:قبل، بلوک نقل قول:بعد، q:قبل، q:پس از ( محتوا: ""؛ محتوا: هیچکدام؛ ) جدول (حاشیه- فرو ریختن: فرو ریختن; فاصله مرزی: 0; )</p><li>فایل main.css ما در حال شکل گیری است، پس بیایید آن را به فایل index.html متصل کنیم. index.html را در یک ویرایشگر متن باز کنید و یک عنصر اضافه کنید <link>V <head>، بلافاصله پس از عنصر <title> .</li><li>از آنجایی که ما از طریق عنصر به سبک ها اشاره می کنیم <link>یک ویژگی rel را با شیوه نامه ارزش اضافه کنید.</li><p>ما همچنین پیوندی به فایل main.css خود با استفاده از ویژگی href اضافه خواهیم کرد. به یاد داشته باشید که فایل main.css ما در پوشه stylesheets ذخیره شده است که در داخل پوشه assets قرار دارد. بنابراین مقدار ویژگی href که مسیر فایل main.css ما است، باید assets/stylesheets/main.css باشد.</p><p> <head> <meta charset="utf-8"> <title>کنفرانس سبک ها

وقت آن است که کار خود را بررسی کنیم و ببینیم HTML و CSS چگونه با هم کار می کنند. باز کردن فایل index.html (یا بازخوانی صفحه در صورتی که قبلاً باز است) در مرورگر باید نتیجه کمی متفاوت از قبل نشان دهد.

برنج. 1.04. سایت کنفرانس سبک های ما با بازنشانی CSS

نسخه ی نمایشی و کد منبع

در زیر می توانید وب سایت کنفرانس استایلز را در وضعیت فعلی مشاهده و همچنین دانلود کنید منبعسایت در حال حاضر

خلاصه

بنابراین، همه چیز خوب است! ما در این آموزش گام های بزرگی برداشتیم.

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

برای جمع بندی به موارد زیر پرداختیم:

  • تفاوت بین HTML و CSS
  • مقدمه ای بر عناصر، تگ ها و ویژگی های HTML.
  • تنظیم ساختار اولین صفحه وب خود
  • مقدمه ای بر انتخابگرها، خواص و مقادیر CSS.
  • کار با انتخابگرهای CSS
  • اشاره گر به CSS از HTML.
  • اهمیت تنظیم مجدد CSS

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

منابع و پیوندها

  • اصطلاحات رایج HTML از طریق Scripting Master
  • شرایط و تعاریف CSS از طریق Impressive Webs
  • ابزارهای CSS: CSS را از طریق اریک مایر بازنشانی کنید

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

صفحه وب چیست؟

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

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

جایگاه و نقش صفحات وب در ساختار سایت ها

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

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

اصل استفاده از فرامتن

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

اگر یک معلم علوم کامپیوتر به ما بگوید: «عناصر اصلی یک صفحه وب را فهرست کنید»، می‌توانیم به درستی درباره اجزای سند مربوطه که با استفاده از زبان نشانه‌گذاری HTML ایجاد شده‌اند صحبت کنیم. بنابراین، ابتدا اجازه دهید به نکات نظری در مورد HTML نگاهی بیندازیم.

ساختار زبان HTML: برچسب ها

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

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

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

ویژگی های

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

محتوا

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

عناصر صفحه وب

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

عناصر صفحه وب: سربرگ

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

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

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

عنوان یک سند وب می تواند شامل تعدادی عنصر اضافی باشد. گاهی اوقات قالب یک صفحه وب ممکن است نیاز به نمایش متن در یک رمزگذاری خاص داشته باشد. چگونه می توانید اطمینان حاصل کنید که سند وب شما با این معیار مطابقت دارد؟ بسیار ساده. الگوریتم‌های HTML باید در ساختار سرصفحه سند قرار داده شوند و به مرورگر دستور می‌دهند که از یک زبان رمزگذاری خاص استفاده کند - به عنوان مثال، سیریلیک. دستورات مربوطه در تگ META قرار می گیرند که مانند سایرین می تواند باز و بسته شود.

بخش اصلی صفحه وب

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

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

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

برچسب های اصلی HTML

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

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

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

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

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

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

داستانی در مورد عناصر کلیدی صفحات وب و داستان بعدی در مورد ابزارهای قالب بندی آنها با استفاده از زبان HTML - تقریباً این الگوریتم پاسخ ما به سؤالی است که آزمایشگر از ما پرسید. اگر او به ما مراجعه کرد و گفت «عناصر اصلی یک صفحه وب را فهرست کنید»، ما با استفاده از روش‌شناسی مناسب، تمام شانس را برای کشف موضوع خواهیم داشت. یعنی با اصطلاح "عناصر" می توانیم اجزای اصلی ساختار یک سند وب یا انواع محتوا - متن، تصاویر، جداول، قاب ها، لینک هایی که مدیر وب با استفاده از ابزاری مانند زبان HTML ایجاد می کند را درک کنیم. .

مشخصات ابزارهای توسعه وب

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

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

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

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

اطلاعات نظری

مفاهیم اساسی

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

سند HTML؛

سند وب؛

صفحه وب.

چنین صفحاتی معمولاً در قالب NTM یا HTML هستند.

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

قاب (قاب) - اصطلاحی که دو معنی دارد. اولین مقدار ناحیه سند با نوارهای پیمایش خاص خود است. دومی یک تصویر 0DNN0H در یک فایل گرافیکی متحرک (فریم) است.

اپلت (اپلت) - برنامه ای که به عنوان یک فایل جداگانه به کامپیوتر مشتری منتقل می شود و هنگام مشاهده یک صفحه وب راه اندازی می شود.

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

CGI (مشترک دروازه رابط) - یک نام کلی برای برنامه هایی که با کار بر روی یک سرور، به شما امکان می دهد قابلیت های صفحات وب را گسترش دهید. بدون چنین برنامه هایی امکان ایجاد صفحات وب تعاملی وجود ندارد.

مرورگر (مرورگر) - برنامه ای برای مشاهده صفحات وب.

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

<Начало элемента>محتوای عنصر، داده هایی که عنصر فرمت می کند

برچسب بزنید(در برچسب انگلیسی - label, descriptor, label) - نشانگر شروع یا پایان یک عنصر. برچسب ها مرزهای عمل عناصر را مشخص می کنند و عناصر را از یکدیگر جدا می کنند. در متن یک صفحه وب، برچسب ها در براکت های زاویه ای قرار می گیرند< >، و تگ پایان همیشه با یک اسلش دنبال می شود. متن بین این پرانتز نیست (< >)، هنگام مشاهده در مرورگر کاملاً قابل مشاهده است. مثلا:

<Начальный тег>محتوای عنصر، داده هایی که

یک عنصر را قالب بندی می کند

<Р>این متن در یک پاراگراف جداگانه قرار خواهد گرفت

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

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

<Р align="center">این متن در مرکز صفحه تراز می شود

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

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

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

تمام ویژگی ها در تگ شروع قرار دارند.

برای سهولت استفاده، می توانید تگ شروع را با یک حرف بزرگ (بزرگ) (P) و تگ پایان را با یک حرف کوچک (کوچک) (/p) بنویسید، اگرچه این کار ضروری نیست.

همه عناصر نیاز به تگ پایان (بستن) ندارند.

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

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

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

وب سایت (از انگلیسی. سایت اینترنتی: وب- "وب، شبکه" و سایت- "مکان"، به معنای واقعی کلمه "مکان، بخش، بخشی از شبکه") - یک مجموعه اسناد الکترونیکی(فایل) یک فرد یا سازمان در شبکه کامپیوتری، تحت یک آدرس (نام دامنه یا آدرس IP) متحد شده است.

همه سایت ها با هم تشکیل می دهندشبکه جهانی وب، جایی که ارتباطات (وب) بخش هایی از اطلاعات جامعه جهانی را در یک کل واحد - پایگاه داده و ارتباطات در مقیاس سیاره ای متحد می کند. پروتکلی به طور ویژه برای دسترسی مستقیم مشتریان به سایت های روی سرورها توسعه داده شد HTTP .

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

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

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

HTML به شما اجازه می دهد:

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

· شامل تصاویر و چند رسانه ای در سند.

· با استفاده از این زبان، پیوندهای فرامتن به سایر صفحات وب ایجاد می شود.

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

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

به طور معمول، یک فایل صفحه وب دارای پسوند html یا .htm است.

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

برای مشاهده یک صفحه HTML، کافی است URL آن را در نوار آدرس مرورگر وب خود وارد کنید و سپس لینک ها را دنبال کنید. اما این دقیقاً مشکل اصلی است - چگونه آدرس صفحه را پیدا کنیم؟ اغلب این اتفاق می افتد که شما می دانید چه چیزی را باید پیدا کنید، اما نمی دانید دقیقا کجا را جستجو کنید. برای حل این مشکل موتورهای جستجوی خاصی وجود دارد. از دیدگاه کاربر، سیستم جستجو- این یک سایت معمولی است صفحه نخستکه حاوی پیوندهایی به سایت های دیگر است که به دسته بندی ("ورزش"، "کسب و کار"، "رایانه" و غیره تقسیم می شوند. علاوه بر این، موتور جستجو به کاربر اجازه می دهد تا چندین کلمه کلیدی را وارد کند و پیوندهایی را به صفحات حاوی آن کلمات کلیدی برمی گرداند.

سایت اینترنتی

وب سایت (به انگلیسی Website، از وب - وب و سایت - "مکان") مجموعه ای از اسناد یک شخص یا سازمان خصوصی است که تحت یک آدرس در یک شبکه رایانه ای متحد شده اند. به طور پیش فرض فرض بر این است که سایت در اینترنت قرار دارد. همه وب‌سایت‌های اینترنتی مجموعاً شبکه جهانی وب را تشکیل می‌دهند. پروتکل HTTP به طور ویژه برای مشتریان توسعه داده شده است تا مستقیماً به وب سایت های روی سرورها دسترسی داشته باشند. وب سایت ها در غیر این صورت نمایندگی اینترنتی یک شخص یا سازمان نامیده می شوند. وقتی می گویند "صفحه خودت در اینترنت"، به معنای کل وب سایت یا یک صفحه شخصی به عنوان بخشی از سایت شخص دیگری است. علاوه بر وب سایت های موجود در اینترنت، سایت های WAP برای تلفن های همراه نیز موجود است.

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

در بیشتر موارد در اینترنت، یک وب سایت با یک نام دامنه مطابقت دارد. دقیقا بر اساس نام های دامنهسایت ها در شناسایی می شوند شبکه جهانی. گزینه های دیگر ممکن است: یک سایت در چندین دامنه یا چندین سایت در یک دامنه. به طور معمول، چندین دامنه توسط سایت های بزرگ (پرتال های وب) برای جداسازی منطقی انواع مختلف خدمات ارائه شده (mail.yandex.ru، news.yandex.ru، auto.yandex.ru) استفاده می شود. همچنین مواردی وجود دارد که دامنه های جداگانه ای برای آن اختصاص داده می شود کشورهای مختلفیا زبان ها به عنوان مثال، google.ru و google.fr منطقا سایت های گوگل به زبان های مختلف هستند، اما از نظر فنی سایت های متفاوتی هستند. ترکیب چندین سایت تحت یک دامنه برای آن معمول است میزبانی رایگان. برای شناسایی سایت ها، آدرس حاوی یک tilde و نام سایت پس از میزبان است: example.com/~my-site-name/.



محبوب در دسته بندی:
چگونه یک کلیپ کارائوکه در رایانه ایجاد کنیم؟
چگونه یک کلیپ کارائوکه در رایانه ایجاد کنیم؟
خواندن
برنامه Origin برای بازی مورد نیاز است، اما نصب نیست. FIFA 16 به Origin نیاز دارد.
برنامه Origin برای بازی لازم است، اما نصب نیست فیفا...
خواندن
ثبت صفحه شخصی در شبکه اجتماعی فیسبوک
ثبت صفحه شخصی در شبکه اجتماعی فیسبوک
خواندن
نحوه اجرای یک اسکن Nmap ساده Nmap
نحوه اجرای یک اسکن Nmap ساده Nmap
خواندن

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