محتوا

• مراحل
• قسمت 1: چگونه HTML را کشف کردم
• مشاوره
• هشدار
• آنچه شما نیاز دارید

HTML (HyperText Markup Language) یک زبان اساسی برای ساخت صفحات وب است. این به عنوان یک زبان برنامه نویسی آسان و انعطاف پذیر ایجاد شده است. تقریباً هر وب سایتی در اینترنت با نوعی از این کد (ColdFusion ، XML ، XSLT) ساخته شده است. درک HTML آسان است ، اما اگر به عملکرد جامع آن علاقه دارید می توانید مدت ها در مورد آن یاد بگیرید. برای افزودن رنگ و سرگرمی به وب سایت خود ، می توانید اصول CSS را به محض عادت به یک صفحه اصلی HTML بیاموزید.

مراحل

قسمت 1 از 4: ساختن یک سند

1. 

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

2. 

   
   
   یک فایل را به عنوان صفحه وب ذخیره کنید. File → Save As را در فهرست بالا انتخاب کنید. قالب پرونده را به "صفحه وب" ، ".html" یا ".htm" تغییر دهید. فایل را در جایی ذخیره کنید که به راحتی می توانید آن را پیدا کنید.
   • هیچ تفاوتی بین این سه گزینه وجود ندارد.

3. 

   پرونده را در مرورگر باز کنید. روی پرونده دوبار کلیک کنید ، و به طور خودکار به عنوان یک صفحه وب خالی در مرورگر شما باز می شود. همچنین می توانید مانند Firefox یا Internet Explorer یک مرورگر را باز کنید و سپس برای انتخاب سند از File → Open File استفاده کنید.
   • این وب سایت آنلاین نیست فقط در رایانه شما قابل مشاهده است.

4. 

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

5. 

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

6. 

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

7. 

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

8. 

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

قسمت 2 از 4: قالب بندی متن

1. 

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

2. 

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

   • من برای نوشتن یک صفحه HTML دستورالعمل های wikiHow را دنبال کردم.

   • هدف من امروز:

   • اهداف انجام شده:

   • نحوه استفاده از عناوین را بیاموزید.

   • اهداف ناتمام:

   • برچسب های قالب بندی متن بیشتر بیاموزید.

3. 

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

4. 

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

   • برچسب "پاراگراف" (پاراگراف) کل متن را در بین این برچسب ها در یک پاراگراف نگه می دارد و آن را از متن بالا و پایین آن جدا می کند.

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

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

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

     بعداً می توانید منبع را با آن توصیف کنید کارت استناد.

5. 

   متن زیرنویس نامرئی را اضافه کنید. برچسب های نظر در صفحه وب نمایش داده نمی شوند. آنها به شما امکان می دهند بدون تأثیرگذاری بر محتوا ، خود را در سند HTML حاشیه نویسی کنید. برچسب پایانی اضافه نکنید.
   • کارت هایی که بدون پایان برچسب به تنهایی می روند ، "برچسب های خالی" نامیده می شوند.

6. 

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

   • امیدوارم از این صفحه لذت ببرید!

     من آن را فقط برای شما ساخته ام.

   • قسمت 1: چگونه HTML را کشف کردم

   • من HTML را قبلاً آموخته ام یکی دوساعت ، بنابراین اکنون من یک متخصص هستم.
   تبلیغات

قسمت 3 از 4: افزودن پیوندها و تصاویر

1. 

   درباره ویژگی ها بیاموزید. برچسب ها می توانند اطلاعات اضافی در داخل خود داشته باشند ، به نام ویژگی ها. این ویژگی ها با کلمات اضافی درون خود برچسب ها ، به صورت نشان داده می شوند نام خاص = "مقدار خاص". به عنوان مثال ، هر برچسب HTML می تواند ویژگی عنوان را داشته باشد:

   • پاراگراف مقدمه اینجا است.

     پاراگراف را به عنوان "مقدمه" عنوان کنید ، هنگامی که شما روی پاراگراف روی صفحه وب می روید.

2. 

   پیوند به وب سایت های دیگر. استفاده از کارتها برای ایجاد پیوند به هر صفحه وب دیگر. URL صفحه وب را برای پیوند دادن به استفاده از ویژگی href وارد کنید. در اینجا مثالی آورده شده است که به صفحه وب خوانده شده شما پیوند داده شده است:
   • بازدید کنندگان از وب سایت شما می توانند برای دنبال کردن لینک ، روی این متن کلیک کنند.

3. 

   ویژگی id را به برچسب اضافه کنید. ویژگی دیگری که هر برچسب HTML می تواند استفاده کند ، عنصر "id" است. در هر کارت بنویسید id = "vidu" یا از نامی استفاده کنید که فاقد فاصله باشد. هیچ اثر قابل مشاهده ای ایجاد نمی کند ، اما در مرحله بعدی از آن استفاده خواهیم کرد.
   • به عنوان مثال ، موارد زیر را به سند خود اضافه کنید:

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

4. 

   پیوند به عنصری با شناسه خاص. اکنون می توانیم از برچسب هایپر لینک استفاده کنیم ، ، برای پیوند دادن به مکان دیگری در همان صفحه. به جای URL ، از نماد # و به دنبال آن مقدار id که می خواهیم به آن پیوند دهیم استفاده خواهیم کرد. مثلا، این متن با شناسه "vidu" به متن پیوند خواهد یافت.
   • همه مقادیر HTML به حروف کوچک و بزرگ حساس هستند. "#VIDU" و "#vidu" هر دو به یک مکان پیوند می یابند.
   • اگر صفحه شما به اندازه کافی کوتاه باشد تا بتواند یکباره کل صفحه را نمایش دهد ، با کلیک کردن روی پیوند در مرورگر خود ، احتمالاً متوجه اتفاقی نمی شوید. اندازه پنجره را تغییر دهید تا نوار پیمایش ظاهر شود و دوباره امتحان کنید.

5. 

   اضافه کردن عکس. کارت یک برچسب خالی است ، به این معنی که هیچ برچسب پایانی مورد نیاز نیست. تمام اطلاعاتی که مرورگر برای نمایش تصویر نیاز دارد با استفاده از ویژگی ها اضافه می شود. در اینجا مثالی برای نمایش آرم wikiHow آورده شده است ، با توصیف هر ویژگی پشت سر:
   • 
   • خواص src = "" به مرورگر می گوید عکس کجاست. (توجه داشته باشید که ارسال عکس از سایت شخص دیگری نامناسب تلقی می شود - و وقتی صفحه دیگر فعال نباشد عکس ناپدید می شود.)
   • خواص سبک = "" این می تواند کارهای زیادی را انجام دهد ، اما مهمتر از همه برای تنظیم عرض و ارتفاع تصویر در پیکسل است. (همچنین می توانید به جای آن از صفات جداگانه width = "" و height = "" استفاده کنید ، اما اگر از CSS استفاده کنید این می تواند منجر به مشکلات تغییر اندازه عجیب و غریب شود).
   • خواص alt = "" شرح مختصری از تصویر است که کاربر در صورت عدم بارگذاری تصویر مشاهده خواهد کرد. این یک الزام محسوب می شود ، زیرا برای خوانندگان صفحه نمایش برای بازدید کنندگان وب سایت که نابینا هستند استفاده می شود.
   تبلیغات

قسمت 4 از 4: با افزودن و دریافت آنلاین وب سایت خود بیشتر بیاموزید

1. 

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

2. 

   برچسب ها و ویژگی های بیشتر را بیاموزید. بسیاری دیگر از برچسب ها و ویژگی های HTML و مکان های مختلف برای یادگیری آنها وجود دارد:
   • برای آموزش های بیشتر و لیست کامل برچسب ها ، w3schools و HTML Dog را امتحان کنید.
   • صفحه وب مورد علاقه خود را از نوع ظاهری خود پیدا کنید ، سپس از عملکرد "مشاهده صفحه منبع" مرورگر خود برای دیدن کد HTML خود استفاده کنید. آن را در سند خود کپی کرده و نحوه کار آن را مطالعه کنید.
   • مقالات دیگر را بخوانید و در مورد نحوه ایجاد جداول در HTML ، استفاده از برچسب های متا برای افزایش شانس یافتن آن از طریق موتورهای جستجو یا استفاده از بخش ، اطلاعات کسب کنید. یک منطقه را در صفحه تنظیم کنید) و span (برای تعیین سبک عنصر متن استفاده می شود) برای کمک به سبک از طریق CSS.

3. 

   وب سایت خود را بصورت آنلاین دریافت کنید. سرویسی را برای میزبانی وب سایت خود انتخاب کنید و سپس می توانید هر تعداد صفحه HTML را که می خواهید در دامنه وب شخصی خود بارگذاری کنید. برای انجام این کار ، شما باید از نرم افزار بارگذاری FTP استفاده کنید ، اما بسیاری از سرویس های اجاره وب نیز این سرویس را ارائه می دهند.
   • هنگام پیوند دادن به صفحات یا تصاویر مستقیماً در سایت خود ، باید از آدرس کامل استفاده کنید. به عنوان مثال ، اگر نام دامنه شما www.chuyengiahtmlsieudang.com است ، بنابراین متن در این برچسب ها است به "www.chuyengiahtmlsieudang.com/nhatky/thuhai.html" پیوند خواهد داد

4. 

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

5. 

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

مشاوره

• اعلامیه doctype (اعلامیه نوع سند استفاده شده) در این مقاله آموزشی "loose HTML 4.0.1 tranzition" است (HTML 4.0.1 انتقال سخت نیست) ، قالبی آسان. برای تازه کارها استفاده کنید. استفاده کنید () یک گزینه جایگزین برای مرورگر برای کامپایل آن در قالب دقیق HTML 5 ، که سبک استاندارد توصیه شده (البته کمتر مورد استفاده قرار می گیرد) است.

هشدار

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

آنچه شما نیاز دارید

• یک ویرایشگر متن ساده ، مانند NotePad یا TextEdit
• یک مرورگر وب ، مانند اینترنت اکسپلورر یا Mozilla Firefox
• (اختیاری) یک ویرایشگر HTML مانند Adobe Dreamweaver ، Aptana Studio یا Microsoft Expression Web