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

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

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

مطالبی که در این مقاله یاد خواهید گرفت:

• نحوه عملکرد نشانه گذاری (markup) را متوجه می شوید ، از جمله مفاهیم عناصر (elements) و صفت ها (attributes) را درک می کنید.
• نحوه تفسیر اسناد HTML توسط مرورگرها را می بینید.
• ساختار پایه ای اسناد HTML را یاد می گیرید.
• نگاه اجمالی به یک style sheet عملی خواهیم داشت.

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

ساخت گام به گام یک صفحه وب

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

گام 1 : شروع با محتوا. به عنوان یک نقطه شروع ، محتوای متن خام را نوشته و خواهیم دید که چگونه مرورگرها با آن کار می کنند.

گام 2 : ساختار سند HTML را معرفی می نماییم. در مورد قاعده نوشتاری عناصر HTML و عناصری که سند ساختار آن را می دهد ، آموزش خواهیم داد.

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

گام 4 : افزودن تصویر. با افزودن تصویر به صفحه وب ، ویژگی ها و عناصر خالی را یاد خواهید گرفت.

گام 5 : تغییر دادن ظاهر صفحه با یک style sheet . این تمرین به شما لذت قالب بندی محتوای با Cascading Style Sheets را خواهد داد.

در انتهای کار ، شما خواهید توانست کد منبع (source code) را برای صفحه نمایش داده شده در شکل 1 را بنویسید. این صفحه بسیار فانتزی نیست ، اما برای شروع کار خوب است.

ما خروجی کار را به طور متناوب در یک مرورگر مورد بررسی قرار خواهیم داد. اما چون این مقاله مقدمه ای بر HTML است ، مفید است که علت و تأثیر هر تغییر کوچک را در کد منبع در طول مسیر ببینیم.

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

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

شکل 1- صفحه وب ساده

ساخت یک سند در Notepad (ویندوز)

مراحل زیر را برای ساخت یک سند در آموزش تصویری ساخت وب سایت در Notepad ویندوز 7 دنبال می کنیم :

1. منوی start را باز کرده و Notepad را در بخش Accessories پیدا می کنیم.
2. روی Notepad کلیک می کنیم تا یک پنجره document جدید باز شود ، اکنون همه چیز آماده است.
3. در این مرحله می خواهیم که پسوند فایل ها را قابل مشاهده نماییم. این مرحله برای ایجاد اسناد HTML مورد نیاز نیست ، اما این کار به ما کمک می کند که نوع فایل را در یک نگاه متوجه شویم. در Control Panel ، بخش گزینه “Folder Options …” را انتخاب کرده و زبانه View را انتخاب می کنیم. گزینه “Hide extensions for known file types” را پیدا کرده و آن را از حالت انتخاب خارج می کنیم. برای ذخیره تغییر اعمال شده ، روی کلید OK کلیک می کنیم ، و اکنون پسوند فایل ها قابل مشاهده خواهند بود.

ساخت یک سند جدید در TextEdit (مکینتاش)

به طور پیش فرض ، TextEdit اسناد "rich text" را ایجاد می کند ، یعنی اسنادی که دستورالعمل های قالب بندی سبک hidden را برای ساخت متن bold ، تنظیم اندازه فونت و غیره ایجاد می کند. وقتی که یک نوار ابزار قالب بندی در بالای پنجره باشد ، ما می توانیم متوجه شویم که TextEdit در حالت rich text است (حالت plain-text نیست). اسناد HTML باید اسناد متن ساده (plain-text) باشند ، بنابراین ما باید قالب را تغییر دهیم ، همان طور که در این مثال نشان داده شده است (شکل 2).

1. از Finder برای مراجعه به پوشه Applications و انتخاب TextEdit استفاده کنید. هنگامی که شما آن را یافتید ، دوبار بر روی نام یا آیکون آن کلیک کنید تا برنامه راه اندازی شود.
2. TextEdit یک سند جدید را باز می کند. منوی  text-formatting در بالای صفحه نشان می دهد که شما در حالت Rich Text هستید. در ادامه نحوه تغییر آن را شرح می دهیم.
3. کادر محاوره ای Preferences مربوط به TextEdit را باز می کنیم.
4. برای انجام کار نیاز به سه نوع تنظیمات داریم :

در زبانه “New Document” ، گزینه “Plain tex” را انتخاب می کنیم.

در زبانه “Open and Save” ، گزینه “Ignore rich text commands in HTML files” را انتخاب کرده و “Append ‘.txt’ extensions to plain text files” را غیرفعال می کنیم.

5. وقتی که کار انجام شد ، روی کلید قرمز در گوشه سمت چپ بالای صفحه کلیک می کنیم.
6. وقتی که یک سند جدید ایجاد می کنیم ، منوی formatting دیگر وجود نخواهد داشت و می توانیم متن خود را به عنوان یک سند HTML ذخیره کنیم. همیشه این امکان وجود دارد که یک سند را به rich text تبدیل کنیم. هنگامی که از TextEdit برای HTML استفاده نمی کنیم ، می توانیم با انتخاب «Format → Make Rich Text»  آن را به حالت rich text تبدیل کنیم.

گام 1 : شروع با محتوا

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

قواعد نامگذاری

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

برای فایل های خود از پسوندهای مناسب استفاده کنید. فایل های HTML و XHTML باید به .html ختم شوند. تصاویر گرافیکی وب باید بر اساس فرمت فایل برچسب گذاری شود: .gif، .png، یا .jpg (.jpeg نیز قابل قبول است).

هرگز از کاراکتر فاصله در نام فايل ها استفاده نكنيد. مرسوم است که از یک کاراکتر underline یا خط فاصله استفاده شود تا فاصله بصری در نام های فایل ایجاد شود ، مانند robbins_bio.html یا robbins-bio.html

اجتناب از استفاده از کاراکترهای ویژه مانند ؟ ، ٪ ، # ، / ، : ، ؛ ، و غیره. نام فایل ها را محدود به حروف ، اعداد ، خط فاصله ، خط تیره کنید.

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

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

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

تمرین 1

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

Black Goose Bistro

The Restaurant
The Black Goose Bistro offers casual lunch and dinner fare in
a hip atmosphere. The menu changes regularly to highlight the
freshest ingredients.

Catering
You have fun... we'll handle the cooking. Black Goose Catering
can handle events from snacks for bridge club to elegant corporate
fundraisers.

Location and Hours
Seekonk, Massachusetts;
Monday through Thursday 11am to 9pm, Friday and Saturday, 11am to
midnight

2- “Save”  یا “Save As”را از منوی File انتخاب کنید تا کادر محاوره ای Save As باز شود. اولین کاری که باید انجام دهید این است یک پوشه جدید ایجاد کنید که شامل همه فایل های مربوط به سایت شما باشد (به عبارت دیگر ، این پوشه ، پوشه  local root شما می باشد.)

ویندوز : برای ایجاد پوشه جدید ، روی آیکون folder در بالای صفحه کلیک کنید.

Mac : روی کلید “New Folder” کلیک کنید.

نام پوشه جدید را  bistro قرار داده  و فایل متنی را به عنوان index.html در آن ذخیره کنید. کاربران ویندوز نیاز دارند “All Files” را پس از “Save as type” را انتخاب کنید تا از این که Notepad یک پسوند “.txt” را به filename شما بدهد ، جلوگیری کنید. filename باید به .html ختم شود تا برای مرورگر به عنوان یک سند وب شناخته شود.

3- اجازه دهید نگاهی به index.html در یک مرورگر بیاندازیم. مرورگر مورد علاقه خود را راه اندازی کنید (ما از Google Chrome استفاده می کنیم) و از منوی File گزینه Open یا Open File را انتخاب کنید. به index.html بروید و سپس سند را برای باز کردن آن در مرورگر انتخاب کنید. شما باید چیزی شبیه تصویر صفحه زیر را ببینید. ما در مورد نتایج در بخش زیر صحبت خواهیم کرد.

مرورگرها از چه چیزهایی چشم پوشی می نمایند؟

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

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

long,     long      ago

چیزی که مرورگر نمایش می دهد به صورت زیر است :

long, long ago

line break ها (carriage return) . مرورگرها carriage return  را به فضای سفید تبدیل می کنند ، از این رو ، بر اساس "قانون چشم پوشی از فاصله های چندتایی" که مطرح شد ، line break ها بر روی قالب بندی صفحه تاثیری نمی گذارند. متن و عناصر به طور پیوسته پوشش داده می شوند ، تا زمانی که یک عنصر بلوک جدید مانند یک عنوان (h1) یا پاراگراف (p) یا عنصر شکست خط(br)  در جریان متن سند نمایان شود.

Tab ها . این عنصر نیز به کاراکتر فضای خالی تبدیل می شود.

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

متن درج شده در comment ها. مرورگرها متن میان تگ های ویژه <!—and --> را که برای درج یک comment مورد استفاده قرار می گیرند ، نمایش نمی دهند.

آموزه های گام اول

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

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

گام 2 : دادن ساختار به سند

ما محتوای خود را در یک سند html ذخیره کرده ایم و اکنون آماده هستیم تا نشانه گذاری آن را در آموزش تصویری ساخت وب سایت شروع کنیم.

معرفی عناصر HTML

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

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

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

نام عنصر در تگ باز (یا تگ شروع) و دوباره در تگ بستن (یا پایان) قبل از اسلش (/) ظاهر می شود. تگ بستن چیزی شبیه یک سوئیچ خاموش برای عنصر عمل می کند. مراقب باشید از کاراکتر backslash مشابه در تگ های پایانی استفاده نکنید.

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

آخرین مورد در خصوص حروف بزرگ است. در HTML ، بزرگنمایی حروف نام عناصر مهم نیست. بنابراین <img>، <Img> و <IMG>  به اندازه ای که به مرورگر مربوط است ، همگی مشابه هستند. با این حال ، در XHTML تمام نام های عنصر باید با حروف کوچک باشند تا معتبر شناخته شوند. بسیاری از توسعه دهندگان وب با قوانین نشانه گذاری XHTML سختگیرانه تر مواجه شده و در تبعیت از آنها با حروف کوچک کار می کنند.

نکته Slash یا backslash

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

به راحتی می توان  کاراکتر slash (/) را با کاراکتر backslash (\) که در زیر کاراکتر (|) واقع شده است ، اشتباه گرفت. کلید backslash در تگ ها یا URL ها کار نمی کند ، بنابراین مراقب باشید از آن استفاده نکنید.

ساختار پایه ای سند HTML

در تصویر زیر ساختار حداقل یک سند HTML5 نشان داده شده است. بهتر است بگوییم "ساختار توصیه شده" در آموزش تصویری ساخت وب سایت ، زیرا حداقل عنصری هستند که در HTML مورد نیاز است ، عنصر title می باشد. اما احساس می شود که این ساختار پایه ای ، به ویژه برای مبتدیان ، برای سازماندهی اسناد با نشانه گذاری ساختاری مناسب بهتر است  و اگر شما با XHTML سختگیرانه کار بکنید ، تمام عناصر زیر به غیر از meta را باید در سند درج کنید تا معتبر شود. بیایید نگاهی به آنچه در شکل زیر می بینیم ، بیاندازیم.

1. خط اول در این مثال به هیچ وجه عنصر HTML نمی باشد. این خط اعلان نوع سند (document type declaration و همچنین DOCTYPE declaration  نیز گفته می شود) است که تعیین می کند که این سند ، یک سند HTML5 می باشد. و اجازه می دهد مرورگرهای مدرن بدانند که آنها باید سند را با توجه به مشخصه های HTML5 تفسیر نمایند.
2. کل سند در یک عنصر html قرار دارد. عنصر html به عنوان عنصر ریشه (root element) شناخته می شود ، زیرا حاوی تمام عناصر موجود در سند است. این عنصر برای هر اسناد HTML و XHTML استفاده می شود.
3. درون عنصر html ، سند به دو بخش head و body تقسیم می شود. عنصر head حاوی اطلاعات توصیفی در مورد خود سند ، از قبیل عنوان آن ، style sheet (های) استفاده شده در سند ، اسکریپت ها و سایر انواع اطلاعات “meta” می باشد.
4. عناصر meta در درون عنصر head اطلاعاتی در مورد خود سند ارائه می دهند. یک عنصر meta می تواند برای ارائه انواع اطلاعات مورد استفاده قرار گیرد ، اما در این مثال ، رمزگذاری کاراکتر (مجموعه ای استاندارد از حروف، اعداد و نمادها) که در سند استفاده می شود را مشخص می کند. در اینجا قصد نداریم که جزئیات دقیقی در مورد این موضوع ارائه دهیم، اما همین مقدار می توان اشاره کرد که دلایل زیادی برای مشخص کردن charset در هر سندی وجود دارد ، بنابراین آن را به عنوان بخشی از حداقل های ساختار سند معرفی می کنیم.

یادداشت : پیش از HTML5 ، قاعده نوشتاری برای مشخص کردن مجموعه کاراکتر با عنصر متا ، کمی پیچیده تر بود. اگر شما اسناد خود را در HTML 4.01 یا XHTML 1.0 نوشته باشید ، عنصر meta شما باید به صورت زیر باشد:

<meta http-equiv="content-type" content="text/html;charset=UTF-8">

5. هم چنین در بخش head عنصر title اجباری است. با توجه به مشخصه HTML ، هر سند باید دارای یک عنوان توصیفی باشد.
6. در نهایت ، عنصر body شامل همه چیزهایی است که ما می خواهیم در پنجره مرورگر نشان دهیم.

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

تمرین 2 : افزودن ساختار پایه ایی

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

<!DOCTYPE html>

3. کل سند را در یک عنصر ریشه HTML قرار دهید. این کار را با افزودن تگ <html> شروع ، در ابتدای و تگ پایان</html>  در انتهای متن انجام دهید.
4. سپس ، بخش head سند را ایجاد کنید که حاوی عنوان برای صفحه است. تگ های <head> و </head>را قبل از محتوا قرار دهید. در داخل عنصر head ، اطلاعاتی در مورد کدگذاری کاراکتر <meta charset = "utf-8">  و عنوان “Black Goose Bistro"  اضافه می شود که با باز کردن و بستن تگ های <title>  انجام می شود.

اصطلاح صحیح این است که بگوییم عنصر title در عنصر head تو در تو است.

5. در نهایت ، بخش body سند را با قرار دادن محتوای خود در تگ های <body>  و </body> ، تعریف کنید. پس از این که این کار انجام شد ، سند منبع باید به صورت زیر باشد (نشانه گذاری ها به رنگ قرمز نشان داده می شود تا برجسته شوند):

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>Black Goose Bistro</title>
</head>

<body>
Black Goose Bistro

The Restaurant
The Black Goose Bistro offers casual lunch and dinner fare in a hip atmosphere. The menu changes regularly to highlight the freshest ingredients.

Catering
You have fun... we'll do the cooking. Black Goose catering can handle events from snacks for bridge club to elegant corporate fundraisers.
Location and Hours Seekonk, Massachusetts; Monday through Thursday 11am to 9pm, Friday and Saturday, 11am to midnight
</body>

</html>

6. سند را در دایرکتوری bistro ذخیره کنید ، به طوری که با نسخه قدیمی آن جایگزین شود. فایل را در مرورگر باز کنید یا گزینه "reload" یا "refresh" را  ضربه بزنید. تصویر زیر خروجی نمایش داده شده در مرورگر را نشان می دهد.

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

گام 3 : شناسایی عناصر Text

مقدمه ای بر نشانه گذاری معنایی

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

وظیفه شما در دوره آموزش تصویری ساخت وب سایت ، هنگام نشانه گذاری محتوا این است که عنصر HTML را انتخاب کنید که توصیف معنادارتری برای محتوا فراهم کند. ما این کار را نشانه گذاری معنایی (semantic markup) می نامیم. به عنوان مثال ، مهم ترین عنوان در ابتدای سند باید با h1 مشخص شود ، زیرا مهم ترین عنوان در صفحه است. نگران آن چه که در مرورگر دیده می شود ، نباشید. شما می توانید به راحتی آن را با یک style sheet تغییر دهید. مهم این است که شما عناصر را بر اساس آنچه که برای محتوای مناسب تر است ، انتخاب می کنید.

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

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

1. صفحه index.html سند را در ویرایشگر متن خود باز کنید ، اگر قبلا باز نشده باشد.
2. خط اول متن “Black Goose Bistro" ، تیتر اصلی برای صفحه است ، بنابراین ، در ابتدای خط ما آن را به عنوان یک عنصر Head1 سطح اول (h1)  با تگ باز  <h1> نشانه گذاری کنید و تگ بستن </h1>  را بعد از آن قرار دهید ، مانند این:

<h1>Black Goose Bistro</h1>

3. صفحه ما هم چنین سه زیرتیتر دارد. آنها را به عنوان عناصر سطح 2 (h2)  به شیوه ای مشابه نشانه گذاری کنید.

<h2>The Restaurant</h2>

4. هر عنصر h2 با یک پاراگراف کوتاهی از متن دنبال می شود ، بنابراین آن را به عنوان عناصر پاراگراف (p)  به شیوه ای مشابه نشانه گذاری کنید.

<p>The Black Goose Bistro offers casual lunch and
dinner fare in a hip atmosphere. The menu changes
regularly to highlight the freshest ingredients.
</p>

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

<p> You have fun... <em>we'll handle the cooking
</em>. Black Goose Catering can handle events
from snacks for bridge club to elegant corporate
fundraisers.</p>

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

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