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

مانند یک کتاب معمولی، یک وب سایت از صفحاتی به نام صفحات وب تشکیل شده است.

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

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

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

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

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

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

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

نکته: در این قانون استثنا وجود دارد، مثلاً در مورد رول اورها که ممکن است هایپرلینک نباشند، اما وقتی ماوس را روی آنها قرار می دهید، مکان نما نیز به شکل عقربه در می آید. علاوه بر تغییر ظاهر مکان نما، هنگامی که ماوس را روی یک هایپرلینک قرار می دهید، URL (آدرس منحصر به فرد منبع) نیز باید نمایش داده شود، اما ما در این مورد در درس ایجاد هایپرلینک با استفاده از FrontPage صحبت خواهیم کرد.

سوالات کنترلی:

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

9 رای

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

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

چگونه یک صفحه ایجاد کنیم

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

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

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

<html > <سر > <عنوان >صفحه اول من</title> </head> <بدن > <مرکز > </h1> <br/> <مرکز > "https://pixabay.com/static/uploads/photo/2016/10/14/18/03/workplace-1740807_960_720.jpg"> <br/> <font style="color:red" ></font> <br/> <ب></b> <br/> ما به پایین ترین سطح رسیده ایم<br/> اکنون کمی بیشتر در مورد برچسب ها می دانید و می توانید از آنها استفاده کنید. بیایید سعی کنیم پیوندی را برای پیوند چندین صفحه به یکدیگر وارد کنیم.<br/> <ساعت >به عنوان مثال، این یک پیوند به وبلاگ من است -<a href = "http://site/" >شروع - شانس</a>- به سادگی در مورد "چیزهای پیچیده" صحبت می کند.<br/> <br/> </body> </html>

ایجاد یک صفحه ساده تر از چیزی است که فکر می کنید

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



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

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

ما به پایین ترین سطح رسیده ایم

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

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

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

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

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

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

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

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

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

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

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

برچسب ها

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

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

پایه ای

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

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

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

برچسب بزنید

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

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

در همان خط باز و بسته شدن وجود دارد

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

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

تصویر

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

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

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

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

قالب بندی متن

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

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

---

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

---

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

پیوندها

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

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

اگر می‌خواهید در مورد تگ‌های html اطلاعات بیشتری کسب کنید و یاد بگیرید که چگونه نه تنها عکس‌ها، بلکه ویدیوها، ایجاد دکمه‌ها، فرم‌های مختلف، فهرست‌ها، پاراگراف‌ها را نیز درج کنید، می‌توانم یک دوره رایگان توسط Evgeniy Popov به شما ارائه دهم. مبانی HTML " فقط 33 درس به شما کمک می کند تا به سطح بعدی برسید.

من همچنین می خواهم یک دوره ویدیویی را به شما توصیه کنم که نحوه طراحی وب سایت ها را به شما می گوید. کل فرآیند با مثال های واقعی نشان داده شده است که به ویژه خوب است. این دوره هم برای مبتدیانی است که حتی HTML را نمی دانند و هم برای کسانی که هم HTML و هم CSS را به خوبی می دانند، اما نمی دانند که چگونه وب سایت ها را به خوبی چیدمان کنند. برای دریافت اطلاعات کامل تر می توانید از لینک زیر استفاده کنید: www.srs.myrusakov.ru/makeup

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

امروز شما کارهای زیادی انجام داده اید، زیرا اولین قدم سخت ترین است.

مشترک شدن در خبرنامه و گروه VKontakte و همچنین یاد بگیرید: چگونه و چرا به یک موتور وب سایت نیاز دارید، چیدمان بلوک و شبکه مدولار چیست، چگونه وب سایت ها را به درستی بنویسید، و موارد دیگر.

دوباره می بینمت و موفق باشی!

قبل از شروع سفر خود در درس ساخت وب سایت 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

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

وقت آن است که کار خود را بررسی کنیم و ببینیم 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 (HyperText Markup Language) نوشته شده اند و فایل هایی که در آنها ذخیره می شوند به صورت htm و html مشخص می شوند. شما می توانید چنین فایلی را در یک ویرایشگر متن معمولی ایجاد کنید - این اولین مرحله ایجاد خواهد بود صفحات وب. برای مثال Notepad استاندارد را باز کنید و یک فایل خالی به نام index.html ایجاد کنید. وقتی آدرس وب سایتی را بدون مشخص کردن آدرس خاصی تایپ می کنید صفحه(به عنوان مثال،)، اول از همه جستجو صفحهدقیقا با این نام - شاخص.

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

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

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

یک پاراگراف کامل اطلاعات در اینجا وجود دارد!

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

خط اول پاراگراف.


خط دوم پاراگراف.

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

خط اول پاراگراف.


خط دوم پاراگراف.

روی این

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

به طور خلاصه

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

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

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

یادگیری فعال

هنوز مطالعه فعالی در دسترس نیست. اگر می توانید اطلاعات مفیدی ارائه دهید، پس ...

بیایید عمیق تر شیرجه بزنیم

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

صفحه وب

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

• اطلاعات سبک- کنترل صفحه توسط ادراک و احساس
• اسکریپت ها- که صفحه را پویاتر و برای کاربران آسان تر می کند
• رسانه ها- تصاویر، موسیقی و فیلم ها

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

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

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

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

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

وب سرور

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

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

سیستم جستجو

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

محبوب ترین موتورهای جستجو: گوگل، Bing، Yandex، DuckDuckGo، و بسیاری دیگر. برخی از آنها جهانی هستند، در حالی که برخی دیگر بر روی یک منطقه خاص متمرکز هستند. از موتور جستجویی که برای شما مناسب است استفاده کنید.

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

در زیر مثالی از نحوه نمایش جعبه جستجوی Google در صفحه شروع (خانه) مرورگر Firerox به طور پیش فرض آورده شده است: