دسترسی کامل به یادگیری طراحی وب ، چاپ 4 و 60K+ عناوین دیگر ، با آزمایش 10 روزه رایگان O'Reilly.

همچنین رویدادهای آنلاین زنده ، محتوای تعاملی ، مواد آماده سازی صدور گواهینامه و موارد دیگر وجود دارد.

فصل 4. ایجاد یک صفحه ساده: (بررسی اجمالی HTML)

در این فصل

• مقدمه ای بر عناصر و ویژگی ها
• یک صفحه وب ، قدم به قدم
• مرحله 2: ساختار سند را بدهید
• مرحله 5: ظاهر را با یک برگه سبک تغییر دهید
• عیب یابی صفحات وب شکسته

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

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

این همان چیزی است که من می خواهم از این فصل خارج شوید:

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

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

یک صفحه وب ، قدم به قدم

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

• مرحله 1: با محتوا شروع کنید. به عنوان یک نقطه شروع ، ما محتوای متن خام را می نویسیم و می بینیم که مرورگرها با آن چه می کنند.
• مرحله 2: ساختار سند را بدهید. شما در مورد Syntax Element HTML و عناصری که ساختار آن را ارائه می دهند ، می آموزید.
• مرحله 3: عناصر متن را شناسایی کنید. شما محتوا را با استفاده از عناصر متنی مناسب توصیف می کنید و در مورد روش مناسب برای استفاده از HTML یاد می گیرید.
• مرحله 4: یک تصویر اضافه کنید. با افزودن یک تصویر به صفحه ، در مورد ویژگی ها و عناصر خالی یاد خواهید گرفت.
• مرحله 5: ظاهر صفحه را با یک برگه سبک تغییر دهید. این تمرین به شما طعم قالب بندی محتوای با ورق های سبک آبشار را می دهد.

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

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

قبل از شروع ، ویرایشگر متن را راه اندازی کنید

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

html راه سخت

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

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

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

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

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

ایجاد یک سند جدید در دفترچه یادداشت (ویندوز)

این مراحل ایجاد یک سند جدید در دفترچه یادداشت در ویندوز 7 است (شکل 4-2):

1. منوی Start را باز کرده و به دفترچه یادداشت (در لوازم جانبی) بروید. 1
2. برای باز کردن یک پنجره سند جدید ، روی NotePad کلیک کنید ، و شما آماده شروع تایپ هستید. 2
3. در مرحله بعد ، ما پسوندها را قابل مشاهده خواهیم کرد. این مرحله برای تهیه اسناد HTML لازم نیست ، اما به شما کمک می کند تا انواع پرونده ها با یک نگاه روشن تر شوند. گزینه های پوشه را انتخاب کنید."از منوی Tools 3 و View Tab 4 را انتخاب کنید."مخفی کردن پسوندهای برای انواع فایل شناخته شده" را پیدا کنید و آن گزینه را بردارید. 5 برای ذخیره اولویت ، روی OK کلیک کنید و پسوند پرونده اکنون قابل مشاهده خواهد بود.

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

در ویندوز 7 ، برای آشکار کردن منو برای دسترسی به ابزارها و گزینه های پوشه ، به کلید ALT ضربه بزنید. در ویندوز ویستا با عنوان "پوشه و گزینه های جستجو" برچسب گذاری شده است.

شکل 4-2. ایجاد یک سند جدید در دفترچه یادداشت.

ایجاد یک سند جدید در TextEdit (Mac OS X)

به طور پیش فرض ، TextEdit اسناد "متن غنی" را ایجاد می کند - یعنی اسنادی که دارای دستورالعمل های قالب بندی سبک پنهان برای ساختن متن جسورانه ، تنظیم اندازه قلم و غیره هستند. می توانید بگویید که TextEdit در حالت غنی از متن است که در بالای پنجره دارای نوار ابزار قالب بندی است (حالت متن ساده نیست). اسناد HTML باید اسناد متن ساده باشند ، بنابراین ما باید همانطور که در این مثال نشان داده شده است ، قالب را تغییر دهیم (شکل 4-3).

1. از Finder استفاده کنید تا در پوشه برنامه ها برای TextEdit جستجو کنید. هنگامی که آن را پیدا کردید ، برای راه اندازی برنامه ، روی نام یا نماد دوبار کلیک کنید.
2. TextEdit یک سند جدید را باز می کند. منوی فرمت متن در بالا نشان می دهد که شما در حالت متن غنی قرار دارید. در اینجا نحوه تغییر آن آورده شده است.
3. کادر گفتگوی Preferences را از منوی TextEdit باز کنید.
4. سه تنظیم وجود دارد که باید تنظیم کنید: در برگه "سند جدید" ، "متن ساده" را انتخاب کنید. در برگه "باز و ذخیره" ، "نادیده گرفتن دستورات متن غنی در پرونده های HTML" را انتخاب کنید و "پسوندهای ضمیمه" . txt "را به پرونده های متنی ساده خاموش کنید.
5. پس از اتمام کار ، روی دکمه قرمز در گوشه بالا سمت چپ کلیک کنید.
6. هنگامی که یک سند جدید ایجاد می کنید ، منوی قالب بندی دیگر در آنجا نخواهد بود و می توانید متن خود را به عنوان یک سند HTML ذخیره کنید. همیشه می توانید با انتخاب قالب ، یک سند را به متن غنی تبدیل کنید → متن غنی را در هنگام استفاده از TextEdit برای HTML ایجاد کنید.

شکل 4-3. راه اندازی TextEdit و انتخاب تنظیمات متن ساده در تنظیمات.

مرحله 1: با محتوا شروع کنید

اکنون که سند جدید خود را داریم ، وقت آن است که تایپ کنیم. یک صفحه وب همیشه با محتوا شروع می شود ، بنابراین جایی است که ما تظاهرات خود را شروع می کنیم. تمرین 4-1 |وارد کردن محتوا شما را از طریق وارد کردن محتوای متن خام و ذخیره سند در یک پوشه جدید ، پیاده می کند.

نامگذاری کنوانسیون ها

مهم است که هنگام نامگذاری پرونده های خود ، این قوانین و کنوانسیون ها را رعایت کنید:

• برای پرونده های خود از پسوندهای مناسب استفاده کنید. پرونده های HTML و XHTML باید با .html به پایان برسد. گرافیک وب باید مطابق با قالب پرونده آنها برچسب گذاری شود: . gif ، .png یا .jpg (. jpeg نیز قابل قبول است).
• هرگز از فضاهای کاراکتر در نام های پرونده استفاده نکنید. استفاده از یک شخصیت زیر خطی یا هیفن برای جدا کردن بصری کلمات در نام های پرونده ، مانند Robbins_bio.html یا Robbins-bio.html معمول است.
• از شخصیت های خاص مانند؟، ٪ ، # ، / ،: ، ؛، • ، و غیره نام پرونده ها را به حروف ، اعداد ، زیربناها ، خط ها و دوره ها محدود کنید.
• بسته به پیکربندی سرور شما ممکن است نام های پرونده حساس به مورد باشد. به طور مداوم با استفاده از تمام حروف کوچک در نام های پرونده ، اگرچه لازم نیست ، اما یکی از راه های مدیریت نام پرونده های شما است.
• نام پرونده ها را کوتاه نگه دارید. نام های کوتاه تعداد کاراکترها و اندازه پرونده پرونده HTML خود را در کنترل نگه دارید. اگر واقعاً باید نام چند کلمه ای را به پرونده بدهید ، می توانید کلمات را با Hyphens ، مانند A-Document-title.html ، برای بهبود خوانایی جدا کنید.
• کنوانسیون های خود تحمیل شده. تهیه یک طرح نامگذاری مداوم برای سایتهای عظیم - به عنوان مثال ، همیشه با استفاده از حروف کوچک با خطوط بین کلمات مفید است. این امر برخی از حدس و گمان ها را از یادآوری آنچه که شما نامگذاری کرده اید وقتی بعداً به آن پیوند می دهید ، طول می کشد.

تمرین 4-1 |ورود به محتوا

1. محتوای زیر را برای صفحه اصلی در سند جدید ویرایشگر متن خود تایپ کنید. آن را دقیقاً همانطور که در اینجا می بینید کپی کنید ، نگه داشتن خط به خاطر بازی در کنار هم همینطور است. متن خام این تمرین به صورت آنلاین در www.leaingwebdesign.com/4e/materials/ در دسترس است.

Black Goose Bistro رستوران The Black Goose Bistro در یک فضای لگن ، ناهار و شام معمولی را ارائه می دهد. این منو به طور مرتب تغییر می کند تا تازه ترین مواد را برجسته کند. پذیرایی از شما لذت می برید. ما آشپزی را کنترل خواهیم کرد. پذیرایی از غاز سیاه می تواند رویدادهایی را از میان وعده های Bridge Club گرفته تا جمع آوری کمک های مالی شرکت کند. موقعیت مکانی و ساعت Seekonk ، ماساچوست ؛دوشنبه تا پنجشنبه 11 صبح تا 9 بعد از ظهر ، جمعه و شنبه ، 11 صبح تا نیمه شب

شکل 4-4. Saving index.html در یک پوشه جدید به نام "Bistro".

شکل 4-5. اولین نگاه به محتوای موجود در یک مرورگر. آنچه مرورگرها نادیده می گیرند

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

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

خیلی وقت پیش

یادگیری از مرحله 1

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

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

مرحله 2: ساختار سند را بدهید

ما محتوای خود را در یک سند .html ذخیره کرده ایم - اکنون ما آماده هستیم تا آن را شروع کنیم.

معرفیعناصر HTML

در فصل 2 ، نمونه هایی از عناصر HTML را با یک برچسب باز (به عنوان مثال برای یک بند) و برچسب بسته شدن () مشاهده کردید. قبل از شروع اضافه کردن برچسب ها به سند خود ، بیایید به آناتومی یک عنصر HTML (نحو آن) نگاه کنیم و اصطلاحات مهمی را تقویت کنیم. یک عنصر ظروف عمومی در شکل 4-6 برچسب گذاری شده است.

یک عنصر شامل محتوا و نشانه گذاری آن است.

شکل 4-6. قسمت های یک عنصر ظرف HTML.

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

نام Element در برچسب باز (همچنین برچسب شروع) و دوباره در برچسب بسته شدن (یا پایان) پیش از یک برش ( /) ظاهر می شود. برچسب بسته شدن چیزی شبیه به سوئیچ "خاموش" برای عنصر است. مراقب باشید از شخصیت Backslash مشابه در برچسب های انتهایی استفاده نکنید (به نکته معرفی مراجعه کنید. عناصر HTML).

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

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

نکته

Slash در مقابل backslash

برچسب ها و URL های HTML از شخصیت Slash (/) استفاده می کنند. شخصیت Slash در زیر علامت سوال (؟) در صفحه کلید استاندارد QWERTY یافت می شود.

به راحتی می توان برش را با شخصیت backslash () ، که در زیر شخصیت نوار (|) یافت می شود ، اشتباه گرفت. کلید Backslash در برچسب ها یا URL ها کار نمی کند ، بنابراین مراقب باشید از آن استفاده نکنید.

ساختار اسناد اساسی

شکل 4-7 اسکلت حداقل توصیه شده از یک سند HTML5 را نشان می دهد. من می گویم "توصیه می شود" زیرا تنها عنصری که در HTML مورد نیاز است ، عنوان است. اما احساس می کنم بهتر است ، به ویژه برای مبتدیان ، اسناد را با نشانه ساختاری مناسب سازماندهی کند. و اگر در حال نوشتن در XHTML سختگیرانه تر هستید ، برای معتبر بودن ، تمام عناصر زیر به جز متا باید درج شوند. بیایید نگاهی بیندازیم که در شکل 4-7 اتفاق می افتد.

1. من نمی خواهم چیزها را اشتباه بگیرم ، اما خط اول در مثال به هیچ وجه عنصری نیست. این یک اعلامیه از نوع اسناد است (همچنین به آن اعلامیه Doctype گفته می شود) که این سند را به عنوان یک سند HTML5 معرفی می کند. من در مورد اعلامیه های Doctype در فصل 10 حرفهای بیشتری برای گفتن دارم ، اما برای این بحث ، کافی است که بگوییم از جمله آن به مرورگرهای مدرن اجازه می دهد بدانند که باید این سند را مطابق با مشخصات HTML5 تفسیر کنند.
2. کل سند در یک عنصر HTML موجود است. عنصر HTML عنصر ریشه نامیده می شود زیرا شامل تمام عناصر موجود در سند است و ممکن است در هیچ عنصر دیگری موجود نباشد. از آن برای هر دو اسناد HTML و XHTML استفاده می شود.
3. در عنصر HTML ، سند به یک سر و بدن تقسیم می شود. عنصر سر حاوی اطلاعات توصیفی در مورد خود سند است ، مانند عنوان آن ، برگه سبک (های) مورد استفاده ، اسکریپت ها و انواع دیگر اطلاعات "متا".
4. عناصر متا در عنصر سر ، اطلاعاتی در مورد خود سند ارائه می دهند. از یک عنصر متا می توان برای ارائه انواع اطلاعات استفاده کرد ، اما در این حالت ، رمزگذاری کاراکتر (مجموعه استاندارد نامه ها ، اعداد و نمادها) مورد استفاده در سند را مشخص می کند. من نمی خواهم در حال حاضر به جزئیات زیادی در این باره بپردازم ، اما می دانم که دلایل خوب زیادی برای مشخص کردن Charset در هر سند وجود دارد ، بنابراین من آن را به عنوان بخشی از ساختار حداقل اسناد گنجانده ام.

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

قبل از HTML5 ، نحو برای مشخص کردن شخصیت مجموعه با عنصر متا کمی دقیق تر بود. اگر اسناد خود را در HTML 4. 01 یا XHTML 1. 0 می نویسید ، عنصر متا شما باید به این شکل باشد:

http-equiv = "محتوای نوع" محتوا = "متن/html ؛ charset = utf-8">

شکل 4-7. ساختار حداقل یک سند HTML.

آیا شما آماده اضافه کردن برخی ساختار به صفحه اصلی Black Goose Bistro هستید؟سند index.html را باز کنید و به تمرین 4-2 |افزودن ساختار اساسی.

تمرین 4-2 |افزودن ساختار اساسی

1. اگر از قبل باز نشده است ، سند تازه ایجاد شده ، index.html را باز کنید.
2. با افزودن اعلامیه Doctype HTML5 شروع کنید:

     بیسترو غاز سیاه  Black Goose Bistro رستوران The Black Goose Bistro در یک فضای لگن ، ناهار و شام معمولی را ارائه می دهد. این منو به طور مرتب تغییر می کند تا تازه ترین مواد را برجسته کند. پذیرایی از شما لذت می برید. ما آشپزی را انجام خواهیم داد. پذیرایی از غاز سیاه می تواند رویدادهایی را از میان وعده های Bridge Club گرفته تا جمع آوری کمک های مالی شرکت کند. موقعیت مکانی و ساعت Seekonk ، ماساچوست ؛دوشنبه تا پنجشنبه 11 صبح تا 9 بعد از ظهر ، جمعه و شنبه ، 11 صبح تا نیمه شب 

شکل 4-8. صفحه در یک مرورگر پس از تعریف عناصر ساختار سند.

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

مرحله 3: عناصر متن را شناسایی کنید

با کمی تجربه نشانه گذاری، اضافه کردن نشانه گذاری که سرفصل ها و سرفصل های فرعی (h1 و h2)، پاراگراف ها (p) و متن تاکید شده (em) را به محتوای خود مشخص می کند، بی اهمیت است. انجام در تمرین 4-3 |تعریف عناصر متنبا این حال، قبل از شروع، می خواهم در مورد کارهایی که در هنگام علامت گذاری محتوا با HTML انجام می دهیم و کارهایی که انجام نمی دهیم، صحبت کنم.

معرفی کردن. نشانه گذاری معنایی

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

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

عنوان خوب را فراموش نکنید

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

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

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

خوب ، سخنرانی کافی. وقت آن است که در تمرین 4-3 به کار بر روی آن محتوا کار کنیمتعریف عناصر متن.

تمرین 4-3 |تعریف عناصر متن

1. اگر در حال حاضر باز نشده است ، index.html را در ویرایشگر متن خود باز کنید.
2. خط اول متن ، "Black Goose Bistro" عنوان اصلی صفحه است ، بنابراین ما آن را به عنوان یک عنصر عنوان سطح 1 (H1) علامت گذاری خواهیم کرد. برچسب باز ، در ابتدای خط و برچسب بسته شدن ، پس از آن ، مانند این:

 بیسترو غاز سیاه 

 رستوران 

 Goose Bistro Black Goose در یک فضای باسن ، ناهار و شام گاه به گاه را ارائه می دهد. این منو به طور مرتب تغییر می کند تا تازه ترین مواد را برجسته کند. 

شما لذت می بریدما آشپزی را کنترل خواهیم کردبشرپذیرایی از غاز سیاه می تواند رویدادهایی را از میان وعده های Bridge Club گرفته تا جمع آوری کمک های مالی شرکت کند.

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

اکنون ما به جایی می رسیم. با شناسایی عناصر به درستی ، مرورگر اکنون می تواند متن را به روشی معنی دار تر نمایش دهد. چند نکته مهم در مورد آنچه در شکل 4-9 اتفاق می افتد وجود دارد.

عناصر بلوک و درون خطی

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

شکل 4-10. طرح ها ساختار عناصر موجود در صفحه اصلی را نشان می دهد.

در مقابل ، به متنی که ما تأکید کردیم (EM) را نشان دادیم. این خط جدید را شروع نمی کند ، بلکه در جریان پاراگراف باقی می ماند. دلیل این امر این است که عنصر EM یک عنصر درون خطی است. عناصر درون خطی خطوط جدید را شروع نمی کنند. آنها فقط با جریان می روند. در شکل 4-10 ، عنصر EM درون خطی به رنگ آبی روشن بیان شده است.

اضافه کردن نظرات پنهان

شما می توانید با علامت گذاری آنها به عنوان نظر ، یادداشت ها را در سند منبع برای خود و دیگران بگذارید. هر چیزی که بین برچسب های نظر () قرار دهید در مرورگر نمایش داده نمی شود و هیچ تاثیری در بقیه منبع نخواهد داشت.

 این یک نظر است >   این یک نظر چند خطی است که در اینجا به پایان می رسد. > 

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

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

سبک های پیش فرض

نکته دیگری که در مورد صفحه مشخص شده در شکل 4-9 و شکل 4-10 متوجه خواهید شد این است که مرورگر سعی می کند با تبدیل کردن سطح اول به بزرگترین و جسورانه ترین چیز ، به صفحه سلسله مراتب بصری ارائه دهدصفحه ، با عناوین سطح دوم کمی کوچکتر و غیره.

چگونه مرورگر تعیین می کند که H1 چگونه باید به نظر برسد؟از یک برگه سبک استفاده می کند! همه مرورگرها دارای ورق های سبک داخلی خود هستند (به نام برگهای سبک عامل کاربر در مشخصات) که ارائه پیش فرض عناصر را توصیف می کند. ارائه پیش فرض از مرورگر به مرورگر مشابه است (به عنوان مثال ، H1 S همیشه بزرگ و جسورانه است) ، اما برخی از تغییرات وجود دارد (نقل قول های طولانی ممکن است یا ممکن است در آن قرار نگیرد).

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

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

مرحله 4: یک تصویر اضافه کنید

یک صفحه وب با هیچ تصویری چه سرگرم کننده ای است؟در تمرین 4-4 |با اضافه کردن یک تصویر ، ما با استفاده از عنصر IMG یک تصویر را به صفحه اضافه خواهیم کرد. در فصل 7 تصاویر با جزئیات بیشتر مورد بحث قرار خواهد گرفت ، اما در حال حاضر ، این فرصت را به ما می دهد تا دو مفهوم اساسی دیگر را معرفی کنیم: عناصر و ویژگی های خالی.

عناصر خالی

تاکنون ، تقریباً تمام عناصری که در صفحه اصلی Black Goose Bistro استفاده کرده ایم ، نحو نشان داده شده در شکل 4-6 را دنبال کرده اند: کمی از محتوای متن که توسط برچسب های شروع و پایان احاطه شده است.

با این حال ، تعداد انگشت شماری از عناصر محتوای متن ندارند زیرا از آنها برای تهیه یک دستورالعمل ساده استفاده می شود. گفته می شود این عناصر خالی هستند. عنصر تصویر (IMG) نمونه ای از چنین عنصری است. این به مرورگر می گوید که یک فایل تصویری را از سرور دریافت کرده و در آن نقطه در جریان متن قرار دهید. سایر عناصر خالی شامل Break Line (BR) ، شکستگی های موضوعی (HR) و عناصری که اطلاعاتی در مورد یک سند ارائه می دهند اما بر محتوای نمایش داده شده آن تأثیر نمی گذارد ، مانند عنصر متا که قبلاً استفاده کردیم.

شکل 4-11 نحو بسیار ساده یک عنصر خالی را نشان می دهد (مقایسه با شکل 4-6). اگر در حال نوشتن یک سند XHTML هستید ، نحو کمی متفاوت است (به عناصر خالی نوار کناری در XHTML مراجعه کنید).

شکل 4-11. ساختار عنصر خالی. عناصر خالی در xhtml

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

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

1005 بزرگراه Gravenstein North سباستوپول ، کالیفرنیا 95472

ویژگی های

بیایید دوباره به اضافه کردن یک تصویر با عنصر IMG خالی برگردیم. بدیهی است ، یک برچسب به خودی خود بسیار مفید نیست - هیچ راهی برای دانستن اینکه از کدام تصویر استفاده می شود وجود ندارد. این جایی است که ویژگی ها وارد می شوند. ویژگی ها دستورالعمل هایی هستند که یک عنصر را روشن یا اصلاح می کنند. برای عنصر IMG ، ویژگی SRC (کوتاه برای "منبع") مورد نیاز است و مکان (URL) پرونده تصویر را مشخص می کند.

شکل 4-12. یک عنصر IMG با ویژگی ها.

نحو برای یک ویژگی به شرح زیر است:

AttributeName = "مقدار"

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

AttributeName = "مقدار"> AttributeName = "مقدار">محتوا

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

attribute1 = "مقدار" attribute2 = "مقدار">

برای روش دیگر برای دیدن آن ، شکل 4-12 یک عنصر IMG را با ویژگی های مورد نیاز خود نشان می دهد.

در اینجا آنچه شما باید در مورد ویژگی ها بدانید:

• ویژگی ها فقط در برچسب باز ، به دنبال نام عنصر می روند ، هرگز در برچسب پایان.
• ممکن است چندین ویژگی برای یک عنصر اعمال شود که با فضاهایی در برچسب باز از هم جدا شده است. سفارش آنها مهم نیست.
• بیشتر ویژگی ها مقادیر را می گیرند ، که از یک علامت برابر (=) پیروی می کنند. در HTML ، برخی از مقادیر ویژگی ها را می توان به کلمات توصیفی منفرد کاهش داد - به عنوان مثال ، ویژگی بررسی شده ، که باعث می شود یک کادر انتخاب هنگام بارگذاری فرم بررسی شود. با این حال ، در XHTML ، تمام ویژگی ها باید دارای مقادیر صریح باشند (Checked = "Checked"). ممکن است این نوع ویژگی را به نام یک ویژگی بولی بشنوید زیرا ویژگی ای را که روشن یا خاموش است توصیف می کند.
• یک مقدار ممکن است یک عدد ، یک کلمه ، یک رشته متن ، URL یا اندازه گیری بسته به هدف این ویژگی باشد. نمونه هایی از همه اینها را در طول این کتاب مشاهده خواهید کرد.
• برخی از مقادیر لازم نیست که در HTML در نقل قول باشند ، اما XHTML به آنها احتیاج دارد. بسیاری از توسعه دهندگان قوام و مرتب سازی نقل قول را حتی در هنگام تألیف HTML نشان می دهند. تا زمانی که به طور مداوم مورد استفاده قرار می گیرند ، علائم نقل قول یک یا دو برابر قابل قبول است. با این حال ، علائم نقل قول مضاعف کنوانسیون است. توجه داشته باشید که علائم نقل قول در پرونده های HTML باید مستقیم باشد (") نه فرفری (").
• برخی از ویژگی ها مانند ویژگی های SRC و ALT در عنصر IMG مورد نیاز است.
• نام ویژگی های موجود برای هر عنصر در مشخصات HTML تعریف شده است. به عبارت دیگر ، شما نمی توانید یک ویژگی را برای یک عنصر ایجاد کنید.

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

تمرین 4-4 |اضافه کردن یک تصویر

1. اگر در حال کار هستید ، اولین کاری که باید انجام دهید این است که یک کپی از فایل تصویر را در هارد خود دریافت کنید تا بتوانید هنگام باز کردن پرونده به صورت محلی ، آن را در محل خود مشاهده کنید. پرونده تصویری در مواد این فصل ارائه شده است. همچنین می توانید با ذخیره درست از صفحه وب نمونه به صورت آنلاین به آدرس www.leaingwebdesign.com/4e/materials/chapter04/bistro ، فایل تصویر را دریافت کنید. بر روی تصویر غاز کلیک راست (یا CTRL بر روی MAC) را کلیک کرده و "Save to Disk" (یا مشابه) را از منوی پاپ آپ انتخاب کنید همانطور که در شکل 4-13 نشان داده شده است. پرونده blackgoose.png را نامگذاری کنید. حتماً آن را در پوشه Bistro با index.html ذخیره کنید.
2. پس از داشتن تصویر ، با تایپ کردن در عنصر IMG و ویژگی های آن همانطور که در اینجا نشان داده شده است ، آن را در ابتدای عنوان سطح اول وارد کنید:

بیسترو غاز سیاه

ویژگی SRC نام پرونده تصویری را که باید درج شود ، ارائه می دهد و ویژگی ALT متنی را ارائه می دهد که در صورت عدم دسترسی تصویر باید نمایش داده شود. هر دوی این ویژگی ها در هر عنصر IMG مورد نیاز است.

شکل 4-13. ذخیره یک فایل تصویری از صفحه در وب.

Black Goose Bistro

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

شما سعی می کنید آن را به بخش محل و ساعت ها اضافه کنید تا خط را به بخش مکان و ساعت اضافه کنید تا صفحه شما با مثال در شکل 4-14 مطابقت داشته باشد.