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

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

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

HTML و CSS چیست؟

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

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

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

اصطلاحات اولیه HTML

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

عناصر

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

قبل از

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

) موارد را می توان به لیست اضافه کرد ,

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

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

برچسب ها

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

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

.

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

.

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

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

...

ویژگی های

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

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

شای هاو

نمایش شرایط اولیه HTML

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

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

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

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

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

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

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

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

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

سلام دنیا!

سلام دنیا!

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



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

این کد سند را نشان می دهد که با اعلان نوع سند شروع می شود.، بلافاصله عنصر را دنبال می کند . داخل برو عناصر و . عنصر شامل کدگذاری صفحه از طریق برچسب است و عنوان سند از طریق عنصر . عنصر <body>شامل هدر از طریق عنصر است <h1>و یک پاراگراف از متن از طریق<р>. زیرا هم عنوان و هم پاراگراف در داخل عنصر قرار دارند <body>، در صفحه وب قابل مشاهده هستند.</p><p>هنگامی که یک عنصر در داخل یک عنصر دیگر قرار دارد که به عنوان عنصر تودرتو نیز شناخته می شود، ایده خوبی است که به آن بالشتک اضافه کنید تا ساختار سند به خوبی سازماندهی شده و قابل خواندن باشد. در کد قبلی هر دو عنصر <head>و <body>تو در تو و در داخل عنصر جابجا شده است <html>. ساختار padding برای عناصر با عناصر جدید اضافه شده در داخل ادامه می یابد <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 >و مقدار ویژگی color را روی نارنجی و مقدار font-size را 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، کلاس ها با یک نقطه پیشرو و به دنبال آن مقدار ویژگی کلاس مشخص می شوند. انتخابگر کلاس زیر همه عناصری را که حاوی مقدار ویژگی کلاس عالی هستند، از جمله عناصر را انتخاب می کند <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 Reset</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>Reset 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 با مقدار stylesheet اضافه کنید.</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، که برای علامت گذاری ابرمتن استفاده می شود. اما این پدیده چیست؟ فرامتن چیست؟ بدون کاوش عمیق در تئوری، متذکر می شویم که این متنی است که به یک روش به شما امکان می دهد دسترسی سریعاز طریق پیوند به دیگری در یک کتاب معمولی، این غیرممکن است - "متن ساده" وجود دارد. برای دسترسی به صفحه مورد نظر، خواننده باید چندین ورق بزند و قبلاً مطالب یا پاورقی ها را خوانده باشد. در حالت "hypertext"، بخش اصلی کار توسط رایانه انجام می شود - به دلیل اطلاعات منعکس شده در عناصر 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؛

سند وب

صفحه وب.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

قالب بندی متن

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

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

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

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

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

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

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

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

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

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

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



پرطرفدار در دسته بندی:
برنامه‌های Google در Android نصب نمی‌شوند، پوشه پیش‌فرض را نمی‌توان تنظیم کرد
برنامه های گوگل را نمی توان روی اندروید نصب کرد...
خواندن
حالت امن موزیلا فایرفاکس
حالت امن موزیلا فایرفاکس
خواندن
مروری بر سرویس
مروری بر سرویس "درس های انگلیسی" از Beeline
خواندن
لپ تاپ یا کامپیوتر رومیزی کدام بهتر است
لپ تاپ یا کامپیوتر رومیزی کدام بهتر است
خواندن

آخرین مقالات
بازیابی سیستم ویندوز
خواندن
چگونه برای GTA San Andreas سیو نصب کنیم؟
خواندن
دانلود mta برای نگاشت به samp
خواندن
Grand Theft Auto: معاون شهر شروع نمی شود؟
خواندن
منوی سمت چپ ansi را باز کنید. سفر از طریق ...
خواندن
نحوه تنظیم تایمر خاموش شدن کامپیوتر
خواندن
نمونه هایی از توابع متنی در اکسل هر...
خواندن
فایل ها به کندی کپی می شوند
خواندن
بالا