صفحه وب چیست؟ این سندی است که به زبان نشانه گذاری فرامتن (HTML) نوشته شده و با استفاده از مرورگر قابل مشاهده است. صفحه وب با وارد کردن URL قابل دسترسی است.

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

چگونه یک صفحه وب را باز کنیم

برای مشاهده یک صفحه وب، یک مرورگر مورد نیاز است (به عنوان مثال، اینترنت اکسپلورر، اج، سافاری، فایرفاکس یا کروم). در مرورگر خود می توانید با تایپ کردن صفحه وب را باز کنید نوار آدرس URL. برای مثال، با تایپ "https://www.computerhope.com/esd.htm" صفحه ESD Computer Hope ظاهر می شود.

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

اولین صفحه وب چه زمانی ایجاد شد؟

اولین صفحه وب در سرن توسط تیم برنرز لی در 6 آگوست 1991 ایجاد شد. قبل از آن، می توانید اولین سایت و اولین صفحه وب را در http://info.cern.ch/ بازدید و مشاهده کنید.

تفاوت بین سایت و صفحه وب چیست؟

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

در مثال URL بالا، "url.htm" صفحه وب است، همیشه آخرین قسمت URL است. برای نشانی‌های وب که به .htm، .html، .php، .cgi، .pl یا پسوند فایل دیگر ختم نمی‌شوند، سرور به‌طور پیش‌فرض صفحه وب index.htm را بارگیری می‌کند. به عنوان مثال، هیچ صفحه وب برای URL صفحه تماس وجود ندارد. در این حالت، فایل فهرست پیش‌فرض از پوشه /contact بارگذاری می‌شود.

نمونه های صفحه وب

قبلاً اشاره کردیم که از مرورگرها برای مشاهده صفحات وب استفاده می شود. یک صفحه وب از چندین عنصر از جمله CSS، تصاویر و جاوا اسکریپت تشکیل شده است. بدنه صفحه وب با با استفاده از HTML. این کد را می توان با استفاده از یک ویرایشگر HTML، نوشته شده توسط یک انسان، یا با استفاده از اسکریپت های سمت سرور ایجاد کرد. به طور معمول، یک صفحه وب ایجاد شده توسط انسان با پسوند .htm یا .html به پایان می رسد. به عنوان مثال، این صفحه دارای نام فایل "webpage.htm" است. صفحات ایجاد شده توسط اسکریپت ممکن است به .cgi، .php، .pl و غیره ختم شوند.

یک صفحه وب شامل چه عناصری است؟

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

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

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

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

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

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

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

عنوان باید در بالای هر صفحه وب باشد. با استفاده از تگ 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 و متن عالی. جایگزین های رایگان نیز شامل Notepad++ برای ویندوز و TextWrangler برای مک هستند.

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

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

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

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

سلام دنیا! سلام دنیا!

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

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

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

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

عناصر خود بسته شونده

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

• 
  

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

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

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

در تمرین

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

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

شرایط اولیه CSS

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

انتخابگرها

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

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

در CSS، انتخابگرها با بریس‌های فرفری () ترکیب می‌شوند که سبک‌هایی را که روی عنصر انتخاب‌شده اعمال می‌شود، در بر می‌گیرد. این انتخابگر تمام عناصر را هدف قرار می دهد

پ(...)

خواص

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

P (رنگ: ...؛ اندازه قلم: ...؛ )

ارزش های

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

و مقدار ویژگی رنگ را روی نارنجی و مقدار ویژگی اندازه فونت را 16 پیکسل قرار دهید.

P (رنگ: نارنجی؛ اندازه قلم: 16 پیکسل؛ )

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

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

برنج. 1.03. ساختار نحوی CSS شامل انتخابگر، خواص و مقادیر است

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

کار با انتخابگرها

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

انتخابگرهای تایپ

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

دیو (...)

... ...

کلاس ها

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

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

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

عالی(...)

...

شناسه ها

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

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

در CSS، شناسه ها با یک نماد هش در جلو و به دنبال آن مقدار ویژگی id نشان داده می شوند. در اینجا id فقط عنصر حاوی ویژگی id را با مقدار shayhowe انتخاب می کند.

#شایهو (...)

...

انتخابگرهای اضافی

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

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

اتصال CSS

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

گزینه های دیگر برای اضافه کردن CSS

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

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

در داخل عنصر از عنصری استفاده می شود که رابطه بین فایل های HTML و CSS را مشخص می کند. از آنجایی که ما به CSS پیوند می دهیم، از ویژگی rel با مقدار stylesheet برای نشان دادن رابطه آنها استفاده می کنیم. علاوه بر این، ویژگی href برای نشان دادن مکان یا مسیر فایل CSS استفاده می شود.

در مثال زیر سند HTML، عنصر به یک شیوه نامه خارجی اشاره می کند.

برای اینکه CSS به درستی رندر شود، مقدار مسیر ویژگی href باید مستقیماً با جایی که فایل CSS ذخیره شده است مطابقت داشته باشد. در مثال قبلی، فایل main.css در همان مکان فایل HTML ذخیره می شود که به آن پوشه ریشه نیز می گویند.

اگر فایل CSS در یک زیر پوشه قرار دارد، مقدار مشخصه href باید به طور متناظر با آن مسیر مطابقت داشته باشد. به عنوان مثال، اگر فایل main.css ما در یک زیر پوشه به نام stylesheets ذخیره شده باشد، مقدار ویژگی href خواهد بود stylesheets/main.css. این از یک اسلش جلو (یا اسلش) برای نشان دادن حرکت به یک زیر پوشه استفاده می کند.

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

با استفاده از تنظیم مجدد CSS

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

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

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

اگر کمی احساس ماجراجویی می کنید، Normalize.css نیز وجود دارد که توسط Nicholas Gallagher ایجاد شده است. Normalize.css روی استفاده از بازنشانی سخت برای همه عناصر اصلی تمرکز نمی کند، بلکه در عوض روی تنظیم سبک های مشترک برای آن عناصر تمرکز می کند. این امر مستلزم درک عمیق‌تر CSS و همچنین آگاهی از آنچه می‌خواهید از سبک‌ها به دست آورید، دارد.

سازگاری و آزمایش بین مرورگرها

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

هنگام نوشتن CSS باید به چند نکته توجه کرد. خبر خوب این است که شما می توانید همه این کارها را انجام دهید و برای تسلط بر آن فقط کمی صبر می طلبد.

در تمرین

بیایید به جایی که آخرین بار در سایت کنفرانس خود متوقف کردیم برگردیم و ببینیم چگونه می توانیم مقداری CSS اضافه کنیم.

در داخل پوشه styles-conference، اجازه دهید یک پوشه جدید به نام assets ایجاد کنیم. اینجاست که ما تمام منابع وب سایت خود را ذخیره می کنیم، مانند استایل ها، تصاویر، ویدیوها و غیره.

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

با مشاهده فایل index.html در مرورگر متوجه می شویم که عناصر و

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

/* 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; )

فایل main.css ما در حال شکل گیری است، پس بیایید آن را به فایل index.html متصل کنیم. index.html را باز کنید ویرایشگر متنو عنصر را درست بعد از عنصر به را اضافه کنید.

از آنجایی که ما از طریق عنصر به سبک ها اشاره می کنیم، یک ویژگی rel را با stylesheet ارزش اضافه کنید.

ما همچنین پیوندی به فایل main.css خود با استفاده از ویژگی href اضافه خواهیم کرد. به یاد داشته باشید که فایل main.css ما در پوشه stylesheets ذخیره شده است که در داخل پوشه assets قرار دارد. بنابراین مقدار ویژگی href که مسیر فایل main.css ما است، باید assets/stylesheets/main.css باشد.

کنفرانس سبک ها

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

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

تظاهرات و منبع

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

خلاصه

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

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

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

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

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

منابع و لینک ها

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

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

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

اطلاعات نظری

مفاهیم اساسی

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

سند HTML؛

سند وب؛

صفحه وب.

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

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

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

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

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

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

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

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

محتوای عنصر، داده هایی که عنصر فرمت می کند

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

محتوای عنصر، داده هایی که

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

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

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

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

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

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

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

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

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

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

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

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

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

HTML دقیقا چیست؟

اگر با مرورگر کار می کنید، دستور منو View - View HTML (View - Source) را انتخاب کنید. پنجره ای با کد اولیه این صفحه در HTML روی صفحه نمایش ظاهر می شود.

یا CTRL+U را فشار دهید

ظاهر صفحات وب در اینترنت اغلب تغییر می کند. اما برای ما در حال حاضر این مهم نیست.

HTML - زبان نشانه گذاری HyperText

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

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

زبان HTML

زبان HTML در چندین نوع یا مشخصات وجود دارد. مانند نسخه های محصول نرم افزار، مشخصات شماره گذاری شده اند: 2.0، 3.0، 3.2، 4.0. هر مشخصات بعدی نشان دهنده یک افزونه و اضافه به مشخصات قبلی است. ما از ساخت و سازهای دومی استفاده خواهیم کرد مشخصات HTML 4.0 که پشتیبانی می شوند آخرین نسخه هارایج ترین مرورگرها

سند در پنجره کد HTML یک سند متنی با فرمت خاص است. تمامی فایل های این فرمت دارای پسوند HTML(.html)، یا HTM (.htm). یک سند HTML متن ساده را با عناصر نشانه گذاری محصور شده در پرانتزهای زاویه ای ترکیب می کند< и >، مثلا، ، ، ، . این عناصر نشانه گذاری برچسب نامیده می شوند. برچسب ها می توانند تک، باز و بسته شوند و از قسمت های بعدی به ترتیب خاصی تشکیل شوند:

• براکت زاویه سمت چپ

بنابراین، تگ باز که در ابتدای سند HTML ظاهر می شود و شروع آن را نشان می دهد، از نام HTML و دو براکت زاویه تشکیل شده است.< >و برچسبی که در انتهای سند WEB قرار دارد، علاوه بر قسمت های تعیین شده، دارای علامت اسلش / به معنای تگ بسته شدن و نشان دهنده پایان سند است. تگ به معنای آغاز کد برنامه اسکریپت یکپارچه شده در سند است. این تگ علاوه بر نام اسکریپت، یک ویژگی زبان با مقدار "vbscript" دارد، به این معنی که اسکریپت به زبان vbscript نوشته شده است.

فقط کاراکترهای لاتین را می توان در برچسب ها استفاده کرد و هر کاراکتری را می توان در مقادیر ویژگی استفاده کرد. برای مثال، اگر از نویسه‌های سیریلیک به‌عنوان مقادیر مشخصه استفاده می‌شود، باید آن‌ها را در گیومه‌ها قرار دهید، به‌عنوان مثال، name="Section 1".

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

برچسب ها به عنوان پایه html

بیشتر تگ ها جفت می شوند: تگ افتتاحیه با یک تگ بسته مربوطه دنبال می شود و بین آنها حاوی متن یا برچسب های دیگر است، به عنوان مثال:

فروشگاه اینترنتی کتاب سه قدم

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

بیشتر تگ ها می توانند یک یا چند ویژگی داشته باشند - ویژگی هایی که اطلاعات بیشتری در مورد نحوه پردازش تگ فعلی مرورگر ارائه می دهند. اما ممکن است اصلاً هیچ ویژگی وجود نداشته باشد. یک ویژگی تگ شامل یک نام، به عنوان مثال، align، یک علامت برابر = و یک مقدار است که توسط یک رشته کاراکتر مشخص می شود، به عنوان مثال، "center": align = "center". مقادیر مشخصه معمولاً در علامت نقل قول قرار می گیرند. اما اگر این مقادیر فقط از کاراکترها، اعداد و خط تیره لاتین استفاده می کنند، نقل قول ها را می توان حذف کرد، به عنوان مثال: align=center. اما به دلیل تعدادی از شرایط مربوط به ادغام آتی HTML با جاوا اسکریپت و زبان ها، حذف نقل قول ها اکیداً توصیه نمی شود. بنابراین، عادت به نوشتن بلافاصله ویژگی ها در نقل قول را ایجاد کنید.

ساختار سند HTML

هر سند HTML ساختار خاصی دارد که به شکل زیر است:

…

ساختار یک سند HTML شامل عناصر اساسی زیر است:

• تگ ها و , که شروع و پایان سند را مشخص می کنند.
• هدر مشخص شده توسط و ;
• بدن محدود شده توسط برچسب ها….

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

علاوه بر عنصر ...، هدر ممکن است حاوی عناصر ... باشد، به عنوان مثال، برای نشان دادن اطلاعات مربوط به سند. تگ افتتاحیه شامل جفت های name=value است که ویژگی های سند را توصیف می کند، به عنوان مثال، نوع سند، رمزگذاری آن، تألیف، فهرست کلمات کلیدی و غیره، این داده ها نیز توسط موتورهای جستجو هنگام نمایه سازی اسناد استفاده می شود.

HTML (زبان نشانه گذاری HyperText) است زبان خاصقالب بندی اسناد متنی(به آن زبان نشانه گذاری سند نیز می گویند - نمایشگر اسناد WWW). HTML مجموعه ای نسبتاً ساده از دستورات است که ساختار یک سند را توصیف می کند. HTML به شما این امکان را می‌دهد که بخش‌های منطقی جداگانه را در متن برجسته کنید (عنوان، پاراگراف‌ها، فهرست‌ها، و غیره)، یک عکس یا عکس آماده شده جداگانه را در یک صفحه وب قرار دهید، و پیوندها را در صفحه برای ارتباط با سایر اسناد سازماندهی کنید.

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

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

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

تمام تگ ها در HTML به دو نوع جفت شده و بدون جفت تقسیم می شوند. تگ های جفت شده آنهایی هستند که تگ افتتاحیه آنها نیاز به تگ بسته شدن دارد. تگ های بسته در HTML با اسلش مشخص می شوند و به این صورت نوشته می شوند. تگ های جفت نشده نیازی به تگ بسته شدن ندارند. نمونه ای از این تگ ها تگ break to next line است
. همچنین تگ های اجباری وجود دارد که باید در تمام صفحات استفاده شود و تگ های اختیاری که به دلخواه استفاده می شوند.